Upload
ptguy
View
35
Download
4
Embed Size (px)
DESCRIPTION
HTML Handout v1.0
Citation preview
Handout: HTMLVersion: 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 CONTENTSIntroduction ...................................................................................................................................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 - HTMLDiv 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 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
Page 3 Copyright 2007, Cognizant Technology Solutions, All Rights Reserved C3: Protected
Handout - HTML
IntroductionAbout this ModuleThe module deals with introduction to HTML and explains about various HTML tags both basic and advanced tags.
Target AudienceThe module is specifically aimed at entry level trainee programmers.
Module ObjectivesAfter 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-requisiteThe module requires a prior knowledge of the following applications in a trainee: An idea about WebPages An idea about browsers
Page 4 Copyright 2007, Cognizant Technology Solutions, All Rights Reserved C3: Protected
Handout - HTML
Session 02: Introduction to HTMLLearning ObjectivesAfter completing the session, you will be able to: Define HTML tags and elements Describe basic tags used in HTML
IntroductionWhat 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 and The first tag in a pair is the start tag, the second tag is the end tag
Page 5 Copyright 2007, Cognizant Technology Solutions, All Rights Reserved C3: Protected
Handout - HTMLThe text between the start and end tags is the
element content HTML tags are not case sensitive; means the same
as 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. Example: My Home Page tag forces a line break
wherever you place it.The
tag is an empty tag. It has no end tag like . Example: This
is a sentence
with line breaks Horizontal Rule: The tag defines the horizontal
rule. Example: The hr tag defines a horizontal rule : This is a
paragraph 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
OutProblem Statement: Write a simple HTML code for displaying text
in different header styles and a paragraph having break tags in
between. Code: Header 2 Header 1 Header 3 Header 4 Header 5 Header
6 This is the first paragraph.
Again more of the same. This time the paragraph is aligned to the
left.
This is a good idea as it often makes the test easy to read 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.Page 8 Copyright 2007,
Cognizant Technology Solutions, All Rights Reserved C3:
ProtectedHandout - HTML SummaryThis session introduces you about
the basics of Web page designing.Test Your Understanding1. 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?Exercise1. Design a HTML page which uses basic tags.Page 9
Copyright 2007, Cognizant Technology Solutions, All Rights Reserved
C3: ProtectedHandout - HTMLSession 04: Frames and TablesLearning
ObjectivesAfter completing the session, you will be able to: Define
Frames and TablesFramesFrames 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: My Frames Page Page 10
Copyright 2007, Cognizant Technology Solutions, All Rights Reserved
C3: ProtectedHandout - HTMLHow 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 uTo 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 uThe preceding example has
now a frame divided into 3 frames using framesets.
Menupage.htm,welcomepage.htm and bottombanner.htm are three
different .html files.Page 11 Copyright 2007, Cognizant Technology
Solutions, All Rights Reserved C3: ProtectedHandout - HTMLTry It
OutProblem Statement: Write a simple HTML code for the various
framesets displayed here. 1. top bottomCode: 2. topleftright 3.
topleft toprightbotleftbotright Page 12 Copyright 2007, Cognizant
Technology Solutions, All Rights Reserved C3: ProtectedHandout -
HTML4. topleft topright brtl botleft brtrbotrbot TablesThe 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
tag. To insert a table on your page you simply add these tags where
you want the table to occur: The preceding table would be of no use
as it has no rows and no columns.Page 13 Copyright 2007, Cognizant
Technology Solutions, All Rights Reserved C3: ProtectedHandout -
HTMLROWS: To add rows to your table use the and tags. Example:
COLUMNS: You can divide rows into columns with and tags: Example:
This is row one, left side. This is row one, right side. This is
row two, left side. This is row two, right side. 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 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. DescriptionPage 14
Copyright 2007, Cognizant Technology Solutions, All Rights Reserved
C3: ProtectedHandout - HTMLProperty 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 tablealigns content to top of cells aligns content to bottom of
cellsThe 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: ROWSPAN and COLSPAN ROWSPAN Example Element 1
< !- -Element1 here takes 2 row spaces - -> Element 2 Element
3 Page 15 Copyright 2007, Cognizant Technology Solutions, All
Rights Reserved C3: ProtectedHandout - HTML
COLSPAN Example Element 1 Element 2 Element 3 Element 4 Fig: View
in the BrowserPage 16 Copyright 2007, Cognizant Technology
Solutions, All Rights Reserved C3: ProtectedHandout -
HTMLcellpadding and cellspacing: The space between cells in a table
is controlled by the cellspacing attribute for . 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: Element 1 Element 2 Element 3
Element 1 Element 2 Element 3 Cell padding: 40Cell spacing=15
pixels No cell padding or spacing Cell Alignment: Cells defined by
or 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.Page 17 Copyright 2007,
Cognizant Technology Solutions, All Rights Reserved C3:
ProtectedHandout - HTMLExample: Left Center Right Top Middle Bottom
Try It Out:Problem Statement: Create the following using all the
table tags.Page 18 Copyright 2007, Cognizant Technology Solutions,
All Rights Reserved C3: ProtectedHandout - HTMLCode: Title goes
here A D B E C F SummaryThis 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.Test Your Understanding1. What is
the difference between and tags? 2. How do you create data cells
that span a given number of rows and columns?Exercises1. Create the
following using table tags:Page 19 Copyright 2007, Cognizant
Technology Solutions, All Rights Reserved C3: ProtectedHandout -
HTMLSession 06: Meta InformationLearning ObjectivesAfter completing
the session, you will be able to: Define Meta Tags and Meta Headers
Explain Caching of PagesMeta Tags and Meta HeadersThe 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: This meta element defines keywords for your page: The
intention of the name and content attributes is to describe the
content of a page. Example: The meta attributes of this document
describe the document and its keywords. Page 20 Copyright 2007,
Cognizant Technology Solutions, All Rights Reserved C3:
ProtectedHandout - HTMLWhat does a Meta tag look like? Meta tags go
inside the element of your Web page, and take the following format:
Either: Or: 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: Marcia's Dog Training Page How it works
Notice that we used two Meta tags here, both within the 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: This lets you tell search engines and
browsers that you wrote this page!Page 21 Copyright 2007, Cognizant
Technology Solutions, All Rights Reserved C3: ProtectedHandout -
HTMLRefresh 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 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 PagesExample: 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.Page 22 Copyright 2007, Cognizant
Technology Solutions, All Rights Reserved C3: ProtectedHandout -
HTMLSome of the common Meta tags are listed here for your quick
reference: Tag Name Author Examples 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 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. Declares the primary
natural language(s) of the document. May be used by search engines
to categorize by language.cache-controlContentLanguage 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.CopyrightA copyright statement.Page 23 Copyright 2007,
Cognizant Technology Solutions, All Rights Reserved C3:
ProtectedHandout - HTMLTag NameExamplesDescription 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)DESCRIPTIONEXPIRESKeywordsThe 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.Page 24 Copyright 2007, Cognizant Technology
Solutions, All Rights Reserved C3: ProtectedHandout - HTMLTag
NameExamplesDescription 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 NOCACHEClients 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".RefreshSpecifies a delay in seconds
before the load, making this command useful for redirecting
browsers to other pages. ROBOTS 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.Page 25 Copyright 2007, Cognizant Technology
Solutions, All Rights Reserved C3: ProtectedHandout - HTMLTag
NameExamplesDescription 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.GOOGLEBOTTry It OutProblem Statement: Write a HTML document
to provide information inside a meta element describes the
document. Code: The meta attributes of this document identify the
author and the editor software. SummaryThese sessions states the
significance of Meta Tags and usage of Meta tags to cache
pages.Test Your Understanding1. 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?Exercises1. 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.Page 26
Copyright 2007, Cognizant Technology Solutions, All Rights Reserved
C3: ProtectedHandout - HTMLSession 08: Advanced HTML TagsLearning
ObjectivesAfter completing the session, you will be able to: Define
Div Tag, Span Tag, and I frame TagDiv TagThe tag in HTML is a tag
that defines logical divisions within the content of a page. What
this means is that a tag defines sections of a Web page to make it
easier to manage, style, and manipulate. You can use the tag when
you want to center a block of content or position a content block
on the page. The tag is a very powerful tool for Web developers.
The tag is a block-level element The tag can contain nearly any
other tag The tag cannot be inside tags How to use the DIV Tag: The
tag is not a replacement for tag. The tag is for paragraphs, only,
while the tag defines more general divisions within a document.
Don't replace tags with tags. One thing to keep in mind when using
the tag is that it breaks paragraphs. It is a good idea to label
your 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". It is always a good idea to close your
tags as soon as you open them. Then place the contents within the
element. If you nest your 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 you can't have a inside a
paragraph. Example: The div Tag This is some text in a div
section
This is some text in another div section
Page 27 Copyright 2007, Cognizant Technology Solutions, All Rights
Reserved C3: ProtectedHandout - HTMLOutput:Attributes of the tag:
The primary attributes of the 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)Page 28 Copyright 2007, Cognizant Technology Solutions,
All Rights Reserved C3: ProtectedHandout - HTMLContents: The
following tags are valid within the 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. Valid Context: The tag is valid within the following
tags: blockquote, body, button, center, dd, div, fieldset, form,
iframe, li, noframes, noscript, object, td, th Usage: Style
division Example: red text Justified text Example: 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. The earlier two examples were to show how can be used.
Even if you do not use style sheets or DHTML, one should get into
the habit of using the 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).ExerciseDesign a HTML
page to get the following output. Use only tag.Page 29 Copyright
2007, Cognizant Technology Solutions, All Rights Reserved C3:
ProtectedHandout - HTML Span TagThe tag is used to group
inline-elements in a document. It has very similar properties to
the tag, in that it changes the style of the text it encloses. But
without any style attributes, the tag would not change the enclosed
items at all. The tag is an inline-level element. The tag can only
contain other inline elements like abbr, strong, or tt. The tag can
be inside tags or tags. How to use tag: The 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 or most browsers will add space
around the element, because they are block elements. It is always a
good idea to close your tags as soon as you open them. Then place
the contents within the element. If you nest your tags, be sure
that you know where your content is going (in other words, which
SPAN it should be part of). Example: You can Here's What You Get
Example: Adding A Background Image to the Text: >Page 31
Copyright 2007, Cognizant Technology Solutions, All Rights Reserved
C3: ProtectedHandout - HTMLYou can add background image to your
textaHOVER YOUR MOUSE HERE.
ExerciseDesign the previous HTML page to get the following output.
Use both and tags.Page 32 Copyright 2007, Cognizant Technology
Solutions, All Rights Reserved C3: ProtectedHandout - HTMLI 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 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 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. - - > Example: This is the normal text in the
page.
Output:Page 33 Copyright 2007, Cognizant Technology Solutions, All
Rights Reserved C3: ProtectedHandout - HTMLAttributes of 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: SummaryThis session explains the
usage and implementation of tag, span>, tags in designing web
pages.Test Your Understanding1. 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?Exercise1. Create
an inline frame using all attributes of the tag.Page 34 Copyright
2007, Cognizant Technology Solutions, All Rights Reserved C3:
ProtectedHandout - HTMLSession 10: Form ElementsLearning
ObjectivesAfter completing the session, you will be able to:
Explain the introduction to HTML Form Define Tag and Form
ElementsIntroduction to HTML FormAn 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 TagA form is defined with the 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.Page 35 Copyright 2007,
Cognizant Technology Solutions, All Rights Reserved C3:
ProtectedHandout - HTMLNote: 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
windowName: 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 ElementsSome 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.
EXAMPLEPage 36 Copyright 2007, Cognizant Technology Solutions, All
Rights Reserved C3: ProtectedHandout - HTMLExample: How it Works:
Top of FormEnter 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 tag. Instead you enter a tag
where you want the text area to start and a closing 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 physicalEXPLANATION 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.EXAMPLEPage 37 Copyright 2007, Cognizant Technology
Solutions, All Rights Reserved C3: ProtectedHandout - HTMLExample:
MyPage
Java
C++
Perl
How It Works:Java C++ Perl4. 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. EXAMPLEPage 39 Copyright 2007, Cognizant Technology
Solutions, All Rights Reserved C3: ProtectedHandout - HTMLExample:
My Page
Java
C++
Perl PL/SQL
SQL
DB2
How it Works:Java C++ PerlPL/SQL SQL DB25. 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.Page 40 Copyright 2007, Cognizant Technology Solutions, All
Rights Reserved C3: ProtectedHandout - HTMLExample: My Page Fresh
Milk Old Cheese Hot Bread 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.
EXAMPLEtext size= maxlength= name= value=Page 41 Copyright 2007,
Cognizant Technology Solutions, All Rights Reserved C3:
ProtectedHandout - HTMLHTML 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.EXAMPLEButterResetSubmitTry It OutProblem 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: Type your first name:Page 42 Copyright 2007,
Cognizant Technology Solutions, All Rights Reserved C3:
ProtectedHandout - HTML
Type your last name:
If you click the "Submit" button, you will send your input to a new
page called form_action.asp. SummaryThis session explains about
various form elements and usage of forms in Web applications.Test
Your Understanding1. 2. 3. 4. 5. Which attribute lets the browser
know where to send the content from the form? Which attribute of
the 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.Exercises1. Write HTML
code to design this page using all possible form elements.Page 43
Copyright 2007, Cognizant Technology Solutions, All Rights Reserved
C3: ProtectedHandout - HTMLSession 12: Various Browsers and W3C
Schools SpecificationLearning ObjectivesAfter completing the
session, you will be able to: Explain various browsers Orientation
on W3 schools specificationVarious BrowsersInternet 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.Page 44 Copyright 2007, Cognizant Technology Solutions,
All Rights Reserved C3: ProtectedHandout - HTMLMozilla 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.Page 45 Copyright 2007, Cognizant Technology Solutions, All
Rights Reserved C3: ProtectedHandout - HTMLFirefox 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 SpecificationsThe 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/Page 46
Copyright 2007, Cognizant Technology Solutions, All Rights Reserved
C3: ProtectedHandout - HTMLSummaryThis session explain the
orientation on types of browsers and basic understanding to W3C
Schools specification.Test Your Understanding1. List the most
common browsers and their features. 2. What are the recent releases
of W3Schools? 3. What do you understand by W3C specification?Page
47 Copyright 2007, Cognizant Technology Solutions, All Rights
Reserved C3: ProtectedHandout - HTMLSession 13: Debugging Tools for
HTML and HTML 4.0Learning ObjectivesAfter 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.0Best Practices of HTMLThe 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: 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.Page 48 Copyright 2007,
Cognizant Technology Solutions, All Rights Reserved C3:
ProtectedHandout - HTMLDebugging Tools1. 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.Page 49
Copyright 2007, Cognizant Technology Solutions, All Rights Reserved
C3: ProtectedHandout - HTMLDebug 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.Page 50 Copyright 2007,
Cognizant Technology Solutions, All Rights Reserved C3:
ProtectedHandout - HTMLLogging 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.Page 51
Copyright 2007, Cognizant Technology Solutions, All Rights Reserved
C3: ProtectedHandout - HTMLThis is how an IE Web developer tool
looks like:Why use HTML 4.0The original HTML was never intended to
contain tags for formatting a document. HTML tags were intended to
define the content of the document like: This is a paragraph This
is a heading When tags like 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 TablesPage 52 Copyright 2007,
Cognizant Technology Solutions, All Rights Reserved C3:
ProtectedHandout - HTMLIn 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.SummaryThis session explain
best practices of HTML, debugging tools of various browsers, and
features of HTML 4.0.Test Your Understanding1. What are the various
tools available in the various browsers for debugging in HTML? 2.
Why should you use HTML4.0?Page 53 Copyright 2007, Cognizant
Technology Solutions, All Rights Reserved C3: ProtectedHandout -
HTMLGlossaryAJAX: 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
ConsortiumPage 54 Copyright 2007, Cognizant Technology Solutions,
All Rights Reserved C3: ProtectedHandout -
HTMLReferencesWebsiteswww.w3schools.comBooksHTML 4 for the World
Wide Web: Visual QuickStart Guide Sams Teach Yourself HTML 4 in 24
Hours, Fourth EditionPage 55 Copyright 2007, Cognizant Technology
Solutions, All Rights Reserved C3: ProtectedHandout - HTMLSTUDENT
NOTES:Page 56 Copyright 2007, Cognizant Technology Solutions, All
Rights Reserved C3: Protected