HTML ,CSS Complete Notes PDF Download in Hindi: Master the Basics and Beyond

HTML,CSS Complete Notes PDF Download in Hindi: Basics and Advanced

HTML language important tags, break most important questions full basic to advance level notes for IA exam Suchna sahayak, complete with CSS code and HTML language best type of easy to learn HTML in Hindi and English bilingual HTML notes PDF

Introduction:

HTML or HyperText Markup Language is the standard language used for creating web pages. It is a markup language that is used to structure the content of web pages. HTML is very important for those who want to learn web development. In this article, we will provide you with the best handwritten notes for HTML.

HTML Language Important Tags:

HTML is a markup language that uses tags to structure the content of web pages. Some of the important tags in HTML are:

<html>: This tag is used to start the HTML document.
<head>: This tag is used to define the head section of the HTML document.
<title>: This tag is used to define the title of the HTML document.
<body>: This tag is used to define the body section of the HTML document.
<h1> to <h6>: These tags are used to define the headings of the HTML document.
<p>: This tag is used to define paragraphs in the HTML document.
<a>: This tag is used to define hyperlinks in the HTML document.
<img>: This tag is used to define images in the HTML document.
<ul> and <li>: These tags are used to define unordered lists in the HTML document.
<ol> and <li>: These tags are used to define ordered lists in the HTML document.

Break Most Important Questions:

What is HTML?
What are the important tags in HTML?
What is the use of the <head> tag in HTML?
What is the use of the <body> tag in HTML?
What is the difference between <ul> and <ol> tags?
What is the use of the <img> tag in HTML?
What is the use of the <a> tag in HTML?
What is the difference between absolute and relative URLs?
What is the use of the <table> tag in HTML?
What is the use of the <form> tag in HTML?

1. Basic HTML Tags:

HTML is a markup language that uses tags to structure the content of web pages. Some of the basic HTML tags are

<html>, <head>, <title>, <body>, <h1> to <h6>, <p>, <a>, <img>, <ul> and <li>, <ol> and <li>.(code-box)

2. HTML Attributes:

HTML attributes are used to provide additional information about HTML elements. Some of the common HTML attributes are class, id, style, href, src, alt, and title.

3. CSS:

CSS or Cascading Style Sheets is used to style HTML elements. CSS can be used to change the color, font, size, and layout of HTML elements.

4. HTML Forms:

HTML forms are used to collect user input. HTML forms can be created using the <form> tag. Some of the common form elements are <input>, <textarea>, <select>, <option>, and <button>.

5. HTML Tables:

HTML tables are used to display data in a tabular format. HTML tables can be created using the <table>, <tr>, <td>, and <th> tags.

Complete with CSS Code:

CSS or Cascading Style Sheets is used to style HTML elements. CSS can be used to change the color, font, size, and layout of HTML elements. Here is an example of how to use CSS code to style an HTML element:

<style>

h1 {

(code-box)

color: red;

font-size: 36px;

text-align: center;

}

</style>(code-box)

Let's Start Learn HTML in Hindi Language and Learn in Easy Way, and Simple Language :-

1.HTML - हाइपरटेक्स्ट मार्कअप लैंग्वेज (HTML): HTML एक मानक(Standard) मार्कअप भाषा है जिसका उपयोग वेब पेज और एप्लिकेशन बनाने के लिए किया जाता है। यह TAG </> और attributes का उपयोग करके वेब पेज का structure और content को परिभाषित करता है।

2.CSS - Cascading Style Sheet (सीएसएस): सीएसएस का उपयोग किसी वेब पेज की दृश्य प्रस्तुति को स्टाइल और प्रारूपित करने के लिए किया जाता है। यह डेवलपर्स को वेब पेज के Layout, color, font और अन्य दृश्य पहलुओं को नियंत्रित करने की अनुमति देता है।

3.Javascript - जावास्क्रिप्ट एक प्रोग्रामिंग भाषा है जिसका उपयोग इंटरैक्टिव और गतिशील वेब पेज बनाने के लिए किया जाता है। यह डेवलपर्स को वेब पेजों में कार्यक्षमता, एनिमेशन और उपयोगकर्ता अन्तरक्रियाशीलता जोड़ने की अनुमति देता है।

HTML History:-

● 1989 में, ब्रिटिश कंप्यूटर वैज्ञानिक टिम बर्नर्स-ली ने यूरोपियन ऑर्गेनाइजेशन फॉर न्यूक्लियर रिसर्च(CERN) में काम करते हुए वर्ल्ड वाइड वेब का आविष्कार किया।

● 1991 में, बर्नर्स-ली ने वेब पेजों को व्यवस्थित करने और व्यवस्थित करने के तरीके के रूप में HTML का पहला संस्करण बनाया। यह मानक सामान्यीकृत मार्कअप लैंग्वेज (SGML) पर आधारित था, जो दस्तावेज़ मार्कअप के लिए एक मानक है।

● HTML का पहला संस्करण, HTML 1.0, 1993 में जारी किया गया था। यह केवल 18 टैग वाली एक सरल भाषा थी, जिसमें शीर्षक, पैराग्राफ और लिंक के लिए टैग शामिल थे।

● HTML 2.0 को 1995 में रिलीज़ किया गया था और इसमें टेबल, इमेज मैप और फॉर्म एलिमेंट्स जैसी नई सुविधाएँ शामिल थीं।

● HTML 3.2 को 1997 में जारी किया गया था और इसने फ्रेम, स्टाइल शीट, और तालिकाओं और रूपों के लिए बेहतर समर्थन जैसी नई सुविधाएँ पेश कीं।

● HTML 4.0 को 1997 में जारी किया गया था और इसमें तालिकाओं और रूपों में और सुधार शामिल थे, साथ ही कैस्केडिंग स्टाइल शीट (CSS), स्क्रिप्ट और मेटा-डेटा जैसी नई सुविधाएँ भी शामिल थीं।

● HTML 5 को 2014 में रिलीज़ किया गया था और यह HTML का वर्तमान संस्करण है। इसमें मल्टीमीडिया सपोर्ट, सिमेंटिक मार्कअप और बेहतर एक्सेसिबिलिटी जैसी नई सुविधाएँ शामिल हैं।

Start with HTML :-

1. "HyperText" हाइपरलिंक्स के माध्यम से टेक्स्ट, छवियों और अन्य मल्टीमीडिया तत्वों को एक साथ जोड़ने को संदर्भित (refer) करता है, जो उपयोगकर्ताओं को विभिन्न वेब पेजों और वेबसाइटों के बीच नेविगेट करने की अनुमति देता है।

2. "Markup": सामग्री की संरचना और स्वरूपण को इंगित करने के लिए टैग के उपयोग को संदर्भित करता है।

3. “Language”:: एक ऐसी भाषा जिसे कंप्यूटर सिस्टम समझता है और आदेशों की व्याख्या करने के लिए उपयोग करता है।

4. HTML वेब पेजों की संरचना निर्धारित करता है। वेब पेज को अच्छा और इंटरएक्टिव बनाने के लिए केवल यह संरचना ही काफी नहीं है। तो आप अपने HTML को सुंदर बनाने और क्रमशः अन्तरक्रियाशीलता जोड़ने के लिए CSS और JavaScript जैसी सहायक तकनीकों का उपयोग करेंगे।

5. HTML एक टेक्स्ट-आधारित भाषा है, जिसका अर्थ है कि आप एक साधारण टेक्स्ट एडिटर जैसे Notepad, TextEdit, VS Code या Sublime Text का उपयोग करके HTML कोड लिख सकते हैं। एक Basic Structure के साथ एक साधारण HTML फ़ाइल बनाकर प्रारंभ करें।

6. अधिक dynamic और interactive वेब पेज बनाने के लिए HTML को अन्य वेब तकनीकों जैसे CSS और जावास्क्रिप्ट के साथ जोड़ा जा सकता है। ये प्रौद्योगिकियां(technologies) अधिक advanced formatting और कार्यक्षमता(functionality) की अनुमति देती हैं, जैसे कि एनिमेशन, user interactivity और responsive design.

7. HTML का आउटपुट वेब ब्राउज़र(i.e. Chrome, Safari) में प्रदर्शित किया जा सकता है। HTML का उपयोग वेब पेज के content को structure और format करने के लिए किया जाता है, जिसमें टेक्स्ट, चित्र, वीडियो और अन्य मीडिया शामिल हो सकते हैं

8. जब हम एक HTML फ़ाइल बनाते हैं, तो आप इसे .html एक्सटेंशन के साथ save कर सकते हैं और फिर आउटपुट देखने के लिए इसे वेब ब्राउज़र में खोल सकते हैं। वेब ब्राउज़र HTML कोड को interprets करता है और उपयोग किए गए Tags और attributes के अनुसार content प्रदर्शित करता है।

URL:-

1. Uniform Resource Locator किसी वेबसाइट या वेब पेज के पते की तरह होता है। जैसे आपके पास अपने घर की गली का पता होता है, वैसे ही इंटरनेट पर किसी वेबसाइट या वेब पेज का अपना अलग पता होता है, जिसे URL कहा जाता है।

2. एक URL कई भागों से बना होता है जो आपके वेब ब्राउज़र को बताता है कि आप जिस वेबसाइट या वेब पेज को देखना चाहते हैं उसे कैसे खोजें या open करें ।

3. URL के पहले भाग को प्रोटोकॉल कहा जाता है। protocol को "http" या "https" कहा जाता है और यह आपके वेब ब्राउज़र को वेबसाइट से कनेक्ट करने के लिए इंटरनेट का उपयोग करने के लिए कहता है।

4. URL का दूसरा भाग डोमेन नाम(Domain Name) होता है, जो गली के नाम या उस इमारत के नाम जैसा होता है जिसे आप ढूँढ़ने का प्रयास कर रहे हैं। डोमेन नाम प्रत्येक वेबसाइट के लिए अद्वितीय(Unique) होता है और यह आपके वेब ब्राउज़र को इंटरनेट पर वेबसाइट का पता लगाने में मदद करता है।

5. URL का तीसरा भाग पथ है, जो वेबसाइट या उस वेब पेज के विशिष्ट स्थान जैसा होता है जिसे आप देखना चाहते हैं। यह आपके वेब ब्राउजर को बताता है कि आप जिस जानकारी की तलाश कर रहे हैं, वह वास्तव में कहां मिलेगी।

For Example https://www.bhagateducation.in or https://bhagateducation.in/

HTTPS: Hypertext Transfer Protocol Secure

WWW: World Wide Web
"www.bhagateducation.com/.in" : Domain Name
.com : top-level domain( .com TLD stands for "commercial", last part of a domain name in a URL, )

.org (for non-profit organisations),

.net (for network infrastructure),

.gov (for government websites),

.edu (for educational institutions), and country-specific TLDs like .in (for India) & many more like .co.in , .shop , .online

.in (india Top level Domain)

HTML TAG </>

1. HTML टैग का उपयोग वेब पेज की structure और content बनाने के लिए किया जाता है। टैग angle brackets(<&>) में संलग्न(enclosed) हैं और are placed around content to give it meaning and structure.

2. प्रत्येक HTML टैग का एक specific purpose होता है, जैसे Heading, Paragraph,, Link,, Image & Lists.

3. HTML टैग्स Lowercase में लिखे जाते हैं and many tags have attributes that can be used to provide additional information about the content.

4. टैग pairs में उपयोग किए जाते हैं, एक opening टैग (<टैग>) और एक closing टैग (</टैग>) के साथ, and the content to be formatted is placed between the tags.

5. कुछ टैग, जैसे <img> और <br>, self-closing होते हैं और उन्हें closing tag की आवश्यकता नहीं होती है।

6. वेब पेज के लिए एक nested संरचना बनाने के लिए HTML टैग एक दूसरे के अंदर nested हैं।

Most commonly used HTML Tags

1. <!DOCTYPE html>: यह एक टैग नहीं है, लेकिन यह एक महत्वपूर्ण declaration है जिसे यह specify करने के लिए आपके HTML दस्तावेज़ के top पर जोड़ा जाना चाहिए कि यह HTML5 में लिखा गया है। Case Sensitive होता है |

2. <html>: इस टैग का उपयोग HTML डॉक्यूमेंट की शुरुआत को परिभाषित करने के लिए किया जाता है। Everything within an HTML document should be contained within this tag.

3. <head>: इस टैग का उपयोग HTML डॉक्यूमेंट के हेड सेक्शन को परिभाषित करने के लिए किया जाता है। इस section में document के बारे में जानकारी है, जैसे पृष्ठ का शीर्षक और बाहरी स्टाइलशीट के लिंक।

4. <title>: इस टैग का उपयोग HTML दस्तावेज़ के शीर्षक को परिभाषित करने के लिए किया जाता है, जो ब्राउज़र के शीर्षक बार में दिखाई देता है।

5. <body>: इस टैग का उपयोग HTML डॉक्यूमेंट के बॉडी सेक्शन को परिभाषित करने के लिए किया जाता है। इस खंड में वह सामग्री है जो ब्राउज़र विंडो में प्रदर्शित की जाएगी।

6. <h1> से <h6>: इन टैग्स का उपयोग वेबपेज पर शीर्षकों को परिभाषित करने के लिए किया जाता है, जिसमें <h1> सबसे बड़ा और सबसे महत्वपूर्ण शीर्षक होता है, और <h6> सबसे छोटा और सबसे कम महत्वपूर्ण होता है।

7. <p>: इस टैग का प्रयोग टेक्स्ट के पैराग्राफ को परिभाषित करने के लिए किया जाता है।

8. <a>: इस टैग का उपयोग हाइपरलिंक को परिभाषित करने के लिए किया जाता है, जिसमें href विशेषता उस URL को निर्दिष्ट करती है जिसे हाइपरलिंक को इंगित करना चाहिए।

9. <img>: इस टैग का उपयोग छवियों को प्रदर्शित करने के लिए किया जाता है, जिसमें src attributes image फ़ाइल के URL को specify करता है।

10. <ul> और <li>: इन टैग का उपयोग items की एक unordered सूची बनाने के लिए किया जाता है, जिसमें प्रत्येक आइटम एक <li> टैग के भीतर होता है।

11. <ol> और <li>: इन टैग का उपयोग items की एक ordered सूची बनाने के लिए किया जाता है, जिसमें प्रत्येक आइटम एक <li> टैग के भीतर होता है।

12. <div>: इस टैग का उपयोग वेबपेज के भीतर एक डिवीजन या सेक्शन को परिभाषित करने के लिए किया जाता है, जिसका उपयोग संबंधित सामग्री को समूहित करने या CSS के साथ स्टाइल लागू करने के लिए किया जा सकता है।

13. <span>: इस टैग का उपयोग पैराग्राफ या अन्य ब्लॉक-लेवल एलिमेंट के भीतर टेक्स्ट के एक विशिष्ट सेक्शन में स्टाइल लागू करने के लिए किया जाता है।

इसके आलावा भी अन्य कई tags होते है जिनके बारे में हम प्रोजेक्ट बनाते हुए discuss करेंगे।

Here is simple coding of a HTML file. :-

<!DOCTYPE html>
<html>
   <head>
   <meta charset="UTF-8">
<title>My Web Page</title>
</head>
<body>
           <h1>Welcome to my web page!</h1>
   <p>This is a paragraph of text.</p>
           <h2>My favourite things</h2>
<ul>
       <li>Ice cream</li>
       <li>Puppies</li>
       <li>Beaches</li>
</ul>
<h2>My pet</h2>
       <p>Meet my dog:</p>
   <img src="dog.jpg" alt="A cute dog">
       <p>Isn't he adorable?</p>
<h2>Contact me</h2>
   <p>Send me an email at <ahref="mailto:myemail@example.com">myemail@example.com</a>.</p>
</body>
</html>

Copy above code & paste it into Notepad or any other TextEditor. Save the file by naming Index.html on Desktop. Open it & see the result. If you don’t have a computer you can do this by using an online html editor. - Notepad, Any Web Browser .

Type of TAG

HTML Tag मुख्यतः दो प्रकार के होते है।

1. Closed Tags: इन टैग्स में ओपनिंग टैग और क्लोजिंग टैग दोनों होते हैं, और content को इनके बीच रखा जाता है। उदाहरण के लिए, <p> टैग एक closed टैग है और इसका उपयोग पैराग्राफ बनाने के लिए किया जाता है। ओपनिंग टैग <p> है और क्लोजिंग टैग </p> है।

2. Single Tags: इन टैग्स को क्लोजिंग टैग</> की आवश्यकता नहीं होती है, और ये एक ही टैग के भीतर self-contained होते हैं। उदाहरण के लिए, <img> टैग एक single टैग है और छवियों को प्रदर्शित करने के लिए उपयोग किया जाता है। टैग इस तरह दिखता है: <img src="image.jpg" alt="description">. There is no need to </img>

यह नोट करना महत्वपूर्ण है कि विशिष्ट उपयोग के मामले के आधार पर कुछ टैग्स को बंद टैग या एकल टैग के रूप में उपयोग किया जा सकता है।

इसके अलावा हम इन्हे इस तरह से भी categorised कर सकते है -

1. Structural tags: <html> <head> <body>
2. Content tags: <p> <h1> to <h6> for Headings, <ul> and <ol> for lists, and <img> for images.
3. Semantic tags: <header> for the top section of a webpage, <nav> for a navigation menu, and <footer> for the bottom section of a webpage
4. Form tags: <form>, <input>, <select>, and <textarea>

Attributes:-

HTML tags can also have attributes, which provide additional information about the element. Here is some common attributes:

1. Class: इस attribute(विशेषता) का उपयोग किसी element को class आवंटित(assign) करने के लिए किया जाता है, जिसका उपयोग CSS के साथ element को stylish बनाने के लिए किया जा सकता है।

2. id: इस attribute का उपयोग किसी element को एक unique identifier देने के लिए किया जाता है, जिसका उपयोग css या Javascript के साथ element को target करने के लिए किया जा सकता है।

3. src: इस attribute का उपयोग किसी छवि या other resource के URL को specify करने के लिए किया जाता है।
4. href: इस attribute का उपयोग किसी लिंक के URL को specify करने के लिए किया जाता है।

5. alt: इस attribute का उपयोग छवि के लिए alternative text प्रदान करने के लिए किया जाता है, जिसका उपयोग स्क्रीन रीडर द्वारा किया जाता है और विकलांग उपयोगकर्ताओं के लिए यह उन्नत कार्य करता है।

6. style:: इस attribute का उपयोग किसी तत्व में inline styles को लागू करने के लिए किया जाता है, जैसे कि रंग या फ़ॉन्ट आकार सेट करना।7. type: इस attribute का उपयोग form element में इनपुट के प्रकार को specify करने के लिए किया जाता है, जैसे टेक्स्ट इनपुट के लिए type="text", type="number" या सबमिट बटन के लिए type="submit"
इसके आलावा अन्य कई attributes होते है जिन्हे web developers काम में लेते है।

HTML special characters :-

Name		Character
ampersand		&
double quotation mark		"
apostrophe		'
less-than sign		<
greater-than sign		>
non-breaking space
copyright symbol		©
registered trademark symbol		®
trademark symbol		™
cent symbol		¢
pound sterling symbol		£
euro symbol		€
bullet point		•
ellipsis		...
em dash		—

Another Simple Project of HTML -

<!DOCTYPE html>

<html>

<head>

<title>My First HTML Project</title>

<style>

body {

font-family: Arial, sans-serif;

background-color: #f2f2f2;

}

h1 {

color: blue;

text-align: center;

}

img {

width: 50%;

display: block;

margin: auto;

}

</style>

</head>

<body>

<h1>My First HTML Project</h1>

<nav>

<ul>

<li><a href="#about">About</a></li>

<li><a href="#services">Services</a></li>

<li><a href="#contact">Contact</a></li>

</ul>

</nav>

</header>

<main>

<h2>About Us</h2>

<p>Welcome to my first HTML project! We are a company that specialises in creating amazing websites that are both beautiful and functional. Our team of experts is dedicated to making sure that your website stands out from the rest.</p>

</section>

<h2>Our Services</h2>

<ul>

<li><strong>Web Design:</strong> We specialise in creating beautiful and responsive websites that will make your business stand out.</li>

<li><strong>Web Development:</strong> We can help you create a custom website that is tailored to your specific needs.</li>

<li><strong>SEO:</strong> We offer a wide range of SEO services to help your website rank higher on search engines.</li>

</ul>

</section>

<h2>Contact Us</h2>

<label for="email">Email:</label>

<label for="message">Message:</label>

</form>

</section>

</main>

</footer>

</body>

</html>

# Top Tags

HTML ,CSS Complete Notes PDF Download in Hindi: Master the Basics and Beyond

HTML,CSS Complete Notes PDF Download in Hindi: Basics and Advanced

Introduction:

HTML Language Important Tags:

Break Most Important Questions:

1. Basic HTML Tags:

2. HTML Attributes:

3. CSS:

4. HTML Forms:

5. HTML Tables:

Complete with CSS Code:

Let's Start Learn HTML in Hindi Language and Learn in Easy Way, and Simple Language :-

HTML History:-

Start with HTML :-

URL:-

HTML TAG </>

Most commonly used HTML Tags

Here is simple coding of a HTML file. :-

Type of TAG

HTML Tag मुख्यतः दो प्रकार के होते है।

Attributes:-

HTML special characters :-

Another Simple Project of HTML -

You May Like

Post a Comment

Social Plugin

Popular Posts

Categories

Labels

Most Viewed

Contact form