HTML Cheat Sheet in Hindi - Lear - Amar Gupta

Table
of Contents
1. The main HTML Code Syntax

2. Type of CSS Style
1. Basic Syntax and description
2. Line Break and new line
3. Changing paragraph and content style
4. Href and URL Tag
5. For Email and Linking Emails
6. Image Tag
7. Text Styling(Bold Italic Underline etc
8. Special Styling(Subscript superscript)
9. Special formatting
10. Writing Tables
11. List wring
4. Making Forms in HTML
5. Some Other Useful HTML Character Entities
6. Some Mathematical Symbols Supported by HTML
7. Some Greek Letters Supported by HTML
8. Some Other Entities Supported by HTML

1. The Main HTML Code Syntax

<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

<html> </html> Html tag hamesha starting mai use hoga, pura web page
iss ke ander rahata h. Ye sabse important aur first tag h.
<head> </head> Iss tag mai web page ke head se related cheejai aati h
like meta tag,title tag, scripts etc..

<title> </title>
Iss tag ke beech mai jo bhi likha jata h vo web page ke

title bar par show hota h
<body>
</body>
Jitna bhi content page par dikhta h vo iss tag mai likha
jata h. Yah html web page ka main tag h. Poora data,
images, videos, forms sab kuch iske andar aata h.

Iss purai page ko hum (.html) mai save karte h..
like name of the file.html
Ex. Index.html

Inline Style

Internal Style
Ye hamare kisi html ke

Ye hamare <head> tag mai
kisi ek particular tag par use hota h with style
apply kiya jata h with
tagEx.
style tag Ex.
External Style
Iss mai jitna bhi
css code h vo ek
alag page par
likha jata h jis ko
hum name.css
se save usai html
page par link kiya
jata h.
In name.css file
<body>
<html>
<head>
H1{color:blue;}
<style>
<h1
style=color:blue>Hello</h1> H1{color:blue;}
</style>

</body>
<body>
(ye bina style tag

ke use hota h or
sb likhnai ke
baad isai save
kiya jata h)
<h1>Hello</h1>
</body>
<html>
</html>
<head>
</head>
<link
href=name.css
rel=stylesheet
type=text/css>
</head>
<body>
<h1>Hello</h1>
</body>
</html>
Green indicate html tag and
blue indicate css style tag
Green indicate html tag

and blue indicate css style
tag. Ye style H1 heading ke
content ko blue kare dega.
Green indicate
html tag and
blue indicate css
style tag and
yellow indicate
link of css page
maximum iss ka use
hota h
3. HTML code and syntaxes1. Basic Syntax and description

Code
<h1> to <h6>

Description and example

Heading tag..iss mai jo text likha
jata h uss ka size heading tag k
anusar change hota h.
Ye tag closing tah ke sath use hote H1 ka size sabse jyada hota h aur
h
H6 ka kam

<!- -this is comment tag- >

Ye comments likhne k liye use

karte h.
2. Line Break and new line

<br> yah c programing k \n k tarah Text ko ek line se hata kar dusri line mai lanai
kam karta h.
ke liye iss ka use hota h
<hr>
Ye horizontal line deta h

ye bina closing tag ke
use hota h or iska
height,width chg ki ja
sakti h
3. Changing paragraph and content style

<p>..</p>
Paragraph tag content iss ke

ander likha jata h. paragraph tag
dene se content new paragraph me
aata h.
title
Jb hum kisi text par cursor le jate h

to vo uska purpose or meaning
dikhata h ye sb title ka use kar ke
hota h, kahi bhi..
<p
title=concept>..
</p>
<pre>
Same as paragraph difference h ki

iss tag mai hum jaisa text likhege vo
sab vaisa hi page par dikhayi dega
kuch formatting ni hogi apne app se.
4. Href and URL Tag
<a></a>

Href

Target
a tag is the link tag or ye href ke

sath use kiya jata h.
<a href=name of the page jis ko
open karna h> write name jis par ye
link kam karega </a>

<a href=www.webappboss.com > HOME </a>
Target also used by the a
<a href=welcome.com
target=_blank>Home</a>

Target=_blank / _self / _parent / _top
<a> link ka use same page me hi

dusri link kholne ya dusri position
me jane me kiya jata h. For
example: going top or going
bottom.
Agar content titleTag heading ke sath

likha gaya h or hame is ko link karna
h, taki hum bina scroll kiye direct uss
par pahuch jaye then
<a id=tips>title Tag</a>
Now any where you use the link line

<a href=#tips>go to titleTag</a>
5. For Emails and linking Emails:

For mail link
<a href=mailto:info@webappboss.com>Send mail</a>
<a href=mailto:info@webappboss.com?subject=Hello %
20 again target=_top>Send mail</a>
Mail with subject

<a href= mailto:info@webappboss.com ?

cc=someone@example.co m&
bcc=other@example.com&subject=Hello % 20 again
target=_top>Send mail</a>
Multiple mail id
with subject
href= mailto:info@webappboss.com ?
cc=someone@example.co m& subject=Hello % 20
again&body=you%20are%20invited%20in%20today%20party
target=_top>Send mail</a>
Multiple mail id
with subject and
body
6. Image Tag

<img>

< img src=tree.jpgalt=tree
height=100
width=100 />

Iss ke use se hum image lagate h

webpage me
Src(source file) iss mai image ka path
hota h atl (alternative text )
7. Text Styling (Bold Italic Underline etc)

<b>.</b>
Ye tag text ko bold karta h lekin

usko koi special importance ni deta
h.
<strong>
</strong>
Ye tag text ko bold karta h <b> tag k

tarah. lekin us text ko special
importance b deta h.
<i>..</i>
Ye tag text ko italic karta h lekin

usko koi special importance ni deta
h.
<em></em>
Ye tag text ko italic karta h <i> tag k

tarah. lekin us text ko special
importance b deta h... Is liye ise
emphasized tag kahte h.
<mark></mark>
Ye text ko highlight karta h.
8. Special Styling (Subscript superscript)

<del> blue </del>
Ye tag <del> tag k andar k text k upar

se line bana deta h jaise k vo deleted
ho. Ex. blue
<ins>blue</ins>
Ye text ko insert karta h aur sath me

underline bhi lagata h. Ex. blue
<sub>..</sub>
Ye subscript lagane k liye use hota h.
<p>NH<sub>4</sub>
text.</p>
<sup>.</sup>
<p>4<sup>3</sup> text.
</p>

NH4 text.
superscript lagane k liye use hota h.

43 text.
9. Special formatting ( Writing code, Quote etc)

<small></small>
<p><small>Copyright 2016 Webappbss.
</small></p>
This changes text into small text.

Copyright 2016 Webappbss.
<q></q>
Short quotation small line par quotation

lagane ke liye iss ka use hota h.
<blockquote>.
</blockquot
Use with long paragraph
e>
<address></address>
Use for address
<code>..</code>
Code ko page par dikhanai ke liye

use hota h.
<var>.</var>
Mathematical variable dikhnai ke

liye iss ka use hota h.
10. Writing tables:

<table>
Make table
<table>
<tr> (table row)
<tr>
<th>Sr. no.</th>
<th>Name</th>
<td> (table data)
</tr> //first row finish

<tr>
<th> (table heading)
<td>1</td>
<td>Sun</td>
</tr>
</table>
11. List writing:

Ten tarah ki list use hoti h

<ul> (unorder list) iss list mai

bullets show hote h different
type ke bullet use hote h like
circle/square/disc by using type..

<ul type=disc>
<li>milk</li>
<li>sugar</li>
<li>tea</li>
</ul>
<ol type=A>
<ol> (order list) iss mai number
<li>milk</li>
and alphabet use hote h like

a/A/1/I/I by using type
<li>sugar</li>
<li>tea</li>
</ol>

<dl>
<dl> (description list)
<dt>Coeffe</dt>
<dd>--black hot</dd>
<dt>(define the term, name)
<dt>milk</dt>
<dd>--White cold</dd>
<dd>(define the data,
<dl>
description)

4. Making Forms in HTML

Form
<form> input element </form>
Text field
<form>
First Name : <input type=text

name=firstname> Last Name: <input
type=textname=lastname>
Password field
Password : <input
type=passwordname=pwd>
Radio btton
<input type=radioname=sexvalue=
male>Male
<input
type=radioname=sexvalue=female>Female
Check box
<input type=check
boxname=vehiclevalue=bike>I have bike
<input type=check
boxname=vehiclevalue=car checked>I
have car

Drop down list
(checked option se vo box hamesha sing ke sath

dikhta h)

<Select name=cars>
<option value=Volvo>Volvo</option>
<option value=audi>audi</option>
<opton value=fiat selected>fiat</opton>

</select>
(selected option likhnai se screen par first option
ki jagah vo

Output (iss se ek range <form oninput=x.value=parseInt(a.value)+

line with number dikhti
parseInt(b.value)>0
h jisai hum increase or
decrease karte h,
<input type=rangeid=avalue=50>100 +
<input type=number id=b value=50> =
in calculation form)
<output name=x for=a b></output>
</form>
<iframe> (kisi bhi page <iframe src=url height= width=
ko frame mai rakh
frameborder=></iframe>
sakte h)
Comment box
<input type=textname=commentvalue=your comment
size=50>

Text area
<textarea rows=4 cols=50>..</textarea>
Button
<input type=button value=hello>

Submit
<input type=submit value=submit>

Form action attribute:

<form name=input action=demo_form.asp method=get> User name:
<input type=text name=username>
<input type=submit value=submit>
</form>
Label:
iska use karne se agar hum button ke text par bhi click karte h to work hoga.
<form action=>
<label for=male>male</label>
<input type=radioname=sex id=malevalue=male>
<label for=female>female</label>
<input type=radioname=sexid=femalevalue=female></form>

Fieldset and legend:

iss se hum form ke bahar ki outline or form ka name likhte h.
<form action=>
<fieldset>
<legend>Information</legend> Add button and all form detail
</fieldset></form>

Optgroup :
iss se dropdown menu mai hum alag alag option with heading use karte h.
<select>
<optgroup label=Swedish car>
<option value=Volvo>Volvo</option>
<option value=saab>saab</option>
</optgroup>
<optgroup label=german car>
<option value=audi>audi</option>
</optgroup>
</select>

Keygen:
Specify key-pair generator field,jb form submit hoga to private key stored
locally and public key send to server.
<form action=>
Name <input type=textname=username> Encryption <keygen
name=security>
<input type=submit>
</form>
5. Some Other Useful HTML Character Entities

Char
Description
Entity Name
Entity
Number

non-breaking space

<
less than
<
<
>
greater than
>
>
&
ampersand
&
&
cent
¢
¢
£
£
pound

yen
¥
¥
euro
€
€
copyright
©
©
registered trademark
®
®
6. Some Mathematical Symbols Supported by HTML

Char
Number Entity
Description
∀ ∀
FOR ALL
∂ ∂
PARTIAL DIFFERENTIAL

∃ ∃

THERE EXISTS

∅ ∅
EMPTY SETS

∇ ∇

NABLA

∈ ∈
ELEMENT OF

∉ ∉

NOT AN ELEMENT OF

∋ &ni;

∏ ∏
∑ ∑
CONTAINS AS MEMBER

N-ARY PRODUCT

N-ARY SUMMATION
7. Some Greek Letters Supported by HTML

Char Number Entity Description

Α Α GREEK CAPITAL LETTER ALPHA

Β Β GREEK CAPITAL LETTER BETA

Γ Γ GREEK CAPITAL LETTER GAMMA

Δ Δ GREEK CAPITAL LETTER DELTA

Ε Ε GREEK CAPITAL LETTER EPSILON

Ζ Ζ GREEK CAPITAL LETTER ZETA

8. Some Other Entities Supported by HTML

Char
Number Entity
Description
€ €
™ ™
TRADEMARK
LEFTWARDS ARROW
↑ ↑
UPWARDS ARROW
EURO SIGN
← ←
→ →
RIGHTWARDS ARROW
↓ ↓
DOWNWARDS ARROW
♠ &spades;
BLACK SPADE SUIT
♣ &clubs;
BLACK CLUB SUIT
♥ &hearts;
BLACK HEART SUIT
♦ &diams;
BLACK DIAMOND SUIT

HTML Cheat Sheet in Hindi - Lear - Amar Gupta

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Cheat Sheet in Hindi - Lear - Amar Gupta

Uploaded by

Copyright:

Available Formats

Table

1. The main HTML Code Syntax

1. The Main HTML Code Syntax

Iss tag ke beech mai jo bhi likha jata h vo web page ke

2. Type of CSS Style

Ye hamare kisi html ke

(ye bina style tag

Green indicate html tag

3. HTML code and syntaxes1. Basic Syntax and description

Description and example

<!- -this is comment tag- >

Ye comments likhne k liye use

2. Line Break and new line

ke liye iss ka use hota h

Ye horizontal line deta h

3. Changing paragraph and content style

Paragraph tag content iss ke

Jb hum kisi text par cursor le jate h

Same as paragraph difference h ki

4. Href and URL Tag

a tag is the link tag or ye href ke

<a> link ka use same page me hi

Agar content titleTag heading ke sath

5. For Emails and linking Emails:

For mail link

<a href=mailto:info@webappboss.com>Send mail</a>

Mail with subject

<a href= mailto:info@webappboss.com ?

Iss ke use se hum image lagate h

7. Text Styling (Bold Italic Underline etc)

Ye tag text ko bold karta h lekin

Ye tag text ko bold karta h <b> tag k

Ye tag text ko italic karta h lekin

Ye tag text ko italic karta h <i> tag k

Ye text ko highlight karta h.

8. Special Styling (Subscript superscript)

<del> blue </del>

Ye tag <del> tag k andar k text k upar

Ye text ko insert karta h aur sath me

Ye subscript lagane k liye use hota h.

superscript lagane k liye use hota h.

9. Special formatting ( Writing code, Quote etc)

This changes text into small text.

Short quotation small line par quotation

Use with long paragraph

Use for address

Code ko page par dikhanai ke liye

Mathematical variable dikhnai ke

10. Writing tables:

<tr> (table row)

<td> (table data)

</tr> //first row finish

<th> (table heading)

11. List writing:

Ten tarah ki list use hoti h

<ul> (unorder list) iss list mai

<ol> (order list) iss mai number

and alphabet use hote h like

<dl> (description list)

<dt>(define the term, name)

<dd>(define the data,

4. Making Forms in HTML

<form> input element </form>

Α Α GREEK CAPITAL LETTER ALPHA