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. In our previous lessons we had coded a page entitled index.html with many features and tags of html. Your pages may vary but should include at least one example of each tag and each special character. Here is the source code of a sample page. (All lessons combined in the order we have presented them.)Which parses like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> My first html page, Hello World </title>
</head>
<body>
& Hello
W o r l d
<br />
<center>
<a href ="another.html"> <img src="images/myphoto.jpg" width="150" height="150"
alt="My bird feeder."
border="0" />
</a>
</center>
<br />
<a href ="another.html">"Me" <Too></a>
<h1>
& Hello
W o r l d
</h1>
<h2>
& Hello
W o r l d
</h2>
<h3>
& Hello
W o r l d
</h3>
<h4>
& Hello
W o r l d
</h4>
<h5>
& Hello
W o r l d
</h5>
<h6>
& Hello
W o r l d
</h6>
<pre> Sometimes you may wish to have some portion of text show up exactly as it is typed, complete with extra spaces and breaking to new lines exactly as it was typed in. Without this pre tag pair, text is handled in a very automatic way, changing dynamicly as the user resizes a page, (to make everything fit in the window as best as possible.) Here is how you would use them if you were enclosing this paragraph. Note also that the text generaly looks like it was typed on an old typewriter, depending on your browser settings. </pre>
<br /> Other times you may not wish to have some portion of text show up exactly as it is typed, complete with extra spaces and breaking to new lines exactly as it was typed in. Without the pre tag pair, text is handled in a very automatic way, changing dynamicly as the user resizes a page, (to make everything fit in the window as best as possible.) Here is how this paragraph looks without enclosing in a pair of pre tags. Note also that the text generaly looks like it was typed on an old typewriter, depending on your browser settings. <br />
This line is just plain ol' text.
<b>Enclosed within the bold tag.</b>
<i>Enclosed within the italic tag.</i>
<small>Enclosed within the small tag.</small>
<big>Enclosed within the big tag.</big>
<big><b><i>
Enclosed within big, bold and italic tags.
</big></b></i>
E=mc<sup><small>2</small></sup>
H<sub><small>2</small></sub>O
1<sup><small>st</small></sup>
<tt>This is parsed using the teletype tag.</tt>
<u>This text is underlined.</u>
<s>This tag causes text to have a line stuck through it.</s>
<pre>CH3 | O=C---N / \ H3C-N C=O \ / C===C | \ | N-CH3 | / N===C | H </pre></body>
</html>
Now let's start on a new page as that one is getting crowded. If you like, you can copy it, erase everything between the body tags in the copy and name it colors.html as we will be trying to add a splash of color in the next few examples. Here is the source code should you wish to copy and paste:
& Hello W o r l d
"Me" <Too>
& Hello W o r l d
& Hello W o r l d
& Hello W o r l d
& Hello W o r l d
& Hello W o r l d
& Hello W o r l d
Sometimes you may wish to have some portion of text show up exactly as it is typed, complete with extra spaces and breaking to new lines exactly as it was typed in. Without this pre tag pair, text is handled in a very automatic way, changing dynamicly as the user resizes a page, (to make everything fit in the window as best as possible.) Here is how you would use them if you were enclosing this paragraph. Note also that the text generaly looks like it was typed on an old typewriter, depending on your browser settings.
Other times you may not wish to have some portion of text show up exactly as it is typed, complete with extra spaces and breaking to new lines exactly as it was typed in. Without the pre tag pair, text is handled in a very automatic way, changing dynamicly as the user resizes a page, (to make everything fit in the window as best as possible.) Here is how this paragraph looks without enclosing in a pair of pre tags. Note also that the text generaly looks like it was typed on an old typewriter, depending on your browser settings.
This line is just plain ol' text.
Enclosed within the bold tag.
Enclosed within the italic tag.
Enclosed within the small tag.
Enclosed within the big tag.
Enclosed within big, bold and italic tags.
E=mc2
H2O
1st
This is parsed using the teletype tag.
This text is underlined.
This tag causes text to have a line stuck through it.
CH3 | O=C---N / \ H3C-N C=O \ / C===C | \ | N-CH3 | / N===C | H<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Which parses to:
<html>
<head>
<title> My COLOR demonstration html page. </title>
</head>
<body>
COLOR the World
</body>
</html>
COLOR the World
As you may recall attributes are a part of tags. We will now add some attributes to the opening body tag, to color the background beige. Browsers recognize a few colors by name and so we will first take advantage of this then later discuss how to gain even more control by referencing the colors as a six digit hexidecimal number. For now, change your body tag by adding the attribute for the background color. Leave the rest of the code alone for the moment. Just add the attribute into your body tag like this:<body bgcolor="beige">
Now your browser should show you a beige colored page like this:
COLOR the World
Likewise, we add the attribute to color the text on our page blue resulting in our body tag looking like this:<body bgcolor="beige" text="beige">
Now we are getting a true chromatic response eh?
COLOR the World
Avoid colors which are poorly contrasted with. Use a light background with dark text or a dark background with bright colored text, but don't expect to read dark blue against black or pink on beige, they just wont stand out, and even if they do show up just enough to read on your machine you may seriously frustrate your visitors who struggle on their machines as they are not all the same brightness nor do they all have the same contrast settings. If you really want that color which is hard to read, consider increasing the size of the text and possibly making it bold as well.
Now a short lesson in numbers so we can use them later to create colors for us. Skip ahead if you are already familiar with hexidecimal numbering.
Your computer, like those before it, use parts which for the most part have only two possible states when measured with a volt meter. The signals running through the circuits and chips likewise is either at a high or a low state at any given instant. Like a switched lightbulb, either on or off. Things of this nature are called binary, meaning two they have states, on, or off. Think of this in numeric terms as being a zero (off) or a one (on). Binary numbers are composed of digits which are either zero or one. And just like in base ten (regular numbering system you have used since who knows when), when you have gone through all the all the digits, you add on another diget to the number's left when you need to count past nine. In binary it is the same except your get there much sooner as binary digits only go up to one not nine. Binary is very hard to work with because you need lots of digits and so early computer pioneers converted them to something a bit less bulky. It turns out that using 16 digits allowed an extremely direct conversion from binary to be made, and was a natural choice. It works like this. Start counting from zero like you normaly do and when you get to 9, don't start over with zero, don't put a 1 to the left as a new digit in the number, keep going. Those pioneers I mentioned simply used the letter A as the next number past 9. And they kept using more letters all the way up to to our old number 15 which they now wrote as F. When they got to our old number 16 they then wrote 10, just like you would do as you ran out of digits in the decimal system at 9. Here is a table to summarize the three numbering systems, binary, decimal, and hexidecimal:
Binary Decimal Hexidecimal 0 0 0 1 1 1 10 2 2 11 3 3 100 4 4 101 5 5 110 6 6 111 7 7 1000 8 8 1001 9 9 1010 10 A 1011 11 B 1100 12 C 1101 13 D 1110 14 E 1111 15 F 1000 16 10
If we continued, you would see that the hexidecimal number FF is the same as our old decimal number 255. I mention this because that is the range of our colors, from 00 to FF in hex (hexidecimal). There are three colors which combine to create any color of the rainbow (within your machines limits and the resolution implied). They are referenced in the following order: Red, Green, Blue, using exactly two (hex) digits each, and proceeded with the pound or also called a hatch or the number sign),(#).
#000000 is black as all colors are turned off.
#FF0000 is bright red.
#00FF00 is bright green.
#0000FF is bright blue.
#FFFFFF is white as all the colors are fully on.
#808080 is a gray as all the colors are the same.
You can experiment with using these remembering that these digits are: 1 2 3 4 5 6 7 8 9 A B C D E and F, (and that it does not care if you use upper or lower case for A - F.)
Click here to proceed to Web Page Design Lesson Number Five.
Click here for Neoworx products include route tracing (to see the internet route used to another online computer.)
