Upload
syed-viqar-ahmad-naqvi
View
276
Download
25
Embed Size (px)
DESCRIPTION
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 langua
Citation preview
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
Any [email protected] Page 2
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
Any [email protected] Page 3
This book is dedicated to
Indian Student or those
who really want to be
a
Professional Developer
SVAN HTML IN HINDI
Any [email protected] Page 5
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
Any [email protected] Page 6
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
Any [email protected] Page 7
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
Any [email protected] Page 8
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
Any [email protected] Page 9
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
Any [email protected] Page 10
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
Any [email protected] Page 11
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
Any [email protected] Page 12
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
Any [email protected] Page 13
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
Any [email protected] Page 14
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
Any [email protected] Page 15
<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
Any [email protected] Page 16
For example-
<html>
<body>
<h1>This is a book.</h1>
<h2>This is a book.</h2>
<h3>This is a book.</h3>
<h4>This is a book.</h4>
<h5>This is a book.</h5>
<h6>This is a book.</h6>
</body>
</html>
Result-
SVAN HTML IN HINDI
Any [email protected] Page 17
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
Any [email protected] Page 18
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
Any [email protected] Page 19
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
Any [email protected] Page 20
</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>
<hr align=center width=400 size=40>
<hr align=center width=500 size=50>
</body>
</html>
SVAN HTML IN HINDI
Any [email protected] Page 21
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
Any [email protected] Page 22
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
Any [email protected] Page 23
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
Any [email protected] Page 24
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
Any [email protected] Page 25
<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
Any [email protected] Page 26
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
Any [email protected] Page 27
<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
Any [email protected] Page 28
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
Any [email protected] Page 29
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 <!-- aur --> ka use karte hai.
<!--Apna comment likhe -->
For Example 1-
<html>
<body>
<!-- html comment -->
<p>This is a book.</p>
</body>
</html>
Result-
SVAN HTML IN HINDI
Any [email protected] Page 30
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 Multiline comment-->
<html>
<body>
<!-- html Multiline comment-->
<p>This is a book.</p> <!--Ye ek kitab hai.
Yeh meri kitab hai-->
<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> <!--Heading 1 -->
<h2>This is my book.</h2> <!--Heading 2 -->
<h3>This is my book.</h3> <!--Heading 3 -->
SVAN HTML IN HINDI
Any [email protected] Page 31
<p>This is my book.</p> <!-- Paragraph-->
<p><b>This is my book.</b></p> <!-- Paragraph with bold text-->
</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
Any [email protected] Page 32
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
Any [email protected] Page 33
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
Any [email protected] Page 34
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
Any [email protected] Page 35
<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
Any [email protected] Page 36
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
Any [email protected] Page 37
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
Any [email protected] Page 38
<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>
SVAN HTML IN HINDI
Any [email protected] Page 39
</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
Any [email protected] Page 40
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
Any [email protected] Page 41
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
Any [email protected] Page 42
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
Any [email protected] Page 43
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
Any [email protected] Page 44
<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><th> Subject </th><th>Marks</th></tr>
<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>
SVAN HTML IN HINDI
Any [email protected] Page 45
</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
Any [email protected] Page 46
</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
Any [email protected] Page 47
</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
Any [email protected] Page 48
<tr><th> Subject </th><th>Marks</th></tr>
<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-
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><th> Subject </th><th>Marks</th></tr>
<tr><td> English</td><td>90</td></tr>
<tr><td> Hindi</td><td>98</td></tr>
<tr><td> Math</td><td>99</td></tr>
SVAN HTML IN HINDI
Any [email protected] Page 49
</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
Any [email protected] Page 50
<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>
<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>
<td>Haider</td><td>12th</td><td>Delhi</td>
</tr>
</table>
</body>
SVAN HTML IN HINDI
Any [email protected] Page 51
</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>
<th>Name</th><th>Class</th><th>City</th>
</tr>
<tr>
<td>Ayaan</td><td>10th</td><td>Delhi</td>
</tr>
<tr>
<td bgcolor=yellow >Aman</td><td>12th</td><td>Delhi</td>
</tr>
<tr>
<td>Haider</td><td>12th</td><td>Delhi</td>
SVAN HTML IN HINDI
Any [email protected] Page 52
</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>
<th>Name</th><th>Class</th><th>City</th>
</tr>
<tr align=center>
<td>Ayaan</td><td>10th</td><td>Delhi</td>
</tr>
<tr align=center>
SVAN HTML IN HINDI
Any [email protected] Page 53
<td>Aman</td><td>12th</td><td>Delhi</td>
</tr>
<tr align=center>
<td>Haider</td><td>12th</td><td>Delhi</td>
</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>
<th>Name</th><th>Class</th><th>City</th>
</tr>
<tr align=center bordercolor=red>
<td>Ayaan</td><td>10th</td><td>Delhi</td>
SVAN HTML IN HINDI
Any [email protected] Page 54
</tr>
<tr align=center bordercolor=red>
<td>Aman</td><td>12th</td><td>Delhi</td>
</tr>
<tr align=center bordercolor=red>
<td>Haider</td><td>12th</td><td>Delhi</td>
</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
Any [email protected] Page 55
<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>
<th>Name</th><th>Class</th><th>City</th>
</tr>
<tr align=center>
<td>Ayaan</td><td>10th</td><td>Delhi</td>
</tr>
<tr align=center>
<td>Aman</td><td>12th</td><td>Delhi</td>
</tr>
<tr align=center>
<td>Haider</td><td>12th</td><td>Delhi</td>
</tr>
</tbody>
<tfoot align=center>
<tr>
SVAN HTML IN HINDI
Any [email protected] Page 56
<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
Any [email protected] Page 57
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
Any [email protected] Page 58
<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
Any [email protected] Page 59
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
Any [email protected] Page 60
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
Any [email protected] Page 61
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
Any [email protected] Page 62
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
Any [email protected] Page 63
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
Any [email protected] Page 64
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
Any [email protected] Page 65
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
Any [email protected] Page 66
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
Any [email protected] Page 67
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
Any [email protected] Page 68
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
Any [email protected] Page 69
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
Any [email protected] Page 70
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
Any [email protected] Page 71
</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
Any [email protected] Page 72
{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
Any [email protected] Page 73
</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
Any [email protected] Page 74
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
Any [email protected] Page 75
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
Any [email protected] Page 76
<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
Any [email protected] Page 77
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
Any [email protected] Page 78
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
Any [email protected] Page 79
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
Any [email protected] Page 80
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">
<h1>This is a book.</h1>
<p>This is a paragraph.</p>
</body>
</html>
Rsult-
SVAN HTML IN HINDI
Any [email protected] Page 81
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
Any [email protected] Page 82
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;
font-family: Helvetica;
letter-spacing: 1px;
word-spacing: 1px;
text-align: left;
SVAN HTML IN HINDI
Any [email protected] Page 83
}
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;
font-family: Helvetica;
word-spacing: 1px;
text-align: left;
}
p.para {
color:#00FF00;
font-size: 1.1em;
font-family: Helvetica;
letter-spacing: 1px;
word-spacing: 1px;
text-align: left;
}
</style>
</head>
SVAN HTML IN HINDI
Any [email protected] Page 84
<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
Any [email protected] Page 85
font-family: Helvetica;
word-spacing: 1px;
text-align: left;
}
a.link {
color: #000FFF;
display: inline-block;
background-color: Yellow;
font-size: 1.1em;
font-family: Helvetica;
letter-spacing: 1px;
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
Any [email protected] Page 86
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
Any [email protected] Page 87
<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
Any [email protected] Page 88
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
Any [email protected] Page 89
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{
background-color :b lack;
SVAN HTML IN HINDI
Any [email protected] Page 90
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
Any [email protected] Page 91
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{
background-color :b lack;
co lor :white;
height :50px;
SVAN HTML IN HINDI
Any [email protected] Page 92
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{
background-color :Orchid;
height :400px;
padding-top:20px;
co lor :b lack;
}
#footer {
background-color :b lack;
co lor :white;
height :50px;
SVAN HTML IN HINDI
Any [email protected] Page 93
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">
<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>
</d iv>
<div id="footer">
SVAN HTML IN HINDI
Any [email protected] Page 94
<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
Any [email protected] Page 95
<style>
table.header{
width:100%;
border :0px;
background-color :b lack;
}
td.head{
border :0px;
background-color :b lack;
co lor :#b5dcb3;
}
td.nav{
background-color :Aqua;
width: 20%;
height : 500px;
margin- lef t :50px;
}
td.sect ion{
background-color :Orchid;
}
td. footer{
border :0px;
background-color :b lack;
co lor :#b5dcb3;
}
</sty le>
SVAN HTML IN HINDI
Any [email protected] Page 96
</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">
<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
SVAN HTML IN HINDI
Any [email protected] Page 97
the var ious components of a document such as headings, paragraphs, and
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
Any [email protected] Page 98
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
Any [email protected] Page 99
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
Any [email protected] Page 100
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
Any [email protected] Page 102