Home | HTML | ASP | JAVA | VB | OFFICE 2000 | .NET | C#

HTML INTRODUCTION TO MARKUP LANGUAGE What is programming language? A language is a system of communication. With our natural language such as English, we communicate to one another our ideas and emotions. Similarly, a computer language is a means of communication used to communicate between people and the computer. With the help of a computer language, a programmer tells a computer what he wants it to do. Unlike natural language, most computer languages use a very limited or restricted vocabulary. This is mainly because a programming language by its very nature and purpose does not need to say too much. Classification of programming language Normally programming language can be classified as a) PROCEDURAL PROGRAMMING LANGUAGE b) OBJECT ORIENTED PROGRAMMING LANGUAGE • Procedural programming language Procedure is nothing but a sequence of statements, which perform some specific task and it should return some value after performing that function. Some languages follow or work with procedures like BASIC, PASCAL, and C etc. • Object oriented programming language Before discussing the object-oriented approach, first we have to define the object. For now, we will consider the object to be a package of information together with the operation that can be performed on that information. In other words, an object supports data abstraction, and can be considered as an entity, which encapsulates the object data, and provide the user with a set of predefined operations to manipulate and access the object data. The object data can only be accessed by the operations defined on the object. Some programming languages like C++, Java etc follows this Object Oriented approach and these languages are called Object Oriented Programming Languages, What is Markup Language?

A markup language is a set of conventions for the linear encoding of information structures. There are nonlinear ways to structure information, most notably relational databases. Database schemas and markup languages do the same job. They express the structure of data. So a markup language is only useful if you know what it means. INTRODUCTION TO HTML What is html?

Hyper Text Markup Language HTML stands for Hyper Text Markup Language. Hyper Text Markup Language

Hyper You may have heard the expression "hyper" in describing someone. In simplest terms, it means active, kind of "all over the place". The word "Hyper" as part of HTML is similar in context. It simply means that when you are on the Internet using a browser such as Netscape Navigator or Internet Explorer, you can in fact; go "all over the place". In browsing through the World Wide Web (WWW), if you see something you like, you can go immediately to it. There is no set order to do things in. Hyper is the opposite of "linear". Linear means that there is a certain order you must follow such as "you must do this before you can do that". Programming languages such as BASIC and FORTRAN are linear. HTML does not hold to that and allows you to jump to any page on the WWW and at any time. Thus the word HYPER refers to the idea that the text in HTML is not linear.

Text We are working with text only files.

Markup "Markup" comes from the fact that in order to create web pages, we will be typing in the text and then "marking up" the text.

Language "Language" means that we are using a language with all its syntax. Note that HTML is not a programming language such as BASIC or FORTRAN. These are

linear programming languages and are based on a whole different set of rules and are far more complicated to learn. The HTML language is easy to learn.

History Of HTML After companies started using computers for document processing, it soon became obvious that a storage format should contain not only formatting codes interpreted by computer itself, but also descriptive, human-legible information about the nature and role of every element in a document. The first working system that used these concepts was the Generalized Markup Language (GML) developed by Charles Goldfarb, Edward Mosher, and Raymond Lorie at IBM. This system was the direct predecessor of SGML. SGML stands for Standard Generalized Markup Language. SGML is a generalpurpose tool for developing documents of any kind. It originated in the 1960s. It was developed to overcome problems while moving documents across hardware platforms and operating systems. As SGML is used for defining and creating descriptive markup languages and hence it is known as Metalanguage. SGML is platform independent, requiring only a computer and the appropriate software to analyze the documents to make sense of the data. Before HTML, a document’s author didn’t have to care how the document would appear on someone’s monitor. Different versions of HTML HTML Level 0 HTML was at level 0 in its first implementation in 1990. At that time, the means of communication over the Internet included email, Ftp (File Transfer Protocol), and Telnet, all using TCP/IP (Transmission Control Protocol/Internet Protocol). Berners-Lee & his colleagues used SGML to implement HTML. HTML 1.0 The original version of HTML was HTML 1.0. It had very limited features, which greatly limited what you could do in designing your web pages. HTML+ & the advent of graphics Dave Raggett proposed another extension of HTML called HTML+, which incorporated graphical & display elements into HTML. For that reason HTML+ was able to advantage of graphics based browsers.

HTML 2.0 HTML 2.0 then arrived and included all the features of HTML 1.0 plus several new features for web page design. Until January 1997, HTML 2.0 was the standard in web page design. HTML 3.0 HTML 2.0 served its purpose very well, but many people designing web pages (called HTML authors or webmasters) wanted more control over their web pages and more ways to mark up their text and enhance the appearance of their websites. Netscape, the leading browser at that time, introduced new tags and attributes called the Netscape Extension Tags. Other browsers tried to duplicate them but Netscape did not fully specify their new tags and so these extension tags did not work in most other browsers. It led to considerable confusion and problems when HTML authors used these tags and attributes and then saw that they didn't work as expected in other browsers. At about that time, an HTML working group, led by Dave Raggett, introduced the HTML 3.0 draft, which included many new and useful enhancements to HTML. However, most browsers only implemented a few elements from this draft. The phrase "HTML 3.0 enhanced" quickly became popular on the web but it more often than not referred to documents containing browser specific tags (discussed below in "The Netscape Problem" section), instead of referring to documents adhering to the HTML 3.0 draft. This was one of the reasons why the draft was abandoned. HTML 3.0 is now an expired draft. Another reason why HTML 3.0 did not make it was because it was so "big". Future versions were now to be introduced in a more "modular" way so that browsers can implement them modular-by-modular or bit-by-bit. HTML 3.2 (WILBUR) As more browser-specific tags were introduced, it became obvious that a new standard was needed. For this reason, the Word Wide Web Consortium (W3C), founded in 1994 to develop common standards for the evolution of the WWW, drafted the WILBUR standard, which later became known as HTML 3.2. HTML 3.2 captures the recommended practice as of early 1996 and became the official standard in January 1997. Most, if not all, popular browsers in use today fully support HTML 3.2. HTML 4.0 (COUGAR) HTML 4.0 is the current version of HTML. In the early days it was code-named COUGAR. This version introduces new functionality, most of which comes from the expired HTML 3.0 drafts. This version became a recommendation in December 1997 and is now the official standard as of April 1998. Explorer has done a very good job in implementing the many features of HTML 4.0. Unfortunately, Netscape has not kept pace. The latest version of Netscape Communicator still does not recognize the many tags and attributes introduced with HTML 4.0. This means that a web page that involves HTML 4.0 specific tags will look great in Explorer, but can look disastrous in Netscape.

Why we use HTML? HTML allows the assignment of characteristics of text, such as font size, style and type. It also allows the creation of new structural elements such as objects and the definition of characteristics of those objects. • LANGUAGE is COMMON HTML was meant to be a common language that could be used to tie together information from widely different sources. • SIMPLE HTML was meant to be simple for both HTML authors and programmers to use. • PLATFORM INDEPENDENCE It is popular for its platform independence. HTML follows the general philosophy of the web, which is to “be conservative in what is produced and liberal in what is accepted”. This means that the servers try to maximize the correctness and conformance of the HTML output and the Web browsers strive to make sense out of what the server sends. Uniform Resource Locator (URL) Uniform Resource Locator (URL) is the primary naming scheme, which is used to identify Web resources that can either be HTML, documents or other services present in the Web. These Web resources are identified with special names called Uniform Resource Identifier (URI). The URL is the standard method used to identify any resource. Mostly it consists of Service, Hostname and Directory path. Service:// hostname: port/directory-path Service indicates the name of the protocol used to access data present on the other end of the link. Hostname indicates the domain name for the web server where the web page resides. In most cases specification of the port address is not required as the servers themselves have a default port address. Directory-path specifies the name of the HTML file. World Wide Web (WWW) The World Wide Web is a vast amorphous blob of text, images, audio and video scattered across networks and computers worldwide. Hence the name World Wide Web has came. It is shortly referred to as “Web” or “W3”. It is a software

invention, which aids users to explore the Internet facility. World Wide Web is a part of the Internet comprising of Web pages and Web sites. Web is a collection of files known as Web pages. These Web pages can contain hyperlinks to link other Web pages. A hyperlink can be any text or image which when clicked would display another web page. There may be one or more pages in the Home page, which is the initial Web page present in a Web site. Browsers A Web browser is a special type of parsing engine that evaluates the tags and content of an HTML file and displays it according to the capabilities and rules of the file’s own capabilities and platform. For example-a text-only browser displays the alternative text for an image, but a graphical browser displays the actual image. The major browser used to surf the Internet is, Microsoft Internet Explorer and another browser, which is the product of Sun Micro system is Netscape Navigator. Hardware Requirement MINIMUM

PREFERRED

a) 286PC

a) 133 MHz Pentium PC

b) 16MB of RAM

b) 32 MB of RAM

c) 500-MB Hard Disk

c) 1.2 GB Hard Disk

Software Requirement

• • Microsoft Windows 95 (Standard Installation), Windows NT, Unix, Linux etc. • • Microsoft Internet Explorer 3.0 or higher.

• • Netscape Navigator 3.0 or higher. • • Internet Connection (optional, it is applicable for live project) What do I need to begin designing a Home Page? •

•

You need a directory (also called a FOLDER)

You should set up a directory or folder to hold only your HTML files (also called documents) for the web pages you are designing. Work in that directory only. If you are doing all these lessons, you may also wish to set up a separate directory to hold all the examples for testing in your browser. You need some place to put your work.

•

•

You do not need to have your modem connected

You do not need to be connected by modem to your server. You can write and design your HTML pages off-line. If all you are doing is designing web pages, you have no need to go on the Internet. Besides, if you are paying by the hour, you don't want to pay any more than you have to. Also, if you have only one telephone line to your house and you are connected by phone, there is no need to tie up the line for hours at a time. How do you disconnect the modem? Well, in most cases, when you load the browser, a little window opens up to dial the server. Simply click CANCEL, and choose to work off-line. If you are using an old version of a browser and this method doesn't work, you may need to call on someone to help you. So remember, you do not need to be connected by modem to design your web pages. •

•

You need a browser

Netscape Navigator (also called Netscape Communicator) and Internet Explorer are among today's most popular browsers and there are different versions of each of these. Netscape, as of version 4.0, is called Netscape Communicator. Before version 4.0, it was called Netscape Navigator. There are other browsers also but they are not nearly as popular as Netscape and Explorer. Most likely you already have a browser or you wouldn't be reading this.

•

•

You need a word processor

You need a word processor such as WordPerfect or Microsoft Word or Microsoft Works. Better use NOTEPAD, which can be found in the ACCESSORIES directory (also know as the ACCESSORIES "GROUP"). In Windows 95, for example, NOTEPAD is found by choosing "START"à"PROGRAMS"à"ACCESSORIES"à”NOTEPAD”. Notepad is a simple "text editor" that loads almost instantly. A text editor is a very simple word processor. NOTEPAD also quickly loads any file and quickly saves the file. As we will see later in this lesson, there are other reasons as well for using a text editor such as NOTEPAD. Sometimes a web page can become so big that it will no longer fit into NOTEPAD. In this case, you will need to switch to another text editor or to your word processor to complete the page.

In summary, you basically: 1. 1. Do your work in a text editor such as NOTEPAD (typing in all the text and tags)

2. 2. Save your work in an HTML file using any appropriate name 3. 3. Load the HTML file into the browser to see how your web page looks and works 4. 4. Switch back to NOTEPAD to make any corrections, changes, etc. Naming your text only file You need to give your file (that is, your web page) a name. You not only have to give it a name but you also need to add a suffix to the name. THE NAME: If you are using an IBM or IBM compatible computer and not running Windows 95 or higher, your file name is limited to a maximum of 8 characters. Otherwise the name can be longer. THE SUFFIX: The suffix is an extension to the name and declares the kind of document that it is. In HTML, the suffix is either ". htm" or ".html". "Htm" or "html" tells the browser you are working with HTML files - that is, an HTML document. Saving your html file (or document) IF YOU ARE USING ONLY NOTEPAD or similar text editor: Simply type in a suitable file name (along with an extension) and click on "OK". Loading your html document into the browser Once you have saved your HTML file or document, you need to SWITCH over to your browser, which is running in the background. Once you activate your browser, choose File from the menu bar, and then choose Open ... or Open File ... or Open File in Browser ... (one of them should be in the File menu). You will then need to locate your file, click on the file name and then click the Okay button. Your HTML file will appear in the browser. You can only observe your file in the browser - you cannot edit in the browser. Once you have seen how your HTML file looks in the browser, you can then SWITCH back to NOTEPAD to continue working and editing. Note: (1) (1) If you want to LOAD a new HTML file into NOTEPAD, and the name does not show up in the correct directory in the dialog window, choose to show All Files (*.*) in the Files of type line and the name should then appear. Click on the name and then on the Open button. (2) (2) If you use a word processor other than NOTEPAD, you may first need to CLOSE the HTML file before it can be loaded into your browser. With NOTEPAD this is not necessary.

HTML ELEMENTS HTML comprises of three major elements that render a well-structured look for a document. • • Head • • Body • • Footer HTML tags HTML works in a very straightforward manner. You type in your text and your tags. To get large print, centered text, bold text, text in italics, indented sentences, colored text, etc., is nothing more than inserting tags around your text. These tags are more accurately called ELEMENTS and you should think of these elements as describing the meaning of the text they contain, rather than how the enclosed text should be displayed. This concept is called contentbased markup, as opposed to presentational markup. Because we don't want the tags (elements) to appear in the browser, we need a way to tell the browser that something is a tag - and this is easy to do. To tell the browser that something is a tag, you simply place "less than" and "greater than" symbols around them. The LESS THAN symbol is "<" and the GREATER THAN symbol is ">". These symbols are also called "Angle Brackets". Thus we have an opening angle bracket "<" and a closing angle bracket ">" around each tag. Correct use of tags We have "beginning" or "opening" tags (such as ) and we have "ending" or "closing" tags (such as ). Many elements consist of an opening tag and a closing tag. An element that has an opening and closing tag is referred to as a container element because anything contained between these tags are affected by the element. Closing Tags cannot be placed just anywhere. Use the "Last In = First Out" principle or "LIFO". That is, the "Last" tag "In" must be the "First" tag "Out". Another way of stating this is that the last tag activated must be the first tag terminated? An example of a correct sequence of tags is: statements In this example, is activated first, and then . Thus must be terminated first with followed by the termination of (). In other words, tags are closed in reverse order to the way they are opened. Thus the first tag opened must be the last tag closed. An example of an incorrect placement of tags is: statements In this example, the last tag opened () is not the first tag closed. That is, these tags overlap. must come before . Therefore this example does not satisfy the LIFO principle. Container tags cannot overlap each other. If you do not place tags properly, your web page simply won't work.

The following is another example of a correct use of tags: statements Classification of html tags A markup tag is defined by the markup element and an optional set of attributes. Tags are divided into two groups, non-empty and empty. There are mainly two types of tags in HTML. i) Empty tag The tags, which are not required to close (i.e. starting tag will be there but closing tag is not there) are called empty tag. Example:
, . As
is an empty tag, that’s why
is not required. It is similar for also. ii) Non-empty tag The tags, which are required to close (i.e. starting tag will be there as well as closing tag will be there) are called non-empty tag. Example: . , <TITLE>.. etc. There is one special tag

, which can be said as an empty tag or non-empty tag. Sometimes it can be used with only starting tag i.e.

or sometimes it may be used with ending tag also (normally for formatting a paragraph), i.e.

…

. Basic tags TAG

DESCRIPTION

…

Indicates the beginning of HTML document Indicates the beginning of document header Indicates the beginning of document text Indicates title for the web page

… … <TITLE>…

and tags We first need to learn how to set things up properly in an HTML document (or file as it is also called). Every HTML document should first be declared that it is in fact an HTML document. When the document is completed we also need to indicate this. You do this with the tags and . Recall that HTML stands for Hyper Text Markup Language, which is the language of web page design. is the beginning tag and is the ending tag. The forward slash before the tag () cancels the effect of the tag. This is true for all tags that affect text. Thus tells the browser that what follows is an HTML document and tells the browser that the HTML document is completed.

You can therefore think of the and tags as "containers", containing the entire HTML document. Therefore HTML is called a container tag. You should use the HTML element for each of your web pages. and tags Each page of your web pages should have these tags. Statements (or tags) that give information to a person visiting your website, or information such as those needed for a Search Engine are placed between the and tags. Thus the HEAD part of a document provides information about the document. You do not see this information displayed on the browser screen. It can be seen by choosing DOCUMENT SOURCE from the VIEW menu of your browser. The HEAD tag must not contain any text or normal markup tags. If it does, the browser will assume that it is in the BODY part of the document (studied below). The HEAD tag can actually be omitted, but only if you group all the tags that go in it at the top of the document. To avoid any potential problems, I would suggest that you include the HEAD tag in your own documents. <TITLE> and tags One of the statements that must included between the and tags is the TITLE of your web pages. The title in our example is " THIS IS OUR FIRST DOCUMENT". Notice that this title is placed by the browser at the very top of the screen - above the menu choices. In Netscape it reads: Netscape- [THIS IS OUR FIRST DOCUMENT] Thus Netscape has added its name to the title. The TITLE of your website or of your web page must occur between the <TITLE> and tags and you are only allowed one TITLE element per page. The information you provide in the title is also used to label the bookmark entry for your web page and is also a caption in search engine results. Therefore you should take time to make up a good descriptive title for each of your web pages. You will notice that each of our lessons has its own title that describes in general the content of the lesson. Because we do not want the title to be displayed on the browser screen, the <TITLE> and tags must be placed between the and tags. <META> tag This tag specifies information about the document to browsers, applications and search engines. With <meta> tag, we can instruct the browser to load a new document after the specified time (client-pull) or you can specify key-words for search engines to associate with your document. Attributes

• • Content Assigns values to the HTTP header fields when using REFRESH HTTP header, assign a number along with a URL to the content attribute, the browser then loads the specified URL after the specified number of seconds. • • HTTP-EQUIV This attribute indicates the HTTP header value you want to define, such as REFRESH, EXPIRES or CONTENT LANGUAGE. • • Name This attribute specifies the name of the association you are defining, such as, keywords or description. and tags After the title comes the main body of your Web page. It contains all the text and tags. It is the part that will be displayed on the browser screen. Thus the BODY element contains the actual contents of the document. Of course the tags will not be displayed on the browser screen. The tags only tell the browser how to display the information. The body of each of your Web pages should be declared with BODY tags. tells your browser that what follows is to be the body of the Web page and tells the browser that the body part of the page has ended. Thus the and tags are container tags, containing the body of your document. The BODY tag is also an optional tag. If you place all the HEAD elements first, the browser will know where the actual document body begins. The idea is good of declaring things for what they are. This way there will be no confusion for any early or ancient browser that relies on these declarations. Attributes Background =file Bgcolor=”#RRGGBB” Text =”blue” Link=”red” Vlink=”blue” Alink=”black” Topmargin=”70%” Leftmargin =”60%” Example <TITLE>THIS IS OUR FIRST DOCUMENT

FIRST HTML DOCUMENT • • Background Specifies as an image to be used to tile on the document background. Do not use with BGCOLOR. • • Bgcolor Specifies a solid color to be used for the document background. • • Text Specifies the text color. Text is black by default. • • Link Specifies the hypertext link color. The default color for the hypertext link color is light blue. • • Alink Specifies the “activated” hypertext link color. The default is red. The link changes to this color when the mouse button clicks on the link and before the mouse button is released. • • Vlink Specifies the “visited“ hypertext link color. The default is dark purple. This is the color that indicates that the link has been previously visited. • • Topmargin Specifies the top margin of the displayed area in the browser below which the text will be displayed. • • Leftmargin Specifies the left margin of the displayed area in the browser from the right of which the text will be displayed. Formatting tags FORMAT

TAGS

DESCRIPTION

Paragraph

…

...

---

……….

Indicates paragraph break Indicates line break Indicates preformatted text Marks up quotes that take more than a few lines Draws a horizontal line across the page Helps to make center all the elements in the document.

and attributes Use the paragraph tag to mark the beginning of a new paragraph; the ending tag,

, is optional. You could include the ALIGN attribute to specify whether the paragraph should be centered or right aligned in the page (left-aligned is the default).
tag It tells the browser to wrap the text that follows onto a new line without inserting any extra space between the lines.

..

tags This tag is effective for formatting program code or similar information. Usually appears in a fixed-width font with ample space between words and lines.

..

tags The BLOCKQUOTE element marks up quotes that take more than a few lines. You use this tag when you are quoting one or more paragraphs from another source. In HTML 4.0 the

tag can take an optional CITE attribute to indicate where the quote came from. It is written like this

…

---

and attributes Used for drawing horizontal lines in the display page. • • Noshade –indicates solid black bar. • • Width=n (default is 100%) • • Size=n (default is 2 pixels) • • Align =left/right/center (default is center) It can be written like this.

---

… tags Helps to position the text in an equal distance between the left and right edges of the document which is given within the starting tag and ending tag. FORMAT Character

TAGS

DESCRIPTION

…

Italicizes text

… …

Underlines the text Indicates text that should appear in boldface Indicates “typewriter” font i.e. displays text in monospace format Emphasizes the text (usually italics)

… <EM>…

..

<S> OR <STRIKE> … <SMALL>… <STRONG>…

Header

…

…

…

…

…

…

…

Indicates information about the author who has created the Web page in a unique font Indicates a Strikethrough text style Indicates that text display in larger font Indicates that text display in Small font Indicates strong emphasis. The browser will probably display the text in a boldface font Used to enclose program codes. First Level Heading Second Level Heading Third Level Heading Fourth Level Heading Fifth Level Heading Sixth Level Heading

and Attribute (n=1 to 6) • • ALIGN Positions the heading in the left, right or center of a document.

• • CLASS Indicates which style class applies to the element. • • ID Assigns a unique ID selector to an instance of the tag. When you then assign a style to that ID selector, it affects only that one instance of the tag.

• • STYLE Specifies style sheet commands that apply to the heading.

• • TITLE Specifies text assigned to that tag.

Example: <TITLE>DOCUMENT <STRONG>HELLO!!
HEADINGS WILL BE:

THIS IS H1

THIS IS H2

THIS IS H3

THIS IS H4

THIS IS H5

THIS IS H6

THESE ARE ALL ABOUT HEADINGS

Now come to the next part of HTML
<EM>DETAILS

Winserv Technology
center: A.J.C Bose Road

Omit needless words

Vigorous writing is concise. A sentence should contain no unnecessary words, a paragraph should contain no unnecessary sentences, for the same reason that a drawing should have no unnecessary lines & a machine should not have any unnecessary parts.

-William Sturunk

A guide to HTML

Output:

tag A tag tells the browser the correct absolute URL of the document, which might fix the relative URLs used on that page. … tag Sets up a button to submit or reset a form as well as to activate a script. Use the tag between the opening and closing tag to specify a graphical button. Click it Attributes of button tag • • CLASS Indicates which style class applies to the element. • • DISABLED Denies access to the input method. Not applicable for Netscape. • • ID Assigns a unique ID selector to an instance of the tag.

• • VALUE Sets the default value for the button face. • • TYPE Indicates the kind of button to create. • • NAME Gives a name to the value you pass to the form processor. • • STYLE Specifies style sheet commands that apply to the element. • • TITLE Specifies text assigned to the tag. • • TABINDEX Specifies where the input method appears in the tab order.

title=”ABC”

Special tags 1. <MARQUEE>…………. tags A marquee displays a scrolling text message. You can customize a marquee to achieve exactly the effects you want. It is only applicable for Internet Explorer Marquee attributes

• • Behavior=Slide/Flash/Alternate/Scroll • • • •

Direction=Right/Left (Default) Height=30% Width=200 Loop=-1 (-1 represents infinite looping)

2. … tags This tag is only applicable for Netscape Navigator. 3.

…

tags

The W3C (WORLD WIDE WEB CONSORTIUM) has been trying to standardize HTML tags so they all match a similar pattern. One of the great frustrations was Netscape’s introduction of the tag, which had no or alignment equivalents. To standardize this tag, the W3C supplied the

tag, which separates documents into separate divisions for formatting purposes. So, a web page can be divided into segments or division called DIVs. Each segment starts with

and ends with

. These segments can be positioned anywhere on the page. The

tag has a position attribute that can take one of the two values, Absolute and relative. Absolute positions the segment with respect to the top/left edge of the browser window. In contrast with Absolute, Relative positions the segment in relation to other elements on the page.

HTML code to align to center, including headings, text. tables and images.

tag This tag helps to alter or set font characteristics of the font the browsers uses to display text. Syntax: content to be displayed Attributes • • Face Specifies a comma-separated list of font names the browser uses to render text. If the browser does not have access to the first named font, it tries the second, then the third and so forth. • • Color Indicates the color the browser uses to display text. Color names can substitute for the RGB hexadecimal values. • • Size Specifies the size of the text affected by the FONT tag. You can specify the size relative to the base font size (see the tag), which is normally 3. You can also specify the size as a digit in the range 1 through 7. Example: THIS IS A FONT OF SIZE 6.

THIS IS A FONT OF SIZE 1. tag Provides a font setting for normal text within a document. Font settings within the document are relative to settings specified with this tag. Use this tag in the document header (between the tag). LINKING There are two major categories of links: external links which are links to files not on your own site (created by someone else) and internal links, which are links to files that are part of your site (created by you). With HTML tags we can create links both internal and external. … ‘A’ stands for Anchor. The anchor elements take several attributes. •

•

Href

HREF indicates Hyperlink REFerence. The HREF attribute must point to a URL and the URL should appear in quotes, like this: Construct •

•

Title

One anchor attribute that provides more information about a link is the TITLE attribute. The TITLE attribute allows an “advisory title” that explains the resource in more detail.

we are learning LINKING in details Browsers may choose different methods of showing the advisory TITLE attribute, such as displaying the title in a tool tip or balloon help, or the title might appear on the status bar. Currently the only popular browser that makes use of the TITLE attribute in a link is Internet Explorer 4, which displays it as a tool tip. Navigator should soon support these attributes. •

Name (‘text’)

It labels a section of an HTML document with a specific reference name. The NAME attribute enables links to point to a specific section within a document. Here is the direction to my office: Once you have added this code, you can link to the directions by taking a normal link tag and adding a number sign (#) and the name assigned to the URL. If the

normal URL for the page is http://www.abc.com/, then you would specify the link for the directions name like this: The direction to my office is available.

•

•

Target

The TARGET attribute is normally used with frames. However, you can use the TARGET attribute even if you don’t use frames. When you specify a TARGET for your links, you indicate the name of a window where you’d like the linked page to appear. A link can be specified like this: XYZ When this link is followed, a new window (named internally “window2”) is created, containing the XYZ page. •

•

Rel

This attribute and its value indicate the relationship of the current document to the document referenced in HREF. Possible values include Contents, Index, Glossary, Copyright, Next, Previous, Style Sheet, Bookmark and Help. . This attribute is also used to specify linked style sheets. Another possible value is Alternate, which indicates an alternate version of the document. •

Rev

This attribute is similar to rel, except it indicates a reverse relationship between the document and the URL. It accepts the same values as rel. So, for linking we can use i)click The text click word is used for linking. ii) The image bubbles.bmp is used for linking. Example:

width=100

This is Winserv Technology.


Output:

LIST AND IMAGE List HTML has special sets of tags just for displaying lists with a host of special attributes to give you greater control over their appearance. Lists are a great way to provide information in a structured, easy-to-read format. A list is a good form for a procedure. At the most basic level, lists are divided into two categories. • Ordered lists These lists are typically used to indicate a sequence of events or priorities. They are also used to specifically identify sections and relationships when creating outlines. •

Unordered lists

These lists are typically used to display a group of items that are somehow related, but necessarily in a hierarchical fashion. LIST TAG

• 
  
  EFFECT Specifies that the information appear as an ordered (numbered) list Specifies that the information appear as an unordered (bulleted) list Specifies a line item in either ordered or unordered lists
  
  Type attributes can be included 1. 1. For numbered lists TYPE=”1” TYPE=”a” TYPE=”A” TYPE=”i” TYPE=”I” 2. 2. For bulleted lists TYPE=”DISC” TYPE=”SQUARE” TYPE=”CIRCLE” Ordered lists have additional attributes that you can use to specify the first number in the list, as well as to create hierarchical information. The name of that attribute is VALUE. Using definition lists Finally, one special list variant, definition lists, can be useful for providing two levels of information.

  is used to create a glossary-style listing, which is handy for items such as dictionary listings and Frequently Asked Questions pages. The

  tag is used similarly to the unordered list tag, except that it doesn’t use the

  tag to mark its entries because a definition list requires two items for every entry, a term and its definition. Marking these two items is done with the corresponding

  and

  tags. This is the syntax of the

  tag.

  Term1

  Definition 1

  Term 2

  Definition 2 … …. ……..
  
  ………… ………..

  Term n

  Definition n

  In this tag, Term is the word requiring a definition, and Definition is the block of text that supplies the definition.
  
  LIST TAG < DL>----

  
  
  EFFECT Specifies that the information appear as a definition list
  
  

  
  
  Indicates definition term
  
  

  
  
  Identifies definitions
  
  Example:

  • EGGS
  • MILK
  • APPLES
  • RAZOR BLADES

  • HAMMER
  • SCREWDRIVER
  • SCREWS
  • CHAINSAW

  • A
    • AA
    • AB
      • AAA
      • ABA
      
      
      
    • AC

  1. BREAD
  2. TURKEY BACON
  10. DARKCHOCOLATE
  11. AVOCADOS

  Term A

  Definition of term A

  Term B

  Definition of term B

  
  
  Output:
  
  Placing images on web page You can include images (pictures or other nontext objects) in any Web page to provide information or to make the page more attractive. An image that you include in a Web page is called an inline image, as opposed to an image that is viewed separately in your browser, such as when the image file is the target of a link. •
  
  Alternate Text
  
  When a browser cannot display graphic images, perhaps because the image file cannot be found or because the browser’s image-loading capabilities have been turned off to save download time, you can include the ALT attribute in an image tag to have text displayed in place of the image.
  
  •
  
  Sizing
  
  By default, your browser loads an image from the top down and displays the image in as large a box as needed. You can specify an exact size for the image by including the WIDTH and HEIGHT attributes within the HTML tag. •
  
  Aligning
  
  You can use the ALIGN attribute with the LEFT, CENTER, or RIGHT options to position the image either left, centered, or right in the browser window. You can also use the TOP, BOTTOM, or MIDDLE attributes to align text with the top, bottom, or middle of the image. How to include image in the browser using its attributes
  
  ?
  
  (horizontal space in pixels) Other attributes: Border=n Ismap Usemap Alt (“text”) specifies the text, which would be displayed, if the browser does not support graphics.
  
  • Src “URI” specifies the location of the image to load into the document. • Align “top | middle | bottom | left | right” Aligns the object with respect to
  
  context.
  
  • Width “length” sets the display width of the image. • Height “length” sets the display height of the image.
  
  • Vspace “pixels” sets the amount of space to be inserted to the top and bottom of the element. • Hspace “pixels” sets the amount of space to be inserted to the left and right of the element. • Border sets the border width of the image. • Ismap used to define a server-side image map. • Usemap “URI” Associates an image map as defined by the MAP element with this image.
  
  • • Alt “TEXT” Alternate text to be displayed if the user agent cannot render the element. Image as a link The map element (<MAP> and ) is used for imagemaps. An imagemap is an image that contains hotspots can take a surfer to different URLs. So an imagemap is simply an image that can be used to take a surfer to different places, depending on where they click in the image. So, an imagemap is an extended version of hyperlink. Instead of having an image represent only one link, the image can represent several different links depending on where in the image you click.
  
  Example: <MAP name=”sportsmap”> <MAP> elements are contained within the body of the document and have only one attribute name. The name attribute identifies the particular MAP element referenced with the usemap attribute. The AREA element is used within the MAP to delineate a hyperlink and the shape and coordinates of its corresponding hot spot in the image. There are three different shapes that can be defined with the shape attribute: rect, circle and poly. If it is written like the following The usemap attribute tells the browser that it’s dealing with an imagemap and then directs the browser to where coordinate and the URL information for this imagemap can be found.
  
  HTML’S SPECIAL CHARACTER CODE CHARACTER ENTITY & OR & < > ñ "   ® © ¬ °
  
  DESCRIPTION Ampersand Less than Greater than Small n, tilde Quote Comment Space Circled R, registered sign Circled C, copyright sign Negation sign Degree sign
  
  HEXADECIMAL CODE FOR COLORS Color Black Green Silver Lime Gray Olive White Yellow Maroon Navy Red Blue Purple Aqua Cyan Sea green Violet Khaki Brown Orange Pink Gold Ivory Tomato
  
  Code “Black” or “#000000” “Green” or “#008000” “Silver” or “#C0C0C0” “Lime” or “#00FF00” “Gray” or “#808080” “Olive” or “#808000” “White” or “#FFFFFF” “Yellow” or “#FFFF00” “Maroon” or “#800000” “Navy” or “#000080” “Red” or “FF0000” “Blue” or “#0000FF” “Purple” or “#800080” “Aqua” or “#00FFFF” “Cyan” or “#00FFFF” “#2E8B57” “#EE82EE” “#F0E68C” “#A52A2A” “#FFA500” “#FFC0CB” “#FFD700” “#FFFFF0” “#FF6347”
  
  WORKING WITH TABLE The table as the name indicates aligns contents in a row and column format .The table can contain any kind of data, i.e. it can include links, paragraphs, all header levels, another table, preformatted text, images and so on. Attributes tag Attributes Border=n Bordercolor=”#RRGGBB” or “..” Bordercolordark=”#RRGGBB” or “..” Bordercolorlight=”#RRGGBB” or “..” Cellpadding=n Cellspacing=n Align=LEFT/CENTER/RIGHT Background=URL
  
  Bgcolor=”#RRGGBB” or “..” Class=”…” Cols=n Width=n
  
  

  tag Align----top/bottom/left/right

  Description Indicates border for the table. Specifies the color of the border of all the table cells Specifies the darker color used to draw 3-D borders around the table cells Specifies the lighter color used to draw 3-D borders around the table cells Indicates space between border & contents of cell Indicates spacing between cells Positions the table according to the alignment value in the window Specifies the absolute or relative location of a graphic image file loaded as a background image for the entire table Specifies the background color within all table cells Indicates which style class applies to the element. Specifies the no. Of columns in the table Indicates width of the table

  tag Defines a table header section. At least one table row must go within . Attributes Title=” …”

  Description Specifies text assigned to the tag VAlign=TOP/MIDDLE/BOTTOM/ Aligns the contents BASELINE of table header with respect to the top and bottom edges of the header container. Align=LEFT/RIGHT/CENTER/JUSTIFY/CHAR Specifies how text within the table header will line up with the edges of the table cells Class=”…” Indicates which style class applies to the tag Contains a row of cells in a table. You must place the tags inside the

  element.	tag Contains table cell heading. ATTRIBUTES DESCRIPTION Title=” …” Specifies text assigned to the tag Specifies the color of the border of the table heading cell Specifies the darker color used to draw 3-D borders around the table heading cells Specifies the lighter color used to draw 3-D borders around the table heading cells Indicates that a table cell occupy more columns than the default of one. Indicates that a table cell occupy more rows than the default of one. Bordercolor=”#RRGGBB” or “..” Bordercolordark=”#RRGGBB” or “..” Bordercolorlight=”#RRGGBB” or “..” Colspan=n Rowspan=n ATTRIBUTES DESCRIPTION VAlign=TOP/MIDDLE/BOTTOM/ BASELINE Aligns the contents of a cell with the top, bottom, middle or baseline of the cell Specifies the absolute or relative location of a graphic image file loaded as a background image for the table cell Specifies the background color within a table cell Indicates which style class applies to the	element. Disables default word-wrapping within a table cell, maximizing the cell’s horizontal space. Specifies the horizontal dimension of the cell in pixels or as a percentage of the table width. Background=URL Bgcolor=”#RRGGBB” or “..” Class=”…” Nowrap Width=n

  container, which can contain element. Indicates that text within table cells in the row not wrap. Specifies the vertical alignment of the contents of the cells within the row.

  tag Defines the table body within a table. This tag must follow tag. ATTRIBUTES

  DESCRIPTION

  Align=LEFT/RIGHT/CENTER/JUSTIFY/CHAR

  Specifies how text within the table footer will line up with the edges of the table cells Specifies vertical alignment of the contents of the table body. Specifies text assigned to the tag Indicates which style class applies to the element.

  VAlign=TOP/MIDDLE/BOTTOM/ BASELINE Title=”…” Class=”…”

  tag Defines table footer within a table. It must precede the tag. ATTRIBUTES Align=LEFT/RIGHT/CENTER/JUSTIFY/CHAR

  DESCRIPTION Specifies how text within the table footer will line up with the edges of

  ATTRIBUTES VAlign=TOP/MIDDLE/BOTTOM/ BASELINE

  Title=”…” Class=”…”

  DESCRIPTION the table cells Aligns the contents of the table footer with the top, bottom, or middle of the footer container. Specifies text assigned to the tag Indicates which style class applies to the element.

  Example1:

  and

tags. ATTRIBUTES Title=” …” DESCRIPTION Specifies text assigned to the tag Bordercolor=”#RRGGBB” or “..” Specifies the color of the cell borders within the row. Bordercolordark=”#RRGGBB” or “..” Specifies the darker color for the 3-D borders around the table row Bordercolorlight=”#RRGGBB” or “..” Specifies the lighter color for the 3-D borders around the table row Align=LEFT/RIGHT/CENTER/JUSTIFY/CHAR Specifies how text within the table row will line up with the edges of the table ATTRIBUTES DESCRIPTION Bgcolor=”#RRGGBB” or “..” Class=”…” Nowrap VAlign=TOP/MIDDLE/BOTTOM/ BASELINE cells Specifies the background color of the table cells in the row. Indicates which style class applies to the

tag This tag is the data cell tag, used for the body of the table. ATTRIBUTES Bordercolor=”#RRGGBB” or “..” Bordercolordark=”#RRGGBB” or “..” Bordercolorlight=”#RRGGBB” or “..” Colspan=n Rowspan=n VAlign=TOP/MIDDLE/BOTTOM/ BASELINE Background=URL DESCRIPTION Specifies the color of the border of all the table cells Specifies the darker color used to draw 3-D borders around the table cells Specifies the lighter color used to draw 3-D borders around the table cells Indicates that a table cell occupy more columns than the default of one. Indicates that a table cell occupy more rows than the default of one. Aligns the contents of a cell with the top, bottom, middle or baseline of the cell Specifies the absolute or relative location of a graphic image file loaded as a background image for the table cell ATTRIBUTES Bgcolor=”#RRGGBB” or “..” Class=”…” Nowrap Width=n DESCRIPTION Specifies the background color within a table cell Indicates which style class applies to the

element. Disables default word wrapping within a table cell, maximizing the cell’s horizontal space. Specifies the horizontal dimension of the cell in pixels or as a percentage of the table width.

  DETAILS OF BOOKS

  TITLE	AUTHOR
HTML	BPB publication
JAVA	PATRIC
LET US C	BPB Publication

  Output:

  Example2:

  example of rowspan

  CELL 1,1	CELL 1,2
	CELL 2,2
CELL 3,1	CELL 3,2

  example of colspan

  CELL 1,1		CELL 1,2
CELL 2,1	CELL 2,2	CELL 2,3
CELL 3,1	CELL 3,2	CELL 3,3

  Output:

  WORKING WITH FORM TAG

  Here we will be able to capable of utilizing a dazzling feature that enables the user to interact with the Web server through a tag named

  . With this special feature, users can enter information in a web page and send it to the server. Forms, which help visitors to your site to give you input, are used for a variety of purposes. It can be used for order processing on a retail site or they can be set up to get customer feedback by email. The form element consists of several other elements, called controls. …

  TAG: Creates a container for the controls ATTRIBUTES Title Name Action=FILE/URL Method=GET/POST

  DESCRIPTION Specifies text assigned to the tag Specifies the name of the form Specifies the location where FORM data is passed Specifies the method by which the data is sent to the server.

  <SELECT>. … TAG: Creates a pull-down menu. ATTRIBUTES NAME SIZE MULTIPLE

  DESCRIPTION Uniquely identifies <Select> tag Specifies the number of items visible at a time. Allows multiple items to be selected

  TAG: Defines items of the pull-down menu. It is written within <SELECT> tag. ATTRIBUTES SELECTED VALUE

  DESCRIPTION Specifies the default item among the list Provides the content associated with the NAME=attribute

  … TAG: Text areas are places within a form for extensive text input ATTRIBUTES DESCRIPTION NAME Specifies the name of the TEXTAREA ROWS Specifies the number of rows COLS Specifies the number of cols

  ….

  TAG: Groups related form elements ATTRIBUTES TITLE

  DESCRIPTION Specifies text assigned to the tag.

  ….

  TAG: Assigns a caption to a FIELDSET. ATTRIBUTES ALIGN TITLE

  DESCRIPTION Indicates whether the legend appears at the top, bottom, left, or right of the fieldset. Specifies text assigned to the tag.

  TAG: It is the basis for data entry. TAGS

  ATTRIBUTES Name Size Maxlength Value

  Name Value Checked Name Value Checked



  Name Size Maxlength Name Value

  DESCRIPTION Specifies the single line text Label of the control Size of the control Maximum no of characters taken by the control The default text the text box is going to display Creates a radio button two-stated field, selected or unselected, usually only one can be selected Name applies to the collection of buttons Value of the specific button If the button is checked, it will remain checked from the very beginning. Creates a checkbox, two-stated field, selected or unselected, usually more than one can be selected Label of the item Value of the specific item To specify the default selection Displays asterisk in the field Label of the control Size of the control Maximum no of characters taken by the control The field will not be visible. Name of the hidden control Value of the hidden control

  Name Value Value Value Name

  Src Border Name Size Accept Maxlength

  Creates a button, other than SUBMIT/RESET button. Name of the button control Text which will be displayed on the button Creates a button, which passes data to the Web server. Text which will be written on the face of the button Creates a button, which resets all the fields of the form. Text which will be written on the face of the button An image is used for Submit button Specifies that the x, y coordinates where the mouse is located will be returned to the server when the image is clicked. URL of the image Border of the image File field allows uploading files. Specify the name of the control Specify the visible length of the control Specify which file types can be uploaded Specify the maximum length of the control

  Example: Formex.htm

  EXAMPLE OF FORM

  NAME

            &nb sp;                     

  PASSWORD           &nb sp;               :   

  ADDRESS           &nb sp;               :  

  PHONE           &nb sp;                  

  SEX :           &nb sp;                       MALE FEMALE

  EDUCATIONAL QUALIFICATION :    <select size="1" name="D1"> UNDER GRADUATE GRADUATE POST GRADUATE

  B.E.

  HOBBIES           &nb sp;                   LISTENING MUSIC

               &nb sp;               READING STORY BOOKS

                     PLAYING

            &nb sp;               WATCHING MOVIES      

   

  Output:

  FRAME A frames page is a special kind of HTML page that divides the browser window into different areas called frames, each of which can display a different page. When you click a hyperlink on a page displayed in one frame, the page pointed to by that hyperlink can be displayed in another frame. The frames page itself contains no visible content: It's just a container that specifies which other pages to display and how to display them. When you create a frames page using one of the frames page templates, the navigation between frames is already set up for you. In the Contents frames

  page template, for example, clicking a hyperlink in the Contents frame on the left displays a page in the Main frame (called the target frame) on the right. Frames allow a single Web browser window to be divided into several different areas. Each area can display a different Web page. Thus frames add flexibility to a site. To define frame, first define a page that gives the frame layout. Second, specify a web page put in each frame. A page that gives a frame layout does not have ; instead, tag, you break the window into columns or rows. Each column or row then may be used as frame, or broken up into smaller frames by using another tag. Like the container must end with tag. TAGS

  ATTRIBUTES

  … COLS ROWS SRC NAME BORDER BORDERCOLOR NORESIZE

  SCROLLING … </NOFRAME><br /> <br /> DESCRIPTION Divides pages into frames. Divides documents into Columns Divides documents into Rows Specifies the file to be displayed in each frame. Specifies URL of the HTML file Specifies the name of the frame Specifies the thickness of the border around the frame in pixels. Specifies the bordercolor of the frame Specifies that the size of the frame is fixed, i.e. it cannot be altered by users. Specifies scroll bars. It can take values YES, NO or AUTO. Specifies that the HTML codes within these tags are displayed by nonNetscape browser.<br /> <br /> To place a frameset within a frameset (nested frameset) <FRAMESET rows=”20%, 80%”><br /> <br /> <FRAME scrolling=”yes”> <FRAMESET cols=”25%, 75%”> <FRAME scrolling=”yes”> <FRAME scrolling=”yes”> </ FRAMESET> </ FRAMESET><br /> <br /> Display A Page In A Frame When a frames-compatible browser downloads a frames page, it reads the frame information and then displays an initial page in each frame. When a site visitor clicks a hyperlink on a page in one frame, the page pointed to by that hyperlink usually opens in another frame on the same frames page. When you click a hyperlink on a page that's displayed in one frame of a frames page, the page pointed to by that hyperlink usually opens in another frame (called the target frame). On frames pages that you create using frames page templates (suppose in FrontPage), the navigation between frames is already set up for you. In the Contents template, for example, any hyperlinks you create on the page in the Contents frame automatically display a page in the Mainframe. Example: FARMEEX.HTM <HTML> <HEAD>&lt;TITLE>frame example</TITLE></HEAD><br /> <br /> <FRAMESET cols="20%, 80%"> <FRAME scrolling="yes" src="first.htm"> <FRAMESET rows="35%, 65%"> <FRAME scrolling="yes" src="third.htm"> <FRAME scrolling="yes" src="sec.htm"> </ FRAMESET> </ FRAMESET> </Html> FIRST.HTM <HTML> <HEAD>&lt;TITLE>THIS IS OUR FIRST DOCUMENT</TITLE> <base target="rtop"></HEAD> <BODY>FIRST HTML DOCUMENT</BODY> </HTML> SEC.HTM <HTML> <HEAD>&lt;TITLE>two shopping lists</TITLE> <base target="rbottom"></HEAD> <BODY bgcolor=cyan> <ul> <li>EGGS <li>MILK <li>APPLES <li>RAZOR BLADES </ul> <img src="earth.gif" height=120 width=150 vspace=20 hspace=50> <ul type="square"> <li> HAMMER <li>SCREWDRIVER <li type="disc">SCREWS <li type="circle">CHAINSAW </ul><ul> <li>A <ul> <li>AA <li>AB <ul> <li>AAA <li>ABA </ul> <li>AC<br /> <br /> </ul> </ul> <ol> <li>BREAD <li>TURKEY BACON <li value="10">DARKCHOCOLATE <li>AVOCADOS </ol> <DL> <DT>Term A<DD>Definition of term A <DT>Term B<DD>Definition of term B </DL> </BODY> </HTML> THIRD.HTM <HTML> <HEAD> &lt;TITLE>DOCUMENT</TITLE> </HEAD> <BODY> &lt;STRONG>HELLO!!!!!!!</STRONG> <B><U><I> HEADINGS WILL BE: </I></U></B> <BR> <H1 align="center">FIRST LEVEL HEADING</H1> <H2 >SECOND LEVEL HEADING</H2> <H3>THIRD LEVEL HEADING</H3> </BODY> </HTML><br /> <br /> Output :<br /> <br /> Floating Frame Floating frames are scrollable areas that appear in a file on a web page. Unlike regular frames, they cannot be resized. You can place a floating frame anywhere; you can place an image or other element on an ordinary web page. The &lt;IFRAME> tag is used to create a floating frame. Attributes • Src ”URI” specifies the URI containing the initial contents of the frame. • Name names the current frame. • Frameborder ”1 | 0” Toggles borders to be drawn around the frame. 1 represents a border is drawn. 0 represents a border is not drawn. • Marginwidth ”pixels” Sets the margin between the contents of the frame and its left and right borders.<br /> <br /> • Noresize Prohibits the user agent from resizing the frame. • Scrolling ”auto | yes |no” determines whether the user agent provides scrolling devices for the frame. The syntax for the &lt;IFRAME> tag is: &lt;IFRAME WIDTH=400 HEIGHT=300 SRC=”anypage.htm”> </IFRAME> Example: <HTML> <head> <title>example of inline frame</title> </head> <body bgcolor="pink" text="blue"> <p> DIFFERENT FILES <center> &lt;IFRAME src="first.htm" marginheight="0" frameborder="10" width="300" height="100"> <P> The <A href="first.htm" rel="nofollow">first</A> first file is available. </IFRAME> &lt;IFRAME src="sec.htm" marginheight="0" frameborder="10" width="300" height="100"> <P> The <A href="sec.htm" rel="nofollow">sec</A>second file is available. </IFRAME> &lt;IFRAME src="third.htm" marginheight="0" frameborder="10" width="300" height="100"> <P> The <A href="third.htm" rel="nofollow">third</A>third file is available. </IFRAME> </center> </body> </HTML> Output:<br /> <br /> STYLE SHEET A style is a set of formatting instructions for any given HTML element specified by the W3C. Many webmasters are already using styles in their web pages because of their usefulness. For example, the heading <H> tags represent various styles: Heading level one is bold, times new roman, and 24 points by default; Heading level four is bold, times roman, and 12 points by default; Using style sheet features, you can change these default attributes. You can also control margins, line spacing, and placement of design elements, as well as specify colors, fonts, and point sizes. There are three ways you can use style sheets on pages in your web: • Link a page to an external style sheet. • Create an embedded style sheet on a page. • Apply inline styles to individual page elements. Each method has advantages and disadvantages: Use an external style sheet when you want to apply the same styles consistently across some or all pages in your web. By defining styles in one or more external style sheets and linking them to pages, you ensure consistency of appearance throughout those pages. If you decide to change a style, you need only make one change — in the external style sheet — and the change will be reflected in<br /> <br /> all of the pages linked to that style sheet. Typically, an external style sheet uses the .css file name extension, such as Mystyles.css. Use an embedded style sheet when you want to define styles only for the current page. An embedded style sheet is a type of cascading style sheet that's "embedded" within the <HEAD> tags of a page. Styles in an embedded style sheet can be used only on that same page. Use inline styles to apply cascading style sheet properties to individual elements on a page. If a page is linked to an external style sheet, the embedded or inline styles that you create for that page will either extend or override properties specified in the external style sheet. Note: Linked and inline style sheets are ignored by non-style sheet capable browsers. Example of INLINE STYLE SHEET &lt;SPAN STYLE=”font-size: 14pt; color: red”> Example of EMBEDDED STYLE SHEET Suppose you want to create a page like the following • • Create a light gray background for the page • Center all <H3> headings and display their text in white. • Indent the first line of all paragraphs. So the HTML code will be <HTML> <HEAD>&lt;TITLE>Sample Example</TITLE> &lt;STYLE> BODY {BACKGROUND: pink} H3 {TEXT-ALIGN: “center”; COLOR: “RED”} P {TEXT-INDENT: “+10%”} </STYLE></HEAD> <BODY> <H3>This heading has been created for style sheet</H3> <P> This is a normal paragraph. </P> </BODY> </HTML><br /> <br /> Output:<br /> <br /> Cascading style sheet Cascading style sheets refers to the use of multiple, overlapping style definitions in a single document. A style sheet file can link to every document in a web site, thus controlling the overall look and feel of the site. The HTML 3.2 recommendation for Cascading Style Sheets specifies four ways to apply style variations. The first two methods provide ways to reference external style sheets (text files with .css extensions), which allow you to use styles across multiple web pages. The third method defines styles for a single page. The fourth method is used to make quick temporary style changes to existing HTML text, such as spanning a background color or an image behind words. Working with cascading style sheets Cascading style sheets give you more control over the appearance and presentation of your pages. Using cascading style sheets, you can extend the ability to precisely specify the location and appearance of elements on a page and create special effects. You can also make your site more accessible for visitors with specialized browsers or output devices. The contents of a style sheet A cascading style sheet (CSS) defines the styles that you can apply to pages or page elements. Each style definition, or style rule, consists of a selector followed by the properties and values for that selector. The following are simple examples of style rules defined in a style sheet: H1 {font-size: x-large; color: green}<br /> <br /> H2 {font-size: large; color: blue} . Note {font-size: small} #Footer {font-family: serif} In the example, H1 and H2 are selectors that modify the formatting properties of standard HTML tags. The selectors' properties and values are contained within the curly braces { } — font-size is a property, and x-large is the value of the fontsize property. You can specify multiple properties for a selector by separating each with a semi-colon (;). In this example. note is a class selector, and #footer is an ID selector. Using cascading style sheets, you can set a wider range of properties than using standard HTML alone, including: • • • •<br /> <br /> Font effects, such as small caps and expanded character spacing. Paragraph properties, such as indentation, line spacing, and spacing before or after. Borders and shading properties, such as boxes and background colors. Positioning properties, such as text wrapping around page elements, absolute or relative positioning of page elements, and z-order (front to back layering) of page elements.<br /> <br /> Linking to style sheets from your html file <LINK REL=STYLESHEET TYPE=”text/css” HREF=”http:// www.domain.com/styles.css”> To set the color of all the tags to blue, you write in the HEAD tag (or right below the TITLE tag): &lt;STYLE TYPE="text/css"> H3 {color: yellow;} FONT {color: blue;} </STYLE> In the CSS code below, FONT is known as the sector and color: blue or anything else that goes within the brackets is known as the declaration. Every HTML tag that fits under the specifications of the sector are given the declarations listed. In this case, any FONT tag in the document is given the color blue. Example of inserting a .css file into .htm file Sty.css BODY {BACKGROUND: cyan} H2 {TEXT-ALIGN: "center"; COLOR: "RED"} P {TEXT-INDENT: "+20%”}<br /> <br /> Cas.htm <HTML><HEAD>&lt;TITLE>Sample Example</TITLE> <LINK REL=Style Sheet HREF="sty.css" type="text/css"> </HEAD><BODY> <H2>This heading has been created for external style sheet</H2> <P> CASCADING STYLE SHEET.</P> </BODY> </HTML><br /> <br /> Output:<br /> <br /> IMPORTANT ATTRIBUTES USED IN STYLE SHEETS ATTRIBUTE Color Background<br /> <br /> SAMPLE VALUES Any html color name or value Any html color name or value, can also use images.<br /> <br /> Font<br /> <br /> Bold 14pt “Verdana”<br /> <br /> Font – family<br /> <br /> Times, Palatino, etc.<br /> <br /> Font –size Font –weight Font –style Text-decoration<br /> <br /> 12pt(points); 1”(inches); .5cm; 200px(pixels) etc. Bold, normal, light Italic Underline or none<br /> <br /> Line-height<br /> <br /> 150%, 75px, 1.08in,etc.<br /> <br /> Text-indent<br /> <br /> .25in, 3cm, 24pt, 50px, 3cm etc .25in, 3cm, 24pt, 50px, 3cm etc .25in, 3cm, 24pt, 50px, 3cm etc Center, left, right<br /> <br /> Margin-left Margin-top Text-align<br /> <br /> DESCRIPTION Sets font color color : red Displays background color or image behind html element background: yellow background : url (file.gif) font: 38pt “Times Roman” font: light 18pt Arial Font-family: Garamond Font-family: Arial,” Sans Serif” font –size: 48pt font –size: .25in font –weight: bold font –style: italic text-decoration: underline text-decoration: none line-height: 90% line-height: 1.5in text-indent: .25in margin-left: 1in margin-left: -4em margin-top: 48pt margin-top: -1.5in text-align: center<br /> <br /> INTRODUCTION TO DHTML With the explosion of interest in the Internet that is in the World Wide Web HTML has assumed a prominent place in the computer world. HTML has evolved to meet the increasing demand for attractive web sites. But the end products, static web pages that often required repeated time-consuming round trips between client and server machines, clearly showed that a new direction is in order. DYNAMIC HTML is that new direction. What is DHTML? Dynamic HTML (DHTML) is a Microsoft enhancement to HTML version 4.0 that lets you create special effects such as text that flies off the page one word at a time, or rotating billboard-style transition effects between pages. However, some Web browsers don't support DHTML, so pages containing DHTML might not be displayed properly or might contain errors when viewed by some site visitors. Use of DHTML You can create special effects that are displayed when a site visitor enters or leaves your site, or browses to or from a specific page. By applying transition effects consistently and judiciously throughout your web, you can create slideshow-style presentations with professional-looking transitions between pages. Such as • When you point to this paragraph, the font changes to bold. • When you click this paragraph, a border and shading are added to it. DHTML combines HTML with cascading style sheets (CSS) and scripting languages. So, actually what it does? • HTML specifies a Web page’s elements, like a form, table, heading, paragraph, or a bulleted list. • CSS enables you to decide how a Web browser renders those elements: so CSS can be used to determine an element’s color, position, size etc. • Scripting languages enables you to manipulate the web page’s elements. What are the scripting languages can be used? JavaScript and VBScript, either of them can be used as a scripting language. VBScript is a subset of Microsoft’s popular Visual Basic. The second one JavaScript, has some syntax of Java, but is very different from Java. Both VBScript and JavaScript work with software structures called OBJECTS.<br /> <br /> Unlike programming languages that can create applications that run by themselves, a scripting language requires a piece of software called an interpreter to run its programs. Internet Explorer has its built-in interpreter for VBScript and JavaScript, and Navigator has a built-in interpreter for JavaScript. Script languages are written like this: &lt;SCRIPT Language=”VBScript”> <! ----</SCRIPT> The core of DHTML object model is its object hierarchy. The object hierarchy is where all the objects that you will need to access and modify the state of the browser and the HTML page are stored. A collection is a set of things grouped together by the DHTML object model. For example, it can be a collection of links, frames, forms, and other elements such as images. What is XML? XML - EXtensible Markup Language is a Meta language that means it is used to define languages. Here you can create your own tag and you can apply that according to your requirement following some rules. So, XML is a standard for the creation of tagging languages and it is the advantage that it allows you to define your own data structures.<br /> <br /> MORE EXAMPLE PROGRAMS<br /> <br /> 1.<br /> <br /> <HTML> <HEAD> &lt;TITLE>HOT WATER SAFETY</TITLE> </HEAD> <BODY> <PRE>Hot water is dangerous. Turn down the hot water heater thermostat. Always supervise children in the bathtub. Don’t encourage children to play around the tub. </PRE> </BODY> </HTML><br /> <br /> 2.<br /> <br /> <HTML> <HEAD> &lt;TITLE> Sample HTML Page </TITLE> </HEAD> <BODY> <H1>This is the main heading</H1> <P> Here is a bulleted list: </P> <HR> <UL> <LI>Item1</LI> <LI>Item2 <UL> <LI>Item 2A</LI> <LI>Item 2B</LI> </UL></LI> <LI>Item3</LI> <LI>Item4</LI> </UL> <HR> <P>………and the page continues…</P> </BODY> </HTML><br /> <br /> 3.<br /> <br /> <HTML> <HEAD> &lt;TITLE>BASIC CPR</TITLE> </HEAD> <BODY> BASIC CPR <OL> <LI>Use Body Substance Isolation Precautions<p><br /> <br /> If available, be sure to use latex or vinyl gloves, goggles and a barrier device with one-way valve. <BR>&lt;EM> BSI is crucial to your safety and the safety of your patient. </EM> <LI>Determine Unresponsiveness <LI>Open Airway <LI>Look, Listen and Feel for breathing <LI>Ventilate Twice </OL> <P>Look for chest rises and listen for exhalation while ventilating. If no air enters, reposition the airway and try again. </P> <H3>CIRCULATION</H3> <OL> <LI>Check for Pulse <LI> If No Pulse, Begin Compressions </OL> </BODY> </HTML> 4.<br /> <br /> <HTML> <HEAD> &lt;TITLE>PATIENT ASSESSMENT</TITLE> </HEAD> <BODY> <OL TYPE=A> <LI>Safety Considerations <OL TYPE=1> <LI>Body Substance Isolation <LI>Scene safety <LI>Initial Size-up </OL> <LI>INITIAL PATIENT ASSESSMENT <OL TYPE=1> <LI>General Impression <LI>Unresponsiveness <OL TYPE=i> <LI>Alert to person, place and time <LI>Verbal response to audible stimuli <LI>Pain evokes verbal or physical response <LI>Unresponsive to all stimuli </OL> </OL> <LI>PATIENT CRITICAL NEEDS <UL> <LI TYPE="square">Use oxygen if needed<br /> <br /> <LI TYPE="square">Consider use of assisting with bag valve mask </UL> <LI>MEDICATIONS <UL> <LI TYPE="circle">Oral Glucose <LI TYPE="disc">Activated Charcoal </UL> &lt;MENU> <LI>ListItem1 <LI>ListItem2 </MENU> </BODY> </HTML> 5.<br /> <br /> 6.<br /> <br /> <HTML> <HEAD> &lt;TITLE>TABLE OF INFORMATION</TITLE> </HEAD> <BODY> <TABLE border=3 width=75%> <TR> <td colspan = 2>Cell 1.1 <td>Cell 1.2 <td>Cell 1.3 <TR> <td>Cell 2.1 <td>Cell 2.2 <td>Cell 2.3 <TR> <td>Cell 3.1 <td>Cell 3.2 <td>Cell 3.3 </TABLE> </BODY> </HTML><br /> <br /> <HTML> <HEAD> &lt;TITLE>EXAMPLE OF TABLE</TITLE></HEAD> <BODY> <TABLE COLS="7"> <COLGROUP SPAN="3" WIDTH="20%"> <COLGROUP SPAN="4" WIDTH="10%"> <TR> <TD>CONTENT1 <TD>CONTENT2 <TD>CONTENT3 <TD>CONTENT1<TD>CONTENT2<TD>CONTENT3<TD>CONTENT4 <TR> <TD>CONTENT1 <TD>CONTENT2 <TD>CONTENT3 <TD>CONTENT1 <TD>CONTENT2 <TD>CONTENT3 <TD>CONTENT4 </TABLE><br /> <br /> </BODY> </HTML> 7.<br /> <br /> <HTML> <HEAD> &lt;TITLE>INCIDENT LOG</TITLE> </HEAD> <BODY> <H1>Volunteer Time Record</H1> <TABLE BORDER="0" WIDTH="75%" CELLSPACING="0" CELLPADING="0"> <CAPTION ALIGN="TOP">Prepared for the month of February 1997</CAPTION> <TR ALIGN="CENTER" VALIGN="CENTER"> <TD WIDTH="50%" NOWRAP="NOWRAP">Firefighter ID: 294</TD> <TD WIDTH="50%" NOWRAP="NOWRAP">Report Date: 11-Mar97</TD> </TR><TR> <TD COLSPAN="2"><P><CENTER>F=Fire &nbsp; E=Emergency Medical &nbsp; H=HazMat &nbsp; T=Training</CENTER></P> </TD> </TR> </TABLE> <HR> <TABLE COLS="3"> <THEAD> <TR> <TH>Incident Date <TH>Incident Time <TH>Incident Type </THEAD> <TBODY ALIGN="LEFT" VALIGN="TOP"> <TR ALIGN=LEFT> <TD>Feb 01, 1997 <TD>09:00 <TD>T <TR ALIGN=LEFT> <TD>Feb 01, 1997 <TD>22:00 <TD>E <TR ALIGN=LEFT> <TD>Feb 03, 1997 <TD>19:00 <TD>T <TR ALIGN=LEFT> <TD>Feb 05, 1997<br /> <br /> <TD>19:00 <TD>T <TR ALIGN=LEFT> <TD>Feb 06, 1997 <TD>15:10 <TD>F <TR ALIGN=LEFT> <TD>Feb 10, 1997 <TD>19:00 <TD>T <TR ALIGN=LEFT> <TD>Feb 12, 1997 <TD>19:00 <TD>T <TR ALIGN=LEFT> <TD>Feb 14, 1997 <TD>18:00 <TD>T <TR ALIGN=LEFT> <TD>Feb 15, 1997 <TD>09:00 <TD>T <TR ALIGN=LEFT> <TD>Feb 17, 1997 <TD>12:30 <TD>E </TBODY> </TABLE> <HR> </BODY> </HTML> 8.<br /> <br /> <HTML> <HEAD>&lt;TITLE>MORE ABOUT TABLE</TITLE></HEAD> <BODY> <TABLE border="0" cellspacing="20" bgcolor="#CCCCCC"> <CAPTION>ALBUMBS AND SINGLES</CAPTION> <TR> <TD> <TABLE border="10" cellpading="4"> <CAPTION>ALBUMBS </CAPTION> <TR><TD><I>Little Earthquakes</I><TD>82358-2 <TR><TD><I>Under The Pink</I><TD>82567-2 <TR><TD><I>Boys For Pele</I><TD>82862-2 </TABLE> </TD><br /> <br /> <TD> <TABLE border="10" cellpading="4"> <CAPTION>SINGLES </CAPTION> <TR><TD>"Crucify"<TD>82399-2 <TR><TD>"God"<TD>85687-2 <TR><TD>"Cornflake Girl"<TD>85655-2 <TR><TD>"Caught A Lite Sneeze"<TD>85519-2 </TABLE> </TD> </TR> </TABLE> </BODY> </HTML> 9.<br /> <br /> <HTML> <HEAD> &lt;TITLE>A TWO-COLUMN LAYOUT EXAMPLE</TITLE> <BODY> <TABLE width=100% cellspacing=15 border=0> <TR valign="top"> <TD width=33%> </TD> <TD width=67% id="tblTitle"> <H1>Backcountry Travel</H1> </TD> <TR valign="top"> <TD> <DL> <DT>&lt;STRONG><A href="#intro" alt="Introduction" rel="nofollow">Introduction</A></STRONG> </DL> <DL> <DT>&lt;STRONG><A href="#prepare" alt="Preparation" rel="nofollow">Before You Travel</A></STRONG> <DD>&lt;EM>How far can you go? <BR> What should you wear? <BR> What should you carry? <BR> What else should you do? </EM> </DL> <DL> <DT>&lt;STRONG><A href="#lost" alt="In To Travel" rel="nofollow">When things go wrong</A></STRONG> <DD>&lt;EM>Stay! <BR> Think! <BR> Observe! <BR> Plan! </EM><br /> <br /> </DL> </TD> <TD> <P><A name="intro." rel="nofollow">Walking in the woods, </A> whether as a hiker, camper, backpacker or hunter, provides plenty of opportunities to practice the skills of a backcountry traveler...</P> <BLOCKQUOTE> &lt;EM> This is in no way intended to be a course in backcountry safety or survival. It's you against the wall, and we are not talking any responsibility for the outcome. </EM> </BLOCKQUOTE> <H2><A name="prepare" rel="nofollow"> Before you travel</A></H2> <H3>How far can you go? </H3> <P>When choosing a location and route, take into account your physical condition, the reason for hiking, and the terrain and weather you could possibly encounter.........</P> <H3> What should you wear? </H3> <P>Proper footgear is one of the most important parts of your journey. Sturdy running shoes are good for hiking, on relatively smooth surfaces, such as maintained trails...</P> <H3>What should you carry? </H3> <P>For short trips, a fanny pack or day pack should include at least one quart of water per person, map, flashlight, first aid kit, rain gear, highenergy snack, toilet paper.........</P> <H2><A name="lost" rel="nofollow">When things go wrong</A></H2> <BLOCKQUOTE>&lt;EM>The worst thing you can do is to get frightened. The truly dangerous enemy is not the cold or the hunger, so much as the fear. It robs the wanderer of his judgement and of his limb power; it is fear that turns the passing experience into a final tragedy.........keep cool and all will be well.... Use what you have, where you are, right now. </EM><BR> <CITE>Ernest Thompson Seton, 1906</CITE> </BLOCKQUOTE> <P>So, you've planned, you've prepared, and now you are on the trail and the worst part is, you don't know where you are. There is a four step process to follow, and all you have to do is STOP</EM>--&lt;STRONG>S</STRONG>tay. &lt;STRONG>T</STRONG>hink. &lt;STRONG>O</STRONG>bserv. &lt;STRONG>P</STRONG>lan. </P> &lt;EM>............More stuff here...........</EM> </TD> </TR> </TABLE> </BODY><br /> <br /> </HTML> 10.<br /> <br /> <HTML> <HEAD>&lt;TITLE>PICTURE</TITLE> </HEAD> <BODY> <H1>Birthday Cake </H1> <P> It's not for me. It's not my birthday. But I like this very much. It’s my favorite. <IMG SRC="Cake.jpg" align="middle" ALT="[A birthday party cake.]"> This is for my best friend. She likes this type of cake very much. That's why I like this very much. I will give it to her. When she will get it, I think she will be happy. </P> <HR> <P> To find out so many types of cakes you visit Internet, and you can see so many things. </BODY> </HTML><br /> <br /> 11.<br /> <br /> <HTML> <HEAD>&lt;TITLE>FORM</TITLE></HEAD> <BODY bgcolor=CYAN> <FORM name=form method=post> <FIELDSET> <LEGEND><H2>BUILD YOUR PIZZA</H2></LEGEND> <LABEL><H3>PICK YOUR TOPPINGS: </H3> <INPUT type="checkbox" name="topping" value="cheese" checked>Cheese<BR> <INPUT type="checkbox" name="topping" value="pepperoni">Pepperoni<BR> <INPUT type="checkbox" name="topping" value="shrooms">Mushrooms<BR> <INPUT type="checkbox" name="topping" value="clams">Smoked Clams<BR> </LABEL> <H3>PICK A CRUST: </H3> <INPUT type="radio" name="crust" value="deep dish" checked>DeepDish<BR> <INPUT type="radio" name="crust" value="hand tossed">Hand Tossed<BR><br /> <br /> <INPUT type="radio" name="crust" value="whole wheat">Whole Wheat<BR> <H3>Where should the pizza go:</H3> NAME: <INPUT type="text" name="name" size="20"><BR> ADDRESS: <INPUT type="text" name="address" size="40"><BR> APT #: <INPUT type="text" name="apartment" size="6"><BR> CITY, STATE ZIP: <INPUT type="text" name="city" size="40"> : <INPUT type="text" name="state" size="2"> : <INPUT type="text" name="zipcode" size="10"> <TEXTAREA name="instructions" cols="40" rows="10"> Are there any special instructions to get to your place? </TEXTAREA> <H3>how fast do you want it: </H3> &lt;SELECT name="DeliverySpeed" multiple> <OPTION> Super Fast, the kids are revolting</OPTION> <OPTION>Fast, I just woke up and I'm starving</OPTION> <OPTION selected> Just make sure It's warm when it gets here</OPTION> <OPTION> Please deliver before stuff starts growing on it</OPTION> </SELECT> </FIELDSET> </FORM> </BODY> </HTML> 12.<br /> <br /> <HTML> <HEAD>&lt;TITLE>FORM2</TITLE></HEAD> <BODY bgcolor=pink> <FORM> <H2> INFORMATION REQUEST</H2> <BR> FIRST NAME: <INPUT type=text name=t1 size=15 maxlength=30> <BR>LAST NAME: <INPUT type=text name=t2 size=15 maxlength=30> <BR>E-MAIL ADDRESS: <INPUT type=text name=t3 size=20 maxlength=30> <BR>ADDRESS: <INPUT type=text name=t4 size=30 maxlength=50> <BR>CITY<INPUT type=text name=t5 size=10 maxlength=25> STATE: <INPUT type=text name=t6 size=15 maxlength=30> <BR>COUNTRY: <INPUT type=text name=t7 size=20 maxlength=30><BR><BR> PLEASE CHOOSE THE MOST APPROPRIATE STATEMENT. <BR><INPUT type="radio" name="buying" value="regular"> I regularly purchase items online. <BR><INPUT type="radio" name="buying" value="sometimes"><br /> <br /> I have on occasion purchased item online. <BR><INPUT type="radio" name="buying" value="might" checked> I have not purchased anything online, but I would consider it. <BR><INPUT type="radio" name="buying" value="willnot"> I prefer to shop in real stores. <br><br> <P> I'm interested in (choose all that apply): <BR><INPUT type="checkbox" name="Hiking" value="Hiking"> Hiking <BR><INPUT type="checkbox" name="MBiking" value="MBiking"> Mountain Biking <BR><INPUT type="checkbox" name="Camping" value="Camping">Camping <BR><INPUT type="checkbox" name="RClimbing" value="RClimbing">Rock Climbing <BR><INPUT type="checkbox" name="4WD" value="4WD">Off-Road 4WD <BR><INPUT type="checkbox" name="ccskiing" value="ccskiing">Crosscountry skiing <BR> <BR> I learned about this site from: <BR> &lt;SELECT name="referral" size=2> <OPTION value="print" selected>Print Ads <OPTION value="visit">In-Store Visit <OPTION value="rec">Friend's Recommendation <OPTION value="internet">Sources on the Internet <OPTION value="other">Other </SELECT><BR><BR> <TEXTAREA name="comments" COLS="40" ROWS="5"> Please type any additional comments here. </TEXTAREA> <BR><BR> Please paste this photo I took into your gallery! <INPUT type="file" name="filenew" size="20" accept="image/*"> <BR><BR><CENTER><INPUT type="submit" value=submit> <INPUT type="reset" value=reset> </FORM> </BODY> </HTML> 13. <HTML> <HEAD>&lt;TITLE>FRAME</TITLE></HEAD> <FRAMESET cols=”50%, *”> <FRAMESET rows=”50%, *”> <FRAME src=”frame1.htm”> <FRAME src=”frame2.htm”> </FRAMESET><br /> <br /> <FRAME src=”frame3.htm”> <FRAME src=”frame4.htm”> <FRAME src=”frame5.htm”> </FRAMESET> </HTML> 14<br /> <br /> <HTML> <HEAD>&lt;TITLE>FRAME</TITLE></HEAD> <BODY> <H1>This is your city reference</H1> <P><A href="ny.htm" target="cities" rel="nofollow">Go to the New York Page. </A></P> <P><A href="paris.htm" target="cities" rel="nofollow">Go to the Paris Page. </A></P> <P><A href="tokyo.htm" target="cities" rel="nofollow">Go to the Tokyo Page. </A></P> </BODY> </HTML> ny.htm <HTML> <HEAD>&lt;TITLE>NY</TITLE></HEAD> <BODY> <H1>Welcome to the New York Page</H1> How about a Broadway show? </BODY> </HTML> Paris.htm <HTML> <HEAD>&lt;TITLE>Paris</TITLE></HEAD> <BODY> <H1>Welcome to the Paris Page</H1> Very fine. </BODY> </HTML> Tokyo.htm <HTML> <HEAD>&lt;TITLE>Tokyo</TITLE></HEAD> <BODY> <H1>Welcome to the Tokyo Page</H1> Very Interesting. </BODY> </HTML><br /> <br /> 15.<br /> <br /> <HTML> <HEAD>&lt;TITLE>STYLE SHEET1</TITLE></HEAD> &lt;STYLE> P {background-color: blue; position: absolute; left: 40px; top: 40px; width: 300px; height: 260px; z-index: 1} BLOCKQUOTE {background-color: yellow; position: absolute; left: 80px; top: 80px; width: 300px; height: 260px; z-index: 2} </STYLE> </HEAD> <BODY> <BLOCKQUOTE> <FONT size=7>Do you want to play hide and seek?</FONT> </BLOCKQUOTE> <P><FONT size=7>Count to ten. </FONT></P> </BODY> </HTML><br /> <br /> 16.<br /> <br /> <HTML> <HEAD>&lt;TITLE>IMG EXAMPLE</TITLE></HEAD> <BODY BGCOLOR=GRAY> <IMG SRC="bgmc.jpg" align=left WIDTH=150 HEIGHT=150 border=1> MASTER CARD <BR> <IMG SRC="bgjcb.jpg" align=left WIDTH=150 HEIGHT=150 border=3> JCB INTERNATIONAL <BR> <IMG SRC="bgvisa.jpg" align=left WIDTH=150 HEIGHT=150 border=5> VISA CARD <BR> </BODY> </HTML><br /> <br /> 17.<br /> <br /> <HTML> <HEAD>&lt;TITLE>NAMED FRAMES</TITLE></HEAD> <FRAMESET COLS="1*, 3*"> <FRAME src="ny.htm" NORESIZE FRAMEBORDER=1> <FRAME src="ex17.htm" name="IMG EXAMPLE"> <NOFRAMES> <BODY> YOUR BROWSER DOES NOT DISPLAY FRAMES. <A href="ex12.htm" rel="nofollow">go there</A> </BODY>

  18.

  <TITLE>TV SCHEDULE

  Television Schedule for Monday

  Channel	Time
	6 AM		7 AM
	Show	Description	Show	Description
3	CHIPS	Ponch discovers some stolen Pentium processors.	The Munsters	Herman creates a family home page. The cops confiscate his computer.
7	I love Lucy	Lucy surfs the web and accidentally charges $50,000 to her VISA.	The X-files	Scully and Mulder investigate some alien-infested table cells.

  19.

  <TITLE>BUILDING A CAKE <STYLE type="text/css">

  HELLO...........WELCOME

  WINSERV TECHNOLOGY

  20.

  <TITLE>ELEMENT BOX WIDTH EXAMPLE <STYLE>
  border: 4px solid blue} P.fifty {width: 50%; border: 6px blue} P.eighty {width: 80%; border: 10px solid blue} P.hundred {width: 100%; border: 12px solid blue} --!>

  This paragraph has a style sheet width of 20%

  This paragraph has a style sheet width of 50%

  This paragraph has a style sheet width of 80%

  This paragraph has a style sheet width of 100%

  21. <TITLE> WORKING WITH DIVs

  ---

  Related Documents

  Html Tutor

  April 2020 64

  Html

  November 2019 38

  Html

  June 2020 22

  Html

  December 2019 41

  Html

  November 2019 39

  Html

  November 2019 35

  ---

  More Documents from ""

  The Balanced Scorecard

  June 2020 14

  Definition: A Feeling Of Strong Attachment Induced By That Which

  June 2020 11

  Balance Sheet Accounting

  June 2020 15

  Calculateinterestaftercustomerchange.docx

  December 2019 17

  Business Definition For: Generally Accepted Accounting Principles (gaap)

  June 2020 13

  Wordole.txt

  December 2019 21

  Copyright © 2024 PDFCOKE.