Understanding HTML codes

Provided by the Good News Web Designers Association

Return to Directory of Tutorials or GNWDA home page

   
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 &lt;blockquote&gt; command. &lt;/blockquote&gt;</p>
&lt; and &gt; 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? &quot; and &quot; 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>&nbsp;</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. &nbsp; 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.   

   

 

Return to Directory of Tutorials or GNWDA home page