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