Here's
a glossary of HTML code. To follow along, download
the sample webpage.
It will appear in a second window, so that you can keep looking
at it while you study the glossary of codes below. This glossary
will take you step-by-step through the codes of that sample page,
from top to bottom.
Colors in
this tutorial are used to help you identify what
is code, what is
webpage content, and what it all means.
<html>
tells the computer that this page will use HTML codes, also called
"tags" (any code placed between <
and > is an HTML tag). This <html> tag
is always required.
<head>
is necessary because certain information goes into the heading
of the page and must not show up in the body of the webpage; this
is always required.
<title>Sample
for understanding HTML</title>
puts a title for the page at the very, very top of the browser.
<meta
name="keywords" content="web
designers, design, website, webwork, webmasters, course, HTML,
tutorial, training">
gives Internet search engines some keywords that will find your
website when a person does a search using any of these words;
this is optional, but very helpful.
<meta
name="description" content="Join
the Good News Web Designers Association!">
gives the Internet search engines a description of your website
that people will read in the search results; this is optional,
but very helpful. If you don't use this code, the search engines
will rely on the first words on your page.
</head>
tells the computer that the heading section is ending, and the
body of the webpage is about to begin; this is always required.
<body
background="gnwaside.jpg"
bgcolor="white" link="green">
tells the computer three things:
- The <body>
tag tells the computer that the body of the webpage is now beginning,
and everything here on out will be visible to people; <body>
is always required.
- background:
The body tag can have more (optional) information in it, such
as the name of the graphic (gnwaside.jpg) that
will be used as the background image of the page.
- bgcolor:
This gives the page a background color of white; white has the
most professional look. Even if you use a background graphic,
assign a bgcolor, in case the graphic fails to load.
- link:
The color of all links on this page will be green. Without this
link information in the body tag, all links will be the default
blue.
<p
align="center"> is
telling the first line of text (which happens to be a title) to
be centered on the page.
<font
face="Times New Roman"
size="4">
determines what the text will look like, including the size. Without
this, it defaults to what the user has their computer set to.
Then, of course,
we have to tell it to stop:
</font></p>
<blockquote>
is used to indent the text.
<p>
begins a new paragraph. This time it's not centered.
NOW
LET'S LOOK AT THE TABLE. In it's simplest form, the HTML
code for a table is:
<table><tr><td>content
of table</table></tr></td>
<table> initiates a table
<tr> opens the horizontal side of the table
<td> opens the vertical side of the table
But you can
give it more information, as I've done in the sample:
<table border="0"
cellpadding="3"
cellspacing="0"
width="75%"
align="center" >
- border
means the edge of the table and its cells; "0" means
no borders will show; "1" = the smallest border; "2"
is a little bit thicker; etc.
- cellpadding
puts a margin around the contents of the table; the higher the
number, the more empty space there will be. If you don't use
this code, the table will automatically have a cellpadding of
"0".
- cellspacing
means how the table cells are spaced next to each other; "0"
leaves no gaps between cells, 1 gives it a small gap, 2 a larger
gap, etc. If you don't use this code, the table will default
to "0".
- width
indicates how wide you want the table to be. If you don't use
this code, the content inside the table will determine how wide
the table gets, but the table will actually load faster if it
doesn't have to figure that out. Make sure the width will fit
into even the smallest resolution monitors, which is 640 pixels
wide.
- height
is rarely needed, but if you want to prescribe exactly how long
the table is, give height a setting just as you did width.
<img
src="../../gnwda.gif"
WIDTH="80"
HEIGHT="118">
places
the graphic on the page.
- img
src stands for "image source", that is, where
in the directory to find the graphic.
- The ../../
in front of gnwda.gif tells the
computer to find the image in the main directory, which is two
directories up from here (this webpage is located in a sub-directory
of a sub-directory of the top directory.
- WIDTH
and HEIGHT tell the computer what size space
to allot on the webpage for the image. "80" is roughly
.8 inches and "118" is 1.18
inches. If you need to change the size of the image, you can
do it by changing the size of these numbers, but the quality
is blurred; it's better to change the size of the image in a
graphics editing program.
</td>
closes the vertical side of the table
<td
valign="top">
starts
a new cell by opening the vertical side again. The valign
stands for vertical alignment. If the contents of this second
cell are shorter than the contents in the first box, they will
float in the middle (which is the default setting). I've position
the text at the top.
<p
align="center">
begins
a centered paragraph and <font face="Arial"
size="4" color="#800000">
defines the text style, size, and color. Color codes are a combination
of letters and/or numbers following the # sign. You shouldn't
have to figure out the right color number; your webpage designing
software should do it for you. The color can
also be labeled as "blue" or "red" or a small
number of other standard color names. See our color
chart for some of the color codes you can use.
<p>
(a new paragraph begins) It's used to better
organize your page and can be used to put multiple text lines
next to a graphic. It covers 75% of the screen, so the image doesn't
overlap the background image down the left side.
</td>
undoes
the <td> command that was at the beginning of the table
</tr> undoes the last <tr> command in the table
</table> undoes the <table> command that started
the table
<p></p> puts an empty
paragraph, i.e., extra space, before the next table.
In the next
table:
<table cellpadding="3"
width="500" bgcolor="#EDE7D1"
align="center"> the
margin is set to 3, the width of the table to 500
pixels, gives the table a background color, and centers
the table on the page.
If you have
a table with more than one cell and want to have different colors
in each cell, instead of putting the bgcolor code in the <table>
tag, you will put it in the <td> tag.
<p><b><i>MAIN
TEXT GOES HERE</i></b></p>
establishes
these codes for the text:
- <p>
new paragraph
- <b>
bold font (the tag <strong> does the
same thing)
- <i>
italicizes the text
- </i>
ends italicizing
- </u>
ends underlining
- </b>
ends bold
- </p>
ends the paragraph
Next comes
some text, which here is relying on all the default settings,
therefore there are no font tags:
A table is used here, with a width of 500
pixels....
<ol>
indents the text that follows and indicates that each line will
be numbered sequentially.
<li>First
point of information.</li>
indicates this is a line of text that should be numbered (note
that each line begins with <li> and ends
with </li>).
<li>Second
point.</li>
indicates this is a line of text that should be numbered.
</ol> ends numbered text indenting.
<ul>
indents the text that follows and indicates each line will be
bulleted.
<li>Using
bullets instead of a numbered list.</li>
indicates this is a line of text that should be bulleted.
<li>Doesn't
this look nice?!</li>
indicates this is a line of text that should be bulleted.
</ul> ends bulleted text indenting.
<blockquote>
indents the text that follows.
<p>You
can also indent your text without using numbering or bullets...This
is the <blockquote>
command. </blockquote></p>
< and >
are codes that were automatically inserted in the source code
to tell the computer that the < and > around the word "blockquote"
in page view are not tag indicators.
</blockquote>
ends indenting.
Next, the following tags end this table.
</td>
</tr>
</table>
<blockquote> followed by
<hr>
puts an indented dividing line across the page
</blockquote> stops the indenting
NEXT WE EMBED
A TABLE WITHIN A TABLE
The outer
table is invisible to the viewer, because there are no borders
assigned and no background color, viewers cannot see the table
framing, but they do see a nicely organized, eye-appealing block
of text surrounding a graphic.
Note that
the width of this table is 600 pixels.
The graphic's
table is opened immediately after the outer table is opened.
This newest table holds the graphic and enables the text to flow
around it because it's been assigned the attribute align="right":
<table align="right">
This alignment attribute throws the graphic's table to
the right side of the larger, outer table, and thus the text that
is written after the table will move up and fill in the left side,
appearing next to the table. The text wraps itself around the
graphic.
<td><img
src="bible1.gif" width="110"
height="101"></td>
puts the graphic into a table cell (in this table, there is only
one cell.) Because the width and height of the graphic are assigned,
the browser does not have to calculate it and thus the graphic
loads more speedily. If you leave out the size, the graphic will
load last and slower.
Then the code
to end the graphic's table is given, followed by the beginning
of a paragraph of text, which in this case is a single line of
text:
<font size="4">How
to wrap text around a picture:</font> enlarges
the text one size bigger than the default setting, which would
have been "3". By using </font> at the
end of this line, we stop size "4" and resume the default
size.
Notice that
in the middle of the next paragraph of text, which begins with
"When you want your text to wrap around
a graphic...", and in the paragraph that comes after
it, I changed the color for the text align="right"
to red.
Does this
text look odd in the source code? "
and " are both the
HTML code that tells the computer that the quote " marks
are really quote marks and not part of the " coding you see
inside tags.
Now look at
the next paragraph, which starts with:
<p>You
can achieve the same spacing without using a table at all.<br>
Use ...
<br>
puts a break in the text. If we were to use the <p>
tag, the break is similar to double-spacing between paragraphs
in a word processing program. But the <br> tag single-spaces
it.
The last paragraph
is a link taking people back to the home page:
<p><a href="../../index.html">Return
to our Home Page</a></p>
The a href code tells the browser what
URL to go to when the visitor clicks on the link, and it makes
an active hyperlink out of whatever follows the tag (in this case,
it's the text "Return to our Home Page"; instead of
text here, a graphic could be used, such as img src="graphic.jpg").
Text links
are automatically underlined and colored blue, unless you've changed
the link color in the <body> tag up top,
as we did (remember when it was assigned the color green?).
Image links
will be automatically be outlined in the link color, unless you
put border="0" in the graphic's <img
src> tag.
The </a>
after the text (or image) indicates that nothing after this will
be part of the link. If you forget to put this in, the entire
remaining portion of your webpage will be underlined as a link!
Finally, the
end-table code for the outer table is added.
<p> </p>
puts a little blank space at the bottom of the page to ensure
that the final line of text won't be butted up against the bottom
of the browser window. is the code
for a blank character space. If you ever need to put more than
one empty space between characters (letters) of a word, use this.
Just as every
HTML <tag> has to have its closing </tag> to end or
undo the code, so must the page end with:
</body>
</html>
Download
this tutorial as a printable Word Document.
|
