1 what is html

8/7/2019 1 What is HTML

http://slidepdf.com/reader/full/1-what-is-html 1/18

4/20/20114/20/2011 11

What is HTMLWhat is HTML

Rakesh Kumar RaiRakesh Kumar Rai

Lecturer I.T Dept.Lecturer I.T Dept.G.C.E.T Gr. NoidaG.C.E.T Gr. Noida



224/20/20114/20/2011

HTMLHTML

HTML is hypertext markup language usedHTML is hypertext markup language used

For the development of web sites and webFor the development of web sites and web

Pages.HTML is interpreted by browserPages.HTML is interpreted by browserit is tag based language which is buildit is tag based language which is build

by several tags.by several tags.



334/20/20114/20/2011

HTML TagsHTML Tags

Tags are instructions that are embeddedTags are instructions that are embedded

directly into the text of the document.directly into the text of the document.

HTML tag signals to the browser that it HTML tag signals to the browser that it Should do something other than just throwShould do something other than just throw

Text on the screen .All HTML tags beginsText on the screen .All HTML tags begins

With an open angle < and end with a closeWith an open angle < and end with a close

angle bracket >.angle bracket >.



444/20/20114/20/2011

Types of tagsTypes of tags

1.Paired Tags1.Paired Tags

2.Singular tags2.Singular tags



554/20/20114/20/2011

1.Paired Tags1.Paired Tags

A tag is said to paired tag if it along with a A tag is said to paired tag if it along with a

Companion tag, flanks the text.Companion tag, flanks the text.

e.g. <b> tag with </b>,e.g. <b> tag with </b>,<i> tag with </i> ,<i> tag with </i> ,

<u> tag with</u> and<u> tag with</u> and

<h1> tag with </h1> etc<h1> tag with </h1> etc



664/20/20114/20/2011

2.Singular Tags2.Singular Tags

It is call as stand alone tag or singular tagIt is call as stand alone tag or singular tag

It does not contain a companion tag.It does not contain a companion tag.

e.g. <br>,<p> etc.e.g. <br>,<p> etc.



774/20/20114/20/2011

List List

There is two types of lists in HTMLThere is two types of lists in HTML1.Ordered List(ol)1.Ordered List(ol)

2.UnOrdered List(ul)2.UnOrdered List(ul)



884/20/20114/20/2011

1.Ordered List(ol)1.Ordered List(ol)

<html><html>

<body><body>

<ol type=1,A,a,I,i><ol type=1,A,a,I,i><li>Hardware<li>Hardware

<li>Software<li>Software

</ol></ol>

</body></body>

</html></html>



994/20/20114/20/2011

2.UnOrderedList(ul)2.UnOrderedList(ul)

<html><html>

<body><body>

<ul type=disc><ul type=disc><li>bank<li>bank

<li>postofffice<li>postofffice

</ul></ul>

</body></body>

</html></html>



10104/20/20114/20/2011

TableTable

<html><html>

<table><table>

<body><body>

<tr><th>Name</th><th>RollNo</th> </tr><tr><th>Name</th><th>RollNo</th> </tr>

<tr><td>Amit</td><td>100</td></tr><tr><td>Amit</td><td>100</td></tr>

<tr><td>Anurag</td><td>101</td></tr><tr><td>Anurag</td><td>101</td></tr>

</body></body></table></table>

</html></html>



11114/20/20114/20/2011

ImagesImages

<html><html>

<body><body>

<img src=C:<img src=C:\\ASH ASH\\002.jpeg>002.jpeg>

</body></body>

</html></html>



12124/20/20114/20/2011

FormsForms

<html><html>

<form><form>

Name<input type=textbox name=nameName<input type=textbox name=namevalue= >value= >

RollNo<input type=textbox name=rollnoRollNo<input type=textbox name=rollno

value=>value=></form></form>

</html></html>



13134/20/20114/20/2011

FramesFrames

HTML tag that divides a browser screenHTML tag that divides a browser screen

Into 2 or more recognizable unique regionsInto 2 or more recognizable unique regions

<frameset></frameset>.Each unique<frameset></frameset>.Each uniqueRegion is called a frame. Each frame canRegion is called a frame. Each frame can

Load different document.Load different document.

So multiple documents can be displayed at So multiple documents can be displayed at the same time.the same time.



15154/20/20114/20/2011

CSSCSS

CSS(Cascading Style sheet): Style SheetsCSS(Cascading Style sheet): Style Sheets

Are Powerful mechanism for adding styles Are Powerful mechanism for adding styles

e.g. fonts,colors,spcaing to web documentse.g. fonts,colors,spcaing to web documents

.The advantage of style sheet is that we.The advantage of style sheet is that we

Can change our document from a singleCan change our document from a single

Location to anywhere .Style Sheets are said to beLocation to anywhere .Style Sheets are said to be

Cascade When they combine to specify theCascade When they combine to specify the Appearance of the page. They are providing Appearance of the page. They are providing

Dynamic effects.Dynamic effects.



16164/20/20114/20/2011

CSSCSS

Style assignment process is accomplishedStyle assignment process is accomplished

With <STYLE> </STYLE>With <STYLE> </STYLE>

Style Sheets can be started withStyle Sheets can be started with<STYLE></STYLE> these tags are written<STYLE></STYLE> these tags are written

Under <head></head> tagUnder <head></head> tag



17174/20/20114/20/2011

Example on CSSExample on CSS

<html><head><html><head><STYLE type=text/css><STYLE type=text/css>

H1 {font H1 {font--family:arial,helvetica;color:green}family:arial,helvetica;color:green}

P {font P {font--size:12pt;font size:12pt;font--style:italic}style:italic}</STYLE></STYLE>

</head></head>

<body><h1>Galgotias College</h1><body><h1>Galgotias College</h1><p>India is a great country<p>India is a great country

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



18184/20/20114/20/2011

Example on CSSExample on CSS<html><html><STYLE type="text/css"><STYLE type="text/css">h1{font h1{font--family:Microsoft family:Microsoft--SansSans--Serif;font Serif;font--

size:20;backgroundsize:20;background--color:blue;color:red;text color:blue;color:red;text--decoration:overline;text decoration:overline;text--decoration:linedecoration:line--through}through}

table{font table{font--family:Tahoma;font family:Tahoma;font--size:40;color:blue;bakgroundsize:40;color:blue;bakground--color:green;font color:green;font--style:bold;text style:bold;text--transform:uppercase;text transform:uppercase;text--align:Left}align:Left}

</STYLE></STYLE><body><body>

<h1>Application Development</h1><h1>Application Development</h1><table border="4"><table border="4"><tr><th>Name</th><th>RollNo</th></tr><tr><th>Name</th><th>RollNo</th></tr><tr><td>Mukesh</td><td>100</td></tr><tr><td>Mukesh</td><td>100</td></tr>

</table></table></bod ></bod >

1 what is html

Documents