Build A Basic Web Page
Web Design -> Build a basic web page
DeliciousFruitFromOSWD.png
This page is part of the Web Design project.
CSSZenGardenLikeTheSea.png

We're going to start slowly and introduce the two main tools that you need to build a basic web page:

  • HyperText Markup Language (HTML), which we use for all the information or content of our web page, and
  • Cascading StyleSheets (CSS), which we use to style the content of our web page.

We'll be learning the basics of these two tools through some fun, hands-on, practical activities.

To get an idea of what is possible with HTML and CSS, take a few minutes to browse some of the designs at the css Zen Garden.

Applications-accessories.svg
Activity: What's so special about the CSS Zen Garden?
As you browse the different pages on the CSS Zen Garden, can you identify what is similar and what is different about each page? Try explaining to someone why this is important.

Once you've glimpsed some of the power of great HTML and CSS design, let's get back to the basics and start learning! To get started straight away, jump right in to the first learning activity: What is HTML anyway? Or, if you want to know what's covered by the activities in Build a basic web page, checkout the following checklist.

Checklist

After working through the activities in this section, you should be familiar with the following:

  • Creating your first HTML page
  • Using basic HTML tags and attributes (<html>...</html>, <head>...</head>, <body>...</body>)
  • Creating Page Titles, Paragraphs and Headings (<title>...</title>, <p>..</p>, <h1>...</h1>)
  • Creating Links, Images and lists (<a>...</a>, <img>, <ul>...</ul>)
  • Changing fonts and colours with CSS
  • Setting borders, margins and padding
  • Defining CSS selectors, properties and values
  • Validating our HTML documents using the W3C online validator and the DOCTYPE of your choice (such as the HTML 4.01 Strict DOCTYPE).
  • using <marquee></marquee>

Ready for a test? Give the beginner HTML exam questions and CSS exam questions a try to check your familiarity with the new concepts!

Suggested activities

The following activities may help you apply the skills outlined above as you learn them in the context of a small project. To participate in collaborative "learn by doing" projects, get your account on the Wikiversity Sandbox Server. If you can think of new learning projects or ways to improve the existing ones, please !

  • What is HTML anyway? - Discovering that you've been marking-up stuff your whole life! Includes hands-on activities.
  • CSS challenges - Once you're feeling vaguely familiar with HTML and CSS, you might be ready to try Challenges 1 and 2.
  • HTML Quiz - an online multiple choice HTML quiz
  • Make a web page containing all of the tags you know embeded in that and use it for yor future reference and add more tags whenever you learn more and more tags.
  • The Structure of HTML - An introduction to elements.
  • Pen and Paper HTML activites - Get away from the screen and try to solve these HTML activities!
  • HTML Programming - create and validate a simple web page. Remember to validate every document you create for the other activities.

Your learning resources

The following resources may help you get started, but they are only suggestions. You may have other resources that you have found to be incredibly useful for learning the basics... and if so, why not update this page! Use these resources together with the suggested activities (or your own activities) to apply what you're learning as you go.

Online tutorials

There are a lot of excellent tutorials out there for learning the basics of HTML and CSS, but many are out of date and obsolete. Here are a few tutorials that some of us have found useful: (please feel free to recommend others, but try to limit this list to 5).

Several other tutorials can be found online.

As you move through a tutorial, you may want to apply some of what you're learning to one of the suggested activities.

Online references

  • CSS Cheat Sheet - everything you'll ever need to remember about CSS all packed onto one page!
  • Web Design References - A huge mega-reference (nearly 6,000 links) of information and articles about web design and development. It is dedicated to disseminating news and information about web design and development with emphasis on elements of CSS, accessibility, web standards, user experience, and much more.
  • - Web Design Update - A a plain text email digest newsletter. It typically goes out once a week. All web designers and developers are invited to join.

Books

Like the tutorials, there's lots of great books and even more obsolete ones. One book that introduces the basic tools of the Web (HTML and CSS) using current standards but without overwhelming the reader with detail is Elizabeth Castro's Creating a Web Page with HTML. The book steps you through a small web project from beginning to end, including everything from creating the basic HTML, CSS and images, through to publishing your site on the web.

You might want to check out other Useful Books for learning the basics too!

An HTML Editor

To edit HTML you need a basic text editor. Although you can use something as simple as Notepad, a dedicated HTML editor can provide lots of useful features (such as colour syntax highlighting) and automatic error checking that will become more important as your HTML pages grow. At the other end of the spectrum, word processors (such as Microsoft Word) often provide "Save as HTML" functions but they add extra formatting that may make your HTML display unpredictably, and as a result are not recommended.

Ideally you'll find it easiest to use a text editor that provides a bit of extra functionality for editing HTML text. One excellent text editor that is designed for editing HTML and is completely free is PSPad. Another free high-end HTML/CSS editor is HTML-Kit for Windows systems. Notepad++ is also another option for Windows users. For other HTML editors, see Useful Applications.

Related Qualifications

You can find out how what you've learned in this module relates to qualifications in your country on the Learning Basic HTML and CSS:Quals page.

Further reading


  This article uses material from the Wikipedia page available here. It is released under the Creative Commons Attribution-Share-Alike License 3.0.


Build_a_basic_web_page
 

Manage research, learning and skills at IT1me. Create an account using LinkedIn to manage and organize your IT knowledge. IT1me works like a shopping cart for information -- helping you to save, discuss and share.


  Contact Us  |  About IT1me.com |  IT Training & References |  IT Careers |  IT Hardware |  IT Software |  IT Books