Web Construction - Tutorial A. Preparation

spot · 03-03-2006, 11:26 AM

For anyone reading this who wants to build a website and thinks learning HTML (HyperText Markup Language) is the right way to do it - don't. Get a WYSIWYG (What You See Is What You Get) page editor with styles, lists, tables, justification and hyperlinking built in, and concentrate on your information content rather than the code. If it were me, I'd get Open Office from http://www.openoffice.org/ and use the "Save As... HTML" option for documents. You'll never need to see the internal code of what you write, and you can concentrate on your presentation instead.

So, for those who want to look under the hood of the Internet, here we go.

Before we start, you'll need a text editor which can keep several files open at the same time. A website usually has many distinct files, and as you change one you'll often need to change others in tandem. Switching from one file to another needs to be painless. If it were me, I'd get consult http://en.wikipedia.org/wiki/Source_code_editor and (at the moment) I'd follow their link to the GPL NotePad++ (bottom of the page, External Links) and install that. Times will change, software moves on, maybe now there's something else, but that page will tell you what and why.

For the moment, you'll build files on your own hard drive and view them in your browser from there. Later, we might need to install a small webserver package so that we can add pre-processing code to the pages we write, but until then we'll stay simple. Pre-processing involves writing in a programming language which builds the viewable web page at the moment it's viewed, so that it can include up-to-date real world information from, for example, an online information source.

You'll need a subdirectory on your hard drive to hold the files. Create an empty subdirectory and make a note of the path to reach it. It can be anywhere, but to keep path names short I'm going to assume you're using a Microsoft Windows Operating System and that the path to this new subdirectory is "c:\www". If you've used a different location, adjust all my instructions from now on to point to your own subdirectory.

spot · 03-03-2006, 11:27 AM

Let's test that you can use these tools - the text editor, the subdirectory and the browser.

Open a new file in your text editor

highlight the text in the box below:

HTML Code:

<html>
    <head>
        <title>Spot Tutorial Ba
        </title>
    </head>
    <body>
        <h1>Congratulations, you have completed Tutorial Ba
        </h1>
    </body>
</html>

copy the highlighted text to the text editor (find your copy and paste features, don't type it all!)
save the file as "c:\www\tBa.html"
open a browser tab or window
type "file:///c:/www/tBa.html" into the browser navigation toolbar and press Enter

You should see a web page announcing your success. If you don't, go round again and get it right.

spot · 03-03-2006, 11:28 AM

The Internet is a complicated place to write HTML code for. There's many browsers. Each browser has many versions. Each version has its own interpretation of what HTML means, what code exists, how to lay the code out to be read. The browser might be on a new desktop computer with a big display, or an old laptop with a small display. The browser window might be full-screen or partial. Once the webpage has been opened, the viewer might resize the browser window on the fly. You might even have your webpage accessed on a cellphone. There are text-only browsers, there are blind users whose computers read just the text content to them. All of these browsers will either guess your intention, or do their best, or occasionally simply get it different to what the manual says (which you can't fight, but you can avoid).

On top of that, browsers are idiot-proofed in various ways. If they see anything at all of your webpage, they'll do the best that they can with it, even if what you've written is sketchy invalid HTML. Save the following box content as "c:\www\tCa.html" and view it as "file:///c:/www/tCa.html".

HTML Code:

<i>This is what your browser made of Tutorial Ca. Notice that it's in italics.

What you saved is an invalid HTML document, but your browser has guessed, filled in as best it can, and shown something rather than just given up.

In practice, all these variations mean that you can only express your intention as far as layout goes. Layout is ultimately the province of the Browser. If you insist on an absolute fixed layout being seen by the end viewer, show him a photograph of your page or express your intention in a different layout language like PDF (Portable Document Format) - which is exactly what some websites do.

The definition of HTML itself changes over time. What was valid once is always valid. What was unknown ten years ago is also now valid. An old browser is quite likely to make a mess on the screen if it looks at new HTML which uses features that weren't around when the browser was written. Slowly, browser writers are adjusting to these complcations and writing more fail-safe browsers. If you need to write HTML code that's going to be viewed by an old browser, don't use extensions of HTML that were made since the browser was written.

Newer definitions of HTML include a Document Type Definition (DTD) which says which version of HTML has been used. That's now a requirement if you want browsers to express your code according to the HTML specification you've used. The HTML in Tutorial B didn't have a DTD but it was still valid HTML. Browsers interpret it as an old version of HTML and adjust accordingly.

spot · 03-03-2006, 11:28 AM

From now on, let's write with a specific Document Type Definition (DTD), so that we tell the browser what version of HTML we're writing in. Be warned, though, that using a DTD may make some earlier valid HTML syntax fail to perform. My preference is to use a current HTML specification, so these tutorials will do that. Any code you write yourself or copy from elsewhere, be warned beforehand, may be out of date and perform strangely.

Here's a minimum valid HTML document, to the specification we're going to use:

HTML Code:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Spot Tutorial Da
        </title>
    </head>
    <body>
    </body>
</html>

You can see that I've indented the content, to make the structure more apparent to the eye. It's ignored by all browsers. Four spaces, two tabs, ten blank lines, it's all ignored and treated as a single space (except in very specific circumstances).

What's important structurally is that after the DTD, on the first two lines, everything is embedded in marker elements. For every opening marker element there's a corresponding closing marker element. All embedded open marker elements must be closed before the next can be closed. The title marker is embedded in the head marker. The head marker can't be closed until the title marker is closed. The html marker can't be closed until all the embedded markers are closed.

There are two exceptions to this rule in the HTML body (and several in the HTML head) - they're leftovers from early HTML specifications. They're single internally-closed markers, like the one for a meta statement, a link, a horizontal rule, an image, and they close themselves so nothing can embed within them.

Lots of HTML elements exist - html, head, title, body, h1 and i are examples we've used so far - but what you have already is the complete structure description. Stick to the rules in this Tutorial (and maybe read them twice to get all the information!) and there's nothing else.

spot · 03-04-2006, 09:27 AM

First off, be aware that there's a lot of ways of building a webpage. What I'm using is a single approach. For a lot of websites, it's cheaper to build from a package where a lot of work is done for you in advance. This tutorial isn't about building a webpage, it's about learning what goes into them. Even so, good clean code is different to code that happens to work. Firstly, it's easier to modify over time. Secondly, if it's simple then it's easier to test and correct.

Start out by typing up all of the text that's going to appear on the page. If you intend to have a graphic in the final product, just type a text description to start with. Group the text into divisions, where each division has a single functional purpose like a heading, a block of offsite links, a block of onsite links, a copyright statement, an introduction. Within each division you'll have (at least in this text only starting form) one or more paragraphs, which are sections of free-flowing text with no line breaks.

Edit each division so it has div marker elements around it, with a meaningful classification. Edit each paragraph so it has p marker elements around it. If you want to associate different divisions so they appear in the same area of the screen, tie them together with more div marker elements (That's the class I've named "Closer" in this example).

Here's my version of where that takes us:

HTML Code:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Spot Tutorial Ea
        </title>
    </head>
    <body>
        <div class=HeaderBlock>
            <p>picture of Tutorial E in green on yellow</p>
        </div>
        <div class=Closer>
            <div class=OffSiteLinks>
                <p>Google</p>
                <p>Wikipedia</p>
                <p>eBay</p>
                <p>BBC News</p>
                <p>New Scientist</p>
            </div>
            <div class=OnSiteLinks>
                <p>Page 2</p>
                <p>Page 3</p>
            </div>
            <div class=MainText>
                <p>First off, be aware that there's a lot of ways of building a webpage. What I'm using is a single approach. For a lot of websites, it's cheaper to build from a package where a lot of work is done for you in advance. This tutorial isn't about building a webpage, it's about learning what goes into them. Even so, good clean code is different to code that happens to work. Firstly, it's easier to modify over time. Secondly, if it's simple then it's easier to test and correct.</p>
                <p>Start out by typing up all of the text that's going to appear on the page. If you intend to have a graphic in the final product, just type a text description to start with. Group the text into divisions, where each division has a single functional purpose like a heading, a block of offsite links, a block of onsite links, a copyright statement, an introduction. Within each division you'll have (at least in this text only starting form) one or more paragraphs, which are sections of free-flowing text with no line breaks.</p>
                <p>Edit each division so it has div marker elements around it, with a meaningful classification. Edit each paragraph so it has p marker elements around it. If you want to associate different divisions so they appear in the same area of the screen, tie them together with more div marker elements (That's the class I've named "Closer" in this example).</p>
            </div>
        </div>
        <div class=Closer>
            <div class=CopyStatement>
                <p>This webpage is a demonstration of Spot Tutorial E</p>
            </div>
        </div>
    </body>
</html>

Save that as "c:\www\tEa.html" and view it as "file:///c:/www/tEa.html". What you have there is content with no layout. While the display makes no mention of the class names we've used to describe the parts of the content, that information is there for the next step - laying out the display.

spot · 03-04-2006, 09:28 AM

Layout, the way I'm demonstrating things, is expressed in style statements. These can be included within the HTML or kept aside in a Cascading Style Sheet (CSS). Keeping the entire site layout in a single style sheet lets us change the whole site by editing a single file, and that's what we're going to use.

Firstly, edit the following extra line into "c:\www\tEa.html" after the </title>, change the title to "Spot Tutorial Fa", lower down change to "picture of Tutorial F", and save the changed file as "c:\www\tFa.html":

HTML Code:

<link href="tFa.css" rel="stylesheet" type="text/css">

Now save the following content as "c:\www\tFa.css":

HTML Code:

/*                CSS file, save as c:\www\tFa.css               */
body             {background: silver; text-align: center; margin: 20px; padding: 0; color: red;}
.HeaderBlock     {text-align:center; color: green; background: yellow;}
.Closer          {clear: both}
.OffSiteLinks    {float: left; width:30%}
.OnSiteLinks     {float: right;}
.MainText        {float: left; text-align:left; color: black; font:1.1em sans-serif; width:50%}
.CopyStatement   {float: right; color: blue;}

View the combination as "file:///c:/www/tFa.html".

There's quite a lot to observe on the new webpage.

Firstly, the background went from white to silver (a light grey, anyway). Some text turned red. Those changes come from the styling to the "body".

The presentation order of the OffSiteLinks, OnSiteLinks and MainText changed. If you look at their float instructions, you can see why. OffSiteLinks is on the left, OnSiteLinks is on the right, MainText is on the left of what space remains. You can break any horizontal space on the webpage into blocks that way.

The vertical splitting of the webpage is forced with the Closer division, which nests an entire block of divisions. Each Closer nest draws an invisible line below what's happened and restarts the allocation of page space for the next set of commands.

The font and color changes (black, blue, and green-on-yellow) can be seen in the CSS. There's centering of the HeaderBlock, and there's width commands on the floating divisions (except for one, which gets all the remaining horizontal space to itself).

Now, here's the blindingly powerful bit about layout. Every one of those divisions we've made can be treated, internally, as though it were a webpage in its own right. Once you're inside a div, you can nest further and further, dividing the page space allocated to it into smaller and smaller fragments. We'll go on from here to learn how to use more elements of HTML and CSS, but the key insights are covered already. Content separate from layout, and website-wide common CSS code.

03-03-2006, 11:26 AM	#1 (permalink)
spot Ichabod Supporting Member Join Date: Apr 2005 Location: Brigstowe Posts: 16,989	Web Construction - Tutorial A. Preparation For anyone reading this who wants to build a website and thinks learning HTML (HyperText Markup Language) is the right way to do it - don't. Get a WYSIWYG (What You See Is What You Get) page editor with styles, lists, tables, justification and hyperlinking built in, and concentrate on your information content rather than the code. If it were me, I'd get Open Office from http://www.openoffice.org/ and use the "Save As... HTML" option for documents. You'll never need to see the internal code of what you write, and you can concentrate on your presentation instead. So, for those who want to look under the hood of the Internet, here we go. Before we start, you'll need a text editor which can keep several files open at the same time. A website usually has many distinct files, and as you change one you'll often need to change others in tandem. Switching from one file to another needs to be painless. If it were me, I'd get consult http://en.wikipedia.org/wiki/Source_code_editor and (at the moment) I'd follow their link to the GPL NotePad++ (bottom of the page, External Links) and install that. Times will change, software moves on, maybe now there's something else, but that page will tell you what and why. For the moment, you'll build files on your own hard drive and view them in your browser from there. Later, we might need to install a small webserver package so that we can add pre-processing code to the pages we write, but until then we'll stay simple. Pre-processing involves writing in a programming language which builds the viewable web page at the moment it's viewed, so that it can include up-to-date real world information from, for example, an online information source. You'll need a subdirectory on your hard drive to hold the files. Create an empty subdirectory and make a note of the path to reach it. It can be anywhere, but to keep path names short I'm going to assume you're using a Microsoft Windows Operating System and that the path to this new subdirectory is "c:\www". If you've used a different location, adjust all my instructions from now on to point to your own subdirectory.
Local Time: 07:54 AM Local Date: 12-04-2008

03-03-2006, 11:27 AM	#2 (permalink)
spot Ichabod Supporting Member Join Date: Apr 2005 Location: Brigstowe Posts: 16,989	Web Construction - Tutorial B. Test the tools Let's test that you can use these tools - the text editor, the subdirectory and the browser. Open a new file in your text editor highlight the text in the box below: HTML Code: <html> <head> <title>Spot Tutorial Ba </title> </head> <body> <h1>Congratulations, you have completed Tutorial Ba </h1> </body> </html> copy the highlighted text to the text editor (find your copy and paste features, don't type it all!) save the file as "c:\www\tBa.html" open a browser tab or window type "file:///c:/www/tBa.html" into the browser navigation toolbar and press Enter You should see a web page announcing your success. If you don't, go round again and get it right.
Local Time: 07:54 AM Local Date: 12-04-2008

03-03-2006, 11:28 AM	#3 (permalink)
spot Ichabod Supporting Member Join Date: Apr 2005 Location: Brigstowe Posts: 16,989	Web Construction - Tutorial C. The Internet The Internet is a complicated place to write HTML code for. There's many browsers. Each browser has many versions. Each version has its own interpretation of what HTML means, what code exists, how to lay the code out to be read. The browser might be on a new desktop computer with a big display, or an old laptop with a small display. The browser window might be full-screen or partial. Once the webpage has been opened, the viewer might resize the browser window on the fly. You might even have your webpage accessed on a cellphone. There are text-only browsers, there are blind users whose computers read just the text content to them. All of these browsers will either guess your intention, or do their best, or occasionally simply get it different to what the manual says (which you can't fight, but you can avoid). On top of that, browsers are idiot-proofed in various ways. If they see anything at all of your webpage, they'll do the best that they can with it, even if what you've written is sketchy invalid HTML. Save the following box content as "c:\www\tCa.html" and view it as "file:///c:/www/tCa.html". HTML Code: <i>This is what your browser made of Tutorial Ca. Notice that it's in italics. What you saved is an invalid HTML document, but your browser has guessed, filled in as best it can, and shown something rather than just given up. In practice, all these variations mean that you can only express your intention as far as layout goes. Layout is ultimately the province of the Browser. If you insist on an absolute fixed layout being seen by the end viewer, show him a photograph of your page or express your intention in a different layout language like PDF (Portable Document Format) - which is exactly what some websites do. The definition of HTML itself changes over time. What was valid once is always valid. What was unknown ten years ago is also now valid. An old browser is quite likely to make a mess on the screen if it looks at new HTML which uses features that weren't around when the browser was written. Slowly, browser writers are adjusting to these complcations and writing more fail-safe browsers. If you need to write HTML code that's going to be viewed by an old browser, don't use extensions of HTML that were made since the browser was written. Newer definitions of HTML include a Document Type Definition (DTD) which says which version of HTML has been used. That's now a requirement if you want browsers to express your code according to the HTML specification you've used. The HTML in Tutorial B didn't have a DTD but it was still valid HTML. Browsers interpret it as an old version of HTML and adjust accordingly.
Local Time: 07:54 AM Local Date: 12-04-2008

03-03-2006, 11:28 AM	#4 (permalink)
spot Ichabod Supporting Member Join Date: Apr 2005 Location: Brigstowe Posts: 16,989	Web Construction - Tutorial D. HTML Structure From now on, let's write with a specific Document Type Definition (DTD), so that we tell the browser what version of HTML we're writing in. Be warned, though, that using a DTD may make some earlier valid HTML syntax fail to perform. My preference is to use a current HTML specification, so these tutorials will do that. Any code you write yourself or copy from elsewhere, be warned beforehand, may be out of date and perform strangely. Here's a minimum valid HTML document, to the specification we're going to use: HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Spot Tutorial Da </title> </head> <body> </body> </html> You can see that I've indented the content, to make the structure more apparent to the eye. It's ignored by all browsers. Four spaces, two tabs, ten blank lines, it's all ignored and treated as a single space (except in very specific circumstances). What's important structurally is that after the DTD, on the first two lines, everything is embedded in marker elements. For every opening marker element there's a corresponding closing marker element. All embedded open marker elements must be closed before the next can be closed. The title marker is embedded in the head marker. The head marker can't be closed until the title marker is closed. The html marker can't be closed until all the embedded markers are closed. There are two exceptions to this rule in the HTML body (and several in the HTML head) - they're leftovers from early HTML specifications. They're single internally-closed markers, like the one for a meta statement, a link, a horizontal rule, an image, and they close themselves so nothing can embed within them. Lots of HTML elements exist - html, head, title, body, h1 and i are examples we've used so far - but what you have already is the complete structure description. Stick to the rules in this Tutorial (and maybe read them twice to get all the information!) and there's nothing else.
Local Time: 07:54 AM Local Date: 12-04-2008

03-04-2006, 09:28 AM	#6 (permalink)
spot Ichabod Supporting Member Join Date: Apr 2005 Location: Brigstowe Posts: 16,989	Web Construction - Tutorial F. Layout Layout, the way I'm demonstrating things, is expressed in style statements. These can be included within the HTML or kept aside in a Cascading Style Sheet (CSS). Keeping the entire site layout in a single style sheet lets us change the whole site by editing a single file, and that's what we're going to use. Firstly, edit the following extra line into "c:\www\tEa.html" after the </title>, change the title to "Spot Tutorial Fa", lower down change to "picture of Tutorial F", and save the changed file as "c:\www\tFa.html": HTML Code: <link href="tFa.css" rel="stylesheet" type="text/css"> Now save the following content as "c:\www\tFa.css": HTML Code: /* CSS file, save as c:\www\tFa.css */ body {background: silver; text-align: center; margin: 20px; padding: 0; color: red;} .HeaderBlock {text-align:center; color: green; background: yellow;} .Closer {clear: both} .OffSiteLinks {float: left; width:30%} .OnSiteLinks {float: right;} .MainText {float: left; text-align:left; color: black; font:1.1em sans-serif; width:50%} .CopyStatement {float: right; color: blue;} View the combination as "file:///c:/www/tFa.html". There's quite a lot to observe on the new webpage. Firstly, the background went from white to silver (a light grey, anyway). Some text turned red. Those changes come from the styling to the "body". The presentation order of the OffSiteLinks, OnSiteLinks and MainText changed. If you look at their float instructions, you can see why. OffSiteLinks is on the left, OnSiteLinks is on the right, MainText is on the left of what space remains. You can break any horizontal space on the webpage into blocks that way. The vertical splitting of the webpage is forced with the Closer division, which nests an entire block of divisions. Each Closer nest draws an invisible line below what's happened and restarts the allocation of page space for the next set of commands. The font and color changes (black, blue, and green-on-yellow) can be seen in the CSS. There's centering of the HeaderBlock, and there's width commands on the floating divisions (except for one, which gets all the remaining horizontal space to itself). Now, here's the blindingly powerful bit about layout. Every one of those divisions we've made can be treated, internally, as though it were a webpage in its own right. Once you're inside a div, you can nest further and further, dividing the page space allocated to it into smaller and smaller fragments. We'll go on from here to learn how to use more elements of HTML and CSS, but the key insights are covered already. Content separate from layout, and website-wide common CSS code.
Local Time: 07:54 AM Local Date: 12-04-2008

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode