svan html in hindi

SVAN Html in Hindi

March 20

2016 In this EBook I have covered HTML in Hindi Language. . HTML language is developed to design web pages. This book is designed for all, who are beginner. This book has been prepared for the beginners to help them understand the basic to advanced concepts with example of HTML in hindi language. This EBook will give you quick description of all HTML tags. The purpose of this EBook to help you in improving your skills and make you comfortable with HTML in Hindi language.

Html

SVAN HTML IN HINDI

Any [email protected] Page 1

SVAN HTML

IN

HINDI

●●●

Syed Viqar Ahmad Naqvi

SVAN Farrukhabad, India

SVAN HTML IN HINDI


SVAN Html in Hindi

Copyright © 2016 by Syed Viqar Ahmad Naqvi

All rights reserved. No part of this work may be reproduced or transmitted in any form

or by any means, electronic or mechanical, including photocopying, recording, or by

any information storage or retrieval system, without the prior written permission of the

copyright owner and the publisher.

Trademarked names may appear in this book. Rather than use a trademark symbol

with every occurrence of a trademarked name, we use the names only in an editorial

fashion and to the benefit of the trademark owner, with no intention of infringement of

the trademark.

Lead Editors: Syed Viqar Ahmad Naqvi

Distributed to the book trade worldwide by Syed Viqar Ahmad Naqvi

e-mail [email protected]

For information on translations, please contact

e-mail [email protected]

The information in this book is distributed on an “as is” basis, without warranty.

Although every precaution has been taken in the preparation of this work, the author

shall not have any liability to any person or entity with respect to any loss or damage

caused or alleged to be caused directly or indirectly by the information contained in

this book.

SVAN HTML IN HINDI


This book is dedicated to

Indian Student or those

who really want to be

a

Professional Developer

SVAN HTML IN HINDI


Index

Of

Contents

SVAN HTML IN HINDI


Table of Contents

HTML ka Parichay (Introduction of HTML)

Hypertext

Markup Language

Itihas (History)

Tim Berners-Lee

HTML ke softwares

HTML ko start karna

Save and Run Html code

HTML ke program ko notepad me likhna

HTML ke program ko save kaise kaeren

Html Tag

Html Tag Example

Html Tag <html>

Head Tag <head>

Title Tag <title>

Body Tag <body>

Heading Tag <h>

Paragraph Tag <p>

Bold Tag<b>

Italic Tag <i>

Underline Tag <u>

Unclosed Html Tags

Break Tag <br>

Horizontal Rule Tag <hr>

Image Tag <img >

Html Formatting

SVAN HTML IN HINDI


Bold Text

Italic Text

Underline Text

<Strike> Element

<Mark> Element

Superscript Element <Sup>

Subscript Element <Sub>

<Del> Element

<Big> Element

<Small> Element

Docotype

Html Comment

Multiline Comment

Structure of Html Program

Head Part

Body Part

Html List

Ordered List <OL>

Type Attribute

Start Attribute

Unordered List <UL>

Type Attribute

Description List <DL>

Hyperlinks

Html Hyperlinks

Href Attribute

SVAN HTML IN HINDI


Target Attribute

Image as Link

Style Attribute

Html Style

Text Color

Text Font

Font Size

Text Alignment

Table

<tr> tag

<td> tag

<th> tag

Attribute of table

Border

Colspan

Rowspan

Id

Html Table Tags

Cellspacing and Cellpadding Attribute

Height & Width Attribute

BGColor Attribute

Header, Footer and Body Elements

<thead>

<tfoot>

<tbody>

Html Image

SVAN HTML IN HINDI


Image tag ke Attribute

Src

Alt

Title

Height

Width

Marquee

Behavior

Bgcolor

Direction Attribute

Height

Width

Hspace

Loop

Size

Time Attribute

HTML Blocks

Block Level Elements

Inline Elements

Grouping Element

Div Element

Span Element

Html Header

Global At t r ibutes

Event Attributes

Html Head Element

SVAN HTML IN HINDI


Head Tag

Title Tag

Meta Tag

Base Tag

Link Tag

Style Tag

Script Tag

Noscript Tag

Html Colors

Html Classes

CSS.class

Classing Inline Element

Classing Div Element

Html Div Layout

Html Table Layout

Html Frames

Frame Tag

Frameset Element

Html Character Encoding

SVAN HTML IN HINDI


HTML ka Parichay (Introduction of HTML)

HTML ki full form (Hyper Text Markup Language) hai.

Hypertext-Jo kisi text ko dusre text se joda (link) karta hai unko hypertext kehte hai. Hypertext

pages hyperlinks se jude hote hai yani ki jab hum mouse se kisi hyperlink par click karte hai to

wahan ek naya page khulta hai.

Markup Language-kisi bhi tag based language ko markup language kaha jata hai. Jaise ki

html, xml, sgml, gml etc.

Iska use webpage ke dastawaze (web page documents.) banane me kiya jata hai. Dusre

shabdo me ye keh sakte hai ki iska use website banana me kiya jata hai.

HTML ek programming language nahin balki ek Markup language hai. Iska matlab ye hai ki

humare document ke parts jaise -Headings, paragraphs, and lists ke bare me system ko batata

hai.

Itihas (History)

Tim Berners-Lee ko HTML ke Pita ke Roop me jana jata hai. (Tim Berners-Lee is known as

father of HTML). HTML ki khoj Tim Berners-Lee ne ki thi.

HTML ke softwares -HTML ke softwares Notepad, Notepad++, Dreamviewer, Frontpage hai.

Hum sabse pehle yahan notepad ka use karenge.

HTML Program ko likhne k liye hum Notepad use karenge.

HTML ko start karna- Html ko likhne ke liye sabse pehle hum notepad open karte hai ab is me

html ka tag <html> likhte hai taki notepad samajh jaye ki hum ko html ki coding start karni hai.

Save and Run Html code- Html code ke liye aap ko koi bhi web browser jaise Internet explorer,

Chrome, Mozilla fireox ki zarurat hoti hai. Iske liye aap ko alag se kisi software ki zarurat nahin

hoti hai.

HTML ke program ko notepad me likhna- Open notepad and write this code.

SVAN HTML IN HINDI


HTML ke program ko save kaise kaeren- HTML ke program ko hum .html extension me save

karte hai. (Use notepad)

1-Click on file menu

2-Click on save

3-Click on File name

File ka naam type karke (.) dot laga kar html likhe aur save button par click karen.

Jaise ki (abc.html)

File Save File name (abc.html) Click on Save

button.

SVAN HTML IN HINDI


Step 1 and 2-

Click on file menu Click on save

Step 3-

Click on File name type (abc.html) Click on Save button

Step 4-

Desktop par is type ka ek icon ban jayega

abc.html

SVAN HTML IN HINDI


Step 5-

Jab is icon (abc.html) ko double click karenge to ek internet explorer ka page open hoga jo

hamara first webpage hoga. (Note- Ye page abhi khali(blank) hoga)

Html Tag

Html Tag- Html tags ke 3 zaruri bhag (contain) hote hai. Opening tag, Content and Closing tag.

But some HTML tags are unclosed tags.

Aur jo tag jis se shuru (open) hoga usi tag se band (close) hoga. Jaise ki hum ne yahan html

<html> tag ka example diya hai.

(Note-Html tag hi html coding ka sabse pehla tag hai)

Example-< Opening tag > Content </ Closing tag>

< Html > Content </ Html >

Note: HTML case sensitive language nahin hai isliye hum Html Tags ko cchote ya bade letters

(lowercase or uppercase letters) me likh sakte hai.

SVAN HTML IN HINDI


HTML Tag Examples

Kucch Html tags ko humne neeche diya hai.

<Html> Tag- Html coding ko start karne ke liye sabse pehla tag (first tag) hai <html > tag. Kisi

bhi html code ko likhne ke liye <html> se shuru karte hai aur </html> par hi band (close) karte

hai.

<Head> Tag- Second Tag hai head tag <head>. Is tag mein Title, Script, Style aur Meta links

shamil hote hai. Head tag bhi <head> se shuru karte hai aur </head> par band karte hai. Head

tag html tag ke neeche aata hai. Head tag optional hota hai.

<html>

<head>

<title></title>

<meta content=”author” name=”svanhms”>

<script>

Function hello

{alert(“Hello how r u?”);}

</script>

</head>

<body>

<p>This is a book</p>

</body>

</html>

<Title>Tag- Title tag hamare page ke top par show hota hai aur kisi website ka title show karta

hai. Jab hum Google me kisi website ko search karte hai to Google search website ke title par hi

depend karta hai aur search result mein aata hai.

Title tag ko <title> se shuru karte hai aur </title> par band karte hai. Title tag ko head tag ke

neeche likha jata hai.Title tag bhi optional hota hai.

For example- <title>title name</title>

SVAN HTML IN HINDI


<Body>Tag- Body tag mein page ka background color aur font size rakhte hain. Body tag ko

<body> se shuru karte hai aur </body> par band karte hai.

Jaise: background color mein aap blue ki jagah koi bhi color likh sakte hain, font size mein aap

font ka size rakh sakte hai ki hume font ko kitna bada ya chhota rakhna hai.

Body k baad main tags start ho jate hain. Jaise Heading k liye <H> tag, Paragraph ke liye <P>

tag, Bold karne ke liye <B> tag, Undrline ke liye <U> tag aur Italic ke liye <i> tag.

Heading Tag <H>- Ye tag kisi webpage ki heading banane ke liye use hota hai, Isko <H> se

likhte hai. Heading tag ko <h1> se shuru karte hai aur </h1> par band karte hai.

For example-<H1> Content </H1>

Ye 6 size k hote hai-(Jaisa ki hum upar bata chuke hai ki Html Tags ko cchote ya bade letters

dono me likha ja sakta hai).

<H1> ya <h1>

<H2> ya <h2>

<H3> ya <h3>

<H4> ya <h4>

<H5> ya <h5>

<H6> ya <h6>

Isme <h1> sabse bada heading size aur <h6> sabse chhota heading size hota hai.

For example-

<html>

<body>

<h1>This is a book.</h1>

</body>

</html>

Result-

SVAN HTML IN HINDI


For example-

<html>

<body>







</body>

</html>

Result-

SVAN HTML IN HINDI


Paragraph Tag <P>- Ye tag kisi webpage ke paragraph banane ke liye use hota hai, Isko <P>

se likhte hai.

For example-

<html>

<body>

<p>This is a book.</p>

</body>

</html>

Result-

Bold Tag <B>- Ye tag kisi webpage ke word ya sentence ko bold karne ke liye use hota hai,

Isko <B> se likhte hai.

For example-

<html>

<body>

<p>This is a<b> book.</b></p>

</body>

</html>

SVAN HTML IN HINDI


Result-

Italic Tag <i>- Ye tag kisi webpage ke word ya sentence ko italic karne ke liye use hota hai,

Isko <i> se likhte hai.

For example-

<html>

<body>

<i>This is a book.</i>

</body>

</html>

Result-

SVAN HTML IN HINDI


Underline Tag <U>- Ye tag kisi webpage ke word ya sentence ko Underline karne ke liye use

hota hai, Isko <U> se likhte hai.

For example-

<html>

<body>

<u>This is a book.</u>

</body>

</html>

Result-

Unclosed Html Tags

Some html tags ko close nahin kiya jata hai- Jaise ki break <br>, horizontal rule <hr> aur image

<img> etc.

Break Tag- Isko sentence ki line break ke liye use karte hai. Isko<br> se likhte hai.

For example-

<html> <body> <p>This one is a must to be in fair for all book lovers in<br> the city. Second national book fair invites all book lovers across the city to come.</p> <h1>This one is a must to be in fair<br> for all book lovers in the city. Second national book fair invites all book lovers across the city to come.</h1>

SVAN HTML IN HINDI


</body> </html> Result-

Horizontal Rule Tag- Isko webpage par horizontal rule ke liye use karte hai. Isko <hr> se likhte

hai.

For example- <hr>

<html>

<body>

<h3>HR Tag</h3>

<hr align=left width=100 size=10>

<hr align=center width=200 size=20>

<hr align=right width=300 size=30>



</body>

</html>

SVAN HTML IN HINDI


Result-

Image Tag- Webpage me kisi image or photo ko dikhane ke liye img tag ka use karte hai. Isko

<img> se likhte hai.

For Example-

<html> <body> <img src="C:\Users\SVAN\Pictures\2016.jpg"> </body> </html>

Result-

SVAN HTML IN HINDI


Html Formatting

Html Formatting ka use hum apne webpage ko behtar rang roop dene ke liye karte hai . Iske

liye html me bahut se formatting tag diye gaye hai. Jinka use hum text ko bold, underline aur

italic karne me karte hai.

Bold Text- Agar aap kisi text ko bold karna chahte hai to <b> tag ka use kare. Apne text ko in

dono tag ke andar likhe<b>Content</b>. Aap dekhenge ki webpage par aapka likha text bold

dikhayi de raha hai.

Jaise hum neThis is a book sentence me book ko bold kiya hai.

For Example-

<html>

<body>

<p>This is a <b>book.</b></p>

</body>

</html>

Result-

Italic Text- Agar aap kisi text ko italic karna chahte hai to <b> tag ka use kare. Apne text ko in

dono tag ke andar likhe<i>Content</i>. Aap dekhenge ki webpage par aapka likha text italic

dikhayi de raha hai.

SVAN HTML IN HINDI


For Example-

<html>

<body>

<p><i>This is a book.</i></p>

</body>

</html>

Result-

Underline Text- Agar aap kisi text ko underline karna chahte hai to <b> tag ka use kare. Apne

text ko in dono tag ke andar likhe<u>Content</u>. Aap dekhenge ki webpage par aapka likha

text underline me dikhayi de raha hai.

For Example-

<html>

<body>

<p><u>This is a book.</u></p>

</body>

</html>

SVAN HTML IN HINDI


Result-

<Strike> Element- Strike element content par ek patli line ko dikhane ke liye use kiya jata hai.

HTML <strike> element is used to show a thin line on the content.

For Example-

<html>

<body>

<p><strike>This is a book</strike></p>

</body>

</html>

Result-

SVAN HTML IN HINDI


<Mark> Element- Mark element ka use content ko mark karne ke liye hota hai

For Example-

<html>

<body>

<p><strike>This is a book.</strike></p>

</body>

</html>

Result-

Superscript Element <Sup>- Sup element ka use ek text ko dusre text ke upar dikhane ke liye

kiya jata hai.

For Example-

<html>

<body>

<p>This is a <sup>book</ sup></p>

<h1>H<sup>2</sup></h1>

<h1>A<sup>2</sup>-B<sup>2</sup></h1>

</body>

</html>

SVAN HTML IN HINDI


Result-

Suberscript Element <Sub>- Sub element ka use ek text ko dusre text ke neeche dikhane ke

liye kiya jata hai. Text ko subscript karne ke liye kiya jata hai.

For Example-

<html>

<body>

<p>This is a<sub> book.</ sub></p>

<h1>H<sub>2</sub>O</h1>

</body>

</html>

Result-

SVAN HTML IN HINDI


<Del> Element- Del element ka use delete text ko dikhane ke liye kiya jata hai. Is ka use text

galat hai ya use karne ke yogya nahin (not usable) hai.

For Example-

<html>

<body>

<p>This is a<del>book</ del></p>

</body>

</html>

Result-

<Big> Element- Big element ka use text ka size bada karne ke liye kiya jata hai.

For Example-

<html>

<body>

<p><big>This is a book</ big></p>

</body>

</html>

SVAN HTML IN HINDI


Result-

<Small> Element- Small element ka use text ka size cchota karne ke liye kiya jata hai.

For Example-

<html>

<body>

<p><small>This is a book</ small></p>

</body>

</html>

Result-

SVAN HTML IN HINDI


Doctype

Doctype hume html dcumnt ka type batata hai aur ye html coding me sabse upar (top) par hota

hai aur iska use XML dastawaze (XML documents) banane me bhi kiya jata hai. Lekin ye html

me optional hota hai. Kyoki ye html element nahin hai.

For Example-

<!doctype html>

Html Comment- Comment ka use hum comment karne ke liye karte hai. Jab hum html ki

coding karte hai to humne kis code ka use kis purpose ke liye kiya hai isko samajhne

(understande) ke liye hum comment ka use karte hai. Comment humare webpage par nahin

dikhayi deta hai. Isko likhne ke liye hum  ka use karte hai.



For Example 1-

<html>

<body>



<p>This is a book.</p>

</body>

</html>

Result-

SVAN HTML IN HINDI


Multiline Comment- Multiline comment ka use hum ek se adhik lines ko comment karne ke liye

karte hai. (Same as comment)

For Example 2-



<html>

<body>



<p>This is a book.</p> 

<p>This is my book.</p>

</body>

</html>

Result-

Comment ko acche se samjhne ke liye ye example dekhe.

For Example 3-

<html>

<body>

<h1>This is my book.</h1>

SVAN HTML IN HINDI


<p>This is my book.</p> 

<p><b>This is my book.</b></p> 

</body>

</html>

Result-

Structure of Html Program

Html program k 2 part hote hai.

1-Head part

2-Body part

Jaisa hum ne neeche picture me diya hai.

SVAN HTML IN HINDI


Head Part- Head part ka use karke aap webpage se related ye jankari de sakte hai.

Webpage ka title.

Webpage ke bare me (Discription about that page).

Webpage ke andar kya content hai (Aap ka webpage kis liye bana hai)

Webpage ko kisne (author name) banaya hai.

Webpage ko refresh kitne time par kar sakte hai.

Webpage kab expire hoga.

Webpage ko google search engine me laya jaye ya nahin. Usk liye keyword banana.

(Note- In sab cheezo ko jodne ke liye hum <meta>tag ka use karte hai)

Body Part- Body part me hum webpage ki vastavik jankari (actual information) shamil karte hai.

SVAN HTML IN HINDI


Html list

Html list ka use kisi text ko list format me lagane ke liye kiya jata hai. Html me list ko 3 type se

bana sakte hai.

Ordered List <OL>

Unorderd List <UL>

Description List <DL>

Ordered List <OL>- Isko numbered List bhi kehte hai. Iska use hum kisi text ko number format

me dikhane ke liye karte hai. Jaise 1 se 10 tak ki ginti ya A se Z tak ke naam.

For Example-

<html>

<body>

<ol>

<li> Toyota</li>

<li> Honda</li>

<li> Maruti</li>

</ol>

</body>

</html>

Result-

SVAN HTML IN HINDI


Type Attribute- Aap ordered list me bhi different type (like-numbers, letters,symbols aur roman

numbers) ki list bana sakte hai iske liye aap ko type attribute ka use karna hoga.

By deafault ye number 1 values ko show karta hai.

For Example-

<html>

<body>

<ol type=a>

<li> Toyota</li>

<li> Honda</li>

<li> Maruti</li>

</ol>

</body>

</html>

Result-

Start Attribute- Aap ordered list jahan se chahe wahan se number start karne ke liye start

attribute ka use kar sakte hai.

For Example-

<html>

<body>

<ol type=1 start=5>

SVAN HTML IN HINDI


<li> Toyota</li>

<li> Honda</li>

<li> Maruti</li>

</ol>

</body>

</html>

Result-

Unorderd List <UL>- Isko bulleted List bhi kehte hai. Iska use hum kisi text ko bullet format me

dikhane ke liye karte hai. Isme line se pehle ek bullet or Dot (.) laga hoga.

For Example-

<html>

<body>

<ul>

<li> Toyota</li>

<li> Honda</li>

<li> Maruti</li>

</ul>

</body>

</html>

Result-

SVAN HTML IN HINDI


Type Attribute- Aap unordered list me type attribute ka use karke alag alag tarah ke symbols

use kar sakte hai. By default ye disc me hi hota hai. Lekin aap circle, square and disc kisi type

ka use kar sakte hai.

For Example-

<html>

<body>

<ul type= circle>

<li>Toyota</li>

<li>Honda</li>

<li>Maruti</li>

</ul>

<ul type= square>

<li>Toyota</li>

<li>Honda</li>

<li>Maruti</li>

</ul>

</body>

</html>

SVAN HTML IN HINDI


Result-

Description List or Definition List <DL>- Definition list sabse best tarika hai apne list ko

dikhane ka, Phir chahe wo kisi ke name ki list ho ya koi dictionary ki list.

Description list detail me batati hai ki humari list me kya kya hai. Description list ko <dl>, <dt>

aur <dd> tag ka use karke banaya jata hai.

<dl>- Define Description List

<dt>- Define Term

<dd>- Define Description of Term

For Example-

<html>

<body>

<dl>

<dt>Front End</dt>

<dd>Html</dd>

<dd>Html 5</dd>

<dd>CSS</dd>

<dt>Back End</dt>

<dd>PHP</dd>

SVAN HTML IN HINDI


<dd>SQL</dd>

<dd>Asp.Net</dd>

</dl>

</body>

</html>

Result-

Hyperlinks

Html Hyperlinks- Html me hyperlink ka use ek page se dusre page ko link karne ke liye hota

hai.

Hyperlink ko banana ke liye <a>---</a>tag ka use hota hai. <a> tag ke attributes href aur target

hote hai.

Href: href attribute kisi webpage ka pata lagane ke liye hota hai. Jaise www.----.com/html

Target: target ka use kisi link kiye document ko webpage me new window me kholne ya same

window me khole ke liye hota hai.

For Example-

<html>

<body>

Link open in same window <a href=”#” target=”_top”>Click Here</a>

Link open in new window <a href=”#” target=”_blank”>Click Here</a>

http://www.----.com/html

SVAN HTML IN HINDI


</body>

</html>

Result-

Image as Link- Html me hum kisi image ko link ki tarah bana sakte hai jab hum image par click

karte hai to hum ko image se juda page open hota hai.

For Example-

<html>

<body>

<html>

<body>

<a href="E:\SVAN\Image as Link.html" target=”_top”><img src="E:\SVAN\Home.gif"

target=”_blank”></a>

</body>

</html>

Result-

SVAN HTML IN HINDI


Style Attribute

Html Style- Hum html me background color, text color aur text size change karne ke liye style

attribute ka use karte hai. Har html element ka ek default style hota hai. Default style me html

webpage me text ka color black, background ka color white aur text ka size 16px hota hai.

Syntax-

Style=”Proprety: value”

For Example-

<html>

<body>

<p style=”color: blue ;”>This is a book.</p>

</body>

</html>

Result-

SVAN HTML IN HINDI


Text color: Text color property text ke color ko batata hai.

Text font: Font-family property font ko batata hai.

Font size: Font size property text ke size ko batata hai.

Text alignment: The text-align property ke alignment ko batata hai. Webpage me text

horizontal rakhna hai ya vertical.

For Example-

<html>

<body>

<h1 style=font-size:20px>This is a book.</h1>

<h1 style=font-color:red>This is a book.</h1>

<h1 style=font-family:courier>This is a book.</h1>

<h1 style=text-align:center>This is a book.</h1>

</body>

</html>

Result-

SVAN HTML IN HINDI


Table

Table- Table ka use hum apne data ko row aur column me arrange karne ke liye karte hai.

Html me table banane ke liye <table> tag ka use hota hai. Ek complete table banane ke liye

hum <tr>,<td> aur <th> tag ka use karte hai.

<tr> tag-<tr>tag ka use hum kisi table ko 2 row me batne ke liye karte hai.

<td> tag-<td>tag ka use hum kisi table ke row ko table data banane ke liye karte hai.

<th> tag-<th>tag ka use hum kisi table ke row ko table heading banane ke liye karte hai.

SVAN HTML IN HINDI


Attribute of table-

Border- Border attribute table aur table ke cell ke charon taraf ek border bana deta hai.

Colspan- Colspan attribute table ke columns ki ginti batata hai. Aur <td> tag ke ander use hota

hai.

Rowspan- Rowspan attribute table ke row ki ginti batata hai. Aur <td> tag ke ander use hota

hai.

Id- Id attribute table ke liye ek unique id deta hai.

<meta name="description"content="An HTML table arranges the text, images, forms,

form fields, links into row and column of cells."/>

Html Table Tags-

Sr. No Tag Description 1 <table> Ye table ko batata hai 2 <tr> Ye table ki row ko batata hai 3 <td> Ye table ke data ko batata hai jo row ke andar

hota hai 4 <th> Ye table ki heading ko batata hai jo row ke andar

hoti hai 5 <caption> Ye table ke caption ko batata hai 6 <colgroup> Ye table ki formatting me ek ya ek se zyada

column ko batata hai 7 <col> Ye <colgroup> element ke sath use hta hai aur

column ki properties ko batata hai. 8 <tbody> It is used to group the body content in a table 9 <thead> It is used to group the header content in a table 10 <tfooter> It is used to group the footer content in a table

For Example-

<html>

<body>

<table>

<tr><th> Subject </th><th>Marks</th></tr>

SVAN HTML IN HINDI


<tr><td> English</td><td>90</td></tr>

<tr><td>Hindi</td><td>98</td></tr>

<tr><td>Math</td><td>99</td></tr>

</table>

</body>

</html>

Result-

Table Example me border ka use-

For Example-

<html>

<body>

<table border=”1px”>



<tr><td> Hindi</td><td>98</td></tr>

<tr><td> Math</td><td>99</td></tr>

</table>

</body>

SVAN HTML IN HINDI


</html>

Result-

Colspan Attribute- Aap do columns ko ek column me merge kar sakte hai.

For Example-

<html>

<body>

<table border="1">

<tr>

<th> Student Id </th><th colspan="2"> Name </th><th> Marks</th>

</tr>

<tr>

<td> 001 </td><td>Viqar</td><td>Ahmad</td> <td>90</td>

</tr>

<tr>

<td> 002 </td> <td>Suraj</td> <td>Gupta</td> <td>98</td>

</tr>

<tr>

<td> 003 </td> <td>Pratibha</td> <td>Kumari</td> <td>99</td>

SVAN HTML IN HINDI


</tr>

</table>

</body>

</html>

Result-

Rowspan Attribute- Aap do rows ko ek row me merge kar sakte hai.

For Example-

<html>

<body>

<table border="1">

<tr>

<th> Order </th> <th>Customer</th><th>Marks</th>

</tr>

<tr>

<td rowspan="2">001</td> <td> Viqar </td><td>90</td>

</tr>

<tr>

<td>Suraj</td><td>98</td>

SVAN HTML IN HINDI


</tr>

<tr>

<td> 003 </td><td>Pratibha</td><td>99</td>

</tr>

</table>

</body>

</html>

Result-

Table Attributes-

Cellspacing and Cellpadding Attribute- Html me cellspacing aur cellpadding ka use table ke

cells me space (gap) dene me use kiya jata hai.

Cellpadding ka use cell border aur cell ke contents ke beech space dene me kiya jata hai. Jabki

Cellspacing ka use border ki width badane ya kam karne me kiya jata hai.

For Example-

<html>

<body>

<table border=1px cellspacing=10 cellpadding=10>

SVAN HTML IN HINDI




<tr><td>Hindi</td><td>98</td></tr>

<tr><td>Math</td><td>99</td></tr>

</table>

</body>

</html>

Result-

Height & Width Attribute- Html me height aur width attribute ka use kisi table ki height aur

width ko badane ya kam karne me kiya jata hai.

For Example-

<html>

<body>

<table border=1px height=200 width=300>



<tr><td> Hindi</td><td>98</td></tr>

<tr><td> Math</td><td>99</td></tr>

SVAN HTML IN HINDI


</table>

</body>

</html>

Result-

Table backgrounds attribute- Aap apni html table me background color aur picture set kar

sakte hai.

For Example 1-

<html>

<body>

<table background="E:\SVAN\Mic.jpg" width=500 height=300 border=1>

<tr>

<th>Name</th><th>Class</th><th>City</th>

</tr>

<tr>

<td>Ayaan</td><td>10th</td><td>Delhi</td>

</tr>

<tr>

<td>Aman</td><td>12th</td><td>Delhi</td>

</tr>

<tr>

SVAN HTML IN HINDI


<td>Haider</td><td>12th</td><td>Delhi</td>

</tr>

</table>

</body>

</html>

Result-

BGColor Attribute- Iska use table me ya table ke ek cell me background color set karne

ke liye kiya jata hai. Yahan hum ne BGColor ke kucch example diye hai.

For Example 1-

<html>

<body>

<table bgcolor=yellow border=1 width=300 height=200>

<tr>


</tr>

<tr>


</tr>

<tr>


</tr>

<tr>


</tr>

</table>

</body>

SVAN HTML IN HINDI


</html>

Result-

Second Example me hum ne table ke ek Cell ka color change (yellow) kiya hai. (Jahan par

Aman Likha hai)

For Example 2-

<html>

<body>

<table border=1 width=300 height=200>

<tr>


</tr>

<tr>


</tr>

<tr>

<td bgcolor=yellow >Aman</td><td>12th</td><td>Delhi</td>

</tr>

<tr>


SVAN HTML IN HINDI


</tr>

</table>

</body>

</html>

Result-

Third Example me hum ne table ke border ka color change (red) kiya hai.

For Example 3-

<html>

<body>

<table bgcolor=yellow bordercolor=red border=3 width=300 height=200>

<tr>


</tr>

<tr align=center>


</tr>

<tr align=center>

SVAN HTML IN HINDI



</tr>

<tr align=center>


</tr>

</table>

</body>

</html>

Result-

Fourth Example me hum ne table ke border aur Cells ke border ka color change (red) kiya hai.

For Example 4-

<html>

<body>

<table bgcolor=yellow bordercolor=red border=3 width=500 height=300>

<tr bordercolor=red>


</tr>

<tr align=center bordercolor=red>


SVAN HTML IN HINDI


</tr>



</tr>



</tr>

</table>

</body>

</html>

Result-

Header, Footer and Body elements

Html table ke 3 e lement hote hai <thead>,<t foot> aur <tbody>jo k is i tab le ko3

bhag me div ide karne ke kaam aate hai.

<thead>: Ye element table ke liye ek header banata hai.

<tfoot>: Ye element table ke liye ek footer banata hai.

SVAN HTML IN HINDI


<tbody>: Ye element table ki body banata hai aur table ke content ko apne andar rakhta hai.

For Example-

<html>

<body>

<table width="400" height="150" border="1">

<thead align=center>

<tr><th>

This is the header of table.</th>

</tr>

</thead>

<tbody>

<tr>


</tr>

<tr align=center>


</tr>

<tr align=center>


</tr>

<tr align=center>


</tr>

</tbody>

<tfoot align=center>

<tr>

SVAN HTML IN HINDI


<td>This is the footer of table. </td>

</tr>

</tfoot>

</table>

</body>

</html>

Result-

Html Image

Jaisa ki hum jante hai ki image ke bahut sare extentions (.jpg, .gif, .png) hote hai, Jisko aap

apne html code me add kar sakte hai aur apne webpage par dikha sakte hai.

Html Image- Webpage me kisi image or photo ko dikhane ke liye image tag ka use karte hai.

Isko <img> se likhte hai. Html me image tag ko close nahin kiya jata hai. Image tag ke attribute

neeche diye gaye hai (image tag have following attributes).

Image tag ke Attribute-

Src- Src ka use hum source file (image) ko lagane ke liye karte hai. Jahan aap image ko

dikhana chahte hai. Src attribute image ki URL ko batata hai.

SVAN HTML IN HINDI


For Example-

<img src=”URL of image”>

Alt- Alt attribute ka use hum alternate text ko dikhane ke liye karte hai jab browser image ko

slow connection ya error ki wajah se nahin dikha pata. To alt attribute me jo naam hum dete hai

wo search engine ko image ko pane me madad karta hai.

Title- Title attribute ka use kisi image ke title ko batane me kiya jata hai jo hamari website par

dikhayi deti hai. Jab hum mouse ko image par kucch second ke liye rakhte hai tab us image ka

title show hota hai.

Height- Image ki height ke liye use hota hai. Aap image ki height ko bada aur ghata sakte hai.

Width- Image ki width ke liye use hota hai. Aap image ki width ko bada aur ghata sakte hai.

For Example-

<html>

<body>

<img src="C:\Users\SVAN\Pictures\2016.jpg">

</body>

</html>

Result-

For Example-

<html>

<body>

SVAN HTML IN HINDI


<img src="C:\Users\SVAN\Pictures\2016.jpg" alt="Picture of New Year 2016">

</body>

</html>

Result-

For Example-

<html>

<body>

<img src="C:\Users\SVAN\Pictures\2016.jpg" alt="Picture of New Year 2016" title="Happy New

Year">

</body>

</html>

Result-

SVAN HTML IN HINDI


For Example-

<html>

<body>

<img src="C:\Users\SVAN\Pictures\2016.jpg" alt="Picture of New Year 2016" title="Happy New

Year" height=150 width=300>

</body>

</html>

Result-

SVAN HTML IN HINDI


Marquee

Marquee- Marquee element ka use hum kisi text ya kisi image ko scroll karne ke liye karte hai.

Isko <marquee> se likhte hai aur </marquee> se band karte hai.

Yahan hum marquee ke attributs ko bata rahe hai.

Behavior- Ye marquee ko scroll kis direction me karna batata hai. Isko slide ya

alternate scroll rakha ja sakta hai.

Bgcolor- Bgcolor marquee ke background color ko batata hai.

Bgcolor=blue

Direction Attribute- Direction attribute ka use marquee ke direction ko batata hai ki kis

direction me hum apne webpage ke text ya image ko scroll karenge. Marquee ke four direction

value hoti hai- let, right, up and down.

Height-Maqruee ki height batata hai jaise ki height=10 ya height=”10%”

Width- Maqruee ki width batata hai jaise ki width=10 or width="10%".

Hspace-Hspace marquee ke charon aur horizontal space ko batata hai.

Jaise hspace=10 or hspace="20%".

Loop- Ek marquee ko kitni bar webpage par display hona hai. Iski default value INFINITE hoti

hai jiska matlab iska koi end nahin hai. Agar aap loop=”5” rakhte hai to ye webpage me 5 bar

display hoga.

For Example-

<html>

<body>

<marquee direction="right">This will be scroll left to right.</marquee>

<marquee direction="down">This will be scroll top to bottom.</marquee></body>

</html>

Result-

SVAN HTML IN HINDI


Size Attribute- HTML height and width attribute specifies the height and widht of marquee text

or image scrolling.

For Example-

<html>

<body>

<marquee direction="right" width="50%">This will be scroll only 50% width.</marquee>

<marquee direction="up" height="50%">This will be scroll only 50% height.</marquee>

</body>

</html>

Result-

SVAN HTML IN HINDI


Time Attribute- Html me <scrol lde lay>, <loop> aur <scro l lamount> at t r ibute ka

use t ime ka d if ference batane me hota hai .

For Example-

<html>

<body>

<marquee direction="right" scrollamount="50">This will be scroll fast.

</marquee>

<marquee direction="right" scrolldelay="200">This will be scroll slow.

</marquee>

<marquee direction="right" loop="5">This will be scroll only 5 times.

</marquee>

</body>

</html>

Result-

SVAN HTML IN HINDI


HTML Blocks

Html me block elements ka use (text, images, forms, links, tables etc.) ko batane me kiya jata

hai. Html me elements ko 2 categories me bata gaya hai.

Block Level Elements

Inline Elements

SVAN HTML IN HINDI


Block-Level Elements- Html me block level element hamsha nayi line se shuru hota hai aur

isme puri width uplabdh (available) hoti hai. Block level element ko band karne ke liye hamesha

ending tag ka use karna chahiye.

Yahan kucch block level elements ki list di ja rahi hai.

<p>

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ol>, <ul>, <hr>,<dl>

<table>, <form>,<pre>,<div>

<address>, <blockquote> ,<fieldset> ,<noscript>

For Example-

<html>

<body>

<p>This is the Block- level e lement.</p>

<p>This is the Block- level e lement star ts f rom new l ine.</p>

<h1>Another Block- level e lement conta ins.</h1>

</body>

</html>

Result-

Inline Elements- Inline element nayi line se shuru nahin hota hai. Inline element block level

element se alag hota hai.

SVAN HTML IN HINDI


Yahan kucch inline elements ki list di ja rahi hai.

<b>, <u>, <i>, <big>, <small>, <tt>

<abbr>, <acronym>, <cite>, <code>, <dfn>, <em>, <kbd>, <strong>, <samp>, <var>

<a>, <bdo>, <br>, <img>, <map>, <object>, <q>, <script>, <span>, <sub>, <sup>

<button>, <input>, <label>, <select>, <textarea>

For Example-

<html>

<body>

<p>This is the Block-level element which contains <b>inline element</b>.</p>

<p>This is the Block-level element which contains <a href="#">inline element</a>.</p>

<h1>Another Block-level element contains <small>inline element</small>.</h1>

</body>

</html>

Result-

Grouping Element- Html me 2 bahut hi important element hote hai jinko hum group me use

karte hai gruop element kehlate hai.

<div>

<span>

SVAN HTML IN HINDI


Div Element- Html me <div> element ka use webpage ke structure aur design layout ko

batane ke liye kiya jata hai. Is element ka use hum dusre html tag aur CSS style par bhi

karte hai.

Yahan kucch div elements ke example diye ja rahe hai.

For Example-

<html>

<body>

<div style="float:left; color:red; background-color:yellow; width:500px;">

<h4>This is first group</h4>

<p>Following is a list of vegetables</p>

<ul>

<li>Potato</li>

<li>Tomato</li>

<li>Ginger</li>

</ul>

</div>

<div style="color:black; background-color:green; width:500px; float:left;">

<h4>This is second group</h4>

<p>Following is a list of fruits</p>

<ul>

<li>Apple</li>

<li>Banana</li>

<li>Mango</li>

</ul>

</div>

</body>

</html>

SVAN HTML IN HINDI


Result-

Span Element- Span ek inline element hai. Aur ye html documents me group inline elements

me use hota hai. Is element ke use se block me koi visual change nahin hota hai lekin ye bahut

usefull hota hai jab CSS ke sath use kiya jata hai.

<span> aur <div> elements me difference ye ki <span> tag ko aap inline elements ke sath use

kiya jata hai jabki <div> tag ko block level elements ke sath use kiya jata hai.

Yahan kucch span elements ke example diye ja rahe hai.

For Example-

<html>

<body>

<p>A global co l lect ion of <span style="color : red; font-s ize:1.3em;"> network

</span>

of computers wi th users a l l over the <span style="color :Green;font -

s ize:1.3em;">wor ld.</span>.</p>

</body>

</html>

Result-

SVAN HTML IN HINDI


HTML HEADER

Html Header- Html me header kisi html document ke section ka head hota hai. Ek html

document me kayi header ho sakte hai. Html header element simply heading ko batata hai, ye

heading h1 se le kar h6 tak sakti hai. Aam tour par ye heading kisi table ke contents, icon, logo

ya kisi search form ki ho sakti hai.

Html me head aur header ye dono alag alag hai. In dono ka html me different role hota hai. Ek

header tag ko <footer>tag, <address> tag ya dusre kisi <header> element ke sath nahin rakha

ja sakta.

(Note-Html me head aur header ye dono alag alag hai.)

For Example-

<html>

<body>

<header>

<h1>This is the heading of th is document.</h1>

<p>This is the paragraph of th is heading.</h1>

</header>

</body>

</html>

SVAN HTML IN HINDI


Result-

Header e lement html 5 me naya hai .

Global Attr ibutes- Html me header tag bhi g lobal at t r ibute ko support karta

hai. Zyadatar browser me header e lement k i default va lue b lock d ikhaye ga.

For Example:

<html>

<body>

<article>

<header style="display:block;">

<h1>This is the heading of this document.</h1>

<p>This is the paragraph of this heading.</p>

</header>

</article>

</body>

</html>

Result-

SVAN HTML IN HINDI


Event Attributes- Html hader tag event attributes ka bhi support karta hai. Zyadatar browser <header> element ki default value- display:block dikahte hai.

HTML <header> tag a lso supports the Event At t r ibutes.

Most browser wi l l d isp lay the <header> e lement wi th the default va lue-

d isplay:b lock.

For Example-

<!Docotype html>

<html>

<head>

<title>HTML Header</title>

</head>

<body>

<article>

<header style="display:block;">

<h1>This is the heading of this document.</h1>

<p>This is the paragraph of this heading.</p>

</header>

</article>

</body>

SVAN HTML IN HINDI


</html>

Result-

HTML HEAD ELEMENT

Head Tag - Second Tag hai head tag <head>. Is tag mein Title, Script, Style aur Meta, link,

Base, nonscript shamil hote hai. Head tag bhi <head> se shuru karte hai aur </head> par band

karte hai. Head tag html tag ke neeche aata hai. Head tag optional hota hai.

<title>

<meta>

<link>

<base>

<style>

<script>

<noscript>

For Example:

<html>

<head>

<title></title>

<meta content=”author” name=”svanhms”>

<script>

Function hello

SVAN HTML IN HINDI


{alert(“Hello how r u?”);}

</script>

</head>

<body>

<p>This is a book</p>

</body>

</html>

Result-

Title Tag- Title tag hamare page ke top par show hota hai aur kisi website ka title show karta

hai. Jab hum Google me kisi website ko search karte hai to Google search website ke title par hi

depend karta hai aur search result mein aata hai.

Title tag ko <title> se shuru karte hai aur </title> par band karte hai. Title tag ko head tag ke

andar likha jata hai.Title tag bhi optional hota hai.

For Example:

<html>

<head>

<title>HTML Title Tag</title>

</head>

<body>

<h1>The title personality</h1>

SVAN HTML IN HINDI


</body>

</html>

Result-

Title hume ye kucch baten batata hai-

Meta Tag- Metadata data ke bare me data ko batata hai. Metadata data ke bare me information

deta hai.

Html me <meta>tag ka use webpage ke bare me kucch jankar i batane ke l iye

use k iya jata hai.

Meta tag ko <meta> se shuru karte hai aur </meta> par band karte hai. Meta tag ko head tag ke

andar likha jata hai.

Metadata page par d isplay nahin k iya jayega lek in ye machine parsable hogi.

<meta name="keywords" content="HTML, CSS, Meta tag">

Meta ke ye 5 valid attributes hote hai. Ye attributes unki property ya dusron ke mulya ki vyakhya

karte hai.

Name keyword, Content, Author, aur Generator

Ye sampatti ke mulya me shamil hai.

Ye character encoding ko batata hai.

Samagri visheshta ke mulya ke liye ek http header pradan karta hai.

Samagri visheshta ke maan ki vyakhya karne ke liye ek yojna banata hai.

SVAN HTML IN HINDI


Attribute Description Name Name me keywords, description, author, generator etc. Content Isme property ki value rehti hai. charset Isme character ki encoding ko batata hai. http-equiv Content attribute ke http header value ko batata hai. Scheme Content attribute ki scheme ko batata hai.

Name attributes kayi property ko shamil rakhta hai keywords, description, author, generator etc.

Keywords property webpage ke keywords ko batati hai.

For Example:

<html>

<head>

<title>HTML Meta Tag</title>

<meta name="keywords" content="HTML, Meta tag"/>

</head>

<body>

<p>HTML meta tag is used to define data about data.</p>

</body>

</html>

Result-

SVAN HTML IN HINDI


Base Tag - Html me base tag ka use ek webpage me shamil sabhi relative URLs ke liye base

URL ka pata lagane ke liye kiya jata hai.

Base tag ko <base> se shuru karte hai aur </base> par band karte hai. Base tag ko bhi head

tag ke andar likha jata hai.

For Example:

<html>

<head>

<base href="http://www.svanhms.com/" />

</head>

<body>

<p>Learn HTML from <a href="E:\HTML & HTML5\HTML.html" title="HTML Tutorial">HTML

Tutorial</a></p>

</body>

</html>

Result-

Link Tag- Html me link tag ka use current document aur external document ke beech

relationship ko batata hai. Link <link> tag CSS aur Java Script file ko jodta hai.

Link tag ko <link> se shuru karte hai aur </link> par band karte hai. Link tag ko bhi head tag ke

andar likha jata hai.

For Example:

<html>

SVAN HTML IN HINDI


<head>

<title>HTML Link Tag</title>

<link rel="stylesheet" href="css/style.css" type="text/css">

</head>

<body>

<p><link> tag specifies relationship</p>

</body>

</html>

Result-

Style Tag- Style tag ka use html me apni website ko andaruni style dene ke liye kiya jata hai.

Style tag ko <style> se shuru karte hai aur </sty le>par band karte hai.

For Example:

<html>

<head>

<style>

h2.heading {

co lor :#000000;

SVAN HTML IN HINDI


font-s ize: 1.5em;

font- fami ly: Helvet ica;

word-spacing: 1px;

text-a l ign: lef t ;

}

p .para {

co lor :#00FF00;

font-s ize: 1.1em;

font- fami ly: Helvet ica;

le t ter-spacing: 1px;

word-spacing: 1px;

text-a l ign: lef t ;

}

</sty le>

</head>

<body>

<h2 c lass="heading">This is a heading</h2>

<p c lass="para">This is a paragraph </p>

</body>

</html>

Result-

SVAN HTML IN HINDI


Script Tag- Script tag ka use ek client side script jaise ki java script ko batane ke liye kiya jata

hai. Script tag ko <script> se shuru karte hai aur </script> par band karte hai.

For Example-

<html>

<body>

<p id="test"></p>

</body>

<script>

document.getElementById("test").innerHTML="Hello world!";

</script>

</html>

Result-

SVAN HTML IN HINDI


Noscript Tag- Html me noscript tag ka use users ke liye alternate content ko batane ke liye

hota hai. Jab browser script content ko support nahin karta hai tab noscript tag ki madad se us

content ko browser par display karata hai. Noscript tag <head> aur <body> dono tag me define

kiya jata hai.

Noscript tag ko <noscript> se shuru karte hai aur </noscript> par band karte hai.

Agar <noscript> tag ka use <head> element ke andar kiya jata hai tab <noscript> ke sath

<meta>,<link> aur <style> element ko shamil kiya jata hai.

For Example-

<html>

<body>

<p id="demo">Script tag</p>

<script>

document.getElementById("demo").innerHTML="Hello world!";

</script>

<noscript>Sorry, your browser does not support JavaScript.</noscript>

</body>

</html>

Result-

SVAN HTML IN HINDI


HTML COLORS

HTML Colors- Color ka use humari website ko rachnatmak (creative) aur prabhavi (effective)

banane ke liye bahut zaruri hai. Color se humari website ko ek new look milta hai. Jis tarah

colors ke bina zindagi veeran hai usi tarah website ke liye bhi color zaruri hote hai.

Hum apni website me text color, background color, link color, border color, alink aur vlink color

ka use kar sakte hai.

For Example 1:

<html>

<body bgcolor="green" text="red">


<p>This is a paragraph.</p>

</body>

</html>

Rsult-

SVAN HTML IN HINDI


For Example 2:

<html>

<body bgcolor="#66FF99">

<h1 style="color :ye l low; background:#9400D3;">This is a book.</h1>

<p>This is a paragraph.</p>

</body>

</html>

Rsult-

SVAN HTML IN HINDI


HTML CLASSES

Html Classes- Html me class attribute ka use html document me CSS style class banana ke

liye kiya jata hai. Aap har ek element ki CSS class style bana sakte hai. Html me class attribute

equal style <div> element ko batata hai.

.class- CSS.class sytle sabhi elements ko select karne ke sath uski class batata hai. Aap yahan

diye gaye syntax ko dekhe

Syntax-

.class-name {

property:value;

}

Upar diye gaye syntax me CSS sytle class me style property aur value ko bataya gaya hai.

.heading {

color:#000;

font-size: 1.5em;

font-family: Helvetica;

word-spacing: 1px;

text-align: left;

}

.para {

color:#CCC;

font-size: 1.1em;


letter-spacing: 1px;

word-spacing: 1px;

text-align: left;

SVAN HTML IN HINDI


}

Aap dekh sakte hai ki yahan 2 CSS style class banayi gayi hai jisme ek class heading aur dusri

class paragraph ki hai.

Aap webpage ke layout design karne ke liye bhi class ka use kar sakte hai. Aap har ek element

ke liye ek alag style use kar sakte hai.

For Example1-

<html>

<head>

<style>

h2.heading {

color:#000000;

font-size: 1.5em;


word-spacing: 1px;

text-align: left;

}

p.para {

color:#00FF00;

font-size: 1.1em;



word-spacing: 1px;

text-align: left;

}

</style>

</head>

SVAN HTML IN HINDI


<body>

<h2 class="heading">This is a heading</h2>

<p class="para">This is a paragraph </p>

</body>

</html>

Result-

Classing Inline Element- Html class attribute me inline element ko bhi use kiya ja sakta hai.

Aap CSS style class ke zariye style inline element ko bata sakte hai.

For Example-

<html>

<head>

<title>HTML CSS Style</title>

<style>

span.set {

color:blue;

background-color:red;

font-size: 1.2em;

SVAN HTML IN HINDI



word-spacing: 1px;

text-align: left;

}

a.link {

color: #000FFF;

display: inline-block;

background-color: Yellow;

font-size: 1.1em;



word-spacing: 1px;

text-align: left;

}

</style>

</head>

<body>

<p>HTML is short for <span class="set">Hyper Text Markup Language</span>.</h2>

<p>Tim Berners-Lee is known as <a class="link" href="#">father of HTML.</a></p>

</body>

</html>

Result-

SVAN HTML IN HINDI


Classing Div Element- Html me <div> element ka use webpage ke layout aur design banane

me kiya jata hai. Div ko batane ke liye <div> element me <id> attribute ka use kiya jata hai.

Aap div element ka use layout ke style dene me bhi kar sakte hai.

For Example-

<html>

<head>

<style>

div.list {

background-color:lightgreen;

color:red;

margin:20px;

padding:20px;

}

</style>

</head>

<body>

<div class="list">

<h3>This is first group of vegetables.</h3>

<p>Following is a list of vegetables</p>

<ul>

SVAN HTML IN HINDI


<li>Potato</li>

<li>Tomato</li>

<li>Ginger</li>

</ul>

</div>

<div class="list">

<h3>This is second group of fruits.</h3>

<p>Following is a list of fruits</p>

<ul>

<li>Apple</li>

<li>Banana</li>

<li>Mango</li>

</ul>

</div>

</body>

</html>

Result-

SVAN HTML IN HINDI


HTML DIV LAYOUT

Html Div Layout- Html me div element webpage ke layout banane ke liye CSS style ke sath

use kiya jata hai.Group html block elements ke liye div tag ko CSS style ke sath use kiya jata

hai.

Html div tag webpage me ek section ko batata hai.Aur sabse zyada div ka use kisi webpage me

layout design karne ke liye kiya jata hai.

Ek website kabhi bahut se sections me dikhayi deti hai (newspaper ki tarah). Heml me div

element webpage ko header, navigation, section, article, aside, footer me divide karne ke kaam

aata hai.

Html 5 new semantic elements webpage ke alag alag parts ko batata hai.

Header- Document ke header ko batata hai.

Nav- Document ke container ko batata hai.

Section- Document ke section ko batata hai.

Article- Defines a self-contained article.

Aside- Sidebar ki tarah ek alag container ko batata hai.

Footer- Document ke footer ko batata hai.

Detail- Document ke detail ko batata hai.

Summary- Detail ke liye ek header batata hai.

SVAN HTML IN HINDI


HTML Div Layout Elements- Html 5 me webpage ko alag alag parts me divide karne ke liye

kuch naye elements ka use hota hai. Jaise ki <header>,<nav>, <section>, <footer> etc.

For Example-

<html>

<head>

<style>

header{

background-color :b lack;

co lor :white;

height :100px;

padding-top:20px;

}

nav{

f loat : lef t ;

background-color :b lue;

height :100px;

width:100%;

padding-top:20px;

}

sect ion{

background-color :Orchid;

height :300px;

padding-top:20px;

}

footer{


SVAN HTML IN HINDI


color :white;

height :100px;

padding-top:20px;

}

</sty le>

</head>

<body>

<header>

<h2 style="color :white; text-a l ign:center;">Header</h2>

</header>

<nav>

<h2 style="text-a l ign:center;">Navigat ion</h2>

</nav>

<sect ion>

<h2 style="text-a l ign:center;">HTML</h2>

<p><b>HTML (Hyper Text Markup Language)</b> is the language used to

create web page documents. HTML is not a

<b>programming language</b> i t is a <b>markup language,</b> which means

i t is a system for ident i fy ing and descr ibing

the var ious components of a document such as headings, paragraphs, and

l ists.</p>

</sect ion>

<footer>

<h2 style="text-a l ign:center;">Footer</h2>

</ footer>

</body>

</html>

Result-

SVAN HTML IN HINDI


HTML Id Attribute- Html me div attributes <id> aur <class> dono attribute ko supports karta

hai.

Css file # symbol ke sath &tlid> ko batata hai

#id-name {

property:value;

}

#header{

color: #CCC;

background-color: #fff;

}

For Example-

<html>

<head>

<style>

#header{


co lor :white;

height :50px;

SVAN HTML IN HINDI


padding-top:10px;

padding-bot tom:10px;

}

#nav{

background-color :b lue;

height :100px;

padding-top:20px;

}

# lef t -nav{

width:200px;

f loat : lef t ;

background-color :Aqua;

co lor :b lack;

height :400px;

padding-top:20px;

}

#sect ion{


height :400px;

padding-top:20px;

co lor :b lack;

}

#footer {


co lor :white;

height :50px;

SVAN HTML IN HINDI


padding-top:10px;

padding-bot tom:10px;

}

</sty le>

</head>

<body>

<div id="header">

<h2 style="color :white; text-a l ign:center;">Header</h2>

</d iv>

<div id="nav">

<h2 style="text-a l ign:center;">Navigat ion</h2>

</d iv>

<div id=" lef t -nav">

<h2 style="text-a l ign:center;">Html</h2>

<h2 style="text-a l ign:center;">Css</h2>

<h2 style="text-a l ign:center;">Java Scr ipt</h2>

</d iv>

<div id="sect ion">







l ists.</p>

</d iv>

<div id="footer">

SVAN HTML IN HINDI


<h2 style="text-a l ign:center;">Footer</h2>

</d iv>

</body>

</html>

Result-

HTML TABLE LAYOUT

Html me <table> element ka use hum apne data ko row aur column me arrange karne ke liye

karte hai. Lekin kya aap jante hai ki <table> element ka use hum simple layout banane me bhi

kar sakte hai.

Ye tables row aur column me arrange hoti hai to aap jaise chahe waise layout me inko arrange

kar sakte hai.

For Example-

<!DOCTYPE html>

<html>

<head>

<t i t le>HTML Layout us ing Tables</t i t le>

SVAN HTML IN HINDI


<style>

table.header{

width:100%;

border :0px;


}

td.head{

border :0px;


co lor :#b5dcb3;

}

td.nav{

background-color :Aqua;

width: 20%;

height : 500px;

margin- lef t :50px;

}

td.sect ion{


}

td. footer{

border :0px;


co lor :#b5dcb3;

}

</sty le>

SVAN HTML IN HINDI


</head>

<body>

<table c lass="header">

<tr>

<td c lass="head" colspan="2">

<h1><center>Header</center></h1>

</ td>

</ t r>

<tr va l ign="top" width="50%" rowspan="2">

<td c lass="nav">

<ul sty le="margin- lef t :10px;">

< l i><b>Menu</b></ l i>

< l i>HTML</ l i>

< l i>CSS</ l i>

< l i>Java Scr ipt</ l i>

< l i>SQL</ l i>

< l i>Asp.net</ l i>

</u l>

</ td>

<td c lass="sect ion">






SVAN HTML IN HINDI



l ists.</p>

</ td>

</ t r>

<tr>

<td c lass="footer" co lspan="2"><center>2016 © Copyr ight</center></td>

</ t r>

</ table>

</body>

</html>

Result-

SVAN HTML IN HINDI


HTML FRAMES

Html Frames- Html me f rame browser k i window ko a lag parts me batne ka

kam karta hai jahan har part me ek a lag document f i le ko load kar sakte hai.

Frame Tag- HTML <f rame> tag ka use browser k i window ko d iv ide karne me

k iya jata hai.

Frameset- Html me <f rameset> f rame ka ek col lect ion hai.

Ek browser window ko alag alag parts me divide kiya gaya (Table ki tarah hi). Aap body tag ki

jagah par frameset tag ka use ek webpage ke liye kar sakte hai.

Frameset Element- Html me <frameset> element ka use <frame> elements me rakhne ke liye

hota hai. Aap browser window me ek se zyada frame bana sakte hai.

Frameset tag se kisi browser window ko divide karne ke liye 2 attribute ka use kiya jata hai.

1. Rows Attribute- Horizontal frame banana ke liye.

2. Cols Attribute- Vertical frame banana ke liye.

For Example-

<html>

<f rameset co ls="25%,50%,25%">

<f rame name=" lef t " src=" lef t_f rame.htm" />

<f rame name="center" src="main_f rame.htm" />

<f rame name="r ight" src="r ight_f rame.htm" />

<nof rames>

<body> Your browser does not support f rames. </body>

</nof rames>

</ f rameset>

</html>

Result-

SVAN HTML IN HINDI


HTML CHARACTER ENCODING

Html me charset ka use character encoding ko batane me kiya jata hai. Ek browser me page ko

sahi dhang se dikhane ke liye sahi character set ka pata hona chahiye.

Yahan kucch special international characters diye hai jinka special meaning hota hai. Ye

characters ki madad se charset (character encoding) ka support karte hai.

ASCII Encoding- Sabse pehle jab website ki shuruwat huyi thi tab ASCII (Amer ican

Standard Code For Informat ion Interchange) pehla character encoding tha. Ye achcha

tha kyoki isme 127 a lphanumer ic characters shamil they.

ASCII encoding numbers(0-9), let ters(A-Z, a-z) and specia l characters $ % @

. / * ( ) - ~ etc. ka support karta tha.

ANSI Encoding- ANSI (Amer ican Nat ional Standard Inst i tu te) window ke l iye

or ig inal encode tha.ANSI ko window-1252 ya CP-1252 Lat in character

encoding kaha jata hai.Ye 256 tarah ke character codes ko support karta hai. ISO 8859-1 Encoding- ISO 8859-1 encoding me Latin script se 191 characters shamil hote hai.

Ye html 4 ke liye default charset hota hai. Isme 256 alag tarah ke character codes shamil hote

hai 128 se 159 (hex 80 to 9F) ki range me.

UTF-8 Encoding- UTF-8 encodes me sab characters ya code ko Unicode kiya ja sakta hai.

SVAN HTML IN HINDI


Html 5 me UTF-8 ko default encoding me badal diya gaya hai. UTF-8 encoding variable-length

aur 8 bit code units ka use karta hai. Ye ASCII ki backward compatibility ke liye design kiya

gaya tha.

Ek character set ka use web browser me Html page ko sahi dhang se dikhane ke liye hota hai.

Character set ko <meta> tag me rakha jata hai.

HTML me UTF-8 charset ko likhne ke liye syntax-

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

HTML 5 me UTF-8 charset ko likhne ke liye syntax-

<meta charset=UTF-8">

SVAN HTML IN HINDI


Last but not

Least. There

is more…

SVAN HTML IN HINDI


svan html in hindi

Documents