Basic Web Page Creation

While it's really easy to build a web page, it's really hard to make it look right. If all you want is plain text, everything is really pretty straightforward. The tricky part is when you want something more. Most bad web pages are bad because of their design rather than their content so pay attention: Keep it simple. The more stuff on the page the messier it gets and the less likely your are to keep the interest of the visitor.

Web pages are built using HTML (Hyper Text Markup Language). The technology for this has been around long before there were web pages or even the Internet so it's not really unique to the Web. A Markup Language is simply inserting special symbols into a body of text to give it some formatting. The ancient UNIX text pre-processor nroff was used to do the same thing back in the early 70s. The idea is to devise a set of special symbols that the processing engine will use to format text but won't display. The formatting symbols won't be visible.

In HTML these symbols are formatting instructions enclosed by the angle brackets < >. A web browser will read a block of text and interpret the < > symbols as a container for the formatting instructions. If you put something between the angle brackets that the browser doesn't know how to handle, it will just ignore the brackets and whatever they contain as consider it an error. The browser either interprets the text between the angle brackets as formatting instructions or it ignores it, so HTML mistakes won't break anything, it'll just look really bad.

To create a web page, start with the general structure and work your way in to the detailed markup. Start all web pages with the opening tags (HTML markup are called tags: the left angle bracket (<) starts a tag definition and a right angle bracket (>) ends it. The first tag is:

<html>

Then comes:

<head> <title> </title> </head> <body>

The "html" tag informs the browser that this is an HTML type document. The "head" tag contains stuff that won't be displayed to the user but can contain all kinds of useful information for other uses. You should aways put something in the "title" section to identify the web page. Notice that the "title" section begins with <title> followed (ideally) by some text explaining what the page is about and then the section ends with </title>. A tag is turned off by another tag with the same name but with a slash (/) character in front of the tag name. When you've added all the stuff you need in the "head" section, close it with </head>, the tag name prefixed with the slash character.

The next tag after the "head" section is for the actual web page document you want the user to see. This is the <body> tag. All the visible stuff comes after this tag. At the very end of the page you'll end everything with a </body> tag and then tell the browser that you all finished and there's nothing more to look at by ending the page with </html>. These are the same tags but with a prefixed slash character (/) that closes them.

You could just start writing great long blocks of text at this point and have a perfectly functioning web page but, alas, it would be pretty boring. You will most likely want paragraphs, maybe some indented text, maybe some neatly aligned lists or other formatting stuff here and there. Here's some of the most basic formatting tags:

<p>
<br>
<ul>
<li>

Insert a blank line
Force a line break, but won't add a blank line
start a bulleted list
a bulleted item in the list

There's more of course. If you want to indent some text for emphasis or as a quote, use <blockquote>:

This is indented

To turn off indentation put </blockquote> at the end of the indented text. Almost every tag requires a closing tag so get used to using them.

You can indent within the <blockquote> section by just inserting another <blockquote>.
and then more text. Don't forget to close it though.

This ability to enclose a <blockquote> within another <blockquote> is called, nesting and can be used anywhere as long as you remember to turn it off again (the tag of the same name prefixed with a slash). You can also modify the text by adding bold or italics:

<b>this is bold</b>
<i>this is italics</i>
<b><i>this is bold and italics</i></b>

You can change the font face using the <span> tag:

This is text, this is <span style="font-family:impact;">styled font</span>.

Or change the size: <span style="font-size:14pt;"> Changed font size</span>.

Another way to affect the font size is with the <h1> tag.

This is the <h1> heading tag, the largest

The smallest is <h6>

You'll have to end the tag with the matching closing tag of course or everything after the heading tag will be the new size.

You can also insert a horizontal line to create blocks of content:

<hr>

The <hr> tag doesn't require a closing </hr> tag. You can modify the line is several ways:

Try it with each option separately to see what happens. Notice that in the <span> tag and the <hr> tag you can enter pt for point size, or a percentage of the maximum. A number by itself will be understood as a count of pixels.

You can also format the text using a table:

You can use all the other stuff we've covered here in a table. </td><td valign="top"> You can use a table to create the effect of columns in the page or to align images with the text. </td></tr><tr><td rowspan=2 valign="top">
Here we add a new row of text. Notice in the <td> tag that we can force a column to span two or more columns. The rows and columns will grow to match the size of whatever you put in them and have a margin the size of cellpadding pixels. Notice that here the total width of the table is limited to the width=85% value. That's 85% of the page as it's currently displayed. If the page shrinks or grows by the browser window being re-sized, the table will too. This table also has a border with a border or 4 pixels, it can also have no border at all.

The <table> tag defines the entire table. The <tr> tag defines the row or creates a new row in the table. The <td> tag defines the column. Since the <td> tag is the last one defined, it's where you will usually add formatting for all the text that follows. Within the <td> block you can do all the stuff you can do anywhere else. You have to close all the tags you opened in the reverse order:

</td></tr></table>

Tables can be nested. There's times when the only way to get the look you want is by nesting one table inside another. Remember to turn it off again though.

These kinds of tags can format your web pages with just about anything you need. There's other tags and options to the tags, but the ones shown here should explain the basics. That's really pretty much all there is to the ML part of HTML (HT is hyper-text. ML is markup-language. Let's take a look at the HT (hyper-text) part.

In the HTML world, hyper-text is called a link. A link is a pointer to either another web page or a different block of text in the the same page. To do this little piece of magic use the <a> tag, called the anchor. In almost every case it will work like this:

The option, href, points to the place you want to jump to. In this case the # points to text in the same page (this page). To jump to another page,

<a href="other.html"> Web page on this computer in the same directory as this page</a>

Or to go to another web site:

<a href="http://other.com"> Jump to another website</a>

The part, http://, tells the browser to access the web site using the domain name of the web site. This web site can even be on the same server you're on right now but the http:// forces the browser to go out to the Internet to find the web site anyway.

You can also use an image for the link:

This time the <a> anchor tag is a little different. It is supposed to fetch an HTML document at other-site.com. The page to get is named, test.html. In that page is a block that starts at a particular point in the page. That point is named, other_text. The visible link is an image instead of text; click the image and the browser follows the link specified in the href definition.

This shows another use of the <a> anchor tag. A page can be divided into sections that can be fetched separately from the page as a whole. By putting the anchor a some point, you can then refer to that point and force the browser to jump there. The technique is simple:

All you do is find a place you want to be able to go directly, insert the anchor in the right place and then immediately close the anchor, </a>. Now you can specify the page and that section at the same time, http://other-site.com/ and then append the page, test.html and then the # sign to tell the browser to look for a tag by that name in the page and then name the browser is supposed to find, other_text. You should be able to see all that in the link example above.

We went one step further in that last example though. We used a image file for the user to click on to go to the page we wanted, <img src="pointer.jpg">. Immediately following the image display, we close the anchor tag, </a>.

So it would look like this:
<a href="../electron.html"> This is the link

This is the image to display with some options.
<img src="../images/blueball.jpg" title="This will fetch a new web page" width=60 height=60></a>

If you roll your mouse cursor over the image you will also see a text box pop up. This is what the title= option to the img tag does if you decide to add it to an image (or any other link).

To get all the ugly details, go to, This site or here. You will also need a good text editor. Do NOT try using MS Word or other "convert to HTML" utility; they all add a bunch of really ugly code to a page and bloat the file size horribly. Use the vi editor or, you can use something that does some error checking and code highlighting like, Webtide. To add scripting to your web pages, see this. To find out more about web hosting or web servers, go here. To see how to automate web creation, see This

Return to the Contents Page