Web Design/Build a basic web page

< Web Design

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

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

What is HTML anyway? – Discovering that you've been marking-up stuff your whole life! Includes hands-on activities.

Try out the first challenge in HTML Challenges and learn how to structure your HTML code.

Work your way through the HTMLDog's HTML Beginners Guide.

Now try out the remaining challenges at HTML Challenges.

For most people, A step-by-step web design project is a great place to start to see how basic HTML and CSS skills can be put to work.

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.

Lists and Tables – An introduction to lists and tables in HTML.

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).

HTMLDog's HTML Beginners Guide and CSS Beginners Guide provide excellent step-by-step learning pathways!
Tizag also has a good series of HTML tutorials (along with many others although the last time this site was updated was 2008)
WestCiv's Hands-on CSS tutorial - An excellent hands-on project-based CSS tutorial (this tutorial builds on your HTML foundation)! This tutorial extends past the basics of CSS but includes an excellent intro too!
Mezzoblue's HTML markup guide - From the guy who created the css Zen Garden, this guide covers HTML basics including Headings, paragraphs, a number of inline text tags and lists.
CSS From the ground up - Another excellent step-by-step tutorial for learning the basics of HTML/CSS coding.
W3Schools tutorials - Some great step-by-step tutorials, but lots of ads.
Wikibooks CSS Guide - A detailed wikibook on CSS
b:Authoring Webpages - Another Wikibook tutorial
PHP Tutorial - HTML, CSS tutorials.

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

HTML: What is HTML, Advanced HTML Tutorial, HTML Challenges, Lists and Tables, The Structure of HTML, Pen and Paper HTML activities
CSS: Learning Basic HTML and CSS, CSS challenges, Embedded CSS, Basic HTML and CSS Tutorial, Inline CSS, Develop cascading style sheets, CSS3 Animations
PHP: Simple functions in PHP, Dynamic websites, PHP challenges, Dynamic websites with PHP, Generating a receipt with PHP, Responding to HTML forms with PHP,
JavaScript: An Introduction to Programming with JavaScript, JavaScript Challenges, Getting to know JavaScript events, Getting to know the Document Object Model with JavaScript, JavaScript pen-n-paper activities, Web Programming Intro, Produce basic client side script for dynamic web pages
XML: XML challenges
Databases: Creating Database Tables
Projects: A small website project, A step-by-step web design project, Build a basic web page, Build a small website
Challenges: Web design, HTML, AJAX, CSS, JavaScript, PHP, XML, Information Architecture, Algorithms
Activities: Web design group learning activities, Pen and Paper HTML activities, A Web Design Quiz show, Ordering Tasks for a Web Project, Paired Bio Pages, Scoping a Small Project, Emerging Technologies Research Activities
Project management: An introduction to Project Management, Developing a Client Project
Design: Accessibility, Design Principles for Web Design, Design Suggestions
Testing: Testing Website performance, Website Performance Test Plan
Publishing: Getting Your Site On the Web
Certification and standards: Cert IV Website Qualifications in Australia, Australian Qualifications, Web design qualifications
Professional development: Contribute to personal skill development and learning, Useful Applications, Useful Books, Emerging Technologies, Using the Internet as a Learning Tool
Course meta-information: Web Design, About the web design learning project, New Structure, Sample Timetable

This article is issued from Wikiversity - version of the Friday, July 17, 2015. The text is available under the Creative Commons Attribution/Share Alike but additional terms may apply for the media files.