Showing posts with label Learn About HTML. Show all posts
Showing posts with label Learn About HTML. Show all posts

Monday, 17 July 2017

HTML text formatting and styles...


HTML text formatting and styles 

  • Introduction to HTML text formatting in Hindi 
  • Types of HTML text formatting in Hindi 
  • Styling HTML text in Hindi 


Introduction to HTML text formatting 

HTML में कुछ tags सिर्फ text formatting के लिए provide किये गए है। इन tags का इस्तेमाल करते हुए आप web page पर text की presentation और position को control कर सकते है। जैसे की आप text को bold या underline कर सकते है। किसी text editor में आप ये काम एक button click से कर सकते है लेकिन HTML में इसके लिए आप tags यूज़ करते है। कुछ common formatting type है जो आप text पर apply करते है इनकी list नीचे दी जा रही है।

  1. Bold
  2. Italic
  3. Underline
  4. Marked
  5. Superscript 
  6. Subscript
  7. Small
  8. Deleted


HTML <b> tag
HTML के द्वारा किसी text को bold करने के लिए <b> tag यूज़ किया जाता है। इसके लिए आप starting और ending tags के beech में text को लिखते है।

<b> This text will be bolded. </b>


HTML <i> tag
HTML में किसी text को italic बनाने के लिए <i> tag यूज़ किया जाता है। 

<i> This text will be italic. </i>


HTML <ins> tag
किसी text को underline करने के लिए <ins> tag यूज़ किया जाता है। 

<ins> This text will be underlined</ins>

HTML <mark> tag
यदि आप किसी text को highlight करना चाहते है तो उसके लिए <mark> tag यूज़ कर सकते है।  

<mark> This text will be highlighted </mark>


HTML <sup> tag
किसी text को super script करने के लिए आप <sup> tag यूज़ कर सकते है।

<p> This is normal text<sup> This will be super scripted </sup> This is normal again </p>


HTML <sub> tag
अगर आप text को subscript में लाना चाहते है तो उसके लिए आप <sub> tag यूज़ करेंगे।  

<p> This is normal text <sub> This text will be subscripted </sub></p>


HTML <small> tag
यदि आप किसी text को दूसरे text से छोटा रखना चाहते है तो इसके लिए आप <small> tag  यूज़ कर सकते है। कई editors ऐसा text को highlight करने के लिए भी करते है। 

<p> Normal Text <small> Smal Text </small> </p>


HTML <del> tag
किसी text को deleted शो करने के लिए आप <del> tag का इस्तेमाल कर सकते है। जब किसी tag को deleted show करते है तो उस text के through line show होती है। 

<p> <del> This text will be deleted</del></p>


HTML text formatting tag का एक complete उदाहरण नीचे दिया जा रहा है।

<html>
<head>
<title>Text Formatting</title>
</head>
<body>
<p>
<b> This text will be bolded. </b> 
</p>
<p>
<i> This text will be italic. </i>
</p> 
<p>
<ins> This text will be underlined</ins>
</p> 
<mark> This text will be highlighted </mark>
<p> This is normal text<sup> This will be super scripted </sup> This is normal again </p>
<p> This is normal text <sub> This text will be subscripted </sub></p>
<p> Normal Text <small> Smal Text </small> </p>
<p> <del> This text will be deleted</del></p>
</body>
</html> 

ऊपर दी गयी script को run करने पर web page इस प्रकार show होगा।
















Changing text color

किसी भी tag के text का color change करने के लिए आप CSS की color property यूज़ करते है। और इसके बाद colon लगाकर color का नाम देते है। 
   
<p style="color:red">This text will be red. </p>


Changing font family 

Text की font family change करने के लिए आप font family property यूज़ करते है और value के रूप में font family का नाम देते है।

<p style="font-family:Arial"> This text will be in Arial </p>


Changing text size 

Text की size change करने के लिए आप font size property यूज़ करते है और value के रूप में जो size आप चाहते है वह देते है।

<p style="font-size: 45"> This size is changed by style tag. </p>


Changing text position 

Text की position change करने के लिए text align property यूज़ की जाती है और value के रूप में आप left, right या center pass कर सकते है।

<p style="text-align:center"> This position is change by style tag</p>


इसका उदाहरण नीचे दिया जा रहा है।

<html>
<head>
<title>Text Formatting</title>
</head>
<body>
<p style="color:red">This text will be red. </p>

<p style="font-family:Arial"> This text will be in Arial </p>

<p style="font-size: 45"> This size is changed by style tag. </p>

<p style="text-align:center">
This position is changed by style tag.
</p>

</body>
</html>

ऊपर दी गयी script निचे दिया गया web page generate करेगी।










यदि आपके मन में कोई सवाल है तो हमसे सम्पर्क करें. यदि आपको हमारा Blog पसंद आया तो Subscribe करना न भूले इससे आपको आगे Hindi Blog की नयी-नयी जानकारी आपके Email पर मिलती रहेगी.

Created By Manjeet Singh...

HTML Tags And Attributes...


HTML tags and attributes
  • Some more common HTML tags in Hindi 
  • Introduction to HTML Attributes in Hindi 
  • Example of HTML attributes in Hindi 
  • Scope of attributes with HTML in Hindi 
  • Guide lines for using HTML attributes in Hindi 
  • Common HTML attributes in Hindi      
Some more common HTML tags

Attributes के बारे में जानने से पहले कुछ और common tags के बारे में नीचे दिया जा रहा है। इन tags का इस्तेमाल आगे आने वाले examples में किया जायेगा।

 Tags...

<h1> </h1>

ये heading tag होता है। इससे page की heading define की जाती है। इसे आप किसी paragraph से पहले यूज़ कर सकते है और उसकी heading define कर सकते है। इसकी text size पुरे page में सबसे large होती है।

<h2> </h2>

ये भी heading tag होता है। लेकिन इसकी text size <h1> tag से कम होती है। इसे heading के बाद subheading declare करने के लिए यूज़ किया जाता है।

<h3> </h3>

ये भी heading tag होता है। इसे subheading के बाद minor heading declare करने के लिए यूज़ किया जाता है। इसकी text size sub heading से कम होती है।

<p>  </p>

ये paragraph tag होता है। इसके द्वारा आप एक paragraph अपने page में लिख सकते है और उसको different attributes के द्वारा position कर सकते है। किसी paragraph पर होने वाली सभी formatting आप इस tag के attributes के द्वारा कर सकते है।

<br />

ये tag line को break करने के लिए यूज़ किया जाता है। इस tag के बाद का text दूसरी line में शो होता है।


Introduction to HTML attributes 

जितने भी HTML tags होते है उन सबके attributes होते है। ये name और value के pair में लिखे जाते है। Attributes के द्वारा आप tags को अपने according configure कर सकते है। Attributes को हमेशा starting tag में define किया जाता है। इन्हे define करने का उदाहरण नीचे दिया जा रहा है।

<tagName attrName="value">
some text here.
</tagName>

Attributes advanced configuration के लिए यूज़ किये जाते है। जैसे की आप default page background नहीं चाहते तो उसको अपने according change कर सकते है। ऐसे ही आप यदि default text color नहीं चाहते है तो उसे भी change कर सकते है। Attributes को यूज़ करना बहुत ही simple है। बस आपको पता होना चाहिए की कौनसा attribute किस जगह यूज़ करना है। आगे attributes से related एक simple उदाहरण नीचे दिया जा रहा है।

<html>
<head>
<title>myPage</title>
</head>
<body bgcolor="black">
<h1 style="color:pink"> Heading </h1>
<p style="color:yellow">
This is a paragraph. And you are learning html in Hindi.
</p>
</body>
</html>

उपर दिए हुए example में 2 जगह attributes यूज़ किये गए है। सबसे पहले <body> tag में bgcolor attribute यूज़ करते हुए page का background color define किया गया है। जब आप default body tag यूज़ करते है तो page का background color white रहता है। लेकिन जैसा की मैने आपको बताया की आप attributes के द्वारा page और text अपने according configure कर सकते है। इस attribute के द्वारा आप जो background अपने page का रखना चाहते है वो रख सकते है। जैसे की मैने example में black दिया है। ऊपर दी गयी script निचे दिया गया output generate करेगी।














दूसरा attribute paragraph tag में यूज़ किया गया है। ये style attribute है। इस attribute के द्वारा आप tag पर CSS (Cascading Style Sheet) apply कर सकते है। CSS के द्वारा advanced configuration किया जाता है, जिसके बारे में आप आगे पड़ेंगे। जैसे की आप देख सकते है style attribute के द्वारा CSS apply किया गया है। इससे text का color change किया जाता है। और ऐसा ही heading tag के साथ भी किया गया है।

Scope of attributes 

Attributes का scope उनके tags के according होता है। जिस tag के साथ आप जो attribute apply करते है वो उसी tag तक रहता है। जैसे की आपने body tag में style tag को यूज़ करते हुए text color red define किया है। Body tag पुरे page के लिए होता है इसलिए ये attribute पुरे page के text को red में show करेगा। लेकिन ऐसा तब तक ही होगा जब तक कोई body tag से छोटा tag text को दूसरे color में define नहीं करता है। जैसे की आप आगे चलकर किसी paragraph tag का color green define करते है। तो ये color body tag के color को override करेगा। और आपका ये paragraph green text में show होगा। इसका उदाहरण निचे दिया जा रहा है। इसे आप execute करवा कर देख सकते है।  

<html>
<head>
<title> myPage </title>
</head>
<body style="color:red">
Learn html in Hindi <br>
Lean html in Hindi in 2 days. <br>
Learn html in Hindi pdf.
<p Style="color:blue">
This is some text here
</p>
</body>
</html>

उपर दिए हुए उदाहरण में आप देख सकते है की paragraph का text color अलग से define किया गया है। ये body के text color को override करता है। इस script को run करने पर निचे दिया गया output show होगा।














HTML attributes को यूज़ करने की कुछ guide line होती है। जिनको follow करके आप attributes का बेहतर इस्तेमाल कर सकते है। इनके बारे में नीचे दिया जा रहा है।

Guidelines for using HTML attributes 
  • हमेशा attributes को lower case में define करे। 
  • हमेशा attributes की values quotation mark में ही define करे।            
Common HTML attributes 

नीचे आपको HTML में commonly यूज़ होने वाले attributes की list दी जा रही है l


AttributeExplanationExample
IdHTML document में किसी tag को uniquely identify करने के लिए id attribute यूज़ किया जाता है। किन्ही 2 tags की id same नहीं हो सकती I<p id="mypara">
Classये attributes tags को अलग अलग class में categories करने के लिए यूज़ किया जाता है। बहुत से tags एक class के हो सकते है।<h1 class="java">
Titleकिसी tag का tittle देने देने के लिए title attribute यूज़ किया जाता है।<p title="Hello">
Styleइस attribute के द्वारा आप tag पर style rules apply कर सकते है।<p style="color:red">

HTML Tags...


HTML Tags

एक HTML file tags और text का combination होती है। HTML tags को HTML elements भी कहा जाता है। यदि आपको tags का concept समझ आ जाये तो आप HTML आसानी से समझ सकते है। Basically tag ये बताते है की text के साथ क्या करना है।

एक tag एक specific purpose define करता है। हर task के लिए अलग अलग tags बनाये गए है। किसी भी tag के 2 part होते है। Opening tag शुरुआत में लगाया जाता है। इससे interpreter को ये पता चल जाता है की आप क्या करने वाले है। Opening tag के बाद वो text लिखा जाता है जिस पर ये tag apply हो रहा है। इसके बाद closing tag लिखा जाता है।

Closing tag से interpreter को पता चलता है की इस tag का उपयोग यँही तक था। Closing tag को opening tag से differentiate करने के लिए closing tag में forward slash लगाया जाता है। Tags का basic structure नीचे दिया जा रहा है।

<tagName>   text   </tagName>

       
Some basic tags 
निचे आपको HTML के कुछ basic tags दिए जा रहे है। ये वो tags है जो आप हर HTML file में commonly यूज़ करेंगे।  

Tag
Explanation:

<html> </html>
किसी भी HTML file की शुरुआत इसी tag से की जाती है। ये tag दर्शाता है की ये file एक HTML file है। बाकि सभी tags इस tag के अंदर आते है। ये tag program में सबसे आखिर में close किया जाता है।      

 <head></head>
इस tag में document के बारे में information होती है। साथ ही यदि आपका web page कोई script apply करता है तो वो भी इसी tag के अंदर define की जाती है। ये tag हमेशा HTML tag के अंदर आता है।    

<title></title>
इस tag के द्वारा web page का title display किया जाता है। ये tag हमेशा head tag के अंदर आता है।     

 <body></body>
जो भी text body tag में होता है, program के interpret होने के बाद वही display किया जाता है। ये tag head tag के close होने के बाद में आता है।    


A simple HTML program

<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>
My First Web Page
</h1>
</body>
</html> 



<!DOCTYPE> tag

कई बार HTML tag से पहले इस tag का इस्तेमाल किया जाता है। ये tag बताता है की आप कौनसा HTML version यूज़ कर रहे है। कुछ browsers security purpose से HTML के पुराने versions को support नहीं करते है। इसलिए ये tag HTML version के बारे में browser को information देता है। जिससे browsers appropriate action ले सके। 

Created By Manjeet Singh...

HTML versions...

HTML versions 
अब तक HTML के बहुत से version industry में आ चुके है इनके बारे में नीचे दिया जा रहा है। 

HTML 1.0 
ये HTML का पहला version था। उस समय बहुत कम लोग इस language के बारे में जानते थे। और HTML भी बहुत limited थी। 

HTML 2.0 
इस version में HTML 1.0 के सभी features थे। इस version के साथ ही HTML website develop करने का बुनियादी माध्यम बन चुकी थी।

HTML 3.0
इस version के आने तक HTML बहुत popular हो चुकी थी। इस version में browsers के साथ compatibility problem होने की वजह से इस version को रोक दिया गया था। 

HTML 3.2 
इस version में पिछले version के बाद कुछ नए tags add किये गए। ये वो time था जब W3C ने website development के लिए HTML को standard घोषित किया था।  

HTML 4.01
इस version में कुछ नए tags के साथ ही cascading style sheet को भी introduce किया गया था। इस समय HTML पूरी तरह modern language बन चुकी थी|

HTML 5.0
ये HTML का latest version है। इसमें multimedia support के लिए कुछ नए tags provide किये गए है।

Created By Manjeet Singh...

Learn What Is HTML in Hindi...

Namaskar Dosto mera naam Manjeet hai aaj mai aap ko bataunga HTML Kya Hota Hai...


HTML से Website या Web Application बनाये जाते है यदि आप अपनी खुद की Website बनाना चाहते है और पैसे कमाना चाहते है तो HTML से अच्छा और सरल कोई रास्ता नहीं है यदि आपएक सफल Web Designer या Web Developer बनाना चाहते है, तो HTML को बहुत अच्छे से सीखना आपके लिए जरुरी है, क्योंकि इसमें HTML जड़ का काम करेगा और जितना जड़ को पानी दोगे यानि जितना अच्छे से आप HTML सीखोगे आपका Web Developing का ज्ञान बढ़ता जायेगा लोग अक्सर सोचते है की एक Website बनाना बहुत मुश्किल काम है पर ऐसा नहीं है हर कोई एक Website बनाना सीख सकता है बस आप में लगन होनी चाहिए HTML बहुत सरल भाषा है इसको सीखना कोई बड़ी बात नहीं है HTML से Website बनाना बहुत सरल है और यह नि: शुल्क है इसमें किसी Software की भी जरुरत नहीं पड़ती. 
HTML का पूरा नाम Hypertext Markup Language और यह Web पर सबसे व्यापक रूप से इस्तेमाल होने वाली Language है यह कोई Programming Language नहीं है यह एक Markup Language है. 
इस Blog की मदद से में आपको HTML के सभी Tags और Element एक एक करके समझाता जाऊंगा जिससे आपको यह आसानी से समझ आएगा और आप जल्दी ही इसे सीख जायेंगे. 
अब आपको यह तो पता चल गया की HTML से Website बनाई जाती है आइये Hypertext Markup Language का मतलब जानते है.
 
  • Hyper यह बताता है HTML में आनेवाला Text एक पुस्तक की तरह Liner (एक ही दिशा में) नहीं होता है. इसका अर्थ है की जब आप इंटरनेट पर काम कर रहे होते है और आपको अपनी रूचि वाला कोई Page देखना है तो आप सीधे है वह पर तुरंत पहुंच सकते है. यह कार्य hyperlink के द्वारा होता है? इसका अर्थ यह है की इंटरनेट पर दस्तावेजो को देखने का कोई निर्धारित क्रम नहीं होता है. (एक पुस्तक की तरह) Hyper शब्द Liner का एकदम अलग है! Liner का अर्थ होता है किसी भी काम को करने का एक क्रम जैसे "आपको यह कर पाने से पहले यह करना ही होगा!" HTML में यह नहीं होता और आप WWW पर कोई भी Page कभी भी देख सकते है.
  • Text यह बताता है की हम जिन Files पर काम करते है उनमे केवल Text ही लिखा जा सकता है.
  • Markup का मतलब है की Web Page बनाने के लिए हम सबसे पहले Text Type करते है, उसके बाद उस Text की Marking करते है! या ऐसे समझे की हमे HTML Coding करते समय यह बताना होता है की कौनसा Text Bold किया जाना है, कहा पर कोई Image लगानी है, यह काम आप Tags लगा के करते है, Tags, web browser को Page दिखाते समय यह निर्देश देते है की इस Page को कैसे Display करना है.
  • Language का मतलब है की हम अपना काम करने के लिए एक Language को उस के सभी के Syntexs के साथ काम में ले रहे है! यहाँ ध्यान देना जरुरी है की यह कोई Programming Language नहीं है! यह एक Scripting है! जिसमे Marking के द्वारा Web Document के Appearance को Control किया जाता है! internet के लिए HTML की खोज Team berners-Lee ने की थी.  
यदि आपके मन में कोई सवाल है तो हमसे  सम्पर्क करें. यदि आपको हमारा Blog पसंद आया तो Subscribe करना न भूले इससे आपको आगे Hindi Blog की नयी-नयी जानकारी आपके Email पर मिलती रहेगी.

Created By Manjeet Singh....

Explanation | Booting of Computer – Warm and Cold Booting | Learn About Computers |

Hello Everyone, Am Manjeet Singh and Today we will Discuss About  Booting of Computer – Warm and Cold Booting...  So Let's Start... ...