HTML (Hyper Text Markup Language)

INDEX
INDEX.................................................................................................................................1 1.HTML Introduction..........................................................................................................2 Example of Document Structure..................................................................................3 3.HTML Tags Chart.............................................................................................................4 HTML Tags Chart ...............................................................................................................4 Heading 1 Example .............................................................................................................5 Heading 2 Example .........................................................................................................5 Heading 3 Example .....................................................................................................5 4.HTML Elements.............................................................................................................13 5.HTML Basic Tags...........................................................................................................14 6.HTML Text Formatting..................................................................................................16 7.HTML Character Entries................................................................................................17 8.HTML Links...................................................................................................................21 9.HTML Frames................................................................................................................22 10.HTML Tables................................................................................................................23 11.HTML List....................................................................................................................29 12.HTML Forms and Input................................................................................................31 13.HTML Images...............................................................................................................33 14.HTML Backgrounds.....................................................................................................34 15.HTML Colors................................................................................................................35 16.HTML Quick View.......................................................................................................36 17.HTML Fonts.................................................................................................................38 18.HTML Basic Tags Examples........................................................................................39 This is heading 1................................................................................................................41 This is heading 2............................................................................................................41 This is heading 3........................................................................................................41

Prepared By :- BCARE Computer Education

HTML (Hyper Text Markup Language)

1. HTML Introduction
What is an HTML File?

HTML stands for Hyper Text Markup Language An HTML file is a text file containing small markup tags The markup tags tell the Web browser how to display the page An HTML file must have an htm or html file extension An HTML file can be created using a simple text editor

HTML, or HyperText Markup Language is designed to specify the logical organization of a document, with important hypertext extensions. It is not designed to be the language of a WYSIWYG word processor such as Word or WordPerfect. This choice was made because the same HTML document may be viewed by many different "browsers", of very different abilities. Thus, for example, HTML allows you to mark selections of text as titles or paragraphs, and then leaves the interpretation of these marked elements up to the browser. For example one browser may indent the beginning of a paragraph, while another may only leave a blank line. HTML instructions divide the text of a document into blocks called elements. These can be divided into two broad categories -- those that define how the BODY of the document is to be displayed by the browser, and those that define information `about' the document, such as the title or relationships to other documents. The vocabulary of these elements and a description of the overall design of HTML documents is given in the rest of Section 2. The Last part of the section also describes standard naming schemes for HTML documents and related files. The detailed rules for HTML (the names of the tags/elements, how they can be used) are defined using another language known as the standard generalized markup language, or SGML. SGML is wickedly difficult, and was designed for massive document collections, such as repair manuals for F-16 fighters, or maintenance plans for nuclear submarines. Fortunately, HTML is much simpler! However, SGML has useful features that HTML lacks. For this reason, markup language and software experts have developed a new language, called XML (the extensible markup language), which has most of the most useful features of HTML and SGML. A HTML document is created by using what is called a tag. Tags have starting and ending identifiers to communicate to the browser the starting and ending text that is to be formatted by the tag in question. Most of the tags have an opening and a closing tag. Each Tag is enclosed with the "less than" and "greater than" sign. The closing tag usually looks the same as the opening tag with the exception of the "forward slash" that identifies it is a closing tag. The following are examples of tags: <b> </b> <p> </p> <i> </i>

Prepared By :- BCARE Computer Education

HTML (Hyper Text Markup Language)

The way the HTML homepage looks is directly related to the homepage (web page) browser that is accessing the homepage. The tags tell the browser what needs to be done to a portion of text, or to an image, or to a link. It is up to the homepage browser to understand the tags, and then format the text. Many home/web browsers don't support the full HTML 2.0 and 3.0 tag specifications, and for this reason the web browser may either display the tag as text, or it may ignore the tag, and thus the text wont be formatted the way it was intended it to be formatted. There is really not a whole lot you can do about this because, the problem is with the lack of features the home/web browser has incorporated into it's programming. Internet Educational Programs recommended using the Netscape Browser, or the Microsoft Internet Explorer web browser. These two browsers have been keeping up to date with the latest HTML specifications, including the HTML 3.0 specifications. There are many Home/Web Authoring tools to help you create your home/web pages. Netscapes Navigator Gold 2.01 is probably the easiest to use. If you do not wish to use Netscape Navigator Gold 2.01. I also recommend "Hippie" and "Hot Dog" these two are both excellent HTML editors. You can search your favorite Search Engine to find these HTML editor, or you can simply type the HTML document in using your favorite Word processor, and saving it as a text file.

2. Creating an HTML Page

HTML documents are structured into two parts, the HEAD, and the BODY. Both of these are contained within the HTML element -- this element simply denotes this as an HTML document. The head contains information about the document that is not generally displayed with the document, such as its TITLE. The BODY contains the body of the text, and is where you place the document material to be displayed. Elements allowed inside the HEAD, such as TITLE, are not allowed inside the BODY, and vice versa. Example of Document Structure <HTML> <HEAD> <TITLE> Environmental Change Project </TITLE> </HEAD> <BODY> <h1> Environmental Change Project </h1> Welcome to the home page of the Environmental Change Project. This project is different from other projects with similar names. In our case we actually wish to change the climate. For example, we would like hot beaches in Northern Quebec, and deserts near Chicago. <p>So how will we do this. Well we do the following <ul> <li><A HREF="burn.html">Burn</A> more forests. <li>Destroy the <A HREF="http://who.zoo.do/ozone.html">Ozone</A> layer. <li>Birth more <A HREF="ftp:foo.do.do/cows.gif">cows</a>

Prepared By :- BCARE Computer Education

HTML (Hyper Text Markup Language)

</ul> </BODY> </HTML> A web page is created using a language called, Hypertext Markup Language, better known as HTML Code. You can write your own coding within a plain text editor, such as Note Pad, or use an HTML editor, which will write the code for you. HTML codes, also referred to as HTML tags, are enclosed by the lesser than (<) and greater than (>) brackets and may be written in capital or lower case letters. The opening bracket is followed by an element, which is a browser command, and ends with the closing bracket. <font size=2> An element may also be followed by attributes, which are words describing the properties of the element, and further instruct the browser. <font size=2> Attributes are only contained in the opening HTML tags to the right of the element and are separated by a space and followed by an equal (=) sign. The value follows the equal sign and is enclosed in quotes. <font size=2>

3. HTML Tags Chart HTML Tags Chart

Code Example <!--This can be viewed in the HTML part of a document--> Nothing will show Browser View

ame

ment

hor

<A HREF="http://www.yourdomain.com/">Visit Our Visit Our Site Site</A> <B>Example</B> <BIG>Example</BIG> Example

text)

Example

y of L ument

<BODY>The content of your HTML page</BODY> Contents of your web page The contents of your page<BR>The contents of your page <CENTER>This will center your contents</CENTER> Definition Term Definition of the term Definition Term Definition of the term Definition Term The contents of your web page The contents of your web page This will center your contents

break

er

<DL> <DT>Definition Term nition <DD>Definition of the term ription <DT>Definition Term <DD>Definition of the term </DL> <DL>

nition

Prepared By :- BCARE Computer Education

HTML (Hyper Text Markup Language)

<DT>Definition Term <DD>Definition of the term <DT>Definition Term <DD>Definition of the term </DL> <DL> <DT>Definition Term <DD>Definition of the term <DT>Definition Term <DD>Definition of the term </DL> This is an <EM>Example</EM> of using the emphasis tag <EMBED src="yourfile.mid" width="100%" height="60" align="center"> <EMBED src="yourfile.mid" autostart="true" hidden="false" loop="false"> <noembed><bgsound src="yourfile.mid" loop="1"></noembed> <FONT FACE="Times New Roman">Example</FONT> <FONT FACE="Times New Roman" SIZE="4">Example</FONT> <FONT FACE="Times New Roman" SIZE="+3" COLOR="#FF0000">Example</FONT> <FORM action="mailto:you@yourdomain.com"> Name: <INPUT name="Name" value="" size="10"><BR> Email: <INPUT name="Email" value="" size="10"><BR> <CENTER><INPUT type="submit"></CENTER> </FORM> <H1>Heading 1 Example</H1> Music will begin playing when your page is loaded and will only play one time. be displayed to enable your visitors to stop the music.

Definition of the term Definition Term Definition of the term

nition

Definition Term Definition of the term Definition Term Definition of the term This is an Example of using the emphasis tag

hasis

ed ct

ed ct

Example

Example

Example
Name: Email:
Submit Query

ding 1

Heading 1 Example
Heading 2 Example
Heading 3 Example
Heading 4 Example
Heading 5 Example
Heading 6 Example

ding 2

<H2>Heading 2 Example</H2>

ding 3

<H3>Heading 3 Example</H3> <H4>Heading 4 Example</H4> <H5>Heading 5 Example</H5> <H6>Heading 6 Example</H6>

ding 4

ding 5

ding 6

Prepared By :- BCARE Computer Education

HTML (Hyper Text Markup Language)

ding of <HEAD>Contains elements describing the L document</HEAD> ument <HR>

Nothing will show

zontal

Contents of your web page Contents of your web page Contents of your web page Contents of your web page Contents of your web page Contents of your web page Contents of your web page Contents of your web page Contents of your web page Contents of your web page Contents of your web page Example

zontal

<HR WIDTH="50%" SIZE="3"> <HR WIDTH="50%" SIZE="3" NOSHADE> <HR WIDTH="75%" COLOR="#FF0000" SIZE="4"> <HR WIDTH="25%" COLOR="#6699FF" SIZE="6"> <HTML><HEAD><META><TITLE>Title of your web page</TITLE></HEAD><BODY>HTML web page contents</BODY></HTML> <I>Example</I> <IMG SRC="Earth.gif" WIDTH="41" HEIGHT="41" BORDER="0" ALT="a sentence about your web site"> Example 1: <FORM METHOD=post ACTION="/cgibin/example.cgi"> <INPUT type="text" size="10" maxlength="30"> <INPUT type="Submit" VALUE="Submit"> </FORM> Example 2:

zontal

zontal

zontal

ertext kup uage

ge

Example 1:
Submit

t field

t field

<FORM METHOD=post ACTION="/cgiExample 2: bin/example.cgi"> <INPUT type="text" STYLE="color: #FFFFFF; fontfamily: Verdana; font-weight: bold; font-size: 12px; Submit background-color: #72A4D2;" size="10" maxlength="30"> <INPUT type="Submit" VALUE="Submit"> </FORM> Example 3: <FORM METHOD=post ACTION="/cgibin/example.cgi"> <TABLE BORDER="0" CELLSPACING="0" CELLPADDING="2"><TR><TD BGCOLOR="#8463FF"><INPUT type="text" size="10" MAXLENGTH="30"></TD><TD Example 3:

t field

Prepared By :- BCARE Computer Education

HTML (Hyper Text Markup Language)

BGCOLOR="#8463FF" VALIGN="Middle"> <INPUT type="image" name="submit" src="yourimage.gif"></TD></TR> </TABLE> </FORM> Example 4: <FORM METHOD=post ACTION="/cgibin/example.cgi"> Enter Your Comments:<BR> <TEXTAREA wrap="virtual" name="Comments" rows=3 cols=20 MAXLENGTH=100></TEXTAREA><BR> <INPUT type="Submit" VALUE="Submit"> <INPUT type="Reset" VALUE="Clear"> </FORM> Example 5: <FORM METHOD=post ACTION="/cgibin/example.cgi"> <CENTER> Select an option: <SELECT> <OPTION >option 1 <OPTION SELECTED>option 2 <OPTION>option 3 <OPTION>option 4 <OPTION>option 5 <OPTION>option 6 </SELECT><BR> <INPUT type="Submit" VALUE="Submit"></CENTER> </FORM> Example 6: <FORM METHOD=post ACTION="/cgibin/example.cgi"> Select an option:<BR> <INPUT type="radio" name="option"> Option 1 <INPUT type="radio" name="option" CHECKED> Option 2 <INPUT type="radio" name="option"> Option 3 <BR> <BR> Select an option:<BR> <INPUT type="checkbox" name="selection"> Selection 1 <INPUT type="checkbox" name="selection" CHECKED> Selection 2 <INPUT type="checkbox" name="selection"> Selection 3

Example 4:

t field

Submit

Clear

Example 5: Select an option:

Submit

t field

t field

Example 6: Select an option:

Option 1 Option 2 Option 3

Select an option:

Selection 1 Selection 2 Selection 3

Submit

Prepared By :- BCARE Computer Education

HTML (Hyper Text Markup Language)

<INPUT type="Submit" VALUE="Submit"> </FORM> Example 1: <MENU> <LI type="disc">List item 1 <LI type="circle">List item 2 <LI type="square">List item 3 </MENU> Example 2: <OL type="i"> <LI>List item 1 <LI>List item 2 <LI>List item 3 <LI>List item 4 </OL> Example 2: i. List item 1 ii. List item 2 iii. List item 3 Example 1: (Tip) List item 1 o List item 2 List item 3

tem

iv.

List item 4

Visit our <A Visit our site HREF="http://www.yourdomain.com/">site</A> <MARQUEE bgcolor="#CCCCCC" loop="-1" scrollamount="2" width="100%">example

lling

Marquee</MARQUEE>
<MENU> <LI type="disc">List item 1 <LI type="circle">List item 2 <LI type="square">List item 3 </MENU> <META name="Description" content="Description of your site"> <META name="keywords" content="keywords describing your site"> o

Scroll

List item 1 List item 2 List item 3

Nothing will show

<META HTTP-EQUIV="Refresh" Nothing will show CONTENT="4;URL=http://www.yourdomain.com/"> <META http-equiv="Pragma" content="no-cache"> Nothing will show <META name="rating" content="General"> <META name="ROBOTS" content="ALL"> <META NAME="ROBOTS" content="NOINDEX,FOLLOW"> Nothing will show Nothing will show Nothing will show Example 1: 1. List item 1 2. List item 2 3. List item 3 4. List item 4 Example 2:

red list Example 1: <OL> <LI>List item 1 <LI>List item 2 <LI>List item 3 <LI>List item 4 </OL>

Prepared By :- BCARE Computer Education

HTML (Hyper Text Markup Language)

Example 2: <OL type="a"> <LI>List item 1 <LI>List item 2 <LI>List item 3 <LI>List item 4 </OL> <FORM METHOD=post ACTION="/cgibin/example.cgi"> <CENTER> Select an option: <SELECT> <OPTION>option 1 <OPTION SELECTED>option 2 <OPTION>option 3 <OPTION>option 4 <OPTION>option 5 <OPTION>option 6 </SELECT><BR> </CENTER> </FORM> This is an example displaying the use of the paragraph tag. <P> This will create a line break and a space between lines. Attributes:

a. List item 1 b. List item 2 c. List item 3 d. List item 4

ox on

Select an option:

This is an example displaying the use of the paragraph tag. This will create a line break and a space between lines. Attributes: Example 1: This is an example displaying the use of the paragraph tag.

Example 1:<BR> <BR> <P align="left"> This is an example<BR> displaying the use<BR> of the paragraph tag.<BR> graph <BR> Example 2:<BR> <BR> <P align="right"> This is an example<BR> displaying the use<BR> of the paragraph tag.<BR> <BR> Example 3:<BR> <BR> <P align="center"> This is an example<BR> displaying the use<BR> of the paragraph tag.

o Example 3: This is an example displaying the use of the paragraph tag.

l (text) <SMALL>Example</SMALL> <STRONG>Example</STRONG>

Example

ng hasis

Example

Prepared By :- BCARE Computer Education

HTML (Hyper Text Markup Language)

Example 1: <TABLE BORDER="4" CELLPADDING="2" CELLSPACING="2" WIDTH="100%"> <TR> <TD>Column 1</TD> <TD>Column 2</TD> </TR> </TABLE> Example 2: (Internet Explorer) <TABLE BORDER="2" BORDERCOLOR="#336699" CELLPADDING="2" CELLSPACING="2" WIDTH="100%"> <TR> <TD>Column 1</TD> <TD>Column 2</TD> </TR> </TABLE> Example 3: <TABLE CELLPADDING="2" CELLSPACING="2" WIDTH="100%"> <TR> <TD BGCOLOR="#CCCCCC">Column 1</TD> <TD BGCOLOR="#CCCCCC">Column 2</TD> </TR> <TR> <TD>Row 2</TD> <TD>Row 2</TD> </TR> </TABLE> <TABLE BORDER="2" CELLPADDING="2" CELLSPACING="2" WIDTH="100%"> <TR> <TD>Column 1</TD> <TD>Column 2</TD> </TR> </TABLE> <DIV align="center"><TABLE> <TR> <TH>Column 1</TH> <TH>Column 2</TH> <TH>Column 3</TH> </TR> <TR> <TD>Row 2</TD> <TD>Row 2</TD> <TD>Row 2</TD> </TR> <TR> <TD>Row 3</TD> <TD>Row 3</TD> Example 1: Column 1 Example 2: Column 1 Example 3 Column 1 Row 2 Column 2 Column 2

Column 2 Row 2

e data

Column 1

Column 2

e der

Column 1 Column 2 Column 3 Row 2 Row 2 Row 2 Row 3 Row 3 Row 3 Row 4 Row 4 Row 4

Prepared By :- BCARE Computer Education

10

HTML (Hyper Text Markup Language)

<TD>Row 3</TD> </TR> <TR> <TD>Row 4</TD> <TD>Row 4</TD> <TD>Row 4</TD> </TR> </TABLE> </DIV> <TITLE>Title of your HTML page</TITLE> <TABLE BORDER="2" CELLPADDING="2" CELLSPACING="2" WIDTH="100%"> <TR> <TD>Column 1</TD> <TD>Column 2</TD> </TR> </TABLE> <TT>Example</TT> <U>Example</U> Title of your web page will be viewable in the title bar

ument

e row

Column 1

Column 2

ype

Example Example Example 1: List item 1 List item 2

erline

Example 1:<BR> <BR> <UL> <LI>List item 1 <LI>List item 2 </UL> <BR> dered Example 2:<BR> <UL type="disc"> <LI>List item 1 <LI>List item 2 <UL type="circle"> <LI>List item 3 <LI>List item 4 </UL> </UL>

Example 2: List item 1 List item 2 o List item 3 o List item

Do You Want to Try It?

If you are running Windows, start Notepad. If you are on a Mac, start SimpleText. In OSX start TextEdit and change the following preferences: Open the the "Format" menu and select "Plain text" instead of "Rich text". Then open the "Preferences" window under the "Text Edit" menu and select "Ignore rich text commands in HTML files". Your HTML code will probably not work if you do not change the preferences above! Type in the following text:
<html> <head> <title>Title of page</title> </head>

Prepared By :- BCARE Computer Education

11

HTML (Hyper Text Markup Language)

<body> This is my first homepage. <b>This text is bold</b> </body> </html>

Save the file as "mypage.htm". Start your Internet browser. Select "Open" (or "Open Page") in the File menu of your browser. A dialog box will appear. Select "Browse" (or "Choose File") and locate the HTML file you just created - "mypage.htm" - select it and click "Open". Now you should see an address in the dialog box, for example "C:\MyDocuments\mypage.htm". Click OK, and the browser will display the page.

Example Explained
The first tag in your HTML document is <html>. This tag tells your browser that this is the start of an HTML document. The last tag in your document is </html>. This tag tells your browser that this is the end of the HTML document. The text between the <head> tag and the </head> tag is header information. Header information is not displayed in the browser window. The text between the <title> tags is the title of your document. The title is displayed in your browser's caption. The text between the <body> tags is the text that will be displayed in your browser. The text between the <b> and </b> tags will be displayed in a bold font.

HTM or HTML Extension?

When you save an HTML file, you can use either the .htm or the .html extension. We have used .htm in our examples. It might be a bad habit inherited from the past when some of the commonly used software only allowed three letter extensions. With newer software we think it will be perfectly safe to use .html.

Note on HTML Editors:

You can easily edit HTML files using a WYSIWYG (what you see is what you get) editor like FrontPage or Dreamweaver, instead of writing your markup tags in a plain text file. However, if you want to be a skillful Web developer, we strongly recommend that you use a plain text editor to learn your primer HTML.

Frequently Asked Questions

Q: After I have edited an HTML file, I cannot view the result in my browser. Why? A: Make sure that you have saved the file with a proper name and extension like "c:\mypage.htm". Also make sure that you use the same name when you open the file in your browser. Q: I have tried to edit an HTML file but the changes don't show in the browser. Why? A: The browser caches your pages so it doesn't have to read the same page twice. When you have changed a page, the browser doesn't know that. Use the browser's refresh/reload button to force the browser to read the edited page. Q: What browser should I use? A: You can do all the training with all of the common browsers, like Internet Explorer, Mozilla, Netscape, or Opera. However, some of the examples in our advanced classes require the latest versions of the browsers.

Prepared By :- BCARE Computer Education

12

HTML (Hyper Text Markup Language)

Q: Does my computer have to run Windows? What about a Mac? A: You can do all your training on a non-Windows computer like a Mac. However, some of the examples in our advanced classes require a newer version of Windows, like Windows 98 or Windows 2000.

4. HTML Elements
HTML documents are text files made up of HTML elements.HTML elements are defined using HTML tags.

HTML Tags
HTML tags are used to mark-up HTML elements HTML tags are surrounded by the two characters < and > The surrounding characters are called angle brackets HTML tags normally come in pairs like <b> and </b> The first tag in a pair is the start tag, the second tag is the end tag The text between the start and end tags is the element content HTML tags are not case sensitive, <b> means the same as <B>

HTML Elements
Remember the HTML example from the previous page:

<html> <head> <title>Title of page</title> </head> <body> This is my first homepage. <b>This text is bold</b> </body> </html>
This is an HTML element:

<b>This text is bold</b>

The HTML element starts with a start tag: <b> The content of the HTML element is: This text is bold The HTML element ends with an end tag: </b> The purpose of the <b> tag is to define an HTML element that should be displayed as bold. This is also an HTML element:

<body> This is my first homepage. <b>This text is bold</b> </body>

This HTML element starts with the start tag <body>, and ends with the end tag </body>. The purpose of the <body> tag is to define the HTML element that contains the body of the HTML document.

Why do We Use Lowercase Tags?

We have just said that HTML tags are not case sensitive: <B> means the same as <b>. When you surf the Web, you will notice that most tutorials use uppercase HTML tags in their examples. We always use lowercase tags. Why?

Prepared By :- BCARE Computer Education

13

HTML (Hyper Text Markup Language)

If you want to prepare yourself for the next generations of HTML, you should start using lowercase tags. The World Wide Web Consortium (W3C) recommends lowercase tags in their HTML 4 recommendation, and XHTML (the next generation HTML) demands lowercase tags.

Tag Attributes
Tags can have attributes. Attributes can provide additional information about the HTML elements on your page. This tag defines the body element of your HTML page: <body>. With an added bgcolor attribute, you can tell the browser that the background color of your page should be red, like this: <body bgcolor="red">. This tag defines an HTML table: <table>. With an added border attribute, you can tell the browser that the table should have no borders: <table border="0"> Attributes always come in name/value pairs like this: name="value". Attributes are always added to the start tag of an HTML element.

Quote Styles, "red" or 'red'?

Attribute values should always be enclosed in quotes. Double style quotes are the most common, but single style quotes are also allowed. In some rare situations, like when the attribute value itself contains quotes, it is necessary to use single quotes: name='John "ShotGun" Nelson'

5. HTML Basic Tags

The most important tags in HTML are tags that define headings, paragraphs and line breaks.The best way to learn HTML is to work with examples. We have created a very nice HTML editor for you. With this editor, you can edit the HTML source code if you like, and click on a test button to view the result.

Headings
Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6> defines the smallest heading.
<h1>This <h2>This <h3>This <h4>This <h5>This <h6>This is is is is is is a a a a a a heading</h1> heading</h2> heading</h3> heading</h4> heading</h5> heading</h6>

HTML automatically adds an extra blank line before and after a heading.

Paragraphs

Prepared By :- BCARE Computer Education

14

HTML (Hyper Text Markup Language)

Paragraphs are defined with the <p> tag.
<p>This is a paragraph</p> <p>This is another paragraph</p>
HTML automatically adds an extra blank line before and after a paragraph.

Line Breaks
The <br> tag is used when you want to end a line, but don't want to start a new paragraph. The <br> tag forces a line break wherever you place it.
<p>This <br> is a para<br>graph with line breaks</p>

The <br> tag is an empty tag. It has no closing tag.

Comments in HTML
The comment tag is used to insert a comment in the HTML source code. A comment will be ignored by the browser. You can use comments to explain your code, which can help you when you edit the source code at a later date.
<!-- This is a comment -->
Note that you need an exclamation point after the opening bracket, but not before the closing bracket.

Basic Notes - Useful Tips

When you write HTML text, you can never be sure how the text is displayed in another browser. Some people have large computer displays, some have small. The text will be reformatted every time the user resizes his window. Never try to format the text in your editor by adding empty lines and spaces to the text. HTML will truncate the spaces in your text. Any number of spaces count as one. Some extra information: In HTML a new line counts as one space. Using empty paragraphs <p> to insert blank lines is a bad habit. Use the <br> tag instead. (But don't use the <br> tag to create lists. Wait until you have learned about HTML lists.) You might have noticed that paragraphs can be written without the closing tag </p>. Don't rely on it. The next version of HTML will not allow you to skip ANY closing tags. HTML automatically adds an extra blank line before and after some elements, like before and after a paragraph, and before and after a heading. We use a horizontal rule (the <hr> tag), to separate the sections in our tutorials.

Basic HTML Tags

Tag <html> <body> <h1> to <h6> <p> <br> <hr> <!--> Description Defines an HTML document Defines the document's body Defines header 1 to header 6 Defines a paragraph Inserts a single line break Defines a horizontal rule Defines a comment

Prepared By :- BCARE Computer Education

15

HTML (Hyper Text Markup Language)

6. HTML Text Formatting

HTML defines a lot of elements for formatting output, like bold or italic text.Below are a lot of examples that you can try out yourself:

How to View HTML Source

Have you ever seen a Web page and wondered "Hey! How did do they do that?" To find out, click the VIEW option in your browser's toolbar and select SOURCE or PAGE SOURCE. This will open a window that shows you the HTML code of the page.

Text Formatting Tags

Tag <b> <big> <em> <i> <small> <strong> <sub> <sup> <ins> <del> <s> <strike> <u> Description Defines bold text Defines big text Defines emphasized text Defines italic text Defines small text Defines strong text Defines subscripted text Defines superscripted text Defines inserted text Defines deleted text Deprecated. Use <del> instead Deprecated. Use <del> instead Deprecated. Use styles instead

"Computer Output" Tags

Tag <code> <kbd> <samp> <tt> <var> <pre> <listing> <plaintext> <xmp> Description Defines computer code text Defines keyboard text Defines sample computer code Defines teletype text Defines a variable Defines preformatted text Deprecated. Use <pre> instead Deprecated. Use <pre> instead Deprecated. Use <pre> instead

Citations, Quotations, and Definition Tags

Tag <abbr> <acronym> <address> <bdo> <blockquote> <q> Description Defines an abbreviation Defines an acronym Defines an address element Defines the text direction Defines a long quotation Defines a short quotation

Prepared By :- BCARE Computer Education

16

HTML (Hyper Text Markup Language)

<cite> <dfn> Defines a citation Defines a definition term

7. HTML Character Entries

Some characters like the < character, have a special meaning in HTML, and therefore cannot be used in the text.To display a less than sign (<) in HTML, we have to use a character entity.

Character Entities
Some characters have a special meaning in HTML, like the less than sign (<) that defines the start of an HTML tag. If we want the browser to actually display these characters we must insert character entities in the HTML source. A character entity has three parts: an ampersand (&), an entity name or a # and an entity number, and finally a semicolon (;). To display a less than sign in an HTML document we must write: &lt; or &#60; The advantage of using a name instead of a number is that a name is easier to remember. The disadvantage is that not all browsers support the newest entity names, while the support for entity numbers is very good in almost all browsers. Note that the entities are case sensitive. This example lets you experiment with character entities: Character Entities

Non-breaking Space
The most common character entity in HTML is the non-breaking space. Normally HTML will truncate spaces in your text. If you write 10 spaces in your text HTML will remove 9 of them. To add spaces to your text, use the &nbsp; character entity.

The Most Common Character Entities:

Result < > & " ' Description non-breaking space less than greater than ampersand quotation mark apostrophe Entity Name &nbsp; &lt; &gt; &amp; &quot; &apos; (does not work in IE) Entity Number &#160; &#60; &#62; &#38; &#34; &#39;

Some Other Commonly Used Character Entities:

Result Description cent pound yen section copyright registered trademark Entity Name &cent; &pound; &yen; &sect; &copy; &reg; Entity Number &#162; &#163; &#165; &#167; &#169; &#174;

Prepared By :- BCARE Computer Education

17

HTML (Hyper Text Markup Language)

multiplication division &times; &divide; &#215; &#247;

ASCII Entities with new Entity Names

Result " ' & < > Description quotation mark apostrophe ampersand less-than greater-than Entity Name &quot; &apos; (does not work in IE) &amp; &lt; &gt; Entity Number &#34; &#39; &#38; &#60; &#62;

ISO 8859-1 Symbol Entities

Result Description non-breaking space inverted exclamation mark currency cent pound yen broken vertical bar section spacing diaeresis copyright feminine ordinal indicator angle quotation mark (left) negation soft hyphen registered trademark trademark spacing macron degree plus-or-minus superscript 2 superscript 3 spacing acute micro paragraph middle dot spacing cedilla superscript 1 masculine ordinal indicator angle quotation mark (right) fraction 1/4 fraction 1/2 Entity Name &nbsp; &iexcl; &curren; &cent; &pound; &yen; &brvbar; &sect; &uml; &copy; &ordf; &laquo; &not; &shy; &reg; &trade; &macr; &deg; &plusmn; &sup2; &sup3; &acute; &micro; &para; &middot; &cedil; &sup1; &ordm; &raquo; &frac14; &frac12; Entity Number &#160; &#161; &#164; &#162; &#163; &#165; &#166; &#167; &#168; &#169; &#170; &#171; &#172; &#173; &#174; &#8482; &#175; &#176; &#177; &#178; &#179; &#180; &#181; &#182; &#183; &#184; &#185; &#186; &#187; &#188; &#189;

Prepared By :- BCARE Computer Education

18

HTML (Hyper Text Markup Language)

fraction 3/4 inverted question mark multiplication division &frac34; &iquest; &times; &divide; &#190; &#191; &#215; &#247;

ISO 8859-1 Character Entities

Result Description capital a, grave accent capital a, acute accent capital a, circumflex accent capital a, tilde capital a, umlaut mark capital a, ring capital ae capital c, cedilla capital e, grave accent capital e, acute accent capital e, circumflex accent capital e, umlaut mark capital i, grave accent capital i, acute accent capital i, circumflex accent capital i, umlaut mark capital eth, Icelandic capital n, tilde capital o, grave accent capital o, acute accent capital o, circumflex accent capital o, tilde capital o, umlaut mark capital o, slash capital u, grave accent capital u, acute accent capital u, circumflex accent capital u, umlaut mark capital y, acute accent capital THORN, Icelandic small sharp s, German small a, grave accent small a, acute accent small a, circumflex accent small a, tilde small a, umlaut mark small a, ring small ae small c, cedilla small e, grave accent Entity Name &Agrave; &Aacute; &Acirc; &Atilde; &Auml; &Aring; &AElig; &Ccedil; &Egrave; &Eacute; &Ecirc; &Euml; &Igrave; &Iacute; &Icirc; &Iuml; &ETH; &Ntilde; &Ograve; &Oacute; &Ocirc; &Otilde; &Ouml; &Oslash; &Ugrave; &Uacute; &Ucirc; &Uuml; &Yacute; &THORN; &szlig; &agrave; &aacute; &acirc; &atilde; &auml; &aring; &aelig; &ccedil; &egrave; Entity Number &#192; &#193; &#194; &#195; &#196; &#197; &#198; &#199; &#200; &#201; &#202; &#203; &#204; &#205; &#206; &#207; &#208; &#209; &#210; &#211; &#212; &#213; &#214; &#216; &#217; &#218; &#219; &#220; &#221; &#222; &#223; &#224; &#225; &#226; &#227; &#228; &#229; &#230; &#231; &#232;

Prepared By :- BCARE Computer Education

19

HTML (Hyper Text Markup Language)

small e, acute accent small e, circumflex accent small e, umlaut mark small i, grave accent small i, acute accent small i, circumflex accent small i, umlaut mark small eth, Icelandic small n, tilde small o, grave accent small o, acute accent small o, circumflex accent small o, tilde small o, umlaut mark small o, slash small u, grave accent small u, acute accent small u, circumflex accent small u, umlaut mark small y, acute accent small thorn, Icelandic small y, umlaut mark &eacute; &ecirc; &euml; &igrave; &iacute; &icirc; &iuml; &eth; &ntilde; &ograve; &oacute; &ocirc; &otilde; &ouml; &oslash; &ugrave; &uacute; &ucirc; &uuml; &yacute; &thorn; &yuml; &#233; &#234; &#235; &#236; &#237; &#238; &#239; &#240; &#241; &#242; &#243; &#244; &#245; &#246; &#248; &#249; &#250; &#251; &#252; &#253; &#254; &#255;

Some Other Entities supported by HTML

Result Description capital ligature OE small ligature oe capital S with caron small S with caron capital Y with diaeres modifier letter circumflex accent small tilde en space em space thin space zero width non-joiner zero width joiner left-to-right mark right-to-left mark en dash em dash left single quotation mark right single quotation mark single low-9 quotation mark left double quotation mark right double quotation mark double low-9 quotation mark Entity Name &OElig; &oelig; &Scaron; &scaron; &Yuml; &circ; &tilde; &ensp; &emsp; &thinsp; &zwnj; &zwj; &lrm; &rlm; &ndash; &mdash; &lsquo; &rsquo; &sbquo; &ldquo; &rdquo; &bdquo; Entity Number &#338; &#339; &#352; &#353; &#376; &#710; &#732; &#8194; &#8195; &#8201; &#8204; &#8205; &#8206; &#8207; &#8211; &#8212; &#8216; &#8217; &#8218; &#8220; &#8221; &#8222;

Prepared By :- BCARE Computer Education

20

HTML (Hyper Text Markup Language)

dagger double dagger horizontal ellipsis per mille single left-pointing angle quotation single right-pointing angle quotation euro &dagger; &Dagger; &hellip; &permil; &lsaquo; &rsaquo; &euro; &#8224; &#8225; &#8230; &#8240; &#8249; &#8250; &#8364;

8. HTML Links
HTML uses a hyperlink to link to another document on the Web.

The Anchor Tag and the Href Attribute

HTML uses the <a> (anchor) tag to create a link to another document.

An anchor can point to any resource on the Web: an HTML page, an image, a sound file, a movie, etc. The syntax of creating an anchor:
<a href="url">Text to be displayed</a>

The <a> tag is used to create an anchor to link from, the href attribute is used to address the document to link to, and the words between the open and close of the anchor tag will be displayed as a hyperlink. This anchor defines a link to BCARE Comp. Eduaction :
<a href="http://www.BCARE Comp. Eduaction.com/">Visit BCARE Comp. Eduaction! </a>

The Target Attribute

With the target attribute, you can define where the linked document will be opened. The line below will open the document in a new browser window:
<a href="http://www.BCARE Comp. Eduaction.com/" target="_blank">Visit BCARE Comp. Eduaction!</a>

The Anchor Tag and the Name Attribute

The name attribute is used to create a named anchor. When using named anchors we can create links that can jump directly into a specific section on a page, instead of letting the user scroll around to find what he/she is looking for. Below is the syntax of a named anchor:
<a name="label">Text to be displayed</a>

The name attribute is used to create a named anchor. The name of the anchor can be any text you care to use. The line below defines a named anchor:
<a name="tips">Useful Tips Section</a>

You should notice that a named anchor is not displayed in a special way. To link directly to the "tips" section, add a # sign and the name of the anchor to the end of a URL, like this:
<a href="http://www.BCARE Comp. Eduaction.com/html_links.asp#tips">

Prepared By :- BCARE Computer Education

21

HTML (Hyper Text Markup Language)

Jump to the Useful Tips Section</a>
A hyperlink to the Useful Tips Section from WITHIN the file "html_links.asp" will look like this:

<a href="#tips">Jump to the Useful Tips Section</a>

Link Tags
Tag <a> Description Defines an anchor

9. HTML Frames
With frames, you can display more than one Web page in the same browser window. Frames allow you to divide the page into several rectangular areas and to display a separate document in each rectangle. Each of those rectangles is called a "frame". Frames are very popular because they are one of the few ways to keep part of the page stationary while other parts change. Frames are also one of the most controversial uses of HTML, because of the way the frames concept was designed, and because many web framed web sites are poorly implemented. We start off this section with a tutorial on creating frames. We'll start with a simple set of frames, move into more advanced frames pages, and then show some special techniques for using frames.

Frames
With frames, you can display more than one HTML document in the same browser window. Each HTML document is called a frame, and each frame is independent of the others. The disadvantages of using frames are: The web developer must keep track of more HTML documents It is difficult to print the entire page

The Frameset Tag

The <frameset> tag defines how to divide the window into frames Each frameset defines a set of rows or columns The values of the rows/columns indicate the amount of screen area each row/column will occupy

The Frame Tag

The <frame> tag defines what HTML document to put into each frame

In the example below we have a frameset with two columns. The first column is set to 25% of the width of the browser window. The second column is set to 75% of the width of the browser window. The HTML document "frame_a.htm" is put into the first column,
and the HTML document "frame_b.htm" is put into the second column:

<frameset cols="25%,75%">

Prepared By :- BCARE Computer Education

22

HTML (Hyper Text Markup Language)

<frame src="frame_a.htm"> <frame src="frame_b.htm"> </frameset>

Basic Notes - Useful Tips

If a frame has visible borders, the user can resize it by dragging the border. To prevent a user from doing this, you can add noresize="noresize" to the <frame> tag. Add the <noframes> tag for browsers that do not support frames. Important: You cannot use the <body></body> tags together with the <frameset></frameset> tags! However, if you add a <noframes> tag containing some text for browsers that do not support frames, you will have to enclose the text in <body></body> tags! See how it is done in the first example below.

Frame Tags
Tag <frameset> <frame> <noframes> <iframe> Description Defines a set of frames Defines a sub window (a frame) Defines a noframe section for browsers that do not handle frames Defines an inline sub window (frame)

10.
Tables

HTML Tables

With HTML you can create tables.

Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). The letters td stands for "table data," which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.
<table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
How it looks in a browser: row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2

Tables and the Border Attribute

Prepared By :- BCARE Computer Education

23

HTML (Hyper Text Markup Language)

If you do not specify a border attribute the table will be displayed without any borders. Sometimes this can be useful, but most of the time, you want the borders to show.
To display a table with borders, you will have to use the border attribute:

<table border="1"> <tr> <td>Row 1, cell 1</td> <td>Row 1, cell 2</td> </tr> </table>

Headings in a Table
Headings in a table are defined with the <th> tag.

<table border="1"> <tr> <th>Heading</th> <th>Another Heading</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
How it looks in a browser: Heading Another Heading row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2

Empty Cells in a Table

Table cells with no content are not displayed very well in most browsers.

<table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td></td> </tr> </table>
How it looks in a browser: row 1, cell 1 row 1, cell 2 row 2, cell 1

Note that the borders around the empty table cell are missing (NB! Mozilla Firefox displays the border). To avoid this, add a non-breaking space (&nbsp;) to empty data cells, to make the borders visible:

Prepared By :- BCARE Computer Education

24

HTML (Hyper Text Markup Language)

<table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>&nbsp;</td> </tr> </table>
How it looks in a browser: row 1, cell 1 row 1, cell 2 row 2, cell 1

Basic Notes - Useful Tips

The <thead>,<tbody> and <tfoot> elements are seldom used, because of bad browser support. Expect this to change in future versions of XHTML. If you have Internet Explorer 5.0 or newer, you can view a working example in our XML tutorial.

Table Tags
Tag <table> <th> <tr> <td> <caption> <colgroup> <col> <thead> <tbody> <tfoot> Description Defines a table Defines a table header Defines a table row Defines a table cell Defines a table caption Defines groups of table columns Defines the attribute values for one or more columns in a table Defines a table head Defines a table body Defines a table footer

Let's begin with a simple and common use for tables: an office phone list. Suppose we have four people whose names we want on the list. The data could be arranged in a table like this:

<TABLE> <TR> <TD>Raha Mutisya</TD> <TR> <TD>Shalom Buraka</TD> <TR> <TD>Hallie Curry</TD> <TR> <TD>Shari Silberglitt</TD> </TABLE>

<TD>1493</TD> <TD>3829</TD> <TD>8372</TD> <TD>4827</TD>

</TR> </TR> </TR> </TR>

Which gives us this table: Raha Mutisya 1493 Shalom Buraka 3829 Hallie Curry 8372 Shari Silberglitt 4827 This table uses the basic three tags all tables must have: <TABLE ...> <TABLE ...> creates the table. Most of the overall properties of the table are defined here, such as if it has borders and what is the table's background color.

Prepared By :- BCARE Computer Education

25

HTML (Hyper Text Markup Language)

<TR ...> <TR ...> (Table Row) defines each row of the table. <TD ...> <TD ...> (Table Data) defines each cell of the table. The first modification we'll make to this little table is to add borders. Borders will help us see how the table is laid out. It's a good idea when designing a table to add borders during the time you design the table, even if you remove them before making the table public.

<TABLE BORDER=2> <TR> <TD>Raha Mutisya</TD> <TR> <TD>Shalom Buraka</TD> <TR> <TD>Hallie Curry</TD> <TR> <TD>Shari Silberglitt</TD> </TABLE>
which gives us Raha Mutisya Hallie Curry 1493 8372 Shalom Buraka 3829 Shari Silberglitt 4827

<TD>1493</TD> <TD>3829</TD> <TD>8372</TD> <TD>4827</TD>

</TR> </TR> </TR> </TR>

Headers
In many table situations you'll find that you want to give a column or row a "title". In our table example, we might want to indicate that the columns are for names and telephone extensions. To do this we'll add two more cells at the top of the table using the <TH ...> (Table Header) tag:

<TABLE BORDER=2> <TR> <TH>Name</TH> </TR> <TR> <TD>Raha Mutisya</TD> <TR> <TD>Shalom Buraka</TD> <TR> <TD>Hallie Curry</TD> <TR> <TD>Shari Silberglitt</TD> </TABLE>
which gives us Name Raha Mutisya Hallie Curry Extension 1493 8372

<TH>Extension</TH> <TD>1493</TD> <TD>3829</TD> <TD>8372</TD> <TD>4827</TD> </TR> </TR> </TR> </TR>

Shalom Buraka 3829 Shari Silberglitt 4827 <TH ...> can be used to create headers for either rows or columns, or both.

<TABLE BORDER=2> <TR> <TD>&nbsp;</TD> <TH>10 am - noon</TH> <TH>noon - 2 pm</TH>

Prepared By :- BCARE Computer Education 26

HTML (Hyper Text Markup Language)

<TH>2 pm - 4 pm</TH> </TR> <TR> <TH>Monday</TH> <TD>Home Ec</TD> <TD>Math</TD> <TD>Geography</TD> <TR> <TH>Wednesday</TH> <TD>History</TD> <TD>Social Studies</TD> <TD>P.E.</TD> <TR> <TH>Friday</TH> <TD>Music</TD> <TD>Peace Studies</TD> <TD>Sleep</TD> </TABLE>
creates this table which uses <TH ...> to head both rows and columns: 10 am - noon noon - 2 pm 2 pm - 4 pm Monday Friday Home Ec Music Math Geography Wednesday History Social Studies P.E. Peace Studies Sleep

COLSPAN and ROWSPAN

Table cells can span across more than one column or row. The attributes COLSPAN ("how many across") and ROWSPAN ("how many down") indicate how many columns or rows a cell should take up. For example, we might want to create header cells for each department in our table of names and phone numbers. In this table, the header cells in the first and fifth rows span across two columns to indicate the department for each group of names.

<TABLE BORDER=2 CELLPADDING=4> <TR> <TH COLSPAN=2>Production</TH> </TR> <TR> <TD>Raha Mutisya</TD> <TD>1493</TD> <TR> <TD>Shalom Buraka</TD> <TD>3829</TD> <TR> <TD>Brandy Davis</TD> <TD>0283</TD> <TR> <TH COLSPAN=2>Sales</TH> </TR> <TR> <TD>Claire Horne</TD> <TD>4827</TD> <TR> <TD>Bruce Eckel</TD> <TD>7246</TD> <TR> <TD>Danny Zeman</TD> <TD>5689</TD> </TABLE>

</TR> </TR> </TR> </TR> </TR> </TR>

Prepared By :- BCARE Computer Education

27

HTML (Hyper Text Markup Language)

which gives us: Production Raha Mutisya 1493

Shalom Buraka 3829 Brandy Davis Sales Claire Horne Bruce Eckel Danny Zeman 4827 7246 5689 0283

It often happens with multiple-column cells that a little color helps to set off the headers, giving the table a more visually organized look. Let's add some color to the headers using BGCOLOR.

<TABLE BORDER=2 CELLPADDING=4> <TR> <TH COLSPAN=2 BGCOLOR="#99CCFF">Production</TH> </TR> <TR> <TD>Raha Mutisya</TD> <TD>1493</TD> </TR> <TR> <TD>Shalom Buraka</TD> <TD>3829</TD> </TR> <TR> <TD>Brandy Davis</TD> <TD>0283</TD> </TR> <TR> <TH COLSPAN=2 BGCOLOR="#99CCFF">Sales</TH> </TR> <TR> <TD>Claire Horne</TD> <TD>4827</TD> </TR> <TR> <TD>Bruce Eckel</TD> <TD>7246</TD> </TR> <TR> <TD>Danny Zeman</TD> <TD>5689</TD> </TR> </TABLE>
which gives this table: Production Raha Mutisya 1493

Shalom Buraka 3829 Brandy Davis Sales Claire Horne Bruce Eckel Danny Zeman 4827 7246 5689 0283

ROWSPAN sets how many rows a cell spans. ROWSPAN can get a little confusing
because it requires you to think through how the cell affects the rows after the row it starts in. It's particularly useful in this situation to add borders to the table during the design process, even if the table won't ultimately use borders. This table code creates two header cells which span three rows each:

Prepared By :- BCARE Computer Education

28

HTML (Hyper Text Markup Language)

<TR>

<TH ROWSPAN=3 BGCOLOR="#99CCFF">Production</TH> <TD>Raha Mutisya</TD> <TD>1493</TD> </TR> <TD>Shalom Buraka</TD> <TD>3829</TD> </TR> <TD>Brandy Davis</TD> <TD>0283</TD> </TR>

<TR> <TR> <TR>

<TH ROWSPAN=3 BGCOLOR="#99CCFF">Sales</TH> <TD>Claire Horne</TD> <TD>4827</TD> </TR> <TD>Bruce Eckel</TD> <TD>7246</TD> </TR>

<TR> <TR>

<TD>Danny Zeman</TD> <TD>5689</TD> </TR> </TABLE>

which creates Raha Mutisya 1493

Production Shalom Buraka 3829 Brandy Davis Claire Horne Sales Bruce Eckel Danny Zeman 0283 4827 7246 5689

Note that in the two rows after each header, the first cell in the row ends up in the second column because the first column is taken up by the multi-column cell.

11.

HTML List

HTML supports ordered, unordered and definition lists.

Unordered Lists
An unordered list is a list of items. The list items are marked with bullets (typically small black circles).

Prepared By :- BCARE Computer Education

29

HTML (Hyper Text Markup Language) An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
<ul> <li>Coffee</li> <li>Milk</li> </ul>
Here is how it looks in a browser: Coffee

Milk

Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.

Ordered Lists
An ordered list is also a list of items. The list items are marked with numbers. An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
<ol> <li>Coffee</li> <li>Milk</li> </ol>
Here is how it looks in a browser: 1. Coffee 2. Milk Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.

Definition Lists
A definition list is not a list of items. This is a list of terms and explanation of the terms. A definition list starts with the <dl> tag. Each definition-list term starts with the <dt> tag. Each definition-list definition starts with the <dd> tag.
<dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl>
Here is how it looks in a browser: Coffee Black hot drink Milk White cold drink Inside a definition-list definition (the <dd> tag) you can put paragraphs, line breaks, images, links, other lists, etc.

List Tags
Prepared By :- BCARE Computer Education 30

HTML (Hyper Text Markup Language)

Tag <ol> <ul> <li> <dl> <dt> <dd> <dir> <menu>

Description Defines an ordered list Defines an unordered list Defines a list item Defines a definition list Defines a definition term Defines a definition description Deprecated. Use <ul> instead Deprecated. Use <ul> instead

12.
Forms

HTML Forms and Input

HTML Forms are used to select different kinds of user input.

A form is an area that can contain form elements. Form elements are elements that allow the user to enter information (like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.) in a form. A form is defined with the <form> tag.
<form> <input> <input> </form>

Input
The most used form tag is the <input> tag. The type of input is specified with the type attribute. The most commonly used input types are explained below. Text Fields
Text fields are used when you want the user to type letters, numbers, etc. in a form.

<form> First name: <input type="text" name="firstname"> <br> Last name: <input type="text" name="lastname"> </form>
How it looks in a browser: First name: Last name:

Prepared By :- BCARE Computer Education

31

HTML (Hyper Text Markup Language) Note that the form itself is not visible. Also note that in most browsers, the width of the text field is 20 characters by default.

Radio Buttons
Radio Buttons are used when you want the user to select one of a limited number of choices.

<form> <input type="radio" name="sex" value="male"> Male <br> <input type="radio" name="sex" value="female"> Female </form>

How it looks in a browser: Male Female Note that only one option can be chosen.

Checkboxes
Checkboxes are used when you want the user to select one or more options of a limited number of choices.

<form> <input type="checkbox" name="bike"> I have a bike <br> <input type="checkbox" name="car"> I have a car </form>
How it looks in a browser: I have a bike I have a car

The Form's Action Attribute and the Submit Button

When the user clicks on the "Submit" button, the content of the form is sent to another file. The form's action attribute defines the name of the file to send the content to. The file defined in the action attribute usually does something with the received input.
<form name="input" action="html_form_action.asp" method="get"> Username: <input type="text" name="user"> <input type="submit" value="Submit"> </form>
How it looks in a browser: Username:
Submit

Prepared By :- BCARE Computer Education

32

HTML (Hyper Text Markup Language) If you type some characters in the text field above, and click the "Submit" button, you will send your input to a page called "html_form_action.asp". That page will show you the received input.

Form Tags
Tag <form> <input> <textarea> <label> <fieldset> <legend> <select> <optgroup> <option> <button> <isindex> Description Defines a form for user input Defines an input field Defines a text-area (a multi-line text input control) Defines a label to a control Defines a fieldset Defines a caption for a fieldset Defines a selectable list (a drop-down box) Defines an option group Defines an option in the drop-down box Defines a push button Deprecated. Use <input> instead

13.

HTML Images

With HTML you can display images in a document.

The Image Tag and the Src Attribute

In HTML, images are defined with the <img> tag. The <img> tag is empty, which means that it contains attributes only and it has no closing tag. To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display on your page. The syntax of defining an image:
<img src="url">

The URL points to the location where the image is stored. An image named "boat.gif" located in the directory "images" on "www.BCARE Comp. Eduaction.com" has the URL: http://www.BCARE Comp. Eduaction.com/images/boat.gif. The browser puts the image where the image tag occurs in the document. If you put an image tag between two paragraphs, the browser shows the first paragraph, then the image, and then the second paragraph.

The Alt Attribute

The alt attribute is used to define an "alternate text" for an image. The value of the alt attribute is an author-defined text: Prepared By :- BCARE Computer Education 33

HTML (Hyper Text Markup Language)

<img src="boat.gif" alt="Big Boat">

The "alt" attribute tells the reader what he or she is missing on a page if the browser can't load images. The browser will then display the alternate text instead of the image. It is a good practice to include the "alt" attribute for each image on a page, to improve the display and usefulness of your document for people who have text-only browsers.

Basic Notes - Useful Tips

If an HTML file contains ten images - eleven files are required to display the page right. Loading images take time, so my best advice is: Use images carefully.

Image Tags
Tag <img> <map> <area> Description Defines an image Defines an image map Defines a clickable area inside an image map

14.

HTML Backgrounds

A good background can make a Web site look really great.

Backgrounds
The <body> tag has two attributes where you can backgrounds. The background can be a color or an image. specify

Bgcolor
The bgcolor attribute specifies a background-color for an HTML page. The value of this attribute can be a hexadecimal number, an RGB value, or a color name:
<body bgcolor="#000000"> <body bgcolor="rgb(0,0,0)"> <body bgcolor="black">
The lines above all set the background-color to black.

Background

The background attribute specifies a background-image for an HTML page. The value of this attribute is the URL of the image you want to use. If the image is smaller than the browser window, the image will repeat itself until it fills the entire browser window.
<body background="clouds.gif">

Prepared By :- BCARE Computer Education

34

HTML (Hyper Text Markup Language)

<body background="http://www.BCARE Comp. Eduaction.com/clouds.gif">

The URL can be relative (as in the first line above) or absolute (as in the second line above). Note: If you want to use a background image, you should keep in mind: Will the background image increase the loading time too much? Will the background image look good with other images on the page? Will the background image look good with the text colors on the page? Will the background image look good when it is repeated on the page? Will the background image take away the focus from the text?

Basic Notes - Useful Tips

The bgcolor, background, and the text attributes in the <body> tag are deprecated in the latest versions of HTML (HTML 4 and XHTML). The World Wide Web Consortium (W3C) has removed these attributes from its recommendations. Style sheets (CSS) should be used instead (to define the layout and display properties of HTML elements).

15.

HTML Colors

Colors are displayed combining RED, GREEN, and BLUE light sources.

Color Values

Colors are defined using a hexadecimal notation for the combination of Red, Green, and Blue color values (RGB). The lowest value that can be given to one light source is 0 (hex #00). The highest value is 255 (hex #FF). This table shows the result of combining Red, Green, and Blue light sources:.
Color Color HEX #000000 #FF0000 #00FF00 #0000FF #FFFF00 #00FFFF #FF00FF #C0C0C0 #FFFFFF Color RGB rgb(0,0,0) rgb(255,0,0) rgb(0,255,0) rgb(0,0,255) rgb(255,255,0) rgb(0,255,255) rgb(255,0,255) rgb(192,192,192) rgb(255,255,255)

Prepared By :- BCARE Computer Education

35

HTML (Hyper Text Markup Language)

Color Names
A collection of 147 color names are supported by popular browsers.

Web Safe Colors

A few years ago, when most computers supported only 256 different colors, a list of 216 Web Safe Colors was suggested as a Web standard. We are not sure how important this is now, since most computers today have the ability to display millions of different colors, but the choice is left to you.

16.

HTML Quick View

HTML Quick List from BCARE Comp. Eduaction. Print it, fold it, and put it in your pocket.

HTML Basic Document

<html> <head> <title>Document name goes here</title> </head> <body> Visible text goes here </body> </html>

Heading Elements
<h1>Largest Heading</h1> <h2> . . . </h2> <h3> . . . </h3> <h4> . . . </h4> <h5> . . . </h5> <h6>Smallest Heading</h6>

Text Elements
<p>This is a paragraph</p> <br> (line break) <hr> (horizontal rule) <pre>This text is preformatted</pre>

Logical Styles
<em>This text is emphasized</em> <strong>This text is strong</strong> <code>This is some computer code</code>

Physical Styles

<b>This text is bold</b> <i>This text is italic</i>

Links, Anchors, and Image Elements

<a href="http://www.example.com/">This is a Link</a> <a href="http://www.example.com/"><img src="URL" alt="Alternate Text"></a> <a href="mailto:webmaster@example.com">Send e-mail</a> A named anchor: <a name="tips">Useful Tips Section</a> <a href="#tips">Jump to the Useful Tips Section</a>

Prepared By :- BCARE Computer Education

36

HTML (Hyper Text Markup Language)

Unordered list
<ul> <li>First item</li> <li>Next item</li> </ul>

Ordered list
<ol> <li>First item</li> <li>Next item</li> </ol>

Definition list
<dl> <dt>First term</dt> <dd>Definition</dd> <dt>Next term</dt> <dd>Definition</dd> </dl>

Tables
<table border="1"> <tr> <th>someheader</th> <th>someheader</th> </tr> <tr> <td>sometext</td> <td>sometext</td> </tr> </table>

Frames
<frameset cols="25%,75%"> <frame src="page1.htm"> <frame src="page2.htm"> </frameset>

Forms
<form action="http://www.example.com/test.asp" method="post/get"> <input type="text" name="lastname" value="Nixon" size="30" maxlength="50"> <input type="password"> <input type="checkbox" checked="checked"> <input type="radio" checked="checked"> <input type="submit"> <input type="reset"> <input type="hidden"> <select> <option>Apples <option selected>Bananas <option>Cherries </select> <textarea name="Comment" rows="60" cols="20"></textarea> </form>

Entities

&lt; is the same as < &gt; is the same as > &#169; is the same as

Other Elements
<!-- This is a comment -->

Prepared By :- BCARE Computer Education

37

HTML (Hyper Text Markup Language)

<blockquote> Text quoted from some source. </blockquote> <address> Address 1<br> Address 2<br> City<br> </address>

17.

HTML Fonts

The <font> tag in HTML is deprecated. It is supposed to be removed in a future version of HTML.Even if a lot of people are using it, you should try to avoid it, and use styles instead.

The HTML <font> Tag

With HTML code like this, you can specify both the size and the type of the browser output :

<p> <font size="2" face="Verdana"> This is a paragraph. </font> </p> <p> <font size="3" face="Times"> This is another paragraph. </font> </p>

Font Attributes
Attribute size="number" size="+number" size="-number" face="face-name" color="color-value" color="color-name" Example size="2" size="+1" size="-1" face="Times" color="#eeff00" color="red" Purpose Defines the font size Increases the font size Decreases the font size Defines the font-name Defines the font color Defines the font color

The <font> Tag Should NOT be Used

The <font> tag is deprecated in the latest versions of HTML (HTML 4 and XHTML).

Prepared By :- BCARE Computer Education

38

HTML (Hyper Text Markup Language) The World Wide Web Consortium (W3C) has removed the <font> tag from its recommendations. In future versions of HTML, style sheets (CSS) will be used to define the layout and display properties of HTML elements.

18.

HTML Basic Tags Examples

1. <html> <body> The content of the body element is displayed in your browser. </body> </html> Output: The content of the body element is displayed in your browser. 2. <html> <body> <p>This is a paragraph.</p> <p>This is a paragraph.</p> <p>This is a paragraph.</p> <p>Paragraph elements are defined by the p tag.</p> </body> </html> Output: This is a paragraph. This is a paragraph. This is a paragraph. Paragraph elements are defined by the p tag. 3. <html> <body> <p> This paragraph contains a lot of lines in the source code, but the browser ignores it. </p>

Prepared By :- BCARE Computer Education

39

HTML (Hyper Text Markup Language)

<p> This paragraph contains a lot of spaces in the source code, but the browser ignores it. </p> <p> The number of lines in a paragraph depends on the size of your browser window. If you resize the browser window, the number of lines in this paragraph will change. </p> </body> </html> Output: This paragraph contains a lot of lines in the source code, but the browser ignores it. This paragraph contains a lot of spaces in the source code, but the browser ignores it. The number of lines in a paragraph depends on the size of your browser window. If you resize the browser window, the number of lines in this paragraph will change. 4. <html> <body> <p> To break<br>lines<br>in a<br>paragraph,<br>use the br tag. </p> </body> </html> Output: To break lines in a paragraph, use the br tag.

Prepared By :- BCARE Computer Education

40

HTML (Hyper Text Markup Language)

5. <html> <body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6> <p>Use heading tags only for headings. Don't use them just to make something bold. Use other tags for that.</p> </body> </html> Output: -

This is heading 1
This is heading 2
This is heading 3
This is heading 4
This is heading 5
This is heading 6

Use heading tags only for headings. Don't use them just to make something bold. Use other tags for that.

6. <html> <body> <h1 align="center">This is heading 1</h1> <p>The heading above is aligned to the center of this page. The heading above is aligned to the center of this page. The heading above is aligned to the center of this page.</p> </body> </html> Prepared By :- BCARE Computer Education 41

HTML (Hyper Text Markup Language)

Output: -

This is heading 1
The heading above is aligned to the center of this page. The heading above is aligned to the center of this page. The heading above is aligned to the center of this page 7. <html> <body> <p>The hr tag defines a horizontal rule:</p> <hr> <p>This is a paragraph</p> <hr> <p>This is a paragraph</p> <hr> <p>This is a paragraph</p> </body> </html> Output: The hr tag defines a horizontal rule: This is a paragraph This is a paragraph 8. <html> <body> <b>This text is bold</b> <br> <strong> This text is strong </strong> <br> <big> This text is big </big> <br>

Prepared By :- BCARE Computer Education

42

HTML (Hyper Text Markup Language) <em> This text is emphasized </em> <br> <i> This text is italic </i> <br> <small> This text is small </small> <br> This text contains _subscript <br> This text contains ^superscript </body> </html> Output:This text is bold This text is strong

This text is big

This text is emphasized This text is italic
This text is small

This text contains subscript This text contains superscritpt. 9. <html> <body> <p> <a href="lastpage.htm"> This text</a> is a link to a page on this Web site. </p> <p> <a href="http://www.microsoft.com/"> This text</a> is a link to a page on

Prepared By :- BCARE Computer Education

43

HTML (Hyper Text Markup Language) the World Wide Web. </p> </body> </html> Output:This text is a link to a page on this Web site. This text is a link to a page on the World Wide Web.

10. <html> <body> <a href="lastpage.htm" target="_blank">Last Page</a> <p> If you set the target attribute of a link to "_blank", the link will open in a new window. </p> </body> </html> Output: Last Page If you set the target attribute of a link to "_blank", the link will open in a new window. 10.
This code ... creates this page (here's the real thing)

Prepared By :- BCARE Computer Education

44

HTML (Hyper Text Markup Language)

<HTML> <HEAD> <TITLE>A Basic Example of Frames</TITLE> </HEAD> <FRAMESET ROWS="75%, *" COLS="*, 40%"> <FRAME SRC="framea.html"> <FRAME SRC="frameb.html"> <FRAME SRC="framec.html"> <FRAME SRC="framed.html"> <NOFRAMES> <H1>No Frames? No Problem! </H1> Take a look at our <A HREF="basic.noframes.html">noframes</A> version. </NOFRAMES> </FRAMESET> </HTML>

Here's a line-by-line explanation of each piece of code for the frames: <FRAMESET Start the "table of documents". ROWS="75%, *" The table should have two rows. The first row should take up 75% of the height of the page, the second should take up the rest. COLS="*, 40%"> The table should also have two columns. The second column should take up 40% of the width of the page, the first column should take up the rest. <FRAME SRC="framea.html"> <FRAME SRC="frameb.html"> <FRAME SRC="framec.html"> <FRAME SRC="framed.html"> Put the four files into the frames. <NOFRAMES> ... </NOFRAMES> Every framed page should have a no-frames alternative. The <NOFRAMES> content should go inside the outermost <FRAMESET ...> tag, usually just before the last

Prepared By :- BCARE Computer Education

45

HTML (Hyper Text Markup Language)

</FRAMESET>. The most efficicent method for no-frames content is to link to a page which is specifically designed for no-frames. </FRAMESET> End the frameset. There are several other aspects of frames to note from this example: <FRAMESET ...> is used instead of the <BODY ...> tag. The frameset file has no content which appears on the page, so it has no need for <BODY ...>, which designates the content of the page. In fact, if you use <BODY ...> (except inside <NOFRAMES>), the frames will not appear. Tags in <HEAD>, including <TITLE>, still have their intended effects. Rows and columns are described by a list of widths or heights. For example COLS="25%, *, 40%" says that there will be three columns. The first column takes up 25% of the width of the page, the third column takes up 40% of the width of the page, and the asterisk ("*") means "whatever is left over". See COLS and ROWS for more details. You do not explicitly designate the start and ending of each row. The browser keeps adding frames until it reaches the number designated by COLS, then starts another row.

11.

<HTML> <HEAD> <TITLE>Great Recipes</TITLE> </HEAD> <FRAMESET ROWS="15%,*"> <FRAME SRC="recipetitlebar.html" NAME=TITLE SCROLLING=NO> <FRAMESET COLS="20%,*"> <FRAME SRC="recipesidebar.html" NAME=SIDEBAR> <FRAME SRC="recipes.html" NAME=RECIPES> </FRAMESET> <NOFRAMES> <H1>Great Recipes</H1> No frames? No Problem! Take a look at our <A HREF="recipes.html">no-frames</A> version. </NOFRAMES> </FRAMESET> </HTML>
The first <FRAMESET ...> tag says "this frameset will have two rows" (and, implicitly, only one column, since COLS was left out). The first <FRAME ...> tag puts a document in the first frame. The second frame is filled in not by a document but by another frameset. The second <FRAMESET ...> is creating a "table within a table", or, to be more correct, a frameset within a

Prepared By :- BCARE Computer Education

46

HTML (Hyper Text Markup Language)

frameset.

12.

Targeting Frames
Each frame is given a name using <FRAME NAME="...">. These names uniquely identify each frame. Using these names, links in other frames can tell the browser which frame the link targets. For example, this code creates a framed page, naming the frames TITLE, SIDEBAR, and MAIN:

<FRAMESET ROWS="15%,*"> <FRAME SRC="tfetitle.html" NAME=TITLE SCROLLING=NO MARGINHEIGHT=1> <FRAMESET COLS="20%,*"> <FRAME SRC="tfesidebar.html" NAME=SIDEBAR> <FRAME SRC="tfemain.html" NAME=MAIN> </FRAMESET> <NOFRAMES>NOFRAMES stuff </NOFRAMES> </FRAMESET>
To target one of these frames, the link should have a TARGET attribute set to the name of the frame where the linked page should appear. So, for example, this code creates a link to tfetacos.html and targets that link to the MAIN frame: this code produces this the link in this page

<A HREF="tfetacos.html" TARGET=MAIN>my link</A>

Prepared By :- BCARE Computer Education

47