HTML Tutorial

1
College of Information Technology and Computer Science
This HTML, XHTML and CSS manual is unpublished and yet to be approved Suggestions and revisions is accepted by the author
By Rene B Quimoyog BSCS, BSN, MIS January 2010
2
TABLE OF CONTENTS
3
Quickfind page
Lesson 1: The basics
The basic tags: <html>, <head>, <title> and <body> tags Nesting tags Background and text color The basic colors Color picker A background image Comments in HTML code
Lesson 2: Text (part 1)

2.1. Text positioning
- 2.1.1. The <div> and <span> tags - 2.1.2. Whitespace in text, the <pre> tag
2.2. Creating linebreaks and paragraphs

- 2.2.1. Linebreak, the <br> tag - 2.2.2. Paragraph, the <p> tag - 2.2.3. Horizontal rule, the <hr> tag

2.3. Headers
- 2.3.1. The <h1>, <h2>, <h3>, <h4>, <h5> and <h6> tags
2.4. Emphasis
- 2.4.1. The <em> tag - 2.4.2. The <strong> tag
2.5. Text style

2.5.1. Italic, the <i> tag 2.5.2. Bold, the <b> tag 2.5.3. "Big", the <big> tag 2.5.4. "Small", the <small> tag 2.5.5. Monospaced, the <tt> tag 2.5.6. Subscript and Superscript, the <sub> and <sup> tags --> Important notes: text and text style in CSS! - font-style
4
font-weight color font-family font-size text-decoration

2.6. Lists
- 2.6.1. The <ul>, <ol> and <li> tags - 2.6.1.1. Unordered list, the <ul> tag - 2.6.1.2. Ordered list, the <ol> tag - 2.6.2. Definitionlist, the <dl>, <dt> and <dd> tags
Lesson 5: Images
- 3.1. The <img> tag --> The src attribute --> The width and height attributes --> The alt attribute - Notes: Directory structure!
Lesson 6: Link
- 4.1. The <a> tag --> <a> in CSS --> E-mail link --> A hyperlink --> An image used as a link --> An imagemap --> The target attribute
Lesson 7: Tables
- 5.1. The <table>, <tr> and <td> tags --> The width attribute --> The border attribute --> Table and cell color --> The cellpadding and cellspacing attributes --> Centering a table --> Centering text in a table --> Left and right alignment --> Vertical alignment - 5.2. The <caption> tag - 5.3. The <thead>, <tfoot> and <tbody> tags
5
- 5.4. The <colgroup> and <col>tags - 5.5. The <th> tag --> The rowspan attribute --> The colspan attribute --> Placing a table within a table
Lesson 8: Forms
- 6.1. The <form> tag - 6.1.1. Data input, the <input> tag --> The type="text" attribute --> The type="password" attribute --> The type="checkbox" attribute --> The type="radio" attribute --> The type="file" attribute --> The type="hidden" attribute --> The type="submit" and type="reset" attributes --> The type="image" attribute - 6.1.2. The <select>, <optgroup> and <option> tags --> The multiple attribute --> The size attribute --> The selected attribute - 6.1.3. Textarea, the <textarea> tag - An example: Tony's survey
Lesson 9: Frames
- 7.1. The --> The --> The --> The --> The --> The --> The --> The - 7.2. The <frameset> and <frame> tags cols and rows attributes frameborder attribute marginwidth and marginheight attributes scrolling attribute noresize attribute name attribute target attribute <noframes> tag
Lesson 10: Interesting tags

- 8.1. The - 8.2. The --> The --> The --> The --> The --> The lang attribute <meta> tag keywords attribute description attribute author attribute robots attribute charset attribute
6
--> The refresh attribute - 8.3. The <link> tag - 8.4. The <base> tag - 8.5. The <script> tag --> Important note: HTML characters 1. What is HTML? HTML stands for HyperText Markup Language. It's the 'universal language' of the World Wide Web. HTML first appeared in 1995 (HTML version 2.0). The following years versions 3.0 and 3.2 were introduced and today, in the year 2000, HTML 4.0 is used. In all these years there have been major differences in the behavior of the HTML language in different browsers and on different platforms. Most of us will agree that HTML documents should work well in different browsers and platforms but there are still differences in the behavior of HTML documents in different browsers. The good news is that the gap is closing rapidly. 2. The tutorial This tutorial has been made according to the specifications by the World Wide Web Consortium (W3C). This tutorial was made on a PC with the use of Internet Explorer but all examples have been tested in Netscape as well. So everything you see works cross-browser (working in different browsers). If you have any questions, suggestions or remarks then you are welcome to send them to Anthony or you can try Anthony's HTML 4+ helpforum. A few remarks though: I deliberately didn't mention some of the HTML 4.0 tags. Some tags don't work cross-browser so there's no point in mentioning them. Additions or changes will be made when necessary.
All the examples in the tutorial are written in 'lowercase' text. That's just my way of writing ofcourse, you can also use 'uppercase' text. An example: <pre> = <PRE> The use of quotes (") is personal too. You can choose wether to use them or not. In some cases the use of quotes is required or forbidden and this will be mentioned. An example: <table border=1> = <table border="1"> In some cases the use of Cascading Style Sheets (CSS) is recommended for replacing deprecated (outdated) HTML tags. In some parts of this tutorial i have replaced deprecated HTML tags with Style Sheets (as recommended by the W3C specifications) but the use of CSS in this tutorial has been kept to a minimum because CSS is another tutorial.
7
There's also a downloadable version of Anthony's HTML 4+ tutorial. Click here for more info.
3. OK....let's go! Lets get down to business! I'm sure you've already heard about HTML editors. You know, the fancy stuff that promises you WYSIWYG (What You See Is What You Get). Sorry, we are not going to use such an editor but we will use our simple notepad! Yes, you heard me right, your simple notepad. Believe me, it's the best way to create your own web page. Writing your own code is fun and it puts you in control of the page! Did you open your notepad already? Yes? Ok, lets go!
1. The basics:
We only need a few tags to create a valid HTML document. The following tags are needed: <html>, <head>, <title> and <body> An example:
<html> <head> <title> </title> </head>
<-- optional <-- optional. <-- required in the code <-- required in the code <-- optional.
8
<body>
Content of your page goes here
<-- optional but recommended <-- optional but recommended <-- optional
</body> </html>
You are allowed to write the HTML code this way too:
<html> <head> <title> </title> </head> <body> </body> </html>

note: Uppercase text is allowed too (ex. html <---> HTML) note: optional = you may use it but it's not manditory. Every basic tag has a start tag and an end tag! start start start start tag: tag: tag: tag:
<html> end tag: </html> <head> end tag: </head> <title> end tag: </title> <body> end tag: </body>
I recommend you to use all 4 tags even though only the <title> and </title> tag is required in the code.
VERY IMPORTANT!
Tags always have to be nested! An example:
GOOD: (1-2-3-3-2-1)
<html><head><title></title></head></html>
GOOD: (1-2-3-3-2-4-4-1)
<html><head><title></title></head><body></body></html> WRONG: (1-2-3-1-2-3) <html><head><title></html></head></title> Nesting tags correctly is very important. Web pages can look weird or not work at all when you mix up the tags! Ok now, lets try to create a web page. I use all the tags even though some of them are optional. Type the following code in your notepad:
<html> <head> <title>lesson 1 </title> </head> <body>

My first web page
9
</body> </html>
Create a new folder on your desktop (or where ever you want) and call this folder 'website' (or another name). Save your notepad document to this folder as page1.html. Open the document page1.html in your browser. (doubleclick on the document in your folder) See? It wasn't that hard to create a web page huh? This is just a simple document ofcourse, i'm pretty sure you want to see (and do) more then just a simple document. No worries, we will get there! I use the W3C specification as you may have read in the introduction and that means that some tags are deprecated (outdated) and have to be replaced by Cascading Style Sheets (CSS). CSS makes creating web pages a lot more easy and flexible. Following example is deprecated:
<html> <head> <title>lesson 1 </title> </head> <body bgcolor="#800080" text="#ffffff">

My first web page
</body> </html>
Don't worry if you see tags that haven't been mentioned yet, they will be explained. In the <body> tag you see --> bgcolor="#800080" text="#ffffff" This means a darkish purple background and white text. Try it out, you will see this:
My first web page

Both bgcolor and text are deprecated (outdated). Instead of using them in the <body> tag we now have to use them in Cascading Style Sheets (CSS). The part written in red is the CSS:
<html> <head> <title>lesson 1 </title>

<style type="text/css"> body { background: #800080; color: #ffffff } </style>
10
</head> <body>
My first web page
</body> </html>
From now on i will use this form! Try out this example too, you will see that background: #800080 --> means backgroundcolor is darkish purple. text: #ffffff --> means textcolor is white. How do you determine a color? Take a look at the following color chart: These are the basic colors:
Black = "#000000" Silver = "#C0C0C0" Gray = "#808080" White = "#FFFFFF" Maroon = "#800000" Red = "#FF0000" Purple = "#800080" Fuchsia = "#FF00FF"
You may also use: <style type="text/css"> body { background: purple; color: white } </style>
Green = "#008000" Lime = "#00FF00" Olive = "#808000" Yellow = "#FFFF00" Navy = "#000080" Blue = "#0000FF" Teal = "#008080" Aqua = "#00FFFF"
I recommend you to use the hexadecimal code (f.e.: #800080) because this form is a lot more flexible. Ofcourse there's more than just the basic colors. example:
My first web page ---> backgroundcolor=#800080 My first web page ---> backgroundcolor=#c000c0 My first web page ---> backgroundcolor=#f000f0
You can also use the colorpicker. It makes it easier for choosing a backgroundcolor for your page. You will see the hexadecimal code as well!
11
You can also use an image as a background: <style type="text/css"> body { background-image: url("http://..../yourbackground.gif") } </style> You will have to fill in the correct URL (web address: f.e. http://www.here.com) and make sure that the image can be found at the specified web adres once you put the web page(s) online. In our example we have called the image yourbackground.gif but this can also be yourbackground.jpg --> More about images can be found in lesson 5. An example: Suppose that your web adres (URL) is http://www.myaddress.com and that we have an image called background.gif The code will look like this: <style type="text/css"> body { background-image: url("http://www.myaddress.com/background.gif" } </style> We can test this even without using a URL.
Click on the image with the right mousebutton and save the image as background.gif in your folder (make sure that the HTML document(s) and the image(s) are located in the same folder!)
Type the following example in your notepad and save it as background.html
<html> <head> <title>

lesson 1
</title>
<style type="text/css"> body { background-image: url("background.gif") } </style>
</head> <body> </body> </html>

Open the file background.html by doubleclicking on it. Doesn't it look nice? Well, we're almost at the end of lesson 1. A brief recap: This is the recommended form for creating an HTML document:
12

Title of your page goes here
</title>
<style type="text/css"> body { background: #color; text:#color } or body { background-image: url("http://..../yourbackground.gif") } </style>
</head> <body>
Content of your page goes here.
</body> </html>
Important remark! Sometimes you will see this in the source code (HTML code) of a document: <style type="text/css">
<!-body { background: #color; text: #color }
-->
</style> I've used the comment attribute in the example above. Older browsers don't know CSS and will translate the words as plain text, not as code! To prevent this you can use the comment attribute.  This attribute is great for placing comments in your HTML code! End of lesson 1.
2. Text (part 1):

2.1. Text positioning
2.1.1. The <div> and <span> tag:
Sometimes it's necessary to center the text on a page. Earlier one could use the <center> tag for centering the text but this tag is deprecated. Now we have to use this: <div class="center">
<div> and <span> tags are nothing more than empty 'containers'. They are often
used to import certain 'styles' (CSS) and for aligning text or images. Note: There's an end tag for both tags --> </div> and </span>. You HAVE TO use them!
13
An example:
... <body>
line 2
... <body>
line 2
<div>
line 3
<span>
line 3
</div>
line 4
</span>
line 4
</body> ...
Result:
</body> ...
line 2 line 3 line 4
line 2line 3line 4
Notice the 'linebreak' before and after the <div> tag! There's NO 'linebreak' when using the <span> tag. Both tags are being used more and more often so keep an eye on them! Now, if we want to center the text on a page we have to use this form:
... <body> <div class="center">

centered text
</div> </body> ...

A class is defined in CSS (Cascading Style Sheets). It's done like this: (The red part is the CSS)

page's title
</title>
<style type="text/css"> .center { text-align:center } </style>
</head> <body> <div class="center">

centered text
</div> </body>
14
</html>
Will be shown in your browser like this centered text .center defines a class named 'center'. This can be another name too ofcourse but don't forget the . in front of the name! If you want to align the text on the left use : .classname { text-align:left } If you want to align the text on the right use : .classname { text-align:right }
2.1.2 The <pre> tag:

The <pre> tag is used for creating whitespace. An example:
... <body> <pre>

This is whitespace.
</pre> </body> ...

Will look like:
This is whitespace.
2.2. Creating linebreaks and paragrahs

2.2.1. The <br> tag:
A simple but often used tag that creates a 'linebreak'. It ends (breaks) the current line of text.
... <body>
This is line 1
<br>
This is line 2
</body> ...
Without the <br> tag we would see this: This is line 1This is line 2 With the <br> tag we see this:
15
This is line 1 This is line 2
Note: There's no end tag for the <br> tag!
2.2.2. The <p> tag:

The <p> tag stands for 'paragraph' tag.
... <body>
This is line 1
<p>
This is line 2
</body> ...
Without the <p> tag we would see this: This is line 1This is line 2 With the <p> tag we see this: This is line 1 This is line 2 Notice the extra whitespace between the lines!
Note: There's an end tag for the <p> tag --> the </p> tag but the end tag is optional.
An example:
... <body> <p>

This is line 1
</p> <p>
This is line 2
</p> </body> ...

Gives you the same result as the previous example were we only used the single <p> tag.
2.2.3. The <hr> tag:

The <hr> tag stands for 'horizontal rule'.
16
... <body>
This is line 1
<hr>
This is line 2
</body> ...
Previous example will look in your browser like this: This is line 1 This is line 2 The <hr> tag fills the linebreak with a line.
Note: There's no end tag for the <hr> tag!

Well now, lets try to create a web page that contains all the tags we've seen in this lesson. Take your notepad and create a new document (don't forget to save the previous document).

Page's title
</title>
<style type="text/css"> <!-body { background: #005382; color: #ffff00 } .center { text-align:center } --> </style>
</head> <body> <div class="center">

Line no.1 is centered.
</div> <br>
line no.2 has a line underneath it.
<hr> <p>
Extra whitespace above this line.
</p> <pre>
whitespace in front of this line.
</pre> </body> </html>

Save the example above as text1.html and doubleclick on the file in your folder to see the result in your browser. If you did everything right you will see a dark blue background and
17
College of Information Technology and Computer Science yellow text. End of lesson 2. In the next lesson we will learn a lot more about fonts, font-style, font-size, text style and a lot more...
2. Text (part 2): 2.3. Headers 2.3.1. The <h1>, <h2>, <h3>, <h4>, <h5> and <h6> tags: These tags are used a lot for creating headers, titles or subtitles. Note: For every <h> tag there's an end tag --> </h> An example: ... <body> <h1> very big </h1> <h2> big </h2> <h3> bigger </h3> <h4> small </h4> <h5> smaller </h5> <h6> very small </h6> </body> ... Previous example will be shown like this: very big big bigger
18
small smaller very small 2.4. Emphasis: 2.4.1. the <em> tag: This tag is used to indicate emphasis. Note: for the <em> tag there's a required end tag --> </em> ... <body> This is the <em>first</em> line! </body> ... Result: This is the first line! 2.4.2. The <strong> tag: Also used to indicate emphasis but the rendered (shown) text is bold. Note: There's a required end tag for the <strong> tag --> </strong> ... <body> This is the <strong>first</strong> line! </body> ... Result: This is the first line! 2.5. Text style 2.5.1. the <i> tag:
19
Stands for "italic" text style. Does the same as the <em> tag. Note: There's a required end tag for the <i> tag --> </i> ... <body> This is the <i>first</i> line! </body> ... Result: This is the first line! 2.5.2. The <b> tag: Stands for "bold" text style. Does the same as the <strong> tag. Note: there's a required end tag for the <b> tag --> </b> ... <body> This is the <b>first</b> line! </body> ... Result: This is the first line! 2.5.3. The <big> tag: Renders the text in a 'bigger' font. Note: There's a required end tag for the <big> tag --> </big> ... <body> This is the <big>first</big> line! </body> ... Result:
20
This is the first line! 2.5.4. The <small> tag: Renders the text in a 'smaller' font. Note: there's a required end tag for the <small> tag --> </small> ... <body> This is the <small>first</small> line! </body> ... Result: This is the first line! 2.5.5. The <tt> tag: Renders a monospaced text: the same distance between every letter: f.e.: t_a_g ) Note: There's a required end tag for the <tt> tag --> </tt> ... <body> This is the <tt>first</tt> line! </body> ... This is monospaced text: This is the first line! 2.5.6. The <sub> and <sup> tag: <sub> means subscript and <sup> means superscript. Note: Both have an end tag --> </sub> and </sup> ... <body> H<sub>2</sub>O
21
E = mc<sup>2</sup> </body> ... Result: H2O E = mc2 Important notes ! The <i>, <b>, <big>, <small> and <tt> tags aren't deprecated yet (you can still use them) but the use of them is discouraged in favor of CSS. Do you remember how a Style Sheet looks like? A brief recap: <html> <head> <title> Page's title </title> <style type="text/css"> body { background:#000000; color:#ffffff } .center { text-align:center } </style> </head> <body> <div class="center"> centered text </div> </body> </html> How do you use the <i>, <b>, <big>, <small> and <tt> tags in Cascading Style Sheets (CSS) ? The part written in red is the CSS: <html> <head> <title> Page's title </title> <style type="text/css"> body { background:#ffffff; color:#000000 } .center { text-align:center } .italic { font-style: italic } .bold { font-weight: bold } .color { color: #00c091 }
22
.font { font-family: Verdana, 'Comic Sans Ms', Arial } .underline { text-decoration: underline } .size { font-size: 20px } </style> </head> <body> <div class="center"> centered text </div> <div class="italic"> italic text </div> <div class="bold"> bold text </div> <div class="color"> colored text </div> <div class="font"> another font </div> <div class="underline"> underlined text </div> <div class="size"> other size </div> </body> </html> Will be shown like this: centered text italic text bold text colored text another font underlined text other size Hmmm, this needs a bit of explaining ... When using CSS we can point out certain 'classes' or 'identities'. Take a look at the third line (in the CSS):
.italic { font-style: italic }
23
The first thing we see is the . in front of the word "italic". This . defines a 'class'.
.italic
means class="italic" { font-style: italic } means something like { text style : italic } These classes are used together with the <div> tag and/or the <span> tag. Once we defined a class(name) in our CSS we can use it in our HTML document: <div class="italic"> italic text </div> Important! We have to use the name we specified after the . ! This can be any name specified by you! Replace the <div> tag with the <span> tag and see the difference. I'm not going into details on how to use CSS in web pages but i think i should explain the most important text and text styles that are used in CSS because the use of CSS for text and text styles is becoming a standard.
1. font-style: .classname { font-style: normal or italic } 2. font-weight: .classname { font-weight: normal, bold, bolder, lighter } 3. color: (text color) .classname { color: hexadecimal (#......) or text } 4. font-family: .classname { font-family: Arial, Verdana, 'Comic Sans MS', ..., serif } Fonts that use more than one word have to be placed within quotes! --> 'New Century Schoolbook' Always end with a general fontgroup (like serif). If the browser can't find any of the specified fonts it will use the 'serif' family. (note: This is not required but recommended)
24
There are several fonts pre-installed on your computer (or maybe you installed some fonts yourself) but i can't tell you exactly where they are situated on your computer. (mine are located in c:\windows\fonts). If you don't find the folder try the help section of your computer. Tony's Advice: Always use more than one font and try them all out before using them in your web page! Sometimes a page might look great in a particular font but sucky in another one. Remember that not everybody has the same fonts installed on his/her computer! The browser will take the first font from the list and if the user doesn't have the font installed on his computer the browser will take the next one and so on ... The font 'Arial' is present on most computers so it's wise to start or end with it in your list. 5. text-decoration: .classname { text-decoration: none, underline } Underlines a word or a sentence. 6. font-size: .classname { font-size: f.e. 12pt or 12px or 150% or 1.5em } Try out different values and types to see the difference.
! The elements mentioned are not all style elements but the most important ones. You'll do just fine with them, believe me. ! A 'class' can have different elements. (they can be used in any order) An example:
.text { color:#FF7901; text-decoration:underline; font-family: Verdana, 'Comic Sans Ms', Arial; font-size: 18pt; font-weight:normal; font-style:italic }
a line of code like this in your HTML document: <div class="text">I love this!</div>
will be shown like this: I love this!
Be sure to experiment with all these CSS elements. The use of these elements in CSS is strongly encouraged! I suggest using a form like this:
25
<html> <head> <title> Page's title </title> <style type="text/css"> body { background: #...... ; color: #...... } .classname { color:#......; text-decoration: ... ; font-family: ... ; font-size: ... ; font-weight: ... ; font-style: ... } (you don't have to use all of them ofcourse) </style> </head> <body> <div class="classname"> (or <span class="classname">) content goes here </div> (or </span>) </body> </html>
End of this lesson! Lets go to lesson 4: text (part 3): lists. 2. Text (part 3) 2.6. Lists 2.6.1. The <ul>, <ol> and <li> tags: These tags are used for making lists. <ul> stands for 'unordered list'. <ol> stands for 'ordered list'. <li> stands for 'list item'. Note: The end tag for the <li> tag is optional. The <ul> and <ol> tags have to be ended (closed) by the </ul> and </ol> tags! 2.6.1.1. The <ul> tag: ... <body> <ul> <li> an item <li> an item
26
<li> an item </ul> </body> ... Notice that the <li> tag is used in between the <ul> and </ul> tag (or in between the <ol> and </ol> tag, see next example). There's NO end tag required for the <li> tag! Previous example will be shown like this:
an item an item an item
2.6.1.1. The <ol> tag: ... <body> <ol> <li> an item <li> an item <li> an item </ol> </body> ... Will be shown like this:
1. an item 2. an item 3. an item
These tags can be used in combination too. An example: ... <body>
27
<ul> <li>number 1 <ol> <li>an item <li>an item </ol> <li>number 2 </ul> </body> ... Be sure to nest the tags correctly! Remember? 1-2-2-1 In this case <ul> <ol> </ol> </ul> because the <li> tag doesn't have to be closed! The combined example will look like this:
number 1 1. an item 2. an item number 2
Other combinations are possible too ofcourse. 2.6.2. The <dl>, <dt> and <dd> tags: These tags are used for creating 'definition' lists. <dl> stands for 'definition list'. <dt> stands for 'definition term'. <dd> stands for 'definition description'. Note: The end tag for the <dt> and <dd> tags is optional. The <dl> tag has to be closed with the </dl> tag! ... <body> <dl> <dt> URL <dd> a web address (f.e. http://www.mysite.com) <dt> browser
28
<dd> software, needed for surfing. </dl> </body> ... Notice that there's no </dt> or </dd> tag required. The example looks in your browser like this: URL a web address (f.e. http://www.mysite.com) browser software, needed for surfing. Another example could be: ... <body> <dl> <dt> Center <dt> Centre <dd> A point equidistant from all points on the surface of a sphere. <dd> In some field sports, the player who holds the middle position ... </dl> </body> ... Result: Center Centre A point equidistant from all points on the surface of a sphere. In some field sports, the player who holds the middle position ... End of lesson 4. Next lesson --> Images.
3. Images
3.1. The <img> tag:
This tag is used a lot for placing images on a web page.
29
GIF types or JPG types are used mostly.
Note:
'animated gifs' are used a lot too. It's also a GIF type, the only difference is that an 'animated gif' is a collection of GIF files --> all seperate GIF files that make an animation, like a cartoon. Visualy there's no 'real' difference between a GIF and JPG type, it's more important for you to know that they are used a lot. An example:
<-- this is a GIF type
<-- this is an animated GIF type
<-- this is a JPG type
These are only examples ofcourse, images can be larger or smaller, have other colors, ... How do you determine the type of an image? If you don't have a graphical editor like Paint Shop Pro or Photoshop then you can use (if you work with Windows) a program called Paintbrush. This tool (program) supports different kinds of image types including GIF and JPG types. Locate the program, run it and open the image you want to use. If you want to know the properties of the image choose 'properties' somewhere in the menu. You can create your own images if you have a graphical editor like PSP or Photoshop!
Note: Every image has an amount of bytes. For example, right click on one of the
images above (Mac users hold down the mousebutton) and choose 'properties'. You will see how many bytes the image holds. Remember that every image has to be loaded by the browser. How larger the amount of bytes how longer it will take for the image to load. Be sure not to place 'a lot' of images on one page or not to place images on your pages which take an age to load! If a visitor has to wait a long time for the page to be loaded, he/she will quit the page easily! Tony's advice: Use images smaller than 20000 bytes (20K) and spread the images
30
College of Information Technology and Computer Science on several pages if possible. The use of the
<img> tag:
I will use the first image:
... <body> <img src="cupido.gif" width=76 height=77 alt="this is cupido"> <br>

This is Cupido
</body> ... Note: There's NO end tag for the <img> tag!
Lets have a closer look at the <img> tag.
<img src="cupido.gif" width=76 height=77 alt="this is cupido">

--> img stands for image. --> src stands for source: source (src) is, in this case, "cupido.gif" because 1) i named the image "cupido" 2) the image is a GIF type If i had used a JPG type then the src attribute had to be:
<img src="cupido.jpg" .... >

--> width stands for the width of the image. --> height stands for the height of the image. Note: The width and height attributes are optional and don't have to be used. I recommend you to use them though. If you use them the browser immediately knows how much space to reserve for the image. This will speed up the loading time and the page will be loaded nicely and smoothly! --> alt is used for a short description of the image. Hold the mousecursor over one of the images above and see what i mean. You will see a small box which shows a short description of the image. You have to put the description in the alt attribute in between quotes ("). Note: the alt attribute is optional. I recommend you to use the alt attribute though. If there's some kind of a problem, for example: if the browser can't find the image on your server the visitor won't be able to see the image ofcourse. If you have provided a description in the alt attribute the visitor will at least have a clue of what the image should have looked like. An example: Suppose i wanted to show an image of a dog on my page but for some reason i forgot to put the image on my server. This is what the visitor will see:
31
Very important!
It's very important to tell the browser (Internet Explorer, Netscape, ...) where to find a particular image! Example: My internet address (URL) is --> http://www.dynamicdeezign.com Every page that you are watching now (this tutorial) had to be transferred from my computer to my server. A server is an instance that makes sure that all my pages are viewable on the web. I use WS FTP (File Transfer Protocol) for uploading my files to my server but there are other similar programs (tools) that can be found on the web too (some of them are even free). The server provides me a web address (URL) to which i have to upload my files. You can compare this web address to a folder on your computer (desktop). I will try to make some things clear:
My computer My c: (harddisk) My desktop folder: c:\website My desktop images: c:\website\images
My server www.dynamicdeezign.com My internet folder: www.dynamicdeezign.com/website my internet images: www.dynamicdeezign.com/website/images
Notice that you have to use a \ on your computer to make subdivisions, on the internet you have to use a /. Don't forget this! Suppose that we use this folder: c:\website This folder contains the document introduction.html and also contains the image dog.gif. If the image dog.gif appears in my document called introduction.html and if both the image and the document are located in the same folder then we can use this form:
<img src="dog.gif" ... >

If the image dog.gif is located in another folder then the one which contains the document introduction.html then we have to specify this. Suppose that i've created a subfolder called images (which contains all the images i want to use, for convenience) in my folder c:\website. c:\website (which contains the document introduction.html) c:\website\images\ (which contains the image dog.gif)
32
(more subdivisions are possible ofcourse) If that's the case then you HAVE TO use:
<img src="images\dog.gif" ... >

This tells the browser to look for the image dog.gif in the folder called --> c:\...\images\.
Note: If you use a web address (URL) then you will have to use the following: <img src="images/dog.gif" ... >
You can link to an image that's not located on your own server too ofcourse: An example --> <img src="http://www.forsale.com/cheap/house.gif" ... > The browser will load the image located at the web address (URL) called www.forsale.com/cheap/ It's really easy if you know exactly where all your images are located! End of this lesson! Next lesson --> how to create a link?
4. Link 4.1. The <a> tag: Would there be an internet without links? I guess not. Luckily there are links (and a whole bunch of them) so lets have a closer look at them! ... <body> Go to <a href="http://www.yahoo.com">Yahoo!</a> </body> ... There's an end tag for the <a> tag --> </a> (required!) The example above will be shown in your browser like this: Go to Yahoo! You can see that the word 'Yahoo!' is written in blue (or purple if you have already visited the site) and that the word is underlined. Everything in between the <a href=...> and </a> tag defines the link.
33
The href attribute contains the web address (URL) to which you will be taken after clicking the link. The standard colors for links are: --> blue for a non-visited link --> purple for a visited link --> red if you click on the link (active link) You can change the colors for the links to your liking. deprecated: <body link="#0000ff" vlink="#800080" alink="#ff0000"> link stands for non-visited link vlink stands for a visited link alink stands for the active link (the click on the link) Recommended usage (CSS): <html> <head> <title>...</title> <style type="text/css"> body { background: #ffffff; color: #000000 } a:link { color: #0000ff } a:visited { color: #800080 } a:active { color: #ff0000 } </style> </head> <body> ... </body> </html>
a:link stands for non-visited link. a:visited stands for visited link. a:active stands for active link.
You only have to adjust the #...... value to your liking (can be any color). We can also create an 'e-mail link' to send an e-mail. This kind of link will open the e-mail client (Outlook Express, Messenger, ...) allowing the visitor to send
34
an e-mail. We can do that like this: ... <body> Send an <a href="mailto:tony@dynamicdeezign.com">e-mail</a> to Anthony. </body> ... --> will be shown as: Send an e-mail to Anthony. If you click on the link your e-mail client will be opened allowing you to send me an e-mail. You can even specify the subject in the e-mail! It's done like this: Send an <a href="mailto:tony@dynamicdeezign.com?subject=help me!">email</a> to Anthony. Try it out! Click on the following link: Send an e-mail to Anthony. You will see that the subject in your e-mail message will be filled in already! A hyperlink: Suppose that you have a very large page with a lot of text and that you want to redirect your visitor to a particular part or word on the page after he/she clicks a link (f.e.: you want to redirect your visitor from somewhere on top of your page to somewhere in the middle or end of your page when he/she clicks a particular link). Click on this link and see what happens! You will see that the browser jumps back to Go to Yahoo! This technique is used a lot for redirecting people to a particular part or word on a page or to jump back from bottom to top (or the other way around). Creating a hyperlink is done like this: 1. Take the line to which you want to redirect the visitor: Go to <a href="http://www.yahoo.com" name="yahoo">Yahoo!</a> the name attribute gives the link the name "yahoo". You can choose another name too ofcourse.
35
2. Take the line that will trigger the redirection: Click on this link and see what happens! The HTML code for this line is: Click <a href="#yahoo">on this link</a> and see what happens!
#yahoo
will create a redirection to the line where you defined the name="yahoo". Don't for get the # sign in the code!
You can also create a redirection to a place in another document. An example: Click here and see what i mean! You ended up on page 4 (lesson 4) where the explanation about the <dl> tag begins. How do you do this? Assume that i want to redirect my visitor to a chapter on page 4 (lesson 4 --> les4.html). More exactly to the chapter about the <dl> tag. In the HTML code on page 4 i used: <a name="les4dldtdd"></a>2.6.2. the <dl>, <dt> and <dd> tags: the HTML code for the link: Click here and see what i mean is: <a href="les4.html#les4dldtdd">Click here</a> and see what i mean! So i redirect to the place where the text is located, in the case les4.html and i added #les4dldtdd to it.
Note: You
are allowed to use an 'empty' <a> tag (no href) as you can see: --> <a name="..."></a> ... Just put it there where you want your redirection.
An image used as a link: I'm sure you've seen them already, an image used as a link. Do you remember how to put an image on a page? <img src="cupido.gif" width="76" height="77" alt="This is Cupido">
36
Now lets turn this image into a link: <a href="http://www.love.com"> <img src="cupido.gif" width="76" height="77" alt="Go to www.love.com"> </a>
You will be taken to http://www.love.com when you click on the image (i don't know if the web address really exists). Notice the blue border (or purple border if you have visited the web address already) around the image. In most cases the border won't look nice on your page but there's a way to get rid of it: <a href="http://www.love.com"> <img src="cupido.gif" width="76" height="77" alt="Go to www.love.com" border="0"> </a>
border="0" (zero) means that the border will not be shown.

Note: You
can write the attributes in the <img> tag in any order. The following is OK too:
<img src="cupido.gif" border="0" alt="Go to www.love.com" width="76" height="77"> or: <img border="0" alt="Go to www.love.com" src="cupido.gif" width="76"
37
height="77"> and so on ... An imagemap: Suppose that you want to have one big image that can link to different places (or pages). We will have to divide the image into different pieces and create a link for every piece of the image. No problem, we can easily do that: I've created the following image: (it's one image, not 6!)
I can create a link for all 6 'menu items'. For example: --> lesson 1 links to les1.html --> lesson 2 links to les2.html --> and so on ... We first have to tell the browser the name of the image and then we give the map a name too: ... <body> <img src="menumap.gif" width="129" height="241" alt="menumap" usemap="#navigationmap" border=0> </body> ... I have called the image menumap.gif and the map i'm going to use is navigationmap (usemap="#navigationmap").
Note: Don't
forget the # sign!
38
(Other names for the map can be used too ofcourse) As mentioned, this is one big image which we can divide into seperate smaller pieces. There are 3 possibilities: we can use rectangles, circles or polygons. And we will need x and y coordinates too:
Suppose that we are going to use rectangles. This will be the HTML code: ... <body> <img src="menumap.gif" width="129" height="241" alt="menumap" usemap="#navigationmap" border="0"> <map name="navigationmap"> <area shape=rect coords="0,0,135,35" href="les1.html"> <area shape=rect coords="0,40,135,75" href="les2.html"> <area shape=rect coords="0,80,135,115" href="les3.html"> <area shape=rect coords="0,120,135,155" href="les4.html"> <area shape=rect coords="0,160,135,195" href="index.html"> <area shape=rect coords="0,200,135,235" href="mailto:name@place.com"> </map> </body> ...
Note: There's
an end tag for the <map> tag --> the </map> tag (required).
Note:
There's NO end tag for the <area> tag!
Ok now, i will explain the previous HTML code. We have told the browser to use the image menumap.gif and the browser has to use the map called #navigationmap (usemap="#navigationmap"). This is all done in the <img> tag.
39
So now the browser uses this map: --> <map name="navigationmap"> (the # sign is NOT included!) and has to create 6 rectangles (area shape=rect) using the specified coordinates (coords="..."). Every rectangle has 4 coordinates: - the first coordinate: x-left - the second coordinate: y-top - the third coordinate: x-right - the fourth coordinate: y-bottom --> f.e. coords="0,0,135,35" These coordinates create the following rectangle:
--> if you specify f.e. coords="20,10,135,35" you will get this:
You always have to adjust the x or y (or both) coordinates. If you use a vertical based image you will have to change the y coordinate(s), for an horizontally based image you will need to change the x coordinate(s). Have a closer look at the following image. Move the mouse cursor slowly accross the image from top to bottom (or reverse). You will see that i've created 6 rectangles that nicely cover the 6 menu items. I only had to adjust the y coordinates (see the HTML code in the example)
40
The href attribute specifies the web address that will be used for the link. Try out the 2 other possible shapes too! The circle shape uses this form: <area shape=circle coords="center-x, center-y, radius" href="..."> The polygon shape uses this form: <area shape=poly coords="x1,y1,x2,y2,x3,y3,...." href="..."> You can use as many coordinates as you wish when using the poly shape. You can create all kinds of shapes with it!
Good to know!
There are different ways to open a link in someone's browser.

_top: the browser will open every new page (after clicking the link) in the same original window. _blank: the browser will open the page (after clicking the link) in a new window. There's also _self and _parent but their use is less frequent in HTML coding.
_top and _blank are used together with the target attribute. If you want the browser to open a link in a new window then you have to use: <a href="your address here" target="_blank">your link here</a>
41
Don't forget the _ sign! Click on the following link to see what the target="_blank" attribute does: --> Need an HTML tutorial? Click here!
End of lesson 6! Next lesson --> tables!
5. Tables
5.1. The <table>, <tr> and <td> tag:
Tables are used a lot in web pages. They give you a lot of control over the lay-out of a web page. You can use 'simple' or more 'complex' tables. Lets start with a simple table:
... <body> <table width="100%" border="1" cellpadding="1" cellspacing="1"> <tr> <td>

This is a simple table.
</td> </tr> </table> </body> ...

This is a simple table. Three tags are used for creating a table --> the <table>, <tr> and <td> tags. Every tag has an end tag --> </table>, </tr> and </td>. The end tag </table> is required, the other two, </tr> and </td>, are optional! --> <tr> stands for 'table row'. --> <td> stands for 'table data cell'. Next example is valid too:
... <body> <table width="100%" border="1" cellspacing="1" cellpadding="1"> <td>

</table> </body>
42
...
It's best to use all three begin and end tags. The browser sometimes acts weird if you use the short form.
Very important!!!
After every <table> tag there has to be a <td> tag! Lets try to create a table with different rows and cells. Here we go: ...
<body> <table width="100%" border="1" cellspacing="1" cellpadding="1"> <tr> <td>row 1 cell 1</td><td>row 1 cell 2</td><td>row 1 cell 3</td> </tr> <tr> <td>row 2 cell 1</td><td>row 2 cell 2</td><td>row 2 cell 3</td> </tr> </table> </body>
...
row 1 cell 1 row 2 cell 1
For every cell we use a <td> and a </td> tag, if we want to start a new row we use a <tr> tag. We can adjust the width of our table ofcourse. I guess you've already noticed the width attribute in the code. This attribute allows us to define a certain width. If we use width="100%" then the table will cover the whole page's width. If we use for example width="50%" then the table will only cover 50% of the page's width. If you don't specify the width attribute the browser will use the required space, nothing more, nothing less. Note: We can use absolute values too, for example width="250". Try this out too. The border attribute is used for placing a border around the table. How bigger the border value how thicker the border will be. A border=0 value means no border. An example: ...
<body> <table width="70%" border="5"> <tr> <td>row 1 cell 1</td><td>row 1 cell 2</td><td>row 1 cell 3</td>
43
</tr> <tr> <td>row 2 cell 1</td><td>row 2 cell 2</td><td>row 2 cell 3</td> </tr> </table> </body>
...
We can also use colors in tables. This is the deprecated form: <td bgcolor="#......">. Now we have to use CSS. It's done like this:
<html> <head> <title>...</title>

<style type="text/css"> td.green { background: #00cc00; color: #cc00cc } td.blue { background: #0000ff; color: #ffff00 } </style>
</head> <body> <table width="70%" border="1"> <tr> <td class="green">cell 1</td> <td class="blue">cell 2</td> </tr> </table> </body> </html>
cell 1
cell 2
In our Style sheet we define two classes: td.green and td.blue. The background attribute determines the backgroundcolor and the color attribute determines the text color.
Remark!
For some reason the <td> tag HAS TO BE closed with the </td> tag in Netscape if you want to work with cell colors. Don't forget this!
44
The cellpadding and cellspacing attributes come in very handy! These two attributes define the whitespace amongst cells and in the cell itself. An example: ...
<body> <table width="75%" border="5" cellpadding="15" cellspacing="10"> <tr> <td>row 1 cell 1</td><td>row 1 cell 2</td><td>row 1 cell 3</td> </tr> <tr> <td>row 2 cell 1</td><td>row 2 cell 2</td><td>row 2 cell 3</td> </tr> </table> </body>
...
row 1 cell 1
row 1 cell 2
row 1 cell 3
row 2 cell 1
row 2 cell 2
row 2 cell 3
The whitespace between the table border and the cells is called cellspacing. The whitespace between the cell and the cell border is called cellpadding. In every example untill now we have seen that the table is placed on the left of the page. We can center a table too ofcourse. The following example is deprecated --> <table align="center">
NOTE! Internet Explorer and Netscape handle some tags in different ways. As
mentioned, tables can be complex and style sheets are used more often. I've tried to replace deprecated tags with style sheets as recommended by the W3C standard but in some cases i couldn't get a uniform result in both browsers. Keep in mind though that every example in this tutorial will work universal even though i have used my own technique! I use the following techinque for centering my tables:
<html> <head> <title>...</title>

<style type="text/css"> .center { text-align:center }
45
College of Information Technology and Computer Science </style>
</head> <body> <div class="center"> <table width="70%" border="5"> <tr> <td>cell 1</td> <td>cell 2</td> </tr> </table> </div> </body> </html>
cell 1
cell 2
I place the HTML code for the table in between a <div class="center"> tag. centering text in a table is done this way:
... <body> <table width="70%" border="1"> <tr> <td align="center">cell 1</td> <td align="center">cell 2</td> </tr> </table> </body> </html>
cell 1
cell 2
The align="center" attribute in the <td> tag will make sure that the text in the cell will be centered. We can also use align="left" or align="right". Note: For aligning text (or an image) vertically you have to use: --> valign="top" --> valign="middle" --> valign="bottom" So, the <table>, <tr> and <td> tags are in fact the basic tags for creating a table. Ofcourse there are more tags that can be used in conjunction with tables. In fact, HTML 4.0 offers a lot more flexibility in using tables. Lets have a closer look to these additional tags.
46
5.2. The <caption> tag:

This (optional) tag can be used for a description of your table.
Note: there's an end tag for the <caption> tag --> </caption> ... <body> <table width="100%" border="1" cellpadding="1" cellspacing="1"> <caption>The description is placed on top of the table.</caption> <tr> <td>
</td> </tr> </table> </body> ...
The description is placed on top of the table.

5.3. The <thead>, <tfoot> and <tbody> tags:

--> <thead> stands for "table header" --> <tfoot> stands for "table footer" --> <tbody> stands for "table body" For every <thead>, <tfoot> and <tbody> there's an end tag --> </thead>, </tfoot> and </tbody>
Note: All three tags are optional.

The <thead> and the <tfoot> tags are supposed to contain information about the columns in a table. The <tbody> tag should contain rows with table data. An example:
... <body> <table> <thead> <tr>header information <tfoot> <tr>footer information <tbody> <tr>block 1, first row <tr>block 1, second row
47
<tbody> <tr>block 2, first row <tr>block 2, second row <tr>block 2, third row </table> </body> ...
Notice that after every <thead>, <tfoot> and <tbody> there has to be a <tr> tag and that the </thead>, </tfoot> and </tbody> tags are optional!
5.4. <colgroup> and <col>:

A. The <colgroup> tag represents a group of columns in a table. Note: The end tag </colgroup> is optional! These are the attributes for the <colgroup> tag : -- > span --> specifies the number of columns in the group. This has to be a number>0! -- > width --> specifies the width of every column in the group. This can be a pixel, percentage or relative value. Example:
<colgroup span="10" width="15"> </colgroup>

--> 10 columns of each 15 pixel wide. B. The <col> tag represents ONE column in a table. There's NO end tag for the <col> tag ! Possible atrributes are: -- > span --> standard value is 1 (one column) If the value is f.e. 3 then column 1, 2 and 3 will own the same properties. -- > width --> specifies the width of the column. This can be a pixel, percentage or proportional value.
Note! The width attribute in the <col> tag has the same meaning as the width attribute in the <colgroup> tag and overwrites it!
A little more explanation about a proportional value. Take a look at the following example:
... <body> <table>
48
<colgroup> <col width="100"><-- column 1 <colgroup> <col width="100"><-- column 2 <col width="0*"><-- column 3 <col width="2*"><-- column 4 <colgroup align="center"> <col width="1*"><-- column 5 <col width="3*"><-- column 6 <thead> <tr> <td>row 1, cell 1 </td> </tr> </table> </body> ...
Column 1 and 2 will get 100 pixel width each. The minimal space is reserved for column 3 (0*). The remaining horizontal space is divided in 6 parts (2* + 1* + 3*) amongst column 4, 5 and 6. Column 4 will get 2 parts, column 5 will get 1 part and finally column 6 will get 3 parts. Notice the align="center" attribute in the last <colgroup> tag. This will make sure that every cell in this group of columns will be centered. Keep in mind that all <col> tags overwrite the <colgroup> tags!
5.5. The <th> tag:

NOT the same as the <thead> tag! In fact, this tag resembles to the <td> tag but the <th> is rather new. There's an OPTIONAL end tag for the <th> --> </th>. --> the <th> tag stands for "table header cell" The <th> tag creates a cell (in fact, it's a kind of <td> tag!) that contains header information! Possible attributes are: --> rowspan --> specifies the amount of rows a cell will use. --> colspan --> specifies the amount of columns a cell will use. These two attributes can be used in the <td> tag too! See the next examples. What does the <th> tag do? An example:
49
... <body> <div class="center"> <table width="65%" border=2> <tr> <th>Name</th> <th>Age</th> <th>Children</th> </tr> <tr> <td>Mark</td> <td>41</td> <td>2</td> </tr> <tr> <td>Peter</td> <td>27</td> <td>0</td> </tr> </table> </div> </body> ...
Looks like this in your browser:
Name Mark Peter 41 27
Age 2 0
Children
Text defined in the <th> tag is rendered (shown) in bold and is centered automatically! Text defined in the <td> is NOT rendered in bold and is NOT centered automatically! Use the align="center" attribute for centering text in the <td> tag.
The use of the rowspan attribute:
... <body> <div class="center"> <table width="65%" border=2> <tr> <td>1</td><td rowspan="2">2</td><td>3</td> </tr> <tr> <td>4</td><td>6</td> </tr> <tr> <td>7</td><td>8</td><td>9</td>
50
</tr> </table> </div> </body> ...

Looks like this:
1 4 7
2 8
3 6 9
The second cell takes two rows as defined in: <td rowspan="2"> Be sure to experiment with different cells!
The use of the colspan attribute:
... <body> <div class="center"> <table width="65%" border=2> <tr> <td>1</td><td>2</td><td>3</td> </tr> <tr> <td colspan="2">4</td><td>6</td> </tr> <tr> <td>7</td><td>8</td><td>9</td> </tr> </table> </div> </body> ...
Looks like this:
1 4 7
2 8
3 6 9
The fourth cell takes two columns as defined in:
51
<td colspan="2">
Be sure to experiment with different cells!
Note! Do not define overlapping cells! You will get weird constructions or even
worse, nothing at all! Placing a table within a table This technique is used a lot for creating complex tables. I will not explain it in detail, but be sure to experiment with it. You might be surprised to see what can be done with placing a table within a table! An example:
... <body> <div class="center"> <table width="85%" border="10" cellpadding="15"> <tr> <td>table 1, row 1, cell 1</td> <td>table 1, row 1, cell 2</td> </tr> <tr> <td>table 1, row 2, cell 1</td> </tr> <tr> <td> <table border="3"> <tr> <td>table 2, row 1, cell 1</td> <td>table 2, row 1, cell 2</td> </tr> <tr> <td>table 2, row 2, cell 1</td> </tr> </table> </td> </tr> </table> </div> </body> ...
Will be shown like this:
table 1, row 1, cell 1
52
table 2, row 1, cell 1 table 2, row 1, cell 2 table 2, row 2, cell 1
Be sure to nest the tags correctly!!! Placing tables within tables is a bit more difficult but don't be scared, the use of complex tables is rarely needed. Also, don't ask yourself too much wether to use all tags (end or optional tags) but point out a good and decent way for yourself to implement tables in your pages. Tony's Advice:
Practice with 'simple' tables and you'll get far! Use all three basic tags: the <table>, <tr> and <td> tags and their end tags: </table>, </tr> and </td>.
End of this lesson! Next lesson --> forms
6. Forms
6.1. The <form> tag:
In some cases it can be useful to receive data from your visitors like 'feedback' or a 'survey'. To achieve this we can use the <form> tag. This tag is mostly used together with CGI (Common Gateway Interface). CGI does a lot, it processes data from a web page but CGI is another tutorial. Don't worry, there are other ways to process data submitted by forms without knowledge of CGI. Let have a look at these ways: If we want to create a form we have to start with the <form> tag and end with the </form> tag! This is how the <form> tag looks like:
<form action="http://..." method="post" enctype="...">

or
<form action="mailto:..." method="post" enctype="...">

or
<form action="http://..." method="get" enctype="...">
53
Notice that there are three important attributes in the <form> tag. 1) --> action="..." Two possibilities:
"http://..." --> means that the form will use a web address (URL). "mailto:..." --> means that the form will use an e-mailaddress.
Note: I will not focus on the "http://..." option because this option is used mostly
together with CGI and this option is a bit more difficult. I will focus on the "mailto:..." option. Remember though, every example works with the "http://..." option too! 2) --> method="..." Two possibilities:
"get" --> the information in (from) the form will be added to a web address (URL) (and can be posted). These are special characters (ASCII) which can be used by f.e. searchengines to search for a particular word or sentence without further action. "post" --> the information in (from) the form can be processed in different ways and can be posted.
Note: I will not focus on the "get" option because this option is mostly used
together with CGI. Remember though, every example works with the "get" option too! 3) --> enctype="..." There are a lot of possibilities but i will only use enctype="text/plain". This allows us to send data as 'readable' content.
Maybe this is all a bit confusing but i will focus on creating a 'simple' form. This means a form that can be processed without the use of CGI and that enables us to collect data from our visitors. I will create a form (at the end of this lesson) that allows our visitors to send us comments, suggestions, ... directly from our web page.
Ofcourse we need more than only the <form> tag.
6.1.1. The <input> tag:

This tag allows us to enter different kinds of data.
54
Note! There's NO end tag for the <input> tag!

Possible attributes are:
type="text"
Allows us to enter text. Example:
... <body> <form action="mailto:..." method="post" enctype="text/plain"> First Name: <input type="text"> </form> </body> ...
Result: First Name: But there's more ofcourse...take a look at the next example...
... <body> <form action="mailto:..." method="post" enctype="text/plain"> First Name: <input type="text" size="20" value="this is the textbox" maxlength="20" name="firstname"> </form> </body> ...
Result: First Name:
this is the text
Note: These 4 attributes are optional so they are NOT required!

size="..." --> specifies the size of the textbox. value="..." --> places the specified text in the textbox. maxlength="..." --> specifies the maximum amount of characters that can be entered in the textbox. Try to enter more than 20 characters in the textbox and see what it does. name="..." --> assigns a specific name to the textbox. Important! This name will be shown in the e-mail. It will show you, assuming the previous example, what the First Name of your visitor is (when entered ofcourse). It's
55
College of Information Technology and Computer Science a good habit to use this attribute!
type="password"
The same as entering text but the text will be shown as * making it impossible to see what's being entered.
Note! This doesn't mean that the text will be unreadable when sent. The server
(the instance that transfers data from and to different locations) will handle this like plain, readable text. An example:
... <body> <form action="mailto:..." method="post" enctype="text/plain"> First Name: <input type="password"> </form> </body> ...
Looks in your browser like this: First Name: Test it by entering some text in the textbox.
type="checkbox"
This attribute can be compared with a 'light switch' that you can turn on or off. An example:
... <body> <form action="mailto:..." method="post" enctype="text/plain"> Good: <input type="checkbox" name="good"> Bad: <input type="checkbox" name="bad"> </form> </body> ...
Good:
Bad:
Move your mousecursor into a square (box) and click with the mousebutton. There will appear a 'v' in the square of your choice. Click on it again and it will disappear. You can 'check' a square (box) in advance. It's done this way:
56
... <body> <form action="mailto:..." method="post" enctype="text/plain"> Good: <input type="checkbox" checked name="good"> Bad: <input type="checkbox" name="bad"> </form> </body> ...
Good: Bad:
Notice that the square next to 'Good' is already checked.
type="radio"
Very similar to 'checkbox'. An example:
... <body> <form action="mailto:..." method="post" enctype="text/plain"> Good: <input type="radio" name="good"> Bad: <input type="radio" name="bad"> </form> </body> ...
Result: Good: Bad:
Note: Once you have made a choice you can't undo it anymore! Try it, make a choice and try to undo it.
BUT! There's a way around it! We only have to give the 'name' attribute the same
property. Take a look at the following example:
... <body> <form action="mailto:..." method="post" enctype="text/plain"> Good: <input type="radio" name="choice"> Bad: <input type="radio" name="choice"> </form> </body> ...
Good: Bad:
57
Select the first choice (Good) and then select the second choice (Bad), or the other way around, and see what happens.
Note: We can make a choice in advance. We only need to use the checked value
just like in the checkbox attribute.
type="file"
Allows you to look for a file (f.e. on your harddisk).
... <body> <form action="mailto:..." method="post" enctype="multipart/form-data"> <input type="file" name="file"> </form> </body> ...
Click on the button next to the textbox. You will be able to retrieve a file from your harddisk.
Important: It's recommended to use enctype="multipart/form-data" instead of

enctype="text/plain" when using the type="file" attribute. Your e-mailclient will open a new message allowing you to manually attach a file.
type="hidden"
You can make certain 'mechanisms or information' invisible if you use the hidden attribute. Note! The mechanisms or information will work but you will not see them. An example:
... <body> <form action="mailto:..." method="post" enctype="text/plain"> Your question: <input type="text" name="text"> <input type="hidden" name="subject" value="tutorial"> </form> </body> ...
Your question: You will see the textbox (with 'Your question' in front of it) and that's it. The hidden attribute creates an invisible line in the form BUT it will carry out the information! If the form in our previous example would be sent to us through e-mail then we would recieve two lines of text in our mail (assuming the visitor filled out the form). We would see this:
58
1. Your question: ... 2. subject=tutorial
The hidden attribute is used a lot in combination with CGI. An often used mechanism is a 'hidden' line that will take the visitor to a 'thank you page' after he/she submitted the form.
type="submit"
type="reset"
These two attributes create two buttons. One allowing the visitor the submit (send) the information in the form and one allowing the visitor to erase the information in the form (reset). An example:
... <body> <form action="mailto:..." method="post" enctype="text/plain"> Your question: <input type="text" name="question"> <p> <input type="submit" name="send" value="SEND IT NOW!"> <input type="reset" name="clear" value="RESET PLEASE"> </form> </body> ...
Your question:
SEND IT NOW! RESET PLEASE
type="submit" creates a button allowing the visitor to send the information. type="reset"creates a button allowing the visitor to erase the information.
F.e.: enter your name in the textbox and click on the ERASE button. You will see that the information will be erased. If you click on the SEND IT NOW! button the information will be send. Try it. I won't work though because i didn't specify an emailaddress in the action="mailto:..." attribute. But believe me, it works. You can determine the text to be displayed on the buttons yourself. You just have to specify this in the value="..." attribute. But there's even another way for making a button...
type="image"
Allows you to use an image instead of a grey button.
59
... <body> <form action="mailto:..." method="post" enctype="text/plain"> Your question: <input type="text" name="question"> <p> <input type="image" src="send.gif" name="verzend"> </form> </body> ...
Ziet er als volgt uit: Jouw vraag:
src="..." specifies the type of image you want to use. In this case i used send.gif but this can be any name ofcourse. Properties for images can be found in lesson 5.
Note: You CAN'T use an image for the reset button!
6.1.2. The <select>, <optgroup> and <option> tag:

Using these tags we can create a selectionlist allowing one or more choices.
Note! The end tags </select> and </optgroup> are REQUIRED! The end tag </option> is optional. Note! The <select> and <option> tags are a minimum for creating a list, the <optgroup> tag is optional!
An example:
<form action="mailto:..." method="post"> <select name="selectionlist"> <optgroup label="computer"> <option value="PC">PC <option value="MAC">MAC <option value="Playstation">Playstation <option value="Deep Blue">Deep Blue
60
</optgroup> </select> </form>
PC
You will see a textbox and an arrow pointing down. If you click on the arrow you will get a sort of a list (menu). How do you create such a list?
Start with the <select> tag and give it a name (not required but a good habit). Don't forget the </select> tag at the end!!! The <optgroup> tag optional. I used it in the previous example to show its use. The label attribute is used for a description of a group in the list and can also be used in the <option> tag. If you use the <optgroup> tag then don't forget to use the </optgroup> tag as well! To offer the visitor a choice from the list we have to use the <option> tag. Every <option> tag defines a new choice. The <option> tag DOESN'T HAVE TO be closed (ended) with the </option> tag! The value attribute has the same meaning as described in the <input> tag.
Note! Previous example is not the most practical. You can only make one choice and sometimes it's necessary to be able to make several choices. Solution:
<form action="mailto:..." method="post"> <select multiple name="selectionlist"> <option value="choice1">choice 1 <option value="choice2">choice 2 <option value="choice3">choice 3 <option value="choice1">choice 1 </select> </form>
Result:
choice 1
You see a larger textbox now offering 4 choices (1, 2, 3, 1 --> the last choice is choice 1 again. That way we are able to select choice 3 AND 1). If you select a choice and then select another one you will see that the previous choice is cancelled. Try it, you'll see that when you click on a choice the text will be put on a blue background. When you change to another choice the blue background of the previous choice will disappear and the new choice will be placed on a blue background. How do we make more than one choice then? Put your mousecursor on a choice , click on it and move the mousecursor up or down (WHILE holding the mousebutton down!) for more choices.
61
College of Information Technology and Computer Science We can also adjust the size of the textbox. It's done like this:
<form action="mailto:..." method="post"> <select size="10" multiple name="selectionlist"> <option value="choice1">choice 1 <option value="choice2">choice 2 <option value="choice3">choice 3 <option value="choice1">choice 1 </select> </form>
You'll get this:

choice 1 choice 2 choice 3 choice 1
The size="..." attribute defines the number of rows in the list. We can select a choice in advance. The method is very similar to the one we use for the <input type="checkbox" or type="radio"> tag.
<form action="mailto:..." method="post"> <select multiple name="selectionlist"> <option value="choice1">choice 1 <option value="choice2" selected>choice 2 <option value="choice3">choice 3 <option value="choice1">choice 1 </select> </form>
Result: choice 1 You will see that the second choice is already placed on a blue background. The selected attribute will define a choice in advance like checked does with the <input type="checkbox" or type="radio"> tags.
Note: The attributes checked and selected are NOT placed in between quotes!
6.1.3. The <textarea> tag:
62
College of Information Technology and Computer Science This tag allows us to create a textbox which can consist of more than one line.
Note! The end tag </textarea> is REQUIRED! <form action="mailto:..." method="post"> <textarea name="textfield" rows="8" cols="30"> </textarea> </form>
Will be shown as:
In this textfield you can now enter f.e. any comments. Click in the box and enter some text. You will be able to enter more than one line of text.
rows="..." defines the number of rows (horizontally) cols="..." defines the number of columns (vertically)
Ok now, lets create a form that can be sent to me through e-mail directly from this page (if you are online ofcourse). In fact, it would be cool...but don't worry about it if you aren't able to or if you don't want to. This is the form:
Anthony's Survey
First Name: Last Name: E-mail address: Do you have a web page? If yes: How did you find this tutorial? A friend told me By accident
http://
63
A link Searchengine Other specify
Rating for this tutorial? I don't understand a word of it! Poor OK, i learned something Good, very interesting Fantastic!!! Would you recommend this tutorial?
Make your choice
Enter any questions, suggestions, remarks, ...
OK, send!
Can i do it over?
This is the HTML code (except for the CSS):
<form action="mailto:tony@dynamicdeezign.com" enctype="text/plain" method="post"> <input type="hidden" name="subject" value="tutorial"> First Name: <input type="text" name="firstname" size="15"><br> Last Name: <input type="text" name="lastname" size="15"><br> E-mail address: <input type="text" name="e-mail" size="15"><br> Do you have a web page? If yes: <input type="text" name="URL" value="http://" size="20"><br><br> How did you find this tutorial?<br> <input type="checkbox" name="a friend told me">A friend told me<br> <input type="checkbox" name="by accident">By accident<br>
64
<input type="checkbox" name="a link">A link<br> <input type="checkbox" name="searchengine">Searchengine<br> <input type="checkbox" name="other">Other specify <input type="text" name="otherspec" size="15"><br> <br> Rating for this tutorial?<br> <input type="radio" name="1">I don't understand a word of it!<br> <input type="radio" name="2">Poor<br> <input type="radio" name="3">OK, i learned something<br> <input type="radio" name="4">Good, very interesting<br> <input type="radio" name="5">Fantastic!!!<br><br> Would you recommend this tutorial?<br><br> <select name="recommendation"> <option>Make your choice <option>Yes <option>No </select><br><br> <br><br> Enter any questions, suggestions, remarks, ... <textarea name="comments" rows="8" cols="35"> </textarea><br><br><br> <input type="submit" name="send" value="OK, send!"> <input type="reset" name="reset" value="Can i do it over?"> </form>
End of this lesson. Next lesson --> frames.
7. Frames
7.1. The <frameset> and <frame> tags:
Frames, some of us like them, other ones don't like them. I personally like them a lot and it seems more and more people are starting to love frames. Lets start with creating some HTML documents that we will need for building a frames construction. In our example we will create a construction with three frames (two columns and two rows). Create the following:
a folder with the name 'frames' (or a name you like better) we will store 4 HTML documents in this folder: 1. 2. 3. 4. index.html frame1.html frame2.html frame3.html
First we will create the documents "frame1.html, frame2.html and frame3.html". These are simple HTML documents:
65
College of Information Technology and Computer Science frame1.html frame2.html frame3.html
<html> <head> <title> </title> </head> <body>

This is frame 1

This is frame 2

This is frame 3
</body> </html>
</body> </html>
</body> </html>
Save these HTML documents (in your folder called 'frames') as "frame1.html, frame2.html and frame3.html". Now we will create our main document 'index.html'. This is done like this: (the part in red are only my comments, there's no need to type them in):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head> <title> </title> </head> <frameset cols="25%,75%"> <frame src="frame1.html"> <-- contents of column 1 <frameset rows="15%,85%"> <-- create two rows in the second column <frame src="frame2.html"> <-- contents row 1, column 2 <frame src="frame3.html"> <-- contents row 2, column 2 </frameset> <noframes>
Your browser doesn't support frames, click here for ....
</noframes> </frameset> </html>

Save the document in your folder as 'index.html'. There have to be 4 documents in your folder called 'frames' (or the name you chose for it) now. Doubleclick on the document 'index.html' to see your first frames construction. Lets have a closer look to all the tags: Note: we can divide our page into columns and rows:
66
If we want to create a frames construction then we have to start with the <frameset> tag. We can choose cols (columns) and rows. In our example we tell the browser: "Create two columns": --> <frameset cols="25%,75%"> The first column will get 25% of the pages width, the second column will get 75% of the pages width. Note: In our example we use percentages but other values are allowed too:
absolute values: <frameset cols="100,300"> or this value: example: <frameset cols="25%,*"> or <frameset cols="150,*"> The * will get the remaining space. So, if we should see this tag: <frameset cols="25%,*,5%"> then it would mean: Column 1 gets 25% of the pages width, column 3 gets 5% and column 2 will get the remaining part, in this case, 70% because 25%+70%+5%=100%. The * comes in very handy when you want to create complexe frames.
So, we told the browser: 'Create two columns'. Now we tell the browser that the first column has to contain 'frame1.html' by saying: <frameset cols="15%,75%"> --> <frame src="frame1.html"> src means source and tells the browser which document to use. Now that we have two columns and assigned document 'frame1.html' to the first column we will divide the second column into 2 rows. It's done this way: <frameset cols="15%,75%"> <frame src="frame1.html"> --> <frameset rows="15%,85%"> The first row in our second column will get 15% of the space and the second row will get 85% of the space. The only thing we have to do now is tell the browser which documents have to be assigned to these 2 rows: <frameset cols="15%,75%"> <frame src="frame1.html"> <frameset rows="15%,85%"> -> <frame src="frame2.html"> -> <frame src="frame3.html"> The first row of the second column will contain the information of 'frame2.html', the second row of the second column will contain the information of 'frame3.html'.
67
The tag <noframes> can be used (it's optional) as an alternative for a browser that for some kind of reason doesn't support frames. --> <noframes> Contents goes here </noframes>
</noframes> is required when you use the <noframes> tag! Note! There's an end tag for the <frameset> tag --> </frameset> which you HAVE TO use for every <frameset> tag that you use! Be sure to NEST the tags
correctly! Remember?
GOOD: (1-2-3-3-2-1)
<html><head><title></title></head></html>
GOOD: (1-2-3-3-2-4-4-1)
<html><head><title></title></head><body></body></html> WRONG: (1-2-3-1-2-3) <html><head><title></html></head></title> If you don't nest the tags correctly then you will get weird constructions or no constructions at all! Now that we have divided everything nicely we can assign every document to every frame we choose. Isn't that great?! There are several attributes that we can add to the <frame> tag:
frameborder=... This attribute can be used for showing or hiding the borders in a frames construction. Typ (change) the following in your 'index.html' document: --> <frame src="frame1.html" frameborder="0"> (also do this in the other two <frame> tags of our example) and reload (refresh) the page in your browser. You will see that the 'metal' borders have disappeared. If you use frameborder="1" then they will be viewable.
marginwidth=... and marginheight=... These two attributes define the margins in a specified frame. marginwidth=... defines the margin (left and right) between the text and the frame. marginheight=... defines the margin (top and bottom) between the text and the frame. Always use values greater than 1. An example: --> <frame src="frame1.html" marginwidth="15"
marginheight="20">
scrolling="auto/yes/no". This attribute tells the browser wether to use a 'scrolling' mechanism or not. A 'scrolling' mechanism is a scrollbar used for moving through a page. Standard value is 'auto' which means that the browser will determine wether a scrollbar is needed. If you don't want a 'scrolling' mechanism (scrollbar)
68
College of Information Technology and Computer Science then set this value to 'no' An example: --> <frame src="frame1.html" scrolling="no">
noresize. You can use this attribute if you don't want your visitor to be able to change the window's width or height. It's works the same way as on your desktop. If you want to change the size of a folder on your desktop then you can do this by putting your mousecursor on the edge of the folder and wait for arrows to appear. With these arrows you can adjust the size of the folder. Well, it works for frames too. Try it by setting the frameborder=1 attribute in your 'index.html' document. Reload (refresh) the document and move the mousecursor on one of the borders so that you can see the arrow(s). You will be able to resize the frame when you move the arrow(s). If you specify noresize then the visitor won't be able to resize the frames. An example: --> <frame src="frame1.html" scrolling="no" noresize>
name="...". This is an important attribute! If you want a certain document to open in a frame (window) of your choice then the browser need to know which frame you chose. You can do this by giving a name to the frame of your choice. An example: suppose that you have a link in frame1.html and that you want to have the contents opened in frame3.html when someone clicks the link in frame1.html. It's done this way: In our 'index.html' document we type the following (don't forget to save it): --> <frame src="frame3.html" name="frame3"> We will create another small document (save it as 'welcome.html'):

Welcome surfer! This is my web page with 'cool' stuff and ...
</body> </html>
In our 'frame1.html' document we create a link (don't forget to save it): --> <a href="welcome.html" target="frame3">Click here!</a> Reload (refresh) the 'index.html' document in your browser and click on the link 'Click here!'. If you did everything correct the contents of 'welcome.html' will be shown in frame 3. Isn't that 'cool'? We can open every document in whatever frame we want! We only have to use the name="..." attribute in our main document 'index.html' (could be another name too ofcourse) and point to it later on with the target="..." attribute in our link.
You can build simple and complex constructions with frames. Most of the times a simple construction will be sufficient, sometimes a complex construction is needed. Don't make it too hard on yourself. A simple construction will already give you a lot of control over the lay-out of your page. Tony's advice: start with a simple
69
College of Information Technology and Computer Science construction and work your way up to complex constructions (when needed ofcourse) Hmmm, there's also a tag called <iframe> (inline frame tag) but this tag doesn't work universally yet. It will be added when appropriate. Lets go to the next lesson --> interesting tags.
8. Interesting tags.
8.1. The <lang> attribute:
Specifies the used language in a document. An example:
<html lang="fr"> <head> <title> </title> </head> <body>

This is French ...
<p lang="en">
English ...
</body> </html>
This attribute is used for several purposes: to help searchengines with the classifying of web pages, speechcomputers, spelling and grammar research, ... Different language codes (like "fr" for French) can be found on the W3C website.
8.2. The <meta> tag:

Used a lot for ranking web pages 'higher' or 'better' in searchengines.
Notes:
There's NO end tag for the <meta> tag! The <meta> tag is used in between the </title> and the </head> tag.
There are a lot of attributes for the <meta> tag, i will only mention the most important (used):
name="keywords" content="...". This attribute allows you to specify keywords about your page. In the case of this tutorial we could use f.e.:
70
College of Information Technology and Computer Science --> <meta name="keywords" content="tutorial, HTML, html 4.0,
style sheets, web page, ...">

name="description" content="...". Allows you to specify a description about your page. --> <meta name="description" content="Create your own web page
with Anthony's HTML 4+ tutorial. Everything you need for making simple or complex web pages ... ">
name="author" content="...". Specifies the author of the page. --> <meta name="author" content="Anthony">
name="robots" content="index, follow". 'Robots' are mechanisms that index a web address (URL). 'index, follow' means: you can index the web address (URL) plus the following links (pages related to the web address). If you don't want a robot to index your pages you can use 'noindex, nofollow'.
meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-5". Specifies the content and the characterset used in a web page.
meta http-equiv="refresh" content="3,http://www.mypage.com">. This is an interesting tag! In this example the visitor will be taken to http://www.mypage.com after 3 seconds. Very useful if you want to show an openingspage and redirect your visitor to your main page after a few seconds. Or you can use this tag if you have changed your web address (URL) and want to redirect your visitor to the new address.
An example:

My web page
</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-88595"> <meta <name="keywords" content="tutorial, HTML, html 4.0, style sheets, web page, ..."> <meta <name="description" content="Create your own web page with Anthony's HTML 4+ tutorial. Everything you need for making simple or complex web pages ... "> <meta name="robots" content="index, follow"> </head> <body>
Contents goes here
71
</body> </html>
You can use different <meta> tags at the same time as you can see. Don't ask me if your web page will be ranked 'higher' or 'better' by using them. Some searchengines use meta tags to index your pages, others don't. There's just no guarantee that your site will be ranked within the top ten of a searchengine. I personally use some of the <meta> tags, it's free and a small effort to use them.
8.3. The <link> tag:

This tag creates an 'invisible' link and you can only use this tag in the <head> section! I didn't mention this tag in the lesson about links because this could have been a little confusing. The <link> tag points more at a 'relationship' between the link and the document. In this tutorial i've used style elements (CSS) for displaying certain text styles (text color, text size, ...). I made a seperate file (document) that contains all these style elements. This file is called tutorial.css (could have been another name too). These are style elements that i can use in the HTML code itself but i would have to type them over and over again. To save me a lot of time i made a seperate file and created 'a link' to tell the browser where to find these style elements. In the code of every page of this tutorial you will find this line:
<link href="tutorial.css" rel="stylesheet" type="text/css">

href="tutorial.css" tells the browser to 'connect' with the file (document) 'tutorial.css'. Every time the browser needs a style element (CSS) it will know where to find it. rel="stylesheet" specifies the 'relationship' between the document and the link (href), in this case stylesheet. type="text/css" specifies the type that's used (in this case CSS).
My tutorial.css document looks like this: ... body { background:#000000; color:#ffffff } .rood { background:#ffffff; color:#ff0000; } .titel { background:#ffffff; color:#c00000; text-align:center; textdecoration:underline; font-family: 'Comic Sans Ms', Verdana, Arial, serif; font-size: 32px; font-weight:bold } .subtitel { background:#ffffff; color:#01955c; text-align:left; textdecoration:underline; font-family: Verdana, 'Comic Sans Ms', Arial, serif; font-size: 20px; font-weight:normal } ...
Note: A <link> tag like the one mentioned above is used more and more often
because CSS is used more and more in combination with HTML!
Note: There's NO end tag for the <link> tag!

You can also use the <link> tag to tell searchengines (f.e. Altavista) where to look for alternative versions of a document. Suppose that this tutorial also exists in
72
College of Information Technology and Computer Science Dutch. I can tell the searchengine that there's a Dutch version by using a <link> tag. An example:
<link title="De Nederlandstalige versie van Anthony's HTML 4+ cursus" type="text/html" rel="alternate" hreflang="nl" href="http://address of the Dutch version">
title="..." specifies the link's title. type="text/html" specifies the type that's used. (in this case HTML code) rel="alternate" specifies the relationship between the document and the link. (in this case 'alternate') href="..." tells the browser where to look for the document (a web address/URL). hreflang="..." specifies the language used in the document. (in this case 'nl' --> 'Dutch')
8.4. The <base> tag:

This tag makes linking a lot easier. An example:

Our products
</title> <base href="http://www.here.com"> </head> <body> Take a look at our new <a href="../images/computer.gif">computer</a>now! </body> </html>
In our 'head' section (after /title and before /head we create a main link). In our example this main link is called http://www.here.com. That's what the <base> tag does. In the 'body' section we see another link:
<a href="../images/computer.gif">computer</a>
This is called a relative (../) web address (URL). The ../ will take the address http://www.here.com because we specified this in the <base> tag. So:
<a href="../images/computer.gif">computer</a>
EQUALS
<a href="http://www.here.com/images/computer.gif">computer</a>
73
College of Information Technology and Computer Science Great when you have to work with long web addresses (URL's)!
Note: There's NO end tag for the <base> tag!
8.5. The <script> tag:

HTML is not the only 'web' language used. There are a few other ones like CSS, javascript, vbscript, ... Sometimes it's necessary to integrate another web language in an HTML document (that work together well). Suppose that we made a nice clock with javascript (a web language) and that we want to integrate this in our document. We can do that like this:
<html> <head> <title> </title> <script type="text/javascript" src="http://www.here.com/clock.js"> </script> </head> <body> </body> </html>
In this example the <script> has been used in the 'head' section. The browser will retrieve the javascript program from the specified web address, in this case: http://www.here.com You can also use the <script> tag in the 'body' section when it's necessary to write the code in the HTML document itself.
<html> <head> <title> </title> </head> <body> <script type="text/javascript">

Javascript code goes here
</script> </body> </html>

Notice that there's no src attribute because the javascript is written in the document itself.
Note: There's an end tag for the <script> tag --> </script> and you have to use it for every <script> tag!
74
An important note before we end this tutorial! Sometimes it's necessary to use 'seperate' HTML characters (called 'entities'). Some examples: - If you want to create more than one space in your HTML code (f.e. in between 2 words) then this won't work by typing the two words and using the spacebar a couple of times. Try it out! You will see that it will not work. It doesn't matter how much times you press the spacebar, the browser will only show one space! We can solve this by using the following HTML character:
... <body>
make room!
</body> ...
Will be shown as: make room!
The character creates ONE space. - An other example could be the need for a sign. You can create this by using: © - A final example. In this tutorial i had to use the < and the > character (entity) if i didn't want to get the browser confused. If i'd used the 'real' < or > sign in all the examples then the browser would have thought it was real code and would have tried to execute it. But by using the < and the > characters i didn't have that problem. The browser treats it like a simple character. < stands for < > stands for > There are a lot of HTML characters. Some day, you might need one ... Click here for the full characterset.
Well, this is the end of the tutorial! I hope you had as much fun with it as i had while making it. And i hope you learned something from it too ofcourse. Writing your own HTML code is fun and gives you a lot of controle over the web page. Don't hesitate to contact me for any questions, remarks, suggestions, ... that you might have. You can mail me anytime. You can find me on ICQ#24786368 too. And remember, try to have fun in everything you do ...

HTML Tutorial

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Tutorial

Uploaded by

Copyright:

Available Formats

1

College of Information Technology and Computer Science

By Rene B Quimoyog BSCS, BSN, MIS January 2010

Lesson 2: Text (part 1)

2.2. Creating linebreaks and paragraphs

Lesson 3: Text (part 2)

2.5. Text style

font-weight color font-family font-size text-decoration

Lesson 4: Text (part 3)

Lesson 10: Interesting tags

<html> <head> <title> </title> </head>

<html> <head> <title> </title> </head> <body> </body> </html>

<html> <head> <title>lesson 1 </title> </head> <body>

<html> <head> <title>lesson 1 </title> </head> <body bgcolor="#800080" text="#ffffff">

My first web page

<html> <head> <title>lesson 1 </title>

Type the following example in your notepad and save it as background.html

<html> <head> <title>

</head> <body> </body> </html>

<html> <head> <title>

<!-body { background: #color; text: #color }

2. Text (part 1):

line 2 line 3 line 4

line 2line 3line 4

... <body> <div class="center">

</div> </body> ...

<html> <head> <title>

</head> <body> <div class="center">

2.1.2 The <pre> tag:

... <body> <pre>

</pre> </body> ...

2.2. Creating linebreaks and paragrahs

This is line 1 This is line 2

Note: There's no end tag for the <br> tag!

2.2.2. The <p> tag:

... <body> <p>

</p> </body> ...

2.2.3. The <hr> tag:

Note: There's no end tag for the <hr> tag!

<html> <head> <title>

</head> <body> <div class="center">

</pre> </body> </html>

will be shown like this: I love this!

an item an item an item

1. an item 2. an item 3. an item

These tags can be used in combination too. An example: ... <body>

number 1 1. an item 2. an item number 2

GIF types or JPG types are used mostly.

<-- this is a GIF type

<-- this is an animated GIF type

<-- this is a JPG type

I will use the first image:

... <body> <img src="cupido.gif" width=76 height=77 alt="this is cupido"> <br>

<img src="cupido.gif" width=76 height=77 alt="this is cupido">

<img src="cupido.jpg" .... >

My computer My c: (harddisk) My desktop folder: c:\website My desktop images: c:\website\images

My server www.dynamicdeezign.com My internet folder: www.dynamicdeezign.com/website my internet images: www.dynamicdeezign.com/website/images

<img src="dog.gif" ... >

<img src="images\dog.gif" ... >

border="0" (zero) means that the border will not be shown.

forget the # sign!

There's NO end tag for the <area> tag!

--> if you specify f.e. coords="20,10,135,35" you will get this:

There are different ways to open a link in someone's browser.