Best viewed at 1024 x 768 using a colour depth greater than 256

Three Steps Of Web Page Design

This page has been tested and conforms to WCAG 2.0 Accessibility Guidelines

About This Tutorial ...

Learn the concept of applying HTML Markup to a text document so that the document can be displayed in a web browser and then applying CSS Styles to the Markup so that the document takes on a formatted appearance. This page provides three demonstrations that will take you through the process in visual terms, of converting a text document into a basic web page and then converting the basic web page into a formatted web page.

What Is HTML?

HTML (Hypertext Markup Language) is one of the core languages used to create web pages from text documents, for publication on the World Wide Web (or Web with a capital 'W' for short). If you think of the World Wide Web as a massive document retrieval system then HTML is the primary Markup language that is used to add structure to text documents, so that they can be downloaded from Web servers and displayed in a web browser. There are many languages associated with the creation of web pages but none of the associated 'client side' extension languages could be used to create web pages without using HTML. Conversely, HTML can be used to Markup a basic web page without using any of the HTML extension languages. To help you put HTML into context, we have provided the following glossary of 'language types' in common use on the Web.

Types of computer languages used in the context of the creation of a modern web page ...

Markup: Markup Tags are added to standard ASCII text documents to apply structure to the contents, for later interpretation by a web browser or other 'machine reader'. Example Language: HTML (Hypertext Markup Language).
Styles: Styles are typically applied to HTML Markup Tags to add instructions (recommendations) as to the style and positioning of the contents of a Tag. These style instructions could include font type, color, spacing, positioning, etc. Example Language: CSS (Cascading Style Sheets).
Scripting: Scripting languages can be used to add programmable interaction to a web page. Scripting languages operate within the confines of a 'sandbox', in this context within the confines of a web browser, Example Language: JavaScript (including variants JScript and ECMA Script).
Programming: Programming languages operate on a web server. A typical usage would be to accept the data entered into an HTML Form on a web page, store this date in a data file or database on the web server and then return a 'response page', thanking the user for submitting the information. Example Language: PERL (Practical Extraction and Report Language).
CGI: CGI (Common Gateway Interface) is not a language, it is a protocol. In this context, this means that CGI enables communication between a web page on a users computer (client side) and a computer program on a web server (server side).

Understanding Markup ...

It never ceases to surprise me how many web authors do not properly understand the concept of applying Markup to a text document so that the document can be displayed in a web browser, and then applying styles to the Markup so that the document takes on a formatted appearance. To try and overcome this I have prepared a series of three demonstrations that will walk you through the process in visual terms, of converting a text document into basic web page and then proceeding to convert the basic web page into a formatted web page. At each stage you can see the results displayed in your browser and this demonstration should be useful to both absolute beginners and the advancing student of web design. In case you are wondering, Markup is the correct name for HTML Code.

The demonstration is based on the idea of creating a simple letter received from an applicant for the job of Webmaster at Web-Wise-Wizard and taking the letter through the three stages mentioned above.

1: Prepare The Text Content

Click this link to see how a web browser displays the following text letter ...

Display This Text Document Without Markup or Styles Added

23 Arcadia Street

Colnebrook

Midtown

Rutland

Dear Mr Wizard,

Re: Vacancy for Webmaster

I wish to apply for the position of Webmaster on your Web-Wise-Wizard Website. I believe that I have the skills, experience and qualifications that will exactly fit your requirements.

On the web design side I am competent in hand coding HTML Markup, CSS Styles and JavaScript scripting. On the web server administration side I am experienced in administering an Apache web server and generally fulfilling the duties of Webmaster.

My CV is attached and if you decide to interview me then I will be pleased to bring my certificates and references to the meeting so that you can verify them.

Yours faithfully

Wendy Wonderworld

2: Page Content With Markup Applied

Click this link to see how a web browser displays the following web page ...

Display The Same Document With HTML Markup Applied

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Letter To Mr Wizard</title>

</head>

<body>

<div>23 Arcadia Street</div>

<div>Colnebrook</div>

<div>Midtown</div>

<div>Rutland</div>

<p>Dear Mr Wizard,</p>

<p>Re: Vacancy for Webmaster</p>

<p>I wish to apply for the position of Webmaster on your Web-Wise-Wizard Website. I believe that I have the skills, experience and qualifications that will exactly fit your requirements.</p>

<p>On the web design side I am competent in hand coding HTML Markup, CSS Styles and JavaScript scripting. On the web server administration side I am experienced in administering an Apache web server and generally fulfilling the duties of Webmaster.</p>

<p>My CV is attached and if you decide to interview me then I will be pleased to bring my certificates and references to the meeting so that you can verify them.</p>

<p>Yours faithfully</p>

<div>Wendy Wonderworld</div>

</body>

</html>

3: Content With Both Markup and Styles

Click this link to see how a web browser displays the following web page ...

Display The Same Document With HTML Markup And CSS Styles Applied

Color Codes: Black=Page Content Brown=HTML Markup Blue=CSS Styles

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Letter To Mr Wizard</title>

<!--

body {

margin:40px;

font-family:Verdana,Arial,Helvetica,sans-serif;

background-color:#008800;

}

.surround {

border:4px double #009900;

background-image:url('brightBack-1.gif');

padding:50px;

}

.address {

text-align:center;

font-size:11pt;

font-weight:bold;

}

p {

font-size:10pt;

text-align:justify;

}

.heading {

font-weight:bolder;

text-decoration:underline;

}

#signature {

font-family:cursive;

font-size:12pt;

color:#009900;

}

-->

</style>

</head>

<body>

<div>23 Arcadia Street</div>

<div>Colnebrook</div>

<div>Midtown</div>

<div>Rutland</div>

</div>

<p>Dear Mr Wizard,</p>

<p class="heading">Re: Vacancy for Webmaster</p>

<p>I wish to apply for the position of Webmaster on your Web-Wise-Wizard Website. I believe that I have the skills, experience and qualifications that will exactly fit your requirements.</p>

<p>My CV is attached and if you decide to interview me then I will be pleased to bring my certificates and references to the meeting so that you can verify them.</p>

<p>Yours faithfully</p>

<div id="signature">Wendy Wonderworld</div>

</div>

</body>

</html>

Depreciation Warning ...

Many of you may have already started learning to code HTML and when you study the Markup on this page you might think that it is different to the HTML you have been learning. The reason for this is very simple and that is because W3C (World Wide Web Consortium) have changed the nature of HTML Markup. In essence, HTML is now being reduced to a basic container language and Tags like FONT, UNDERLINE, BOLD, CENTER and many others are now depreciated. Also largely depreciated are Attributes like Background, Align, Bgcolor and Border, and I would recommend that you ignore any books or tutorials that teach you to write HTML Markup using depreciated Tags or Attributes.

The Step 2 and Step 3 demonstrations that are provided on this page both meet the W3C '4.01 Strict' standard and if you load either the Stage 2 or the Stage 3 demonstration page then you will see a W3C Logo/s displayed at the bottom of the page. If you click on the Logo/s you will be able to test the validation of these pages for yourself.

Validation and Accessibility Testing

If you are going to learn HTML then learn it properly, right from the start. Conforming to W3C recommendations is not as difficult as it sounds and you will 'future proof' your learning.

+++ Past Wisdom +++

"I haven't failed, I've found 10,000 ways that don't work" -Thomas Edison (probably talking about web authoring).

HTML Related Terms ...

You might find some of these terms a little obscure and difficult to grasp the first time around. If this is the case then you are not alone and I would recommend that you study this section once and then bookmark or record the Web address of the page so that you can refer back to this section in the future.

HTML Hypertext Markup Language
Markup HTML is a Markup language. This means that it uses <Tags> to provide structure and formatting to the content of a text document (for both text and images).
Tag A general term that can be used for both elements and attributes combined. Example:-
<img src="mypic.gif" alt="My Picture" width="250" height="300">
Element (element name) sometimes mistakenly called the Tag name (e.g. 'img'). Element names should be typed using lower case.
Attribute (attribute name) is a named value or relationship that is directly associated with an Element (e.g. 'src, alt, width, height' ). Attribute names should be typed using lower case.
Value (attribute value) is the setting of the attribute. A value can specify the size of an associated object or simply indicate whether an attribute is on or off. In other cases it might determine the intensity, position, color, or some other quality of the attribute. You should be aware that attribute values can sometimes be case sensitive and you should also be aware that the emerging XHTML 1.0 specification requires that ALL attribute values should be wrapped in quotes (e.g. attribute="attribute value").
Entity (entity name) Entities do not have a direct connection to HTML Tags but are the method used to display special characters in an HTML document. Entity names are case sensitive and examples such as ('É') and ('é') are both valid but different entities. In contrast, the non-breaking space character (' ') is valid but ('&NBSP;') would be invalid. An HTML Character Codes and Entities Reference Chart will shortly be published on this site.

Link Directly To This Page ...

help support free information on the Internet ...

Many users prefer to link directly to individual content pages on Web-Wise-Wizard. If you would like to do this then we have provided the following HTML/CSS link script which you can copy and paste directly into your HTML editor. Alternatively, you might like to use our New Dynamic Link Generator to create a link that more fully meets your own particular requirements.

the link displayed ...

Web-Wise-Wizard - Three Steps Of Web Page Design Learn how to apply HTML Markup to a text document so that it can be displayed in a web browser and then learn how to apply CSS Styles to the Markup so that the page takes on a formatted appearance.

select/copy the link Markup ...