HTML Tutorial Kids
The Original Web-Wise-Wizard
Web Authors, Web Developers and Webmasters Internet Toolbox
HTML, Three Steps Of Web Page Design
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
The Three Steps Of Web Page Design

Learning To Create A Web Page ...

Here you learn the concept of applying HTML Markup to a text document so that the document and it's images can be displayed in a web browser. You then learn to apply Styles (CSS) to the Markup so that the document takes on a more formatted and visually pleasing 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 ...

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

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

<!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>
 
<meta http-equiv="Content-type" content="text/html; charset=ISO-8859-1">
 
</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 ...

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>
 
<meta http-equiv="Content-type" content="text/html; charset=ISO-8859-1">
 
<style type="text/css">
<!--
 
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 class="surround">
 
<div class="address">
<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>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 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.

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.

 

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

Featured Tutorial
Want More Traffic? Increase your Link Popularity and your PageRank by learning how to use Web Directories
Link To Us Scripts
New Dynamic Link Generator
 
If you find this page interesting or useful then others are likely to view it in exactly the same way. Providing a link to the page will be considered by the search engines as casting a vote for the page. In turn, this will help to improve the search engine ranking of the page resulting in more people being able to see the page. Your link really does count so please don't delay.
 
Post your link NOW!
 
 
Featured HTML Markup Websites
 
 
 
 
 
Copyright © 1998,2014, Gilbert Hadley, Liverpool, England