HTML Handout v1.0

Handout: HTML
Version: HTML/Handout/0208/1.0 Date: 29-02-08
Cognizant 500 Glen Pointe Center West Teaneck, NJ 07666 Ph: 201-801-0233 www.cognizant.com
Handout - HTML
TABLE OF CONTENTS
Introduction ...................................................................................................................................4 About this Module .........................................................................................................................4 Target Audience ...........................................................................................................................4 Module Objectives ........................................................................................................................4 Pre-requisite .................................................................................................................................4 Session 02: Introduction to HTML ................................................................................................5 Learning Objectives ......................................................................................................................5 Introduction ...................................................................................................................................5 HTML Basic Tags .........................................................................................................................6 Try It Out .......................................................................................................................................8 Summary ......................................................................................................................................9 Test Your Understanding..............................................................................................................9 Exercise ........................................................................................................................................9 Session 04: Frames and Tables ..................................................................................................10 Learning Objectives ....................................................................................................................10 Frames........................................................................................................................................10 Try It Out .....................................................................................................................................12 Tables .........................................................................................................................................13 Try It Out: ....................................................................................................................................18 Summary ....................................................................................................................................19 Test Your Understanding............................................................................................................19 Exercises ....................................................................................................................................19 Session 06: Meta Information .....................................................................................................20 Learning Objectives ....................................................................................................................20 Meta Tags and Meta Headers ....................................................................................................20 Caching of Pages .......................................................................................................................22 Try It Out .....................................................................................................................................26 Summary ....................................................................................................................................26 Test Your Understanding............................................................................................................26 Exercises ....................................................................................................................................26 Session 08: Advanced HTML Tags .............................................................................................27 Learning Objectives ....................................................................................................................27
Page 2 Copyright 2007, Cognizant Technology Solutions, All Rights Reserved C3: Protected
Handout - HTML
Div Tag .......................................................................................................................................27 Exercise ......................................................................................................................................29 Span Tag ....................................................................................................................................30 Exercise ......................................................................................................................................32 Summary ....................................................................................................................................34 Test Your Understanding............................................................................................................34 Exercise ......................................................................................................................................34 Session 10: Form Elements ........................................................................................................35 Learning Objectives ....................................................................................................................35 Introduction to HTML Form.........................................................................................................35 The <form>Tag ...........................................................................................................................35 Form Elements ...........................................................................................................................36 Try It Out .....................................................................................................................................42 Summary ....................................................................................................................................43 Test Your Understanding............................................................................................................43 Exercises ....................................................................................................................................43 Session 12: Various browsers and W3C Schools Specification .............................................44 Learning Objectives ....................................................................................................................44 Various Browsers........................................................................................................................44 W3Schools Specifications ..........................................................................................................46 Summary ....................................................................................................................................47 Test Your Understanding............................................................................................................47 Session 13: Debugging Tools for HTML and HTML 4.0 ............................................................48 Learning Objectives ....................................................................................................................48 Best Practices of HTML ..............................................................................................................48 Debugging Tools.........................................................................................................................49 Why use HTML 4.0 .....................................................................................................................52 Summary ....................................................................................................................................53 Test Your Understanding............................................................................................................53 References ....................................................................................................................................55 Websites .....................................................................................................................................55 Books ..........................................................................................................................................55 STUDENT NOTES: ........................................................................................................................56
Handout - HTML
Introduction
About this Module
The module deals with introduction to HTML and explains about various HTML tags both basic and advanced tags.
Target Audience
The module is specifically aimed at entry level trainee programmers.
Module Objectives
After completing this module, you will be able to: Explain the importance of Web Pages Familiarize with HTML tags Implement the tags for designing Web Pages
Pre-requisite
The module requires a prior knowledge of the following applications in a trainee: An idea about WebPages An idea about browsers
Handout - HTML
Session 02: Introduction to HTML

Learning Objectives
After completing the session, you will be able to: Define HTML tags and elements Describe basic tags used in HTML
Introduction
What is the World Wide Web? The World Wide Web (Web) is a network of information resources. The Web relies on three mechanisms to make these resources readily available to the widest possible audience: A uniform naming scheme for locating resources on the Web (for example, URIs) Protocols, for access to named resources over the Web (for example, HTTP) Hypertext, for easy navigation among resources (for example, HTML) Introduction to URIs Every resource available on the Web -- HTML document, image, video clip, program, has an address that may be encoded by a Universal Resource Identifier or "URI". URIs typically consists of three pieces: The naming scheme of the mechanism used to access the resource. The name of the machine hosting the resource. The name of the resource itself, given as a path. To publish information for global distribution, one needs a universally understood language, a kind of publishing mother tongue that all computers may potentially understand. The publishing language used by the World Wide Web is HTML (from HyperText Markup Language). HTML: An abbreviation of HyperText Markup Language is the predominant markup language for Web pages. It provides a means to describe the structure of text-based information in a document by denoting certain text as links, headings, paragraphs, lists, and so on and to supplement that text with interactive forms, embedded images, and other objects. HTML is written in the form of tags, surrounded by angle brackets. An HTML file is a text file containing small markup tags HTML can also describe, to some degree, the appearance and semantics of a document, and can include embedded scripting language code which can affect the behavior of Web browsers and other HTML processors.HTML is error free and case insensitive language. 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
Handout - HTML
The text between the start and end tags is the element content HTML tags are not case sensitive; <b> means the same as <B> Tags are made up of elements, properties, and values. The command letters or words are called elements. Some elements have declared settings called properties. These properties help describe or shape the way the element will work or function. The property settings are known as values. Some tags can have many properties, others have none. <ELEMENT PROPERTY="VALUE"> Example: <HTML> <! -- This tag tells your browser that this is the start of an HTML document. -- > <HEAD> <! - - The text between the head tags is header information. -- > <TITLE>My Home Page</TITLE> <! -- The title is displayed in your browser's Caption -- > </HEAD> <! -- Header information not displayed in the browser window - - > <BODY> My Home Page <! -- The text between the <body> tags is the text that will be displayed in your browser. -- > </BODY> </HTML> < ! -This tag tells your browser that this is the end of the HTML document. ---> To run this example, save an HTML file with the .htm or the .html extension. 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.
HTML Basic Tags

1. <html>: This element tells that this is an HTML document. 2. <head>: This element contains the information about the document. The browser does not display the "head information" to the user. The following tags can be in the head section: <base>, <link>, <meta>, <script>, <style>, and <title>. 3. <body>: The body element defines the content of the document (like text, images, colors, graphics, and so on).
Handout - HTML
Headings: The heading elements are used to create headlines in documents. Six different levels of headings are supported: <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. These range in importance from <h1>, the most important, to <h6>, the least important. Most browsers display headings in larger and/or bolder font than normal text. Actually, heading elements convey logical meaning about a documents structure. However, in most visual browsers, sizing and weight are relative to the importance of the heading. Therefore, <h1> level headings are larger and generally bolder than <h3> headings, leading developers to interpret these logical tags most often in a physical manner. Example: <h1>This <h2>This <h3>This <h4>This <h5>This is is is is is a a a a a heading</h1> heading</h2> heading</h3> heading</h4> heading</h5>
<h6>This is a heading</h6>
Fig: View in the Browser Paragraphs: Recall that white space handling rules of HTML suggest that multiple spaces, tabs, and carriage returns are often ignored. Surrounding text with the <p> and </p> tags indicates that the text is a logical paragraph unit. Example: <p>This is a paragraph</p> <p>This is another paragraph</p>
Handout - HTML
Line Breaks: The <br> tag is used when you want to break a line, but don't want to start a new paragraph. The <br> tag forces a line break wherever you place it.The <br> tag is an empty tag. It has no end tag like </br>. Example: <p>This <br> is a sentence<br> with line breaks</p> Horizontal Rule: The <hr> tag defines the horizontal rule. Example: <p>The hr tag defines a horizontal rule :</p> <hr> <p>This is a paragraph</p> 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. 
Try It Out
Problem Statement: Write a simple HTML code for displaying text in different header styles and a paragraph having break tags in between. Code: <html> <body> <h2> Header 2 </h2> <h1>Header 1 </h1> <h3> Header 3 </h3> <h4> Header 4</h4> <h5> Header 5 </h5> <h6> Header 6 </h6> <p> This is the first paragraph. <br/> Again more of the same. This time the paragraph is aligned to the left. <br/> This is a good idea as it often makes the test easy to read </p> </body> </html>
How It Works: The header tags display the text with different size. The paragraph tags have text with two break tags in between which will divide the paragraph into three lines.
Handout - HTML Summary

This session introduces you about the basics of Web page designing.
Test Your Understanding

1. 2. 3. 4. 5. Why is HTML technology used? What are the other technologies used in designing Web pages? What extension you give to a HTML file? List out all the tags in HTML. Describe what does each tag do?
Exercise
1. Design a HTML page which uses basic tags.
Handout - HTML
Session 04: Frames and Tables

Learning Objectives
After completing the session, you will be able to: Define Frames and Tables
Frames
Frames can divide the screen into separate windows. With frames, you can display more than one Web page in the same browser window. Each of these windows can contain an HTML document. Each HTML document is called a frame, and each frame is independent of the others. A file that specifies how the screen is divided into frames is called a frameset. If you want to make a homepage that uses frames you should: Make an HTML document with the frameset Make the normal HTML documents that should be loaded into each of these frames. Each frameset defines a set of rows or columns. The values of the rows or columns indicate the amount of screen area each row/column will occupy. When a frameset page is loaded, the browser automatically loads each of the pages associated with the frames. Example: <html> <head> <title>My Frames Page</title> </head> <frameset cols="120,*"> <frame sac="menupage.htm" name="menu" no resize scrolling=no> <frameset rows="*,50"> <frame sac="welcomepage.htm" name="main"> <frame sac="bottombanner.htm" name="bottom"> </frameset> </frameset> </html>
Handout - HTML
How It Works: The screen is divided into two columns. The left being 120 pixels and the right using the rest of the screen (indicated by the *). You can add default pages to frame windows with the sac setting. Default pages are the pages that will be loaded when the frameset is opened the first time. You also have told the browser that the left frame window should load an HTML page called menu.htm and that the right window should load an HTML document called frontf.htm.
m main e n u
To make the frame borders invisible you simply need to add the parameters "colsline" to the frameset: frame border="0border="0"framespacing="0" If you leave out the setting for scrolling, then a scrollbar will appear if needed - otherwise not. m main e n u
The preceding example has now a frame divided into 3 frames using framesets. Menupage.htm,welcomepage.htm and bottombanner.htm are three different .html files.
Handout - HTML
Try It Out
Problem Statement: Write a simple HTML code for the various framesets displayed here. 1. top bottom
Code: <frameset rows="16%, 84 %"> <frame sac="top.htm" name="top"> <frame sac="bottom.htm" name="bottom"> </frameset>
2. top
left
right
<frameset rows="16%,84%"> <frame sac="top.htm" name="top"> <frameset cols="50%,50%"> <frame sac="left.htm" name="left"> <frame sac="right.htm" name="right"> </frameset> </frameset> 3. topleft topright
botleft
botright
<frameset rows="240,240" cols="320,320"> <frame sac="topleft.htm" name="topleft"> <frame sac="topright.htm" name="topright"> <frame sac="botleft.htm" name="botleft"> <frame sac="botright.htm" name="botright"> </frameset>
Handout - HTML
4. topleft topright brtl botleft brtr
botrbot
<frameset rows="50%,50%" cols="50%,50%"> <frame sac="topleft.htm" name="topleft"> <frame sac="topright.htm" name="topright"> <frame sac="botleft.htm" name="botleft"> <frameset rows="50%,50%"> <frameset cols="50%,50%"> <frame sac="brtl.htm" name="brtl"> <frame sac="brtr.htm" name="brtr"> </frameset> <frame sac="botrbot.htm" name="botrbot"> </frameset> </frameset>
Tables
The most important layout aspects that can be done with tables are: Dividing the page into separate sections .An invisible table is excellent for this purpose. Creating menus. Typically with one color for the header and another for the links following in the next lines. Adding interactive form fields. Typically a gray area containing a search option. Creating fast loading headers for the page. A coloured table with a text on it loads like a bullet compared to even a small banner. Easy alignment of images that have been cut into smaller pieces. A simple way to allow text to be written in two or more columns next to each other. Tables are defined with the <table> tag. To insert a table on your page you simply add these tags where you want the table to occur: <table> </table> The preceding table would be of no use as it has no rows and no columns.
Handout - HTML
ROWS: To add rows to your table use the <tr> and </tr> tags. Example: <table> <tr></tr> <tr></tr> </table> COLUMNS: You can divide rows into columns with <td> and </td> tags: Example: <table> <tr> <td>This is row one, left side.</td> <td>This is row one, right side.</td> </tr> <tr> <td>This is row two, left side.</td> <td>This is row two, right side.</td> </tr> Result: This is row one, left side. This is row two, left side. This is row one, right side. This is row two, right side.
The following properties can be added to the <table> tag: Property align= left center right background=filename bgcolor=#rrggbb border=n bordercolor=#rrggbb cellpadding=n cellspacing=n nowrap left align table center table right align table image inserted behind the table background color border thickness border color distance between cell and content space between cells Protects again linebreaks, even though the content might be wider than the browser window. Description
Handout - HTML
Property frame= void, above, below, lhs, rhs, hsides, vsides, box valign= top bottom width= n,n n,n% minimum width of table in pixels minimum width in percentage of window size Description removes all outer borders shows border on top of table shows border on bottom of table shows border on left side of table shows border on right side of table shows border on both horizontal sides shows border on both vertical sides shows border on all sides of table
aligns content to top of cells aligns content to bottom of cells
The rowspan and colspan Attributes With the addition of rowspan and colspan attributes to the table elements, it is possible to create data cells that span a given number of rows or columns. The two attributes allow us to create table cells bigger or smaller. Example: <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title>ROWSPAN and COLSPAN</title> <meta http-equiv="content-type" content="text/html; charset=ISO-88591" /> </head> <body> <table border="1"> <caption>ROWSPAN Example</caption> <tr> <! - - New Row --> <td rowspan="2">Element 1</td> < !- -Element1 here takes 2 row spaces - -> <td>Element 2</td> </tr> <tr> <td>Element 3</td> </tr>
Handout - HTML
</table> <br /><br /> <table border="1"> <! - - New Table -- > <caption>COLSPAN Example</caption> <tr> <td colspan="3">Element 1</td> <!- -Element1 here takes 3 column spaces - -> </tr> <tr> <td>Element 2</td> <td>Element 3</td> <td>Element 4</td> </tr> </table> </body> </html>
Fig: View in the Browser
Handout - HTML
cellpadding and cellspacing: The space between cells in a table is controlled by the cellspacing attribute for <table>. The value is measured in pixels or percentage values. When using tables for layout, cells should jut up next to each other, so this attribute is often set to 0, as in previous examples. Similarly, the padding between cell walls and the content they surround is controlled by the cellpadding attribute, which is also often set to 0 in tables used for layout. Example: <table border="1" cellspacing="15" cellpadding="40"> <tr> <td>Element 1</td> <td>Element 2</td> <td>Element 3</td> </tr> </table> <br /><br /> <table border="1" cellspacing="0" cellpadding="0"> <tr> <td>Element 1</td> <td>Element 2</td> <td>Element 3</td> </tr> </table>
Cell padding: 40
Cell spacing=15 pixels No cell padding or spacing Cell Alignment: Cells defined by <td> or <th> are generally aligned horizontally by setting the align attribute to left, right, or center with left being the default. It is also possible to justify their contents by setting the attribute to justify, or to align contents on a particular character such as a decimal point using the value char.
Handout - HTML
Example: <table border="1" cellspacing="0" cellpadding="0" width="100%"> <tr> <td align="left">Left</td> <td align="center">Center</td> <td align="right">Right</td> </tr> <tr> <td valign="top" height="100">Top</td> <td valign="middle">Middle</td> <td valign="bottom">Bottom</td> </tr> </table>
Try It Out:
Problem Statement: Create the following using all the table tags.
Handout - HTML
Code: <html> <table border=1 CELLSPACING=20> <tr> <TD ROWspan=3 VALIGN=center>Title goes here</td> <TD width=25>A</TD> <TD width=25 align=right>D</td> </tr> <tr> <TD width=25>B</tD> <TD width=25 align=right>E</td> </tr> <tr> <TD width=25>C</td> <TD width=25 align=right>F</td> </tr> </TABLE> <P> </html>
Summary
This session gives an overview of Frames. It also explains the different ways of using Frames in designing Web Pages and also states the use of table tags to display data in an organized and symmetric manner.

1. What is the difference between <frameset> and <frame> tags? 2. How do you create data cells that span a given number of rows and columns?
Exercises
1. Create the following using table tags:
Handout - HTML
Session 06: Meta Information

Learning Objectives
After completing the session, you will be able to: Define Meta Tags and Meta Headers Explain Caching of Pages
Meta Tags and Meta Headers

The <meta> element provides meta-information about the page, such as descriptions and keywords for search engines and refresh rates. In HTML, Meta tag always goes inside the head element. The Meta tag does not have an end Tag. It should always go inside Head Tag. Some search engines on the WWW will use the name and content attributes of the Meta tag to index pages. This meta element defines a description of your page: <meta name="description" content="Free Web tutorials on HTML, CSS, XML, and XHTML"> This meta element defines keywords for your page: <meta name="keywords" content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript"> The intention of the name and content attributes is to describe the content of a page. Example: <html> <head> <meta name="description" content="HTML examples" /> <meta name="keywords" content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript" /> </head> <body> <p>The meta attributes of this document describe the document and its keywords.</p> </body> </html>
Handout - HTML
What does a Meta tag look like? Meta tags go inside the <head></head> element of your Web page, and take the following format: Either: Or: <meta name="name" content="content"> <meta http-equiv="name" content="content">
So, which should you use? Well, it depends on what type of meta tag you are using. The reason is a little boring, but basically http-equiv is designed for meta tags that emulate the equivalent HTTP header (For example, "refresh" and "pragma"), whereas name is for all the rest (for example, "author" and "description"). A rule of thumb is as follows: If the meta-information is designed to be interpreted by a Web server or proxy, use http-equiv; if it's designed for a page editor or search engine, use name. This example shows how you can use the description and keywords META tags to improve your ranking with the search engines: Example: <head> <title>Marcia's Dog Training Page</title> <meta name="description" content="This Web page contains information on dog training, including modern training techniques, training news, info on training centres and links to other dog-training sites."> <meta name="keywords" content="Dog, training, puppy, techniques, centres, links, leash, teaching, commands, sit, stay, fetch, beg"> </head> How it works Notice that we used two Meta tags here, both within the <head></head> element of our Web page. The description tag is often used by search engines such as Google to display a short summary of your Web page in their search results pages. The keywords are used to help index your page, so that when people type in the word "fetch" into their favorite search engine, your page will be one of the pages returned. Author Example: <meta name="author" content="author's name"> <meta name="author" content="Marcia Westley"> This lets you tell search engines and browsers that you wrote this page!
Handout - HTML
Refresh <meta http-equiv="refresh" content="delay;url=new-url"> <meta http-equiv="refresh" content="0;url=newpage.html"> This tag is great if you move your Web page to a different directory or server, or have to rename it for some reason. You can use this tag to redirect the browser to the new page! delay is the delay in seconds to wait before refreshing. new-url is the URL of the page to jump to (it can be the same page, in which case the same page will continually refresh.) If you specify a delay of zero, then the browser will jump immediately to the new page. Robots <meta http-equiv="robots" content="[noindex|nofollow]"> <meta http-equiv="robots" content="noindex"> This is another one for the search engines (also known as robots!). You can use this tag to tell search engines whether they should add your page to the index or not, and whether they should follow links from your page to look for other pages to index. Normally the search engines will index your page if they find it, and follow all the links on the page to look for other stuff to index. The following example will tell robots not to add your page to the index (they can still follow links on your page): You can also add a file called robots.txt to your home directory, to tell search engines which page to index and which to ignore. This is the preferred method; however the above method lets you specify index requirements for each page individually.
Caching of Pages
Example: <meta http-equiv="pragma" content="nocache"> This tag tells browsers not to store a copy of your page in the cache on your hard drive. The cache is normally used to store recent pages that you have visited, so that the browser does not have to go off to the server to download commonly-visited pages all the time. However, if you are updating the page frequently and want users to see the newest version at all times and then uses this meta tag.
Handout - HTML
Some of the common Meta tags are listed here for your quick reference: Tag Name Author Examples <META NAME="AUTHOR" CONTENT="Tex Texin"> Description The author's name.
HTTP 1.1. Allowed values = PUBLIC | PRIVATE | NO-CACHE | NO-STORE. Public may be cached in public shared caches Private may only be cached in private cache no-Cache may not be cached no-Store may be cached but not archived The directive CACHE-CONTROL: NO-CACHE indicates cached information should not be used and instead requests should be forwarded to the origin server. This directive <META HTTP-EQUIV="CACHEhas the same semantics as the PRAGMA: NOCONTROL" CONTENT="NO-CACHE"> CACHE. Clients SHOULD include both PRAGMA:NOCACHE and CACHE-CONTROL:NO-CACHE when a no-cache request is sent to a server not known to be HTTP/1.1 compliant. Note: It may be better to specify cache commands in HTTP than in META statements, where they can influence more than the browser, but proxies and other intermediaries that may cache information. <META HTTP-EQUIV="CONTENTLANGUAGE" CONTENT="en-US,fr"> Declares the primary natural language(s) of the document. May be used by search engines to categorize by language.
cache-control
ContentLanguage
<META HTTP-EQUIV="CONTENTTYPE" CONTENT-TYPE CONTENT="text/html; charset=UTF-8"> <META NAME="COPYRIGHT" CONTENT="© 2004 Tex Texin">
The HTTP content type may be extended to give the character set. It is recommended to always use this tag and to specify the charset.
Copyright
A copyright statement.
Handout - HTML
Tag Name
Examples
Description The text can be used when printing a summary of the document. The text should not contain any formatting information. Used by some search engines to describe your document. Particularly important if your document has very little text, is a frameset, or has extensive scripts at the top. The date and time after which the document should be considered expired. An illegal EXPIRES date, e.g. "0", is interpreted as "now". Setting EXPIRES to 0 may thus be used to force a modification check at each visit. Web robots may delete expired documents from a search engine, or schedule a revisit. HTTP 1.1 (RFC 2068) specifies that all HTTP date/time stamps MUST be generated in Greenwich Mean Time (GMT) and in RFC 1123 format. RFC 1123 format = wkday "," SP date SP time SP "GMT" wkday = (Mon, Tue, Wed, Thu, Fri, Sat, Sun) date = 2DIGIT SP month SP 4DIGIT ; day month year (For example., 02 Jun 1982) time = 2DIGIT ":" 2DIGIT ":" 2DIGIT ; 00:00:00 - 23:59:59 month = (Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec)
DESCRIPTION
<META NAME="DESCRIPTION" CONTENT="...summary of Web page...">
EXPIRES
<META HTTP-EQUIV="EXPIRES" CONTENT="Mon, 22 Jul 2002 11:12:01 GMT">
Keywords
<META NAME="KEYWORDS" CONTENT="rock & roll">
The keywords are used by some search engines to index your document in addition to words from the title and document body. Typically used for synonyms and alternates of title words. Consider adding frequent misspellings.
Handout - HTML
Tag Name
Examples
Description This directive indicates cached information should not be used and instead requests should be forwarded to the origin server. This directive has the same semantics as the CACHE-CONTROL:NO-CACHE directive and is provided for backwards compatibility with HTTP/1.0.
PRAGMA NOCACHE
<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">
Clients SHOULD include both PRAGMA:NOCACHE and CACHE-CONTROL:NO-CACHE when a no-cache request is sent to a server not known to be HTTP/1.1 compliant. HTTP/1.1 clients SHOULD NOT send the PRAGMA request-header. HTTP/1.1 caches SHOULD treat "PRAGMA:NO-CACHE" as if the client had sent "CACHE-CONTROL:NOCACHE".
Refresh
Specifies a delay in seconds before the <META HTTP-EQUIV="REFRESH" browser automatically reloads the document. CONTENT="15;URL=http://www.I Optionally, specifies an alternative URL to 18nGuy.com/index.html"> load, making this command useful for redirecting browsers to other pages.
<META NAME="ROBOTS" CONTENT="ALL"> <META NAME="ROBOTS" CONTENT="INDEX,NOFOLLOW"> ROBOTS <META NAME="ROBOTS" CONTENT="NOINDEX,FOLLOW"> <META NAME="ROBOTS" CONTENT="NONE">
CONTENT="ALL | NONE | NOINDEX | INDEX| NOFOLLOW | FOLLOW | NOARCHIVE" default = empty = "ALL" "NONE" = "NOINDEX, NOFOLLOW" The CONTENT field is a comma separated list: INDEX: search engine robots should include this page. FOLLOW: robots should follow links from this page to other pages. NOINDEX: links can be explored, although the page is not indexed. NOFOLLOW: the page can be indexed, but no links are explored. NONE: robots can ignore the page. NOARCHIVE: Google uses this to prevent archiving of the page.
Handout - HTML
Tag Name
Examples
Description In addition to the ROBOTS META Command above, Google supports a GOOGLEBOT command. With it, you can tell Google that you do not want the page archived, but allow other search engines to do so. If you specify this command, Google will not save the page and the page will be unavailable via its cache.
GOOGLEBOT
<META NAME="GOOGLEBOT" CONTENT="NOARCHIVE">
Try It Out
Problem Statement: Write a HTML document to provide information inside a meta element describes the document. Code: <html> <head> <meta name="author" content="June" /> <meta name="revised" content="JuneK,6/10/99" /> <meta name="generator" content="Microsoft FrontPage 5.0" /> </head> <body> <p>The meta attributes of this document identify the author and the editor software.</p> </body> </html>
Summary
These sessions states the significance of Meta Tags and usage of Meta tags to cache pages.

1. What is the use of meta tags in search engines? 2. What is the meta name used to index a document by search engines? 3. What is the role of http-equiv attribute in a meta tags?
Exercises
1. Write HTML code using meta tags to specify a delay in seconds before the browser automatically reloads the document. Optionally, specifies an alternative URL to load, making this command useful for redirecting browsers to other pages.
Handout - HTML
Session 08: Advanced HTML Tags

Learning Objectives
After completing the session, you will be able to: Define Div Tag, Span Tag, and I frame Tag
Div Tag
The <div> tag in HTML is a tag that defines logical divisions within the content of a page. What this means is that a <div> tag defines sections of a Web page to make it easier to manage, style, and manipulate. You can use the <div> tag when you want to center a block of content or position a content block on the page. The <div> tag is a very powerful tool for Web developers. The <div> tag is a block-level element The <div> tag can contain nearly any other tag The <div> tag cannot be inside <p> tags How to use the DIV Tag: The <div> tag is not a replacement for <p> tag. The <p> tag is for paragraphs, only, while the <div> tag defines more general divisions within a document. Don't replace <p> tags with <div> tags. One thing to keep in mind when using the <div> tag is that it breaks paragraphs. It is a good idea to label your <div> tags as you place them in your document. For example, if you are defining the main content area of your site, you should name that DIV tag: "maincontent". <div id="maincontent"> It is always a good idea to close your <div> tags as soon as you open them. Then place the contents within the element. If you nest your <div> tags, then be sure that you know where your content is going (in other words, which DIV it should be part of). One can have paragraphs within a <div> you can't have a <div> inside a paragraph. Example: <h2>The div Tag</h2> <div style="color:#FF0000;"> This is some text in a div section<br/> </div> <div style="color:#AA0000;"> This is some text in another div section<br/> </div>
Handout - HTML
Output:
Attributes of the <div> tag: The primary attributes of the <div> tag are as follows: style class id Other div attributes: dir (optional) onclick (optional) onkeydown (optional) onkeyup (optional) onmouseout (optional) onmouseup (optional) lang (optional) ondblclick (optional) onkeypress (optional) onmousedown (optional) onmouseover (optional) title (optional)
Handout - HTML
Contents: The following tags are valid within the <div> tag: a, acronym, address, applet, b, basefont, bdo, big, blockquote, br, button, center, cite, code, dfn, dir, div, dl, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, hr, i, iframe,img, input isindex, kbd, label, map, menu, noframes, noscript, object, ol, p, pre, q, s, samp, script, select, small, span, strike, strong, sub, sup, table, textarea, tt, u, ul, var. <div> Valid Context: The <div> tag is valid within the following tags: blockquote, body, button, center, dd, div, fieldset, form, iframe, li, noframes, noscript, object, td, th <div> Usage: Style division Example: <div style="color : #ff0000">red text</div> Justified text Example: <div align="justify"> The following text will be justified across the width of the browser. This may not work reliably across all browsers, and can also be defined with style tags. </div> The earlier two examples were to show how <div> can be used. Even if you do not use style sheets or DHTML, one should get into the habit of using the <div> tag. This will give you more flexibility when more XML parsers become available. Also, one can use the id and name attributes to name your sections so that your Web pages are well formed (always use the name attribute with the id attribute and give them the same contents).
Exercise
Design a HTML page to get the following output. Use only <div> tag.
Handout - HTML Span Tag

The <span> tag is used to group inline-elements in a document. It has very similar properties to the <div> tag, in that it changes the style of the text it encloses. But without any style attributes, the <span> tag would not change the enclosed items at all. The <span> tag is an inline-level element. The <span> tag can only contain other inline elements like abbr, strong, or tt. The <span> tag can be inside <p> tags or <div> tags. How to use <span> tag: The <span> tag does not do anything by itself. In fact, the only attribute that might affect the page is the title attribute, and that depends upon the Web browser. Use span tags when you don't want any changes to the layout other than exactly what you specify in the styles of the span. For example, if you use a <div> or <p> most browsers will add space around the element, because they are block elements. It is always a good idea to close your <span> tags as soon as you open them. Then place the contents within the element. If you nest your <span> tags, be sure that you know where your content is going (in other words, which SPAN it should be part of). Example: <h1 <span <span <span <span <span </h1> Output: style="color:black">H</span> style="color:blue">E</span> style="color:brown">L</span> style="color:black">L</span> style="color:blue">O</span>
Handout - HTML
Attributes of the <span> tag: The primary attributes of the <div> tag are: style class id Other <span> Attributes: dir (opt) onclick (opt) onkeydown (opt) onkeyup (opt) onmouseout (opt) onmouseup (opt) lang (opt) ondblclick (opt) onkeypress (opt) onmousedown (opt) onmouseover (opt) title (opt)
<span> Contents: Usually any HTML text that you want to specify a style for, the following tags are valid within the <span> tag: a, acronym, applet, b, basefont, bdo, big, br, button, cite, code, dfn, em, font, i, iframe, img, input, kbd, label, map, object, q, s, samp, script, select, small, span, strike, strong, sub, sup, textarea, tt, u, var. <span> Valid Context: The <span> tag is valid within the following tags: a, acronym, address, applet, b, bdo, big, blockquote, body, button, caption, center, cite, code, dd, del, dfn, div, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, i, iframe, ins, kbd, label, legend, li, noframes, noscript, object, p, pre, q, s, samp, small, span, strike, strong, sub, sup, td, th, tt, u, var. Adding Style: The primary purpose of the SPAN tag is to act as a vehicle by which attributes can be implemented. Here are a couple of examples of adding CSS commands right in the SPAN tag itself. Example: Affecting the Text's Background Color: > <SPAN STYLE="background-color: #ffffcc">Here's What You Get</SPAN> Example: Affecting Text Color and Size: > <SPAN STYLE="color: green; font-size: 10pt">You can Here's What You Get</SPAN> Example: Adding A Background Image to the Text: >
Handout - HTML
<SPAN STYLE="background-image: url(/img/background2.gif)">You can add background image to your text</SPAN>
<span title="ISN'T THIS SOOOOOO COOL!">HOVER YOUR MOUSE HERE.</span><BR>
Exercise
Design the previous HTML page to get the following output. Use both <div> and <span> tags.
Handout - HTML
I frame Tag An inline frame ("floating frame") is a construct which embeds a document into an HTML document so that embedded data is displayed inside a sub window of the browser's window. This does not mean full inclusion; the two documents are independent, and both them are treated as complete documents, instead of treating one as part of the other. So,the <iframe> tag allows one to implement an embedded frame into a page. An embedded frame does not work like a normal frame, and it does not divide the frame like normal frames do. Instead it works like an embedded object where you can load any source you like. You can use the <iframe> wherever you want in your page: Decide how big the window is to be. Then, put the IFRAME tag where the window is to be on the page. Give it the URL of the Web page (or script) that will be displayed in the window. The iframe tag can only be used inside a body element. You must not place the iframe tag inside a frameset element. Example: < !- - When you put the above IFRAME tag on your Web page, it will create an area 200 pixels high and 300 pixels wide and display the WillMaster.com home page in that area. - - > <iframe height="200" width="300" sac="http://www.willmaster.com/"> </iframe> Example: This is the normal text in the page. <br/> <iframe sac=http://www.topxml.com width=400 height=400></iframe> Output:
Handout - HTML
Attributes of <iframe> tag: align(optional) height(optional) marginheight(optional) name(optional) sac(optional) frame border(optional) longdesc(optional) marginwidth(optional) scrolling(optional) width(optional)
Note: The long desc attribute is the URL address of an HTML document that contains a long textual description of the frame. This is designed to provide more information than a title element would display. Example: <frame name="articles" sac="articles-index.html" longdesc="whatsarticles-frame.html">
Summary
This session explains the usage and implementation of <div> tag, span>, <iframe> tags in designing web pages.

1. Does the div tag create a line break? 2. Which tag can be used to background color to text? 3. How can you create a floating frame within a document?
Exercise
1. Create an inline frame using all attributes of the <iframe> tag.
Handout - HTML
Session 10: Form Elements

Learning Objectives
After completing the session, you will be able to: Explain the introduction to HTML Form Define <form> Tag and Form Elements
Introduction to HTML Form

An HTML form is a section of a document containing normal content, markup, special elements called controls (checkboxes, radio buttons, menus, etc.), and labels on those controls. Users generally "complete" a form by modifying its controls (entering text, selecting menu items, etc.), before submitting the form to an agent for processing (for example, to a Web server, to a mail server, and so on.). A form is an area that can contain form fields Form fields are objects that allow the visitor to enter information. When your form is submitted you need a program that can receive the information. Such programs are sometimes referred to as: CGI programs. CGI stands for Common Gateway Interface, which is computer latin for a program that translates information.
The <form>Tag
A form is defined with the <form> tag. The form tag defines the manner in which the server handles the information input by the user in the form. You must define at least two special form attributes, which provide the name of the forms processing server and the method by which the parameters are to be sent to the server. A third, optional attribute lets you change how the parameters get encoded for the secure transmission over the network. Form Tag Attributes: Action = url: The action attribute points to a form processing application or mechanism (mostly a server side application). A URL that defines where to send the data when the submit button is pushed Method = get/post: Defines how the FORM information is going to be sent. The HTTP method for sending data to the action URL is defined. Default is GET.
method="get": This method sends the form contents in the URL: URL? name=value&name=value.
method="post": This method sends the form contents in the body of the request.
Handout - HTML
Note: If the form values contains non-ASCII characters or exceeds 100 characters you MUST use method="post". Most browsers are unable to bookmark post requests. Target: Defines where to open the target URL. _blank _self _parent _top The target URL will open in a new window The target URL will open in the same frame as it was clicked The target URL will open in the parent frameset The target URL will open in the full body of the window
Name: Defines a unique name for the form. Note. This attribute has been included for backwards compatibility. Applications should use the id attribute to identify elements. Example: <form action=http://www.cognizant.com method=POST target=body name=RegistrationForm title=Registration Form>
Form Elements
Some of the form elements have been presented here with examples: 1. Text Field: Text Fields are one line areas that allow user to enter text HTML text size= maxlength= name= value= align= tabindex= EXPLANATION One line text field Characters shown. Max characters allowed. Name of the field. Initial value in the field. Alignment of the field. Tab order of the field. EXAMPLE
Handout - HTML
Example: </<html> <head> <title>MyPageTitle</title> </head> <body> <form name="myform" action="http://www.mydomain.com/myformhandler.cgi" method="POST"> <div ali gn="center"> <br><br> <input type="text" size="25" value="Enter your name here!"> <br><br> </div> </form> </body> </html>> How it Works: Top of Form
Enter your name here!
2. Text Area Text areas are text fields that can span several lines. Unlike most other form fields, text areas are not defined with an <input> tag. Instead you enter a <textarea> tag where you want the text area to start and a closing </textarea> tag where you want the area to end. Everything written between these tags will be presented in the text area box.
HTML textarea rows= cols= name= tabindex= wrap= off virtual physical
EXPLANATION Text area - several lines Rows in the field. Columns in the field. Name of the field. Tab order of the field. Turns off linebreaking Shows linebreaking, but sends text as entered. Inserts linebreaks when needed and even sends it.
EXAMPLE
Handout - HTML
Example: <html> <head> <title>MyPage</title> </head> <body> <form name="myform" action="http://www.mydomain.com/myformhandler.cgi" method="POST"> <div align=center"> This is outside the area<br><br> <textarea cols="40" rows="5" name="myname"> Now we are inside the area - which is nice. </textarea> <br><br> And now we are outside the area </div> </form> </body> </html> How it Works:
3. Check Box: Check boxes are used when you want to let the visitor select one or more options from a set of alternatives. If only one option is to be selected at a time you should use radio buttons instead. HTML checkbox name= value= align= tabindex= checked EXPLANATION Choose one or more options Name of the field. Value that is submitted if checked. Alignment of the field. Tab order of the field. Default check this field. EXAMPLE
Handout - HTML
Example: <html> <head> <title>My Page</title> </head> <body> <form name="myform" action="http://www.cognizant.com methhod="POST"> <div align="center"><br> <input type="checkbox" name="option1" value="Java "> Java<br> <input type="checkbox" name="option2" value="C++" checked> C++<br> <input type="checkbox" name="option3" value="Perl"> Perl<br> <br> </div> </form> </body> </html> How It Works:
Java C++ Perl
4. Radio Button: Radio buttons are used when you want to let the visitor select one - and just one - option from a set of alternatives. If more options are to be allowed at the same time you should use check boxes instead. HTML radio name= value= align= tabindex= checked EXPLANATION Choose one - and only one - option Name of the group. Value that is submitted if checked. Alignment of the field. Tab order of the field. Default check this field. EXAMPLE
Handout - HTML
Example: <html> <head> <title>My Page</title> </head> <body> <form name="myform" action="http://www.mydomain.com/myformhandler.cgi" method="POST"> <div align="center"><br> <input type="radio" name="group1" value="Java"> Java<br> <input type="radio" name="group1" value="C++ " checked> C++<br> <input type="radio" name="group1" value="Perl"> Perl <hr> <input type="radio" name="group2" value="Pl/SQL"> PL/SQL<br> <input type="radio" name="group2" value="SQL"> SQL<br> <input type="radio" name="group2" value="DB2 " checked> DB2<br> </div> </form></body> </html> How it Works:
Java C++ Perl
PL/SQL SQL DB2
5. Drop Down Menu Drop-down menus are probably the most flexible objects you can add to your forms. Depending on your settings, drop-down menus can serve the same purpose as radio buttons (one selection only) or check boxes (multiple selections allowed). The advantage of a drop-down menu, compared to radio buttons or check boxes, is that it takes up less space.
Handout - HTML
Example: <html> <head> <title>My Page</title> </head> <body> <form name="myform" action="http://www.mydomain.com/myformhandler.cgi" method="POST"> <div align="center"> <select name="mydropdown"> <option value="Milk">Fresh Milk</option> <option value="Cheese">Old Cheese</option> <option value="Bread">Hot Bread</option> </select> </div> </form> </body> </html> How it Works:
Quick Reference HTML textarea rows= cols= name= wrap= off virtual physical EXPLANATION Text area - several lines Rows in the field. Columns in the field. Name of the field. Control linebreaks. urns off linebreaks. Shows linebreaks, but sends text as entered. Inserts linebreaks when needed and even sends it. One line text field Characters shown. Max characters allowed. Name of the field. Initial value in the field. EXAMPLE
text size= maxlength= name= value=
Handout - HTML
HTML password size= maxlength= name= value= checkbox name= value= radio name= value= select name= size= multiple= option selected value= hidden name= value= reset name= value= submit name= value= image name=
EXPLANATION Password field. Characters shown. Characters allowed to enter. Name of the field. Initial value in the field. Choose one or more options Name of the field. Initial value in the field. Choose only one option Name of the field. Initial value in the field. Drop-down menu Name of the field. Number of items in list. Allow multiple choice if yes. Individual items in the menu. Make an item default. Value to send if selected. Does not show on the form. Name of the field. Value to send. Button to reset all fields Name of the button. Text shown on the button. Button to submit the form Name of the button. Text shown on the button. Image behaving as button Name of the image.
EXAMPLE
Butter
Reset
Submit
Try It Out
Problem Statement: Write HTML code that demonstrates how to add a form to a page. The form should contain two input fields and a submit button. If you click the "Submit" button, you will send your input to a new page called form_action.asp. Code: <html> <body> <form name="input" action=" form_action.asp" method="get"> Type your first name:
Handout - HTML
<input type="text" name="FirstName" value="Mickey" size="20"> <br>Type your last name: <input type="text" name="LastName" value="Mouse" size="20"> <br> <input type="submit" value="Submit"> </form> <p> If you click the "Submit" button, you will send your input to a new page called form_action.asp. </p> </body> </html>
Summary
This session explains about various form elements and usage of forms in Web applications.

1. 2. 3. 4. 5. Which attribute lets the browser know where to send the content from the form? Which attribute of the <form> tag defines how the form information is going to be sent? Which form element can span several lines? What are Hidden fields? Explain the use of Submit and Reset buttons.
Exercises
1. Write HTML code to design this page using all possible form elements.
Handout - HTML
Session 12: Various Browsers and W3C Schools Specification

Learning Objectives
After completing the session, you will be able to: Explain various browsers Orientation on W3 schools specification
Various Browsers
Internet Explorer Windows Internet Explorer (formerly Microsoft Internet Explorer abbreviated MSIE), commonly abbreviated to IE, is a series of graphical Web browsers developed by Microsoft and included as part of the Microsoft Windows line of operating systems starting in 1995. It has been the most widely used Web browser since 1999, attaining a peak of about 95% usage share during 2002 and 2003 with IE6 and steadily declining since, despite the introduction of IE7. Internet Explorer 7.0 is the latest version. Internet Explorer 7 provides improved navigation through tabbed browsing, Web search from the toolbar, advanced printing, easy discovery, reading and subscription to RSS feeds. Internet Explorer 6.0 is the standard browser in Windows XP. New features are as follows: Advanced printing (automatically scales a Webpage for printing) Instant Search box Favorites Center RSS feeds (automatically detects RSS feeds) Tabbed browsing (view multiple sites in a single browser window) Quick Tabs Tab Groups Page zoom Mozilla The Mozilla Project has grown from the ashes of Netscape. Browsers based on Mozilla code is the second largest browser family on the Internet today, representing about 30% of the Internet community. Mozilla is not a Web browser.
Handout - HTML
Mozilla is a framework for building Web applications using Web standards like CSS,XML and so on. Mozilla code is used in Netscape 6 and 7, and in other Web browsers such as Firefox and Camino, chat clients, news clients, email clients, games, and other types of Web applications for Windows, Linux, and Mac. Mozilla is an open-source Web development project developing the program code used in the Mozilla Application Suite (Also known as SeaMonkey). The Mozilla Application Suite is a complete set of Web applications (browser, email client, news client, chat client and more). Browsers based on Mozilla code (Mozilla, Firefox, & Camino) is the second largest browser family on the Internet today, representing about 30% of the Internet community. Mozilla browsers are known to have very good Web standards support. Firefox Firefox is a new browser from Mozilla. It was released in 2004 and has grown to be the second most popular browser on the Internet. Mozilla is an open-source Web development project. The Mozilla Application Suite (also known as SeaMonkey) is a complete set of Web applications; a browser, a mail client, a news client, a chat client and more. Firefox is just a browser. With Firefox you cannot chat or read emails or news. This makes it smaller, faster and easier to use (but makes chat, email and news harder to use?). Firefox Features: Firefox has automatic Popup Blocking. This if fine for stopping annoying popup ads, but not so good for sites using popup windows in a good way. Tabbed Browsing is a modern and time saving feature. It makes it possible to view many Web pages in one browser window. Google Search with auto complete is built into Firefox's tool bar. Keywords for bookmarks with quick searches (e.g., type "goo xml tutorial" into the location bar and get a Google search page on "xml tutorial" in one step). Dictionary Tooltip - double-click any word to see its definition. Firefox has Improved Security. It is not integrated with the operating system and does not support ActiveX controls and VBScripts (features known to have security holes). A built-in modern Download Manager downloads files in the background to the desktop.
Handout - HTML
Firefox has Customizable Toolbars, allowing users to add and remove items as well as create new toolbars. With the Theme Manager, the users can change the look and feel of Firefox. Firefox keeps itself up-to-date. Smart Update searches for updates in the background and informs the user about available updates.
W3Schools Specifications
The World Wide Web Consortium (W3C) is an international consortium where Member organizations, a full-time staff, and the public work together to develop Web standards. Major Sections of the W3Schools Specification are: Recommendations: A W3C Recommendation is a specification or set of guidelines that, after extensive consensusbuilding, has received the endorsement of W3C Members and the Director. W3C recommends the wide deployment of its Recommendations. Proposed Recommendations: A Proposed Edited Recommendation is a technical report that W3C has published for community review of important changes, some of which may affect conformance. When there is consensus about the edits, the document is published as a Recommendation. Candidate Recommendations: A Candidate Recommendation is a document that W3C believes has been widely reviewed and satisfies the Working Group's technical requirements. W3C publishes a Candidate Recommendation to gather implementation experience. A Working Drafts: Working Draft is a document that W3C has published for review by the community, including W3C Members, the public, and other technical organizations. These are draft documents and may be updated, replaced or obsolete by other documents at any time. It is inappropriate to use W3C working drafts as reference material or to cite them as other than "work in progress". Links to go through the W3Schools specification in detail are the following: http://www.w3.org/TR/html401/ http://www.w3.org/MarkUp/
Handout - HTML
Summary
This session explain the orientation on types of browsers and basic understanding to W3C Schools specification.

1. List the most common browsers and their features. 2. What are the recent releases of W3Schools? 3. What do you understand by W3C specification?
Handout - HTML
Session 13: Debugging Tools for HTML and HTML 4.0

Learning Objectives
After completing the session, you will be able to: Describe the best practices of HTML Identify tools used for debugging like firebug and Web developer Explain HTML 4.0
Best Practices of HTML

The document must validate as HTML or XHTML. The document must have a DTD. The document must have a character encoding, either through a HTTP header or a meta tag. The document should have the language defined in the following ways: <html lang="en"> <html xml:lang="en"> <meta name="content-language" content="en"> o All attribute values should be quoted. Element and attribute names should use a consistent case to enhance readability, preferred is lowercase for XHTML compability. o Code should be well  to help maintaining developers to get a fast grip of the basic structure and key concepts. o Code should be consistently indented, tabs preferred over spaces. o Images, image maps and scripted content must have an alt-attribute with an appropriate value. Images should always specify their width and height to allow browsers to continue rendering while waiting for the image data. Some special characters like ", <, >, and & (especially within attributes like href or sac) must always be replaced by their character entities or numeric character references (NCR). script and style tags must have a type attribute. JavaScript code should be included using external files for caching and better maintenance.
Handout - HTML
Debugging Tools
1. Firebug: Firebug integrates with Firefox to put a wealth of Web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any Web page. Inspect and edit HTML: Firebug makes it simple to find HTML elements buried deep in the page. Once you've found what you are looking for. Firebug gives you a wealth of information, and lets you edit the HTML live.
Tweak CSS to perfection: Firebug's CSS tabs tell you everything you need to know about the styles in your Web pages, and if you do not like what it's telling you, you can make changes and see them take effect instantly.
Visualize CSS metrics: When your CSS boxes are not lining up correctly it can be difficult to understand why. Let Firebug be your eyes and it will measure and illustrate all the offsets, margins, borders, padding, and sizes for you. Monitor network activity: Your pages are taking a long time to load, but why? Did you go crazy and write too much JavaScript? Did you forget to compress your images? Are your ad partner's servers taking a siesta? Firebug breaks it all down for you file-by-file.
Handout - HTML
Debug and profile JavaScript: Firebug includes a powerful JavaScript debugger that lets you pause execution at any time and have look at the state of the world. If your code is a little sluggish, use the JavaScript profiler to measure performance and find bottlenecks fast. Quickly find errors: When things go wrong, Firebug lets you know immediately and gives you detailed and useful information about errors in JavaScript, CSS, and XML.
Explore the DOM: The Document Object Model is a great big hierarchy of objects and functions just waiting to be tickled by JavaScript. Firebug helps you find DOM objects quickly and then edit them on the fly. Execute JavaScript on the fly: The command line is one of the oldest tools in the programming toolbox. Firebug gives you a good old' fashioned command line for JavaScript complete with very modern amenities.
Handout - HTML
Logging for JavaScript: Having a fancy JavaScript debugger is great, but sometimes the fastest way to find bugs is just to dump as much information to the console as you can. Firebug gives you a set of powerful logging functions that help you get answers fast. This is how Firebug looks once installed in Firefox.
2. IEWebDeveloper: IE WebDeveloper is an add-on for Microsoft Internet Explorer. The rich Web debugging toolset allows you to inspect and edit the live HTML DOM and current cascaded styles, evaluate expressions and display error messages, log messages, explore source code of Webpage and monitor DHTML Event and HTTP Traffic. 3. Integrated Web Debugging Tools: Webpage Inspector: View, traverse, and even dynamically update that HTML DOM and Current Style directly in the browser window. Analyze the Web pages you are interested in and learn their tricks. Script Console: Use the JavaScript console to evaluate expressions, display error messages and locate the source code which causes the error. Logging for Web pages: You can log messages from JavaScript in one Web page directly to script console which can be used on same interface as Firebug (console.log, console.debug, and so on...?) Source Explorer: View and explore all HTML, CSS and JavaScript source code of the current Webpage. It gives one a centralized view of the functions, variables used in JavaScript source code. Event Log: Use the event log console to record the triggered event of WebBrowser, HTMLDocument, HTMLWindow and selected HTML Element. HTTP Monitor: The light edition of our IE HTTP Analyzer allow one to monitor HTTP/HTTPS traffic, know exactly what and when sent and received from Web application.
Handout - HTML
This is how an IE Web developer tool looks like:
Why use HTML 4.0

The original HTML was never intended to contain tags for formatting a document. HTML tags were intended to define the content of the document like: <p>This is a paragraph</p> <h1>This is a heading</h1> When tags like <font> and color attributes were added to the HTML 3.2 specification, it started a nightmare for Web developers. Development of large Web sites where fonts and color information had to be added to every single Web page, became a long, expensive and unduly painful process. New Elements in HTML 4 that have been introduced are: New Elements in HTML 4.0 Separation of Structure and Presentation Accessibility Internationalization Style Sheets Client-side Scripting Frames Advanced Tables
Handout - HTML
In HTML 4.0 all formatting can be removed from the HTML document and stored in a separate style sheet. As HTML 4.0 separates the presentation from the document structure, we have what we always needed: Total control of presentation layout without messing up the document content. The HTML 4.01 Strict DTD includes elements and attributes that have not been deprecated or do not appear in framesets The HTML 4.01 Transitional DTD includes everything in the strict DTD plus deprecated elements and attributes. The HTML 4.01 Frameset DTD includes everything in the transitional DTD plus frames as well.
Summary
This session explain best practices of HTML, debugging tools of various browsers, and features of HTML 4.0.

1. What are the various tools available in the various browsers for debugging in HTML? 2. Why should you use HTML4.0?
Handout - HTML
Glossary
AJAX: CSS: DHTML: DOM; ECMA: HTML: NaN: PC: URL: W3C: Asynchronous JavaScript and XML Cascading Style Sheets Dynamic Hyper Text Mark Up Language Document Object Model European Computer Manufacturers Association Hyper Text Mark Up Language Not a Number Personal Computer Uniform Resource Locator World Wide Web Consortium
Handout - HTML
References
Websites
www.w3schools.com
Books
HTML 4 for the World Wide Web: Visual QuickStart Guide Sams Teach Yourself HTML 4 in 24 Hours, Fourth Edition
Handout - HTML
STUDENT NOTES:

HTML Handout v1.0

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 Handout v1.0

Uploaded by

Copyright:

Available Formats

Handout: HTML

Version: HTML/Handout/0208/1.0 Date: 29-02-08

Session 02: Introduction to HTML

HTML Basic Tags

Handout - HTML Summary

Test Your Understanding

Session 04: Frames and Tables

4. topleft topright brtl botleft brtr

aligns content to top of cells aligns content to bottom of cells

Fig: View in the Browser

Test Your Understanding

Session 06: Meta Information

Meta Tags and Meta Headers

<META NAME="DESCRIPTION" CONTENT="...summary of Web page...">

<META HTTP-EQUIV="EXPIRES" CONTENT="Mon, 22 Jul 2002 11:12:01 GMT">

<META NAME="KEYWORDS" CONTENT="rock & roll">

<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">

<META NAME="GOOGLEBOT" CONTENT="NOARCHIVE">

Test Your Understanding

Session 08: Advanced HTML Tags

Handout - HTML Span Tag

<span title="ISN'T THIS SOOOOOO COOL!">HOVER YOUR MOUSE HERE.</span><BR>

Test Your Understanding

Session 10: Form Elements

Introduction to HTML Form

Java C++ Perl

Java C++ Perl

PL/SQL SQL DB2

text size= maxlength= name= value=

Test Your Understanding

Session 12: Various Browsers and W3C Schools Specification

Test Your Understanding

Session 13: Debugging Tools for HTML and HTML 4.0

Best Practices of HTML

This is how an IE Web developer tool looks like:

Why use HTML 4.0

Test Your Understanding

You might also like