Webmaster Level 1 The sequel to my smash hit HTML tutorial

[GM-University 0]

Here is the link to my first HTML turtorial, which will help as a refresher course, even if you already know HTML pretty wel. http://forums.xisto.com/topic/8780-html-tags-and-examples-condensed-form-of-course-from-my-site/

WebMaster Level 1

Lesson 1 a Breif Refresher Course

Remeber the tutorial I wrote up a few days ago? Well this is the sequel, it includes some heavy HTML, some CSS. First of all we should make sure your still up to date, so take this simple little quiz, it you get 2 or more wrong please go back to the first tutorial and do a little reveiwing.
True or False?
1.) The basic structure of HTML is built on semi colons?
2.) When coding in HTML it is nesscary to add an ending tag to end the effect of a beggining tag?
3.) The tag required to make a bullet or numbered item is always

<li>

Multiple Choice
4.) The code for code to make text bold is...
A)

<u>Text Here</u>

B.)

<b>Text Here</b>

C)

<i>Text Here<i>

D)

<BoldIt>Text Here</BoldIt>[html]

6.) If you wanted to end the effect on a selection of text you would add what tag...
A) [html]<end>[/html]
B.) [html]</text>[/html]
C) [html]</font>[html]
D) [html]</text/>[html]
7.) Which of the folowing will mess up up the HTML document shown below?
[html]<font color="FF0000"><u>Hello welcome to this site!</u></font><br><br><hr><div align=left><a href=sistersite.com/ Here for our sister site.</a></div><align=center><img src="mysite.org/go_to_the_zoo.gif;[/html]
I. <font color="FF0000">
II. <a href=sistersite.com/ Here for our sister site.</a>
III. <align=center><img src=mysite.org/go_to_the_zoo.gif></align>
IV. <br><br>
A) I / IV
B.) II / III
C I / II
D) III / IV
8.) What is the starting tag for a series of bullets?
A) <li>
B.) <ol>
C) <hr>
D) <ul>
9.) What does HTML stand for?
A) Hexagonal Text Making Langauge
B.) Hyper Text Markup Langauge
C) Horticultural Turbo Masking Langause
D) None of The above.
10.) The best way to get a good look for you page is by...
A) Mixing diferent effects in a pleasent and complimenting way
B.) Filling the page with as many link as possible
C) Using lot's of bullets and numbered lists
D) Never using the <b> tag or divides
-
-
-
-
-
Answers

1.) False
2.) True
3.) True
4.) B.)
5.) A)
6.) C)
7.) B.)
8.) D)
9.) B.)
10.) A)

If you got 2 or more wrong I would recommend going back to my topic entitled HTML in the Tutorials Section.

Lesson 2 Contact

I thought we'd start off easy just to make sure your in your HTML mode before things get heavy, so we'll start E-Mail Links. take a look at the code bellow (you@emailprovider.domain should be replaced with your email address) [html]<a href="mailto:you@emailprovider.domain">Displayed Text Here</a>[/html] Simple as any other link right? Just make sure you put in the mailto: and put the whole little jumble in your tag after href= in quotes.
So that's lesson 2, short huh?

Lesson 3 Tables

Tables are one of THE best ways to precisely lay out your website, a table is essentially a grid, with an X, and a Y axis. There are rows, which go across horizontaly, and collunms which go veritcaly. When rows rows and collums intersect the form a cell, cells will each hold a selection of text, or any other code you put in them. When you start a table, it should be started with [html]<table>[/html] and ended with [html]</table[/html] These are like the tags we used to declare and end our bullets and numbered lists, and you will find there is a lot in common and a lot different about them. When we want to create a row we must put [html]<tr>[/html] We must follow that (after hitting enter...) with data cell tag, which will have more HTML after it typically, here is an example of a table
[html]<table>
<tr>
<td> the <td> tag creates a data cell
<td> This is another data cell, the tag after this, the </tr> will end the row
</tr>
</table>[/html]
The last </table> ends the table, make sure to hit enter after each tag, it's good HTML practice... 
Ok, now we will learn how to make our table less bland than the default one our browser provides... First of all we can change the border size, here is the code (note: the only nessescary changes are to the <table> tag, so I will not bother creating a whole tabel) [html]<table border=1>[/html] Now, we might want to give that little border a nice color to it, so here's the code, refer to the first tutorial for some Hex codes, or you can use the names of some COMMON/ BASIC colors. [html]<table border=1 bordercolor=CCCCFF>[/html]
Now we can change the backround color of our table to compliment the border, here is the code to change that... [html]<table border=1 bgcolor=CCCCFF>[/html]
Now if we want to change but one row of our table we can use this little fella instead [html]<tr bgcolor=CCCCFF>[/html]
Now if we only want to change one data cell we can use this code [html]<td bgcolor=CCCCFF>[/html]
Ok, last but not least we should learn to change our tables size... Here is the code (pixel version) (leave out width or height according to which (if any) you don't want changed) [html]<table width=Pixels height=Pixels>[/html]
Now, we will make our table a difined percent of the screen (like when we made our divides) [html]<table width=10% height=10%>[/html]

Adding Music
Music can add a nice effect to pages, use it wisely, but don't abuse it...
HTML can do some pretty cool things, here is one such example, the code bellow will create a player much like "Real Audio Player" (replace TheURLOfYourSound with the location of your sound) [html]<embed src="TheURLOfYourSound" width=300 height=60>
<noembed>
<bgsound src="TheURLOfYourSound">
</noembed>[/html]
The embed tag will run on Netscape and other browsers, while bgsound will run on Internet Explorer and such, alway include both to insure it works.
You can add autostart=true loop=true to make the sound continuosly play, here is an example of this [html]<embed src="TheURLOfYourSound" width=300 height=60 autostart=true loop=true>
<noembed>
<bgsound src="TheURLOfYourSound" loop=infinite>
</noembed>[/html]
Now we will learn to make backround music where no player will be seen, this is very simpl, add hidden=true to your tag, like so [html]<embed src="TheURLOfYourSound" hidden=true autostart=true>
<noembed>
<bgsound src="TheURLOfYourSound" loop=infinite>
</noembed>[/html]

Lesson 4 A little CSS

CSS is both like and different from HTML, it allows you to change things you couldn't before, such as easily setting the font for the whole page, or changing things like the scrollbar and such.
We already learned how to change the backround color with HTML, but we should learn it in CSS too, take a look here... (here is the common/ basic color name one)

<style> body {background: fixed; background-color: red;}</style>
or you can use the Hex code version for more colors, which is here

<style> body {background: fixed; background-color: #9c2000;}</style>

Notice the

<style>
tags, these are used to define a stylesheet which is the purpose of CSS, a stylesheet is something that we can easily add to all pages in our website to make them look alike, they can also be used in PHPBB and IPB boards.
Now, we will add a picture as our backround, also know as a backround image, here is the code (put the location of the image where it says ImageURL)

<style> body { background: url("ImageURL");background-attachment: fixed}</style>
Ok, here is the code to change the font for the whole page

<style> body {font-family:verdana; color:#EFA6FF; font-size:small;} </style>
- Font-family defines what font is displayed, ex: arial, times, courier, etc..
- color defines the color of all text on your page
- font-size sets the size of text on the page you are limitted to small, medium, or large
If you want to change the backround too, you simply add the code to change your backround to the CSS in between the <style> and </style> tags, like so

<style> body {background: fixed; background-color: #9c2000; font-family:arial; color:#EFA6FF; font-size:small;} </style>
Lesson 5 Some Cool Fun You (Last Lesson)

Well, we covered some hard stuff here, and now it gets harder =O  Don't worry, this is kinda hard, but I will do my best to explain it, and you will be able to see that the reward is very cool.
We will be using one of my favorite HTML tags, the <marquee> this is the tag that makes those cool scrolling things. Note: I'm not going to right a big thing about this, read what I wrote in the variables and such, figure out what to put, if you have a question ask me...
[html]<marquee height="pixel" width="pixels" direction="direction the text should move, up or down" scrolldelay="have the scolling wait a bit before it starts" scrollamount="scrolling speed" style=put some CSS here><font face="font type" size="size">PUT YOUR HTML HERE (put almost anything in here...)</marquee>

P.S. You can create nice news buluiteins by putting these in tables, and labeling them with a top row with a backround...

Wrap-Up

You've probably heard this before "HTML is so useless, use php" to some extent they are right, but look what we just did with useless old HTML, remember wisely mix effects, and practice your HTML skills, next time we meet we will deal with IFrames, advanced CSS, a little PHP, and more.


Note:
These are all condensed forms of co
urses I have on my website, if you want to enroll
in them PM me right away, and I will contact you as soon as they are all ready and polished up a bit.

[snlildude87 0]

GMU, the direction could also be "up", "down", "left", or "right." Other than that, GREAT TUTORIAL! I already know all of it myself, but it should help HTML n00bs. (Your credits must be extremely high by now!)

[GM-University 0]

Actually I only got 4 credits for this, and 3 for the first. I think that it might not count stuff in

 or [html] tags, but I don't really care either way, it's easy enough to get credits.

[rectab 0]

haha really nice