10-12-2005, 11:02 AM
Credit goes to koolaid and danmanhen
please note, you should try using the code in this tutorial to see what it looks like on a web page, please feel free to try making your own pages as well, to test out what a page will look like, type it in notepad, click save as, click all files instead of text files(.txt) and save it somewhere it can be found easily, save it as something like test.html or my page.html make sure it is set to all files, not text files, and make sure it is saved as a .html file, then open a web browser. Go to open, and click browse, then find the file and click open, it will load the page, once it is loaded, if you make a change to the code, hit ctrl+s or file to save, and maximize the browser, then hit F5 or click refresh.
HOUR#1
recall that in html there are many <tags> which are enclosed in <angle brackets> found by hitting shift and either comma,< or period> all tags are enclosed in angle brackets, for some tags, there are ending tags, an ending tag is just a <tag> with a slash: </tag>. the tag to start an html document is the <html> tag. it also has an ending tag:</html> I will however not refer to an ending tag as if s own tag. it is merely part of the main tag. <html> and</html> are the same tag. only 1 is an ending tag. in an html document: <html> </html>
add a <head> tag. this also has a closing tag: </head>: <htm" -^ " - - -
<head>
</head>
</htmi>
for now we will only use but 1 tag that goes within the <head> tag and then we will be done with
<head>. the tag is <title>. this, like all the others has an ending tag as well. I'm sure you can
figure out what the ending tag will be for yourself, anything within the <title> tag is the tile of
your page, it goes at the very top of the browser on the blue bar that normally tells what browser
you are using.
<html>
<head>
<title>
my page
</title>
</head>
</html>
please note: from now on I will not refer to them as tags, so instead of saying the <head> tag, ill
just say <head>.
ok. now were all done with <head>. lets move on to another tag: <body>. please note: unless I say it does not have a closing tag, please assume that it does, this tag is a good example. everything that shows up in your page (aside from the title) goes in the body tag. please note: you do not need the head tag if you do not want a title, you do not need a body tag if you only want a
title and not a page, and you do not need the html tag if you do not want anything at all, in which case you shouldn't be reading this, a blank page would look like this:
<html>
<head>
<title>
hello all, im teaming html. that stands for hyper-text markup language!
</title>
<body>
</body>
</html>
lets say we wanted a blank page with a little color, most tags have Attributes, an attribute makes a tag more customizable, an attribute is not a tag, it is part of a tag. it is laid out like this:
<tag attribute l="what it equals" attribute2="what it equals">
so lets learn an attribute for <body> the attribute is bgcolor. this stands for... you guessed it! background color! although most or all attributes have an = sign directly after and the "" enclosing the value, I will just introduce them as the attribute.
there are 3 different types of things that can go in the quotes to define the color, but I'll only teach you the easier 2. you can still get the same colors as the third, so don't worry about knowing what it is, the first is the proper color name. IE: red, blue, orange, or grey, there are 16 different proper color names, if you just want red, not a shade of it, these are good, chances are there will be one for the color you want as long as. it's a main color like the ones you learned in kindergarden. forest green- more advanced, so it does not have &am. if you want to specify the exact color(any shade you want), you use HEX. hex is simple, rrggbb. that means red, green, blue, with this you can create any color or shade you want, they go like this from darkest to brightest:
00
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
etc..
all the way up to ff
0 is the lowest(black(no color))
f is the brightest(think of it as full)
0-9, and then a-f
you can use these for red, green, and blue.
IE:
<body bgcolor="OOffOO">
the first 2 numbers are the values for red, the second are how much green, and then how much blue, this color has 00 red. this means no red. no blue either, and full green, this means it will produce a bright green color. ffOOOO would make bright red. if the red, green, and blue are all equal to the same thing, it will make black: 000000 white: ffffffor grey 111111 ,333333,aaaaaa or any other combination, what would ffOOff make?
purple because red and blue make purple, now wait a second. I thought you could make any color using primary colors, shouldn't it be red, yellow, ggfe»? well, HEX is only theory, in real life, if wouldn't work, but web pages aren't made using real paint, so it works just fine, what I recommend is that you go to visibone.com they have a HEX chart, its basically a big chart with lots of little color swatches and when you click one, it tells you the HEX value, if you see HEX written with a # sign before it IE:
<body bgcolor="#ffl5aa"> or with the letters in caps:
<body bgcolor="#FF15AA">
it's the same as what you learned, the caps and #pound sign are just proper syntax, it is better to use them, to get into a good habit.
attributed: background used:
<body background="picture.bmp"> this takes an image (pieture.bmp) and tiles it for your
background, if it was a bunny, your background would be lots of bunnies, do not use background
and bgcolor at once, it does not work!
next thing: we want text on the site, anything enclosed in <body> and not in another tag within
the body is simply printed to the screen.
IE:
<html>
<head>
<title>
my page
</title>
</head>
<body>
hello all
</body>
</html>
would make a white page with a title, and would say hello all at the top left-hand corner of the screen, boring. let's say we want it bigger, use the <hl> tag. <hl> makes a header(so that's what
the H stands for) that is #1. <hl> is huge, <h2> a little smaller all the way through <h6>
microscopic.
<html>
<head>
<title>
my page
</title>
</head>
<body>
hello all
</body> </html> note: the h can be capitalized (proper syntax again)<Hl>or<hl> both work. I think about <h5>
or <h4> is the default text size, so <h6> makes it smaller than normal and <hl> makes it bigger.
let's say you wanted to center the text so that it looked more like a title.
use the <eenter> tag.
<html>
<head>
<title>
my page
</title>
</head>
<body>
<center> hello all </center>
</body>
</html>
or you could reverse it so it said <center> before <hl> instead of after, it really doesn't matter, it
is good to make sure the tags are properly nested, this il like a sandwich, you put bread, meat,
bread, not bread, bread, meat, it is the same way with html. you put
<h 1 ><center>text</center></h 1 >
not <lilxcenter>text<hlxcenter>. although html is a very flexible language, and does not
need to be properly nested, it is a good habit to get into.
before we get to the next tag, I'd like to explain something, for the title tag, or any tag really, you
can do
this:
<title>hi</title>
or:
<title>hi
</title>
or:
<title>
hi
</title>
it doesn't matter as long as the title is somewhere within the title tag.
next tag: <br>
this is a line break, oh, so that's what the br stands for. break, this automatically goes to a new
line, because in html, this:
hello
my name is my
name
would be printed like this: hello my name is my name
as you can see, html does not pre-format text, this means it does not always look exactly as you type it, so to make it look like this:
hello
my name is my
name
you would have to type:
hello<br>
my name is<br>
my name
but as you remember from before you could type it like this:
hello
<br>
my name is
<br>
my name
as you can see, br does not have an ending tag.
next tag: <p>
this does the same thing, but starts a new paragraph, it either skips 2 lines and indents, or skips 1
line and indents. I can't remember which, for some strange reason, you can't type br more than
once to skip more than 1 line:
hi
<brxbrxbr>
hi
would only print:
hi
hi
this is terrible annoying, so they invented the <pre> tag. this does have an ending tag.
everything within the <pre> and</pre> tags is preformatted. this means if you type something, it will print exactly as you type it:
<pre>
hello
my name is my
name
</pre>
would print:
hello
my name is my
name
easy, new tag: <font>
this can do the same as the <hl>-<h6> tags and more.
attribute: color
changes the color of the text between the <font> and </font> tag. uses HEX or proper color name
exactly the same as the bgcolor attribute.
<font coIor="#FF8822">
hi this is colored font
</font>
you could even color each letter of some text a different color so it looked rainbow.
Hour #2
new tag: <table>
now this is a fun tag. It makes a table (lots of boxes) like this:
<table>
<tr>
<tdx/td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td><td></td>
</tr>
</table>
<tr> stands for table row. A row is horizontal. Notice there are 2 <tr></tr>'s. these are the 2 rows
in the above table. Within a <tr> there are <td>'s. Table data. This is what goes in your table:
<table>
<tr>
<td>hello</td>
<td>there</td>
<td>how</td>
<td>are you?</td>
</tr>
<tr>
<td></td>
<td></td>
<tdx/td>
<td></td>
</tr>
</table>
would look like this:
hello there how are you?
new attribute: bgcolor <table bgcolor="red"> <tr> <td>
hi
</td> </tr> looks like:
note: the table is only as big as the text in each <td>. To fix this:
<td width="50%">
hi
</td>
makes:
hi ( box around hi with red fill)
ndth="
154"> you can also use the height
width can be defined in %percent or pixels: <td wic
attribute to make the table higher.
to make each <td> a different color, just use bgcolor in the td tag instead of in the table tag. You
can also use bgcolor in the <tr> to make the whole row 1 color. New attribute: align
<table align="center"> puts the table in the middle of the screen instead of the left side. Other
values are right and left. Left is the default value. New attribute: background. Works the same as
the <body background=:"picture to be tiled.jpg> only it tiles it on the whole table, the row if used
within <tr> or in one cell if used in <td>
new attribute :border.
<table border="5"> makes a bigger border on the table. The bigger the number, the bigger the
border. Think of a border as the frame of a picture. Can go in the <table> tag, <tr> or <td> tags.
Set to 0 for an invisible table. This can help to align text in the middle of the page, or right side
but without using a visible table. Cannot be seen. New attribute: bordercolor. Used to define thecolor of the border. Can go in <table> <tr> or <td>. New attributes: bordercolorlight and bordercolordark. Light specifies the color of the side of the border that is NOT shaded. Bordercolordark is the side of the border that IS shaded. Play with these to understand. New attributes: colspan and rowspan. Use within <td>. Makes one td span into another to make a large td withought affecting the other td's in the row or column.
<table>
<tr>
<td rowspan="2"x/td>
<td></td>
<td></td>
<tr></td>
</tr>
<tr>
<td></td>
<td></td>
<td colspan="4" bgcolor="green"x/td>
<td></td>
</tr>
<tr>
<td rowspan="2"x/td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td eolspan="2"x/td>
<td colspan="2"x/td>
<tdx/td>
<td colspan="2"x/td>
</tr>
<tr>
<tdx/td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
new tab:<th>
same as <td> only bolds the text. Quick way to make titles for your tables. Try writing code for
this table:
BY Kool_aid and danmanhen
woops, sry i couldnt get the examples to work in the guides, html is disabled so they wont show up.
please note, you should try using the code in this tutorial to see what it looks like on a web page, please feel free to try making your own pages as well, to test out what a page will look like, type it in notepad, click save as, click all files instead of text files(.txt) and save it somewhere it can be found easily, save it as something like test.html or my page.html make sure it is set to all files, not text files, and make sure it is saved as a .html file, then open a web browser. Go to open, and click browse, then find the file and click open, it will load the page, once it is loaded, if you make a change to the code, hit ctrl+s or file to save, and maximize the browser, then hit F5 or click refresh.
HOUR#1
recall that in html there are many <tags> which are enclosed in <angle brackets> found by hitting shift and either comma,< or period> all tags are enclosed in angle brackets, for some tags, there are ending tags, an ending tag is just a <tag> with a slash: </tag>. the tag to start an html document is the <html> tag. it also has an ending tag:</html> I will however not refer to an ending tag as if s own tag. it is merely part of the main tag. <html> and</html> are the same tag. only 1 is an ending tag. in an html document: <html> </html>
add a <head> tag. this also has a closing tag: </head>: <htm" -^ " - - -
<head>
</head>
</htmi>
for now we will only use but 1 tag that goes within the <head> tag and then we will be done with
<head>. the tag is <title>. this, like all the others has an ending tag as well. I'm sure you can
figure out what the ending tag will be for yourself, anything within the <title> tag is the tile of
your page, it goes at the very top of the browser on the blue bar that normally tells what browser
you are using.
<html>
<head>
<title>
my page
</title>
</head>
</html>
please note: from now on I will not refer to them as tags, so instead of saying the <head> tag, ill
just say <head>.
ok. now were all done with <head>. lets move on to another tag: <body>. please note: unless I say it does not have a closing tag, please assume that it does, this tag is a good example. everything that shows up in your page (aside from the title) goes in the body tag. please note: you do not need the head tag if you do not want a title, you do not need a body tag if you only want a
title and not a page, and you do not need the html tag if you do not want anything at all, in which case you shouldn't be reading this, a blank page would look like this:
<html>
<head>
<title>
hello all, im teaming html. that stands for hyper-text markup language!
</title>
<body>
</body>
</html>
lets say we wanted a blank page with a little color, most tags have Attributes, an attribute makes a tag more customizable, an attribute is not a tag, it is part of a tag. it is laid out like this:
<tag attribute l="what it equals" attribute2="what it equals">
so lets learn an attribute for <body> the attribute is bgcolor. this stands for... you guessed it! background color! although most or all attributes have an = sign directly after and the "" enclosing the value, I will just introduce them as the attribute.
there are 3 different types of things that can go in the quotes to define the color, but I'll only teach you the easier 2. you can still get the same colors as the third, so don't worry about knowing what it is, the first is the proper color name. IE: red, blue, orange, or grey, there are 16 different proper color names, if you just want red, not a shade of it, these are good, chances are there will be one for the color you want as long as. it's a main color like the ones you learned in kindergarden. forest green- more advanced, so it does not have &am. if you want to specify the exact color(any shade you want), you use HEX. hex is simple, rrggbb. that means red, green, blue, with this you can create any color or shade you want, they go like this from darkest to brightest:
00
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
etc..
all the way up to ff
0 is the lowest(black(no color))
f is the brightest(think of it as full)
0-9, and then a-f
you can use these for red, green, and blue.
IE:
<body bgcolor="OOffOO">
the first 2 numbers are the values for red, the second are how much green, and then how much blue, this color has 00 red. this means no red. no blue either, and full green, this means it will produce a bright green color. ffOOOO would make bright red. if the red, green, and blue are all equal to the same thing, it will make black: 000000 white: ffffffor grey 111111 ,333333,aaaaaa or any other combination, what would ffOOff make?
purple because red and blue make purple, now wait a second. I thought you could make any color using primary colors, shouldn't it be red, yellow, ggfe»? well, HEX is only theory, in real life, if wouldn't work, but web pages aren't made using real paint, so it works just fine, what I recommend is that you go to visibone.com they have a HEX chart, its basically a big chart with lots of little color swatches and when you click one, it tells you the HEX value, if you see HEX written with a # sign before it IE:
<body bgcolor="#ffl5aa"> or with the letters in caps:
<body bgcolor="#FF15AA">
it's the same as what you learned, the caps and #pound sign are just proper syntax, it is better to use them, to get into a good habit.
attributed: background used:
<body background="picture.bmp"> this takes an image (pieture.bmp) and tiles it for your
background, if it was a bunny, your background would be lots of bunnies, do not use background
and bgcolor at once, it does not work!
next thing: we want text on the site, anything enclosed in <body> and not in another tag within
the body is simply printed to the screen.
IE:
<html>
<head>
<title>
my page
</title>
</head>
<body>
hello all
</body>
</html>
would make a white page with a title, and would say hello all at the top left-hand corner of the screen, boring. let's say we want it bigger, use the <hl> tag. <hl> makes a header(so that's what
the H stands for) that is #1. <hl> is huge, <h2> a little smaller all the way through <h6>
microscopic.
<html>
<head>
<title>
my page
</title>
</head>
<body>
hello all
</body> </html> note: the h can be capitalized (proper syntax again)<Hl>or<hl> both work. I think about <h5>
or <h4> is the default text size, so <h6> makes it smaller than normal and <hl> makes it bigger.
let's say you wanted to center the text so that it looked more like a title.
use the <eenter> tag.
<html>
<head>
<title>
my page
</title>
</head>
<body>
<center> hello all </center>
</body>
</html>
or you could reverse it so it said <center> before <hl> instead of after, it really doesn't matter, it
is good to make sure the tags are properly nested, this il like a sandwich, you put bread, meat,
bread, not bread, bread, meat, it is the same way with html. you put
<h 1 ><center>text</center></h 1 >
not <lilxcenter>text<hlxcenter>. although html is a very flexible language, and does not
need to be properly nested, it is a good habit to get into.
before we get to the next tag, I'd like to explain something, for the title tag, or any tag really, you
can do
this:
<title>hi</title>
or:
<title>hi
</title>
or:
<title>
hi
</title>
it doesn't matter as long as the title is somewhere within the title tag.
next tag: <br>
this is a line break, oh, so that's what the br stands for. break, this automatically goes to a new
line, because in html, this:
hello
my name is my
name
would be printed like this: hello my name is my name
as you can see, html does not pre-format text, this means it does not always look exactly as you type it, so to make it look like this:
hello
my name is my
name
you would have to type:
hello<br>
my name is<br>
my name
but as you remember from before you could type it like this:
hello
<br>
my name is
<br>
my name
as you can see, br does not have an ending tag.
next tag: <p>
this does the same thing, but starts a new paragraph, it either skips 2 lines and indents, or skips 1
line and indents. I can't remember which, for some strange reason, you can't type br more than
once to skip more than 1 line:
hi
<brxbrxbr>
hi
would only print:
hi
hi
this is terrible annoying, so they invented the <pre> tag. this does have an ending tag.
everything within the <pre> and</pre> tags is preformatted. this means if you type something, it will print exactly as you type it:
<pre>
hello
my name is my
name
</pre>
would print:
hello
my name is my
name
easy, new tag: <font>
this can do the same as the <hl>-<h6> tags and more.
attribute: color
changes the color of the text between the <font> and </font> tag. uses HEX or proper color name
exactly the same as the bgcolor attribute.
<font coIor="#FF8822">
hi this is colored font
</font>
you could even color each letter of some text a different color so it looked rainbow.
Hour #2
new tag: <table>
now this is a fun tag. It makes a table (lots of boxes) like this:
<table>
<tr>
<tdx/td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td><td></td>
</tr>
</table>
<tr> stands for table row. A row is horizontal. Notice there are 2 <tr></tr>'s. these are the 2 rows
in the above table. Within a <tr> there are <td>'s. Table data. This is what goes in your table:
<table>
<tr>
<td>hello</td>
<td>there</td>
<td>how</td>
<td>are you?</td>
</tr>
<tr>
<td></td>
<td></td>
<tdx/td>
<td></td>
</tr>
</table>
would look like this:
hello there how are you?
new attribute: bgcolor <table bgcolor="red"> <tr> <td>
hi
</td> </tr> looks like:
note: the table is only as big as the text in each <td>. To fix this:
<td width="50%">
hi
</td>
makes:
hi ( box around hi with red fill)
ndth="
154"> you can also use the height
width can be defined in %percent or pixels: <td wic
attribute to make the table higher.
to make each <td> a different color, just use bgcolor in the td tag instead of in the table tag. You
can also use bgcolor in the <tr> to make the whole row 1 color. New attribute: align
<table align="center"> puts the table in the middle of the screen instead of the left side. Other
values are right and left. Left is the default value. New attribute: background. Works the same as
the <body background=:"picture to be tiled.jpg> only it tiles it on the whole table, the row if used
within <tr> or in one cell if used in <td>
new attribute :border.
<table border="5"> makes a bigger border on the table. The bigger the number, the bigger the
border. Think of a border as the frame of a picture. Can go in the <table> tag, <tr> or <td> tags.
Set to 0 for an invisible table. This can help to align text in the middle of the page, or right side
but without using a visible table. Cannot be seen. New attribute: bordercolor. Used to define thecolor of the border. Can go in <table> <tr> or <td>. New attributes: bordercolorlight and bordercolordark. Light specifies the color of the side of the border that is NOT shaded. Bordercolordark is the side of the border that IS shaded. Play with these to understand. New attributes: colspan and rowspan. Use within <td>. Makes one td span into another to make a large td withought affecting the other td's in the row or column.
<table>
<tr>
<td rowspan="2"x/td>
<td></td>
<td></td>
<tr></td>
</tr>
<tr>
<td></td>
<td></td>
<td colspan="4" bgcolor="green"x/td>
<td></td>
</tr>
<tr>
<td rowspan="2"x/td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td eolspan="2"x/td>
<td colspan="2"x/td>
<tdx/td>
<td colspan="2"x/td>
</tr>
<tr>
<tdx/td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
new tab:<th>
same as <td> only bolds the text. Quick way to make titles for your tables. Try writing code for
this table:
BY Kool_aid and danmanhen
woops, sry i couldnt get the examples to work in the guides, html is disabled so they wont show up.
![[Image: koolaidsig.gif]](http://i59.photobucket.com/albums/g320/koolaid_dude/Sigs/koolaidsig.gif)