Jump to content

Web Design/Build a basic web page

Add links
From Wikiversity
Web Design → Build a basic web page
 This page is part of the Web Design project.

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.

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

[edit | edit source]

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 colors 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

[edit | edit source]

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 edit!

  • 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

[edit | edit source]

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

[edit | edit source]

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

[edit | edit source]
  • 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

[edit | edit source]

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 my nigga!

An HTML Editor

[edit | edit source]

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. The best editor for Windows users (that can edit almost all languages and can open all file types) is VSCode. It's small and downloads fast, and it's pretty effective. Using the same link, Mac users can download VSCode for Mac. For Linux users, well, Linux comes with Vim, another code editor. For other HTML editors, see Useful Applications.

[edit | edit source]

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

[edit | edit source]
Retrieved from "https://en.wikiversity.org/w/index.php?title=Web_Design/Build_a_basic_web_page&oldid=2578367"