web

XHTML, Introduction and Benefits of CSS, CSS Syntax

by
with no comment
Contents hide
1 Introduction of XHTML
1.1 Advantage of XHTML
1.2 XHTML Syntax
1.3 Document Structure of XHTML
2 Introduction of CSS
2.1 Benefits of CSS
2.2 CSS Syntax

Introduction of XHTML

Extensible Hypertext Markup Language (XHTML) Web Technology में एक महत्वपूर्ण Markup Language है, जो Web Document के Structure और Content को Define करने में महत्वपूर्ण Role निभाती है। XHTML, HTML (Hypertext Markup Language) के Development के रूप में कार्य करता है, जो XML (Extensible Hypertext Markup Language) और HTML के Feature को मिलाकर एक अधिक Structured, Well-Formed और Universally रूप से Compatible Markup Language बनाता है।

Advantage of XHTML

XHTML को HTML की Limitations और Ambiguities को Remove करने के लिए Launch किया गया था। XML Rule का Follow करके XHTML यह सुनिश्चित करता है, कि Web Document सही ढंग से Formatted हैं| और एक Well-Defined Structure का पालन करते हैं, जिससे वे Human Reader और Web Browser दोनों के लिए अधिक Accessible हो जाते हैं। XHTML का use करने के कुछ प्रमुख Advantages Include हैं-

  • Compatibility: XHTML Document को HTML और XML Parsers दोनों द्वारा Parsed और Render किया जा सकता है, जो Cross-Browser Compatibility और Web Standard का पालन सुनिश्चित करता है।
  • Consistency: XHTML एक Strict Syntax लागू करता है, जिससे Web Document में Error और Inconsistencies की संभावना कम हो जाती है।
  • Accessibility: XHTML Semantic Markup के उपयोग को बढ़ावा देता है, जिससे Web Content Assistive Technologies और Search Engine के लिए अधिक Accessible हो जाती है।
  • Future-Proofing: XHTML Standards का पालन आपकी Web Content को Future-Proofs बनाता है| यह सुनिश्चित करता है, कि यह Develop हो रही Web Technologies के साथ Compatible बनी रहे।

XHTML Syntax

XHTML Syntax काफी हद तक HTML से मिलता-जुलता है। यह Element के बारे में Additional Information Provide करने के लिए Content और Attributes को Structured करने के लिए Tag का use करता है। हालाँकि, XHTML में HTML की तुलना में Strict Rule हैं। यहां XHTML Syntax के कुछ आवश्यक पहलू दिए गए हैं-

Document Structure of XHTML

प्रत्येक XHTML Document में निम्नलिखित Components के साथ एक Well-Defined Structure होनी चाहिए|



<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<title>My XHTML Page</title>

</head>

<body>

<!– Content goes here –>

</body>

</html>
  • <!DOCTYPE> Declaration: Document Type और Version Specify करता है।
  • <html> Element: Root Element जो Entire Document को Enclose करता है।
  • <head> Element: Document के बारे में Meta Information Include होती है।
  • <Title> Element: Document के Title को Define करता है।
  • <body> Element: इसमें Web Page की Visible Content Include होती है।

XHTML Elements and Tags

XHTML Element Tag में Enclosed हैं| Tag Case-Sensitive होते हैं, और Proper Nesting की आवश्यकता होती है।

Example:



<p>This is a <strong>strong</strong> paragraph.</p>

XHTML Attributes

Attributes Element के बारे में Additional Information Provide करती हैं। उनका Value हमेशा Quotes में Enclose होना चाहिए।

Example:



<img src=”image.jpg” alt=”An example image” />

Example: XHTML Document



<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<title>My First XHTML Page</title>

</head>

<body>

<h1>Welcome to XHTML</h1>

<p>This is a <strong>sample</strong> XHTML document.</p>

<ul>

<li>Item 1</li>

<li>Item 2</li>

<li>Item 3</li>

</ul>

</body>

</html>

Output:

Introduction of CSS

Cascading Style Sheets (CSS) एक Style Sheet Language है, जिसका उपयोग HTML जैसी Markup Language में लिखे Document के Presentation को Describe करने के लिए किया जाता है। यह Developers और Designers को एक साथ कई Web Pages के Layout और Appearance को Control करने की Permission देता है, जिससे पूरी Website पर एक Consistent View और Experience मिलता है। किसी Web Page के Content को उसके Design से अलग करके CSS, Large-Scale Website को Manage की Process को सरल बनाता है| और देखने में आकर्षक User-Friendly Interface के निर्माण को सक्षम बनाता है।

Benefits of CSS

  • Consistent Design: CSS कई Web Page पर Consistent Design बनाने की Permission देता है। Single External File में Styles को Define करके Developers यह सुनिश्चित कर सकते हैं, कि Same Design पूरी Website पर समान रूप से Apply होते हैं, जिससे एक Cohesive User Experience की सुविधा मिलती है।
  • Easy Maintenance: CSS के साथ, Developers External CSS File में Style को Modify करके आसानी से किसी Website के Design में Global Changes कर सकते हैं। यह सुविधा किसी Website के Design और Layout को Update करने की Process को महत्वपूर्ण रूप से सरल बनाती है, क्योंकि CSS File में किए गए परिवर्तन Automatically रूप से इसे Reference करने वाले सभी Pages पर Apply होते हैं।
  • Faster Page Loading: Content को Presentation से अलग करके CSS, Fast Page Loading Time Enable करता है। चूंकि Styling Information Externally रूप से Store की जाती है, Browser CSS File को Cash कर सकता है, जिससे बाद के Page Cached Style को फिर से Download करने के बजाय Reference करके अधिक Fast Load हो सकते हैं।
  • Responsive Design: CSS, Responsive Web Design के निर्माण की सुविधा देता है| जो विभिन्न Screen Size और Device के अनुकूल होते हैं। Media Queries और Flexible Layout Techniques का use करके Developers यह सुनिश्चित कर सकते हैं, कि उनकी Website Desktops, Tablets और Smartphones सहित विभिन्न Device पर एक Optimal देखने का Experience Provide करती हैं।

CSS Syntax

CSS Syntax में Rule का एक Set होता है, जो HTML Document में विभिन्न Element के लिए Styling Properties को Define करता है। प्रत्येक Rule में एक Selectors और एक Declaration Block शामिल होता है। Selector HTML Element की पहचान करता है, जिस पर Style Rule लागू किए जाएंगे| जबकि Declaration Block, Style Properties और उनके Corresponding Value को निर्दिष्ट करता है।

Example: CSS



/* Selects all the <p> elements and sets their text color to red */

p {

color: red;

}


/* Selects the element with the ID “header” and sets its background color to light blue */

#header {

background-color: lightblue;

}


/* Selects all elements with the class “btn” and sets their font size to 16 pixels */

.btn {

font-size: 16px;

}

Example: HTML with CSS



<!DOCTYPE html>

<html>

<head>

<style>

/* CSS styles */

h1 {

color: blue;

}

p {

color: red;

}

</style>

</head>

<body>


<h1>This is a heading</h1>

<p>This is a paragraph.</p>


</body>

</html>
Post Views: 275
Tags: No tags

Add a Comment

Your email address will not be published. Required fields are marked *