HTML

HTML (Hyper Text Markup Language
SAI INFOTECH COMPUTER INSTITUTE

In Front of Citykart Vijay Chowk Gorakhpur
Mob:- 9935268617,9819380856
HTML
Hyper Text Markup Language
HTML:-
It is firstly introduced by Tim burner lee in 1990. HTML is the standard
markup language for creating web pages. HTML describes the structure
of web pages using markup. Every HTML document should contain
standard HTML keys/ elements. A tag is a coded HTML command that
indicates how part of web page should be displayed each document
consist of head and body tags.
HTML PAGE STRUCTURE

1. <HTML>/<html>
The HTML tag tells the web browser that the file contains HTML coded
information. The file extension [(.) HTML] or dot [(.) html] indicates
that this is an HTML document. An HTML document must contain this
extension to be read by a web browser.
2. <HEAD > / <head>
The head tag identify the first part of the HTML coded the document
that contain the titles. The title is shown as part of the browser
window. Information placed in the head tag is essential to the inner
working of the document and has nothing to do with the contains of
the document.
3. <TITLE> / <title>
The title tab contains the document titles and identifies its contents in a
global context. The title is the displayed somewhere on the browser
window (usually at the top) or on title bar, but not within the text area.
4. <ADDRESS>/ <address>
The address tag contain some information commonly placed at
foot of the web page
For example – copy right information contain details of the
company etc are placed at the foot of the web page. The address
tab should be placed immediately after the last line of the textual
material of the web page. The text type within the address tab
appeared in ITELICS
5. <BODY>/ <body>
The body tag the most important part of your HTML document
which contain the contents of the document that is displayed
within the text area of your browser window.
TAGS/ ELEMENT
Tag is a component of the structure of an HTML document it is a coded
HTML command that is used to design of the web page.
Type of HTML tags

1. Container tag
2. Empty tag
Container tag:-
This type of HTML tags required pair tags that is a starting tag as well as
ending tag.
For example- <HTML>, <TITLE> ,<body>
Empty tag:-
This type of HTML tags required just a starting tag and not an ending
tag.
For example- <Br>,<Hr> etc.
HTML Program:-
 <HTML>
<HEAD>
<TITLE> Web page </TITLE>
</HEAD>
<BODY> My first HTML document
</BODY>
</HTML>
For line break:-
 <HTML>
<HEAD>
<TITLE>HTML program </TITLE>
</HEAD>
<BODY>My first HTML document
<Br>HTML is easy to learn
</BODY>
</HTML>
Note:- Where <BR>means Break the line
For background color and text color change:-
 <HTML>
<HEAD>
<TITLE>HTML program</TITLE>
</HEAD>
<BODY bgcolor = “blue” text = “red“>
HTML is easy to learn
</BODY>
</HTML>
For Change paragraph:-
 <HTML>
<HEAD>
<TITLE> HTML PROGRAME </TITLE>
</HEAD>
<BODY BGCOLOR=”YELLOW” TEXT=”RED”>
MY FIRST HTML DOCUMENT
<P> HTML IS EASY TO LEARN</P>
</BODY>
</HTML>
WHERE <P> TAG MEANS CHANGE THE PARAGRAPH
FOR CHANGE ALIGNMENT:-

<HTML>
<HEAD>
<TITLE> WEB PAGE</TITLE>
</HEAD>
<BODY>
<P align=”center”> SAI INFOTECH </P>
<P align= “center”> O’level </p>
</body>
</html>
Heading Tag:-
There are six types of Heading Tag
<H1> Large Font </H1>
<H2> Smaller then H1 </H2>
<H3> Smaller then H2</H3>
<H6> Small Font</H6>
USE OF HEADING TAG:-
<HTML>
<HEAD>
<TITLE> USE OF HEADING TAG</TITLE>
</HEAD>
<BODY>
<H1> SAI INFOTECH </H1>
</BODY>
</HTML>
IF CHANGE ALIGNMENT OF HEADING:-
<HTML>
<HEAD>
<TITLE> WEB PAGE</TITLE>
</HEAD>
<BODY>
<H1 ALIGN =”RIGHT”> INDIA </H1>
</BODY>
</HTML>
Use of division tag for change alignment together of group of
text:-
<HTML>
<HEAD>
<TITLE> USE OF DIV TAG</TITLE>
</HEAD>
<BODY>
<DIV ALIGN=”CENTER”>
<H1> INDIA </H1>
<H2> INDIA </H2>
<H3> INDIA </H3>
<H4> INDIA </H4>
<H5> INDIA </H5>
<H6> INDIA </H6>
</DIV>
</BODY>
</HTML>
<HR>
TAG IS USE FOR HORIZONTAL RULE:-
Attribute
ALIGN, SIZE, WIDTH, COLOR
EX:-
<HTML>
<HEAD>
<TITLE> use of HR TAG </TITLE>
</HEAD>
<BODY>
<HR ALIGN="CENTER" SIZE="12" WIDTH="75%" COLOR ="RED">
<HR ALIGN="CENTER" SIZE="10" WIDTH="65%" COLOR="BLUE">
<HR ALIGN="CENTER" SIZE="8" WIDTH="55%" COLOR="GREEN">
<H1 ALIGN="CENTER"> HORIZENTAL RULE TESTING </H1>
<HR ALIGN="CENTER" SIZE="8" WIDTH="55%" COLOR="GREEN">
<HR ALIGN="CENTER" SIZE="10" WIDTH="65%" COLOR="BLUE">
<HR ALIGN="CENTER" SIZE="12" WIDTH="75%" COLOR="RED">
</BODY>
</HTML>
FONT TAG (USE FOR FONT SIZE)
Font size – 1,2,3,4,5,6,7

Default size of font= 3
Face, size, color
Font style
Note:- value of size attributes is form 1 to 7. The default value of size is
3.
Size-+x
Where x is the integer value and will add up to the default size.
Program:-
<HTML>
<HEAD>
<TITLE> font tag </TITLE>
</head>
</body>
<font face="Calibri" size= "7" color="green"> NIELIT</font>
<font face="Calibri" size="2" color="red"> NILEIT</font>
</BODY>
</HTML>
LIST:-
Using HTML we can arrange items in list in several waves. The two
most commonly used methods are-
1. Bulleted list
2. Numbered list
Bulleted list or unordered list:-

There are three types of bulleted list.
 Disk
 Square
o Circle
<UL> tag is use for bulleted list and it is not use alone. It used with align
tag <li> All tag use under the body tag.
Syntax 1:-
<UL>
<LI> ITEM 1</LI>
<LI> ITEM 2</LI>
<LI> ITEM 3</LI>
</UL>
Syntax 2:-
If we change bullet tag then type = “value”
<UL TYPE=”VALUE”>
<LI> ITEM 1</LI>
<LI> ITEM 2</LI>
<LI> ITEM 3</LI>
</UL>
Syntax 3:-
If we want to change the bullet tag each line then………
<UL>
<LI type=”value”> ITEM 1</LI>
</UL>
Design a program using Bulleted list:-

OUTPUT RESULT:-
CPU
 ALU
 CU
 MU
Program:-
<html>
<head>
<title>Unordered List</title>
</head>
<body>
<H3> CPU</H3>
<UL>
<LI>ALU</LI>
<LI>CU</LI>
<LI>MU</LI>
</UL>
</BODY>
</HTML>
OUTPUT:-
Types of network
 LAN
 MAN
o WAN
Program:-
<html>
<head>
<title> use of OL tag</title>
</head>
<body>
<H3> Types of Network</H3>
<UL>
<LI Type=”square”> LAN</li>
<li type=”disk”>MAN</li>
<li type=”circle”> WAN</li>
</UL>
</body>
</html>
NOTE:-
The default button of main list is = disk
The default button of sub list inside the main list is = circle
The default button of sub list inside the sub list is = square
ORDERED LIST/ NUMBERED LIST:-
In ordered list there are two attributes-
1. Start: - specifies the start value (always in number).
Example:-1, 2, 3, 4…. Etc
2. Type:-define the type of numbering sequence used for each listed
items. <ol>
A- UPPPER CASE LETTER
a- lower case letter
I - UPPER CASE ROMAN
I - lower case roman
1- Sequence of number (default)
OUTPUT:-
Microsoft office
1. Microsoft word
2. Microsoft excel
3. Microsoft power point
4. Microsoft access
Program:-
<html>
<HEAD>
<TITLE> ORDERED LIST </TITLE>
</HEAD>
<BODY>
<H3> MICROSOFT OFFICE </H3>
<OL>
<LI> MICROSOFT WORD</LI>
<LI> MICROSOFT EXCEL </LI>
<LI> MICROSSOFT POWER POINT </LI>
<LI> MICROOFT ACCESS </LI>
</OL>
</BODY,
</HTML>
OUTPUT:-
MICROSOFT OFFICE
5. MICROSOFT WORD
6. MICROSOFT EXCEL
7. MICROSOFT POWER POINT
8. MICROSOFT ACCESS
Program:-
<HTML>
<HEAD>
</HEAD>
<BODY>
<H3> Microsoft office </h3>
<ol start=”S”>
<LI> MICROSOFT WORD </LI>
<LI> MICROSOFT EXCEL</LI>
<LI> MICROSOFT POWER POINT </LI>
<LI> MICROSOFT ACCESS </LI>
</OL>
</BODY>
</HTML>
OUTPUT:-
OPERATING SYSTEM
I. SINGLE USER SINGLE TASKING
II. SINGLE USER MULTI TASKING
III. MULTI USER MUTLI TASKING
Program:-
<HTML>
<HEAD>
</HEAD>
<BODY>
<H3> OPERATING SYSTEM </H3>
<OL TYPE ="I">
<LI> SINGLE USER SINGLE TASKING </LI>
<LI> SINGLE USER MULTI TASKING </LI>
<LI> MULTI USER MULTI TASKING </LI>
</OL>
</BODY>
</HTML>
OUTPUT:-
OSI model
a. Application layer
b. Presentation layer
c. Session layer
d. Transport layer
e. Network layer
f. Data link layer
g. Physical layer
Program:-
<HTML>
<HEAD>
</HEAD>
<BODY>
<H3> OSI MODLE </H3>
<OL TYPE= "a" START= "4">
<LI> APPLICATION LAYER </LI>
<LI> PRESENTATION LAYER </LI>
<LI> SESSION LAYER</LI>
<LI> TRANSPORT LAYER </LI>
<LI> NETWORK LAYER </LI>
<LI> DATA LINK LAYER </LI>
<LI> PHYSICAL LAYER </LI>
</OL>
</BODY>
</HTML>
Table tag:-
Table= collection of rows and columns
Table tag = <TABLE>
In table tag there are three tags
<TR> - table row

<TD>- table definition
<TH>- table heading
Border attribute is used in table tag to create the outline structure.

<compulsory to be used with<table>
Border=”2” it show thickness of border.
<th> it is always in BOLD font.
By default- left aligned (normal context)
Heading content- center aligned (default)

CREATION OF TABLE:-
In table tag, it works row wise
Name Roll no. Course
Ram 11 O level
Ajay 12 A level
<HTML>
<HEAD>
<TITLE> TABLE TAG </TITLE>
</HEAD>
<BODY>
<TABLE BORDER=”2”>
<TR>
<TH>Name</TH>
<TH>Roll No.</TH>
<TH>Course</TH>
</TR>
<TR>
<TD> Ram </TD>
<TD>11</TD>
<TD>O’level</TD>
</TR>
<TR>
<TD> Ajay </TD>
<TD>12</TD>
<TD>A’ level</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Alignment by default is left.
Gating table using<table>
EMPLOY ID EMPLOY NAME
101 SAGAR
102 SANJEEV
103 RAHUL
<HTML>
<HEAD>
</HEAD>
<BODY>
<TR>
<TH> EMPLOY ID </TH>
<TH> EMPLOY NAME</TH>
</TR>
<TR>
<TD>101</TD>
<TD> SAGAR</TD>
</TR>
<TR>
<TD>102</TD>
<TD>SANJEEV</TD>
</TR>
<TR>
<TD>103</TD>
<TD>RAHUL</TD>
</TR>
</TABLE>
</BODY>
</HTML>
For Change Alignment:-
In order to align entire row we align in TR tag. In order to align the
entire table uses it with table tag. (Table is create in the right side of
web page)
ID NAME SALARY
11 PRAVEEN 20000
12 GARIMA 25000
13 NEETU 30000
<HTML>
<HEAD>
</HEAD>
<BODY>
<TR>
<TH> ID </TH>
<TH> NAME </TH>
<TH> SALARY </TH>
</TR>
<TR>
<TD ALIGN=”RIGHT”> 11</TD>
<TD ALIGN=”CENTER”>PRAVEEN </TD>
<TD ALIGN=”RIGHT”>20000</TD>
</TR>
<TR>
<TD ALIGN=”CENTER”>12</TD>
<TD ALIGN=”RIGHT”> GARIMA </TD>
<TD>25000</TD>
</TR>
<TR>
<TD>13</TD>
<TD ALIGN=”CENTER”> NEETU</TD>
<TD ALIGN=”RIGHT> 30000</TD>
</TR>
</TABLE>
</BODY>
</HTML>
For Merge Row or column there are two attributes.

“rowspan” and “colspan”
To merge row To merge column

Can also be used with table tag.
STUDENT NAME
SAURABH RAHUL
SAGAR RAM
<HTML>
<HEAD>
<TITLE> USE IF COLSPAN </TITLE>
</HEAD>
<BODY>
<TR>
<TH COLSPAN=”2”> STUDENT NAME</TH>
</TR>
<TD> SAURABH </TD>
<TD>RAHUL </TD>
</TR>
<TR>
<TD>SAGAR</TD>
<TD>RAM</TD>
</TR>
</TABLE>
</BODY>
</HTML>
O LEVEL
SAURABH
A LEVEL
SAGAR O LEVEL
<HTML>
<HEAD>
<TITLE> use of rowspan </title>
<HEAD>
<BODY>
<TR>
<TD ROWSPAN=”2”> SAURABH</TD>
<TD> O LEVEL </TD>
</TR>
<TR>
<TD> A LEVEL</TD>
</TR>
<TR>
<TD> SAGAR </TD>
<TD> O LEVEL</TD>
</TR>
</TABLE>
</BODY>
<HTML>
SAURABH O LEVEL
A LEVEL
RAHUL
<HTML>
<HEAD>
<TITLE> use of rowcol</TITLE>
</HEAD>
<BODY>
<TR>
<TD ROWSPAN=”2”>SAURABH </TD>
<TD>O LEVEL </TD>
</TR>
<TR>
<TD>A LEVEL </TD>
</TR>
<TR>
<TD COLSPAN=”2”> RAHUL </TD>
</TR>
</TABLE>
</BODY>
</HTML>
COMPILER
SYSTEM SOFTWARE INTERPRETER
WINDOWS OS
LINNUX
<HTML>
<HEAD>
<TITLE> use of colspan </TITLE>
</HEAD>
<BODY>
<TR>
<TD ROWSPAN=”4”> SYSTEM SOFTWARE </TD>
<TD> COMPILER</TD>
</TR>
<TR>
<TD> INTERPRETER</TD>
</TR>
<TR>
<TD> WINDOWS OS </TD>
</TR>
<TR>
<TD> LINUX</TD>
</TR>
</TABLE>
</BODY>
</HTML>
RAM VIKAS
SAGAR RITU RITU
RITU RITU
<HTML>
<HEAD>
<TITLE> NESTED TABLE</TITLE>
</HEAD>
<BODY>
<TR>
<TD> RAM </TD>
<TD> VIKAS </TD>
</TR>
<TR>
<TD> SAGAR </TD>
<TD>
<TABLE>
<TR>
<TD> RITU </TD>
<TD> RITU </TD>
</TR>
<TR>
<TD> RITU </TD>
<TD> RITU </TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
ABC ABC
ABC ABC PQR
XYZ XYZ
JKL XYZ XYZ
<HTML>
<HEAD>
<TITLE> NESTED TABLE </TITLE>
</HEAD>
<BODY> <TABLE BORDER=”3”>
<TR>
<TD>
<TABLE>
<TR>
<TD> ABC </TD>
<TD> ABC </TD>
</TR>
<TR>
<TD> ABC </TD>
<TD> ABC </TD>
</TR>
</TABLE>
</TD>
<TD> PQR </TD>
</TR>
<TR>
<TD> JKL </TD>
<TD>
<TABLE>
<TR>
<TD> XYZ </TD>
<TD> XYZ </TD>
</TR>
<TR>
<TD> XYZ </TD>
<TD> XYZ </TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

HTML

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML

Uploaded by

Copyright:

Available Formats

HTML (Hyper Text Markup Language

SAI INFOTECH COMPUTER INSTITUTE

HTML PAGE STRUCTURE

2. <HEAD > / <head>

Type of HTML tags

FOR CHANGE ALIGNMENT:-

FONT TAG (USE FOR FONT SIZE)

Font size – 1,2,3,4,5,6,7

Bulleted list or unordered list:-

Design a program using Bulleted list:-

Table tag = <TABLE>

In table tag there are three tags

<TR> - table row

Border attribute is used in table tag to create the outline structure.

Border=”2” it show thickness of border.

<th> it is always in BOLD font.

By default- left aligned (normal context)

Heading content- center aligned (default)

For Merge Row or column there are two attributes.

To merge row To merge column

You might also like