Learn HTML : PART 2

PART 2

6. Font Tags

This is the FONT TAG: .
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, people my name is Mo.
Hello, people my name is Mo.

COLOR
Hello, people 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, people my name is Mo.
Hello, people my name is Mo.

ALL THREE (You can also do just 2)
This HTML: Hello, Dingdong!, will produce this:
Hello, Dingdong!
You can also just use some of the FONT tags along with some TEXT tags:
Hello, Dingdong!
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:
HELLO, I'M COLORFUL
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.

ordered item 1
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 like	Here's the HTML
Spoken Languages Spanish French English Australia Britain Boston Southern U.S. 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>

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

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="/#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 TagsYou can also CENTER hyperlinks, images, and text together (in any combination).
<center>Hello<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:[email protected]">E-mail Someone</a>
E-mail Someone

BACK TO MENU