Friday, 13 September 2013

HTML Layouts - Learn HTML in hindi

HTML Layouts

आपकी वेबसाइट को अच्छा दिखने के लिए वेब पेज layout बहुत महत्वपूर्ण है, इसलिये हमे अपने वेब पेज layout का layout बहुत ध्यानपूर्वक डिजाइन करना चाहिए ।

Website के Layouts

ज्यादातर websites अपना content बहुत से columns मे बनाती है (magazine या newspaper की तरह).
वेबपेज में बहुत से columns <div> या <table> elements का प्रयोग करके बनाये जाते है। CSS का प्रयोग elements का स्थान निर्धारित करने के लिये, या पेज के लिये backgrounds या colorful look तैयार करने के लिये किया जाता है।

नोट : यह भी संभव है कि हम HTML tables से layouts का निर्माण कर सकते है, पर tables को tabular data प्रदर्शित करने के लिये डिजाइन किया जाता है – ना कि एक layout tool की तरह!

<div> Elements का प्रयोग करके Layouts का निर्माण

The div element एक block level element है, जिसका उपयोग HTML elements को आपस मे जोडने (grouping) के लिये किया जाता है।
निम्न उदाहरण मे एक multiple column layout बनाने के लिये 5 div elements का प्रयोग किया गया है।

<html>

<body>

<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>

HTML<br>

CSS<br>

JavaScript</div>

Content goes here</div>

</div>

</body>

</html>

Tables का प्रयोग करके Layouts का निर्माण

layouts बनाने का एक आसान तरीका HTML <table> tag का प्रयोग करके बनाना भी है।
वेबपेज में बहुत से columns <div> or <table> elements का प्रयोग करके बनाये जाते है। CSS का प्रयोग elements का स्थान निर्धारित करने के लिये, या पेज के लिये backgrounds या colorful look तैयार करने के लिये किया जाता है।
निम्न उदाहरण मे 3 rows और 2 columns के साथ एक table बनाई गयी है – पहली और आखिरी row colspan attribute का उपयोग करके दोनो columns को span करती है।

<html>

<body>
<table width="500" border="0">
<tr><td colspan="2" style="background-color:#FFA500;">
<h1>Main Title of Web Page - Learn Web-designing in hindi </h1>
</td></tr>
<tr><td style="background-color:#FFD700;width:100px;">
<b>Menu</b><br>HTML<br>
CSS<br>JavaScript</td>
<td style="background-color:#EEEEEE;height:200px;width:400px;">
Content goes here</td>
</tr>
<tr>

<td colspan="2" style="background-color:#FFA500;text-align:center;">
Copyright © mahaanindia.blogspot.in</td>
</tr></table>

</body>

</html>

नोट : CSS को उपयोग करने का सबसे बडा लाभ यह है कि, यदि आप CSS code को एक बाहरी (external) style sheet मे रखते है, आपके लिये अपनी site को maintain करना बहुत आसान हो जायेगा। आप सिर्फ़ एक फ़ाइल मे बदलाव करके अपनी site के सभी पेजों के layout मे बदलाव कर सकते
नोट : क्योकि advanced layouts बनने मे बहुत टाइम लेते है, इसलिए template का उपयोग एक आसान तरीका है, free website templates के लिये आप Google में सर्च कर सकते है। (free website templates या templates एक pre-built website layouts होते है जिनमें आप थोडा सा अपनी आवश्यकता के अनुरुप बदलाव करके उपयोग कर सकते)

div and span Element in HTML - Learn HTML in hindi

Other Elements

HTML में <div> और <span> का प्रयोग

Block और Inline Elements क्या है ?

अभी तक हमने जितने Elements के बारे में जाना है, लगभग 90 प्रतिशत Coding में इन्‍हीं Elements का प्रयोग होता है और हम हमारी ज्यादातर जरूरतों को इन Elements द्वारा पूरा कर सकते हैं। इन सभी Elements को <body> Element के बीच रखा जाता है, क्योंकि ये सभी Elements निम्न दो Categories में से किसी एक में Place किए जाते हैं:

Block-Level Elements
Inline Elements

Block Level Elements और Inline Elements में अंतर

इन HTML elements को block level elements या inline elements भी कहा जाता है। सामान्यत: Block Level Elements Screen पर इस तरह से Appear होते हैं, जैसे उनसे पहले व बाद में Carriage Return या Line Break का प्रयोग किया गया हो।

Block level elements होते है : <h1>, <p>, <ul>, <table>

इसमें आने वाले elements हैं - <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <hr /> और <blockquote> आदि

ये सभी अपनी स्वयं की एक नई Line में Start होते हैं और इनके बाद जो कुछ भी लिखा जाता है, वह भी एक नई Line में ही Display होता है।

जबकि Inline Elements किसी Sentence के बीच में Appear हो सकते हैं और इन्‍हें एक नई Line में Display होने की जरूरत नहीं होती है।

Inline Elements होते है : <b>, <td>, <a>, <img>

इसमें आने वाले elements हैं - <b>, <i>, <u>, <em>, <strong>, <sup>, <sub>, <big>, <small>, <li> आदि

निम्न Code में हम देख सकते हैं कि किस तरह से Block Level Elements एक नई Line में Appear होते हैं, जबकि Inline Elements किसी भी Line में Appear हो सकते हैं।

<h1>Example of Block-Level Elements </h1>

<p>start in a new line and <strong>Inline Elements </strong> flow with the same line.</p>

HTML Document में एक Block Level Element के बीच अन्‍य Block Level Elements व Inline Elements Place किए जा सकते हैं, लेकिन एक Inline Element को हमेंशा किसी ना किसी Block Level Element के बीच ही Place किया जा सकता है।

<div> और <span>Elements

ये दोनों Elements हमें एक से ज्यादा Elements का एक Group Create करने की सुविधा प्रदान करते हैं, जो कि किसी Page को Section या Sub-Section में Divide करता है। ये स्वयं Document के Appearance पर किसी तरह का कोई प्रभाव नहीं डालते हैं, लेकिन इनका प्रयोग सामान्यतया CSS के साथ किया जाता है, जिससे हम Page के किसी एक हिस्से पर किसी CSS Style को Apply करने की सुविधा प्राप्त कर लेते हैं।

<div> - पेज मे block-level section के लिये प्रयोग किया जाता है।

<span> - पेज मे inline section के लिये प्रयोग किया जाता है।

उदाहरण के लिए मानलो कि हम हमारे Page से सम्बंधित Footnotes को Indicate करने वाले सभी Elements को एक <div> Element में Place कर सकते हैं और बाद में जरूरत होने पर हम इस <div> Element पर किसी CSS Style Rule को Apply कर सकते हैं। सामान्यतया <div> Element का प्रयोग Block-Level Elements को Group करने के लिए किया जाता है। जैसे:

<h2>Paragraph </h2>

<p><b>1</b> this is Paragraph 1</p>

<p><b>2</b> this is Paragraph 2</p>

</div>

जिस तरह से <div> Element केवल Block Level Elements को Group करता है, ठीक उसी तरह से केवल Inline Elements को Group करने के लिए हम <span> Element का प्रयोग करते हैं। यानी यदि हमारे Page पर Sentences अथवा Paragraphs का एक हिस्सा हो और हम उस हिस्से को Group करना चाहते हों, तो हम <span> Element का प्रयोग कर सकते हैं। यहां हमने एक <span> Element का प्रयोग किया है, जो ये Indicate करता है कि कौनसा Content, Inventor को Refer करता है। इसमें एक Bold Element व कुछ Content है।

<h2>Footnotes</h2>

<p>

<b>1</b> this is Paragraph 1 </span></p>

<p><b>2</b> this is Paragraph 2</p> </div>

<div> Element की तरह ही इस Element का भी Document के Appearance पर कोई प्रभाव नहीं पडता है, लेकिन इसका प्रयोग करने से Markup में कुछ Extra Meanings Add हो जाती हैं, जो कि आपस में Logically Related Elements को Group करता है और हम इस पूरे Group को एक साथ Handle कर सकने की सुविधा प्राप्त कर लेते हैं। इस Group का प्रयोग या तो Application Processing के लिए अथवा इन Elements पर CSS Rules को Apply करने के लिए किया जा सकता है। <div> व <span> Elements के साथ सभी Universal Attributes, UI Event Attributes व Deprecated align Attribute को भी उपयोग में लिया जा सकता है।

CSS के साथ <div> element का प्रयोग content के large blocks पर एक साथ style attributes का प्रयोग करने के लिए होता है । <div> element का अन्य सामान्य प्रयोग, document के layout के लिए प्रयोग करना । यह layout के निर्माण के पुराने तरीके (tables का प्रयोग) का स्थान लेता है। layout के लिए <table> elements का प्रयोग करना <table> element का सही उपयोग नही है । <table> element का purpose tabular data को प्रदर्शित करना है ।

CSS के साथ <span> element का प्रयोग text के parts पर एक साथ style attributes का प्रयोग करने के लिए होता है ।

Examples of HTML Lists - Learn HTML in hindi

HTML में Lists का प्रयोग करने के उदाहरण

<!DOCTYPE html>
<html>
<body>

<h4>Numbered list:</h4>
<ol>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li></ol>

<h4>Letters list:</h4>
<ol type="A">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li></ol>
<h4>Lowercase letters list:</h4>
<ol type="a">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li></ol>
<h4>Roman numbers list:</h4>
<ol type="I">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li></ol>

<h4>Lowercase Roman numbers list:</h4>

<li>Apples</li>

<li>Bananas</li>

<li>Lemons</li>

<li>Oranges</li></ol>

<ul style="list-style-type:disc"> <li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>Circle bullets list:</h4>
<ul style="list-style-type:circle"> <li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li></ul>
<h4>Square bullets list:</h4>
<ul style="list-style-type:square"> <li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>

<h4>A nested List:</h4>
<ul>
<li>Coffee</li>
<li>Tea
    <ul>
    <li>Black tea</li>
    <li>Green tea</li>
    </ul>
</li>
<li>Milk</li>
</ul>


<h4>A Definition List:</h4>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

</body>

</html>

<ol> = Numbered list

<ol type="A"> = Letters list

<ol type="a">=Lowercase letters list

<ol type="I">= Roman numbers list

<ol type="i">= Lowercase Roman numbers list

<ul style="list-style-type:disc"> = Disc bullets list

<ul style="list-style-type:circle"> = Circle bullets list

<ul style="list-style-type:square"> = Square bullets list

HTML Lists - Learn HTML in hindi

HTML में Lists का प्रयोग

हम HTML में तीन तरह की Lists Create कर सकते हैं, जो निम्नानुसार हैं:

Unordered Lists, जो कि एक Bulleted List Create करता है।
Ordered Lists, जो कि Characters या Numbers की एक Sequencial List Create करता है।
Definition Lists, जो हमें किसी Term व उसकी Definition को Specify करने की सुविधा देता है।

An ordered list:

The first list item
The second list item
The third list item

An unordered list:

List item
List item
List item

An Description List:

List item

- description

List item

- description

Ordered Lists

जब हमें हमारी List कए निश्चित क्रम में चाहिए होती है, तब हम इस Element का प्रयोग कर सकते हैं। हम इस List में अपने Item के साथ 1, 2, 3 आदि Numbers का, A, B, C आदि Letters का अथवा i, ii, iii, आदि Roman Numbers का प्रयोग कर सकते हैं। एक Ordered List को <ol> Element के बीच लिखा जाता है और हर List Item को <li> Element के साथ इस <ol> Element में Nested किया जाता है।

एक Ordered List <ol> Element से शुरु होती है तथा list मे हर item को <li> Tag Pair के बीच में लिखते हैं और अंत में </ol> से close करते है।। list items के आगे numbers के निशान होते है ।

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

विभिन्न प्रकार के Numbering Sequence प्राप्त करने के लिए हम Type Attribute का प्रयोग कर सकते हैं और Type Attribute में निम्नानुसार किसी मान का प्रयोग करके हम अलग-अलग प्रकार के Numbering System को उपयोग में ले सकते हैं।

Value	Description	Examples
1	Arabic numerals (the default)	1, 2, 3, 4
A	Capital letters	A, B, C,
a	Small letters	a, b, c,
I	Large Roman numerals	I, II, III,
i	Small Roman numerals	i, ii, iii, iv

उदाहरण के लिए यदि हमें Large Roman numerals Letters का Sequence चाहिए, तो <ol> Element में type Attribute को हम निम्नानुसार Use कर सकते हैं:

<html>

<body>

<ol type=”I”>

<li> number one</li>

<li> number two</li>

  <li>
  number three</li>

</ol>

</body>

</html>

इस Type Attribute को HTML 4.1 Version से Deprecated कर दिया गया है और इन्‍हें Style Sheet द्वारा उपयोग में लिया जाता है।

<ol> Element के साथ किसी भी Universal या UI Event Attribute को तथा start नाम के एक और Attribute को उपयोग में लिया जा सकता है।

start Attribute Ordered List के Start होने के Number या Character को तय करता है। ये भी एक Deprecated Attribute है। इसे हम निम्नानुसार उपयोग में ले सकते हैं:

<html>

<body>

<ol type=”I” start=”3”>

<li> number one</li>

  <li>
  number two</li>

  <li>
  number three</li>

</ol>

</body>

</html>

जब हम उपरोक्त उदाहरण को Run करते हैं, तब type Attribute में Set किए गए Character “I” की वजह से Large Roman numerals Letters से Numbering शुरू होती है, लेकिन हमने start Attribute में “3” Specify किया है, इसलिए हमारे Large Roman numerals Letters से Numbering की शुरूआत Large Roman numerals Letter “III” से होती है, क्योंकि Letter “III” Roman numerals का तीसरा Character होता है।

Unordered Lists

यदि हम Bullet Points की एक List Create करना चाहते हैं, तो हम इस Element का प्रयोग कर सकते है। इस Tag को List Item कहा जाता है।

unordered list <ul> Element से शुरु होती है तथा list की हर item <li> Tag Pair के बीच में लिखते हैं और अंत में </ul> से close करते है। list items के आगे Bullet Point के निशान होते है ।

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

<ul> व <li> Elements में सभी Universal Attributes व UI Event Attributes को उपयोग में लिया जा सकता है।

Description Lists

description List एक Special प्रकार की List होती है, जिसमें किसी Term के साथ उस Term से सम्बंधित एक Short Description लिखा जाता है।

description List को <dl> Element के बीच लिखा जाता है, जिसमें <dt> व <dd> Element Nested होते हैं। <dt> Element Term को Specify करता है, जबकि <dd> Element उस Term के Description को Specify करता है।

यानि description List <dl> Element से शुरु होती है तथा list मे हर terms/names <dt> tag के साथ शुरु होती है तथा उनकी Description <dd> tag के बाद शुरु होती है। इससे terms/names बाद उनकी व्याख्या के आगे डेश (-) का निशान लग जाता है । इस List को हम निम्नानुसार उपयोग में लेते हैं:

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

Coffee

- black hot drink

Milk

- white cold drink

नोट : list item के अंदर आप text, line breaks, images, links, other lists, आदि भी डाल सकते है।

Complete list of HTML Text Formatting Tags - Learn HTML in hindi

Complete list of HTML Text Formatting Tags

HTML में formatting के लिये प्रयोग किये जाने वाले tags की पूरी लिस्ट निम्न है :

Tag	Description	Examples of Use
<b>	text को bold करने के लिये नोट: HTML 5 मे इस्का प्रयोग कम या अंतिम विकल्प के रुप मे करते है। आप text को bold सेट करने के लोये CSS की "font-weight" का प्रयोग भी कर सकते है।	<p>This is normal text - <b>and this is bold text</b></p>
<em>	text को emphasized करने के लिये नोट: <em> tag एक phrase tag है	<em>Emphasized text</em>
<i>	Defines a part of text in an alternate voice or mood	<p>He named his car <i>The lightning</i>, because it was very fast.</p>
<small>	text को smaller करने के लिये नोट: This tag is not deprecated, but it is possible to achieve richer effect with CSS	<p>W3Schools.com - the world's largest web development site.</p> <p><small>Copyright 1999-2050 by Refsnes Data</small></p>
<strong>	text को important करने के लिये नोट: <strong> tag एक phrase tag है नोट: This tag is not deprecated, but it is possible to achieve richer effect with CSS	<strong>Strong text</strong>
<sub>	text को subscripted करने के लिये, जैसे- H₂O	<p>This text contains <sub>subscript</sub> text.</p>
<sup>	text को superscripted करने के लिये, जैसे- WWW^[1]	<p>This text contains <sup>superscript</sup> text.</p>
<ins>	text को inserted करने के लिये नोट: Browsers will normally strike a line through deleted text and underline inserted text.	<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
<del>	text को deleted करने के लिये	<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
	Attributes <del><ins>
cite	एक पेज के URL के लिये जो यह विस्तार से बताता है कि text क्यो delete किया गया	<p><del cite="del_demo_cite.htm">This text has been deleted</del></p>
datetime	YYYY-MM-DDThh:mm:ssTZD उस date और time के लिए जब text delete किया गया Attribute Value – *YYYY-MM-DDThh:mm:ssTZD* Explanation of components: YYYY - year (e.g. 2012) MM - month (e.g. 01 for January) DD - day of the month (e.g. 08) T - a required separator hh - hour (e.g. 22 for 10.00pm) mm - minutes (e.g. 55) ss - seconds (e.g. 03) TZD - Time Zone Designator (Z denotes Zulu, also known as Greenwich Mean Time)	<p> <del datetime="2011-11-15T22:55:03Z">This text has been deleted</del> </p>
<mark>	text को marked/highlighted करने के लिये नोट : new in HTML5	<p>Do not forget to buy <mark>milk</mark> today.</p>
	HTML "Computer	Output" Tags
<code>	computer code text के लिये प्रयोग होता है नोट : <code> tag एक phrase tag है	<code>A piece of computer code</code>
<samp>	keyboard text के लिये प्रयोग होता है नोट : <samp> tag एक phrase tag है	<kbd>Keyboard input</kbd>
<samp>	sample computer code के लिये प्रयोग होता है नोट : <samp>tag is a phrase tag.	<samp>Sample output from a computer program</samp>
<var>	variable के लिये प्रयोग होता है नोट : <var> tag एक phrase tag है	<var>Variable</var>
<pre>	preformatted text के लिये प्रयोग होता है नोट : <pre> element का Attributes width होता है जिसकी value number मे होती है । नोट : Not supported in HTML5. Deprecated in HTML 4.01. Specifies the maximum number of characters per line	<pre width="30"> Text in a pre element is displayed in a fixed-width font, and it preserves both spaces and line breaks </pre>
	HTML Citations,	Quotations, and Definition Tags
<abbr>	abbreviation या acronym के लिये प्रयोग होता है नोट : The global title attribute can be used in the <abbr> tag to show the full version of the abbreviation/acronym when you mouse over the <abbr> element नोट : <abbr> tag is not supported in IE 6 or earlier versions.	The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.
<address>	HTML पेज के लेखक या मालिक के बारे मे जानकारी के लिये इसका प्रयोग किया जाता है । नोट : The <address> tag should NOT be used to describe a postal address, unless it is a part of the contact information. नोट : The <address> element will typically be included along with other information in a <footer> element.	<address> Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br> Visit us at:<br> Example.com<br> Box 564, Disneyland<br> USA </address>
<bdo>	text direction के लिये प्रयोग किया जाता है । नोट : इसका Attributes dir और Value ltr या rtl होते है। <bdo dir="ltr\|rtl"> ltr- बाँये से दाँये text direction rtl- दाँये से बाँये text direction	<bdo dir="rtl"> This text will go right-to-left. </bdo>
<blockquote>	<blockquote> tag का प्रयोग एक section के लिये किया जाता है जो किसी अन्य source से quoted होता है। नोट : inline (short) quotations के लिए <q> का प्रयोग करें नोट : इसका Attributes cite और Value URL होते है। जो Specifies the source of the quotation	<blockquote cite="http://www.worldwildlife.org/who/index.html"> For 50 years, WWF has been protecting the future of nature. The world’s leading conservation organization. </blockquote>
<q>	<blockquote> tag का प्रयोग inline (short) quotation के लिये किया जाता है नोट : इसका Attributes cite और Value URL होते है। <p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q> We hope they succeed.</p>	<p>WWF's goal is to: <q cite="http://www.wwf.org"> Build a future where people live in harmony with nature.</q> We hope they succeed.</p>
<cite>	इसका प्रयोग किसी काम को title देने के लिये किया जाता है ।जैसे -a book, a song, a movie, a TV show, a painting, आदि नोट : आदमी के नाम को काम के लिए title नही दे सकते	<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>
<dfn>	इसका प्रयोग definition term के लिये किया जाता है । नोट : tag एक phrase tag है	<dfn>Indian books publication</dfn>

online Indian books for free download

Pages - Menu

Friday, 13 September 2013

HTML Layouts - Learn HTML in hindi

HTML Layouts

Website के Layouts

<div> Elements का प्रयोग करके Layouts का निर्माण

Tables का प्रयोग करके Layouts का निर्माण

div and span Element in HTML - Learn HTML in hindi

HTML में <div> और <span> का प्रयोग

Block और Inline Elements क्या है ?

<div> और <span>Elements

Examples of HTML Lists - Learn HTML in hindi

HTML में Lists का प्रयोग करने के उदाहरण

HTML Lists - Learn HTML in hindi

HTML में Lists का प्रयोग

An ordered list:

An unordered list:

Ordered Lists

Description Lists

Complete list of HTML Text Formatting Tags - Learn HTML in hindi

Complete list of HTML Text Formatting Tags

Attributes <del><ins>

HTML "Computer

HTML Citations,

Quotations, and Definition Tags

other links