Sagar HTML Notes

Introduction to HTML

What is HTML?

HTML is a language made for creating the web pages for the websites.

By using HTML language the even a child can make his web pages or even his own website so why not you.

Here are some facts about the HTML language:

Why do Need HTML

As the HTML is a very easy language for creating the web pages. It can be learned in few hours or in few days. It is the basic format of the HTML file it can be displayed on mostly operating system which supports the web browser.

Basics of HTML

What is an HTML File?

· HTML stands for Hyper Text Markup Language.· An HTML file is a text file containing small markup tags.· The markup tags tell the Web browser how to display the page.· An HTML file must have an htm or html file extension.

An HTML file can be created using any simple text editor like "Notepad" of the Microsoft Windows.

First of all let me explain the above web page and how it is created, how easily it can be created.

It is very easy to insert the element in the HTML pages simply by writing their tags and provide their attribute.

Basic Description of HTML File

The HTML file can be divided into the three parts:HTML HeaderHTML BodyHTML Footer

So let us see the Body of the HTML File:

HTML Header is the top most part of the HTML file in this section of the file we define the header of file and also Title of the file can be provided.

HTML Body is the middle part of file, in this section we define all text and elements which is to displayed on web page.

HTML Footer is the end section of the file.

How To Write a HTML File

To write a HTML file you need an text editor, open the text editor and start writing file as given below:

Steps to write a file & view the web page:

· Open the text editor (e.g. notepad).· Write the above file in it OR copy the above file and paste it on the notepad.· Save this file as .htm or .html file extension (e.g. <filename>.htm , <filename>.html).· Now open the Internet Browser and open the saved file.· Now you can see your web page.

The file starts from an <html> tag and ends with the </html>. <html> tag

identifies that it is an HTML file. <html> is also called as open tag and it also need its closed tag which is </html>. Between these tags we will define the Header of the file, so add the <head> tag and below it write </head> to close <head> tag.

More to display the Title to the Web Browser use the special tag <title> write here title </title>. Text written between the <title> & </title> tag will be displayed as the header of the your web page. The important tag is <body> tag. Whatever you want to display on the web page you must write it in between <body> & </body>.

Basic HTML Tags

The most important tags in HTML are tags that define headings, paragraphs, body and line breaks. The basic HTML Tags are described here in the form of table so that you can remind them easily.

Basic HTML Tags

Tag Description

<html> Defines an HTML document

<head> Defines information about the document

<title> Defines the document title

<body> Defines the document's body

<h1> to <h6> Defines header 1 to header 6

<p> Defines a paragraph

<br> Inserts a single line break

<hr> Defines a horizontal rule

<!--> Defines a comment

Description Of The Above Tags

<html>tagThis element tells a browser that this is an HTML document. This tag is defined at the top of the HTML file and at the end of file.

Format:<html> <body>..............body of HTML.............</body></html>

Example:<html> <body> this is my first page </body></html>

<head> tagThe head tag defines information about the document. The browser does not display the "head information" to the user. The following tags can be in the head section: <base>, <link>, <meta>, <script>, <style>, and <title>. The head tag is used between <html> and <body> tags.

Format:<html> <head>.....head sections....</head><body>......body of HTML........</body></html>

Example:

<html> <head><title>Basic tag</title></head><body> this is my first page </body></html>

<title> tagTitle tag defines the title of the document which appears in the Title bar of the explorer window.Title tag is used in between <head> and </head> tag. because it is title tag is section of <head> tag.

Format:<html> <head><title>Title of the Page</head><body>.....body of HTML......</body></html>

Example:<html> <head><title>Basic tag</title></head><body> this is my first page </body></html>

<body> tagThe body element defines the documents' body. It contains all the contents of the document (like text, images, colors, graphics etc).

Format:<body bgcolor ="color_name" background="file_name" links="color_name" text="color_name">

Example:<body bgcolor ="red" background="c:\img\sky.jpg" links="blue" text="black">

Attributes

Attribute Value Description

background file_name An image to use as the background. Deprecated. Use styles instead.

bgcolor color_name The background color of the document. Deprecated. Use styles instead.

link, alink, vlink color_name Specifies the color of all the links in the document. Deprecated. Use styles instead.

text color_name Specifies the color of the text in the document. Deprecated. Use styles instead.

<hn>...</hn> Heading TagsThese tags are used to display headings in an HTML document. through these tags you can increase the size of the text. In these tags <h1> tag defines the largest header & <h6> defines smallest.These tags are <h1> </h1>, <h2> </h2>, <h3> </h3>, <h4> </h4>, <h5> </h5>

Format:<hn>.............. text..............</hn>

Example:<h1> this is my first page </h1> or <h1 align="right">text</h1> Attribute of the <hn> Tag.

Attribute of the <hn> TagIt has only one attribute i.e. Align="value" values may be right, left, center and justified. you can use this align attribute in many tags to align the text or

elements. It has only one attribute i.e. Align="value" values may be right, left, center and justified. you can use this align attribute in many tags to align the text or elements.

align value (right, center, left, justified)

<p>.....</p> Paragraph TagThis tag is used for creating the paragraph in the web page. It is used inside the body of file.

Format:<p>......longtext..........</p>

Example:<p> This is the test of paragraph tag........</p>

In this tag align attribute can be used.

<br> tagThe <br> tag inserts a single line break. Use the <br> tag to enter blank lines, not to separate paragraphs. This tag has no end tag.

Format:text........<br>.....text

Example:this is a break <br> in the line.

<hr> tagThe <hr> tag inserts a horizontal rule. The <hr> tag has no end tag.

Format:text......<hr> ......text or text......<hr align=" " size=" " width=" ">.... text

Example:this is the test of the hr <hr> tag <hr>

Attribute


align right,left,center

The alignment of the horizontal rule.

size % , pixels The thickness (height) of the horizontal rule.

width % , pixels The width of the horizontal rule.

 Comment TagThe comment tag is used to insert a comment in the source code. A comment will be ignored by the browser. You can use comments to explain your code, which can help you when you edit the source code at a later date.

You can also store program-specific information inside comments. In this case they will not be visible for the user, but they are still available to the program. A good practice is to comment the text inside the script and style elements to prevent older browsers, that do not support scripting or styles, from showing it as plain text.

Format:

Example:

You might have became bored of reading so lets do some practical.

Follow these Steps:copy this code in the new file of any text editor.Save it with htm or html extension.Open the Internet Browser.Open the saved file in it.

Example:<html><head><title>In body tag</title></head><body bgcolor="lightyellow" text="red">In body tag, background color is defined as black and textcolor is defined as the white.<hr><h1> this is the h1 header </h1><h2> this is the h2header </h2><h3> this is the h3 header </h3><h4> this is the h4 header </h4><h5> this is the h5 header </h5><hr>This is the use of "Break" tag<br> and you will see use of more tags<br><hr> look at the use of comment tag it is good<hr><p> This is the use of paragraph tag and you will see use of more tags </p>The effect of "hr" tag <br> <hr></body></html>

Explanation of the page:The title of the page is at the top in blue strip. All the text appears in white color and background in the black color. Because in the <body> tag the bgcolor and text color is defined. The horizontal line appears because of the <hr> tag and the <br> tag breaks the text in between and displays it on new line. The comment statement is not displayed.

Character Format Tags

These tags are used for the formatting of the text such as underline, bold, italic, font, size, color of the text.

All these character formatting Tags are defined in the table shown below:

Char Format Tag Description

<b> Displays bold text

<i> Displays italic text

<tt> Renders as teletype or mono spaced text

<u> Displays underlined text

<em> Displays emphasized text

<big> Displays big text

<small> Displays small text

<strong> Displays strong text

<sub> Displays subscripted text

<sup> Displays superscripted text

<bdo> Defines the direction of text display

<font> Defines the font face, size, and color of text

<b> TagThe <b> tag is used to make the text bold.

Format:<b> ................text.........</b>

<i> TagThe <i> tag displays the italic text.

Format:<i> ................text.........</i>

<tt> TagThe <tt> tag displays the typewriter text.

Format:<tt> ................text.........</tt>

<u> TagThe <u> tag displays the underlined text.

Format:<u> ................text.........</u>

<em> TagThe <em> tag displays the emphasized text.

Format:<em> ................text.........</em>

<big> TagThe <big> tag displays the big text.

Format:<big> ................text.........</big>

<small> TagThe <small> tag displays the small text.

Format:<small> ................text.........</small>

<strong> TagThe <strong> tag displays strong text.

Format:<strong> ................text.........</strong>

<sub> TagThe <sub> tag displays text in subscripted format.

Format:<sub> ................text.........</sub>

<sup> TagThe <sup> tag displays superscripted text.

Format:<sup> ................text.........</sup>

<bdo> TagThe <bdo> tag defines the direction of the text.

Format:<bdo> ................text.........</bdo>

<font> TagThe <font> tag defines the font, color, size of the text.

Format:<font face="font_name" color="color_name" size="number">........text.........</font>

Examples of the Text Formatting tags

Examples Outputs

<b>This text is bold</b> This text is bold

<strong> This text is strong </strong> This text is strong

<big> This text is big </big> This text is big

<em> This text is emphasized </em> This text is emphasized

<i> This text is italic </i> This text is italic

<small> This text is small </small> This text is small

This text contains <sub> subscript </sub> This text contains subscript

This text contains <sup> superscript </sup> This text contains superscript

<u> this is underlined text </u> this is underlined text

<bdo dir="rtl">Here is some Hebrew text</bdo>

Here is some Hebrew text

You have read all the basis tags, So now lets do some practical.

Just write/copy this example on any text editor new file and save the file and open in the browser and see how it looks.

Example:<html><body><b>This text is bold</b><br><strong> This text is strong </strong><br><big> This text is big </big><br><em> This text is emphasized </em><br><i> This text is italic </i><br><small> This text is small </small><br>

<u> this is underlined text </u><br>This text contains<sub> subscript </sub><br>This text contains<sup> superscript </sup><br> The use of font tag<font face="arial" size="3" color="green">this is use of font tag</font></body></html>

Page in browser will Look Like:

Output Tags

These tags are often used to display computer/programming code. You might be surprised for "how to display the text containing the spaces, line breaks, programming codes, sample text, define variable". Do not worry, because in this chapter we are going to show you how easily you can do easily.

So lets start with these tags:

Tag Description

<pre> Defines preformatted text

<code> Defines computer code text

<tt> Defines teletype text

<kbd> Defines keyboard text

<var> Defines a variable

<dfn> Defines a definition term

<samp> Defines sample computer code

<pre>.........</pre>TagThis is preformatted text. It preserves both spaces and line breaks. The pre tag is good for displaying computer code.

Format:<pre> .....text.....</pre>

Example:<pre> for i = 1 to 10print inext i</pre>

Output:for i = 1 to 10print inext i

<code> .....text ......</code> TagThis tag is also used to display the computer code. But better you use <pre> tag.

Format:<code> .....text.....</code>

<kbd>.....Keyboard Input......</kbd> TagThis tag displays the Keyboard Input.

Format:<kbd> ........ Keyboard Input......</kbd>

<tt>......text....</tt> TagThis tag displays the typewriter text.

Format:<tt> .....text.....</tt>

<samp>....sample text...</samp> TagThis tag displays the sample text.

Format:<samp> .....sample text.....</samp>

<var> computer variable </var>This tag defines the computer variable.

Format:<var> computer variable </var>

<dfn> definition term </dfn>this tag is used for definition term.

Format:<dfn> definition term </dfn>

Examples of output tags

Examples Outputs

<pre> It preserve all spaces </pre> It preserve all spaces

<code>Computer code</code> Computer code

<kbd>Keyboard input</kbd> Keyboard input

<tt>Teletype text</tt> Teletype text

<samp>Sample text</samp> Sample text

<var>Computer variable</var> Computer variable

<dfn>Definition term</dfn> Definition term

Now you have learned the Output Tags so lets do some practical. Below there is a file type the same code on notepad (any text editor) and save it. now open this file in the internet browser.

Example:<html><body> <code>Computer code</code><br><kbd>Keyboard input</kbd><br><tt>Teletype text</tt><br><samp>Sample text</samp><br><var>Computer variable</var><br><p><b>Note:</b>These tags are often used to display computer/programming code.</p></body></html>


Block Tags

Tag

Description

<acronym> Defines an acronym

<abbr> Defines an abbreviation

<address> Defines an address element

<blockquote> Defines an long quotation

<center> Defines centered text

<q> Defines a short quotation

<cite> Defines a citation

<ins> Defines inserted text

<del> Defines deleted text

<s> Defines strikethrough text

<strike> Defines strikethrough text

<acronym>..text..</acronym>TagThe <acronym> tag defines the start of an acronym, like "WWW" and "C.B.I.". By marking up acronyms you can give useful information to browsers, spell checkers, translation systems and search-engine indexers.The title attribute can be used to show the full version of the expression when you are holding the mouse over the acronym(text).

format:<acronym title="text_to_display_when_mouse_over_the_text">..text..</acronym>

<abbr>..text..</abbr>Indicates an abbreviated form, like "Inc.", "etc.". By marking up abbreviations you can give useful information to browsers, spell checkers, translation systems and search-engine indexers.In some browsers the title attribute can be used to show the full version of the expression when you are holding the mouse over the abbreviation.

format:

<abbr title="text_to_display_when_mouse_over_the_text">..text..</abbr>

<address> ..address..</address>The <address> tag defines the start of an address. You should use it to define addresses, signatures, or authorships of documents. The address usually renders in italic. Most browsers will add a line break before and after the address element, but line breaks inside the text you have to insert yourself.

Format with Example:<address>Donald Duck<br />Box 555<br />Disneyland</address>

Output:Donald DuckBox 555Disneyland

<blockquote>.........Text........</blockquote>The <blockquote> tag defines the start of a long quotation.

Format with Example:<blockquote><p>here is a long quotation here is a long quotation</p></blockquote>

<center>....</center>This tag Centers its enclosed text horizontally.

Format:<center>... text .......</center>

<q> small text</q>The <q> tag defines the start of a short quotation.

Format:<q> small text</q>

<cite>This tag defines the citation.

Format:<cite> text </cite>

<ins>This tag provide the facility of inserting the text in between the text.

Format:<ins> text </ins>

<del>Defines text that has been deleted in a document.

Format:<del>..text..</del>

<s>or<strike>

The <s> and <strike> tags defines strikethrough text.

Format:<s> text </s> or <strike> text</strike>

Examples of Block tags

Examples Outputs

<blockquote><p>here is a long quotation </p></blockquote>

here is a long quotation

<q>here is a short quotation </q> here is a short quotation

<center>Center this text</center> Center this text

a dozen is <del>20</del>pieces! a dozen is pieces!

a dozen is <ins>12</ins>pieces! a dozen is 12 pieces!

<cite>Citation</cite> Citation

A version is <s>not available.</s> now available!

A version is not available. now available!

A version is <strike>not available.</strike> ok!

A version is not available. ok!

Now you have learned the Output Tags, so now lets do some practical.


Example:<html><head><title>Block Tags</title></head><body><br><b> center tag </b><center>Center this text</center><b> acronym tag </b><acronym title="World Wide Web">WWW</acronym><br><b> abbr tag </b><abbr title="hypertext markup language"> HTML</abbr><br><b> blockquote tag </b><blockquote>here is a long quotation here is a long quotation</blockquote><b> del tag </b>a dozen is <del>20</del> pieces!<br><b> ins tag </b>a dozen is <ins>12</ins> pieces!<br><b> s tag </b>A new version is <s>not yet available.</s> now available!<b> strike tag </b><br>A new version is <strike>not yet available.</strike> now available!</body></html>


Other Tags

The <style> tag

The <style> tag defines a style in a document.

The style element goes in the head section. If you want to include a style sheet in your page, you should define the style sheet externally, and link to it using <link>. Using this tag you can initialize the text properties as shown in the example. In the example color for the header tag is defined initially in the header part of the file using the <style> tag.

Format Example Output

<head><style type="text/css">h1 {color: yellow}h3 {color: lightgreen}</style></head>

<html><head><style type="text/css">h1 {color: yellow}h3 {color: lightgreen}</style><title>style tag</title></head> <body><h1>This is header < h1 > </h1><h3>This is header < h1 > </h3></body></html>

This is header < h1 >This is header < h1 >

In the above example, h1 is a tag which will be displayed in a color which has

been mentioned in the style tag. Just like h1 tag there is a tag i.e., h3 which will be displayed in the color which has been mentioned in the style sheet.

Attributes


type text/css Defines the content-type


The <div> tag

The <div> tag defines a division/section in a document. Use the <div> tag to group block-elements to format them with styles. This tag is used below the <body> tag.

Format Example Output

<body><div style=" " > </div></body>

<html><body>This is some text <div style="color:#FFFF00;"><h4>This is a header in a div section</h4><p>This is a paragraph in a div section</p></div></body></html>

This is some text

This is a header in a div section

This is a paragraph in a div section

Attributes


align left, right, top, bottom

How to align the text in the div element. better use style attribute.

Now lets have an example of both the tag.Just write/copy this example on any text editor new file and save the file and open in the browser and see how it looks.

Example:<html><head><style type="text/css">h1 {color: red}h3 {color: blue}</style><title>style tag</title></head> <body>Use of STYLE tag<h1>This is header H1 text </h1><h3>This is header H3 text </h3>Use of DIV tag<div style="color:#FF0000;">This is a header in a div section

<br>This is a paragraph in a div section</div><br></body></html>


In the above example we have seen the use of <style> and <div> tags. the both the headers h1 & h3 are displayed in the Red and Blue color because their color has been defined in the style tags. Then we saw the use of <div> tag, so the text defined in the <div> tag in displayed in the color defined inside the <div> tag.

Marquee Text with <marquee> Tags

This tag is used to to get a moving text. As on the television you see the moving news headlines. You can do this by using the <marquee> tag.Format : <marquee> Write the text to be scrolled </marquee>Example: <marquee> Write the text to be scrolled </marquee>

Attributes


bgcolor colorcode,colorname

Defines the back ground color to the text.

behavior alternet, slide Defines the type of movement to the text.

direction down, up, right, left Defines the movement direction of the text.

loop positive integer Defines the no. of times to text will scroll.

scrollamount

positive integer Defines the scrolling speed of the text.

title text Defines text will appear when mouse pointer is on it.

width, positive integer Defines the area of scrolling.

height

Behavior attribute

alternet: for this value the text bounces across the scroll region.slide: for this value the text slides into position.

if you do not defines the behavior attribute then the text keeps scrolling continues manner according to the direction. BLINKING TEXT with <blink>TagThis blinking text is the text which blinks like a bulb with on/off system. This blinking of text can be achieved in the HTML using the <blink> Tag.

Format : <blink> write the text to blink </blink>Example: <blink> This is the blinking text. </blink> so now lets do some practical.Just write/copy this example on any text editor new file and save the file and open in the browser and see how it looks.

Example:<html><head><title>Marquee & Blink </title></head><body><b>Marquee text with <br>direction=up height=50 width=200 scrollamount=1 bgcolor=lightyellow </b><br><marquee style="color: #FF0000; font-size: 12pt; font-weight: bold; font-family: Verdana" direction="up" height="50" width="200" scrollamount="1" bgcolor="lightyellow"> this is scrolling text</marquee></p><p><b>Marquee text with <br>direction=left height=20 behavior=alternate scrollamount=10 bgcolor=lightyellow </b><marquee style="color: #FF0000; font-size: 12pt; font-weight: bold; font-family: Verdana" direction="left" height="20" behavior="alternate" scrollamount="10" bgcolor="lightyellow"> this is scrolling text</marquee><br><br><b>Marquee text with <br>direction=left height=20 scrollamount=10 bgcolor=lightyellow </b><marquee style="color: #FF0000; font-size: 12pt; font-weight: bold; font-family: Verdana" direction="left" height="20" scrollamount="10" bgcolor="lightyellow"> this is scrolling text</marquee><br><br><font face="Verdana"><b>BLINKING TEXT</b></font></p></p><font color="#FF0000"><b><BLINK> <font face="Verdana">This is the blinking text.</BLINK></b></font></body></html>

In the above example we have used both the <marquee> & <blink> tags and output is shown. In case of <blink> tag it might happen that the text displayed in <blink> tag do not appears to be blinking. It is all because the Internet Explorer do not support the blinking text where as the Netscape Navigator supports.

Tags Ordered Alphabetically

Tags Description

 Defines a comment

<a> Defines an anchor




<area> Defines an area inside an image map

<b> Defines bold text


<big> Defines big text

<blink> Defines the blinking text in a document

<blockquote> Defines a long quotation

<body> Defines the body element


<button> Defines a push button

<caption> Defines a table caption

<center> Deprecated. Defines centered text


<code> Defines computer code text

<col> Defines attributes for table columns

<colgroup> Defines groups of table columns

<dd> Defines a definition description


<dir> Deprecated. Defines a directory list

<dfn> Defines a definition term

<div> Defines a section in a document

<dl> Defines a definition list

<dt> Defines a definition term

<em> Defines emphasized text

<frameset> Defines a fieldset

<font> Deprecated. Defines the font face, size, and color of text

<form> Defines a form

<frame> Defines a sub window (a frame)

<fieldset> Defines a set of frames




<html> Defines an html document

<i> Defines italic text

<iframe> Defines an inline sub window (frame)

<img> Defines an image

<input> Defines an input field


<kbd> Defines keyboard text

<label> Defines a label for a form control

<li> Defines a list item

<map> Defines an image map

<marquee> Defines the moving text in a document

<menu> Deprecated. Defines a menu list

<noframes> Defines a noframe section

<ol> Defines an ordered list

<optgroup> Defines an option group

<option> Defines an option in a drop-down list


<pre> Defines preformatted text


<s> Deprecated. Defines strikethrough text

<samp> Defines sample computer code

<select> Defines a selectable list

<small> Defines small text

<span> Defines a section in a document

<strike> Deprecated. Defines strikethrough text

<strong> Defines strong text

<style> Defines a style definition

<sub> Defines subscripted text

<sup> Defines superscripted text

<table> Defines a table

<tbody> Defines a table body

<td> Defines a table cell

<textarea> Defines a text area

<tfoot> Defines a table footer

<th> Defines a table header

<thead> Defines a table header


<tr> Defines a table row

<tt> Defines teletype text

<u> Deprecated. Defines underlined text

<ul> Defines an unordered list

<var> Defines a variable

Tags Ordered by Functionasic Tags

Tags Description

<html> Defines a html document



<body> Defines the body element





 Defines a comment

Char Format

Tags Description

<b> Defines bold text

<font> Deprecated. Defines the font face, size, and color of text

<i> Defines italic text

<em> Defines emphasized text

<big> Defines big text

<strong> Defines strong text

<small> Defines small text

<sup> Defines superscripted text

<sub> Defines subscripted text


<u> Deprecated. Defines underlined text

Output

Tags Description

<b> <pre> Defines preformatted text

<font> <code> Defines computer code text

<i> <tt> Defines teletype text

<em> <kbd> Defines keyboard text

<big> <var> Defines a variable

<strong> <dfn> Defines a definition term

<small> <samp> Defines sample computer code

Blocks

Tags Description



<blockquote> Defines an long quotation

<center> Deprecated. Defines centered text





<s> Deprecated. Defines strikethrough text

<strike> Deprecated. Defines strikethrough text

Links

Tags Description


Frames

Tags Description


<frameset> Defines a set of frames

<noframes> Defines a noframe section


Input

Tags Description

<form> Defines a form

<input> Defines an input field

<textarea> Defines a text area

<button> Defines a push button

<select> Defines a selectable list

<optgroup> Defines an option group

<option> Defines an item in a list box

<label> Defines a label for a form control

<fieldset> Defines a fieldset

Lists

Tags Description

<form> <ul> Defines an unordered list

<input> <ol> Defines an ordered list

<textarea> <li> Defines a list item

<button> <dir> Deprecated. Defines a directory list

<select> <dl> Defines a definition list

<optgroup> <dt> Defines a definition term

<option> <dd> Defines a definition description

<label> <menu> Deprecated. Defines a menu list

Images

Tags Description

<img> Defines an image

<map> Defines an image map

<area> Defines an area inside an image map

Tables

Tags Description






<thead> Defines a table header


<tfoot> Defines a table footer

Styles

Tags Description

<style> Defines a style definition

<div> Defines a section in a document

<marquee> Defines the moving text in a document

<blink> Defines the blinking text in a document

Programming

Tags Description

<script> Defines a script

<noscript> Defines a noscript section

<applet> Deprecated. Defines an applet

<object> Defines an embedded object

<param> Defines a parameter for an object

HTML Colors

These are the colors used in the Html Here colors are defined using a hexadecimal notation for the combination of Red, Green, and Blue color values

(RGB). The lowest value that can be given to one light source is 0 (hex #00). The highest value is 255 (hex #FF).

We write the Hex color using six bits, as HEX color code of black color is #000000. Hex color code is the combination of Red, Green, Blue (RGB) colors. First two zero's in the code represents the Red color, third & fourth zero's represents the Green color and fifth & sixth zero's represents the Blue color. 'F' is the maximum value of each zero. Hence if want the HEX color code of red color then just make the write the the maximum value of the zero's representing the Red color. i.e Hex color code for red color is #FF0000. Similarly you can create the HEX color code for Green & Blue also.

To use these colors in your HTML page you will have to simply select the color which you like then note down it's Hex color code or RGB color code and write this color code in your page color attribute.

This table shows the result of combining Red, Green, and Blue light sources:

Color Color HEX Color RGB

#000000 rgb(0,0,0)

#FF0000 rgb(255,0,0)

#00FF00 rgb(0,255,0)

#0000FF rgb(0,0,255)

#FFFF00 rgb(255,255,0)

#00FFFF rgb(0,255,255)

#FF00FF rgb(255,0,255)

#C0C0C0 rgb(192,192,192)

#FFFFFF rgb(255,255,255)

More Colors

This 216 cross platform web safe color palette was originally created to ensure that all computers would display all colors correctly when running a 256 color palette.

000000 000033 000066 000099 0000CC 0000FF003300 003333 003366 003399 0033CC 0033FF006600 006633 006666 006699 0066CC 0066FF009900 009933 009966 009999 0099CC 0099FF00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF330000 330033 330066 330099 3300CC 3300FF333300 333333 333366 333399 3333CC 3333FF336600 336633 336666 336699 3366CC 3366FF339900 339933 339966 339999 3399CC 3399FF33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF660000 660033 660066 660099 6600CC 6600FF663300 663333 663366 663399 6633CC 6633FF666600 666633 666666 666699 6666CC 6666FF669900 669933 669966 669999 6699CC 6699FF

66CC00 66CC33 66CC66 66CC99 66CCCC 66CCFF66FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF990000 990033 990066 990099 9900CC 9900FF993300 993333 993366 993399 9933CC 9933FF996600 996633 996666 996699 9966CC 9966FF999900 999933 999966 999999 9999CC 9999FF99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFFCC0000 CC0033 CC0066 CC0099 CC00CC CC00FFCC3300 CC3333 CC3366 CC3399 CC33CC CC33FFCC6600 CC6633 CC6666 CC6699 CC66CC CC66FFCC9900 CC9933 CC9966 CC9999 CC99CC CC99FFCCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFFCCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFFFF0000 FF0033 FF0066 FF0099 FF00CC FF00FFFF3300 FF3333 FF3366 FF3399 FF33CC FF33FFFF6600 FF6633 FF6666 FF6699 FF66CC FF66FFFF9900 FF9933 FF9966 FF9999 FF99CC FF99FFFFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFFFFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF

More Colors+

Color Name Color HEX Color

AliceBlue #F0F8FF AntiqueWhite #FAEBD7 Aqua #00FFFF Aquamarine #7FFFD4 Azure #F0FFFF Beige #F5F5DC Bisque #FFE4C4 Black #000000 BlanchedAlmond #FFEBCD Blue #0000FF BlueViolet #8A2BE2 Brown #A52A2A BurlyWood #DEB887 CadetBlue #5F9EA0 Chartreuse #7FFF00 Chocolate #D2691E Coral #FF7F50 CornflowerBlue #6495ED Cornsilk #FFF8DC Crimson #DC143C Cyan #00FFFF DarkBlue #00008B DarkCyan #008B8B DarkGoldenRod #B8860B DarkGray #A9A9A9 DarkGreen #006400 DarkKhaki #BDB76B DarkMagenta #8B008B

DarkOliveGreen #556B2F Darkorange #FF8C00 DarkOrchid #9932CC DarkRed #8B0000 DarkSalmon #E9967A DarkSeaGreen #8FBC8F DarkSlateBlue #483D8B DarkSlateGray #2F4F4F DarkTurquoise #00CED1 DarkViolet #9400D3 DeepPink #FF1493 DeepSkyBlue #00BFFF DimGray #696969 DodgerBlue #1E90FF Feldspar #D19275 FireBrick #B22222 FloralWhite #FFFAF0 ForestGreen #228B22 Fuchsia #FF00FF Gainsboro #DCDCDC GhostWhite #F8F8FF Gold #FFD700 GoldenRod #DAA520 Gray #808080 Green #008000 GreenYellow #ADFF2F HoneyDew #F0FFF0 HotPink #FF69B4 IndianRed #CD5C5C Indigo #4B0082 Ivory #FFFFF0 Khaki #F0E68C Lavender #E6E6FA LavenderBlush #FFF0F5 LawnGreen #7CFC00 LemonChiffon #FFFACD LightBlue #ADD8E6 LightCoral #F08080 LightCyan #E0FFFF LightGoldenRodYellow #FAFAD2 LightGrey #D3D3D3 LightGreen #90EE90 LightPink #FFB6C1 LightSalmon #FFA07A LightSeaGreen #20B2AA LightSkyBlue #87CEFA LightSlateBlue #8470FF LightSlateGray #778899 LightSteelBlue #B0C4DE LightYellow #FFFFE0 Lime #00FF00 LimeGreen #32CD32

Linen #FAF0E6 Magenta #FF00FF Maroon #800000 MediumAquaMarine #66CDAA MediumBlue #0000CD MediumOrchid #BA55D3 MediumPurple #9370D8 MediumSeaGreen #3CB371 MediumSlateBlue #7B68EE MediumSpringGreen #00FA9A MediumTurquoise #48D1CC MediumVioletRed #C71585 MidnightBlue #191970 MintCream #F5FFFA MistyRose #FFE4E1 Moccasin #FFE4B5 NavajoWhite #FFDEAD Navy #000080 OldLace #FDF5E6 Olive #808000 OliveDrab #6B8E23 Orange #FFA500 OrangeRed #FF4500 Orchid #DA70D6 PaleGoldenRod #EEE8AA PaleGreen #98FB98 PaleTurquoise #AFEEEE PaleVioletRed #D87093 PapayaWhip #FFEFD5 PeachPuff #FFDAB9 Peru #CD853F Pink #FFC0CB Plum #DDA0DD PowderBlue #B0E0E6 Purple #800080 Red #FF0000 RosyBrown #BC8F8F RoyalBlue #4169E1 SaddleBrown #8B4513 Salmon #FA8072 SandyBrown #F4A460 SeaGreen #2E8B57 SeaShell #FFF5EE Sienna #A0522D Silver #C0C0C0 SkyBlue #87CEEB SlateBlue #6A5ACD SlateGray #708090 Snow #FFFAFA SpringGreen #00FF7F SteelBlue #4682B4 Tan #D2B48C

Teal #008080 Thistle #D8BFD8 Tomato #FF6347 Turquoise #40E0D0 Violet #EE82EE VioletRed #D02090 Wheat #F5DEB3 White #FFFFFF WhiteSmoke #F5F5F5 Yellow #FFFF00 YellowGreen #9ACD32

Shades of Red

Red Light HEX RGB

#000000 rgb(0,0,0) #080000 rgb(8,0,0) #100000 rgb(16,0,0) #180000 rgb(24,0,0) #200000 rgb(32,0,0) #280000 rgb(40,0,0) #300000 rgb(48,0,0) #380000 rgb(56,0,0) #400000 rgb(64,0,0) #480000 rgb(72,0,0) #500000 rgb(80,0,0) #580000 rgb(88,0,0) #600000 rgb(96,0,0) #680000 rgb(104,0,0) #700000 rgb(112,0,0) #780000 rgb(120,0,0) #800000 rgb(128,0,0) #880000 rgb(136,0,0) #900000 rgb(144,0,0) #980000 rgb(152,0,0) #A00000 rgb(160,0,0) #A80000 rgb(168,0,0) #B00000 rgb(176,0,0) #B80000 rgb(184,0,0) #C00000 rgb(192,0,0) #C80000 rgb(200,0,0) #D00000 rgb(208,0,0) #D80000 rgb(216,0,0) #E00000 rgb(224,0,0) #E80000 rgb(232,0,0) #F00000 rgb(240,0,0) #F80000 rgb(248,0,0) #FF0000 rgb(255,0,0)

Shades of Gray

Gray colors are displayed using an equal amount of power to all of the light

sources.To make it easier for you to select the right gray color we have compiled a table of gray shades for you:

RGB(0,0,0) #000000 RGB(8,8,8) #080808 RGB(16,16,16) #101010 RGB(24,24,24) #181818 RGB(32,32,32) #202020 RGB(40,40,40) #282828 RGB(48,48,48) #303030 RGB(56,56,56) #383838 RGB(64,64,64) #404040 RGB(72,72,72) #484848 RGB(80,80,80) #505050 RGB(88,88,88) #585858 RGB(96,96,96) #606060 RGB(104,104,104) #686868 RGB(112,112,112) #707070 RGB(120,120,120) #787878 RGB(128,128,128) #808080 RGB(136,136,136) #888888 RGB(144,144,144) #909090 RGB(152,152,152) #989898 RGB(160,160,160) #A0A0A0 RGB(168,168,168) #A8A8A8 RGB(176,176,176) #B0B0B0 RGB(184,184,184) #B8B8B8 RGB(192,192,192) #C0C0C0 RGB(200,200,200) #C8C8C8 RGB(208,208,208) #D0D0D0 RGB(216,216,216) #D8D8D8 RGB(224,224,224) #E0E0E0 RGB(232,232,232) #E8E8E8 RGB(240,240,240) #F0F0F0 RGB(248,248,248) #F8F8F8 RGB(255,255,255) #FFFFFF

HTML Lists In HTML there are three types of list ordered, unordered and definition lists.With the name itself you might be understanding that what is list. Yes you are thinking in the right way.

It is the list of anything e.g. list of items, list of books.

Hope now you are clear about the List element of the HTML. Now the question is that, can you create the list of items in the web page? Certainly not, But do not worry with the help of this small chapter you can create any type of lists on the your web page very easily. And it will take few of your minutes to learn. So lets Begain!

Unordered Lists

An unordered list is a list of items. The list items are marked with bullets (typically small black circles), it does not have numbers in the list.An unordered list starts with the <ul> tag and end with </ul>. liust items are defined in between <ul> & </ul>. Each list item is surrounded by the <li> & </li> tag.

<ul> tag is used for unordered list. Between <ul> & </ul> you have to enter list of items.

<li> tag is used for list item. Each list item is surrounded by <li> & </li> tag.

Format:<ul> <li> item1 </li> <li> item2 </li> .......<li> itemn </li><ul>

Example Output

<ul><li>Text Book</li><li>Note Book</li><li>Pen</li><li>Pencil</li></ul>

Text Book Note Book Pen

Pencil

Just write/copy this example inside the body of the HTML file and save the file and open in the browser and see how it looks.

So now you have learned how to create the unordered list in the web page.

Ordered List

An ordered list is also a list of items. The list items are marked with numbers not with the bullets.An unordered list starts with the <ol> tag and end with </ol>. list items are defined in between <ol> & </ol>. Each list item is surrounded by the <li> & </li> tag.

<ol> tag is used for onordered list. Between <ol> & </ol> you have to enter list of items.

<li> tag is used for list item. Each list item is surrounded by <li> & </li> tag.

Format:<ol> <li> item1 </li> <li> item2 </li> .......<li> itemn </li><ol>

Example Output

<ul><li>Text Book</li><li>Note Book</li><li>Pen</li><li>Pencil</li></ul>

1. TextBook 2. NoteBook 3. Pen

4. Pencil

Just write/copy this example inside the body of the HTML file and save the file

and open in the browser and see how it looks.

So now you have learned how to create the ordered list in the web page. More over if you are looking for more options then you can have list containing Roman numbers, alphabets in the list instead of numbers (1,2,3...n). Ordered list have an attribute called type="value".

And you know how to define the attribute of any element inside it. type attribute have different values

Format:<ol type="value"> <li> item1 </li> <li> item2 </li> .......<li> itemn </li><ol>


typeAaIi1

Specifies ordered list containing capital alphabets.Specifies ordered list containing small alphabets.Specifies ordered list containing big Roman alphabets.Specifies ordered list containing Small Roman alphabets.Specifies ordered list containing numbers.

Definition List

A definition list is not a list of items. This is a list of terms and explanation of the terms. A definition list starts with the <dl> tag. Each definition-list term starts with the <dt> tag. Each definition-list definition starts with the <dd> tag.Inside a definition-list definition (the <dd> tag) you can put paragraphs, line breaks, images, links, other lists, etc.

<dl> tag is used for definition list. Between <dl> & </dl> you have to enter list of items.

<dt> tag is used for list item terms. Each list item is surrounded by <dt> & </dt> tag.

<dd> tag is used for the definition-list definition.

Format:<dl> <dt> Term1 </dt> <dd> Term definition.<dd> .......<dt> itemn </dt>....<dl>

Example Output

<dl><dt>Books</dt><dd>Books are the great friends.</dd><dt>Pen</dt><dd>Pen is the biggest power</dd></dl>

Books Books are the great friends.

Pen Pen is the biggest power

Just write/copy this example inside the body of the HTML file and save the file and open in the browser and see how it looks.So now you have learned how to create the ordered list in the web page. Now you have done a lot in the list now you saw how simple list are.

Now lets do some Practical.

Just write/copy this example on any text editor new file and save the file and

open in the browser and see how it looks.

Example:<html><head><title> Lists </title></head><body>Unordered List<ul><li>Text Book</li><li>Note Book</li></ul> Ordered List with numbers<ol><li>Text Book</li><li>Note Book</li></ol> Ordered List with Roman numbers<ol type="i"><li>Text Book</li><li>Note Book</li></ol> Ordered List with small character<ol type="a"><li>Text Book</li><li>Note Book</li></ol> Definition List<dl><dt>Books</dt><dd>Books are the great friends.</dd><dt>Pen</dt><dd>Pen is the biggest power.</dd></dl></body></html>

Page in browser will look like:

Hyperlinks and Multimedia

In this chapter we will learn about the hyperlinks and the Multimedia. First of all you must be thinking of that what is this hyperlinks and the multimedia.

Hyperlinks

So lets start with the hyper links or the just call them "links". Ok you just think for a minute that what may be the meaning of the links in your point of view. Yes again you are going in the right direction. Links means "connection between the two things" might it be any thing. Be two Persons, Roads, or two computers. And the links provide the facility or path between two things through which we can go from one to another.

In the same way the links can be provided between the two web pages, to go directly from one page to the another page. Such type of links are called as the Hyperlinks. This technique of linking one pages with other is called as the Hyperlinking.

Hyperlinking between two html pages:

We can point to any resource on the Web: an HTML page, an image, a sound file, a movie, etc.

Multimedia

In multimedia, you will learn how to provide the songs, video and picture (images) in your web page. How it will feel to you that whenever you open your web page it starts singing, playing movie, or display your family picture.

You can learn all of these things very easily. Just go on reading the Chapter and learn the Magic of the multimedia elements.

Hyper Links

So lets start with the hyper links or the just call them "links". Links means "connection between the two things" might it be any thing. Be two Persons, Roads or two computers. And the links provide the facility or path between two things through which we can go from one to another.

In the same way the links can be provided between the two web pages, to go directly from one page to the another page. Such type of links are called as the Hyperlinks. This technique of linking one pages with other is called as the Hyperlinking.

linking between two html pages linking on same page

As you see in the above diagram if the user first click on the Page1.html then user automatically jumps to the Page2.html and vice-versa. Because the links on the both pages have been provided just the user have to click on those links. We can point to any resource on the Web: an HTML page, an image, a sound file, a

movie etc.

Tags Used in the Hyperlinks

Tag Description


You see there is only one tag in the Table i.e. <a> tag, it is called as anchor tag. This tag is used to link the documents in the Html and it is quite simple.

The <a> Anchor Tag and its Attributes:

<a>Attributes Description

href specifies the address or path (of any file) to which we want to jump.

target specifies where the linked document will be opened. name specifies the name of the anchor.

Types of linking

1) Open a link in the same browser windowHTML uses the <a> (anchor) tag to create a link to another document.

An anchor can point to any resource on the Web:an HTML page, an image, a sound file, a movie, etc.

Different attributes of the <a> tag are href, name, target.so lets see some practical on <a> tag and its attributes.

If you want to open the new hyperlinked page in the same window then do not write the "target" attribute in the <a> tag.

The syntax of creating an anchor:<a href="url">Text to be displayed</a> OR <a href="url" >Text to be displayed</a>

Example:<a href="http://www.MYWEB.com"> Visit www. MYWEB.com </a><a href="c:\abc.html" > Visit abc.html </a>

Note:You can write the path in both ways in HTML<a href="c:\abc\abc.html" > Visit www. MYWEB.com </a> or<a href="c:/abc/abc.html" > Visit abc.html </a>

The <a> tag is used to create an anchor to link from, in href attribute we provide the address or path of the web page (any file) to which we want to link (jump, open) and the words between the open and close of the anchor tag will be displayed as a hyperlink text.Remember the file you want to open on an hyperlink should exist on the location you provided in the href attribute of the <a> tag.

The above Example will display the text in a browser: And now click on above text you will get linked to website of ebizel.com. And the Website of ebizel.com gets opened in the same window. In this way a hyperlinking to jump to another page is done.

2) Open a link in a new browser windowHTML uses the <a> (anchor) tag to create a link to another document. An anchor can point to any resource on the Web: an HTML page, an image, a sound file, a movie etc.Different attributes of the <a> tag are href, name, target. so lets see some practical on <a> tag and its attributes.

The syntax of creating an anchor:<a href="url"> Text to be displayed </a> OR <a href="url" target="_blank "> Text to be displayed </a>

Example:<a href="http://www. MYWEB.com"> Visit www. MYWEB.com </a><a href="c:\abc.html" target="_blank "> Visit abc.html </a>

Note:You can write the path in both ways in HTML<a href="c:\abc\abc.html" target="_blank "> Visit www. MYWEB.com </a> or<a href="c:/abc/abc.html" target="_blank "> Visit abc.html </a>

The <a> tag is used to create an anchor to link from, in href attribute we provide the address or path of the web page (any file) to which we want to link (jump, open) and the words between the open and close of the anchor tag will be displayed as a hyperlink text.Remember the file you want to open on an hyperlink should exist on the location you provided in the href attribute of the <a> tag.

The above Example will display the text in a browser:

And now click on above text you will get linked to website of ebizel.com. And the Website of ebizel.com gets opened in the new window. In this way a hyperlinking to jump to another page is done.

Target AttributeWith the target attribute, you can define where the linked document will be opened. The line below will open the document in a new browser window: <a href="http://www.ebizel.com/" target="_blank"> Visit www.ebizel.com </a>

3) Link to a location on the same page The Anchor Tag and the Name AttributeThe name attribute is used to create a named anchor. When using named anchors we can create links that can jump directly into a specific section on a page, instead of letting the user scroll around to find what he/she is looking for.

So the first write this named anchor on the section of the page to which you want to get link.

surround the text "Hyperlink" by a named tag as shown below:

Syntax of a named anchor:<a name="label">Text (to which you want to link)</a>

Example:<a name="intro"> Hyperlinks </a> for e.g. Write this line instead of the Hyperlink at the top of page In this way the the named anchor is defined on the same document in which Hyperlink section of this page is linked. The name attribute is used to create a named anchor. The name of the anchor can be any text you care to use.To link directly to the named anchor "intro" section, if from the end of the page

you want to go to the Hyperlink introduction, then include the following line at the end of page in body section.

Add a # sign and the name of the anchor to the end of a URL,

like this:<a href="#intro"> Hyperlinks Introduction (text you like) </a>

In this we use the href attribute of the <a> tag to link to named anchor "#intro" and which automatically jumps to the top of the page where it was defined.

Example:if you want to link to the tips section of basic.html page of xyz.com then the formate will be:<a href="http://www.xyz.com/basic.html#tips"> Jump to the Useful Tips Section </a>

only the thing is that the basic.html page tips section should have a named anchor as<a name="tips" > TIPS </a>

so now you have done a lot in the links now you saw how simple hyperlinks are.

so now lets do some Practical.


Example:<html><head><title>Links</title></head><body><b>Open a link in a new browser window(using href & target attribute of the tag).<br><br>click here to go<a href="http://www.ebizel.com">www.e-bizel.com.</a><br><br>click here to go<a href="hyperlinks.htm">hyperlinks.html.</a></font>

Link to a location on the same page

<br><br>go to<a href="#lesson11">Lesson11</a><br>go to <a href="#lesson10">Lesson10</a><br>go to<a href="#lesson8">Lesson8</a><br>Lesson1<br><br>Lesson 2<br><br>Lesson 3<br>

<br>Lesson 4<br><br>Lesson 5<br><br>Lesson 6<br><br>Lesson 7<br><br>

<a name="lesson8" >Lesson 8</a><br><br>Lesson 9<br><br><a name="lesson10" > Lesson 10</a><br><br><a name="lesson11" >Lesson 11</a><br></b></body></html>

Your above web page in the web browser looks like:

How to Hyperlink an Image

To hyperlink an image first we have to insert the image on the web page. So question is how to insert the image on the web page. In html the image can be inserted using the <img> tag. <img> tag has the attributes like width, height and src, which specifies the height and width of the image that is to displayed on the web page and scr has the value of the path where the image is stored. <img> tag does not have the end tag. so now use the <img> tag.

<img> tag

Format:<img src="path" width="number" height="number">

Example:<img src="img\logo_in.gif" width="200" height="200">

The example inserts the image "logo_in.gif" with the height of 200 pixel and width of 200 pixel. By using this tag you can insert the image in your html file, now if you want to create this image the hyperlink then follow the steps:

How to make the image as Hyperlink

Format:<a href="path_of_file" ><img src="path" width="number" height="number"></a>

Example:<a href="list_tags.htm"><img src="img\logo_in.gif" width="200" height="200"></a>To make an image as hyperlink just enter the <img> tag between the <a> anchor tag. And it will get Hyperlinked.

so now lets do some practical.


Example:<html><head><title>Links</title></head><body><b> Here the image is hyperliked.</b><a href="list_tags.htm"><img src="img/logo_in.gif" width="200" height="100"></a></body></html>


So now you have seen how the Images are inserted in the HTML pages and how these inserted images are made as hyperlinks to any other HTML page.

Multimedia

Working with Images

In this section you will learn about "how the images can be used in HTML".

· how you can create a page with image as background.· how you can make a picture as a hyperlink to another file (any type of file).

lets start with the first

How to Hyperlink an Image

To hyperlink an image first we have to insert the image on the web page. So question is how to insert the image on the web page. In html the image can be inserted using the <img> tag. <img> tag has the attributes like width, height and src, which specifies the height and width of the image that is to displayed on the web page and scr has the value of the path where the image is stored.<img> tag does not have the end tag.

so now use the <img> tag.

Format of <img> tag :<img src="path" width="number" height="number">

Example:<img src="img\logo_in.gif" width="200" height="200"> Remember the file & path of the file you provided in the src attribute of the any tag should be correct and must exist.

The example inserts the image "logo_in.gif" with the height of 200 pixel and width of 200 pixel. By using this tag you can insert the image in your html file, now if you want to create this image the hyperlink then follow the steps.

How to make the image as Hyperlink

Format:<a href="path_of_file" > <img src="path" width="number" height="number"></a>

Example:<a href="list.html"><img src="img\logo_in.gif" width="200" height="200"></a>To make an image as hyperlink just enter the <img> tag between the <a> anchor tag.And it will get Hyperlinked. so now lets do some practical.



Format with Example Page in browser will look like

<html><body><img border="0"src="img/LOGO_IN.GIF" width="109"height="68"><br><a href="http://www.fultoo.com"><img src="img\logo_in.gif" width="109" height="68"></a></body></html>

In this example the first image is not the hyperlink. But the second image is the hyperlink to the "www.fultoo.com" and this hyperlinking is done by using <a> anchor tag. This you will study in the hyperlinks chapter.

How to create the page with image as back ground

This you can learn in the first chapter also. Use the background="path_of_image_file" of the <body> tag and see what happens.



Format with Example:<html><head><title> multi </title></head><body background="img/LOGO_IN.GIF" width="109" height="68"></body></html>


http://www.ebizel.com/

Working with the Video and Audio file Files

Now you can make the web page containing the video file or whenever you open your page a movie starts playing in it. All this can be done using the <bgsound>, <img> & <embed> tags. Only there are some extra attributes added for the playing the video files (movie).

These attributes are:

<bgsound> TagThis tag is used to insert only audio files on the page. This tag does not provides the control on the audio file.

Format:<bgsound src="path of audio file" loop="positive integer">

Attributes


src path of audio file Defines the path of the audio file.

loop positive integer Defines the no. of times the file must be played.



Example:

<html><body><p><b>starts on file open</b><br><bgsound src="music/border.wav" loop="5"><br></body></html>

<img> Tag<img> tag is used to insert the audio & Video files.

Format:<img border="0" dynsrc="img\dog.mpg" start="fileopen" loop="0" width="134" height="138">

This will add the video file to your page.

How to add the audio files to your page

If you want to add the audio file then just replace the name of the video file with the other audio file name.

Example:<img border="0" dynsrc="img\border.wav" start="fileopen" loop="0" width="134" height="138">


dynsrc path_of_movie_file Defines the path of movie file.

start fileopen, mouseover

Defines the instances on which movie starts playing.

loop 0 to n , infinite Defines the no. of times movie should repeat.

width, height

pixels Defines the height & width of movie window.

border 0 to n Defines the width of border of movie window.

startif you want that movie starts playing when page gets opened then use start="fileopen", if you want that it should open when mouse pointer moves over it then use start="mouseover".

Loopif want to play the movie in repeating manner then use loop="infinite" or you can provide the value 0 to n.if loop="0" then movie will play only one time.

So lets see an example so will get more clear


Example:<html><body><p><b>starts on file open</b><br>

<img border="0" dynsrc="img\dog.mpg" start="fileopen" loop="0" width="134" height="138"><br><b>starts on mouse over</b><br><img border="0" dynsrc="img\dog.mpg" start="mouseover" loop="infinite" width="140" height="142"></p></body></html>


starts on file open

starts on mouse over

<embed> tagThis tag is also used to insert the Audio & Video file on the web pages.

Format:<embed src="path of sound file" align="top" autostart="true" controls="consol" height="10" width="10" Hidden="true" loop="true">

Attributes


dynsrc path_of_movie_file Defines the path of movie file.

autostart true, false Defines the instances on which movie starts playing.true- the file starts playing automatically on page openfalse- the do not starts playing on page open.

loop truefalsepositive integer

Defines the no. of times movie should repeat.true- file will play for infinite loop.false-file will play only once0 to n positive integer will play file for value of n times.

width, height

pixels Defines the height & width of movie window.

hidden true false Defines the controls to be hidden or not.true-- control gets hidden.

controls consol, smallconsol, playbutton,pausebutton,stopbutton, volumelever

Defines the types of controls the user wants on the page to control the file.



Example:<html><body><p><b>starts on file open</b><br><embed src="path of sound file" align="top" autostart="true" controls="consol"height="10" width="10" Hidden="true" loop="true"><br></body></html>

By using the <embed> tag use can play both type of files (audio & video), just you have to provide the path of the file in the src attribute.

Frames

Will not it be better, if you are able to display the more then one HTML document in the same browser. Yes of course it will be better. So get ready to learn this fascinating idea. It can be done very easily using "Frames" in the HTML.

With frames, you 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.With the frames you will be able to create the pages like this:

In this way the browser can be divided into the Horizontal & Vertical Frames and each frame contains a page in it. Hence by using frames you can display more then one page in one Browser.

Horizontal Frame

The horizontal frames are created in the horizontal pattern on the browser. Horizontal frames divides the browser in the horizontal parts as you see in the figures. And all the frames displaying a different html files in them.

Vertical Frame

The vertical frames are created in the vertical pattern on the browser. Vertical frames divides the browser in the vertical parts as you see in the figures. And all the frames displaying a different html files in them.

Mixed Frame

The mixed frames are created using both vertical frames and horizontal frames. Mixed frames divides the browser in the vertical parts as well as in the horizontal parts as you see in the figure of Mixed frames. And all the frames displaying a different html files in them. Before starting the creation of the frames you will need to read some Simple Tags about frames.

Frame Tags

tags Description

<frameset> Defines a set of frames



Tags and its Attributes:

tags Attribute Value Description

<frameset>

rows pixels, % part of page

Defines the proportion of division of page in horizontal frame.

cols pixels, % part of page

Defines the proportion of division of page in vertical frames.

<frame> src path of the file path of the file which in to displayed in frame.

noresize noresize Defines weather the frames resizable or not.

name name of frame Provides the name of frame.

Its Attributes:src: defines the path of file which is to be displayed in the frame.noresize: defines the resize property of the frame, if we defines the its value as "noresize" then the you can not change the size of frames. The frames are not resizable. Move the mouse over the borders between the frames and notice that you can not move the borders.And if you need resizable frames then do not use "noresize" attribute in <frame> tag.name: defines the name of the frame. You can provide the name of your choice.

<iframe> TagIt is the tag for the inline frames. The inline frame is the small frame which can be inserted on any web page. It is defined inside the body of the html file. It is not resizable.

Format:<iframe src="path of file" name="name_of_this_frame">

Example:<iframe src="c:\html\lists.html" name="iframe">

Its Attributes:src: defines the path of file which is to be displayed in the frame.name: defines the name of the frame. You can provide the name of your choice.

How To create Horizontal Frames

Example:if you want to create three horizontal frames of area 20%, 50%, 30% then first use the <frameset> Tag.



Example:This example will display empty frames.<html><frameset rows="20%,50%,30%"><frame><frame><frame></frameset><head><title> Frames</title></head></html>



Example:This example will display three frames with different pages.<html><frameset rows="20%,50%,30%"><frame src="c:\html\list_tags.htm" name="frame1" noresize="noresize"><frame src="c:\html\basic.htm" name="frame2" ><frame src="c:\html\link_media.htm" name="frame3" ></frameset><head><title> Frames</title></head></html>


Note:You do not have to worry if the second example does not display the any page in the frames. It is because path of file defined in the src attributes of the <frame> tag does not exist or files in the directory c:\html does not exists.

How To Create Vertical FramesTo create such type of vertical frames you do not have to do much more just write "cols" in place of "rows" in the <frameset> tag.

Example:<frameset cols="20%,50%,30%">also test them in the browser.

Example:This example will display three frames with different pages. <frameset cols="20%,50%,30%"><frame src="c:\html\list_tags.htm" name="frame1" noresize="noresize"><frame src="c:\html\basic.htm" name="frame2" ><frame src="c:\html\link_media.htm" name="frame3"></frameset><head><title> Frames</title></head></html>


How To Create Mixed FramesTo create the mixed frames, concept of nesting is used, in mixed frames we use the nesting of <frameset>. See how nesting of <frameset> is done

Example:<html><frameset cols="20%,80%"><frame src="c:\html\list_tags.htm" name="frame1"><frameset rows="20%,80%"><frame src="c:\html\link_media.htm" name="frame2"><frame src="c:\html\basic.htm" name="frame3"></frameset></frameset></html>


In this example you see how first <frameset> tag divides the browser into two frames i.e. of 20% and 80%. then first frame1 is defined but the second frame is again divided into the two new horizontal frames using the second <frameset> tag of inside the first <frameset> tag. so now lets do some Practical.


note:You do not have to worry if the second example does not display the any page in the frames. It is because path of file defined in the src attributes of the <frame> tag does not exist or files in the directory c:\html does not exists.

How to Create Inline FrameInline frames are created using the <iframe> tag. This tag is used inside the body of the HTML file.

So lets have an example:Just write/copy this example on any text editor new file and save the file and open in the browser and see how it looks Example

Example:<html><body><iframe src="c:\html\list_tags.htm"></iframe><p>Some older browsers don't support iframes.</p><p>If they don't, the iframe will not be visible.</p></body></html>



Tables

If you want to display information of some type, like displaying your time table of class, Report Card or want to display information in the form of the tables. Then the Table elements of the HTML is used to display the information in the table form. Now you can do this easily or how easily you can display your information using tables. Information in the table can be displayed in the form of like.

S.No. Name Class Age Address

1 Arun Kumar 12th 20 xyz

2 Neeraj Kumar 10th 18 abc

Tables are the simplest form of displaying the data/ information. Using tables we can display the information very easily to the user. Due to its Simplicity in almost all the projects data is displayed using the tables. Project may be made using any application. But most of them uses only tables to display the information.

In all most all of the database driven websites we uses the tables to display the information. So tables are very important part of the HTML. And you must learn them nicely.

Table Tags

Tag Description






<thead> Defines a table head



The <table> tagsThe <table> tag defines a table. Inside a <table> tag you can put table headers, table rows, table cells and other tables

Format:<table> <tr><td>..............</td></tr>.</table>

Attributes

tags Attribute Value Description

<table>

align left,center,right Aligns the table. Deprecated. Use styles instead.

bgcolor rgb(x,x,x),#xxxxxx,colorname

Specifies the background color of the table. Deprecated. Use styles instead.

border pixels (0-n) Specifies the border width. Tip: Set border="0" to display tables with no borders!

cellpadding pixels, % Specifies the space between the cell walls and contents

cellspacing pixels, % Specifies the space between cells

width pixels, % Specifies the width of the table

AlignThis attribute can have the value center, left, right. By using this table can be aligned on the page.

bgcolorbgcolor is used to give the background color to the table. It can have the values in the three type, rgb (x,x,x) combination, #xxxxxx (color code), or color name.

borderborder attribute of the table is used to provide the border style to the table. Its value is given in pixels (0-n). Above table has border="5".if you want your table should not have border then define border="0".

widthIt specifies the width of the table. Its value is also given in pixels (0-n) or %.

cellpaddingIt specifies the space between the cell walls and contents. Its value is also given in pixels (0-n) or %.

cellspacingIt specifies the space between the cells. Its value is also given in pixels (0-n) or %.

<th> <tr> and <td>Tag

<th> tagDefines a table header cell in a table. The text within the th element usually renders in bold.

Format:<th> this is the header </th>

<tr> tag<tr> tag defines a row in a table.

Format:<tr> <td>table data </td> </tr>

<td> tag<td> tag defines the table data. This tag is used inside the <tr> tag.

Format:<td> table data </td>

The next table defines the different attributes that can be used by <th>,<tr> and <td> tags.

tags Attribute

Value Description

<th>,<td>,<tr>

align left,center,right Specifies the horizontal alignment.

<th>,<td>,<tr>

bgcolor rgb(x,x,x),#xxxxxx,colorname

Specifies the background color of the table. Deprecated. Use styles instead.

<th>,<td> colspan number Indicates the number of columns this cell should span

<th>,<td> rowspan number Indicates the number of rows this cell should span

<th>,<td>,<tr>

height pixels Specifies the height of the table cell. Deprecated. Use styles instead.

<th>,<td>,<tr>

Valign top,middle,bottom,baseline

Specifies the vertical alignment of cell content

<th>,<td> width pixels % Specifies the width of the table cell. Deprecated. Use styles instead.

<caption> Tag<caption> tag defines a table caption.

Format:<caption>This is a caption</caption>

<thead>,<tbody> and <tfoot> tag

The thead, tfoot and tbody elements enables you to group rows in a table. When you create a table, you might want to have a header row, some rows with data, and a row with totals at bottom. This division enables browsers to support scrolling of table bodies independently of the table header and footer. When

long tables are printed, the table header and footer information may be repeated on each page that contains table data.

Example for <thead>,<tbody>and <tfoot>

Example Output

<table border = "1"><thead><tr><td>This text is in the THEAD</td></tr></thead><tfoot><tr><td>This text is in the TFOOT</td></tr></tfoot><tbody><tr><td> This text is in the TBODY</td></tr></tbody></table>

This text is in the THEAD

This text is in the TFOOT

This text is in the TBODY

Attributes of <thead>,<tbody> and <tfoot>


align right,left,center,justifychar

Defines the text alignment in cells.

Valign top,middle,bottom,baseline Specifies the vertical text alignment in cells.



How To Create Table

Example:<html><head><title>tables</title></head><body><b>Table with border=1 cellspacing=1 cellpading=1 with one empty cell.</b><table border="1" cellspacing="1"><tr><th>Heading</th><th>Another Heading</th></tr><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr><tr><td>row 2, cell 1</td>

<td> </td></tr></table><br><b>Table with border=1 cellspacing=1 cellpading=10 bgcolor=lightyellow</b><table border="1" cellspacing="1" cellpadding="10" bgcolor="lightyellow"><tr><th>Heading</th><th>Another Heading</th></tr><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr><tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr></table><br><b>Table with border=8 cellspacing=8 cellpading=1 bgcolor=lightbluebgcolor=lightgreen</b><table border="8" cellspacing="8"><tr><th bgcolor="lightblue">Heading</th><th bgcolor="lightgreen">Another Heading</th></tr><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr><tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr></table><p> </p></body><html>


Example on the colspan and rowspan

Here you can see what the colspan and rowspan do.


Example:<html><body>This table has a caption,and a thick border,<h4>Cell that spans two columns:</h4><table border="6"><caption>My Caption</caption><tr><th>Name</th><th colspan="2">Telephone</th></tr><tr><td>XYZ</td><td>011 273 994</td><td>011 274 465</td></tr></table> <h4>Cell that spans two rows:</h4><table border="1"><tr><th>First Name:</th><td>XYZ</td></tr><tr>

<th rowspan="2">Telephone:</th><td>011 273 994</td></tr><tr><td>011 274 465</td></tr></table></body></html>


Forms and Input Element HTML Forms are used to select different kinds of user input.

Forms

A form is an area that can contain form elements So simply you will have to irst understand "What is Form". You must have seen the forms on the internet. Now days there is too much craze of the forms on the internet. At least if you have an e-mail ID then Sure you have filled the Form of e-mail registration during the creation of your e-mail account. You fills all the information in the form, like your Name, Registration ID, password, address, Qualification and many more clickable buttons.

So once again take a look on the form:

Now you saw the sample of Yahoo ID Registration form containing some of elements of the form.

Form elements are elements that allow the user to enter information like:

· text fields· textarea fields· drop-down menus· radio buttons· checkboxes, etc. in a form.

Form Tags

Data Type Description

<Form> Defines a form for user input.

<input> Defines an input field.

<textarea> Defines a text-area (a multi-line text input control).

<label> Defines a label to a control.

<fieldset> Defines a field set.

<select> Defines a selectable list (a drop-down box).

<optgroup> Defines an option group.

<option> Defines an option in the drop-down box.

<button> Defines a push button.

<form> Tag

A form is defined with the <form> tag. Form is the rectangular area in which all the input elements are defined. Its is used inside the body section of HTML file. And it is all done by using the <input> tag. <input> tag is an open tag hence do not need the </input> tag.Now see how body tag is defined below the body tag.

Format:<body><form><input><input></form></body>

The Form's Action Attribute and the Submit Button

name name attribute defines the name of the form. Because a page can have more than one form.

action action defines the action of form. (to which this form have to send its values).

method method defines the type of method used to send the values of the form.method have two types of values. i.e. method="post", method="get".

When the user clicks on the "Submit" button, the content of the form is sent to another file. The form's action attribute defines the name of the file to send the content to. The file defined in the action attribute usually does something with the

received input.

example page in browser will look like

<form name="input" action="forms_regisration.asp"method="post">Username:<input type="text" name="user" size="20"><br>Password :<input type="password" name="pass" size="20"><br><input type="submit" value="Submit"></form>

Username :

Password :

If you type some characters in the text field above, and click the "Submit" button, you will send your input to a page called "forms_regisration.asp". That page will show you the received input.

<Input> Tag

The most used form tag is the <input> tag. The type of input is specified with the type attribute. There are the various input elements. To use these input elements in form you will have to define the Input element in the "type" attribute in the <input> tag.

Attributes of the <input> tag

type type attribute defines the type of input element.e.g. <input type="text" or password or checkbox or radio button or Drop-down menu>

name name defines the name of the input element. To access the value of input elements better he provide names to the elementse.g <input type="checkbox" name="firstname">

value value attribute defines the default value of input element.

The most commonly used input types are explained below:

Text Fields

Text fields are used when you want the user to type letters, numbers etc. in a form.

Format:<form> First name: <input type="text" name="firstname"></form>


<form>First name: <input type="text" name="firstname"><br>Last name: <input type="text" name="lastname"></form>

First name :

Last name :

Note that the form itself is not visible. Also note that in most browsers, the width

of the text field is 20 characters by default. You can check them by typing in Text fields.

Password Fields

Text fields are used when you want the user to enter the password in the form of letters, numbers etc. in a form, but you do not want to display the text. Then you should use this field.

Whenever user types in the field the star or dot character appears in the text box.

Format:<form>Password1: <input type="password" name="Password1"></form>


<form> Password1 : <input type="password" name="Password1"><br>Password2: <input type="Password" name="Password2" value="abc123"></form>

Password1 :

Password2 :

In the example the password2 field has the default value "abc123". You can check them by typing in password fields.

Radio Buttons

Radio Buttons are used when you want the user to select one of a limited number of choices.

Format:<form><input type="radio" name="sex" value="male"> Male<br></form>


<form><input type="radio" name="sex" value="male"> Male<br><input type="radio" name="sex" value="female"> Female</form>

Male

Female

Note that only one option can be chosen. you can check them by clicking on radio buttons.

Checkboxes

Checkboxes are used when you want the user to select one or more options of a limited number of choices.

Format:<form><input type="checkbox" name="bike">I have a bike<br></form>


<form><input type="checkbox" name="bike">I have a bike

I have a bike

<br><input type="checkbox" name="car">I have a car</form>

I have a car

You can check them by clicking on checkboxes.

<textarea> Tag

Textarea tag is used when the user want to give big information in the form like message. <textarea> is the only element used to send large message to other location. It can contain number of lines and columns.

Format:<textarea rows="6" name="S1" cols="27"></textarea>


<form>write your message here<br><textarea rows="4" name="S1" cols="22"></textarea></form>

write your message here

Name can given of yours choice. You can check the textarea field by writing in it.

The <label> tag

Defines a label to a control. If you click the text within the label element, it is supposed to toggle the control.

The "for" attribute binds a label to another element. Set the value of the "for" attribute equal to the value of the "id" attribute of the related element.

Format:<label for="element_name">Last Name:</label>

Example:<label for="name">Last Name:</label>

Attributes:for defines the name of the element for which this label is made.


<label for="name"> Name:</label><input type="text" name="name" id="name" />

Name :

The <fieldset> tag

The fieldset element draws a box around its containing elements.


<fieldset>first name <input type="text" size="3"></input>last name <input type="text" size="3">

first name

last name

</input></fieldset>

The <select> tag

The select element creates a drop-down list. Use this tag in the form element to accept user input.


<select><option SELECTED VALUE="delhi">delhi</option><option VALUE="calcutta">calcutta</option><option VALUE="mumbai">mumbai</option><option VALUE="chennai">chennai</option></select>


disabled disabled When set, it disables the drop-down list

multiple multiple When set, it specifies that multiple items can be selected at a time

name unique_name

Defines a unique name for the drop-down list

size number Defines the number of visible items in the drop-down list

The <optgroup> tag

Defines an option group. This element allows you to group choices. When you have a long list of options, groups of related choices are easier to handle.


<select><optgroup label="Computers"><option value ="BE(CS)">BE(CS)</option><option value ="MCA">MCA</option></optgroup><optgroup label="Electronics"><option value ="BE(ECE)">BE(ECE)</option><option value ="MSc(ECE)">MSc(ECE)</option></optgroup></select>

The <option> tag

The option element defines an option in the drop-down list. The <option> tag can be used without any attributes, but you usually need the value attribute, which indicates what is sent to the server. Use this tag in conjunction with the select element, elsewhere it is meaningless.


<select><option value ="BE(CS)">BE(CS)</option><option value ="MCA">MCA</option><option value ="BE(ECE)">BE(ECE)</option><option value

="MSc(ECE)">MSc(ECE)</option></select>

Optional Attributes

disabled Specifies that the option should be disabled when it first loadsvalue="disabled"

label Defines a label to use when using <optgroup>value="text"

selected Specifies that the option should appear selected (will be displayed first in list) value="selected"

value Defines the the value of the option to be sent to the server.value="text"

Buttons

Buttons are used in the forms. these are the clickable elements.

Format:<input type="button_type"" value="value_of_button" name="button_name">

buttons are of three types:

Reset buttonwhen you click on the reset button the value of all the elements gets clear or you may say elements gets initialized to their default value.

format:<input type="Reset" value="Reset" name="B1">

Submit buttonwhen you click on the submit button the value of all the elements gets submitted to the address mentioned in the <form> tag's "action" attribute.

format:<input type="submit" value="Submit" name="B1"

Normal buttonIt is also called as push button. when when you click on the push button, it makes a function call to the function defined in the "onclick" attribute.

format:<input type="button" value="Button" name="B3" onclick="abc()"

Example:<html><head><title>New Page 1</title></head><body><form method="POST" action="abc.asp"><b><font color="#FF0000">REGISTRATION FORM</font></b><br><br>First Name<input type="text" name="firstname" size="15"><br>Last Name

<input type="text" name="T2" size="15"><br>E-mail ID<input type="text" name="T3" size="15"><br>Password<input type="password" name="T4" size="15"></p><fieldset> Birthday:<select name=".bmon"><option value selected>[Select One]</option><option value="0">January</option><option value="1">February</option><option value="2">March</option><option value="3">April</option><option value="4">May</option><option value="5">June</option><option value="6">July</option><option value="7">August</option><option value="8">September</option><option value="9">October</option><option value="10">November</option><option value="11">December</option></select><input maxLength="2" size="2" name=".bday"><input maxLength="4" size="4" name=".byear">,<font class="content_help"> (Month DD , YYYY)</font></fieldset> <br>Address<br><textarea rows="5" name="S1" cols="22"></textarea> <br><br>Qualification:<select><optgroup label="Computers"><option value ="BE(CS)">BE(CS)</option><option value ="MCA">MCA</option></optgroup><optgroup label="Electronics"><option value ="BE(ECE)">BE(ECE)</option><option value ="MSc(ECE)">MSc(ECE)</option></optgroup></select><br>Hobbies: <input type="checkbox" name="C1" value="ON"> Reading<input type="checkbox" name="C2" value="ON"> Painting<input type="checkbox" name="C3" value="ON">Singing<input type="checkbox" name="C4" value="ON"> fighting<br>Sex<input type="radio" value="v3" name="R1" checked>Male<input type="radio" name="R1" value="V4">Female<br><br><input type="submit" value="Submit" name="B1"><input type="reset" value="Reset" name="B2"></form></body></html>


so now you saw how simple it is to create the form in HTML.

Sagar HTML Notes

Documents

Transcript of Sagar HTML Notes