smiling.gif (1578 bytes)             display(2).gif (5028 bytes)     

PART 2

6. Font Tags

This is the FONT TAG: <font>.
Within it, you can alter the text in yourpage. Somethings you can do are change the typeface (FACE), change thecolor (COLOR), and change the size (SIZE). You can change the appearance of your text as many times as you want, even in the middle of a word.

SIZE (is restricted to 1 - 7, 7 is the largest)
Hello, <FONT SIZE=6>people</FONT SIZE> my name is Mo.
Hello, people my name is Mo.

COLOR
Hello, <FONT COLOR=00FFFF>people</FONT COLOR> my name is Mo.
Hello, people my name is Mo.

FACE (is restricted to what typefaces the particular computer viewing the page will understand)
Hello, <FONT FACE=ARIAL>people</FONT FACE> my name is Mo.
Hello, people my name is Mo.

ALL THREE (You can also do just 2)
This HTML: <FONT SIZE=7 COLOR=PURPLE FACE=ARIAL>Hello, Dingdong!</FONT SIZE COLOR FACE>, will produce this:
Hello, Dingdong!
You can also just use some of the FONT tags along with some TEXT tags:
<FONT SIZE=4 COLOR=PURPLE><b><i>Hello, Dingdong!</i></b></FONT SIZE COLOR>
Hello, Dingdong!
Okay, here's something annoying, but good to know. You can change the color while keeping the size constant.
HELLO, I'M COLORFUL
Here's the HTML for it:
<b><font size=5><font color=red>HELLO, </font color><font color=yellow>I</font color><font color=blue>'</font color><font color=white>M</font color> <font color=green>C</font color><font color=black>O</font color><font color=gray>L</font color><font color=white>O</font color><font color=aqua>R</font color><font color=blue>F</font color><font color=red>U</font color><font color=yellow>L</font color></font size>
BACK TO MENU

7. Lists

Definitions:
UL = unordered list
OL = ordered list
LI = line input
DL = descriptive list
DT = descriptive title
DD = descriptive data
In the LI tag of non-ordered lists, you can add type=" ". The only ones I know are "disc" and "square".
Example of HTML: <li type="square"></li>. To see an example of the <li type="square">, see Table Example #3.

These are examples of three types of lists.
This is an unordered list.
  • unodered item 1
  • unordered item 2
This is an ordered list.
  1. ordered item 1
  2. ordered item 2
This is a descriptive list.
Descriptive Title
descriptive item 1
descriptive item 2
These are the HTML codes for the 3 types of lists.
This is an unordered list.
<ul>
<li>unodered item 1</li>
<li>unordered item 2</li>
</ul>
This is an ordered list.
<ol>
<li>ordered item 1</li>
<li>ordered item 2</li>
</ol>
This is a descriptive list.
<dl>
<dt>Descriptive Title</dt>
<dd>descriptive item 1</dd>
<dd>descriptive item 2</dd>
</dl>
Now, let's combine some lists. Like an outline.
Here's what it looks likeHere's the HTML
  1. Spoken Languages
    • Spanish
    • French
    • English
    • Australia
      Britain
      Boston
      Southern U.S.
  2. Computer Languages
    • Basic
    • DOS
    • HTML
    • JavaScript
<ol><li>Spoken Languages</li>
<ul><li>Spanish</li>
<li>French</li>
<li>English</li>
<dl><dd>Australia</dd>
<dd>Britain</dd>
<dd>Boston</dd>
<dd>Southern U.S.</dd></dl></ul>
<li>Computer Languages</li>
<ul><li>Basic</li>
<li>Dos</li>
<li>HTML</li>
<li>JavaScript</li></ul></ol>
BACK TO MENU

8. Horizontal Rulers

Horizontal Rulers are great for separating material on a webpage. They are very easily spotted when scrolling. That's good, but not everything about them is not good... too many HRs do make a page look outdated and cheap.
The default settings for HRs are the "3D look", "SIZE=2", and "WIDTH=100%". They are also centered.
This is the HTML for a default Horizontal Ruler: <hr>
This is what it looks like:
Here are some alterations and their HTMLs.
The above HR's HTML is <hr noshade size=10 align=right width=85%>

The above HR's HTML is <hr size=15 width=75%>

The above HR's HTML is <hr size=25 align=left width=200>

The SIZE #s are in pixels. The WIDTH #'s are in pixels when not followed with a "%". When the # is followed with a "%", then it turns into percent of screen size. The 3D look can be altered with "NOSHADE". You can also ALIGN the HR to either LEFT or RIGHT.
BACK TO MENU

9. Image Tags

Okay, we can play with images. HTML has certain limitations on images. The web only reads J-PEGs and GIFs. Those stand for the image extensions: ".jpg" and ".gif", respectively.
The HTML for adding images to an HTML document is this:
<img src="imagename.extension">
IMG = image, SRC = source
You can add the following tags into the IMAGE tag to enhance the image:
ALT=" ", WIDTH=#, HEIGHT=#, ALIGN=LEFT or RIGHT or CENTER or MIDDLE, and BORDER=#

The ALT tag names an image before it is fully downloaded into an HTML document. In the HEIGHT, WIDTH, and BORDER tags, you can change the value in pixels. In the WIDTH tag, you can either use pixels, or add a % to make it a percentage of the screen width.

This is an image in its default settings... it has no BORDER, no ALT tag, and it is at its original size, 75 pixels by 75 pixels.
<img src="bk1.jpg">

<img alt="smile" width=50 height=50 src="bk1.jpg" border=1>
smile
<center><img alt="smile" width=100 height=100 src="bk1.jpg" border=5></center>
smile
<img alt="smile" width=100% height=100 src="bk1.jpg" border=0>
smile
BACK TO MENU

10. Hyperlinks

A hyperlink takes you from where you are to where you want to go. Sometimeswhere you want to go is another page, another site, a new image, a sound, or others...

This link will not take you anywhere. It just shows the right approach
<A HREF="LOCATION">TEXT LINK OR IMAGE LINK</A>
TEXT LINK OR IMAGE LINK

The HTML for this link shows how to LINK to any file in the same folder.
<a href="filename.extension">Same Folder Link</a>
The HTML for this link shows how to LINK to any file in a lower folder.
<a href="lowerfoldername/filename.extension">Lower Folder Link</a>
The HTML for this link shows how to LINK to any file in a higher folder.It is imperative that you use " ../ " before the higher folder's name.
<a href="../higherfoldername/filename.extension">Higher Folder Link</a>

This link will take you to the "bk1.jpg" in a new screen.
<A HREF="bk.jpg">Click here to go to the "bk1.jpg"</A>
Click here to go to the "bk1.jpg"

This link will take you to a YAHOO search.
<A HREF="http://www.yahoo.com">YAHOO</A>
YAHOO

This link will take you to the Horizontal Rulers section on this samepage.
<A HREF="#horizontalrulers">Horizonatal Rulers</A>
Horizontal Rulers
The way you do that is to set up <a name="horizontalrulers"></a>at the spot (on the same page) you want to be linked.

If you want to link to a specific spot on a different page...
<A HREF="part1.html#bodytags">Body Tags</A>
Body Tags
The way you do that is to set up <a name="bodytags"></a>at the spot (on the other page) you want to be linked.

You can also CENTER hyperlinks.
Body Tags
You can also CENTER hyperlinks, images, and text together (in any combination).
<center><font size=7>Hello</font size><img src="bk1.jpg"><a href="http://www.yahoo.com">Yahoo</a></center>
HelloYahoo

You can also make images be links. (If you add BORDER=0 in the IMAGE tag, youcan avoid the LINK BORDER.)
<a href="http://www.yahoo.com"><img src="bk1.jpg"></a>


Here's a link to e-mail someone:
<a href="mailto:someone@somewhere.com">E-mail Someone</a>
E-mail Someone

BACK TO MENU