HTML Basics
 
HTML stands for Hypertext Markup Language.
 
You can view an actual web page made up of all the HTML tags used in the same order they are discussed in this HTML Basics section of the Auction Template Builder. While viewing the web page you can see the HTML source code by clicking View in the Menu Bar and then clicking Source. A new text window will open with the code displayed. You can then see how the tags presented here work in a real web page. Login to Auction Template Builder Library at: Auction Template Builder Library
 
HTML may appear intimidating at first, but once you begin to get the feel of it, there is not much to be worried about. Ten different coding commands will take care of 99% of your needs. 
 
HTML uses tags to communicate to the client (browser) how to display text and images. Tags are contained in < > symbols. You start with the beginning tag, put in the word or words that will be affected by this tag, and at the end of the string of word(s), you place a closing tag.
 
The closing tag normally contains a "/" before the directive to indicate the termination of the action.
 
HTML tags are not case-sensitive. In most cases HTML collapses many spaces to one space and does not read blank lines. When you write your text you should leave several blank lines between paragraphs to make editing your HTML source document easier.
 
The <html> tag signals the point where text should start being interpreted as HTML code. The <html> tag is usually placed on the first line of your document. At the end of your document you should close with the </html> tag.
 
The head of an HTML document contains special information, like its title and meta tags. The head of a document is marked by <head> and </head> respectively. Only the title and meta tags should be included in the document head.
A typical head section might look like:
 
<html>
<head>
<title>Sample HTML Page</title>
<meta name="title" content="Sample HTML Page">
<meta name="description" content ="Auction Template Builder Sample HTML Page">
<meta name="keywords" content ="Auction Template Builder, Sample HTML Page">
</head>
 
 
Title Tag
Allows you to specify a Document Title in your browser window. The format is:
 
<title>Sample HTML Page</title>
 
The title doesn't usually appear in the document itself, but in a title box or bar at the top of the window.
 
 
Body Tag
The body tags <body> and </body> define the beginning and end of the bulk of your document. All your text, images, and links will be within the body of the document. 
The body should start after the head. A typical page might begin like:
 
<html>
<head>
<title>Sample HTML Page</title>
</head>
<body>
 
 
Putting A Background Color On Your Page
To specify the color, you must know the color's hexadecimal RGB (red, green, blue) value. If you can find the color's RGB number, you can convert it to hexadecimal using our web-based converter at: 
Auction Template Builder Library
There is also our Web Safe color chart in this e-book and in the Library also.
Web Safe Colors
 
In this example, the color 00FFFF is light blue.
You specify the color value in the body tag like this: 
 
<body bgcolor="#00FFFF">
 
 
Putting A Background Image On Your Page
You can put a background image on your page by specifying the image name in the body tag. The image will be tiled to fit the page.
You can get some ideas for backgrounds by looking at other pages on the Web or by looking at the collection of images in this e-book. Background Images
Background images can be in GIF or JPEG formats. In the Library also.
The tag for specifying a background uses the background= attribute with the path or URL to the image. If you create your own image and have it in the directory with the html file, you can just specify the image name. 
 
<body background="new.jpg">
 
or
 
<body background="http://www.friscodepot.com/atbuild/images/new.jpg">
 
If you specify a background color as well as an image, the image will usually take precedence although your page may flash the background color when it first loads.
 
 
Text Color
You can control the color of all the body text with the text extension to the body tag. Again, the tag uses hexadecimal RGB values to specify text color.
 
<body text="#8E2323">
 
This text is dark red.
 
Link Color
These attributes let you control the color of link text.
LINK - colors an unvisited link.
ALINK - controls an active link.
VLINK - controls a visited link.
 
The default colors are: LINK=blue, ALINK=red, and VLINK=purple.
 
You specify all link colors in the BODY tag.
 
<body bgcolor="#000000" text="#F0F0F0" link="#FFFF00" alink="#0077FF" vlink="#22AA22">
 
Header Tag
There are six levels of headers, h1 through h6. Header 1 is the largest header and they get progressively smaller through header 6.
Below are the six headers and how they appear in relation to one another.
 
<h1>This is a header 1 tag</h1>

This is a header 1 tag


<h2>This is a header 2 tag</h2>
 

This is a header 2 tag


 
<h3>This is a header 3 tag</h3>
 

This is a header 3 tag


 
<h4>This is a header 4 tag</h4>
 

This is a header 4 tag


 
<h5>This is a header 5 tag</h5>
 
This is a header 5 tag

 
<h6>This is a header 6 tag</h6>
 
This is a header 6 tag

 
Headers not only vary in size, they are also bold and have a blank line inserted before and after them.
It's important to use headers only for headings, not just to make text bold.
 
Paragraph Tag
In HTML, a paragraph tag <p> should be put at the end of every paragraph of text not already having a tag associated with it.
 
<p> Causes a line break and adds a trailing blank line.
 
<p align=?>paragraph text</p> Aligns a paragraph to the left, right, or center
 
<br> Causes a line break with no trailing blank line.
 
It's a good idea to put two or three blank lines between paragraphs to facilitate editing.
 
Division Tag
 
<div align=?>HTML code</div> A generic tag used to format large blocks of HTML.
 
Font Tag
 
<font size=?>your text</font> Sets size of font, from 1 to 7
<font color=?>your text</font> Sets font color, using name or hex value
 
Boldface and Italic Tags
You get attention to text by using the boldface and italic tags or the emphasis and strong tags.
 
This is a <b>boldface</b> tag. 
This is how boldfacing appears.
 
This is an <i>italic</i> tag. 
This is how italics appear.
 
 
This is a <strong>strongly emphasized</strong> tag. 
This is a strongly emphasized tag.
 
This is an <em>emphasized</em> tag. 
This is an emphasized tag. 
 
List Tags
There is an easy way in HTML to have numbered, unnumbered, and definition lists. In addition, you can nest lists within lists.
 
Unnumbered lists are started with the <ul> tag, followed by the actual list items, which are marked with the <li> tag. The list is ended with the ending tag </ul>.
For example, here is an unnumbered list with three items:
 
<ul>
<li> list item 1
<li> list item 2
<li> list item 3
</ul>
 
This is how that list would display:
 
  • list item 1
  • list item 2
  • list item 3
 
The same list using a numbered list format:
<ol>
<li> list item 1
<li> list item 2
<li> list item 3
</ol>
 
This is how that list would display:
  1. list item 1
  2. list item 2
  3. list item 3
 
Definition lists allow you to indent without necessarily having to use bullets.
<dl>
<dt> This is a term
<dd> This is a definition
<dd> And yet another definition
<dt> Another term
<dd> Another definition
</dl>
 
This is how it would be displayed:
This is a term
This is a definition.
And yet another definition.
Another term
Another definition
 
Nested lists, here is a nested list within an unnumbered list.
We could just have easily had a nested list within a numbered list.
<ul>
<li> list item 1
 <ul>
 <li> nested item 1
 <li> nested item 2
 </ul>
<li> list item 2
 <ul>
 <li> nested item 1
 <li> nested item 2
 </ul>
<li> list item 3
 <ul>
 <li> nested item 1
 <li> nested item 2
 </ul>
</ul>
 
This is how it would display:
  • list item 1
    • nested item 1
    • nested item 2
  • list item 2
    • nested item 1
    • nested item 2
  • list item 3
    • nested item 1
    • nested item 2
 
 
 
Blockquote Tag
The blockquote tag indents the text (both on the left and right) inside the tags.
The blockquote tag looks like this:
 
<blockquote>No bird soars too high, if he soars with his own wings - William Blake</blockquote>
 
and displays like this:
 
No bird soars too high, if he soars with his own wings - William Blake

 
Blockquoted text is often used for indenting big blocks of text such as quotations. The text will be indented until the ending tag is encountered. Again, note that the text here is indented on both the left and the right margins.
 
 
Center Tag
You can center text, images, and headings with the center tag.
The center tag automatically inserts a line break after the closing center tag.
 
<center>This is a centered sentence</center>
 
This is a centered sentence.

 
Horizontal Rule Tag
To separate sections in a document, you can insert a horizontal rule tag <hr>.
A horizontal rule is displayed as follows:

<hr> Thickness
You can change the thickness of horizontal rules by specifying a pixel size for the line. A line with a size of 8 pixels is tagged like this:
 
<hr size=8>
 
and appears like this on your page:
 
 

 

<hr> Length
You can change the width of horizontal rules by specifying a width in pixels or a percentage length so that the line is a certain percentage of the size of the page.
The default width of the line is the width of the page, resizing as the page is resized. 
If you specify a percentage for the width, the line will resize if the page is resized.
If you specify a width in pixels, the line will remain the specified size, even if the page is more narrow than the line.
 
 
A line that takes up 50% of the page is tagged like this:
 
<hr width=50%>
 
and appears like this on your page:
 
 
 


A line 50 pixels long is tagged like this:
 
<hr width=50>
 
and appears like this on your page:
 
 
 


<hr> Alignment
Lines are centered by default, but you can specify the alignment by adding an align=right, align=center or align=left attribute.
The tagging looks like this:
 
<hr width=50% align=center>
 
and appears like this on your page:
 




<hr noshade> Creates a rule without a shadow
 
 
Comment Tag
It is possible to include comments in a source HTML document that do not appear when seen through a browser.
This is useful for giving warnings and special instructions within your document.
The Comments tag looks like this:
 
<!--- This comment will not appear in the browser --->
 
The comment can also break lines
 
<!--- This comment will not appear in the
browser even though it's broken between lines --->
 
 
 
Strike-through Tag
The strike-through tag displays text with a strike.
 
<strike>This is strike-through text</strike>
 
displays as:
This is strike-through text
 
 
Special Characters
If you need to use a special character not in the ascii standard,
you will have to use special tags. Here are the codes:

&aacute; .... á &acirc; .... â &aelig; .... æ
&agrave; .... à &amp; .... & &aring; .... å
&atilde; .... ã &auml; .... ä &ccedil; .... ç
&eacute; .... é &ecirc; .... ê &egrave; .... è
&eth; .... ð &euml; .... ë &gt; .... >
&iacute; .... í &icirc; .... î &igrave; .... ì
&iuml; .... ï &lt; .... < &ntilde; .... ñ
&oacute; .... ó &ocirc; .... ô &ograve; .... ò
&oslash; .... ø &otilde; .... õ &ouml; .... ö
&quot; .... " &szlig; .... ß &thorn; .... þ
&uacute; .... ú &ucirc; .... û &ugrave; .... ù
&uuml; .... ü &yacute; .... ý &yuml; .... ÿ



 
 
 Linking To Other Documents
The ability to link to other documents and pieces of text, images, video or audio.
Links are usually highlighted or underlined in a document so that you know of their existence. Clicking on the link opens up the document for viewing.
 
To link to a file on a Web server, your HTML tag would look like:
 
<a href="http://www.friscodepot.com/">Welcome to Frisco Depot</a>
 
The text that appears between the beginning and ending tags, "Welcome to Frisco Depot", is the text that the reader clicks on to go to that URL. 
 
Here are what the parts mean:
 
<   -- starts the anchor
href   -- stands for "hypertext reference"
http://www.friscodepot.com/  -- the URL of the other document
Welcome to Frisco Depot -- the text that will appear and be clickable
/a> -- ends the anchor
 
 
Linking To A Named Anchor
Anchors within the same document
To link to a specific section within the same document, you must define an anchor name inside the document and then link to it.
For example, if you were linking from the top of a document titled "page2.html" to the fourth paragraph of this same document, you'd give the fourth paragraph a name you make up, in this case "important," and you'd create a link to this name instead of a URL.
For this example. We will create a link from the top of "page2.html" to the fourth paragraph; we are going to call this link "important".
First, you would define the name "important" in the fourth paragraph with the name tag.
 
<a name="important">First sentence in fourth paragraph</a>
 
Next, create the link to this "important" anchor at the start of "page2.html". It would look like:
 
<a href="#important">link to important stuff</a>
 
The pound sign in front of the anchor name tells the browser to look for the link inside the document already loaded.
Note: Anchor names are case sensitive, and that some kind of non-blank text must appear in the named anchor tag.
 
Anchors within another document
There may be times when you not only want to link to a specific document, but more precisely, you want to link to a particular section of that other document.
For example, you wish to set up a link from the document "Sample HTML Page" to a particular section in a second document called "page2.html".
First, you set up a named anchor in the document you are linking to, page2.html.
To do this, go to the section in your second document where you want the reader to begin and define a named anchor.
Name this anchor "important". Insert the following tag in the appropriate place in the second document:
 
<a name="important">particular section text</a>
 
Now create the link in your first document. In your first document you need to include not only the file name, but the name you defined for the anchor.
This named anchor is separated from the file name by a pound sign (#). Place this tag where you want the link to show up (the highlighted text).
 
 <a href="http://www.friscodepot.com/page2.html#important">important text</a>
 
 
 
 
A user would see that the first document has the words "important text" highlighted. Clicking on this highlighted text would take them to the "important" section in the second document.
 
Absolute and relative linking
When linking from one document to another in the same directory, only the second document name is necessary, not the entire URL. For example:
 
<a href="page2.html">Go to the next page</a>
 
You can also link across directories to a document by relative position. For example:
 
<a href="../page3.html">Go to the third page</a>
 
Links to a document in one directory hierarchy higher than the current document.
 
Relative links are strongly encouraged as they allow you to move groups of files from one machine to another without editing.
 
Putting An Image In Your Document
When you have the image ready to be placed in your document, you must provide the path/location or complete URL of the image.
The HTML tag is as follows:
 
<img src="path or URL of image file">
 
Example, <img src="http://www.friscodepot.com/images/new.jpg">
 
Where "img src" stands for image source followed in quotes by the URL of the image. In this example, the image is called "new.jpg" and is located on the Web server "www.friscodepot.com" in the directory "images".
If the image is in the same directory as the document you are working on, you would simply reference the name of the file without needing the complete URL.
 
Example, you have a jpg or gif called "mypicture.gif" in the same directory as the file, your reference would be <img src="mypicture.gif"> 
 
Text and Image Alignment
Attributes of the image tag
Text can "float" to the right or left of an image.
The align=left attribute will float text down and to the left of the image.
The align=right will float text down and to the right of the image.


 
The tagging looks like this:
<img src="http://www.friscodepot.com/images/new.jpg" align=right>This is the new.jpg image. With the align=right tag, the text can be beside it instead of below it. It looks great this way.<br clear=right>
 
It will appear like this on the Web page:

 
 
<img src="http://www.friscodepot.com/images/new.jpg" align=left>This is the new.jpg image. With the align=left tag, the text can be beside it instead of below it. It looks great this way.<br clear=left>
 
It will appear like this on the Web page:

 
Note: If you are floating text beside an image and use the <p> tag, a blank line will be inserted and any following text will also appear beside the image.
When you want your remaining text to be below the image, you must include a <br clear=> tag so that text will go down to the next clear margin, below the picture. Specify clear=left if you are using align=left and clear=right if you are using align=right. The clear attribute is Netscape only.
 
 
Leaving space around an image
You can increase the space around an image by specifying a horizontal or vertical margin in pixels.
Adding the attribute hspace=20 will put a 20 pixel margin to the right and left of the image.
The attribute vspace= adds space to the top and bottom of the image.
 
 
The tagging looks like this:
 
<img src="http://www.friscodepot.com/images/new.jpg" align=left hspace=20> This is the new.jpg image. The text is aligned to the left and there is a horizontal space of 20 pixels. It looks great this way. It helps to add a horizontal space to the image so the text is not so close to the picture.<br clear=left>
 
It will appear like this on the Web page: 

 
 
Alternative Text
In case an image can't be displayed for some reason, it's a good idea to use the alt modifier to specify what should be printed if your graphic can't be displayed.
 
<img align=center alt="Spiffy new pic" src="http://www.friscodepot.com/images/new.jpg"> 
 

 
Making an image into a link
Anything can be a link - text or images. To make an image into a link you simply put the image tag inside the tag for a link.
You can make the belltower image into a link to the NC State homepage so that when the user clicked on the belltower the NC State homepage would appear.
The tag would look like this:
 
 <a href="http://www.friscodepot.com/atbuild/"><img src="http://www.friscodepot.com/images/new.jpg"></a>
 
The <img src> tag is inside the <a href></a> tag. When an image is a link it will have a blue box around it in some browsers.
 

 
Supported image formats
The most popular are the ".gif" and ".jpg" image formats.
 
GIF = Graphics Interchange Format
JPG = Joint Photographic Experts Group
 
Basic Table Tags
Tables must be enclosed in <table> </table> tags.
The border attribute can be added to this tag to specify whether border lines should be drawn around each cell in the table.
If you omit the border attribute, no border lines will be drawn.
The border attribute looks like: <table border>
 
Each row of a table is enclosed in <tr> </tr> tags. The number of rows in the table depends on how many pairs of these tags there are.
You can easily remember what this tag does by thinking "tr=table row." 
 
Each column item in a row is enclosed in <td> </td> tags. These tags define the table cell data.
For example, if you have 3 items in a row, you will have 3 sets of <td> tags. Think of "td=table data," where all data is an element of a row. 
 
Each column heading is enclosed in <th> </th> tags. The text in these cells is bold and centered in the cell. Think of "th = table heading."
 
Examples with cellspacing and border
A simple table with rows, borders around each cell, and column headings:
 
Name phone email 
Robert 567-6789 ralunch@ozone.gov 
Thomas 789-3456 tzspot@ozone.gov 
 
As you can see, the table is a little crowded. You can change this by adding the cellpadding= attribute to the table tag like this:
 
<table border cellpadding=5>
 
The resulting table will have table lines 5 pixels away from the data inside:
 

Name phone email
Robert 567-6789 ralunch@ozone.gov
Thomas 789-3456 tzspot@ozone.gov
   
How this table is tagged:
 
<table border cellpadding=5>
<tr>
 
<th>Name</th> <th>phone</th> <th>email</th>
</tr>
<tr>
 
<td>Robert</td> <td>567-6789</td> <td>ralunch@ozone.gov</td>
</tr>
<tr>
<td>Thomas</td> <td>789-3456</td> <td>tzspot@ozone.gov</td>
</tr>
</table> 
 
<table cellspacing=#> Sets amount of space between table cells
<table width=# or %> Sets width of table - in pixels or as a % of document width
<tr align=?> or <td align=?> Sets alignment for cell(s) (left, center, or right)
<tr valign=?> or <td valign=?> Sets vertical alignment for cell(s) (top, middle, or bottom)
<td colspan=#> Sets number of columns a cell should span
<td rowspan=#> Sets number of rows a cell should span (default=1)
<td nowrap> Prevents the lines within a cell from being broken to fit
 
 
Mailto function
The mailto function creates a link that, when clicked, displays a separate window which allows users to write and send an email message to the specified email address(es).
You can send mail to multiple addresses by separating all email addresses with a comma and space.
The tag looks like this: 
 
<a href="mailto:info@friscodepot.com">Click here to send an email</a>
 
and appears like this on your page:
 
 Click here to send an email
 
 
Tag Summary In Order Described
 
<html> </html> Creates an HTML document
<head> </head> Sets off the title & other info that isn't displayed on the Web page itself
<title> </title> Puts the name of the document in the title bar
<body> </body> Sets off the visible portion of the document
<body bgcolor="#??????"> </body> Sets the background color, using name or hex value
<body background="????.???"> </body> Defines an image as the background
<body text="#??????"> </body> Sets the text color, using name or hex value
<body link="#??????"> </body> Sets the color of links, using name or hex value
<body vlink="#??????"> </body> Sets the color of followed links, using name or hex value
<body alink="#??????"> </body> Sets the color of links being followed
 
<h1> </h1> Creates the largest headline
<h2> </h2> 
<h3> </h3> 
<h4> </h4> 
<h5> </h5> 
 
<h6> </h6> Creates the smallest headline
<p> </p> Causes a line break and adds a trailing blank line
<p align=?> </p> Aligns a paragraph to the left, right, or center
<br> Causes a line break with no trailing blank line
<div align=?> </div> A generic tag used to format large blocks of HTML, also used for stylesheets
<font size=?> </font> Sets size of font, from 1 to 7
<font color=?> </font> Sets font color, using name or hex value
<b> </b> Creates boldface text
<i> </i> Creates italic text
<strong> </strong> Creates strongly emphasized text
<em> </em> Creates emphasized text
<ul> </ul> Creates a bulleted list
<li> </li> Precedes each list item, and adds a number
<ol> </ol> Creates a numbered list
<dl> </dl> Creates a definition list
<dt> Precedes each definition term
<dd> Precedes each definition
<blockquote> </blockquote> indenting big blocks of text
<center></center> Centers text, images, and headings
<hr> horizontal rule is displayed
<hr size=?> Changes the thickness of horizontal rules
<hr width=??%> Changes the width of horizontal rules by percent
<hr width=??> Changes the width of horizontal rules by pixels
<hr align=?????> Specifies the alignment of horizontal rules
<hr noshade> Creates a horizontal rule without a shadow
<!-- ??????? --> This comment will not appear in the browser
<strike> </strike> Displays text with a strike-through
&aacute; .... á
&acirc; .... â
&aelig; .... æ
&agrave; .... à
&amp; .... &
&aring; .... å
&atilde; .... ã
&auml; .... ä
&ccedil; .... ç
&eacute; .... é
&ecirc; .... ê
&egrave; .... è
&eth; .... ð
&euml; .... ë
&gt; .... >
&iacute; .... í
&icirc; .... î
&igrave; .... ì
&iuml; .... ï
&lt; .... <
&ntilde; .... ñ
&oacute; .... ó
&ocirc; .... ô
&ograve; .... ò
&oslash; .... ø
&otilde; .... õ
&ouml; .... ö
&quot; .... "
&szlig; .... ß
&thorn; .... þ
&uacute; .... ú
&ucirc; .... û
&ugrave; .... ù
&uuml; .... ü
&yacute; .... ý
&yuml; .... ÿ
<a href="URL"> </a> Creates a hyperlink
<a name="????"> </a> Names a specific section within the same document
<a href="#????"> </a> Links a specific section within the same document
<a href="URL#name"> </a> Links a specific section in another document
<a href="????.html"> </a> Links one document to another in the same directory
<a href="../????.html"> </a> Relative link across directories to a document
<img src="name.type"> Adds an image
<img src="name.type" align=?> Aligns an image: left, right, center; bottom, top, middle
 
<img src="name.type" align=? hspace=??> Adds margin to the right and left of the image
<img src="name.type" align=? vspace=??> Adds margin to the top and bottom of the image
<img src="name.type" border=?> Sets the size of a border around an image
<img align=? alt="your text" src="image URL"> Adds alternative text
<a href="URL"><img src="image URL"> Adds a link to an image
<table></table> Creates a table
 
<table border=?> Sets width of border around table cells
<table cellpadding=?> Sets amount of space between a cell's border and its contents
<tr></tr> Sets off each row in a table
<td></td> Sets off each cell in a row
<th></th> Sets off the table header
<table cellspacing=#> Sets amount of space between table cells
<table width=# or %> Sets width of table — in pixels or as a percentage of doc width<tr align=?> or <td align=?> Sets alignment for cell(s) (left, center, or right)
<tr valign=?> or <td valign=?> Sets vertical alignment for cell(s) (top, middle, or bottom)
<td colspan=#> Sets number of columns a cell should span
<td rowspan=#> Sets number of rows a cell should span (default=1)
<td nowrap> Prevents the lines within a cell from being broken to fit
<a href="mailto:emailaddress"> </a> Creates a mailto link

 
© 2007-2008 Frisco Depot, All Rights Reserved