By: Mark Noble
V 1.0
Part Two: Layout
Now it’s time to learn about the basic layout of an HTML file. These are just a few simple rules that will keep you out of trouble down the road and ensure that each of your documents meets the lowest standards of compatibility in order to be viewable by the widest variety of browsers.
It is important to note that HTML is an Object Oriented Language. This means that it relies heavily on the concept of maintaining a container structure for web documents. In many cases, if you forget a closing tag, it will not affect the document appearance – however – I strongly advise against being careless with tags. If you are careful, you will be happy with yourself as it will be easier to debug your own code, and other programmers will be happy with you as well if they ever need to expand on your code.
Some programmers write in a way that is intentionally difficult to understand. Others are simply careless and sloppy with their tag arrangement. I myself prescribe to the philosophy that every page of code I write should serve as an example to new programmers as to how code should be written. If you maintain this philosophy, you will thank yourself for ensuring that your code is easy to understand, reuse and manipulate down the road. It is never faster to code something the sloppy way first – then go back and fix it later.
Below is a simple framework for HTML that you should work from. HTML documents written without this framework will be functional in most browsers, but this just helps organize some of the information (which is very important in complex professional websites). After the example code, I will explain what the tags are for.
<HTML>
<HEAD>
<TITLE>Untitled</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
<HTML> – This tag encloses all of the HTML code on the page. It should be the first tag in your code as well as the last closing tag.
<HEAD> – This is a very important tag. It holds information that affects your entire page. Information such as the color of the background, various link colors and the title of your document as it will appear in the title bar of the users browser window.
<TITLE> – The title tag contains the name of your HTML document, as it will appear in the title bar of the users browser. The information within this tag is also often used when a user bookmarks a page. For instance, if the HTML programmer puts “Ed’s Pet Shop” in the title bar, it will appear in the title bar of the browser as well as the default name for any bookmarks to that page (unless otherwise specified).
<BODY> – This tag contains the real meat of an HTML page. Most of your work will take place inside this tag. Any text, images or links on an HTML page will be listed within this section of code.
Now let’s try our first page. We will write a sample page about Elvis with a sample block of text.
Elvis Presley came from a very poor family. He was born on 8 January 1935 in Mississippi. Elvis loved music. He went to church every Sunday and sang in the choir. When he was 13, his mother bought him a guitar. One day in 1954 he went to a recording studio called Sun Records. He wanted to make a record for his mother’s birthday. The secretary at the studio, heard Elvis and told her boss, Sam Philips. Elvis was his dream – “a white boy with a black voice”.
In 1955, Elvis appeared on TV in New York. Then he went to Hollywood and made his first film “Love Me Tender”. In the next two years he had many hit records and soon became a millionaire. In his last years, Elvis became fat and depressed. He died of a heart attack in 1977 in his house at Graceland. But for many fans, Elvis Presley is still alive and his songs are still popular.
Next we add the base code framework that you should always start from when creating an HTML document. Simply fill in the title of the document and place your copy between the <BODY> tags.
<HTML>
<HEAD>
<TITLE>The King of Rock 'n Roll</TITLE>
</HEAD>
<BODY>
Elvis Presley came from a very poor family. He was born on 8 January 1935
in Mississippi. Elvis loved music. He went to church every Sunday and
sang in the choir. When he was 13, his mother bought him a guitar. One
day in 1954 he went to a recording studio called Sun Records. He wanted to
make a record for his mother's birthday. The secretary at the studio, heard
Elvis and told her boss, Sam Philips. Elvis was his dream - "a white boy
with a black voice".
In 1955, Elvis appeared on TV in New York. Then he went to Hollywood and
made his first film "Love Me Tender". In the next two years he had many
hit records and soon became a millionaire. In his last years, Elvis became
fat and depressed. He died of a heart attack in 1977 in his house at
Graceland. But for many fans, Elvis Presley is still alive and his songs
are still popular.
</BODY>
</HTML>
Now it’s just a matter of adding several tags to this basic source code to improve the overall aesthetic of the document. The following is the code for my finished page as well as a basic explanation of the HTML tags used to generate the page.
<HTML>
<HEAD>
<TITLE>The King of Rock 'n Roll</TITLE>
</HEAD>
<BODY BGCOLOR="white" ALINK="red">
<BLOCKQUOTE>
<H1 ALIGN="center"><U>ELVIS</U>
<IMG SRC="sneer.jpg" WIDTH="95" HEIGHT="123" BORDER=0
ALT="Sneering Elvis" ALIGN="middle">
<U>PRESLEY</U></H1>
<P ALIGN="justify">
<A HREF="http://www.elvis.com/">Elvis Presley</A>
came from a <I>very</I> poor family. He was born on 8 January
1935 in Mississippi. Elvis loved music. He went to church every Sunday
and sang in the choir. When he was 13, his mother bought him a guitar.
One day in 1954 he went to a recording studio called Sun Records. He
wanted to make a record for his mother's birthday. The secretary at the
studio, heard Elvis and told her boss, Sam Philips. Elvis was his dream
- "a white boy with a "black <A HREF="cruel.mp3">voice</A>".
</P>
<P ALIGN="justify">
In 1955, Elvis appeared on TV in New York. Then he went to Hollywood and
made his first film "Love Me Tender". In the next two years he had many
hit records and soon became a millionaire. In his last years, Elvis
became <B>fat</B> and depressed. He
<A HREF="elvis.wav">died</A> of a heart attack in 1977 in
his house at Graceland. But for many
<A HREF="http://www.ibiblio.org/elvis/elvishom.html">fans</A>,
Elvis Presley is still alive and his songs are still popular.</P>
<H6 ALIGN="center">HTML Demonstration Copyright © 1998
<A HREF="http://www.marknoble.com">Mark M. Noble</A></H6>
</BLOCKQUOTE>
</BODY>
</HTML>
<BLOCKQUOTE> – Applies a margin to everything within tag.
<BODY BGCOLOR=”white” ALINK=”red”> – BGCOLOR is an attribute of the body tag that affects the background color of the document. ALINK is the color of a link when a user clicks on it.
<P ALIGN=”center”> – ALIGN is an attribute of the Paragraph tag ”
“. Some values I used in this document are “justify” and “center” which allow users to control how a block of text behaves.
<H1 ALIGN=”center”> – The heading tag is used to specify heading size. In the example case, H1 indicates the largest heading size while H6 which appears later in the document represents the smallest heading size.
<U> – Underlined text attribute.
<IMG SRC=”sneer.gif” WIDTH=95 HEIGHT=123 BORDER=0 ALT=”Sneering Elvis” ALIGN=”middle”> – The IMG tag allows you to insert images into an HTML document. The SRC attribute indicates the filename and location on the server. WIDTH and HEIGHT attributes define the width and height of the image in pixels. BORDER allows you to put a border around the image that is the same color as all links on the page (in the early days this was used to illustrate that an image was clickable). ALT is an attribute of the IMG tag which allows users to provide a brief text description of the image (originally for folks with text only browsers, used now to provide commentary or additional information on an image). The ALIGN attribute specifies the alignment of the image with respect to the other text and images in the vicinity.
<A HREF=http://www.marknoble.com>Mark Noble</A> – This is how we make a link. The URL of the linked page belongs within the HREF attribute.
<I> – Italicize text.
<B> – Bold text.
© – This is an ASCII Character Code for the copyright symbol. Any special symbols such as this have a special code that can be looked up in an HTML reference book or on a web page containing a list of the codes and the characters they represent.
Now that you understand how the code works, take a look at the finished page by clicking here.
< < BACK
40° North 