HTML Tutorial -Part 6-

HTML TUTORIAL

Part 6: Lists, Lists, Lists

The UNORDERED LIST...


The Unnumbered List is the first of the three types of lists. This is probably the most common list you will use.


Example of an Unordered List...

• Operational Research


• Accounting Research


• Statistic


• Math


• Algorithm

Notice the Bullet Before each List Item. Now here is the HTML Code for the Unordered List Above...

<ul>
 <li>Operational Research</li>
 <li>Accounting Research</li>
 <li>Statistic</li>
 <li>Math</li>
 <li>Algorithm</li>
</ul>

The <ul> tag is the opening Unordered List Tag. Therefore, the </ul> is the closing tag. Between these two tags you place LIST ITEMS, each one having an individual <li> opening tag, and an optional </li> closing tag. There is no limit to the number of List Items you may have in a single list.

---

The ORDERED LIST...


The Ordered List, also known as the Numbered List, is very similar in structure to the unordered list, except each list item has a number in front of it, instead of a bullet. Also, the opening tag for the list is <ol> instead of <ul>, and the closing tag is </ol> instead of </ul>. List Items within the list still use the same tags.


Example of an Ordered List...

1. Operational Research


2. Accounting Research


3. Statistic


4. Math


5. Algorithm

Notice the Number Before each List Item. Now here is the HTML Code for the Ordered List Above...

<ol>
 <li>Operational Research</li>
 <li>Accounting Research</li>
 <li>Statistic</li>
 <li>Math</li>
 <li>Algorithm</li>
</ol>

---

The Definition List...


This type of list is a little more complicated, but still very easy to use. This list starts with the <dl> opening tag, and ends with the </dl> closing tag. This has another tag known as <dt> for Definition Term, and <dd> for Definition Definition. These two tags do not need closing tags.


Example of a Definition List...

Kepulauan Riau

A province in north of Indonesia

Mosque

A place for moslem to pray or an islmacic holy place

Google

One of search engine

Now here is the HTML code for this Definition List...

<dl>
 <dt>Kepulauan Riau
 <dd>A province in north of Indonesia 
 <dt>Mosque
 <dd>A place for moslem to pray or an islmacic holy place
 <dt>Google
 <dd>One of search engine
</dl>

---

Go To Part 7

HTML Tutorial -Part 5-

HTML TUTORIAL

Part 5: Links and Images

Without Links, the World Wide Web wouldn't be a web at all! To add a link... you will use the <a href="location"> opening tag and </a> closing tag. Whatever appears between these two tags will become underlined and colored, and if you click on the underlined text it will send the browser to the location within the quotes.


Example of a link...


Visit Gepence Kepulauan Riau



Visit <a href="http://www.gepence.co.cc">Gepence Kepulauan Riau</a>




Note: Although Links are usually used to send people to other web pages, you may also use it to send email to a specific address by using a location of mailto:user@host.


Example of a Mailto: Link...


Send email to Syudas



Send email to <a href="mailto:syudas@gmail.com">Syudas</a>

---

In-line Images...


You may also add images (pictures) to your web page, as long as the image is in the .gif or .jpg (or .jpeg) file formats. You will not be able to use .bmp format files! The basic tag for in-line images in <img src="location">. It is also recommended to add HEIGHT and WIDTH attributes to the IMG tag, which will allow the image to take proper proportions on a browser that is not currently viewing images. It is also recommended to use the ALT="what picture is" to tell a person what a picture is in case it is still loading or they are not viewing images. (The IMG tag has no closing tag!)


Example of a basic in-line image...








<img src="gepence.gif"ALT="Gepence Logo">

---

Combining Links and Images...


Many times you may want to have an image that is linked, so that if someone clicks the image, they will be taken to another page.
This is rather simple- you just need to place the IMG tag within the A HREF tags.
(<a href="location_of_link"><img src="location_of_image"></a>)
You may also use the ALIGN tags with images!

When an image is also a link, it has a border around it by default. You can control the width of the border - or turn it off completely - by using border=n within the img tag. n is the width of the border (n = 0 for no border).

Example of a linked image...







<a href="http://www.gepence.co.cc/"><img src="gepnce.gif" border=0></a>



Go To Part 6

HTML Tutorial -Part 4-

HTML TUTORIAL

Part 4: A little more tags

The CENTER tag...


The center tag pretty much explains itself. The opening center tag is <center> and the closing center tag is </center>. Whatever you put between will be centered on the current line!


Example of CENTER tag...

Center Works

<center><h1>Center Works</h1></center>

---

The BODY attributes...


In Part 1 you learned the BODY tag. The BODY tag has many attributes... here are a the most useful ones...

• BACKGROUND="location_of_image" - Background Image


• BGCOLOR="#hexadecimal_here" - Background Colour


• LINK="#hexadecimal_here" - Colour of Links


• VLINK="#hexadecimal_here" - Colour of Links the User has Already Visited


• TEXT="#hexadecimal_here" - Text Colour

Example of Hexadecimal

#RedRedGreenGreenBlueBlue

#RRGGBB

#RGB

#000000 goes to BLACK

#FF0000 goes to RED

#0000FF goes to BLUE

#568327 goes to DARK GREEN

#9b07c6 goes to PURPLE

---

Go To Chapter 5

HTML Tutorial -Part 3-

HTML TUTORIAL

Part 3: More Common Tags

Paragraphs...


You will often use paragraphs in HTML, just as you do when you write stories. The opening tag for a paragraph is <p>, and the closing tag is </p>. The closing tag for a paragraph is not always needed, but I recommend using it anyway.


Example of a paragraph...

To be a winner, all you need is to give all you have. A champion is someone who gets up when they cant. Where there is a will, there is a way. Just be your self

<p>To be a winner, all you need is to give all you have. A champion is someone who gets up when they cant. Where there is a will, there is a way. Just be your self</p>

Memories last forever, thy simply never die, true friends stay together, they never say good bye. Life is waste of time, time is waste of life, so my friend
stay wasted all the time, and have the time of your life

<p>Memories last forever, thy simply never die, true friends stay together, they never say good bye. Life is waste of time, time is waste of life, so my friend
stay wasted all the time, and have the time of your life</p>

---

Text Formatting Properties...


If you had an entire web page without formatted text, it would look rather dull and boring.
This is why we use text formatting tags.
Some common text formatting tags are:

<b> and </b> for bold,

<i> and </i> for italics,

<u> and </u> for underlined, and

<tt> and </tt> for typewriter.



Text Formatting Properties...Font Tags


The <font size=n> and </font> tags come in handy.

n is the number of font points by which to change the size of the current font.

n can be positive or negative: a positive number will increase the font size, and a negative number will decrease it.

n can also be an absolute number, indicating an absolute size for the font (not a relative size).



Example of font tags...


Syudas is a Cool Guy isn't he?


<font size=+1>Syudas</font> <font size=+2>is</font> <font size=+3>a</font> <font size+2>Cool</font> <font size=+1>Guy</font> isn't <font size=-1>he?</font>

---

ALIGN attributes...


Many tags support ALIGN attributes... if you want something to be aligned from the left margin, from the center, or from the right margin. The ALIGN attribute is placed in the opening tag before the >.

Left Align

<h1 align=left>Left Align</h1>

Center Align

<h1 align=center>Center Align</h1>

Right Align

<h1 align=right>Right Align</h1>

---

The Line Break...


When your HTML document is viewed, normally the text will do a word-wrap at the end of a line. If you want to have the text BREAK (go to another line) you will use the <br> tag. This tag has no closing tag.


Example WITHOUT line Break...


Sentence One.
Sentence Two.
Sentence Three.


Sentence One.
Sentence Two.
Sentence Three.


Example WITH line Break...


Sentence One.

Sentence Two.

Sentence Three.


Sentence One.<br>
Sentence Two.<br>
Sentence Three.<br>

---

Preformatted Text...


If you wish to have text line up properly (a.k.a. fixed width text) that will include line breaks without the use of the <br> you may find the <pre> and </pre> tags helpful.


Example of text WITHOUT preformatting...


The cat ran after the dog.
^ ^-verb ^noun
^-noun

The cat ran after the dog.
    ^   ^-verb        ^noun
    ^-noun

HTML ignores the extra line breaks, so the text does not line up properly.

Example of text WITH preformatting...

The cat ran after the dog.
    ^   ^-verb        ^noun
    ^-noun

<pre>
The cat ran after the dog.
    ^   ^-verb        ^noun
    ^-noun
</pre>

---

Go To Chapter 4

HTML Tutorial -Part 2-

HTML TUTORIAL

Part 2: The Common Tags

Headings...


Headings are some of the most important tags within the BODY of your HTML document. You will usually use a heading to tell what the following section of your page is about. The opening tag for a heading is <hy> and the closing tag is </hy> with y being the size of the heading... from 1 to 6. (1 being largest, and 6 being smallest)


Example of heading tags...

H1: Syudas, the boy behind you.

<h1>H1: Syudas, the boy behind you.</h1>

H2: Syudas, the boy behind you.

<h2>H2: Syudas, the boy behind you.</h2>

H3: Syudas, the boy behind you.

<h3>H3: Syudas, the boy behind you.</h3>

H4: Syudas, the boy behind you.

<h4>H4: Syudas, the boy behind you.</h4>

H5: Syudas, the boy behind you.

<h5>H5: Syudas, the boy behind you.</h5>

H6: Syudas, the boy behind you.

<h6>H6: Syudas, the boy behind you.</h6>

---

Horizontal Ruled Lines...


Horizontal Ruled Lines are used to separate different areas of a web page. The tag for a horizontal ruled line is <hr>. The horizontal ruled line DOES NOT have a closing tag. You may also add certain attributes to the <hr> tag, such as WIDTH=n (for fixed pixel width) or WIDTH=n% for a certain percentage of the screen wide, SIZE=n to make the line a certain pixel amount thick, and NOSHADE to turn the line's shading off. A plain <hr> with no attributes will make the line the full width of the screen.


Example of horizontal ruled lines...

---

<hr width=50>

---

<hr width=50%>

---

<hr size=7>

---

<hr noshade>


You may also use several attributes within one tag...

---

<hr width=50% size=10 noshade>


Go To Part 3

HTML Tutorial -Part 1-

HTML TUTORIAL

Part 1: The Basics

Tags...


The Page you are viewing right now is an HTML document. HTML documents look a lot like word-processing documents...


You can have bold and italicized, Larger and Smaller, or it could look type-written.



Of course, the HTML code for this can look confusing...




You can have <b>bold</b> and <i>italicized</i>, <font size=+2>Larger</font> and <font size=-2>Smaller</font>, or it could look <tt>type-written</tt>.





So what are all these "<" and ">" things doing here? When you place a certain thing within these you are making something known as a tag. For example the <b> tag is saying to start bold text, and the </b> tag is saying to stop bold text. The tag with the slash (/) is known as the closing tag. Many opening tags require a following closing tag, but not all do. Tags make up the entire structure of an HTML document.

<b>This Text is Bold</b>
^^^--Opening Tag    ^^^^--Closing Tag

Here are two pieces of HTML code, the second of the two has an error in it, what is it?



#1 - Syudas jumped OVER the fence.

#1 - Syudas jumped <b>OVER</b> the fence.

#2 - Syudas jumped UNDER the fence.

#2 - Syudas jumped <b>UNDER<b> the fence.



You should have noticed that the second code is missing a slash (/) in the tag after the word UNDER, which causes the web browser to interpret the code as leaving the bold face on! This is a common error, so be careful of it!



Note: Tags in HTML are NOT case sensitive. For example... <title> and <TitLE> both mean the same thing and are interpreted as being the same.

---

Document Structure...


HTML files are just normal text files... they usually have the extension of .htm, .html, or .shtml. HTML documents have two (2) parts, the head and the body. The body is the larger part of the document, as the body of a letter you would write to a friend would be. The head of the document contains the document's title and similar information, and the body contains most everything else.


Example of basic HTML document Structure...


<html>

<head><title>Title goes here</title></head>

<body>Body goes here</body>

</html>


You may find it easier to read if you add extra blank lines such as follows...


<html>


<head>

<title>Title goes here</title>

</head>


<body>

Body goes here

</body>


</html>


Note: Extra spaces and line breaks (blank lines) will be ignored when the HTML is interpreted... so add them if you wish to do so.


Whatever falls between the TITLE tags will be the title of the document, when the page is viewed it is usually found in the title bar at the top of the screen. [Note: You may NOT use other tags within the TITLE tags (Example: You cannot have the code read: <title><b>title goes here</b></title>.]


Example of how titles are viewed...


In Netscape Navigator...

Netscape - [Title goes here] OR Title goes here - Netscape [depending on version]


In Microsoft Internet Explorer...

Title goes here - Microsoft Internet Explorer


Whatever you place between the BODY tags will fall into the major area of the document window, and therefore it is the largest part of your HTML document.

---

Go To Part 2