Html update1(30 8-2009)

HTML (Hypertext Markup Language)

Internet:-Internet is a network of millions computers connected to each other through
network cables, telephone cables and Satellite links sharing different information and data
around the word.

Initially HTML was known by the name called GML (General Mark-up Language) with
the help of GML we can create WebPages and add title, heading, text, font selection and
much more.

In 1986 SGML (Standard Generalized Mark-up Language) was introduced.
In 1989, Tim Berners Lee and his team designed language and named it as HTML
(Hyper Text Mark-up Language).

Definition: - HTML is a language that used to describe the structure of a web page or
HTML is a complete code that allows the user to create web pages. It includes text and
graphics. You can add hyper links to your web pages.

Hyper text: - Hyper text is a text to link various web pages or web documents.
Mark-up: - Highlightly text, by Underlining or color.
Language: - Way of communication between web pages, which has its own syntax and
Rules.

Today HTML is the most commonly used language to write web pages.

Features of HTML:-
1. Easy to Understand.
2. With the help of HTML we can include text, graphics, table, Hyperlinking, sound
etc. in our webpage.
3. We can easily modify our web page.
4. It is a case sensitive language.
5. It is a platform independent language.

To create a web page:-
1. First Open Note Pad.
2. Create HTML code.
3. Save file with extension .HTML or HTM
4. Open Web Browser (Internet Explorer, Opera etc. and your web page.)

Web Browser: It is client software that allows user to display and interact with a hyper
document.

HTML is a Tag Bases language. Tag is an element, which instruct the web
Browser, what to show and How to show. We can use various attributes in the Tag that
contains additional information like formatting effects, alignment, color, size etc. each
tag giving a specific instruction is enclosed in “<>” angular Brackets.

Example of HTML code:-
Ex-1
<Html>
<Head>
<Title> Hello</Title>
</Head>
<Body>
Multimedia Dot Com
</Body>
</Html>

HTML Elements: An element is used to mark the structure of a document.

Document Structure Elements are required within an HTML document for it to conform to
HTML standards. The essential document structure elements are:-

<HTML>………..</HTML>
<HEAD>………..</HEAD>
<BODY>………..</BODY>
The HTML element is not visible on the HTML document when displayed by the browser.
HTML elements contain the HEAD and BODY elements.

There are two types’ of tags:-
1. Container
A Container element has a starting tag and an ending tag.
Ex: - <HTML>……. </HTML>
2. Empty/Non Container
An empty element does not have an ending tag.
Ex:- <BR>

NON CONTAINER TAGS
1. BR(Break):- This tag breaks the line and displays the from the next line, without giving any
space between two lines.

Syntax:- <BR>

2. HR(Horizontal Ruler):- The <HR> element draws a horizontal line across the page.

Syntax with Attributes: - <HR size=12 width=60% align= center noshade>
Where Size = Specifies the thickness of line.
Width = Specifies the length of line.
Align = Specifies the alignment of line.
Noshade = Produce a solid block line that has no shading.

3. &LT:- This attribute displays <(less than) sign on the Browser.
Ex- 23&LT30
4. &GT:- This attribute displays >(Greater than) sign on the Browser.
Ex- 40&LT30
5. &AMP:- This attribute displays & sign on the Browser.
6. &nbsp:- Spaces in an HTML file are ignored when the page is displayed on web browser.
“ ” is a special tag used to insert blank spaces.

Standard Element in HTML
Element Function Starting Tag Ending Tag
This element signifies
HTML the beginning and end of <HTML> </HTML>
an HTML document
This element identifies
the properties of the
HEAD entire document such as
<HEAD> </HEAD>
its title.
This element is used to
TITLE give a title to the HTML <TITLE> </TITLE>
document.
The body of the
document has the
BODY content of the document. <BODY> </BODY>
It is placed after the
Title of the document.
This element is used to
add paragraphs to the
document after
PARAGRAPH providing the headings
<P> </P>
and title to the
document.

Ex-2
<Html>
<Head>
<Title>My First File</title>
</head>
<Body bgcolor=”Green” or background=“as.jpg” Leftmargin=”60”
topmargin=”60” >
This is My First Html File
</body>
</html>
Description of Elements and Attribute:

1. bgcolor: This attribute allows setting of the background color for the document.
2. margin: The leftmargin attribute allows the left-hand margin to be set. The above
code will give an output, where the text in between the BODY element will be
indented 60 pixels away from the left side of the page.
-------------------------------------------------------------------------------------------------------
Ex-3
-------------------------------------------------------------------------------------------------------
<Html>
<Head>
<Title>My First File</title>
</head>
<Body>
<font face=”arial” color=”red” size=5 >
This is My First Html File
</font>
<font face=”arial” color=”blue” size=5 >
Created in Multimedia Dot Com
</font>
</body>
</html>

CHATRECTER FORMATING ELEMENTS

The character formatting elements are also called physical formatting elements .In this
kind of formatting the other of the document and put it effectively on the user’s screen.
It is important to specify how a particular text should be displayed on the screen same
of the character formatting elements have been discussed below.

BOLD FACE ELEMENT

The bold face element specifies that the text should be displayed in bold face, where
available, otherwise the browser will display the text in any other form.
An example:- The instruction <B> must be read <B> before continuing.

Would display:-

The instruction must be read before continuing.

BIG ELEMENT

The Big element specifies that enclosed text should be displayed, if practical by using a
bigger font as compared to the current font.
The text to be displayed in bigger font is to be enclosed in
<BIG>……</BIG>.

ITALICS ELEMENT
The italics element specifies that the text should be displayed in italics font style.
Where available, otherwise the browser the will displayed the text in any other font.

Example:- Anything between the <I> I ELEMENT </I> should be Italics.

Would display:-

Anything between the I ELEMENT should be Italics.

SMALL ELEMENT
The small element specifies that the enclosed text should be displayed. If particular, by
using a smaller font as compared to the current font.
The text to be displayed in bigger font is to be enclosed in
<SMALL>…..</SMALL>.

STRIKE THROUGH
This element state that enclosed text should be displayed with a horizontal +ive strike
through the text.

As an example:- this text would be <STRIKE>Struck through </STRIKE>.
Would display:-

This text would be Strike through.

SUBSCRIPT ELEMENT
This element specifies that the enclosed text should be displayed as a subscript and, if
practical, by using a smaller font.

As an example: - this is the main text, with <SUB> this part </SUB> being subscript.

Would display:-

This is the main text, with this part being subscript.

SUPERSCRIPT ELEMENT
This element specifies that the enclosed text should be displayed as a superscript and, if
practical, by using a smaller font.

As an example:- this is the main text, with <SUP> this part</SUP> being superscript.

Would display:-

This is the main text, with the part being superscript.

UNDERLINE ELEMENT
This underline element state that the enclosed text should be displayed, as underline.
As an example: - this <u> main points </u> of the exercise.

Would display:-

The main point of the exercise.

MARQUEE
The Marquee element allows the author to create a scrolling text marquee. It highlights the
scrolling text. It has a number of attributes.

Important attributes of marquee:-

BEHAVIOR:- Defines the scroll nature.
BGCOLOR:- Defines the Background color.
DIRECTION:- Specifies the scroll direction.
HEIGHT:- Defines the height of the marquee Bar.
WIDTH:- Defines the width of the marquee Bar.
LOOP:- Specifies the number of scroll.
SCROLL AMOUNT:- Specifies scroll speed.
SCROLL DELAY:- Specifies delay between two scrolls.
ALIGN:- Defines the alignment.

-------------------------------------------------------------------------------------------------------
Ex-4
---------------------------------------------------------------------------------------------------------
<Html>
<Head>
<Title>Marquee</title>
</head>
<Body>

<Marquee Align=”top or middle or bottom” Behavior=”scroll or slide or alternate”
bgcolor=”red” height=”50%” width=”50%” scrollamount=20 scrolldelay=5
direction=”left” or “right” or “Up” or “Down”>

Multimedia Dot Com

</marquee>
</body>
</html>
-------------------------------------------------------------------------------------------------------
Ex-5
-------------------------------------------------------------------------------------------------------
HEADING
This tag is used to define different heading levels in the HTML document. There are six
heading levels H1 to H6.

These containers start with <H1>……. <H6> tag and end with </H1>…….</H6> tag. Text
coming in between these tags appears in different sizes. Text with H1 appears with
maximum size whereas text with H6 appears with minimum size. We can say that size
hierarchy is H1>H2> H3> H4>H5> H6>.

<Html>
<Head>
<Title>Heading</title>
</head>
<Body>
<h1>this is heading 1</h1>
</body>
</html>
-------------------------------------------------------------------------------------------------------
Ex-6
-------------------------------------------------------------------------------------------------------
<Html>
<Head>
<Title>Alignment </title>
</head>
<Body>
<h1 align=”Center”>this is center align</h1>
<h2 align=”left”>this is left align </h2>

<h2 align=”right”>this is right align </h2>
<center>
HTML is a language that used to describe the structure of a web
page or HTML is the encoding scheme used for creating a web document.
</center>
</body>
</html>
-------------------------------------------------------------------------------------------------------
Ex-7
-------------------------------------------------------------------------------------------------------
List
List is collection of similar type of data. Or A list is used to represent a series of related
items as a visual and informational unit.

Like the tool “Bullet and Numbering” we have in MS-Office application, in HTML. We
can do the similar thing using the container tag <OL>……</OL>,<UL>……</UL>
and <LI>……</LI>

<OL> is for ordered list, where the list items come with different forms of index
numbers.
<UL> is for Un-ordered list, where the list items come with different types of bullets.
<LI> is used with the list items, in <OL> as well as in <UL>

Important attributes:-

OL-START:- Specifies the start Index number.
OL-TYPE:- Defines the form of Index number.
UL-TYPE:- Defines he form of Index number.
LI-TYPE:- Defines the bullet type when used with <UL>
VALUE:- Specifies the index number when used with <OL>.

<Html>
<Head>
<Title>List Element</title>
</head>
<Body>
List of Students in HTML Class
<ol>
<li> Rakesh
<li> Anup
<li> Govind
<li> Ankit
</ol>
<ol type="square">
<li>Dehradun</li>
<ul type="i">
<li>IMA</li>
<li>FRI</li>
<li>IMA</li>
<li>FRI</li>
</ul>
<li>Vikasnagar</li>
<ul type="circle">

<li>IMA</li>
<li>FRI</li>
</ul>
</ol>

</body>
</html>
NOTE:- Where <ol> = Ordered List
<ul> = Unordered List
<li> = List Item
-------------------------------------------------------------------------------------------------------
Ex-8
-------------------------------------------------------------------------------------------------------
<Html>
<Head>
<Title>List Menu, Directory List, Definition List </title>
</head>
<Body>
Directory List Element:-
<dir>
<li>Rohit
<li>Sonu
<li>Vishal
<li>Rajeev
</dir>
Menu List Element:-
<menu>
<li>Rohit
<li>Sonu
<li>Vishal
<li>Rajeev
</Menu>
Definition List Element:-
<dl>
<dt> Term<dd>This is the definition of the First term.
<dt> Term<dd>This is the definition of the Second term.

</dl>
</body>
</html>

-------------------------------------------------------------------------------------------------------
Ex-9
-------------------------------------------------------------------------------------------------------
Table
A table is used to display data in a tabular format on the screen. A Table consists of
rows and columns and the intersection of a row and column is called a cell.

<Html>
<Head>
<Title>Table</title>
</head>

<Body>
<table>
<tr>
<td>S.No.</td>
</table>
</body>
</html>
Attributes of Table
1. BORDER:- The border attribute draws borders around all the table cells
2. BORDERCOLOR:- bordercolor sets the color of the border of the table.
3. BORDERCOLORLIGHT:- This attribute is set to give a three-dimensional effect
to the table. This is done by giving a lighter color to the border while displaying a
three-dimensional table.
Example:- <table border=3 bordercolorlight=#ff0000 >
4. BORDERCOLORDARK:- This attribute is the opposite of bordercolorlight. This
is done by giving a dark color to the border while displaying a three-dimensional
table.
Example:- <table border=3 bordercolordark=#0000ff >
5. BGCOLOR:- This attribute of the table element allows the background color to be
set for the table
6. WIDTH:- This attribute is used to set the width of the table, as eithet an absolute
width, or a percentage of the document width.
7. HEIGHT:- The height attribute of the table is set, either as a pixel value or as a
percentage of the display window.
8. CELLSPACING:- This attribute when used with the TABLE element allows
control over the space used between the cells in a table. The syntax for using this is,
cellspacing=value. The value should be a pixel value.
9. CELLPADDING:- The cellpadding attribute allows control over the space inserted
between the cell data and the cell wall in a table. The syntax for using this is,
Cellpadding =value. The value should be a pixel value.
Example:- <table border=0 cellspacing=0 cellpading=0>
10. ALIGN:- this attribute is used to align a table to either left or right of the page.
Example:- <table align=left or right or center>
11. VALIGN:- The valign attribute specifies that the table can be either top or bottom
aligned. The default is center aligned.
Example:- <table valign=bottom or top>
TR(Table Row)
This element specifies a table row. It is a container element which container element
which contain the <td>….</td> element. The number of rows in a table depends on

how many<tr> elements are contained within the table, regardless of cells that may
attempt to use the rowspan attribute, where one row can span the width of more than
one row. The contents of a row are placed between <tr> and </tr> elements.

TD(Table Data)
This element stands for table data, and it specifies a standard table data cell. A table
data cell must only appear within table rows. Each row need not have the same number
of cells specified, science short rows will be padded with blank cells on the right.
Example
<html>
<head>
<title>table></title>
</head>
<body bgcolor=gold>
<table border=1>
<tr>
<td>S.NO.</td>
<td>Name</td>
<td>Address</td>
</tr>
<tr>
<td>1</td>
<td>Rahul</td>
<td>Vikasnagar</td>
</tr>
<tr>
<td>2</td>
<td>Anurag kumar Som</td>
<td>Dakpathar</td>
</tr>
</table>
</body>
</html>

Example With All Attributes
<Html>
<Head>
<Title> Exercise1
</Title>
</Head>
<Body Bgcolor=Pink>
<Table Border=2 Bordercolor=Blue Cellpadding=15 Cellspacing=20
Width=50% Height=60% Align=Center bordercolordark=green
bordercolorlight=red>
<tr bgcolor=Red>

<td> S.No.</td>
<td> Name</td>
<td> Adders</td>
<td> Phone No.</td>

</tr>
<tr bgcolor=Yellow>
<td> 1.</td>
<td> Lucky</td>
<td> Vikeshnager</td>
<td>7894561230</td>
</tr>
<tr bgcolor=Green>
<td> 2.</td>
<td> Anurag</td>
<td> Dakpather</td>
<td>420420420</td>
</tr>
</Body>
</Table>
</Html>

Rowspan & Colspan
Colspan:- This attribute can appear within any table cell, and it specifies the number of
columns the cell can span. The default Colspan for any cell is 1.

Rowspan:- The rowspan attribute specifies the number of rows the cell can span. The
default span for any cell is 1.

<html>
<head>
<title>rank</title>
</head>
<body bgcolor=008945>
<table border=1 width=400 height=40>
<tr>
<td bgcolor=yellow rowspan=4><center>a</center></td>
<td bgcolor=yellow colspan=1><center>b</center></td>
<td bgcolor=yellow colspan=1><center>c</center></td>
<td bgcolor=yellow colspan=1><center>d</center></td>
</tr>
<tr>
<td bgcolor=liem rowspan=5><center>e</center></td>
<td bgcolor=gold><center>f</center></td>
<td bgcolor=gold><center>g</center></td>
</tr>
<tr>
<td bgcolor=lime><center>h</center></td>
<td bgcolor=lime><center>i</center></td>
</head>
</html>
Output:-
b c d
a f g
e
h i
Marksheet

<HTML>
<HEAD>
<TITLE>Table Exercise-2</title>
<body bgcolor=black>

<table border=1 width=100% height=80>

<tr>
<td bgcolor=pink rowspan=1 colspan=7><font face="BernhardMod
BT"color="black"><center>H.N.B Garhwal Univwesity<br>Srinagar(Garhwal)
Uttarakhand<br>STATEMENT OF THE MARKS FOR
EXAMINATION</center>        &nbs
p;         
           &n
bsp;           &nbsp
;
           &n
bsp;           &nbsp
;
           &n
bsp;           &nbsp
;
           &n
bsp;           &nbsp
;
     &nbsp  &nbsp  &nb
sp;            
   
        S.No.-
2567894<br>          &nb
sp;      
           &n
bsp; 
           &n
bsp;           &nbsp
;
           &n
bsp;           &nbsp
;
           &n
bsp;           
           &n
bsp;           &nbsp
;            &
nbsp;     
     
Roll No.-2467802<br><BR>Name of the student:.........<br>
Father's Name:...........<br>Name of the college/Campus:.........<br>Name of
class:..........</td>
</font></tr>
<tr>
<td bgcolor=gold rowspan=1><font face="Hancock"color="black">Subject
<td bgcolor=gold colspan=1><font face="Hancock"color="black">Max.Marks

<td bgcolor=gold colspan=1><font face="Hancock"color="black">Min.Marks
<td bgcolor=gold COLSPAN=1 rowspan=6>
<table border=1 width=100% height=10>
<tr>
<td COLSPAN=3><center><font face="Charlesworth"color="red">paper</center>

</tr>

<tr>
<td bgcolor=yellow><font face="Charlesworth"color="red">I
<tD bgcolor=yellow><font face="Charlesworth"color="red">II
<td bgcolor=yellow><font face="Charlesworth"color="red">III
<tr>
<td bgcolor=yellow><font face="times new roman"color="black">18/35

<tr>
<td bgcolor=yellow><font face="times new roman"color="black">x
<tr>
<tr>
<tr>

</table>
<td bgcolor=gold colspan=1><font face="Hancock"color="black">Theory total
<td bgcolor=gold colspan=1><font face="Hancock"color="black">Practical
<td bgcolor=gold colspan=1><font face="Hancock"color="black">Total

<TR>
<TD bgcolor=lime><font face="BernhardMod BT"color="red">Hindi
<TD bgcolor=white colspan=1><font face="BernhardMod BT"color="black">100
<td bgcolor=white rowspan=1><font face="BernhardMod BT"color="black">33
<TD bgcolor=white><font face="BernhardMod BT"color="black">74/100
<TD bgcolor=white><font face="BernhardMod BT"color="black">x
<TD bgcolor=lime><font face="BernhardMod BT"color="red">74

<TR>

<TD bgcolor=lime><font face="BernhardMod BT"color="red">English
<TD bgcolor=white><font face="BernhardMod BT"color="black">100
<td bgcolor=white><font face="BernhardMod BT"color="black">33


<TR>

<TD bgcolor=lime><font face="BernhardMod BT"color="red">Science
<TR>
<TD bgcolor=lime><font face="BernhardMod BT"color="red">Sanskrit
<TR>
<TD bgcolor=lime><font face="BernhardMod BT"color="red">S.Science
<TR>
<td bgcolor=gold colspan=4><font face="Charlesworth"color="red">RESULT-
Passed<br>
Totel
<td bgcolor=gold><font face="Charlesworth"color="red">356/500
<td bgcolor=gold colspan=2><font face="Charlesworth"color="red">Division-
First<br>Checked by.......

</html>
</head>

Links
Links:-
1. Link to a Website
2. Link to a Webpage
3. Link within a webpage

1. Link to a Website:- For linking we use Anchor Element(<a>……</a>)
Syntax:- <a href= “URL with Protocol”> Sample</a>

Ex:-
<html>
<head>

<title>link</title>
</head>
<body>
<a href=http://www.yahoo.com>yahoo</a>
</body>
</html>

In this example when we click on yahoo than yahoo.com open.

2. Link to a Webpage:- We link two webpage by Text and Image.

Syntax:- <a href= “URL of Page”> Go to File a.html</a>

Ex:-
<body>
<a href= “a.html”> Go to File a.html </a>>
</body

3. Link within a webpage:-

Ex:-

<html>
<body>Top<br>

<a name= “top”></a>
<a href=#top>Top</a>
<a href=#middle>Middle</a>
<a href=#bottom>Bottom</a>
<br><br><br><br><br><br><br><br><br>Middle<br>

<a name= “middle”></a>
<br><br><br><br><br><br><br><br><br>Bottom<br>

<a name= “bottom”></a>

</body>
</html>

Html update1(30 8-2009)

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (9)

Semelhante a Html update1(30 8-2009)

Semelhante a Html update1(30 8-2009) (20)

Último

Último (20)

Html update1(30 8-2009)