Unit-2 Dynamic HTML

Dynamic HTML and Web Designing
Unit-2

In this chapter, you will learn

Introduction to Dynamic HYML and Web Designing Good web design Process of web publishing Phases of web site development STRUCTURE OF HTML documents, HTML Basic concepts HTML elements- Core attributes, Language attributes, Core events, Block level events, Text level events, Linking basics, Linking in HTML, Anchor Attributes, Semantic linking meta Information Image preliminaries, Image download issues, Image maps Introduction to Table: Backgrounds, color and text, fonts, layout with tables. Advanced layout: Frames and layers HTML and other media types. Audio support in browsers, video support, other binary formats. Style sheets, positioning with style sheets. HTML FORMS, form control, new and emerging form elements.
Dynamic HTML
DHTML stands for Dynamic HTML. It is NOT a language or a web standard. DHTML is the art of combining HTML, JavaScript, DOM, and CSS. According to the World Wide Web Consortium (W3C): "Dynamic HTML is a term used by some vendors to describe the combination of HTML, style sheets and scripts that allows documents to be animated."
DHTML Technologies
Below is a listing of DHTML technologies: HTML 4.0 The HTML 4.0 standard has rich support for dynamic content like: HTML supports JavaScript HTML supports the Document Object Model (DOM) HTML supports HTML Events HTML supports Cascading Style Sheets (CSS) DHTML is about using these features to create dynamic and interactive web pages. JavaScript JavaScript is the scripting standard for HTML. DHTML is about using JavaScript to control, access and manipulate HTML elements. HTML DOM The HTML DOM is the W3C standard Document Object Model for HTML. It defines a standard set of objects for HTML, and a standard way to access and manipulate them. DHTML is about using the DOM to access and manipulate HTML elements. CSS CSS is the W3C standard style and layout model for HTML. It allows web developers to control the style and layout of web pages. HTML 4 allows dynamic changes to CSS. DHTML is about using JavaScript and DOM to change the style and positioning of HTML elements.
Web Designing

Web design is the creation of Web pages and sites using HTML, CSS, JavaScript and other Web languages. Web design is just like design in general: it is the combination of lines, shapes, texture, and color to create an aesthetically pleasing or striking look. Web design is the work of creating design for Web pages. The process of designing Web pages, Web sites, Web applications or multimedia for the Web may utilize multiple disciplines, such as animation, authoring, communication design, corporate identity, graphic design, human-computer interaction, information architecture, interaction design, marketing, photography, search engine optimization and typography. Markup languages (such as HTML, XHTML and XML) Style sheet languages (such as CSS and XSL) Client-side scripting (such as JavaScript and VBScript) Server-side scripting (such as PHP and ASP) Database technologies (such as MySQL) Multimedia technologies (such as Flash and Silverlight)
Web pages and Web sites can be static pages, or can be programmed to be dynamic pages that automatically adapt content or visual appearance depending on a variety of factors, such as input from the end-user, input from the Webmaster or changes in the computing environment (such as the site's associated database having been modified).
Web Publishing Process

Web publishing, or "online publishing," is the process of publishing content on the Internet. It includes creating and uploading websites, updating web pages, and posting blogs online. The published content may include text, images, videos, and other types of media. In 1) 2) 3) order to publish content on the web, you need three things: Web development software An Internet connection A web server.
The software may be a professional web design program like Dreamweaver or a simple webbased interface like WordPress. The Internet connection serves as the medium for uploading the content to the web server. Large sites may use a dedicated web host, but many smaller sites often reside on shared servers, which host multiple websites. Most blogs are published on public web servers through a free service like Blogger. Since web publishing doesn't require physical materials such as paper and ink, it costs almost nothing to publish content on the web. Therefore, anyone with the three requirements above can be a web publisher. Additionally, the audience is limitless since content posted on the web can be viewed by anyone in the world with an Internet connection. These advantages of web publishing have led to a new era of personal publishing that was not possible before. Publishing Process The three essential steps to publish your website onto the web are: 1. Creating your website: First you have to create a website. Depending on your level on knowledge in web development you have the following options. Either you can create the site yourself through manual programming in an editor program like DreamWeaver, EditPlus or Notepad. Otherwise there are a number of open source alternatives available without any requirement of prior programming knowledge. 2. Get a hosting plan: Next step is to find somewhere online to put your website files and assign an address to that somewhere. Any given hosting plan include storage space on a web server and a domain name registration. Depending on what size your website has and potential traffic volume it's going to generate, you get a hosting plan based on three factors - storage space, bandwidth and CPU.

3. Upload your files/Publish your website: Upload your files to the root directory of your purchased web hosting server space. You can do this either by using your hosting account's inhouse file manager, but those are often slow and manage large file volume poorly. Our recommendation is to get your hands on a FTP client. Assuming that are new to site building and all that web developments entiles, for you to get a website up and running sooner rather than later, we suggest you follow the steps above. Use open source and the blessing of freeware. Get a hosting plan that matches your needs and publish your files through a FTP client like FireFtp. There will be things to remember and learn along the way, but if you follow this path, or these guidelines, creating a website will not seem so impossible.
Phases of Website Development

There are numerous steps in the web site design and development process. From gathering initial information, to the creation of your web site, and finally to maintenance to keep your web site up to date and current. The exact process will vary slightly from designer to designer, but the basics are generally the same as: Information Gathering Planning Design Development Testing and Delivery Maintenance
Information Gathering
The first step in designing a successful web site is to gather information. Many things need to be taken into consideration when the look and feel of your site is created. This first step is actually the most important one, as it involves a solid understanding of the company it is created for. It involves a good understanding of you - what your business goals and dreams are, and how the web can be utilized to help you achieve those goals. Certain things to consider are: Purpose: What is the purpose of the site? Do you want to provide information, promote a service, sell a product ? Goals: What do you hope to accomplish by building this web site? Two of the more common goals are either to make money or share information. Target Audience: Is there a specific group of people that will help you reach your goals? It is helpful to picture the ideal person you want to visit your web site. Consider their age, sex or interests - this will later help determine the best design style for your site. Content: What kind of information will the target audience be looking for on your site? Are they looking for specific information, a particular product or service, online ordering?
Planning
Using the information gathered from phase one, it is time to put together a plan for your web site. This is the point where a site map is developed. The site map is a list of all main topic areas of the site, as well as sub-topics, if applicable. This serves as a guide as to what content will be on the site, and is essential to developing a consistent, easy to understand navigational system. A good user interface creates an easy to navigate web site, and is the basis for this.

Designing
Drawing from the information gathered up to this point, its time to determine the look and feel of your site. Target audience is one of the key factors taken into consideration. A site aimed at teenagers, for example, will look much different than one meant for a financial institution. As part of the design phase, it is also important to incorporate elements such as the company logo or colors to help strengthen the identity of your company on the web site. Your web designer will create one or more prototype designs for your web site. This is typically a .jpg image of what the final design will look like. Often times you will be sent an email with the mock-ups for your web site, while other designers take it a step further by giving you access to a secure area of their web site meant for customers to view work in progress. In this phase, communication between both you and your designer is crucial to ensure that the final web site will match your needs and taste. It is important that you work closely with your designer, exchanging ideas, until you arrive at the final design for your web site.
Development
The developmental stage is the point where the web site itself is created. At this time, your web designer will take all of the individual graphic elements from the prototype and use them to create the actual, functional site. This is typically done by first developing the home page, followed by a shell for the interior pages. The shell serves as a template for the content pages of your site, as it contains the main navigational structure for the web site. Once the shell has been created, your designer will take your content and distribute it throughout the site, in the appropriate areas. Elements such as interactive contact forms, flash animations or ecommerce shopping carts are implemented and made functional during this phase, as well. This involves writing valid XHTML / CSS code that complies to current web standards, maximizing functionality, as well as accessibility for as large an audience as possible.
Testing
At this point, your web designer will attend to the final details and test your web site. They will test things such as the complete functionality of forms or other scripts, as well last testing for last minute compatibility issues (viewing differences between different web browsers), ensuring that your web site is optimized to be viewed properly in the most recent browser versions. A good web designer is one who is well versed in current standards for web site design and development. The basic technologies currently used are XHTML and CSS (Cascading Style Sheets). As part of testing, your designer should check to be sure that all of the code written for your web site validates. Valid code means that your site meets the current web development standards - this is helpful when checking for issues such as cross-browser compatibility as mentioned above. Once you give your web designer final approval, it is time to deliver the site. An FTP (File Transfer Protocol) program is used to upload the web site files to your server. Most web designers offer domain name registration and web hosting services as well. Once these accounts have been setup, and your web site uploaded to the server, the site should be put through one last run-through. This is just precautionary, to confirm that all files have been uploaded correctly, and that the site continues to be fully functional. This marks the official launch of your site, as it is now viewable to the public.
Maintenance
The development of your web site is not necessarily over, though. One way to bring repeat visitors to your site is to offer new content or products on a regular basis. Most web designers will be more than happy to continue working together with you, to update the information on

your web site. Many designers offer maintenance packages at reduced rates, based on how often you anticipate making changes or additions to your web site. If you prefer to be more hands on, and update your own content, there is something called a CMS (Content Management System) that can be implemented to your web site. This is something that would be decided upon during the Planning stage. With a CMS, your designer will utilize online software to develop a database driven site for you. A web site driven by a CMS gives you the ability to edit the content areas of the web site yourself. You are given access to a back-end administrative area, where you can use an online text editor (similar to a mini version of Microsoft Word). Youll be able to edit existing content this way, or if you are feeling more adventurous, you can even add new pages and content yourself. The possibilities are endless.
An Introduction to HTML (Hypertext Markup Language)

HTML is a computer language devised to allow website creation. These websites can then be viewed by anyone else connected to the Internet. It is relatively easy to learn, with the basics being accessible to most people in one sitting; and quite powerful in what it allows you to create. It is constantly undergoing revision and evolution to meet the demands and requirements of the growing Internet audience under the direction of the World Wide Web Consortium, W3C, the organization charged with designing and maintaining the language. The full meaning of HTML is HyperText Markup Language. HyperText is the method by which you move around on the web by clicking on special text called hyperlinks which bring you to the next page. The fact that it is hyper just means it is not linear i.e. you can go to any place on the Internet whenever you want by clicking on links. Markup is what HTML tags do to the text inside them. They mark it as a certain type of text (italicised text, for example). HTML is a Language, as it has code-words and syntax like any other language.
History of HTML A markup language combines text as well as coded instructions on how to format that text and the term "markup" originates from the traditional practice of 'marking up' the margins of a paper manuscript with printer's instructions. Nowadays, however, if you mention the term 'markup' to any knowledgeable web author, the first thing they are likely to think of is 'HTML'. In the Beginning HTML which is short for HyperText Markup Language is the official language of the World Wide Web and was first conceived in 1990. HTML is a product of SGML (Standard Generalized Markup Language) which is a complex, technical specification describing markup languages, especially those used in electronic document exchange, document management, and document publishing. HTML was originally created to allow those who were not specialized in SGML to publish and exchange scientific and other technical documents. HTML especially facilitated this exchange by

incorporating the ability to link documents electronically using hyperlinks. Thus the name Hypertext Markup Language. What is XHTML?
XHTML, or eXtensible HyperText Markup Language, is a later version of HTML that includes additional standards set forth by the international organization called the World Wide Web Consortium (W3C). Both HTML and XHTML can be understood by most browsers, but for increased accessibility to your Web pages, we recommend using XHTML when creating your Web pages.
How is HTML used?

The formatting rules (HTML tags) that are applied to content are interpreted by programs (browsers) designed to display Web pages as specified by the HTML.
Why is HTML important?

HTML is the foundation of all Web pages. For the same reasons we learn how to perform mathematical operations long-hand before we use a calculator, learning HTML can be useful. Because HTML pages (Web pages) are really just text-files they can be created with a simple text-editor (Notepad, WordPad, TextPad, SimpleText, Write). HTML editors may not always be available, warranting the use of a text- editor.
HTML Rules
An HTML document is built upon ASCII text that has been marked up with tags looking like: <TAGNAME> and </TAGNAME> The purpose of these tags is to specify an device-free . For example, first level headers would be marked as: <H1>This is a First Level Header</H1>
How HTML works on the Web

a) Your Computer: The browser on your computer sends a request for an HTML document from a remote server using addresses called URLs (Uniform Resource Locators). When the data is located and returned, your browser displays the web page (text and graphics) according to the HTML tags in the document. b) Connection to the Internet: A dial up modem in your computer or a direct high speed data transmission line connects your computer to an internet service provider. c) Internet Service Provider: Your internet service provider is probably an internet web server and is connected to all the other computers on the web. Your web server sends your request for an HTML document and sends back the file to you. d) Internet: The internet is a collection of web servers around the world. Each server has a URL and will forward your request on until it reaches the server you are looking for. When the data is returned to you, it may travel a totally different route over different computers. e) Remote server: The remote web server with the URL you are looking for has all the HTML files including text, graphics, sound, and video. It may also have gateway scripts that are programs running on the server to process data.
Dynamic HTML and Web Designing HTML Basic Concepts

Before you start writing code to write a web page, it is a good practice to plan ahead the appearance of the web page. An HTML document has two elements: 1. Document Content 2. Elements Document content is the information on a web page that the user will see. That information could be text or graphics, for example. As you start creating your own web pages, try finding out first what information you want to display and how you want to present it. Elements are the structures that describe parts of an HTML document. Elements are the HTML codes that control how the document content will appear. For example, the P element represents a paragraph while the EM element gives emphasized content. An element has three parts: a start tag, content, and an end tag. A tag is special text-"markup"--that is delimited by "<" and ">". An end tag includes a "/" after the "<". For example, the EM element has a start tag, <strong>, and an end tag, </strong>. The start and end tags surround the content of the EM element:
Note: Element names are and <STRONG> are all the same.
always
case-insensitive,
so <strong>, <sTRONG>,
An element's attributes define various properties for the element. For example, the element takes a face attribute to provide the different font style:
font
An attribute is included in the start tag only--never the end tag--and takes the form Attribute-name="Attribute-value". The attribute value is delimited by single or double quotes. The quotes are optional if the attribute value consists solely of letters in the range A-Z and a-z, digits (0-9), hyphens ("-"), periods ("."), underscores ("_"), and colons (":").
Note: Attribute names are case-insensitive, but attribute values may be case-sensitive.
Empty HTML Elements

HTML elements without content are called empty elements. Empty elements can be closed in the start tag. <br> is an empty element without a closing tag (it defines a line break). Adding a slash to the start tag, like <br />, is the proper way of closing empty elements, accepted by HTML, XHTML and XML. Even if <br> works in all browsers, writing <br /> instead is more future proof.
THE BASIC STRUCTURE OF HTML

<html>
<head>
The head
<title>Welcome to My First Homepage</title>

<meta name="author" content="my name"> <meta name="keywords" content="first homepage, html examples"> <meta name="description" content="This is my first homepage">
meta tags
</head> <body>
header <h1>Level 1 heading</h1>
The body
paragraph <p>This is the first paragraph</p>

<p>This is the second paragraph</p>
break <br>This is a new line link <a href="robot.html">This is a link</a> image <img src="robot.gif"> list <ul>
<li>first item</li> <li>second item</li> <li>...</li> </ul> comment 
</body> </html>
Dynamic HTML and Web Designing Structure of HTML Document

At the foundation of every HTML file is a set of structure tags that divide an HTML file into a head section and a body section. These two sections are enclosed between an opening <HTML> tag and end with the closing </HTML> tag. Following is a simple example of an HTML file that highlights the structure tags that are required within every XHTML file.
DOCTYPE Declaration
The DOCTYPE declaration is the first part of coding that you should enter in your HTML document. This is required if you wish to validate your document with the W3C's validation service. Web browsers need to know what version of HTML/XHTML your page is written in to process the code correctly. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> The HTML Tags All HTML documents contain a <html> and </html> pair of tags. These tags identify the document's contents as HTML to the browser. The <html> tag goes in the line right under your DOCTYPE declaration. </html> is the last line of coding in your document. Opening html tag: <html> The Head Tags-Opening Tag The <head> and </head> tags identify the document's head area. The information between these two tags is not visible on your page. Opening head tag: <Head>
10
The Title Tags The title tag creates the page title that is seen in the title bar of the web page. <Title>My Web Page</Title> Meta Tag The meta tags provide information about your web page. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> In addition to the title element, the head may also contain: base: defines base URLs for links or resources on the page, and target windows in which to open linked content link: refers to a resource of some kind, most often to a style sheet that provides instructions about how to style the various elements on the web page meta: provides additional information about the page; for example, which character encoding the page uses, a summary of the pages content, instructions to search engines about whether or not to index content, and so on object: represents a generic, multipurpose container for a media object script: used either to embed or refer to an external script style: provides an area for defining embedded (page-specific) CSS styles All of these elements are optional and can appear in any order within the head. Note that none of the elements listed here actually appear on the rendered page, but they are used to affect the content on the page, all of which is defined inside the body element. Closing Head Tag The closing head tag defines the end of the document's head section. </Head> The Body The body tags surround the body (contents) of your web page. <Body> The Body of the HTML Document </Body>
11
Closing HTML Tag The closing HTML tag is the last line in your HTML document. Don't put anything after this tag! Your page will not validate if you do. </Html>
Core Attributes
HTML 4.0 has a set of four core attributes: ID, CLASS, STYLE and TITLE attribute. 1. ID Attribute: The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z, digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods ("."). The value is case-sensitive. The following example uses the ID attribute to identify each of the first two paragraphs of a document: <P ID=firstparagraph>This is my first paragraph.</P> <P ID=secondparagraph>This is my second paragaph.</P> In the example, both paragraphs could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs: <style type="text/css"> #firstparagraph { font-weight:bold; } #secondparagraph { font-style:italic; } </style> Output: This is my first paragraph. This is my second paragraph. Note: A style sheet rule could be put <head>..<style>...</style>...</head>) of a document. in the head i.e.(
2. Class Attribute: The class attribute is used to indicate the class or classes that a tag might belong to. Like id, class is used to associate a tag with a name, so

<p id="FirstParagraph" class="important"> This is the first paragraph of text. </p> not only names the paragraph uniquely as FirstParagraph, but also indicates that this paragraph belongs to a class grouping called important. The main use of the class attribute is to relate a group of elements to various style sheet rules. For example, a style sheet rule such as <style type="text/css"> .important {background-color: yellow;} </style> would give all elements with the class attribute set to important a yellow background. Given that many elements can have the same class values, this may affect a large portion of the document. 3. Style Attribute The style attribute is used to add style sheet information directly to a tag. For example, <p style="font-size: 18pt; color: red;"> This is the first paragraph of text. </p> sets the font size of the paragraph to be 18 point, red text. Although the style attribute allows CSS rules to be added to an element with ease, it is preferable to use id or class to relate a document-wide or linked style sheet. 4. Title Attribute The title is used to provide advisory text about an element or its contents. In the case of the <p title="Introductory paragraph"> This is the first paragraph of text. </p> title attribute is set to indicate that this particular paragraph is the introductory paragraph. Browsers can display this advisory text in the form of a Tooltip, as shown here:
12
Tooltips set with title values are often found on links, form fields, images, and anywhere where an extra bit of information is required. The core attributes might not make a great deal of sense at this time because generally they are most useful with scripting and style sheets, but keep in mind that these four attributes are assumed with every tag that is introduced for the rest of this chapter.
Language Attributes
One major goal of HTML 4 was to provide better support for languages other than English. The use of other languages might require that text direction be changed from left to right across the screen to right to left. Nearly all HTML elements now support the dir attribute, which can be used to indicate text direction as either ltr (left to right) or rtl (right to left). For example:

<p dir="rtl"> This is a right to left paragraph. </p> Furthermore, mixed-language documents might become more common after support for nonASCII-based languages is improved within browsers. The use of the lang attribute enables document authors to indicate, down to the tag level, the language being used. For example, <p lang="fr">C'est Francais. </p> <p lang="en">This is English</p> Although the language attributes should be considered part of nearly every HTML element, in reality, these attributes are not widely supported by all browsers and are rarely used by document authors.
13
Core Events
The last major aspect of modern markup initially introduced by HTML 4 was the increased possibility of adding scripting to HTML documents. In preparation for a more dynamic Web, a set of core events has been associated with nearly every HTML element. Most of these events are associated with a user doing something. For example, the user clicking an object is associated with an onclick event attribute. So, <p onclick="alert('Ouch!');"> Press this paragraph </p> would associate a small bit of scripting code with the paragraph event, which would be triggered when the user clicks the paragraph. In reality, the event model is not fully supported by all browsers for all tags, so the previous example might not do much of anything.
14
Linking Basis
The acronym HTML stands for hypertext, or text that is linked to other information. HTML enables us to link to other Web pages, as well as graphics, multimedia, e-mail addresses, newsgroups, and downloadable files. Anything you can access through your browser can be linked to from within an HTML document. Web pages can contain links that take you directly to other pages and even specific parts of a given page. These links are known as hyperlinks. A hyperlink is text, an image, or any other object in an HTML document that can be clicked in order to gain access to another web document. Normally, links are distinguished as being external or internal to the current page. External web site link provides access to another web site that is not part of the current web site, such as going to www.yahoo.com from our current website mypage.html. An internal web site link provides access to another web page which is apart of the original web site, such as going to the next article in this guide from this web page. Finally, an internal document section link points to a region within a web page document.
Linking Documents - The <a> Element:

A link is specified using the <a> element. This element is called anchor tag as well. Anything between the opening <a> tag and the closing </a> tag becomes part of the link and a user can click that part to reach to the linked document. Following is the simple syntax to use this tag.
External Linking
The <a> tag itself doesnt serve much purpose without its attributes. The most common attribute is href, which is short for hypertext reference: it tells the browser where to find the information to which you are linking. The text included in between the opening and closing a tag is what the person viewing your Web page can click. In most cases, this text is highlighted as a different color from the surrounding text and is underlined, as shown in Figure.
15
Anchor Attributes:
Following are most frequently used attributes for <a> tag. href: specifies the URL of the target of a hyperlink. Its value is any valid document URL, absolute or relative, including a fragment identifier or a JavaScript code fragment. target: specify where to display the contents of a selected hyperlink. If set to "_blank" then a new window will be opened to display the loaded page, if set to "_self" then loads the new page in current window. By default its "_self", if set to "_name" then open the link in the window of that name. name & id: attributes places a label within a document. When that label is used in a link to that document, it is the equivalent of telling the browser to goto that label. event: attributes like onClick, onMouseOver etc. are used to trigger any Javascript or VBscript code. title: attribute lets you specify a title for the document to which you are linking. The value of the attribute is any string, enclosed in quotation marks. The browser might use it when displaying the link, perhaps flashing the title when the mouse passes over the link.
Internal Linking
Base Path for Links: It is not required to give a complete URL for every link. You can get rid of it if you will use <base> tag in your header. This tag is used to give a base path for all the links. So your browser will concatenate given relative path to this base path and will make a complete URL. For example we have used following base tag in all the pages at Ometasystems.com: <head> <base href="http://www.ometasystems.com/"> </head> So now if you will use <a href="/html/index.htm" then it will be considered as <a href="http://www.ometasystems.com/html/index.htm". In deciding what to use as the value of your href attribute, consider what type of link you want to use. Two basic types of links exist.

Absolute Relative
16
Absolute Links
Absolute links are those that include the entire pathname. In most cases, you use absolute links when linking to pages or sites that are not part of your own Web site. For example, if you are linking from your Web site to Yahoo!, you type http://www.yahoo.com as your link.
Relative Links
Relative links are called so because you dont include the entire pathname of the page to which you are linking. Instead, the pathname you use is relative to the current page. Relative links are most commonly used when you want to link from one page in your site to another. Heres an example of what a relative link might look like: <a href="contactme.html">Contact Me</a> This link looks for the contactme.html file in the same folder that contains this page. If you were linking to a file in another folder below the current one, the value of your href might look like this: <a href="wendy/contactme.html">Contact Me</a>
Links to Sections within the Same Page

Sometimes you may want to link to a section of text within a page on your Web site. To link to a section of a Web page, you must first give that section a name.

Create an Anchor
An anchor is a place within a page that is given a special name, enabling you to link to it later. Without first naming a section, you cannot link to it. Here is an example of an anchor:
17
In this example, the phrase in between the opening and closing a tag is displayed in the Web page and labels the anchor as Section 1.
Link to an Anchor
To create the link to an anchor, you also use the a tag and the href attribute, as you would when creating any other type of link. To finish the link, you need to include a hash symbol (#) and the anchor name as the value of the href attribute.
Lets us create a program to link to different sections of the page.
18
If you need to create a link to a specific section with another page (not the one you are currently working on), then you use that pages filename and the anchor name separated by a hash mark (#), as in the following example. <a href="genealogy.html#intro">View names beginning with an "A" on our genealogy page.</a> In this case, the browser will first look for genealogy.html and then locate an anchor named intro on that page.
Target Windows
Have you ever visited a Web site and noticed that a second instance of the Web browser opened when you clicked a link? This happens when Web developers use the target attribute to load links in a browser window other than the one you are currently using. For example, you might want to offer visitors to your site a link to search Yahoo!, but you dont want to encourage them to leave your site. If you use _blank as the value of the target attribute in your link to Yahoo!, the browser will launch a new browser window to load http://www.yahoo.com.

Links to E-mail Addresses
When you want to give someone easy access to your e-mail address, you can include it on your page as a mailto link. This means instead of using http:// in front of your links, you use mailto: to preface youre-mail addresses.
19
Clicking this link in a browser causes the visitors e-mail program to launch. Then it opens a new e-mail message and places your e-mail address in the To: box of that message. Setting Link Colors: You can use three more attributes of the body tag to customize the three link colors of a Web page: normal link colors (link), visited link colors (vlink) and active link colors (alink). <body bgcolor="#ffffff" text="#000000" link="#003366" vlink="#999999" alink="#ff33cc">
Note: Default Link Colors: In most cases, the default link color for browsers is blue. The
default visited link color is purple, and the active link color is red. Remember, as with many other features of Web browsers, the user ultimately controls these default colors.
Semantic Linking Meta Information

The Semantic Web is an evolving development of the World Wide Web in which the meaning (semantics) of information and services on the web is defined, making it possible for the web to understand and satisfy the requests of people and machines to use the web content. It derives from World Wide Web Consortium director Sir Tim Berners-Lee's vision of the Web as a universal medium for data, information, and knowledge exchange. At its core, the semantic web comprises a set of design principles, collaborative working groups, and a variety of enabling technologies. Some elements of the semantic web are expressed as prospective future possibilities that are yet to be implemented or realized. Other elements of the semantic web are expressed in formal specifications. Some of these include Resource Description Framework (RDF), a variety of data interchange formats (e.g. RDF/XML, N3, Turtle, N-Triples), and notations such as RDF Schema (RDFS) and the Web Ontology Language (OWL), all of which are intended to provide a formal description of concepts, terms, and relationships within a given knowledge domain.
20
Image Preliminaries
So far in this book, you have created text-only Web pages. Theyre perfectly functional, but a bit dull. Web pages are more interesting and attractive when they include graphics. Much of the Webs popularity is due to its ability to present graphical content rather than only text, and even a few well placed graphics can make a huge difference in the look of a web page. Graphics of any size increase the time it takes to download a page, however, so you should use them with care to avoid making your pages awkward to access. Images appear on web pages in two ways: as part of the inline content or as tiling background images. Background images are added using background attribute in body tag or using Cascading Style Sheets. Inline images may be used on web pages in several ways: As a simple image. An image can be used on a web page much as it is used in print, as a static image that adds information, such as a company logo or an illustration. As a link. As we saw in the previous chapter, an image can be used as a link to another document by placing it in the anchor element. As an imagemap. An imagemap is a single image that contains multiple links (hotspots) that link to other documents. Well look at the markup used to add clickable areas to images in this chapter as well.
Which image format is suitable for you? The most common and most widely supported image file types are GIF: The Graphics Interchange Format (GIF) was the earliest format use in inline images on the Web. GIF format has the ability to encapsulate several images within one file, giving the format animation functionality. The GIF format has the following characteristics: Supports up to 8-bit color (256 colors) Supports transparency Is stored in a compressed, lossless format Can be interlaced and used for rudimentary animations JPEG: JPEG is the acronym for Joint Photographic Experts Group and it was created specifically for photographic imagery and shouldnt be used for flat-color graphics. JPEG is a commonly used method of lossy compression for digital photography (image). With JPEG, you get to keep all your colors, but you dont get to keep all the data about the image. Supports 24-bit color (64,000 colors) Does not support transparency Is stored using a lossy compression format; the smaller the file, the lower the quality of the Image. Can be stored in a progressive format
PNG: The Portable Network Graphics, or PNG format, was developed exclusively for the Web and is in the public domain. The PNG format takes advantage of a clever way of storing the information about the image so you dont lose color and you dont lose image quality; it is a lossless format. The only drawback is, because the standard is so new, only fourth-generation and later browsers support PNG graphics. The PNG format has the following characteristics: Supports 24-bit color (64,000 colors) Supports transparency Is stored using a lossless compression scheme Can be stored and displayed in interlaced format

The Img Tag and src Attribute
In HTML, images are defined with the <img> tag. The img tag is empty, which means that it contains attributes only and it has no closing tag. To display an image on a page, you need to use the src attribute, src stands for source. The value of the src attribute is the URL of the image you want to display on your page. The syntax of defining an image:
21
The URL points to the location or address where the image is stored. The form of the URL may be either an absolute URL or a relative URL.
Change the size of an Image

After you start adding several images to your Web pages, you may notice they sometimes cause the browser to wait a little while before displaying the page. Because they dont know the size of the image, some browsers actually wait until the images are all loaded before displaying the Web page.
Therefore, you can help speed the display of your Web pages by telling the browser the sizes of your images right within the img tag. You do so with the height and width attributes.
The alt and title Attribute

The alt attribute is required to specify a text alternative for the image in case the user cannot see the image. Often referred to as alt text, it is important that the value of this attribute really describes the image. Two common reasons why images are not visible to users are: Because the browser did not download the file correctly; the file cannot be found Because the user has visual impairment that prevents him or her from seeing the image

Sometimes images do not convey any information, and are only used to enhance the layout of the page. (For example, you might have an image that is just a design element but does not add any information to the page.) Then the alt attribute should still be used but given no value, as follows:
22
In addition to the alt attribute, its a good idea to add the title attribute to your img tag. While the alt attribute specifies alternative text for images in case the images dont load, the title attribute can be added to images as well as links and other page elements. It serves as a quick tip for users to briefly explain the contents of the page element or, in this case, the image. The greatest benefit in using the title attribute is that its contents are displayed as tool tips in all browsers.
The border Attribute (deprecated)

To apply borders to a graphic, add the border attribute to the <img/> tag, and specify the appropriate properties. <IMG SRC="book11.jpg" BORDER=0> <IMG SRC="book11.jpg" BORDER=1> <IMG SRC="book11.jpg" BORDER=2> If the attribute is not used, there will not be a border unless the image is used as a link, in which case you could specify border=0
Align the Image with an align attribute

By default, the browser displays the image inline. Thus, the browser displays it immediately to the right of any text or any other object that immediately precedes the image. Take a look at Figure, for example. It shows the same image three different times. Each time, the image is shown inline. That is, the browser displays the image immediately to the right of any text preceding it as seen below.
Aligning Text with an Inline Image

By default, when you insert an image inline with text, the text is aligned with the bottom of the image. You can change it, though, using the <IMG> tag's ALIGN attribute. Table describes each value you can assign to this attribute. Value TOP Description Aligns the text with the top of the image

MIDDLE BOTTOM Aligns the text with the middle of the image Aligns the text with the bottom of the image
23
Table 7.2 Values for the ALIGN Attribute
Dynamic HTML and Web Designing Positioning an Image on the Web Page
By default, the browser displays images inline. That is, it displays an image immediately to the right of the previous content. Text does not wrap around it. You can display an image on the left or right side of the Web page, however, allowing the surrounding content to flow around the image. This type of image is called a floating image. You create a floating image by using the <IMG> tag's ALIGN attribute. This is the same attribute you use to align the surrounding text with an
24
image. Table describes each value you can assign to this attribute.
Value LEFT RIGHT
Description Displays image on left side and surrounding flows around the image Displays image on right side of the window and surrounding flows around the image Table 7.3 Values for the ALIGN Attribute
Importance of <br> Tag

In flowing text around an image, there may be a situation in which the designer wants to clear the text flow around the image. To deal with such problems, a new attribute called CLEAR was added to the <BR> Element, this attribute now part of the HTML standard. The CLEAR attribute can be set to LEFT, RIGHT, ALL, or NONE and will clear the gutter around an inline object like an image. For example, imagine the fragment <IMG SRC="book. jpg" ALIGN="RIGHT"> with text wrapping around it. If <BR CLEAR="RIGHT"> is included in the text and the wrapped text is still wrapping around the image, the text will be cleared to pass the image.
Add Space around Images

If you need to add some buffer space around an image, you can use the vspace and hspace attributes. The vspace attribute enables you to add vertical space above and below an image, while the hspace attributes add horizontal space to the right and left of

an image. Both attributes require values in pixel dimensions.
25

Hyperlink your Image
In the previous chapter, you learned how to create text hyperlinks using the <a> tag. Recall that you place the URL in the opening <a> tag, and then you place the hyperlink text between the <a> and </a> tags. You create a graphical hyperlink in much the same way, by placing an <img> tag in an <a> tag like this:
26
Add a Background Graphic

Instead of placing a graphic inline with the text, you may want to use it to form the background of a web page. A background graphic can make your web pages much more colorful and dramatic, but you must make sure that the graphic neither obscures the text of the page nor clashes with any graphics you place inline. To add a background image, add the background attribute to the <body> tag, and specify the filename in double quotation marks. <body background=picture.jpg>
27
Image Maps
Image maps allow you to specify several links that correspond to different areas of one single image, so that when users click different parts of the image they get taken to different pages. There are two types of image maps: Server-side image maps Client-side image maps
In the server-side image map, the user clicks on an image but the server must decode where the user clicked before the destination page (if any) is loaded. With client-side image maps, all of the map information, which regions map to which URLs can be specified in the same HTML file that contains the image. Including the map data with the image and letting the browser decode it. It has several advantages, including 1. There is no need to visit a server to determine the destination, so links are resolved faster. 2. Destination URLs can be shown in the status box as the users pointer moves over the image. 3. Image maps can be created and tested locally, without requiring a server or system administration support. 4. Client-side image maps can be created so that they present an alternative text menu to users of text-only browsers. Client-Side Image Maps using <map> and <area> In this, the image that is going to form the map is inserted into the page using the <img/> element as normal, except it carries an extra attribute called usemap. The value of the usemap attribute is the value of the name attributes on the <map> element, which you are about to meet, preceded by a pound or hash sign. The <map> element actually creates the map for the image and usually follows directly after the <img /> element. It acts as a container for the <area> elements that actually define the clickable hotspots. The <map> element carries only one attribute, the name attribute, which is the name that identifies the map. This is how the <img /> element knows which <map> element to use. The <area> element specifies the shape and the coordinates that define the boundaries of each clickable hot - spot.
Heres an example from the image map that was used for the image in Figure.
28
<html> <body> <p> It is an example of Image Map </p> <img src="ImageMap.gif" alt="Iamge Map" border=0 />
usemap="#gallery"
<map name="gallery"> <area shape="rect" coords="5,13,122,157" href="bike.html" target="_self"> <area shape="rect" coords="122,12,246,157" href="car.html" target="_self"> <area shape="rect" coords="6,159,121,294" href="book.html" target="_self"> <area shape="rect" coords="124,157,243,299" nohref="car.html" > </map> </body> </html> Advantages of Image Maps Since an image-map is one large image, you can place links in it the way you want without worrying about layout issues. Lesser HTML scripting is involved since there are programs available that will generate the code. Image map creation is quite simple if you use a program such as MapThis.
Disadvantages of Image Maps An image-map takes only one ALT attribute. Thus, it's not possible to have different ALT attributes for different links. Visitors with disability or those using text based browsers might not appreciate this. No interactivity is possible. You can't have separate mouseovers for individual links. An image map is one large image and if its not optimized properly, will take a long time to download.
Layout with Tables

Tables are a powerful HTML tool that can be used in many ways. In most applications, a table is commonly used to present tabular information such as schedules, statistics, calendars, etc. In the world of HTML, a table is also used for these purposes, but it is more commonly used for organizing the content of complex web pages. Many web designers prefer to create on overall web site layout through the use of a single table. A table lets web designers make use of rows and columns so they can specify precisely where text, images, and objects are to be placed within their documents.
Understand How Tables Work and When to Use Them

Quite simply, a table is a section of information, broken up into columns and/or rows of blocks, called cells. (See Figure 6-1). A cell is the basic unit of a table. It is formed by the intersection of a row and a column. A row is a line of cells running from left to right. A column is a stack of cells running up and down. The border is the rectangle that defines each cell and the outside of the table.
29
Figure 6-1
Create the Tables Structure

To create a table, you use the following tags: The table tag is a container for every other tag used to create a table in HTML. The opening <table> and closing </table> tags should be placed at the beginning and the end of your table. The <tr> (table row) tag marks the start of each row, and the </tr> tag marks the end of each row. The number of pairs of <tr> and </tr> tags you use controls the number of rows in the table. The <th> tag stands for table header. An optional tag used instead of the td tag, this tag defines a cell containing header information. By default, the content in header cells is\ bolded and centered. The <td> (table data) tag marks the start of each cell within a row, and then the </td> tag marks the end of each cell. The number of pairs of <td> and </td> tags controls the number of cells in the row, and thus controls the number of columns. <table> <tr><td> Cell 1</td> <td> Cell 2 </td> </tr> <tr><td> Cell 1 </td> <td> Cell 2 </td><td> Cell 3 </td></tr> <tr><td> Cell 1 </td></tr> </table>
Opening and closing table tags surround the entire section of code. This tells the browser that everything inside these tags belongs in the table. And there are opening and closing tr tags for each row in the table. These surround td or th tags, which, in turn, contain the actual content to be displayed by the browser.
Format Tables within Web Pages

You may have noticed by now that all the text in a table appears aligned to the left side of each cell. This, and may other features of a table, can be easily customized with a few table attributes or a style sheet.
Borders
Tables, by nature of their design, have internal and external borders. By default, most recent browsers set the border size to zero, making them invisible. However, borders can be quite

useful for tables of statistical information, for example, where its necessary to see the columns to understand the data better. The key is understanding the three attributes related to the use of these borders. The border Attribute To set the border width for the outside border of a table, add the border attribute to the opening <table> tag, and specify the number of pixels for the width of the border. Specifying a border width without a border color makes the browser display the border in its default color, which is usually gray. The best way to set border color is to use CSS. For example, to create a border five pixels wide around the table: <table border="5" style="border-color:blue">
30
The frame Attribute To control which outside borders are displayed for a table, add the frame attribute to the opening <table> tag, and specify one of the values explained in Table 6-1.
The rules Attribute To control which inside borders of a table are displayed, add the rules attribute to the opening <table> tag, and specify one of the values explained in Table 6-2. Rules are the lines or borders around the individual cells. For example, to display only the horizontal borders within a table: <table border="5px" frame="box" rules="none">
Table: Values for the frame Attribute
Table: Values for the rule Attribute
Cell Padding and Spacing

When the borders are visible for a table, its easier to see how much space is around the content and in between the cells. Two attributes can be added to the table tag, so you can control those types of spaces. cellpadding Space between the content within the cell and the edges of that cell cellspacing Space in between each of the individual cells

First, CellPadding affects the amount of space between the content and the edge of the cell. When the borders are visible, increasing the cell padding can give extra buffer space around the text, so it doesnt run into the borders. <table border="5" cellpadding="15" cellspacing="5">
31
Second, CellSpacing affects the amount of space between each of the cells in the table. While not located inside the actual cells, this space can be increased to allow for a gutter between multiple cells. <table border="5" cellpadding="5" cellspacing="15">
Set Table and Cell Width

Planning out the size of your tables ahead of time, this is particularly important if the table you are creating needs to fit within a predetermined amount of space on your page. You can use the height and width attributes independently of each other. If you dont specify them in your HTML, the browser chooses the size based on the amount of content within each cell and the amount of available space in the window. However, you can choose to control the exact size of the entire table by using width and/or height styles in the <table> tag. You can also control the size of each cell by putting width and height styles in the individual <td> tags. The width and height styles can be specified as either pixels or percentages. <table border="3" height="200" width="200"> In this case, I would specify an absolute size for my table, one that shouldnt change if the browser window were larger or smaller. <table border="3" height="50%" width="50%"> This is called relative sizing because Im not specifying absolute pixel dimensions but, instead, sizes that are relative to the browser window opening, with relative sizing, the table size varies according to the window size. <table border="5" width="600"> Table with the width attribute of 600 pixels and having the border of 5 pixels. <table width="90%" border="1"> <tr> <td width="200">This cell is 200 pixels wide.</td> <td width="140">This cell is 140 pixels wide.</td> <td>This cell's width is set automatically.</td> </tr> </table>

Specify Cell Width
32
Align a Table, Row, or Cell

To achieve the placement you want, you can align a whole table, a whole row, or the contents of individual cells.
Align a Table Horizontally

You can align a table horizontally within a web page by adding the align attribute to the opening <table> tag and specifying left, right, or center, as needed. For example, to center a table on the web page that contains it (see Figure 6-5): <table align="center" border="2" cellspacing="5">
Align a row horizontally

You can align the contents of a row within their cells by adding the align attribute to the opening <tr> tag and specifying left, right, center, or justify, as needed. For example, to apply justified alignment (where both the left and right edges of text are aligned) to a row: <tr align="justify">
Default Left Alignment
Figure 6-5
Table Center Align
Align a cells contents horizontally

You can align a cells contents horizontally by adding the align attribute to the opening <td> tag and specifying left, right, center, or justify, as needed. <td align="center">Telecoms</td>
Cell Spanning
Tables that use a regular grid are useful for presenting data in a tabular format, but to lay out a page with tables, youll often need to remove some of the borders between rows and

columns. To do so, you make a cell span two or more rows or columnsin other words, you merge the cells in two or more rows, or in two or more columns, into a single larger cell.
33
Make a cell span two columns

To make a cell span two or more columns, add the colspan attribute to the opening <td> tag of the cell in the leftmost of the columns involved, and specify the number of columns to span. For example, to make a cell span three columns:
<table border="1" cellspacing="2" cellpadding="4"> <tr> <td colspan="3">This cell spans all three columns.</td></tr> <tr> <td>Column 1</td> <td>Column 2</td> <td>Column 3</td> </tr> </table>
Make a cell span two rows

To make a cell span two or more rows, add the rowspan attribute to the opening <td> tag of the cell in the topmost of the rows involved, and specify the number of rows to span. For example, to make a cell span two rows: <table border="1"> <tr> <td colspan="2">This cell spans the two columns </td> <td rowspan="2">This cell spans two rows</td> </tr> <tr> <td>column 1</td> <td> column 2</td> </tr> </table>
Create a Nested Table

Spanning columns, spanning rows, or spanning both columns and rows gives you decent flexibility in laying out your tables; however, if you must create a truly intricate table design, you may need to nest one table within another. To nest a table, enter the complete structure of the nested table within the <td> and </td> tags for the cell in which you want the nested table to appear. The next example creates the simple nested table shown here. <table border="1"> <tr><td>Column 1</td><td>Column 2</td><td>Column 3</td></tr> <tr> <td>Column 1</td> <td> <table border="1"> <tr> <td>Table</td> <td>nested</td>

</tr> <tr> <td>in a</td> <td>cell</td> </tr> </table> Nested Tables </td> <td>Column 3</td> </tr> </table>
34

Create a Vertical Line
The <hr> tag lets you easily insert a horizontal line in a web page. To insert a vertical line, create a two-column table and specify frame="void" and rules="cols", as shown in this example:
35
<table frame="void" rules="cols" > <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> <tr><td>Cell 3 </td> <td>Cell 4</td> </tr> </table>
Additional Formatting Techniques

HTML 4.0 introduced some new tags geared toward helping Web developers build more userfriendly tables. Apply a Background Color or Picture To make a table more colorful or distinctive, you can apply a background color or a background picture. Apply a background color to a table, row, or cell To apply a background color to a table, add the bgcolor attribute to the opening <table> tag, and specify the color either by name or by hexadecimal code. For example, to apply yellow as the background color: <table bgcolor="yellow"> To apply a background color to all cells in a row, add the bgcolor attribute to the opening <tr> tag. For example: <tr bgcolor="black"> To apply a background color to an individual cell, add the bgcolor attribute to the opening <td> tag. For example: <td bgcolor="blue"> Background Images HTML enables you to add a background image to your table. This is accomplished by adding the background attribute to the table tag, similar to how you use the background attribute in the body tag to add a background image to your entire Web page. <table background="images/clouds.jpg"> Captions The optional caption tag enables you to specify captions for your tables. This isnt an attribute of the table tag; its a stand-alone element used after the table tag, but before the first table row. <caption align="bottom"><b>This is caption for table.</b></caption>
Dynamic HTML and Web Designing Group Cells by Rows and Columns
The frame and rules attributes of the <table> tag enable you to create many arrangements of borders in your tables. But if you need more flexibility, you can use rules="groups" to put borders only on specific groups of rows and columns.
36

Create Groups of Rows
1. To create groups of rows, you split your table into a section of header rows, a body section, and a section of footer rows. 2. To create the header section, put an opening <thead> tag before the header rows and an ending </thead> tag after them. 3. Within the header section, you can use either <th> and </th> tags to create a table header (which is boldface and centered) or <td> and </td> tags to create standard table cells. 4. To create the footer section, put an opening <tfoot> tag before the footer rows and an ending </tfoot> tag after them. 5. To create the body section, put an opening <tbody> tag before the body rows and an ending </tbody> tag after them. The next example shows a short table divided into header, body, and footer sections: <table rules="groups" width="180" border="4px" > <thead> <tr> <td>Member #</td> <td align="right">First</td> <td>Last</td> </tr> </thead> <tfoot> <tr> <td align="right">Member</td> <td>count:</td> <td>2</td> </tr> </tfoot> <tbody> <tr> <td>1007</td> <td align="right">Jack</td> <td>Hobbs</td> </tr> <tr> <td>1008</td> <td align="right">Katja</td> <td>Reina</td> </tr> </tbody> </table> This HTML code produces the table shown here, with the rules="groups" statement producing borders across the rows in the groups defined. Grouped Rows
37
38

Create Groups of Columns To create groups of columns, you split your table by using the <colgroup> tag with the span attribute to specify which columns belong in each group. The following example shows a short table divided into two column groups, each of which contains two columns: <table rules="groups" width="240" border="4px" > <colgroup span="2"></colgroup> <colgroup span="2"></colgroup> <tr> <td>Employee</td> <td>Item</td> <td>Quantity</td> <td>Total $</td> </tr> <tr> <td>Johns</td> <td>A384</td> <td align="right">48</td> <td align="right"> 480.00</td> </tr> <tr> <td>Bills</td> Grouped Columns <td>C839</td> <td align="right">11</td> <td align="right">4492.00</td> </tr> <tr> <td>Acinth</td> <td>X420</td> <td align="right">88</td> <td align="right">6295.00</td> </tr> </table>
39
This HTML code produces the table shown here, with the rules="groups" statement producing a vertical border between the groups of columns and no border between the columns that make up each group.
Dynamic HTML and Web Designing HTML Frames

Frames divide a browser window into several pieces or panes, each pane containing a separate XHTML/HTML document. One of the key advantages that frames offer is that you can then load and reload single panes without having to reload the entire contents of the browser window. A collection of frames in the browser window is known as a frameset. The window is divided up into frames in a similar pattern to the way tables are organized: into rows and columns. The simplest of framesets might just divide the screen into two rows, while a complex frameset could use several rows and columns. To create a frameset document, first you need the <frameset> element, which is used instead of the <body> element. The frameset defines the rows and columns your page is divided into, which in turn specify where each individual frame will go. Each frame is then represented by a <frame> element. You also need to learn the <noframes> element, which provides a message for users whose browsers do not support frames. Now we will discuss these tags in detail one by one. Creating Frames - The <frameset> Element: The <frameset> tag replaces the <body> element in frameset documents. The <frameset> tag defines how to divide the window into frames. Each frameset defines a set of rows or columns. If you define frames by using rows then horizontal frames are created. If you define frames by using columns then vertical frames are created. The values of the rows/columns indicate the amount of screen area each row/column will occupy. Each frame is indicated by <frame> tag and it defines what HTML document to put into the frame.
40
Example: Following is the example to create two horizontal frames:
41
<html> <head> <title>Frames example</title> </head> <frameset cols="25%,75%"> <frame src="/html/top_frame.htm" /> <frame src="/html/main_frame.htm" /> <noframes> <body> Your browser does not support frames. </body> </noframes> </frameset> </html>
The <frameset> Element Attributes:

Following are important attributes of <frameset> and should be known to you to use frameset. cols: specifies how many columns are contained in the frameset and the size of each column. You can specify the width of each column in one of four ways: o o o Absolute values in pixels. For example to create three vertical frames, use cols="100, 500,100". A percentage of the browser window. For example to create three vertical frames, use cols="10%, 80%,10%". Using a wildcard symbol. For example to create three vertical frames, use cols="10%, *,10%". In this case wildcard takes remainder of the window.
rows: attribute works just like the cols attribute and can take the same values, but it is used to specify the rows in the frameset. For example to create two horizontal frames, use rows="10%, 90%". You can specify the height of each row in the same way as explained above for columns. border: attribute specifies the width of the border of each frame in pixels. For example border="5". A value of zero specifies that no border should be there.
42
The <frame> Element

The <frame> element indicates what goes in each frame of the frameset. The <frame> element is always an empty element, and therefore should not have any content, although each <frame>element should always carry one attribute, src, to indicate the page that should represent that frame. The src Attribute: The srcattribute indicates the file that should be used in the frame. src=main_page.html The value for the srcattribute is a normal HTML page, so you must have a corresponding page for each <frame />element. The name Attribute: The name attribute allows you to give a name to a frame; it is used to indicate which frame a document should be loaded into. This is especially important when you want to create links in one frame that load pages into a second frame, in which case the second frame needs a name to identify itself as the target of the link. You will see more about making links between frames later in the chapter. name=main_frame The <noframes> Element If a users browser does not support frames (which is very rare these days), the contents of the <noframes>element should be displayed to the user. In HTML, you must place a <body>element inside the <noframes>element because the <frameset>element is supposed to replace the <body>element. But if a browser does not understand the <frameset> element, it should ignore these elements and the <noframes> element and understand what is inside the <body>element contained in the <noframes>element. <noframes> <body>This </noframes> site does not understand frames.</body>
Creating Links Between Frames

Whenever you use frames on a Web site, you have to deal with the issue of linking between them. By default, whenever a user clicks a link within a frame, the page loads within that same frame. Sometimes it becomes necessary to load a linked page within another frame. Before you can link to another frame, it must have a name. Earlier in this module, you learned how to use the nameattribute with the frametag to identify a frame by name: <frameset cols="150,*"> <frame src="links.html" name="links" /> <frame src="intro.html" name="intro" /> </frameset> Once the frame has been given a name, you only need to add the target attribute to the link.
Targets
Imagine you have an HTML page for a frameset with two columns, called frameset_cols.html. The frames in this structure are called links on the left and intro on the right. When a user clicks the words About Us in the left frame, you want the About Us page to load in the right frame.
43
Accomplishing this task requires two steps. 1. Make sure the frame is named (using the name attribute), as in src="intro.html" name="intro" />in the frameset HTML document. <frame
2. Then, in the HTML page containing the link, use the target attribute in the a tag to specify in which frame the link should load. For example, <a href="page3.html" target="intro">.
Some particular values for the TARGET attribute have special meaning, which are summarized in Table. Value _self _blank _parent _top Description Loads the page into the current frame. Loads a page into a new browser window opening a new window. Loads the page into the parent window, which in the case of a single frameset is the main browser window. Loads a page into a new browser window, replacing any current frames.
Nested Framesets
You have seen that a single frameset gives you a fixed grid-like structure of rows and columns just like a table. If you want to create a more complex design, you might choose to use a nested frameset. You create a nested frameset by using a new <frameset>element in the place of one of the <frame> elements. Take a look at the following example:
<frameset rows=*, 300, *> <frame src=frames/top_frame.html /> <frameset cols=*, 400, *> <frame src=frames/blank.html /> <frame src=frames/main_frame.html /> <frame src=frames/blank.html /> </frameset>

<frame src=frames/bottom_frame.html /> </frameset>
44
This example creates a set of three rows. In the middle row is a nested frameset with three columns. You can see that the two side columns actually share the same file. Figure shows what this example looks like in a browser.
Inline Frames (Floating Frame)

Up to this point, all the frames shown have been attached to the sides of the browser (left, right, top, or bottom). Another form of frame, called a floating frame (introduced by Microsoft), has been incorporated into the HTML 4 standard. The idea of the floating frame is to create an inline framed region, or window, that acts similarly to any other embedded object, insofar as text can be flowed around it. An inline frame is defined by the <IFRAME> element and may occur anywhere within the <BODY> element of an HTML document. Compare this to the <FRAME> element, which should occur only within the <FRAMESET> element; remember that the <FRAMESET> element should preclude the <BODY> element. The major attributes to set for the <IFRAME> element include SRC, HEIGHT, and WIDTH. The SRC is set to the URL of the file to load, while the HEIGHT and WIDTH are set to either the pixel or percentage value of the screen that the floating-frame region should consume. Like an <IMG> element, floating frames should support ALIGN, HSPACE, and VSPACE attributes for basic positioning within the flow of text. Note that, unlike the <FRAME> element, the <IFRAME> element comes with a close tag. <IFRAME> and </IFRAME> should contain any HTML markup code and text that is supposed to be displayed in browsers that dont support floating frames.
45
<HTML> <BODY> <H1 ALIGN="center">Floating Frame Example</H1> <IFRAME NAME="float1" SRC="fileone.htm" WIDTH="350" HEIGHT="200" ALIGN="LEFT"> There would be a floating frame here if your browser supported it. </IFRAME> <P>This is a simple example of how floating frames are used. Notice that in many ways the floating frame acts very similar to an inline image. </P> </BODY> </HTML>
Layers
The layer function enables the page designer to define precisely positioned, overlapping layers of transparent or opaque content in a page. Besides being able to stack layers on top of each other to create complex layouts, authors can bind the layers to code that can move them around or change the order of overlap. Scripting combined with absolute positioning can truly make pages more dynamic. The basic idea of a layer is similar to the idea of a frame, except that layers may overlap. They generally are defined in the same document, unlike frames, which require multiple documents. A layer defines a region or portion of the browser window that can be manipulated, and may overlap other layers. Layers come in two basic forms: 1. Positioned layers: Defined by the <LAYER> element 2. Inflow layers: Defined by the <ILAYER> element Positioned Layers To define a section of a document as a layer to position, enclose it within <LAYER> and </LAYER>. The layer should be named, just as a frame is named, so that it can be manipulated later. To name a layer, set the ID attribute of the element to a unique identifier. For a positioned layer, specify the upper corner of the layer by setting the TOP and LEFT attributes to the pixel coordinates of the upper-left corner of the layer, relative to the browser window. You may also want to set the WIDTH and HEIGHT attributes of the layer. These take

pixel values, so the actual size of the layer can be controlled, regardless of its content. A simple example showing how absolutely positioned layers work is presented here: <LAYER ID="Layer1" TOP="100" LEFT="50" BGCOLOR="lightgreen"> <H2>This is a layer.</H2> <UL> <LI>This layer is positioned at 100,150. </UL> </LAYER>
46
Inflow Layers Inflow layers are different than positioned layers, because inflow layers fall naturally within the flow of a document, much as an inlined object is positioned, such as an image. To indicate that content is part of an inflow layer, enclose it within <ILAYER> and </ILAYER> tags.
Dynamic HTML and Web Designing HTML & Media Types

Multimedia is everything you can hear or see: texts, books, pictures, music, sounds, CDs, videos, DVDs, Records, Films, and more. Multimedia comes in many different formats. On the Internet you will find many of these elements embedded in web pages, and today's web browsers have support for a number of multimedia formats. Multimedia Formats Multimedia elements (like sounds or videos) are stored in media files. The most common way to discover the media type is to look at the file extension. When a browser sees the file extensions .htm or .html, it will assume that the file is an HTML page. The .xml extension indicates an XML file, and the .css extension indicates a style sheet. Picture formats are recognized by extensions like .gif and .jpg.
47
Browser Support The first Internet browsers had support for text only, and even the text support was limited to a single font in a single color, and little or nothing else. Then came web browsers with support for colors, fonts and text styles, and the support for pictures was added. The support for sounds, animations and videos is handled in different ways by different browsers. Some elements can be handled inline, some requires a plug-in and some requires an ActiveX control.
Audio Support in Browsers

Sound is a vital element of true multimedia Web pages. Sound can be stored in many different formats. The MIDI Format: The MIDI (Musical Instrument Digital Interface) is a format for sending music information between electronic music devices like synthesizers and PC sound cards. The MIDI format was developed in 1982 by the music industry. The MIDI format is very flexible and can be used for everything from very simple to real professional music making. MIDI files do not contain sampled sound, but a set of digital musical instructions (musical notes) that can be interpreted by your PC's sound card. The RealAudio Format: The RealAudio format was developed for the Internet by Real Media. The format also supports video. The format allows streaming of audio (online music, Internet radio) with low bandwidths. Because of the low bandwidth priority, quality is often reduced. Sounds stored in the RealAudio format have the extension .rm or .ram. The AU Format: The AU format is supported by many different software systems over a large range of platforms. Sounds stored in the AU format have the extension .au. The AIFF Format: The AIFF (Audio Interchange File Format) was developed by Apple. AIFF files are not cross-platform and the format is not supported by all web browsers. Sounds stored in the AIFF format have the extension .aif or .aiff. The SND Format: The SND (Sound) was developed by Apple. SND files are not crossplatform and the format is not supported by all web browsers. Sounds stored in the SND format have the extension .snd. The WAVE Format: The WAVE (waveform) format is developed by IBM and Microsoft. It is supported by all computers running Windows, and by all the most popular web browsers. Sounds stored in the WAVE format have the extension .wav.

The MP3 Format (MPEG): MP3 files are actually MPEG files. But the MPEG format was originally developed for video by the Moving Pictures Experts Group. We can say that MP3 files are the sound part of the MPEG video format. MP3 is one of the most popular sound formats for music recording. The MP3 encoding system combines good compression (small files) with high quality. Expect all your future software systems to support it. Sounds stored in the MP3 format have the extension .mp3, or .mpga (for MPG Audio).
48
What Format to Use? The WAVE format is one of the most popular sound format on the Internet, and it is supported by all popular browsers. If you want recorded sound (music or speech) to be available to all your visitors, you should use the WAVE format. The MP3 format is the new and upcoming format for recorded music. If your website is about recorded music, the MP3 format is the choice of the future.
Video Support in Browser
Like audio files, video files can be compressed to reduce the amount of data being sent. Because of the degree of compression required by video, most video codecs use a lossy approach that involves a trade-off between picture/sound quality and file size, with larger file sizes obviously resulting in longer download times. Video can be stored in many different formats. The AVI Format: The AVI (Audio Video Interleave) format was developed by Microsoft. The AVI format is supported by all computers running Windows, and by all the most popular web browsers. It is a very common format on the Internet, but not always possible to play on non-Windows computers. Videos stored in the AVI format have the extension .avi. The Windows Media Format: The Windows Media format is developed by Microsoft. Windows Media is a common format on the Internet, but Windows Media movies cannot be played on non-Windows computer without an extra (free) component installed. Some later Windows Media movies cannot play at all on non-Windows computers because no player is available. Videos stored in the Windows Media format have the extension .wmv. The MPEG Format: The MPEG (Moving Pictures Expert Group) format is the most popular format on the Internet. It is cross-platform, and supported by all the most popular web browsers.Videos stored in the MPEG format have the extension .mpg or .mpeg. The QuickTime Format: The QuickTime format is developed by Apple. QuickTime is a common format on the Internet, but QuickTime movies cannot be played on a Windows computer without an extra (free) component installed. Videos stored in the QuickTime format have the extension .mov. The RealVideo Format: The RealVideo format was developed for the Internet by Real Media. The format allows streaming of video (on-line video, Internet TV) with low bandwidths. Because of the low bandwidth priority, quality is often reduced. Videos stored in the RealVideo format have the extension .rm or .ram. The Shockwave (Flash) Format: The Shockwave format was developed by Macromedia. The Shockwave format requires an extra component to play. This component comes preinstalled with the latest versions of Netscape and Internet Explorer. Videos stored in the Shockwave format have the extension .swf.
Dynamic HTML and Web Designing Other Binary Formats in HTML

PDF Format: The term "PDF" stands for "Portable Document Format". The key word is portable, intended to combine the qualities of authenticity, reliability and ease of use together into a single packaged concept. To be truly portable, an authentic electronic document would have to appear exactly the same way on any computer at any time, at no cost to the user. It will deliver the exact same results in print or on-screen with near-total reliability. The difference between PDF and formats used for writing (Word, Excel, Power Point, Quark, HTML, etc) is profound. Properly made, PDF files are not subject to the vagaries of other formats. PDFs are not readily editable - and editing may be explicitly prohibited. A precise snapshot, a PDF file is created at a specific date and time, and in a specific way. You can trust a PDF like you can trust a fax. You can't say that about a Word file! Adobe Systems invented PDF technology in the early 1990s to smooth the process of moving text and graphics from publishers to printing-presses. At the time, expectations were modest, but no longer. PDF turned out to be the very essence of paper, brought to life in a computer. In creating PDF, Adobe had almost unwittingly invented nothing less than a bridge between the paper and computer worlds.
49
Dynamic HTML and Web Designing Style Sheets

CSS stands for Cascading Style Sheets. It is a way to divide the content from the layout on web pages. How it works A style is a definition of fonts, colors, etc. Each style has a unique name: a selector. The selectors and their styles are defined in one place. In your HTML contents you simply refer to the selectors whenever you want to activate a certain style. Advantages With CSS, you will be able to: 1. Define the look of your pages in one place rather than repeating yourself over and over again throughout your site. 2. Easily change the look of your pages even after they're created. Since the styles are defined in one place you can change the look of the entire site at once. 3. Define font sizes and similar attributes with the same accuracy as you have with a word processor - not being limited to just the seven different font sizes defined in HTML. 4. Position the content of your pages with pixel precision. 5. Redefine entire HTML tags. Say for example, if you wanted the bold tag to be red using a special font - this can be done easily with CSS. 6. Define customized styles for links - such as getting rid of the underline. 7. Define layers that can be positioned on top of each other (often used for menus that pop up).
50
Positioning with Style Sheets

Absolute Positioning If you position an element (an image, a table, or whatever) absolutely on your page, it will appear at the exact pixel you specify. Say I wanted a graphic to appear 46 pixels from the top of the page and 80 pixels in from the right, I could do it. The CSS code youll need to add into the image is img {position: absolute; top: 46px; right: 80px; } You just add in which method of positioning youre using at the start, and then push the image out from the sides its going to be closest to. You can add the CSS directly into the tag using the style attribute (as shown in the introduction to stylesheets), or you can use classes and ids and put them into your stylesheet. It works the same way. The recommended method is to add classes for layout elements that will appear on every page, but put the code inline for once-off things. Relative Positioning An element whose position property has the value relative is first laid out just like a static element. The rendered box is then shifted vertically (according to the top or bottom property) and/or horizontally (according to the left or right property). The properties top, right, bottom, and left can be used to specify by how much the rendered box will be shifted. A positive value means the box will be shifted away from that position, towards the opposite side. For instance, a left value of 20px shifts the box 20 pixels to the right of its original position. Applying a negative value to the opposite side will achieve the

same effect: a right value of -20px will accomplish the same result as a left value of 20px. The initial value for these properties is auto, which makes the computed value 0 (zero)that is, no shift occurs. Fixed Positioning Fixed positioning is a subcategory of absolute positioning. An element whose position property is set to fixed always has the viewport as its containing block. For continuous media, such as a computer screen, a fixed element wont move when the document is scrolled. For paged media, a fixed element will be repeated on every page. Floating A floated element is one whose float property has a value other than none. The element can be shifted to the left (using the value left) or to the right (using the value right); non-floated content will flow along the side opposite the specified float direction.
51
52
Short Answer type questions

Q.1 What Exactly Is HTML? Ans. The name HTML stands for Hypertext Markup Language. Many people who create Web pages and work in HTML often forget what the letters stand for. The terms hypertext portion refers to the cross-links, also called hyperlinks, between Web pages. The terms markup language portion refers to the commands that format the Web pages that the users see. Knowing how to write and use HTML is the goal, not remembering the archaic abbreviation. Q.2 Define HTML filename extension. Ans. A Web page, defined in an HTML file, always has the filename extension .html or .htm ( if you want to be compatible with Windows 3x users, although fewer and Fewer of them exist). The html extension separates the file type from ordinary, unformatted text files whose extensions might be txt. Many browsers, such as Internet Explorer, will refuse to open your file with an extension such as txt, except by starting another program such as Notepad and loading the text file into that secondary program for your viewing and editing work. Some browsers will open a file whose name does not end with the html extension, but will refuse to interpret any HTML command tags. In such a case, the file will appear inside the browser window displaying the nitty-gritty command tags themselves instead of performing the formatting actions that the command tags request. Q.3 What is Web Accessibility? Ans. All Web pages are created in a standard format called hypertext markup language, or HTML for short. When you create or save a document as a web page, it is given a filename ending with .htm or .html, indicating that it is an HTML file. An HTML document actually contains nothing but plain textimages, sounds and other non-text elements are stored in separate files. You can look at the HTML code of any web page in your web browser: In Netscape Navigator, choose the View > Page Source command. In Internet Explorer, choose View > Source.
Q.4 What is DHTML? Does working of DHTML depend on the type of browser we use? Explain. Ans. DHTML stands for Dynamic HTML. DHTML is the combination of HTML and JavaScript. DHTML is the art of combining HTML, JavaScript, DOM, and CSS. According to the World Wide Web Consortium (W3C): "Dynamic HTML is a term used by some vendors to describe the combination of HTML, style sheets and scripts that allows documents to be animated." DHTML is combination of several built-in browser features in fourth generation browsers that enable a web page to be more dynamic. Q.5 Define <BR> tag? Ans. Use the break tag to break lines. The format of the tag is as follows: <br>Text that appears on its own line. The <br> tag is special because, unlike so many other command tags, <br> has no corresponding end tag. The <br> tag is a stand-alone tag because it requests that the browser move down to the next line on the screen before displaying the text that follows. Q.6 Define HTML Headings. Ans. HTML headings are defined with the <h1> to <h6> tags. Headings Are Important: Use HTML headings for headings only. Don't use headings to make text BIG or bold. Search engines use your headings to index the structure and content

of your web pages. Since users may skim your pages by its headings, it is important to use headings to show the document structure.H1 headings should be used as main headings, followed by H2 headings, then the less important H3 headings, and so on. Example: <h1>hello</h1> <h2>hello</h2> <h3>hello</h3> <h4>hello</h4> <h5>hello</h5> <h6>hello</h6> Q.7 Define HTML Paragraphs Ans. HTML paragraphs are defined with the <p> tag. Example: <p>this is my first paragraph writing</p> Q.8 How to use comment in html document? Ans. HTML Comments-> Comments can be inserted into the HTML code to make it more readable and understandable. Comments are ignored by the browser and are not displayed. Comments are written like this: Example <! -- This is a comment -->
53
Q.9 How do we create tables in HTML? Explain with suitable example. Ans. Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). The letters td stands for "table data," which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc. Representing a table involves several kinds of HTML tags: TABLE tags, which surround the entire table specification an optional CAPTION element specifying the caption (name) of the table TR tags, which specify the table rows TH tags, which specify table row and column headers TD tags, which specify the data in the table, i.e. the contents of table cells.
Q.10 How to define an image in html document? Ans. HTML Images - The <img> Tag and the Src Attribute In HTML, images are defined with the <img> tag. The <img> tag is empty, which means that it contains attributes only, and has no closing tag. Attributes of the IMG element : ALIGN : Alignment of the image with respect to the text baseline. ALT : Text to use in place of the referenced image resource, for example due to processing constraints or user preference. SRC : Specifies the URI of the image resource. The URL points to the location where the image is stored.

Syntax for defining an image: <IMG SRC="triangle.xbm" ALT="Warning:" /> Be sure to read these instructions. Q.11 How Hyperlinks are created in HTML? Ans. The LINK element represents a hyperlink. Any number of LINK elements may occur in the HEAD element of an HTML document. It has the same attributes as the <A> element. The LINK element is typically used to indicate authorship, related indexes and glossaries, older or more recent versions, document hierarchy, associated resources such as style sheets, etc. <a href="http://machine/htbin/imagemap/sample"> HTML Image Map </a> Q.12 Explain Ordered and unordered list in html?
54
Ans. HTML Unordered Lists: An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. The list items are marked with bullets (typically small black circles). <ul> <li>Coffee</li> <li>Milk</li> </ul> How the HTML code above looks in a browser: Coffee Milk HTML Ordered Lists: An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. The list items are marked with numbers. <ol> <li>Coffee</li> <li>Milk</li> </ol> How the HTML code above looks in a browser: 1. Coffee 2. Milk HTML Definition Lists: A definition list is a list of items, with a description of each item. The <dl> tag defines a definition list. The <dl> tag is used in conjunction with <dt> (defines the item in the list) and <dd> (describes the item in the list): <dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl> How the HTML code above looks in a browser:

Coffee - black hot drink Milk - white cold drink Q.13 How forms are created in HTML? Ans. A form is a template for a form data set and an associated method and action L. A form data set is a sequence of name/value pair fields. The names are specified on the NAME attributes of form input elements, and the values are given initial values by various forms of markup and edited by the user. The resulting form data set is used to access an information service as a function of the action and method. Form Element: The FORM element contains a sequence of input elements, along with document structuring elements. The attributes are : ACTION : Specifies the action URL for the form. The action URL of a form defaults to the base URI of the document. METHOD : Selects a method of accessing the action L. The set of applicable methods is a function of the scheme of the action L of the form. ENCTYPE : Specifies the media type used to encode the name/value pairs for transport, in case the protocol does not itself impose a format.
55
<form action="/cgi-bin/mailinglist.pl" method="post"> Q.14 Describe any four input types you can use in a form on the web page. Ans. An HTML form is a document containing text content, markup, special elements called controls (checkboxes, radio buttons, menus, etc.), and labels on those controls. The control type defined by the INPUT element depends on the value of the type attribute: Text: To Creates a single-line text input control:<input type=text name=textbox1 value=/> Buttons: Authors may create three types of buttons: submit buttons, reset button and push buttons: Authors should specify the scripting language of a push button script through a default script declaration . Authors create buttons with the BUTTON element or the INPUT element. <input type=submit value=OK/> Checkboxes: Checkboxes are on/off switches that may be toggled by the user. A switch is "on" when the control element's checked attribute is set. When a form is submitted, only "on" checkbox controls can become successful. Several checkboxes in a form may share the same control name. Thus, for example, checkboxes allow users to select several values for the same property. The INPUT element is used to create a checkbox control. <input type="checkbox" name="Chechbox1" value="English" checked="checked" /> Radio buttons: Radio buttons are like checkboxes except that when several share the same control name, they are mutually exclusive: when one is switched "on", all others with the same name are switched "off". The INPUT element is used to create a radio button control.

<input type="radio" name="sex" value="male" checked="checked" /> Q.15 How can we incorporate Horizontal Rule? Ans. Horizontal Rule (HR): The HR element is a divider between sections of text; typically a full width horizontal rule or equivalent graphic. For example : <HR>This creates an horizontal Line </HR> Q.16 Explain frames in HTML. Ans. HTML Frames with frames, we can display more than one HTML document in the same browser window. Each HTML document is called a frame, and each frame is independent of the others. The disadvantages of using frames are: Frames are not expected to be supported in future versions of HTML Frames are difficult to use. (Printing the entire page is difficult). The web developer must keep track of more HTML documents
56
The HTML frameset Element: The frameset element holds one or more frame elements. Each frame element can hold a separate document. The frameset element states HOW MANY columns or rows there will be in the frameset, and HOW MUCH percentage/pixels of space will occupy each of them. The HTML frame Element: The <frame> tag defines one particular window (frame) within a frameset. <frameset cols="25%,75%"> <frame src="frame_a.htm" /> <frame src="frame_b.htm" /> </frameset> Q.17 What is an Image Map ? Create a Image Map. Ans. Image maps allow you to specify several links that correspond to different areas of one single image, so that when users click different parts of the image they get taken to different pages. <html> <body> <p>Click on the sun or on one of the planets to watch it closer:</p> <img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" /> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm" /> <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm" /> <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm" /> </map> </body> </html> Q.18 What is HTML style sheets ? Ans. Web browsers have always had a standard set of styles such as paragraphs are divided by <P> tags and for heading tags <H1> through <H6> tags are used.. Styles enable Web authors to set the styles used for these standard tags, and create new tags with new formatting. A style is a set of formatting commands that dictate how text is formatted. Instead of adding a series of separate commands to text, you apply one style that contains all the commands. In HTML, a style sets specific formatting characteristics for tags on your

page.. HTML 4 supports many types of style sheets, including cascading style sheets (CSS), W3Cs proposed way to format text on Web pages, which allows various levels of style sheets to work together. A particular Web page might contain more definitions of styles used only on that page. Q.19 What is CSS? Ans. CSS stands for Cascading Style Sheets and is used to achieve a level of uniformity easily throughout your web pages. You can a set of styles to as many html files as you want, allowing you to control the style of many web pages all at once. For example, we can specify that all the background colors be mauve, or that all text be written in Arial font. CSS is written in a language a little different from HTML. Q.20 How CSS can be implemented ? Ans. CSS can be implemented the CSS in the following ways: 1. Inline styles 2. Internal styles 3. External styles Inline: Inline uses of CSS is generally not recommended and is slowly being faded out. Inline CSS is where you stick the style directly inside a HTML tag. For example: <P STYLE=color:green> The text in this paragraph would then be green. </P> Internal/Embedded: You can include the page specific CSS code within the <HEAD> section of your page. While other styles of your external style sheet come through, the background color style of the external sheet will be overridden by the internal stylesheet in the page. Now the CSS code needs to be wrapped with special <STYLE> tags in the HTML: <head> <style type="text/css">  </style> </head> External: This is the most common implementation of styles. The CSS code is in a separate file with a .css extension (NOTE: You must have the .css extension). A snippet is put in the <HEAD> section of the HTML file specifying where the style sheet is. For example, if you had a style sheet called main.css in your styles folder under your web directory, your HTML will be: <HEAD> <LINK REL="stylesheet" TYPE="text/css" HREF="./styles/main.css" /> </HEAD>
57
Dynamic HTML and Web Designing Multiple Choice Questions

1. Is .htm and .html the same? a) No b) Yes 2. What is the difference between XML and HTML? a) HTML is used for exchanging data, XML is not. b) XML is used for exchanging data, HTML is not. c) HTML can have user defined tags, XML cannot d) Both b and c above 3. Which tags are most commonly used by search engines? a) Heading b) Title c) Paragrah d) All of above 4. a) b) c) d) 5. a) b) c) d) What is the <br> tag for? Space Paragraph break Line break Word break What is the attribute for <image> tag? pt url path src
58
6. Can a data cell contain images? a) Yes b) No 7. a) b) c) d) 8. a) b) c) d) Each list item in an ordered or unordered list has which tag? list tag ls tag li tag ol tag Which of the following tags below are used for a multi-line text input control? textml tag text tag textarea tag Both b and c above
9. <meta> tag cannot be defined in the <head> tag. a) False b) True 10. Which of the following attributes below are used for a font name? a) fontname b) fn c) font d) face

11. Is width=100 and width=100% the same? a) No b) Yes 12. What are <div> tags used for? a) To replace paragraphs. i.e. p tags b) To logically divide the paragraphs c) To logically divide the document d) To provide space between tables 13. What is cell padding? a) Used to separate cell walls from their contents. b) Used to set space between cells c) Both a and b above d) Used to provide width to a cell 14. Can I play audios in HTML? a) No b) Yes 15. Horizontal rule element is used to divide the webpage into: a) Two sections b) Separate sections c) Four sections d) All sections 16. Html document must always be saved with: a) .html b) .htm c) .doc d) Both a &b 17. Logical elements indicate __________of the webpage. a) Logical description b) General description c) Both a &b d) None of these 18. How many types of lists are supported by html: a) Two b) Three c) Four d) Five 19. a) b) c) d) Frames are used to divide the browser window into: Dependent segments Two dependent segments Four independent segments Various independent segments
59
20. <SCRIPT> </SCRIPT> tag can be placed within ________ A. Header B. Body C. both A and B D. none of the above

21. <TD> </TD> tag is used for ________ a) Table heading b) Table Records c) Table row d) none of the above 22. Which is true to change the text color to red? a) <BODY BGCOLOR=RED> b) <BODY TEXT=RED> c) <BODY COLOR=RED> d) none of the above 23. What is the correct syntax in HTML for creating a link on a webpage? a) <LINK SRC= ghumti.html> b) <BODY LINK = ghumti.html> c) <A SRC = ghumti.html > d) < A HREF = ghumti.html> 24. Which of the following is an attribute of <Table> tag? a) SRC b) LINK c) CELLPADDING d) BOLD 25. How to define target in new page in HTML? a) <a href = http://www.ghumti.com/ target = blank>Click Here</a> b) <a href = http://www.ghumti.com/ target = _blank> Click Here </a> c) <a href = http://www.ghumti.com/ target = #blank> Click Here </a> d) <a href = http://www.ghumti.com/ target = @blank> Click Here </a> 26. What is <tt> tag in HTML? a) It renders fonts as teletype text font style. b) It renders fonts as truetype text font style. c) It renders fonts as truncate text font style. d) None of the Above. 27. What is the use of Forms in HTML? a) to display contents of email. b) to display animation effect. c) to collect users input. d) None of the Above. 28. What is the use of iframe in HTML? a) to display a web page within a web page. b) to display a web page with animation effect. c) to display a web page without browser. d) All of the Above.
60
Key to Objective Questions

1.a 8.c 15.b 22.b 2. 9.a 16.d 23.d 3.d 10.d 17.b 24.c 4.c 11.b 18.b 25.b 5.d 12.c 19.d 26.a 6.a 13.a 20.c 27.c 7.c 14.b 21.b 28.a
Dynamic HTML and Web Designing Question Bank

Q.1 What are the difference between Traditional HTML and Non-traditional HTML documents types ? Q.2 Define HTML. What are the structure of HTML document ? Q.3. What are the different types of tags available in HTML ? Explain with example. Q.4 What is format of a good Web Page ? Q.5 What do you mean by Tag ? Explain the following tags (with attributes) : (a) <A> (b) <img> (c) <meta> (d) <form> (e) <Body> (f) <frame> Q.6 What are purpose and syntax of the following HTML tags ? Explain with examples : (i) (ii) (iii) (iv) (v) Q.7 Anchor Tag Unordered Tag. Semantic Tag. Image Tag. Form Tag.
61
How would you create a table? Describe the process of (1) dividing the table into columns (2) giving header to the table columns (3) adding a border to a table (4) changing the color of a cell. Write short note on : (a) Explain text-tags with examples. (b) Audio support in Browser. image
Q.8
Q.9 What do you understand by an image map? What is the use of it? Explain. Q.10 Explain the procedure of creating a rectangular and a circular hotspot in an map using suitable examples. Q.11 Q.12 Q.13 Q.14 Q.15 Q.16
What do you mean by Cascading Style Sheets ? What are different techniques to embedding CSS into HTML pages ? Explain with example. Write short note on Frames &b Layers with examples. What do you understand about DOCTYPE in HTML? How Cell Padding is differ from Cell Spacing? How to link the Images with in HTML? How we define Src Attribute and Alt Attribute in HTML? How you understand about Forms output? How you use Forms Action Attribute and Submit Button in HTML?
Q.17 What are the Hyperlink,Anchors and Link in the HTML? Q.18 How to use Line Break and Horizontal Line tags in HTML? Q.19 Q.20 What are Style Sheets? What are the style precedence rules when using multiple approaches? What are Core Attributes and Core Events in HTML ?

Unit-2 Dynamic HTML

Uploaded by

Unit-2 Dynamic HTML

Uploaded by

Dynamic HTML and Web Designing

Dynamic HTML and Web Designing

In this chapter, you will learn

Dynamic HTML and Web Designing

Web Publishing Process

Dynamic HTML and Web Designing

Phases of Website Development

Dynamic HTML and Web Designing

Dynamic HTML and Web Designing

An Introduction to HTML (Hypertext Markup Language)

Dynamic HTML and Web Designing

How is HTML used?

Why is HTML important?

How HTML works on the Web

Dynamic HTML and Web Designing HTML Basic Concepts

Empty HTML Elements

Dynamic HTML and Web Designing

THE BASIC STRUCTURE OF HTML

<title>Welcome to My First Homepage</title>

paragraph <p>This is the first paragraph</p>

Dynamic HTML and Web Designing Structure of HTML Document

Dynamic HTML and Web Designing

Dynamic HTML and Web Designing

Dynamic HTML and Web Designing

Dynamic HTML and Web Designing

Dynamic HTML and Web Designing

Linking Documents - The <a> Element:

Dynamic HTML and Web Designing

Dynamic HTML and Web Designing

Links to Sections within the Same Page

Dynamic HTML and Web Designing

Lets us create a program to link to different sections of the page.

Dynamic HTML and Web Designing

Dynamic HTML and Web Designing

Semantic Linking Meta Information

Dynamic HTML and Web Designing

Dynamic HTML and Web Designing

Change the size of an Image

The alt and title Attribute

Dynamic HTML and Web Designing

The border Attribute (deprecated)

Align the Image with an align attribute

Aligning Text with an Inline Image

Dynamic HTML and Web Designing

Table 7.2 Values for the ALIGN Attribute

Value LEFT RIGHT

Importance of <br> Tag

Add Space around Images

Dynamic HTML and Web Designing

Dynamic HTML and Web Designing

Add a Background Graphic

Dynamic HTML and Web Designing

Dynamic HTML and Web Designing

Layout with Tables

Understand How Tables Work and When to Use Them

Dynamic HTML and Web Designing

Create the Tables Structure

Format Tables within Web Pages

Dynamic HTML and Web Designing

Table: Values for the frame Attribute

Table: Values for the rule Attribute

Cell Padding and Spacing

Dynamic HTML and Web Designing

Set Table and Cell Width

Dynamic HTML and Web Designing

Align a Table, Row, or Cell

Align a Table Horizontally

Align a row horizontally

Default Left Alignment

Table Center Align

Align a cells contents horizontally

Dynamic HTML and Web Designing

Make a cell span two columns

Make a cell span two rows

Create a Nested Table

Dynamic HTML and Web Designing