Create Web Pages

Using Editors
To create Web pages, you need to use software applications known as editors. The two types of editors are:
Text Editors GUI Editors

Text Editors
Text editors help to create Web pages by writing the HTML code. When using a text editor, the text file needs to be saved with the .html extension. Notepad is an example of a text editor. The following figure shows HTML code written in Notepad:

GUI Editors
GUI Editors:
are also known as What You See Is What You Get (WYSIWYG) editors. are user-friendly editors. can be used to create and edit the HTML code. provides various tools and components that enable you to create Web pages easily and quickly. GUI editors can be classified into two categories:
Page editors Site management editors

GUI Editors
Page editors are used to create individual Web pages but cannot be used to build Web sites. The two commonly used software programs that provide page-editing facility are as follows:
Netscape Composer
Netscape Composer is a Web page editor, which is similar to a word processing tool.

Microsoft FrontPage Express

a Web page editor that enables you to create and edit HTML documents

GUI Editors
Site management editors provides the additional functionality of Web site management along with Web page creation. Some software programs that provide site management facility are:
Macromedia Dreamweaver
Macromedia Dreamweaver helps you to build and publish Web sites. It provides a word processor-like interface that allows you to type text and arrange graphics on a Web page. It also provides an easy-to-use interface that makes use of various scripting languages and databases for creating dynamic Web sites.

Macromedia HomeSite
Macromedia HomeSite works both as a text-based HTML editor and a GUI editor.

Microsoft FrontPage
Microsoft FrontPage allows you to create and manage Web sites. It supports creation of tables, frames, and Cascading Style Sheets (CSS).

GUI Editors

Templates and Wizards: This feature allows you to create custom Web pages according to specifications. For example, you can create pages with predefined formats for single and multiple frame Web pages. Text Style options: This feature allows you to insert text in different font styles and alter text size and color. It also allows you to apply formatting, such as center align, boldface, and italics. Icon bars: This feature allows you to use the functions found in text-based editors with the help of easily identifiable graphic icons in the toolbar. Inline Images: This feature allows you to insert graphic images in a Web page. Hypertext Links: This feature allows you to create hypertext links to pages and files inside your Web site. It also allows you to create hypertext links to pages and files on the World Wide Web. Once the link has been created, you can preview the target page in a Web browser. Import HTML Pages: This feature allows you to open Web pages from the Internet and save them to a Web site or local file system. This feature also allows you to import all images on a Web page into a Web site or file system. Table Creation: This feature allows you to add tables to arrange data and organize the Web page layout. Publish Documents on the Internet

Front-End Considerations
The considerations involved with the visual interface of a Web page are called front-end considerations. The front-end considerations are:
Interface design

Images and graphics Tables and frames Back and forward buttons Popup menus

Drag and drop functions Keyboard shortcuts Hyperlinks

Design standards
Objective of the Web site Target market of the client to be addressed Sales strategy followed by the client Technologies used by the client and the target audience Media used by the client

Back-End Considerations
The considerations that enhance the users interest in the Web site, such as faster download of Web pages and easy accessibility of back-end databases, are called back-end considerations. Some important back-end considerations are:
Bandwidth
Bandwidth can be defined as the rate of data transfer over a network connection. Bandwidth is measured in bits per second (bps). A Web page usually contains references to other Web pages, files, graphics, and images. Therefore, whenever a user downloads a Web page, all the references of the Web page are also downloaded.

Download time
The download time of a Web page depends on the file size and the speed of the users network connection. The larger the file size, the more time it takes to download the Web page. Although the size of an HTML document is small, it takes a long time to download, if it has many reference files.

Understanding Hypertext Markup Language (HTML)

HTML is a collection of platform-independent styles used to create a Web document or a Web page. You can publish any type of information through the Web pages using HTML. HTML is a Standard Generalized Markup Language (SGML). Tim Berners Lee at CERN designed the original HTML document in 1990. HTML is an evolving language. The World Wide Web Consortium (W3C) is the standards organization that controls the various versions of HTML. The various specifications of HTML are:
Level 0 : Contains the basic structural elements and assumes that all Web browsers support all features. Level 1 : Contains advanced features including highlighted text and graphics that may or may not be supported depending on the Web browser capability. Level 2 : Contains features such as forms that make the Internet an interactive medium. Level 3 : Contains features such as frames, inline, video, sound, and animation. Level 4 : Allows the inclusion of multimedia scripts and supports Cascading Style Sheets. Cascading Style Sheets (CSS) are used to set the layout of a Web page.

Features of HTML
HTML enables you to:
Create a Web page using tags. Use graphics and display text in different fonts, sizes, and color. Enhance the presentation of the document using HTML elements. Create hyperlinks to navigate to different documents present on the Web. Display data in a tabular format. Create multiple windows in a Web page to display information from multiple sources in different windows.

Structure of an HTML Document

An HTML document can be created by combining various tags.
Tags are special markup codes enclosed in angle brackets that define the structure of the HTML document. An HTML document contains the following structural tags:
<!DOCTYPE> <HTML> <HEAD> <BODY> <SCRIPT>

<!DOCTYPE> Tag
The <!DOCTYPE> tag, represents the Document Type Declaration (DTD). This is the first tag in every HTML document. The Web browser uses the <!DOCTYPE> tag information to determine, what version of HTML has been used in the document. This is not a mandatory tag. The syntax of the <!DOCTYPE> tag is:
<!DOCTYPE HTML PUBLIC --//W3C//DTD HTML 4.0 Transional//EN>

<HTML> Tag
The <HTML> tag is the first HTML tag in an HTML document. The opening <HTML> and closing </HTML> tags mark the beginning and end of the Web page, thereby setting the boundary of the HTML document. Syntax is:
<HTML> content of the Web page </HTML>

<HEAD> Tag
The <HEAD> tag is contained within the <HTML> and </HTML> tags. It is used to describe the header of an HTML document. The header is the first section of an HTML document, where you can define the global settings for the document. A user can download the header information, such as the Web page title, file format, last modified date, and keywords of a document. This information can be used to refer or to generate a resource/information repository for later reference. The syntax of the <HEAD> tag is:
<HEAD> header content </HEAD>

The <HEAD> tag consists of the following tags:

<TITLE> tag <BASE> tag <LINK> tag <META> tag

<TITLE> Tag
The opening <TITLE> and closing </TITLE> tags enclose the title of the document that is displayed in the Web browsers title bar. An HTML document can have only one title. If you do not provide a title, most Web browsers will display the HTML document name as the default title of the Web page. The syntax of the <TITLE> tag is:
<HEAD> <TITLE>Hansani </TITLE> </HEAD>

<BASE> Tag
The <BASE> tag specifies the relative hyperlinks used in the body of an HTML document. This tag has the HREF attribute, which identifies the base URL. The syntax of <BASE> tag is:
<BASE HREF=www.kln.ac.lk/image/> =itbs.gif

<META> Tag
The <META> tag is an empty tag enclosed within the opening <HTML> and closing </HTML> tags. The <META> tag gives a short description of the contents of the Web page. You can specify the keywords in Web page by using the <META> tag. This enables search engines to easily classify and identify HTML documents without downloading the entire file. In addition, you can use the <META> tag to provide the author name and the authoring tool used in the document. You can also use the <META> tag to refresh the Web pages automatically.

<META> Tag
The syntax for using the <META> tag to provide keywords for search engines is:
<META NAME="Keywords" CONTENT="Keyword List">

The syntax for using the <META> tag to provide a detailed description of the Web page is:
<META NAME="Description" CONTENT="Description for the Web page">

An example using the <META> tag to name the author of a Web page is:
<META NAME="Author" CONTENT="Rosa Estelle Rodriguez">

The syntax for using the <META> tag to refresh a Web page automatically after a specified number of seconds is:
<META HTTP-EQUIV="Refresh" Content="Number of seconds"; URL="URL of the Web page">

<BODY> Tag
The <BODY> tag sets the boundary for an HTML document. When the Web page is displayed on the Web browser, the users can see the content enclosed within the opening <BODY> and closing </BODY> tags. The <BODY> tags enclose the actual HTML content, including the text, graphics, and forms. The syntax for using the <BODY> tag is:
<BODY> content </BODY>

The <BODY> tag mainly consists of <DIV> and <SPAN> tags.

The <DIV> tag is a block tag, which divides the structure of the HTML document into different sections. The <SPAN> tag is an inline tag used to mark content inline.

<SCRIPT> Tag
The <SCRIPT> tag specifies the scripting languages used in the Web page, such as VBScript or JavaScript. The <SCRIPT> tag is an optional tag. The content written within the <SCRIPT> tag is displayed as normal text in Web browsers that do not support scripting languages. To avoid this, you should include an HTML comment tag within the <SCRIPT> tag.

Formatting an HTML Document

Web pages can be formatted using various formatting tags. The two categories of formatting tags are:
Block level tags Text level tags

Apart from block level tags and text level tags, there are some special tags used to represent group of elements. These special tags are characterized as list tags.

Block Level Tags

The block level tags are:
Paragraph tag: <P> Line Break tag: <BR> Horizontal Rule tag: <HR> Heading tags: <H1> to <H6> Primitive Formatting tag: <PRE> Blockquote tag: < BLOCKQUOTE> Center tag: <Center>

Paragraph Tag
The <P> tag adds a new paragraph in the HTML document. The use of a <P> tag in a document implies that there is a break in the current paragraph and a new paragraph begins from there. The <P> tag is a container tag. A container tag uses both the opening and the closing tags. An example for using the <P> tag is:
<BODY> <P> This is the first paragraph. </P> <P> This is the second paragraph. </P> </BODY>

Line Break Tag

The <BR> tag adds a new line within a paragraph. The <BR> tag is an empty tag. An empty tag does not have a closing tag. An example for using the <BR> tag is:
<BODY> <P> This is the first paragraph. <BR> This is the first line break in the first paragraph. <BR> This is the second line break in the first paragraph. </P> <P> This is the second paragraph. </P> </BODY>

Horizontal Rule Tag

The <HR> tag adds a horizontal rule at any position in the Web page. A rule is a straight line. The <HR> tag is an empty tag. An example for using the <HR> tag is:
<BODY> <P> This is the first paragraph. <HR> <BR> This is the first line break in the first paragraph. <BR> This is the second line break in the first paragraph. </P> <P> This is the second paragraph. </P> </BODY>

You can change the size, width, and alignment of a horizontal rule by setting the respective attributes for the <HR> tag.

Horizontal Rule Tag

The following list shows the attributes and values that can be used with the <HR> tag:
SIZE:
The size of a horizontal rule is set in terms of number of pixels. Pixels are tiny squares resembling a mosaic pattern. They are the units of measurement of bitmap graphics. The default value of this attribute is 3.

WIDTH:
The width of a horizontal rule can be in pixels or a relative percentage of the document width. By default, the width of a horizontal rule is 100%, extending from the left margin to the right margin of the Web browser window.

Horizontal Rule Tag

ALIGN:
The alignment of a horizontal rule can be set to RIGHT, LEFT, or CENTER. The default value of this attribute is LEFT.

NOSHADE:
The shading effect of the horizontal rule is disabled by using the NOSHADE attribute. By default, the horizontal rule comes with a 3-D effect.

An example for setting attributes for the <HR> tag is:

<HR WIDTH=30% SIZE=15 ALIGN=Right color=Red NOSHADE>

Heading Tags
HTML defines six levels of headings. The Heading element can be used to specify the font, paragraph breaks before and after the heading, and the white space necessary to show the heading. The heading level ranges from <H1> to <H6>. An example for using the heading tags is:
<BODY> <H1> This is Heading1 </H1> <H2> This is Heading2 </H2> <H3> This is Heading3 </H3> <H4> This is Heading4 </H4> <H5> This is Heading5 </H5> <H6> This is Heading6 </H6> </BODY>

Heading Tags
<H2> <FONT Size=40 color=Cyan> <B><U><I> This is a Level 2 Heading </I></U></B> </FONT> </H2>

Primitive Formatting Tag

The <PRE> tag presents plain text files in their original form. The <PRE> tag is a container tag. This tag is used to add spaces and line breaks in an HTML document. In addition, this tag allows you to include fixed-width font in the HTML document. Fixed-width font is a font in which each character has equal width. An example of fixed-width font is Courier.

Primitive Formatting Tag

Consider the following code without the use of the <PRE> tag:
<BODY> <H3> Marks Detail </H3> SEM 1 ATHONY 40 ROSE 89
PETER SMITH MARTHA </BODY> 77 56 78

SEM 2 59 78
69 49 93

SEM 3 61 85
65 55 85

SEM 4 47 90
58 65 88

The following figure displays the output of the preceding code:

Primitive Formatting Tag

Consider the following code with the use of the <PRE> tag:
<BODY> <H3> Marks Detail </H3> <PRE> SEM 1 ATHONY 40 ROSE 89
PETER SMITH MARTHA 77 56 78

SEM 2 59 78
69 49 93

SEM 3 61 85
65 55 85

SEM 4 47 90
58 65 88

</PRE>
</BODY>

The following figure displays the output of the preceding code:

Primitive Formatting Tag

The following figure displays the output of the preceding code:

Blockquote Tag
This tag is used to contain text quoted from another source. Typically, it is indented left or right, and may use italic font style. The BLOCKQUOTE tag causes a paragraph break, and provides space above and below the quote. An example of using the <BLOCKQUOTE> tag is:
<BODY> The poem ends<BLOCKQUOTE> During your times of trial and suffering When you have seen only one set of footprints It was then that I carried you </BLOCKQUOTE> </BODY>

Blockquote Tag
The following figure displays the output of the preceding code:

Center Tag
All lines of text between the <CENTER>...</CENTER> tags are centered between the current left and right margins. An example of using the <CENTER> tag is:
<BODY> <CENTER> This really bothered him, and he questioned the Lord about it:<BR> LORD, you said that once I decided to follow you,<BR> Youd walk with me all the way. But I have noticed<BR> That during the most troublesome times in my life,<BR> There is only one set of footprints<BR> </CENTER> </BODY>

Text Level Tags

The text level tags are:
<FONT> tag
<BODY> <P ALIGN=Left> Using <FONT SIZE=6 FACE=Monotype Corsiva> the </FONT> FONT tag. </P> </BODY>

<B> tag
The <B> tag is used to make the text boldface. The <B> tag is a container tag.

<I> tag
The <I> tag is used to italicize the text. The <I> tag is a container tag.

<U> tag
The <U> tag is used to underline the text. The <U> tag is a container tag.

Text Level Tags

<SUB> and <SUP> tags
The <SUB> and <SUP> tags are used to subscript and superscript text, respectively. These two tags can be used to add mathematical and scientific formulae to a Web page. Both the <SUB> and <SUP> tags are container tags. An example of using the <SUB> and <SUP> tag is:
<BODY> <P> H <SUB> 2 </SUB> O is the chemical symbol of water.</P> <P> 9 <SUP> 3 </SUP> is equal to 729</P> </BODY>

The following figure displays the output of the preceding code:

Text Level Tags

<STRIKE> tag
The <STRIKE> tag is used to make text appear as strike through text. The <STRIKE> is a container tag.

List Tags
List tags:
are compound, block level tags, commonly used in HTML documents. have some attributes that enable you to manipulate the appearance of the lists and in turn the appearance of the Web page. can be nested.

The various types of lists used in HTML are:

Ordered or numbered lists Un-ordered or bulleted lists Directory lists Menu lists Definition lists

Ordered or Numbered Lists

An ordered list is a numbered list that represents a set of items in a sequence or an order. The tag for the ordered list is <OL>. The <OL> tag is a container tag. The <OL> tag contains individual list items, represented by the <LI> tag. By default, all <LI> tags within the <OL> and </OL> tags are separated by a break. An example of using the <OL> tag is:
<BODY> <OL> <LI>Click the Web button to open the URL window. <LI>Enter the URL number in the text field of the open URL window. The Web document you specified is displayed. <LI>Click highlighted text to move from one link to another. </OL> </BODY>

The following figure displays the output of the preceding code:

Un-ordered or Bullet Lists

An un-ordered list is a bulleted list used to represent a set of related items, which do not need to follow a specific sequence. The tags used to present the unordered list are <UL> and </UL>. These tags, like in the ordered list, also contain within them the <LI> tags to represent individual list items. An example of using the <UL> tag is:
<BODY> <UL> <LI>First list item <LI>Second list item <LI>Third list item </UL> </BODY>

Directory Lists
A directory list tag, <DIR>, is used to present a list of items containing up to 20 characters each. Items in a directory list may be arranged in columns, which are typically 24 characters wide. The empty tag, <LI>, and the list item to be displayed immediately follow the <DIR> tag. An example of using the <DIR> tag is:
<BODY> <DIR> <LI>A_H<LI>I_M<LI>M_R<LI>S_Z </DIR> </BODY>

Menu List Tag

The menu list tag displays a list of items, one item per line. A menu list must begin with a <MENU> tag that is immediately followed by a <LI> tag. An example of using the <MENU> tag is:
<BODY> <MENU> <LI>First item in the list <LI>Second item in the list <LI>Third item in the list </MENU> </BODY>

Definition List Tag

The definition list tag is used when a number of terms and definitions are to be included in the HTML document. The definition list tag is represented by <DL> tag. This container tag comprises two other tags <DT> and <DD>, where DT stands for Data Term and DD stands for Data Definition. The data term text is displayed on the left and the data definition term is displayed slightly to the right. There is a paragraph indent after the data term. An example of using the <DL> tag is:
<BODY> <DL> <DT>Term <DD>This is the definition of the first term. <DT>Term <DD>This is the definition of the second term. </DL> </BODY>

Definition List Tag

If the <DT> term does not fit in the <DT> column (one third of the display area), it may be extended across the Web page and the <DD> section moved to the next line. It may also be wrapped onto successive lines of the left-hand column. The opening list tag must be the <DL> tag, and must be immediately followed by the first term, <DT>. The definition list tag can be used with the COMPACT attribute when the list items are small and the entire list is large. If this attribute is not used the Web browser may leave white space between successive <DT>, <DD> pairs. The COMPACT attribute also reduces the width of the left-hand <DT> column. An example of using the <DL> tag with the use of the COMPACT attribute :
<BODY> <DL COMPACT > <DT>Term <DD>This is the definition of the first term. <DT>Term <DD>This is the definition of the second term. </DL> </BODY>

Introducing Hyperlinks
Hyperlinks are used to provide links to Web pages, image, multimedia files, and documents of applications Hyperlinks in HTML are created using the anchor tag. An anchor tag is represented by <A></A> tags. The attributes of the anchor tag are as follows:
HREF NAME TITLE METHODS TARGET

HREF Attribute
The HREF attribute marks the text between the opening and closing anchor tags (<A></A>), as a hyperlink. When the hyperlink is selected, the control moves to an HTML document specified by the value of the attribute. An example for using the <A> tag is:
Log on to The<A HREF= http://www.w3c.org/> World Wide Web Consortium site</A> for updated info on the HTML specifications.

In the preceding example, selecting the text, World Wide Web Consortium, takes the user to an HTML document located at http://www.w3c.org/. HREF= #identifier moves the control to another anchor in the same HTML document. Consider the following example:
The <A HREF= document.html#glossary>glossary</A> defines terms used in the document.

In the preceding example, clicking the text, glossary, takes the user to another anchor (<A NAME = glossary</A>) in document.html. If the anchor is in another document and the HREF attribute provides a partial URL, a new HTML document will be resolved from either the existing HTML document, or from the specified BASE address.

HREF Attribute
The following list shows the other forms of the HREF attribute permitted by Web browsers:
<A HREF= http://> : Links to another document located on a World Wide Web server <A HREF= ftp://> : Links to an FTP site <A HREF= gopher://> : Links to a gopher server <A HREF= news:> : Links to a newsgroup <A HREF= mailto:> : Links to the Web browsers mailing dialog (or registered mail program). This allows the user to send e-mail to the author of the document, or the email address specified in the mailto attribute. <A HREF= newsrc:> : Links to the specific newsrc file <A HREF= nntp://> : Links to a news server other than the one usually used by the user <A HREF= telnet://> : Initiates a telnet session (using an external application) to the machine <A HREF= wais://> : Links to a specified WAIS index server

TITLE Attribute
The TITLE attribute provides the title of an HTML document whose address is given by the HREF attribute. The TITLE attribute should be valid and unique for the destination document. The TITLE attribute is similar to a tool tip that is displayed along with the hyperlink. It provides more information pertaining to the hyperlink. The advantage of the TITLE attribute is that the HTML user agent may display the title of the document prior to retrieving it. For example, the title may appear as a margin note or on a small box while the mouse is over the anchor or while the document is being loaded. The syntax for the TITLE attribute is:
<A HREF=url.html TITLE=this is the Title of this hyperlink>Linl Web

pages</A>

TARGET Attribute
Browser windows can have names associated with them. Links in any window can refer to another window by name. When the link is activated, the referenced HTML document is displayed in the named window. If the window is not open, the Web browser opens a new window. The TARGET attribute of the anchor tag is used to open the HTML document in a specified frame or window. The syntax for the TARGET attribute is:
<A HREF= url.html TARGET= window_name>Link text</A>

NAME Attribute
The NAME attribute allows the anchor to be the target of a link. This attribute can be used when a link is text on the same Web page, or the text on another Web page. The link is created by simply typing # before the anchor name. The value of the NAME
<A href="#europe">Europe</A> <FONT face="Verdana" Size="10">Europe</FONT> <A name="europe"></A>

In the preceding code, the name of the continents will be displayed as hyperlinks. On clicking the Europe hyperlink, the Web page scrolls to the Europe section on the same Web page.

Web Site Hosting

Hosting provides storage space for uploading Web documents.
To make a Web site available over the Internet, host the site documents on the server space provided by an ISP. The requirements to host the Web site are:
The URL of the Web server. A user name and password to access and publish content of the Web page on the Web server.

Naming Conventions for Web Pages

Naming conventions are set of rules followed for naming Web pages. Hosting service providers have their own set of conventions supported by their Web server to ensure that the Web site functions properly. Some of the common default file names for home pages are:
index.html/ index.htm default.html/ default.htm welcome.html/ welcome.htm home.html/ home.htm

Page Colors and Backgrounds

The appearance of Web pages can be changed by adding colors to the background, text, fonts, tables, and links in the HTML file. HTML provides various tags and their associated attributes to set colors in your file.

Page Colors and Backgrounds

The following table lists the various tags and attributes to set colors in a Web page:
Tags and their associated attributes
<BODY BGCOLOR=colorname> Content </BODY> <BODY TEXT=colorvalue> Content </BODY> <BODY LINK=colorvalue VLINK=colorvalue ALINK=colorvalue> Content </BODY> <FONT COLOR=fontcolor>text</FONT>

Role Background Color

Text Color

Link Color

Font Color

Specifying Colors in HTML

Colors play a significant role in enhancing the appearance of the Web page. You can create a number of new colors by mixing the basic colors. Basic colors are categorized into:
Primary colors : red, green, and blue Secondary colors : yellow, cyan, and magenta Tertiary colors : purple, orange, and green-cyan

Hexadecimal Color Codes

Colors such as red, green, and blue have different intensities, which is known as the RGB values. The RGB values range between 0 and 255 for a color. These values are represented using hexadecimal codes in HTML. The hexadecimal number system is a base-16 system that represents numbers using 1 to 9, and the alphabets A,B,C,D,E, and F. The following figure shows the format of the hexadecimal color code for the Fuchsia:

Hexadecimal Color Codes

The following table lists some colors with their hexadecimal codes and corresponding RGB values:
Black White Red Green Blue Aqua Yellow Violet Sienna Snow Brown Chocolate Indigo Magenta #000000 #FFFFFF #FF0000 #00FF00 #0000FF #00FFFF #FFFF00 #EE82EE #A0522D #FFFAFA #A52A2A #D2691E #4B0082 #FF00FF 0,0,0 255,255,255 255,0,0 0,255,0 0,0,255 0,255,255 255,255,0 238,130,238 160, 82, 45 255, 250, 250 165, 42, 42 210, 105, 30 75,0,130 255,0,255

Web Safe Color Palette

Web-safe colors are the range of colors that are supported by the majority of computer platforms. A Web-safe color can be identified from its RGB values and hexadecimal codes.
A color whose RGB value is either 0 or multiples of 51 for each of its components, such as Red, Green, and Blue, is identified as a Web-safe color. Colors, whose hexadecimal codes for red, green, and blue are 00, 33, 66, 99, CC, or FF are considered Web-safe.

Introducing Images
Adding images to a Web site:
Helps to enhance its visual appeal. Enables the users to recollect facts faster.

The three formats of images popular on the Web are:

Graphic Interchange Format (GIF ) Joint Photographic Experts Group (JPEG ) Portable Network Graphics (PNG )

Introducing Images
HTML uses the <IMG> tag to place static as well as animated images in a Web page. The following two image formats can be inserted using the <IMG> tag:
GIF JPEG

The attributes of the <IMG> tag are:

ALIGN BORDER WIDTH HEIGHT HSPACE VSPACE ALT SRC

Image Maps
Image map is a technique of dividing an image into sections that link to different pages. The sections that link to different pages are known as hotspots, that act as hyperlinks. A large image could serve as a hyperlink to different Web pages both in the current Web site and across the WWW. Different kinds of hotspots can be created on a large image.

Image Maps
To create an image map in HTML, you need to make use of the <MAP> tag. The NAME attribute of the <MAP> tag specifies the name of the map referred to in the HTML document. The syntax for the <MAP> tag is:
<MAP NAME= mapname>

In the preceding syntax, mapname is the name of the map. The <MAP> tag is used with the <AREA> tag that is specified inside the <MAP> tag. The <AREA> tag specifies the properties for specific areas of an image. The attributes of the <AREA> tag are:
SHAPE: The SHAPE attribute can have the following values:
rect: Specifies a rectangular area in the image circle: Specifies a circular area in the image polygon: Specifies a polygonal area in the image default: Indicates that the portion of the image is not specified under any <AREA> tag

Image Maps
COORDS:
Coordinates are the height, the breadth, and the width of a shape. Each of the four values of the SHAPE attribute have different coordinate parameters in the COORDS attribute. A rectangle takes two pairs of x and y coordinates. The first pair sets the coordinates of the upper left corner of the rectangle. The second pair sets the coordinates for the lower right corner. A circle takes three values. The first two coordinates are the x and y coordinates for the centre of the circle. The third value is the radius of the circle. A polygon takes three or more pairs of coordinates for the x and y coordinate positions for each corner of the polygon. A default shape takes no coordinate parameters.

Image Maps
Consider the following code that uses the preceding attributes:
<HTML> <HEAD> <TITLE>Image Maps</ TITLE > </HEAD> <BODY>

<p><map name="FPMap0"> <AREA HREF="Homepage.html" shape="rect" coords="33, 46, 116, 80"> </map> <img border="0" src="1.JPG" usemap="#FPMap0" width="153 height="136"></p> </BODY> </HTML>

In the preceding code, FPMap0, is the name of the map in the HTML document. The HREF attribute specifies the name of the HTML document that is linked to the area specified by the SHAPE and COORDS attributes.

Image Techniques
The three important image techniques are as follows:
Image interlacing: Allows an image to be progressively displayed in the Web browser window while it is being downloaded. Image transparency: Allows an image to blend with the background color of the Web page. Animated GIFs: Allows several images to be displayed as a single animation sequence.

Special Characters in HTML

Some characters, such as the greater than (>), less than (<), and ampersand (&), have a special meaning, when used with HTML coding. Such characters are known as special characters in HTML. All special characters must be preceded with an ampersand (&) symbol to use them in a Web page. HTML provides the following two ways of referencing special characters:
Character reference Entity reference

Character Reference
In character reference, the American Standard Code for Information Interchange (ASCII) value need to be specified for the special character that is to be included in the HTML document. The ASCII value should be preceded by a numbers symbol (#). An ASCII value represents the English characters as numbers, with each letter assigned to a number from 0 to 127. This following code explains how to use the <HEAD> inside the <H1> tag using character reference:
<BODY> <H1> Using &#60 HEAD &#62 Tag </H1> </BODY>

Character Reference
The following table lists some characters and their corresponding ASCII values:
: ; < = > ? @ ! # $ % & 58 59 60 61 62 63 64 33 34 35 36 37 38

Entity Reference
In entity reference, the HTML entity such as <,>, & and , need to be specified for the character that include in the HTML file. HTML entities are special characters used in defining an HTML tag. This following code explains how to use the <HEAD> inside the <H1> tag using entity reference:
<H1> Using &lt; HEAD &gt; Tag </H1>

Entity Reference
The following list shows some of the special characters used in HTML, along with their entity reference:
& $ &#191; &#38; &#169; &#36 &#232; &#176; &#189; Inverted question mark Ampersand Copyright Currency sign Lower-case "e" with grave accent Degree Fraction one-half

Special Effect Tags

The tags that are used in HTML to enhance the visual appeal of the Web page are called special effect tags. Some special effect tags used in HTML are:
<CITE> <STRONG> <MARQUEE> <BLINK> <BIG> <SMALL>

<CITE> Tag
The <CITE> tag is used to cite a particular book, journal, or Web site as reference. The following example illustrates the use of the <CITE> tag:
<BODY> To get more information about the W3C, you can refer the URL: <CITE>http://WWW.W3.org/hypertext/WWW/MarkUp/htmlspec/index.html</CITE> </BODY>

The preceding code will generate a result as shown in the following figure:

<STRONG> Tag
The <STRONG> tag is used to provide strong emphasis or boldface to the text in an HTML document. The following example illustrates the use of the <STRONG> tag:
<P> One Audio CD is <STRONG>FREE</STRONG> with every purchase you make in this store</P>

The preceding code will generate a result as shown in the following figure:

<MARQUEE> Tag
The <MARQUEE> tag is used to make text slide or scroll in a particular region of an HTML document. The <MARQUEE> tag has attributes to set the behavior, direction, width, and color of the affected text. The following example illustrates the use of the <MARQUEE> tag:
<BODY> <MARQUEE BEHAVIOR= slide DIRECTION="left" WIDTH =250 BGCOLOR=cyan> This is a &lt;MARQUEE&gt; text</MARQUEE> </BODY>

<BLINK> Tag
The <BLINK> tag is used to flash particular content on and off in an HTML document. For example, you can design an advertisement using this tag. A blinking advertisement can effectively grab the attention of the user. However, Web page designers usually avoid using this tag irrelevantly, because a blinking text may distract the user from important and relevant content on the Web page. The following example illustrates the use of the <BLINK> tag:
<BODY> <BLINK> This is a blinking text. </BLINK> </BODY>

<BIG> Tag
The <BIG> tag is used to increase the font size of the text to the next larger size. The following example illustrates the use of the <BIG> tag:
<BODY> <BIG> This will increase the font to the next bigger size.</BIG> </BODY>

<SMALL> Tag
The <SMALL> tag is used to decrease the font size of the text to the next smaller size. The following example illustrates the use of the <SMALL> tag:
<BODY> <SMALL> This will decrease the font to the next smaller size.</SMALL> </BODY>

Introducing Tables
Tables are used to present data in a tabular format. Tables provide structured information to the end user. Tables consist of rows and columns. The <TABLE> tag is used to create a table.

Tables
The following list describes the basic tags required to create a table:
<TABLE>: Specifies the table tag for creating a table. The table tag starts with the <TABLE> tag and ends with a </TABLE> tag. <TH>: Specifies the table header. By default, header cells are in bold and are center aligned. A table header starts with the <TH> tag and ends with the </TH> tag. <TR>: Specifies the table row. The contents of the row are placed between the <TR></TR> container tags. The number of rows in a table depends on how many <TR> tags are contained within the table. <TD>: Specifies the table data that must be written within the <TD></TD> container tags. The <TD> tags are specified within the <TR> tags. <CAPTION>: Specifies the table caption that can be placed above or below the table. The <CAPTION></CAPTION> tag should appear inside the <TABLE></TABLE> tag. <THEAD>: Specifies the table header defined inside the <TABLE> tag. The <TH> and <CAPTION> tags are defined inside the <THEAD> tag. <TBODY>: Specifies the contents of a table. The <TR> and <TD> tags are defined inside the <TBODY> tag. <TFOOT>: Specifies the table footer defined inside the <TABLE> tag.

Attributes of the <TABLE> Tag

The <TABLE> tag provides the attributes to change the color and alignment of the table, and to specify the border of the table. The <TABLE> tag has the following attributes:
BORDER : BORDER=value CELLSPACING : CELLSPACING=value CELLPADDING : CELLPADDING=value WIDTH : WIDTH=<value or percent> HEIGHT : HEIGHT=<value or percent> ALIGN : <TABLE ALIGN=left>...</TABLE> VALIGN : <TABLE VALIGN=bottom></TABLE> BGCOLOR : <TABLE BGCOLOR=red></TABLE> BORDERCOLOR :

<TABLE BORDER=2 BORDERCOLOR=green></TABLE> BACKGROUND : <TABLE BACKGROUND="URL"> or <TABLE BACKGROUND= filename.gif>

FRAME RULES

Attributes of the <TABLE> Tag

Consider the following code that uses table attributes such as width, height, bgcolor, cellpadding, and cellspacing:
<HTML> <HEAD> <TITLE>Creating Tables</TITLE> </HEAD> <BODY> <BR><BR> <Center> <TABLE bgcolor=pink border="1" width=25 cellpadding="20" cellspacing="20" height=10> </Center> <TR> <TD>Cell 1</TD> <TD>Cell 2</TD> </TR> <TR> <TD>Cell 3</TD> <TD align="middle">Cell 4</TD> </TR> </TABLE> </BODY> </HTML>

Tables

Attributes of the <TABLE> Tag

The FRAME attribute affects the display of the table borders. It requires the BORDER attribute to be set to any value other than 0.
FRAME
Void : Removes all the external borders. Hsides: Displays external borders at the top and bottom of the table. Vsides : Displays external borders at the left and right side of the table. lhs : Displays external borders only at the left hand edges of the table. rhs : Displays external borders only at the right hand edges of the table. Both : Displays borders on both the sides of the table. Box : Displays a box around the table, which means on all the sides of the table.

Attributes of the <TABLE> Tag

The RULES attribute requires the BORDER value to be set to any value other than zero. It can only be used in tables where the <THEAD>, <TBODY>, and <TFOOT> tags have been set. It affects the display of the internal table borders. When the internal table borders are visible, they are referred to as rules.
RULES
none : Removes all the internal rules. basic : Displays horizontal borders among the <THEAD>, <TBODY>, and <TFOOT> sections. rows : Displays horizontal borders among all rows. all : Displays all the internal rules. Cols : Displays vertical borders among all columns.

Tables
The <TR> tag provides the following attributes:
ALIGN : <TR ALIGN=left></TR> VALIGN : <TR VALIGN=middle></TR> BGCOLOR : <TR BORDER=2 BGCOLOR=#FF0000></TR> BORDERCOLOR : <TR BORDER=2 BORDERCOLOR=#800000></TR>

In addition to the <TABLE> tag attributes, the <TD> tag provides the following attributes:
COLSPAN : <TD COLSPAN=2>This cell spans 2 columns</TD> ROWSPAN : <TD ROWSPAN=2>This cell spans two rows</TD> BACKGROUND : <TD BACKGROUND=filename.gif>

The <COLGROUP> tag is used to group the columns so that their alignment properties can be set together. This tag supports the following attributes:
ALIGN : <COLGROUP ALIGN=center/justify/left/right> VALIGN : <COLGROUP VALIGN=baseline/bottom/middle/top> SPAN : <COLGROUP SPAN=2 ALIGN=center VALIGN=top>

Tables
The <CAPTION> tag provides the ALIGN attribute.
<CAPTION ALIGN=top> Some Text </CAPTION>

BORDERCOLORLIGHT Attribute:
3-D effect to the table. This attribute gives a color to the top and left border of a table. Any of the standard colors or any color defined by the #RRGGBB hexadecimal combination can be used. It is mandatory to specify the BORDER attribute in the TABLE tag when using the BORDERCOLORLIGHT attribute. For example:
<TABLE BORDER=2 BORDERCOLORLIGHT=#FF0000> <TR><TD>Using BORDERCOLORLIGHT attribute</TD></TR> </TABLE>

The preceding example gives a bright shade of red to the top and left border of the table.

Tables
BORDERCOLORDARK Attribute:
This BORDERCOLORDARK attribute is the opposite of the BORDERCOLORLIGHT attribute. Note that the BORDERCOLORDARK attribute gives a color along with a 3-D effect to the right and bottom border of a table. Any of the colors or any color defined by the #RRGGBB hexadecimal combination can be used. It is mandatory to specify the BORDER attribute in the TABLE tag for this attribute to work. For example: <TABLE BORDER=2 BORDERCOLORDARK=#0000FF> <TR><TD>Using BORDERCOLORDARK attribute</TD></TR> </TABLE> The preceding example gives a dark shade of blue to the bottom and right border of the table.

Tables
NOFLOW Attribute:
The NOFLOW attribute of the <TABLE> tag disables the text flow around the table on a Web page.

NOWRAP Attribute:
If the NOWRAP attribute is used in any table cell (<TH> or <TD>), the lines within the cell cannot be broken to fit the width of the cell. This attribute should be used carefully because it might result in exceedingly wide cells.