Welcome to Trillium University's online course on basic website construction.
Presented by fjd1.com
Multi Level Mailing List Builder
FreeMailer2000 When you sign-up for Free, you will get your very own personalized FreeMailer2000 website along with your Unique URL. When someone signs-up from your FreeMailer2000 website, they become your First Level Downline. Similarly, when someone else signs-up from their Unique URL, they become your Second Level Downline and so on till 15 Levels. The trade off here is very light, only 14 people are able to send email to you in return.
Webrings
Click here for information about webrings mastered by fjd1.com Webings are a great way to surf the web by topic, and a good method of getting your pages noticed for webmasters.
Software
Trillium University maintains an archive at Ware.netfirms.com for software (and links to downloads) which you might find benificial.
Join the BusinessForYou.Com
affiliate program!
We are a member of ISOC, the Internet SOCiety.
 |
If you need professional help, send me an e-mail describing your needs and how to best contact you. Sincerely,
F. Davies
fjdavies@yahoo.com
(360) 352-0242
ICQ 43536012
2. Designing your site continued. Click here for the previous lesson. Our new page's (color.html) code so far looks like this:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Parsed, it looks like:
<html>
<head>
<title> My COLOR demonstration html page. </title>
</head>
<body bgcolor="beige" text="beige">
COLOR the World
</body>
</html>
COLOR the World
Now just for fun, we will introduce the font tag including our color attribute, and use them here to color each letter of COLOR a different color. Here is what you could change the COLOR my world line of text to:<font color="orange">C</font><font color="green">O</font><font color="coral">L</font><font color="brown">O</font><font color="violet">R</font><font color="blue"> the World</font>
Parsed, it will look like:COLOR the World
You already have learned the use of the center tag, now lets try using the blockquote tag to indent a block of text aligned nicely on one side.
<blockquote>
Blockquotes indent the text to present your content in a block which is offset or indented or has a margin on the left side. As you can see it is usually preferable to text which is centered as it is a bit easier to read.
</blockquote>
This is some text which is following the closing blockquote tag and so is at the normal place for text to start on the left and not indented as is the blockquote text above.
It is easy to see this is a handy tag as in below:This is getting easy eh?
Two blockquotes follow:
This parsed as you might expect:
<blockquote>
You can put one block quote within another. This way you can have several layers of indentation.
<blockquote>
Each one will start a bit to the right of the previous blockquote. This one is getting kindda narrow for this page so we will notgofurther but you can if you wish.
</blockquote>
</blockquote>
Two blockquotes follow:
You can put one block quote within another. This way you can have several layers of indentation.Each one will start a bit to the right of the previous blockquote. This one is getting kindda narrow for this page so we will notgofurther but you can if you wish.
Blockquotes are not the only tags we can use for formating, we can use the paragraph element with a cool seperation kind of effect as coded:
Here is the end of the first line. <p>Here begins and ends a new paragraph.</p> <p>Here begins and ends another paragraph.</p> <p />Here, this paragraph has no end tag. Please note the difference in how it is written as a pair of tags from how it is written as a single tag, and just like the break tag, it ends with a space, a slash (/), and then, the angle bracket (>).
When this is parsed, the proper blank line is inserted before the paragraph:Here is the end of the first line.
One more tag we should mention before moving on to the topics of lists and tables, is the teletype tag:
Here begins and ends a new paragraph.
Here begins and ends another paragraph.
Here, this paragraph has no end tag. Please note the difference in how it is written as a pair of tags from how it is written as a single tag, and just like the break tag, it ends with a space, a slash (/), and then, the angle bracket (>).<tt>Here is some text enclosed within the teletype tag.</tt> <br />But this is normal again.
Here is some text enclosed within the teletype tag.
Lets turn now to lists. Lets first learn that list come in two forms; unordered and ordered. Lists can contain other lists and are a good way to make outlines. Making a list invloves a tag pair for the list itself as a whole and seperate list elements (tags) for each item in the list. Here is the code for an ordered list first, followed by an unordered list nested within another unordered list which is itself nested within yet another unordered list. Note the use of the list item tag as a single tag an as a pair of tags again:
But this is normal again.Here comes the ordered list:
Note how the items have a mark before them to set them off as distinct and in the ordered list they are actually numbers inserted to correctly identify the item in the list order. Well, that is the work of the list tags:
<ol>
<li>The first item.</li>
<li>And still another item.</li>
<li>And more of the item.</li>
<li />Still one to go item.
<li />And a final item.
</ol>
Here comes the unordered list:
<ul>
<li>The first item.</li>
<li>And an item with another list of items.
<ul>
<li>The sub list one first item.</li>
<li>The sub list second item has a sub list too.
<ul>
<li>And more of the item.</li>
<li />Still one to go item.
<li />And a final item.
</ul></li>
<li />And a final item on the other list section.
</ul>
</li>
<li>And more of the item.</li>
<li />Still one to go item.
<li />And a final item.
</ul>
Here comes the ordered list: Here comes the unordered list:
- The first item.
- And still another item.
- And more of the item.
Still one to go item. And a final item.That second example may seem a bit difficult to code, and it is. Try simple lists first, then try inserting one list completly within another by copying it completly and pasting it into the code for the other list. Note how we had made the new list within a pair of list item tags, and that the list item close tag follows the inserted list closing tags. That is enough lists for now, on to some tables!
- The first item.
- And an item with another list of items.
- The sub list one first item.
- The sub list second item has a sub list too.
And a final item on the other list section.
- And more of the item.
Still one to go item. And a final item.- And more of the item.
Still one to go item. And a final item.
Click here to proceed to Web Page Design Lesson Number Six.
Click here for Neoworx products include route tracing (to see the internet route used to another online computer.)
