G-TEC COMPUTER EDUCATION
(A Division of Glosoft Technologies [Link].)
ISO 9001 : 2008 CRETIFIED
HTML NOTE
Network
Two or more computer connected together.
Internet
Internet is an inter-connection between several computers of different types belonging to various
networks all over the globe. It is a network of networks.
World Wide Web
Information stored in millions of computers in the internet.
Web Pages
Document written in html.
Web Site
A website is a set of related web pages containing content such as text, images, video, audio, etc.
Browser
Software used to see webpage’s.
Eg: Internet Explorer, Netscape, Navigator, Mozilla. These pages can include text images audio and
video.
URL
A browser in your computer is to view documents on the web. Every documents one the web
has an address. Which is call the URL (Uniform Resource Locator).
HTML INTRODUCTION
HTML stands for Hyper Text Markup Language, a much bigger document processing system.
HTML is a language for describing web pages.
Tim Berners-Lee, the father of World Wide Web is considered as the father of HTML too.
HTML 1.0 was the first release of HTML to the world the language was limiting and was able to show
only text in web browser.
HTML working group led by Dave Ragget introduced a new HTML draft, HTML 3.0.
HTML for the last inter nation of classic HTML, recommended by the w3c in December 1997
and become the official standere3d in April 1998.
Most of the tags and attributes that have been introduced by Microsoft
XHTML (Extensible Hyper Text Markup Language)
Extensible Hyper Text Markup Language is hybrid between HTML and xml that is more
universally acceptable in web pages and search engines than xml.
XML ( Extensible Markup Language)
Extensible Markup Language ,a dilution for web page use of SGML (Standard General Markup
Language) which is not readily viewable in ordinary browser and difficult to apply to web pages
All HTML tags are surrounded by angled brackets’< >”. These tags tell the browser how to
display the text or graphics in the document.
Container Tags
The container tags always wraps around text or graphics and comes in a set with an opening
and closing tags
Eg: <b> My School </b>
Stand alone Tags (Empty tags)
They do not have to be wrapped around the text and do not require a closing tag.
Eg: <br>
Elements
The words or letters between these two angle brackets are called elements.
Eg: <center> my school </center>
Attributes
A quantity that defines a special property of an HTML elements. Attributes are specified
within elements. Attributes are specified within an element start tag.
Eg:<img src=”pic [Link]”>
HTML Elements.
<P> - Used for inserting a paragraph break.
<br> - Used for inserting a line break.
<hr> - Used for inserting horizontal ruler break
<b> - Used for inserting formatting a text as bold.
<i> - used for formatting a text as italic.
<u> - used for formatting a text as underline.
<strong> - used for bold characters.
<sup> - for inserting superscript characters.
<sub> - for inserting subscript characters.
<big> - for printing large size of text when compared to the surrounding text.
<small> - for printing large size of text when compared to the surrounding text.
<center> - for centralizing a given text.
<font> - Determining the color, font, size at the text .
<marquee> - for inserting text or image as moving.
<ol> - for creating an ordered list of item.
<ul> - for creating an unordered list of item.
Syntax
<html>
<head>
<title>
…………………..
</title>
</head>
<body>
…………………………….
</body>
</html>
Headings in html
Example:
<html>
<head>
<title>
Heading tags.
</title>
</head>
<body>
<h1>
This is the first heading level.
</h1>
<h2>
This is the second heading level.
</h2>
<h3>
This is the third heading level.
</h3>
<h4>
This is the fourth heading level.
</h4>
<h5>
This is the fifth heading level.
</h5>
<h6>
This is the sixth heading level.
</h6>
</body>
</html>
Character Physical Styles
Example:
<html>
<head>
<title>
Character physical style of text formatting.
</title>
</head>
<body>
<h2>
These are the various character physical styles in html
</h2>
<p>
<b> Demonstrating b tag. </b>
<p>
<i> Demonstrating i tag. </i>
<p>
<u> Demonstrating u tag. </u>
<p>
<s> Demonstrating s tag. </s>
<p>
<big> Demonstrating big tag. </big>
<p>
<small> Demonstrating small tag. </small>
<p>
<sub> Demonstrating sub tag. </sub>
<p>
<sup> Demonstrating sup tag. </sup>
</p>
</body>
</html>
Set a Background color in body.
Example:
<html>
<head>
<title>
G-tec
</title>
</head>
<body bgcolor=” #2d8fc8”>
<center>
<font color=”red” face=” Tekton Pro Ext” >
IT MAGIC
</font>
</center>
</body>
</html>
Set a Background picture in body.
Example:
<html>
<head>
<title>
G-tec
</title>
</head>
<body background=”C:\Documents and Settings\All Users\Documents\My Pictures\Sample
Pictures\Water [Link]”>
<center>
<font color=”red” face=”Arial ” >
IT MAGIC
</font>
</center>
</body>
</html>
ATTRIBUTERS
<HR> ELEMENT
size-determines the width of line.
width- determines the length of line.
Color- determines the Color of line.
Eg: <br size=”3” width=”150” color=”blue”>
<FONT> ELEMENTS
Size- determines the size at font.
color- determines the color at font.
Face- determines the type as “Time New Roman”, “Areal Black”, etc
Eg: <font face = ”Time New Roman” Size=”15” Color=”Red”>
<MARQUEE> ELEMENT
Behavior – Determines the style at movement as “alternate” ”slide” or scroll.
Width- Determines the width at space in which the marquee will be effected.
scroll amount- The speed at which marquee is affected.
scroll delay- The delay in displaying and re-appearing of marquee.
height-Determining the height of marquee.
Eg: <marquee behavior=”alternate” width=”500” >
Example:
<html>
<head>
<title>
G-tec
</title>
</head>
<body>
<marquee behavior="scroll" direction ="left"> Computer Hope </marquee>
< marquee behavior ="scroll" direction ="right"> Computer Hope </ marquee >
< marquee behavior ="slide" direction ="left">Computer Hope</ marquee >
< marquee behavior ="alternate" >Computer Hope</ marquee >
< marquee behavior ="scroll" direction ="left" bgcolor="blue">Computer Hope</ marquee>
<font color ="green">
< marquee behavior ="scroll" DIRECTION ="right">Computer Hope</ marquee ></font>
<font color ="white">
< marquee behavior ="scroll" direction ="right" bgcolor="red">Computer Hope</ marquee >
</font>
</body>
ORDERED LISTS (<OL>)
a) Type
b) Start
The “type” attribute has following value.
a) I b) i c) 1 d) A e) a
The start attribute determines the number of which the list will be produced
Example:1
<ol>
<li> Word 2007 </li>
<li> Excel 2007 </li>
<li> Acces 2007 </li>
</ol>
Example:2
<ol type=”a” start=”3”>
<li> Word 2007 </li>
<li> Excel 2007 </li>
<li> Acces 2007 </li>
</ol>
UNORDERED LISTS (<UL>)
This element has only one attribute “type”. The accepted values at this attributes are.
a) Square b) circle c) disc
“disc” is the default value
Example:
<ul>
<li> Word 2007 </li>
<li> Excel 2007 </li>
<li> Acces 2007 </li>
</ul>
GLOSSARY LISTS
Example:
<html>
<head>
<title>
Glossary Lists
</title>
</head>
<body>
<dl>
<dt>
HTML
<dd> Stands for Hyper Text Markup Language.
<dt>
DHTML
<dd> Stands for dynamic Hyper Text Markup Language.
<dt>
XML
<dd> Stands for Extensible Markup Language.
</dl>
</body>
</html>
HYPERLINKS
Text or an image in a HTML 4 document body can become a hyperlink “anchor” When
contained in<a> </a> tags that specify a destination for that link.
Example 1:
<html>
<head>
<title> Page 1 </title>
</head>
<body>
<p> click <a href=[Link] here</a> to open page 2
</p>
</body>
</html>
Example 2:
<html>
<body>
<p>Add more excitement to your pages -<br>
Learn client-side scripting width<br>
<a href=”[Link]”
Title=”click here to view the book cover”>
Java script in easy steps </a> </p>
</body>
</html>
Example 3:
<html>
<head>
<title>
G-tec
</title>
</head>
<body>
<h1>
<center>
<marquee>
IT Magic
</marquee>
</center>
</h1>
<a href=”C:\Documents and Settings\User6\My Documents\My Pictures\ Water [Link]”>
<img src=”C:\Documents and Settings\User6\My Documents\My Pictures\ Water [Link]
width=”200”>
</a>
<br>
<a href=”C:\Documents and Settings\All Users\Documents\My Pictures\ [Link]”>
<img src=”C:\Documents and Settings\All Users\Documents\My Pictures\
[Link]”width=”100”>
</a>
</body>
</html>
ACCESS KEY HYPERLINK
Use a designated character key to load the new document. The Key is specified with the “access key”
Attribute of the <a> element and pressing the key gives focus to the link.
Example:
<html>
<head>
<title> page 1 </title>
</head>
<body> <p>
<a href="[Link] [Link]" accesskey="A">
Hit access key a</a> to open page 2.
</p>
</body>
</html>
FRAGMENT ANCHORS HYPERLINK
A hyper link destination can be specified as another point in the current document
Using fragment anchors.
Example:
<html>
<body>
<p> <a name=”top_of_page”>Welcome</a> </p>
<! - - [ long document content ] - ->
<p> <a href=”#top_of_page”>Top of page</a> </p>
</body>
</html>
LINK TO ELEMENT
In linl to element a hyperlink in one document opens a second document at the location of a fragment
identifier.
Example:
Page 1
<html>
<head>
<title> Link to element Page 1 </title>
</head>
<body>
<p> <a href=”[Link]#line2”> Page 2 – Line 2 </a> </p>
</body>
</html>
Page 2
<html>
<head>
<title> Link to element Page 2 </title>
</head>
<body>
<p id=”line1”> This is line 1 </p>
<p id=”line2”> This is line 2 </p>
<p id=”line3”> This is line 3 </p>
</body>
</html>
IMAGE MAP HYPERLINK
A single image can have multiple hyperlink destinations if an image map is added to distinct areas for
each link.
Example:
<html>
<head>
<title> Image Map Hyperlink </title>
</head>
<body>
<img src=”[Link]” usemap=”#trio” alt=”Trio Image”>
<map name=”trio”>
<area shape=”circle” coords=”62,21,18” href=”[Link]” alt=”Link to page 1”>
<area shape=”rect” coords=”0,0,82,126” href=”[Link]” alt=”Link to page 2”>
<area shape=”circle” coords=”97,79,18” href=”[Link]” alt=”Link to page 3”>
</body>
</html>
TABLE
In html program a table is one of the most important feature, used to create a web sites.
Application in html the <table> is used to opening the table and </table> is used to close.
The table in a table can include so many rows and columns. In html <tr> is used to create
a table row and <td> is used to include a table data.
Table tags
<table>
<tr>
<td>………….</td>
</tr>
</table>
<TABLE> element has the following attributes
Border - Thickness of the border.
Align - Alignment of the value. being “Left”, “Right” ,”Center”.
Cell spacing - Space between cells. Numbers as value.
Cell padding - Distance between cell border value in number.
Bg color - Background color of table.
<TR> Elements has following attributes.
Bg color - Background color for each rows.
<TD> Elements has following attributes.
Bg color - Background color for each cell.
Rows span - Determines the span of the height of a given row.
Colspan - Determines the span of the width of a given columns.
Create table structure
Table can be divided in to rows and columns . The data can be stored in each cell.
<table> elements is used to the total outside structure.
<TR> element is used to bring each rows.
<TD > or <TH> element helps in putting data or tables inside the cells.
Example 1:
<html>
<head>
<title>
G-tec
</title>
</head>
<body>
<marquee width="500">
<font color="red" size="20" face="Arial">
IT MAGIC
</font>
</marquee>
<table border="1" width="300" height="50" align="center">
<br>
<tr>
<td bgcolor="red">
<a href="[Link]">
<font color="green">
<b><center>
HOME
</font > </b> </a>
<a href=" C:\Documents and Settings\All Users\Documents\My Pictures\Sample Pictures\
[Link]">
<font color="green"><b>
Details.
</font> </b> </a>
</td>
</tr>
</table>
</center>
</body>
</html>
Example 2:
One Two Three
Four Five Six
Seven Eight Nine
<html>
<body>
<table border =”1”>
<tr>
<td> One </td>
<td> Two </td>
<td> Three </td>
</tr>
<tr>
<td> Four </td>
<td> Five </td>
<td> Six </td>
</tr>
<tr>
<td> Seven </td
<td> Eight</td>
<td> Nine </td>
</tr>
</table>
</body>
</html>
TABLE SPAN
Example:
One
Three
Two Four Five
Six
Seven Eight
<html>
<body>
<table border=”1”>
<tr>
<td colspan =”4”>One</td>
</tr>
<tr>
<td rowspan =”3”>Two</td>
</tr>
<td colspan =”3”>Three</td>
</tr>
<tr>
<td> Four </td>
<td > Five </td>
<td rowspan=”2”> six </td>
</tr>
<tr>
<td> Seven </td>
<td> Eight </td>
</tr>
</table>
</body>
</html>
FRAMES
Frames provide a way to display multiple HTML documents in a single browser window.
Example 1:
<html>
<head>
<title>
Two column Frameset
</title>
</head>
<frameset rows=”25%,75%”>
<frame src=”[Link]”>
<frame src=”[Link]”>
</frameset>
</html>
Example 2:
<html>
<head>
<title>
Two Row Frameset
</title>
</head>
<frameset cols=”25%,80%”>
<frame src=”[Link]”>
<frame src=”[Link]”>
</frameset>
</html>
Example 3:
<html>
<head>
<title>
Two Row Frameset
</title>
</head>
<frameset cols=”20%,80%”>
<frame src=”[Link]”>
<frameset rows=”25%,75%”>
<frame src=”[Link]”>
<frame src=”[Link]”>
</frameset>
</frameset>
</html>
Example 4:
<html>
<body>
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
<p>Some older browsers don't support iframes.</p>
<p>If they don't, the iframe will not be visible.</p>
</body>
</html>
Example 5:
<html>
<body>
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="[Link] target="iframe_a">[Link]</a></p>
<p><b>Note:</b> Because the target of the link matches the name of the iframe, the link will
open in the iframe.</p>
</body>
</html>
FORMS
A form is a section of a HTML 4 document body that can contain regular content together
With a number of “control” Which may be modified by the user.
Example 1:
<html>
<body>
<form>
Name: <input type=”Text” name=”text”>
<br>
Place: <input type=”Text” name=”text”>
<br>
<input type=”Radio” name=”radio” id=”ap”>
<input type=”Radio” name=”radio” id=”aa”>
Female
</form>
</body>
</html>
Example 2:
<html>
<head>
<title>
Form tag
</title>
</head>
<body bgcolor="#fcbbbc">
<h2 align="center">
<b><i><u>
Form control Demo
</u></i></b></h2>
<form action="[Link] and Settings/All Users/Documents/My Pictures/Sample
Pictures/Blue [Link]">
<ul>
<li>
Text Box
<input type="text" name="txtDemo" value="This is text box" size="13" />
<br /><hr />
<li>
Radio Box
<input type="radio" name="radDemo1" />
Option1
<input type="radio" name="radDemo1" />
Option2
<br><hr>
Radio Button 2
<input type="radio" name="radDemo2" />
Option1
<input type="radio" name="radDemo2" />
Option2
<br /><hr />
<li>
Check Box
<input type="checkbox" name="checkDemo1" checked="checked" />
Yes
<input type="checkbox" name="checkDemo2" />
No
<br /><hr />
<li>
Username
<input type="text" name="userDemo" value="Your Username" size="13" />
<br /><hr />
<li>
Password
<input type="password" name="passDemo" />
<br /><hr />
<li>
Image
<input type="image" name="imgDemo" src="[Link] and Settings/All
Users/Documents/My Pictures/Sample Pictures/[Link]" width="100" alt="A2A" />
<br /><hr />
<li>
Button
<input type="button" name="buttonDemo" value="click" />
<br /><hr />
<li>
Reset
<input type="reset" name="resDemo" />
<br /><hr />
<li>
Text Area
<textarea rows="3" cols="50">
</textarea>
</li></li></li></li></li></li></li></ul>
</form>
</body>
</html>
SELECTION MENU
The HTML 4 <select> </select> tags create a selection menu from which the user may select a listed
option.
Example 1:
<html>
<head>
<title>
Selection menu
</title>
</head>
<body>
<form>
<select>
<option> Google </option>
<option> Facebook </option>
<option> Yahoo </option>
<option> Twiter </option>
<option> Orkut </option>
</select>
</form>
</body>
</html>
Example 2:
<html>
<head>
<title>
Selection menu
</title>
</head>
<body>
<form name=”myform” method=”post” action=”[Link]
<select name=”myselect”>
<option> First Choice </option>
<option> Second Choice </option>
<option> Third Choice </option>
<option> Fourth Choice </option>
<option> Fifth Choice </option>
</select>
<input type=”submit” value=”Submit”>
</form>
</body>
</html>