ah/ Ntk;gb kfsph; cah;ju
ghlrhiy
jfty; njhlh;ghly; njhopDl;gk;
juk; -11
myF – 5
By :- Mrs. Vanaja Anusuthanan
gy;Y}lfj; njhopDl;gj;ijg;
gad;gLj;jp vspa
,izaj;jsq;fspid
tbtikj;jy;
mbg;gil HTML gad;ghL
• HTML – Hyper Text Markup Language
tiyg;gf;fq;fspid
cUthf;Ftjw;F
gad;gLj;jg;gLk; Xh;
nkhopahFk;
gy HTML mwpf;iffspd;
njhFg;G Xh; ,izag;gf;fkhf
fUjg;gLk;
HTML MdJ Xh; fzpdp nkhop
my;y.
khwhf ,izag;gf;fj;jpd;
fl;likg;gpid my;yJ
Njhw;wj;jpid tiyNkNyhbf;F
njuptpf;Fk;.
,jdhy; ,J tpgupf;Fk; nkhop
my;yJ fhl;rpg;gLj;Jk; nkhop vd
miof;fg;gLk.; (Markup/Descriptive
Language)
HTML Editors
Text Editors
Note Pad
Note Pad ++
Atom
WYSIWYG Editors (What You See Is What
You Get)
Adobe Deramweaver
KompoZer
CKEditor
BlueGriffon
CoffeCup
HTML Nfhg;Gf;fspid Nrkpf;Fk;
NghJ Nfhg;gpd; ngaUld; .html
vDk; Nfhg;G ePl;rp
gad;gLj;jg;gly; Ntz;Lk;.
Eg:- first.html
second.html
bold.html
HTML d; mbg;gil fl;likg;G
< HTML > Muk;g xl;L (Opening Tag)
< HEAD>
</HEAD>
<BODY>
</BODY>
</ HTML > KbT xl;L (Closing Tag)
Muk;g Xl;Lf;fis vOJk; NghJ
Angular Brackets < tag name >
gad;gLj;jg;gLk;.
KbT xl;Lf;fis vOJk; NghJ
Nkyjpfkhf “ / ” FwpaPL
gad;gLj;jg;gLk;.
</ tag name >
HTML xl;Lf;fs; NgnuOj;J > rpw;nwOj;J
NtWghL (Case Sensitive) mw;W
fzg;gLk;.
Eg:- <HTML> </ HTML>
<html> </ html > correct
< Html> </ Html >
< Httml> </ Html > wrong
< Html> </ Htmll >
xl;Lf;fspy; Vw;gLk; jtW tOr;nra;jpfs;
%yk; njupatuhJ. Fwpj;j fl;lis
epiwNtw;wg;glhky; tiyNkNyhhbapy;
fhl;rpg;gLj;jg;gLk.;
Unpaired tags or Stand alone tags.
eg :- <img> <br> <hr>
Muk;g xl;Lf;fs; kl;Lk;
fhzg;gLk; .
HTML xl;bd; gFjpfs;
Xh; milahs xl;lhdJ gpd;tUk;
3 gFjpfis nfhz;lJ.
1. cWg;G -Element
2. gz;G -Attribute
3. ngWkjp -Value
Head tag without title
<html>
<head>
My first web page
</head>
</html>
Head tag with title
<html>
<head>
<title> My first webpage </title>
</head>
</html>
Body background color
<html>
<head>
<title> My first web page </title>
</head>
<body bgcolor =" blue">
</body>
</html>
Body background image
<html>
<head>
<title> My first web page </title>
</head>
<body background = "C:\Sujan\IMG_3492.JPG">
</body>
</html>
Bold Italic and underline
<html>
<head>
<title> My first web page </title>
</head>
<body>
<b> J / VEMBADI GIRLS HIGH SCHOOL </b>
<i> J / VEMBADI GIRLS HIGH SCHOOL </i>
<u> J / VEMBADI GIRLS HIGH SCHOOL </u>
</body>
</html>
Bold Italic and underline with break tag
<html>
<head>
<title> My first web page </title>
</head>
<body>
<B> J / VEMBADI GIRLS HIGH SCHOOL </B> <BR>
<I> J / VEMBADI GIRLS HIGH SCHOOL </I> <BR>
<U> J / VEMBADI GIRLS HIGH SCHOOL </U>
</body>
</html>
Superscript & Subscript
<html>
<head>
<title> My first web page </title>
</head>
<body>
X <sup> 2 </sup> <br>
H <sub> 2 </sub> O
</body>
</html>
Heading Levels
<html>
<head>
<title> My first web page </title>
</head>
<body>
<h1> J/Vembadi Girls High School </h1>
<h2> J/Vembadi Girls High School </h2>
<h3> J/Vembadi Girls High School </h3>
<h4> J/Vembadi Girls High School </h4>
<h5> J/Vembadi Girls High School </h5>
<h6> J/Vembadi Girls High School </h6>
</body>
</html>
Paragraph tag
<html>
<head>
<title> My first web page </title>
</head>
<body>
<p> On the Insert tab, the galleries include items that
are designed to coordinate with the overall look of your
document.You can use these galleries to insert tables,
headers, footers, lists, cover pages, and other document
building blocks. When you create pictures, charts, or
they also coordinate with your current document look.
</p>
</body>
</html>
Paragraph tag with attribute
<html>
<head>
<title> My first web page </title>
</head>
<body>
<p align = "center"> On the Insert tab, the galleries include
items that
are designed to coordinate with the overall look of your
document.You can use these galleries to insert tables,
headers, footers, lists, cover pages, and other document
building blocks. When you create pictures, charts, or
they also coordinate with your current document look.
</p>
</body>
</html>
Paragraph tag with three align
<html>
<head>
<title> My first web page </title>
</head>
<body>
<p align = "Left"> Schools are closed now .</p>
<p align = "center"> Schools are closed now. </p>
<p align = "Right"> Schools are closed now. </p>
</p>
</body>
</html>
Font tag with attribute
<html>
<head>
<title> My first web page </title>
</head>
<body>
<font face= "Arial" color ="red" size = "30">
J/ Vembadi Girls high School
</font>
</body>
</html>
Inserting image with attribute
<html>
<head>
<title> My first web page </title>
</head>
<body>
<img src="IMG_3367.JPG" alt="photo"
width="500" height="500" border ="5">
</body>
</html>
Insert hyperlink
<html>
<head>
<title> My first web page </title>
</head>
<body>
<a href ="http://www.nie.lk"> Education </a>
</body>
</html>
Ordered List
<html>
<head>
<title> My first web page </title>
</head>
<body>
<ol type= “I“ start=“3” > <! Numbers can de used >
<li> hardware </li>
<li> software </li>
<li> liveware </li>
<li> firmware </li>
</ol>
</body>
</html>
Un Ordered List
<title> My first web page </title>
</head>
<body>
<ul type= "disc"> <! Square and circle >
<li> hardware </li>
<li> software </li>
<li> liveware </li>
<li> firmware </li>
</ul>
</body>
</html>
Definition List
<html>
<head>
<title> My first web page </title>
</head>
<body>
<dl> <! definition list >
<dt> HTML </dt> <! definition term >
<dd> Hper Text Markup Language </dd> <! definition description>
<dt> IP </dt>
<dd> Internet Protocol </dd>
</dl>
</body>
</html>
Table with border and caption
<html>
<head>
<title> My first web page </title>
</head>
<body>
<table border = "5">
<caption> <h3> Students details </h3>
</caption>
<tr>
<th> Name </th>
<th> Address </th>
<th> BOB </th>
</tr>
<tr>
<td> Mathu </td>
<td> Jaffna </td>
<td> 12.12.2000 </td>
</tr>
<tr>
<td > Siva </td>
<td> Vavuniya </td>
<td> 09.09.2001 </td>
</tr>
</table>
</body>
</html>
Table with border and align
<html>
<head>
<title> My first web page </title>
</head>
<body>
<table border = "5" align = "center">
<caption align = "bottom" > <h3>
Sudents details </h3> </caption>
Table with border ,align, height and width
<html>
<head>
<title> My first web page </title>
</head>
<body>
<table border = "5" align = "center"
height="500" width = "500">
<caption align = "bottom" > <h3>
Sudents details </h3> </caption>
Table with border ,align, height , width, bgcolor
and bordercolor
<html>
<head>
<title> My first web page </title>
</head>
<body>
<table border = "5" align = "center"
height="500" width = "500" bgcolor =
"yellow" bordercolor= "red">
<caption align = "bottom" > <h3>
Sudents details </h3> </caption>
Table with border ,align, height , width, bgcolor
, bordercolor and background image
<html>
<head>
<title> My first web page </title>
</head>
<body>
<table border = "5" align = "center"
height="500" width = "500" bgcolor =
"yellow" bordercolor= "red"
background="flowers-in-a-string.jpg">
Table with cellpadding
<html>
<head>
<title> My first web page </title>
</head>
<body>
<table border = "5" align = "center"
height="500" width = "500"
bgcolor = "yellow" bordercolor=
"red"
cellpadding = "30">
Table with cellpadding & cellspacing
<html>
<head>
<title> My first web page </title>
</head>
<body>
<table border = "5" align = "center"
height="500" width = "500" bgcolor
= "yellow" bordercolor= "red"
cellpadding = "30“ cellspacing="30">
Table heading with bgcolor
<tr>
<th bgcolor=" green"> Name </th>
<th bgcolor="green"> Address
</th>
<th bgcolor="green"> DOB </th>
</tr>
Table data with colspan
<tr>
<td colspan="2"> 4 </td>
<td> 5 </td>
</tr>
Table Raw with Row span
<tr>
<td rowspan ="2"> 4 </td>
<td> 5 </td>
<td> 6 </td>
</tr>
<tr>
<td > 7 </td>
<td > 8 </td>
</tr>
Thank you..
