HTML basics

What is HTML?
The acronym HTML stands for Hyper Text Markup Language. Basically it's the language communicated between the browser and the web master. Browsers (Netscape, Internet Explorer are two of many browsers) have to know when the text needs to be bold, italics, etc., and where to place it on the page. Here are commonly used HTML tags with explanations and samples to help you build a web page. There are many more HTML tags that are browser specific. Be careful when using proprietary tags as they narrow the scope of your audience.

Basic HTML document tags

The backbone of an HTML document is formed by only a few required tags. The tags must be used in a specific order and content must be contained within the <BODY> tag. Here's an example of a basic HTML document:

<HTML>
<HEAD><TITLE>Title text goes here;</TITLE></HEAD>
<BODY>Contains all text and images</BODY>
</HTML>

<body>text goes here</body>

The body tag contains all of the text and images you'd like to present on a page. It has several elements:

background= tiles a JPG or GIF image as the background
<body background="./img-web/image-name.gif">
bgcolor= color in hex (computer talk for a color represented by a number code ) as a background for web page. Hex table link
<body bgcolor="#000000">
text= color in hex of the text
<body text="#000000">
link= color in hex of unvisited links
<body link="navy">
vlink= color in hex of visited links
<body vlink="#0000ff">
alink= color in hex of active links (color that appears as you click on the link)
<body alink="#ff0000">

The body tag for this document is:

<BODY BGCOLOR="#000000" TEXT="navy" LINK="#79CDFF" VLINK="#DA7AFE">

<head>title tag goes here</head>

The head tag is purely informational. It has several elements that do not affect the "look" or "style" of the document, but does pass information to the browser. The head tag must contain the title tag.

<title>text goes here</title>

Document title to appear at the top of the browser contained within the head tag
<head><title>WELS - HTML Tag Basics </title></head>

<html>text goes here</html>

HTML tag begins and ends your HTML document. It contains the head and body tags. Only one statement may precede an HTML tag: the prologue document identifier.Here's an example of the base tags used to create this page:
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.2//EN"> <HTML> <HEAD> <TITLE>WELS - Design Decisions -- Guide on html basics</TITLE> <META NAME="Generator" CONTENT="HTMLed Pro Version 2.5a"> <META NAME="Keywords" CONTENT="WELS,tutorial,help,guide,info,tips,html,tags,code"> <META NAME="Description" CONTENT="WELS Web help - Guide on html basics"> <META NAME="Author" CONTENT="jduran"> <META NAME="Owner" CONTENT="WELS"> </HEAD> <BODY BGCOLOR="#000000" TEXT="navy" LINK="#79CDFF" VLINK="#DA7AFE"> All of your content goes here! </body> </html>

Additional document tags offer information to the browser or a function. Although these tags are optional, one can't imagine the web without linked documents through information available from search engine indexes!

<base>

Base address of the HTML document is contained within the head tag

href= The base web site where relative links relate to
<head><base href="http://www.wels.net"></head>

target= The target window on which to display specified links
<head><base href="http://www.wels.net" target="_parent"></head>

<isindex>

Keyword search capability of the HTML document indicating an index document. Note: Your web host server must support this tag!

prompt= Text to precede the input box
<isindex prompt="Enter your search word: ">

<meta>

Document information passed to servers or to the client

Ever visit a sight that displays a page for a few seconds then takes you to the main page? Here's the code that accomplishes that task: (10 is the number of seconds, URL is the second page's address, and refresh is the action the browser takes.)
<meta http-equiv="refresh" content="10"; URL=http://www.wels.net>
Search engines such as Excite make use of "Keywords". Your content would be descriptive words separated by commas describing the content of your document.
<meta name="Keywords" content="WELS,help,html,guide,tags">
Search sites like Excite ask for a keyword to search by. Your results offer the link and a short description of the page content. Here's how you would define your page description for the search engine data base.
<meta name="Description" content="WELS Web help - Guide on html basics">
Most web masters sign their work within the html code. If you prefer not to reveal your name "in lights" here's another way to do it. This would only appear within your code!
<meta name="Author" content="jduran">
You may have written the HTML code, but not own the page! WELS obviously owns all pages coded by the web master.
<meta name="Owner" content="WELS">

Structure tags

So how do you get your text or image to indent, or be placed on the screen in a particular way? Structure tags "structure" your data. That is, the tags are meant to change the layout of text as intended by the web master or author. This type of HTML coding is quite simple. Here we list the most commonly used and browser friendly tags:

<blockquote>text goes here</blockquote>

Blockquote
Notice how the the entire block of quoted text indents.

When Jesus heard this, he said to him,
"You still lack one thing. Sell everything you have and give to the poor, and you will have treasure in heaven. Then come, follow me."

<p>text goes here</p>

Example of the paragraph tag
Notice the line spacing between sentences

Now it is required that those who have been given a trust must prove faithful.

I care very little if I am judged by you or by any human court; indeed, I do not even judge myself.

My conscience is clear, but that does not make me innocent. It is the Lord who judges me.

<br>

Line break
Here, the first sentence has one line break. The rest of the sentences below are given two line breaks. Notice how line break spacing differs from paragraph breaks.
1-Therefore I tell you that no one who is speaking by the Spirit of God says, "Jesus be cursed," and no one can say, "Jesus is Lord," except by the Holy Spirit.
2-There are different kinds of gifts, but the same Spirit.

3-There are different kinds of service, but the same Lord.

4-There are different kinds of working, but the same God works all of them in all men.

<nobr>text goes here</nobr>

No line break
Use this tag when you want more control over where a line break won't appear in a name or heading. The first sentence uses no tags at all...just regular spaces. The second sentence uses "no line break" tags between the WELS name so it can't break to a new line breaking up the name. This is especially useful when creating links so they don't wrap to the next line!

Welcome to our web site presented by Wisconsin Evangelical Lutheran Synod a Lutheran church organization that believes in the Bible's teachings

Welcome to our page presented by Wisconsin Evangelical Lutheran Synod a Lutheran church organization that believes in the Bible's teachings

<wbr>

Word Break
This tag allows you to tell the browser "just in case you want to break at a particular point, do it here where I've placed my tag". It's not often you'll use this tag, but it may come in handy for that rare instance of a long word or name that would look better if broken at a certain point, rather than left to the browser's discretion. (Because of different screen resolutions, to show this tag I created a very long word and placed the word break tag between the two Z's.
Test me, O LORD, and try me, examine my heart and my mind; aaaaaabbbbbbccccccdddddddZZeeeeefffffggggghhhhhiiiijjjjkkkkllllmmmmnnnoooppp

<center>text goes here</center>

Center
Tag allows centering of text and images. Phrase one is centered and phrase two is not.
Let love and faithfulness never leave you; bind them around your neck, write them on the tablet of your heart.

Let love and faithfulness never leave you; bind them around your neck, write them on the tablet of your heart.

Comment
Your text is contained within the comment tag to be viewed only by you. Well, if someone would like to view your source code, they too can read it. But the text within this tag is not part of your presentation. It does however add to the document size. So don't write a novel within the comment tag!

The comment tag within your source looks like this:


<div>text goes here</div>

Division
This tag allows you to place text or images on the page. The align option tells the div tag where. Sentence one uses <div align=right>, second uses <div align=center>, and third uses <div align=left>,

"Look, the Lamb of God!"

"Look, the Lamb of God!"

"Look, the Lamb of God!"

<hr>

Horizontal rule
Draws a line across the page. Options include: <hr> (no options) <hr align=left> <hr align=right> <hr align=center> <hr noshade> (default is shaded) <hr size=20> (# of pixels defines thickness of the line) <hr width=20%> (# of pixels, or % of the page) <hr size=10 noshade align=center width=20%> (All options included)

Style tags

Style is a way to "get noticed". Getting noticed on the web has become a tougher task each day as the web continues to grow. You may think that simple tags such as bold or italics couldn't possibly add to the style of your presentation, but they do! Your creative use of the style tags can not only enhance the appearance of a page, but also decrease the download time! Many style tags can replace adding another image to a page without losing style.

<b>text goes here</b>

Bold appears bold

<big>text goes here</big>

Big appears big

<blink>text goes here</blink>

Blink annoys most with a blink

<cite>text goes here</cite>

Cite tags text as italics (so why not use the italics tag :^). Here is a passage using the cite tag

"Let love and faithfulness never leave you; bind them around your neck, write them on the tablet of your heart. Then you will win favor and a good name in the sight of God and man. Trust in the LORD with all your heart and lean not on your own understanding; "

<code>text goes here</code>

Code tag puts text into a fixed font like courier.

<em>text goes here</em>

Emphasis tag is the same as the italics tag to emphasize

<font>text goes here</font>

Font tag allows you to make text appear with the following qualities:

face= (default is browser font face default)
<font face="Arial">text goes here</font>
This is the Arial font face.

size= (specify size in number or increments of plus or minus the baseline font size of 3)
<font size="+2">text goes here</font>
This is the +2 font size.

color= (default is black)
<font COLOR="#FF0000">text goes here</font>
The font tag is specifying the color red.

all attributes
<font COLOR="#52FEFA" size="5" font face="Arial">Love your neighbor as yourself.</font>
Love your neighbor as yourself.
Note: Good design never includes more than 3-4 fonts per page, with consistent usage.

<h1>text goes here</h1>

Headings

The highest level of a heading is <h1>, then by <h2> through <h6> (too small). Example of use:

Sample of <h1>

Sample of <h2>

Sample of <h3>

Sample of <h4>

Sample of <h5>

Sample of <h6>

<i>text goes here</i>

Italics does what it says! Italics

<pre>text goes here</pre>

Preformat tag is a life saver at times. If you have a report that needs to be posted pronto: you can use the preformat tag and it will recognize multiple spaces and line breaks as it appears in rich text format. Sentence one uses the preformat tag, sentence two does not.
John Smith Age 42 Los Angeles CA 2 3 4 5 6
John Smith Age 42 Los Angeles CA 2 3 4 5 6

<small>text goes here</small>

Small tag makes text appear small

<strike>text goes here</strike>

Strike through tag makes text appear ~~text~~

<strong>text goes here</strong>

Strong tag makes text appear strong like bold

<sub>text goes here</sub>

Sub tag is like a _submarine sub script

<sup>text goes here<sup>

Sup tag is like ^superman super script

<u>text goes here</u>

Underline can confuse visitors because they think it is a link when it's really only an underline

Link tag

The link tag helps visitors visit! What do I mean by that? Without links you have no means other than typing in a new address into your browser rather than clicking and going! Attributes include:

<a...>text goes here</a>

<a href="http://">text goes here</a>
Hypertext reference contains the link address. The many link forms include ftp mailto, telnet, and more. Example code to create an http link would be:
<A HREF="http://www.wels.net/">WELS</A>

<a name...>text goes here</a>
Name attribute connects not only to a link but also a target of a link; where target is the name you assign within the text of a document.

Notice how you can press a button on the left side of the screen to get to a certain section on the right side of the screen? The anchor tag with the name attribute is being used! The code is quite simple:

Button bar code:

<A HREF="#gohere">Image or Text goes here</A> Content page code:

<A NAME="now-here">Text is optional</A>

Image tag

The web with no pictures? Boring! Okay, so you could argue that there are a lot of good books without illustrations. But don't you enjoy scanning through a magazine...just to look at the photos? Images have a purpose. A photograph can coax an individual into reading an entire article. Imagine a print of a little boy with tears running down his cheeks standing in the middle of a freeway. (I guess words convey the message well too!) But it only takes a glance to say that sentence in a picture! And everyone who sees that picture wonders "Why is he crying, and what is he doing in the middle of the freeway? Where are his parents?". You get the picture!

<img...>

src= attribute tells the browser where to find the image Thus the tag looks like this:

<img src="./image-lib/image.gif">

align= attribute has values of "left", "right", "top", "middle" and "bottom". You can tell the browser where on the page you would like the image placed in relation to text.
Example of <img src="./img-web/ball.gif" align="left">

Example of <img src="./img-web/ball.gif" align="right">

Example of <img src="./img-web/ball.gif" align="top">

Example of <img src="./img-web/ball.gif" align="middle">

Example of <img src="./img-web/ball.gif" align="bottom">

height= and width= indicates image size in pixels for both height and width
alt= allows you to describe the image for those unable to view it

border= controls the thickness of the border; 0 being invisible

border=1

border=5

border=0

<ismap>

Image map tag. Your web server controls the type and access to this cgi-bin script included in your HTML document. Here's an example suited for the WELS server but not particularly yours:
<map name="hr-vine"> <area shape="rect" alt="home page" coords="26,13,83,18" href="http://www.wels.net/sab/cad/cad-home.html"> <area shape="rect" coords="116,15,214,38" href="http://www.wels.net/sab/cad/cad-home.html"> <area shape="rect" coords="267,0,354,27" href="mailto:usr8@sab.wels.net"> <area shape="rect" href="http://www.wels.net/sab/cad/cad-home.html" coords="0,0,431,35"> </map>

Areas "CAD", home button, and e-mail button are mapped to a specific link name. If you click on the area that is mapped it allows you to jump to that link.

List tags

Organize, organize, organize! List tags are a wonderful way to group information that is pleasing to the eye. There are several varieties of the list tag. Try them all!

<dl>text goes here</dl>

Definition list
First you name the term then the definition within the two option tags.

Actual code:
<dl> <dt> Ant <dd> An insect that forms an army to destroy your picnic. </dl>
Output:

Ant
An insect that forms an army to destroy your picnic.
I put another <dd> tag here for an additional definition. You can put as many of each as you'd like. You may also use this tag for indentation purposes.

<ol>text goes here</ol>

The order list allows you to organize lists of data quite nicely. There are a few types that help you define your ordering label as well. The default shown first is by numbers.

Actual code:

<ol> <li> list item <li> list item <li> list item <li> list item </ol>

Output:

list item
list item
list item
list item

You can also define type as: Capital "A" or small "a" letters, and Large "I" or small "i" roman numerals starting at any increment. Here is an example:

Actual code:

<ol type="I"> <li> list item <li> list item <li> list item <li> list item </ol> Output:

list item
list item
list item
list item

<ul>text goes here</ul>

Un-ordered list tag is commonly called the bulleted list. You have your choice of three bullets too: a circle (default), square or disc. Examples follow:

Actual code:

<ul TYPE="square"> <li> list item <li> list item <li> list item <li> list item </ul> Output:

list item
list item
list item
list item

Table tags

Tables are the best! When you master this tag, you can create professional looking pages. Your tables can be borderless, transparent, colorful and even used to create a graphic effect! Experiment with and learn this tag. It will frustrate you as you learn it, but the rewards are great. (Hint: When coding with the table tag...consistently place your tags in an orderly manner within your document. Later, if you have to maintain the table, it will be easier to read the code.)

<table>text goes here</table>

<table width="100%" height="45" border="1" cellspacing="5" cellpadding="10" bgcolor="black">

The table tag is necessary to build the table, yet it needs other tags to define it such as the <tr>,<td> and <th> tags. Table tag attributes include:

width= percentage of the window display or in pixels
height= percentage of the window display or in pixels
border= table border width
cellspacing= spacing between cells
cellpadding= spacing between a cell and its content
bgcolor= background color of the table in hexadecimal the default is transparent

<tr>text goes here</tr>

<tr bgcolor="navy" align="middle" valign="top">

Table row tag tells the browser when a new row is to begin. <tr> tags have a few attributes but all are optional.

bgcolor= background color of the table in hexadecimal the default is transparent
align= aligns data cells <td> horizontally with options of left, right and center (default is left)
valign= aligns data cells <td> vertically with options of top, middle, bottom, and base-line. Without setting this option the default is middle.

<td>text goes here</td>

<td bgcolor="navy" align="middle" valign="top" colspan=2 rowspan=2>

Table data tags <td> frame the actual content of your table and tell the browser when a new cell begins within a row.

align= aligns data in this cell horizontally with options of left, right and center (default is left)
valign= aligns data in this cell vertically with options of top, middle, bottom, and base-line. Without setting this option the default is middle.
colspan= allows you to span data over into another cell or more.
rowspan= allows you to span data down into another row or more.
bgcolor= background color of the table in hexadecimal the default is transparent

<th>text goes here</th>

<th bgcolor"black" align="center" valign="center" colspan="2" rowspan="2"> The table header tag is equivalent to the table data tag. So why use it? It save you time. The tag bolds and centers data automatically.

align= aligns data in this cell horizontally with options of left, right and center (default is left)
valign= aligns data in this cell vertically with options of top, middle, bottom, and base-line. Without setting this option the default is middle.
colspan= allows you to span data over into another cell or more.
rowspan= allows you to span data down into another row or more.
bgcolor= background color of the table in hexadecimal the default is transparent
height= percentage of the window display or in pixels

Tag structure example:

<TABLE bgcolor=#0080FF cellpadding=10 cellspacing=2 border=3> <TR><th colspan=2>Personalities</th></TR>
<TR><td>Type A</td> <td>Type B</td></TR> </TABLE>

Here's an example of the <table> tag:

Output Actual code

Personalities

Type A Type B

aggressive relaxed

competitive self driven

emotional calm

complain compliment

GUESS! Which are

you?

A little of both, perhaps?

<TABLE bgcolor=#0080FF cellpadding=10 cellspacing=2 border=3> <TR><th colspan=2>Personalities</th></TR> <TR><td>Type A</td> <td>Type B</td></TR> <TR><td>aggressive</td> <td>relaxed</td></TR> <TR><td>competitive</td> <td>self driven</td></TR> <TR><td>emotional</td> <td>calm</td></TR> <TR><td>complain</td> <td>compliment</td></TR> <TR><td rowspan=2 bgcolor=#C72323>GUESS!</td> <td bgcolor=#008040>Which are</td></TR> <TR><td bgcolor=#008040>you?</td></TR> <TR><td colspan=2 bgcolor=#800080>A little of both, perhaps?</td></TR> </TABLE>

Frame tags

Frames are a wonderful way to present content in a unique and orderly fashion. Before choosing a frame design, please think through navigation and content flow of your presentation. Frames can make or break a visitor's comfort level. Make sure all areas of the page are viewable in different resolutions. It's usually best to indicate size by percentage rather than pixels to avoid truncation of data. Common sense far outweighs creativity when using frames!

<frame>

Elements:

src= Location of HTML document to display in the frame

name= You can name the frame to specify for a link's target, or you can use one of the four default names below:

_blank Loads into a new window
_self Loads over current document
_parent Loads over the parent frame
_top Loads to the top level of linked pages

marginwidth= Indents in pixels on left and right side of frame. Default without option is browser's discretion.

marginheight= Indents in pixels on top and bottom side of frame. Default without option is browser's discretion.

scrolling= Controls whether a scroll bar should appear. Best bet is "auto" to avoid possible truncation.

yes
no
auto

noresize= Disables the viewers opportunity to decrease window size. No values required.

frameborder= Controls whether to display a border around the frame.

yes
no

<frameset>text goes here</frameset>

The main setting for a frame. It indicates to the browser that a frame tag is to be specified with attributes. There are only two options with this tag setting the characteristics of rows and columns specified in percent, pixel or scale separated by commas. You may choose a * character in place of a numeric value and the browser will display the size as necessary. It's important to remember to test this tag on different screen resolutions to obtain intended results.

rows= read paragraph above
cols= read paragraph above

<noframes>text goes here</noframes>

No Frames option allows the web master to a non frames version of the content by actually displaying the content within the no frames tag.

To learn more about frames, review the source code of these frame examples:
(Links to examples...use your browser's equivalent of the "back" button to return to this page!)

Navigation strip H: upper portion button bar / lower portion content
Navigation strip V: left side button bar / right side content
Vertical 50/50 split: left side outline/ right side detail
Horizontal 50/50 split: upper portion instruction / lower portion examples
"T" split: main menu upper / left side outline / right side detail
"r" split: left side navigation strip / upper portion main menu / lower right corner content
"L" split: left side button bar / lower portion site info / upper right corner content
Custom split: Split the screen as needed

Form tags

Forms offer the visitor a chance to interact with the page. Each form uses these basic elements along with a server side language to execute a function or procedure. You must first learn from your web host provider what complimentary language is used to pass the form data to your server. Many times the web host provider has basic CGI scripts ready for use in your HTML documents. Here are the basis elements used to create a form within your document.

<form>text goes here</form>

Specifies a form is starting to the browser

<input>text goes here</input>

A single line for the viewer to input information

<option>text goes here</option>

An option (like multiple choice) with a select button

<select>text goes here<select>

Allows one to select one of the options in a form

<textarea>text goes here</textarea>

An area for the viewer to enter more than one line of input.

Examples of forms:

NL Magazine subscription
Heaven Sent Postcards
National Teachers Convention Registration
Guest book

Entity tags commonly used

Not all keyboard characters are viewable by browsers. The entity tag ensures that your intended character is viewable by the browser. There are so many, that I have included links to web pages devoted to entities.

® registered tag is ®
& ampersand tag is &
no break space tag is  
> greater than tag is >
< less than tag is <
^TM trademark is not an entity, use this: ^TM ("TM" surrounded by the super script tag)

Links to entity tables

E-mail: comments and questions