THE HTML LEARNING PAGE

The HTML Learning Page
This section was compiled by Frank M. Painter, D.C.
Send all comments or additions to: Frankp@chiro.org

Welcome to the HTML Learning Page!

If you “right click” this page (right click with your mouse), and select View Source, you will see the “guts” of this page (text surrounded by HTML tags). All “web pages” are rendered in a special “language” called HTML or “hyper text markup language”.

If you have ever used the program “Word Perfect”, you know you can use the F11 feature to “view” how you have formatted your text. Any text, which is bold, had “tags” around it that looked like this:
[BOLD] Text [bold]

HTML uses “tags” in a very similar fashion.

Below you will find a table with some of the most common HTML tags.

Part I– Let's look at the Components of a Web Page!

Every web page is a document which starts with the tag <HTML> and ends with the tag </HTML>.

Note how the “end tag” looks just like the “start” tag, except that it adds the forward slash, which translates as the “please-close-this-tag” element ( / ).

HINT: Most HTML commands require you to use both the start and end tags, otherwise the rest of the page will continue to have that same “modification”. That's a common error on pages, forgetting to add a close tag.

There are several parts to a web page:

A.) The HEAD

At the top of the document, you have the <HEAD> tag. This part of the page tells the “browser” how your page will look. Inside the “HEAD” tags, you may add several elements.

1. Meta Tags

The <TITLE> tag names your page, and this information will show up on the “toolbar” at the top of your browser, and on the BUTTON on the Windows toolbar at the bottom of the screen. Remember to use the “end tag” </TITLE>

For example, this page bears the Title: HTML LEARNING PAGE

The <META NAME="description" CONTENT="Add your Page Description Here"> tag. This is what shows up on many search engines as the "description" of your website.

The <META NAME="keywords" CONTENT="Add your keywords here, separated by commas"> tag. These "keywords" suggest what content may be found on your site, and are used by some search engines to help people locate your website.

The <META NAME="Author" CONTENT="Frank M. Painter, D.C"> tag lets folks know who the author of the page is.

NOTE: Please check the “source code” for this (and other) pages to see how you might best use the above listed Meta Tags. Meta Tags no longer have much impact on how the major search engines list your website.

2. The Visual Characteristics of Your Page:

The <FONT COLOR="#000000"> tag can change the color of your TEXT. Look at this Color Chart for the six character [or Hexadecimal Notation] codes used to describe each color.

You end this command with the “end-tag” </FONT>.

Just “cut and paste” the code for the color you want inside the “formula” (replace the 000000 with the color “code” you want). Make sure you don't erase the # when pasting in the code!

The <BODY BGCOLOR="#FFFFFF"> tag calls for the “background” color of the page itself. This page has a white background. ("#FFFFFF")

The <LINK="#8A2BE2"> tag calls for the color of the “unvisited links” on your page.

The <VLINK="#B22222"> tag calls for the color of the “visited links” on your page.

The <ALINK="#00008B"> tag calls for the color of the “active links” on your page.

NOTE: You will replace the six letter or number characters in the "#B22222" Tags with those from the Colors Chart to make each component look the way YOU want.

The <LEFTMARGIN=0> tag and the <RIGHTMARGIN=0> tag defines the location of the “left margin” and “right margin” of your page. That defines how close text or graphics can get to the actual “edge” of your screen.

A setting of "LEFTMARGIN=0" means that your text will start right at the edge of the screen. Personally, I usually like to stay off the edge, as it's tiring to read. If you selected =20, that would mean you has a border of 20 pixels. Play with this setting, until it looks right to you! If you leave MARGIN tags off of your page, the browser will set a standard margin width for you.

These elements can be combined,
and the finished product might look like this:

<BODY BGCOLOR="#00FFFF" LINK="#8A2BE2" VLINK="#B22222" ALINK="#00008B" LEFTMARGIN=0 RIGHTMARGIN=0> <FONT COLOR="#000000">

This Blue box is an example of a Table (without a "border") with the MARGINS set at =0, the text set for three different colors (yellow, white and black), and the BGCOLOR set for blue.

All of my older web pages used the formula listed above (the white text) , so that the purple space bars at the top of this box (and on all my older pages) went right to the "edge" of the screen.

Then the BODY of the page (all the text and images) were set within a TABLE format, with the WIDTH set at 90%, or 85%, depending on the content of that particular page. Then I centered the TABLE, and justified the TEXT, for the clean look.

Another way to do that, without the use of tables is to use the <BLOCKQUOTE> tag. It's like a TAB on the computer, and each <BLOCKQUOTE> tabs in about a half-inch in from the edge of the screen, on BOTH sides of the screen.

Here's an example of the table tags which "size" the rest of this page:

<TABLE WIDTH="85%" BORDER="0" ALIGN="Center" BGCOLOR="#000000">
<TR>
<TD><P ALIGN="JUSTIFY">

B.)    The BODY of the Web Page

Just below the </HEAD> tag is where you insert the <BODY> tag. This is where the "contents" of your web page goes.

Here's an Example of all the tags required to create a complete basic web page.

<HTML>
<HEAD>

<TITLE>NAME OF YOUR PAGE HERE</TITLE>

<META NAME="description" CONTENT="DISCRIPTION OF YOUR PAGE HERE">

<META NAME="keywords" CONTENT="KEYWORDS LISTED HERE">

<BODY BGCOLOR="#FFFFFF" LINK="#8A2BE2" VLINK="#B22222" ALINK="#00008B" LEFTMARGIN=0 RIGHTMARGIN=0> <FONT COLOR="#000000">

</HEAD>

<BODY>

<TABLE WIDTH="90%" BORDER="0" ALIGN="Center" BGCOLOR="#000000">
<TR>
<TD><P ALIGN="JUSTIFY">

Your page (text and graphics) is placed here!

</TD></TR></TABLE>

</BODY>

</HTML>

––End of Sample Page Tags

By the way, that black line I used as a divider is created with this tag: <HR>

You can make it thicker (or make it a color, or control it's width on the page) by adding a width or FONT COLOR tag to it, like this:
<HR SIZE="6" WIDTH="100%" COLOR="#B22222">

That tag generates this different looking HR (or hard rule)

Part II – Now, Let's add Stuff to Your Page!

A.)    Adding "Links" to your page.

I. If you want to add a link to another web page, you will use this format:

<A HREF="URL Here">Name of LINK Here</A>

Note the "start tag" (<A HREF=" ">) and "end tags" (</A>). The URL tells the browser to go to the specified page (like https://www.chiro.org/) and the "name of the link" is what actually appears on the page, and is what's underlined.

An example of a link from my Acupuncture page is:

<A HREF="http://www.iama.edu/acupuncture-information.htm">
General Acupuncture Information</A>

The above HREF tag yields this link:       General Acupuncture Information

II. If you want to add a link to something located on this particular web page (like another section called "Case Studies"), you will use something called a RELATIVE LINK:

<A HREF="#Case_Studies">Case Studies</A>

and then just above the "header" for that section, you will put this "anchor", so the browser can find it:

<A NAME="Case_Studies">

B.)    Adding Graphics to your page.

If you want to add a Graphic to your web page, you will use this format:

<IMG SRC="URL of the Graphic Here" ALT="[Name of Graphic]" WIDTH=23 HEIGHT=22>

NOTE: The characteristics of a graphic tag are:
SRC="URL" a.k.a. "Unique Resource Locator" or the actual "address" to that graphic,
like https://www.chiro.org/research/GRAPHICS/Floyd.gif

ALT gives a Name to the graphic. If you hold the Mouse Pointer over a graphic, the name you have assigned it will appear!

WIDTH can give a fixed Width to your graphic, and

HEIGHT sets the Height.

Both these attributes can be set as either pixel width, or as a percentage of the page's width/height such as:

WIDTH=23 Or WIDTH="100%"

This is the "tag" for one of my favorite graphics:

< IMG SRC="https://www.chiro.org/LINKS/GRAPHICS/Floyd.gif" ALT="[Floyd]" >

This Graphic looks like this:         ------->

HTML "TAGS"

Remember: Virtually all tags have a "start" and an "end" tag,
like <B>Text</B> for Bold.
Just replace the word TEXT with the words you want to Bold.

<B>TEXT</B> =    BOLD

<BIG>TEXT</BIG> =    Makes the text one size bigger

<I>TEXT</I> =    ITALIC

<U>TEXT</U> =    UNDERLINE

<H1>TEXT</H1> =    Headers, from 1 (Largest) to 6 (Smallest) NOTE: Headers "force" a space around them.

<FONT SIZE="+1">TEXT</FONT> =    Makes the text one size bigger

<FONT FACE="Arial">TEXT</FONT> =    Changes the "Font" TO "Arial"...
You can use any MS font type you like

<FONT COLOR="#000000">TEXT</FONT> =    Changes the "Font" Color to Black
       Refer to the Colors Chart
      for other choices.

An Example: (You can combine Color, Size, and Face all into one statement)

<FONT SIZE="+2" FACE="Arial" COLOR="#8A2BE2">YOUR TEXT HERE </FONT>

Yields:    Some Large Purple Script in the Arial font

<BR> =    A "LINE BREAK"

<P ALIGN="JUSTIFY"> =    TEXT "ALLIGNMENT"
         Your choices are:
         "LEFT"
         "RIGHT"
         "JUSTIFY"

<CENTER>... </CENTER> =    CENTERS WHAT'S BETWEEN THE TAGS

<DIR> ... </DIR> =    MAKES AN "INDENT" OR "TAB"

<SUP> ... </SUP> =    MAKES "SUPERSCRIPT" ---> 10²¹

<SUB> ... </SUB> =    MAKES "SUBSCRIPT" ---> H₂O

<HR>
Example:
<HR SIZE="2" WIDTH="100%" COLOR="#D2691E"> =    Adds a "Hard Rule" Line

SIZE controls the thickness

TABLE CREATION

<TABLE = All tables start with this command

BORDER="1" = Calls for a Border (sized in pixels)

BORDERCOLOR="#1E90FF" = Controls the color of the Border

WIDTH="100%" = Controls the width of the table
as a percentage width of the page

WIDTH=200 = Controls the width of the table (in pixels)

CELLPADDING="2" = Calls for the distance between the text and the table borders (sized in pixels)

CELLSPACING="2" = Calls for the distance between the cells themselves (go small spacing)

TABLE ELEMENTS

<TR>...</TR>

= Creates (and ends) a Table Row

<TD>...</TD>

= Creates (and ends) a "Cell" within a Table Row

Control of the appearance of elements within a Cell
(inserted WITHIN the <TD> command)

<TD BGCOLOR="#FFFFCC"> = Controls the background color of a cell (like yellow), when inserted in the <TD> command

ALIGN="Center" = Aligns Text (horizontal control) within the cell: Choices are right, left, or center

VALIGN=middle = Aligns Text (vertical control) within the cell: Choices are top, bottom or middle

Control of the size and location of a Cell
(inserted within the <TD> command)

COLSPAN=6 = Means that this "cell" will span across 6 columns of the table

ROWSPAN=4 = Means that this "cell" will span down 4 rows of the table

An example of a designed Table

<TABLE BORDER="3" CELLSPACING=1 BORDERCOLOR="#1E90FF" CELLPADDING=8 WIDTH="100%">

<TR> This starts the first "row" of a table

<TD>
This creates the first "cell" of a table ~ Insert Text, Graphics etc. here!
</TD>

<TD>
This creates the second "cell" of a table
</TD>

</TR> This ends the first "row" of a table

</TABLE> This ends the table
Add as many Cells (<TD>) and Rows (<TR>) as you need!

Return to the LINKS
© 2001 and 2015      All Rights Reserved      ACAPress and Frank M. Painter, D.C.

Home Page

Visit Our Sponsors

Become a Sponsor

Join us

Please read our DISCLAIMER

The HTML Learning Page

Return to the LINKS