Chapter 2 XHTML(Extensible HyperText Markup Language ) Introduction - Technology369kk

 XHTML

XHTML stands for EXtensible HyperText Markup Language. It is part of the family of XML markup languages and mirrors or extends versions of the widely used HyperText Markup Language (HTML), the language in which Web pages are formulated. XHTML was developed by World Wide Web Consortium (W3C) in 2002. It is the more extended version of the popular HTML and helps web developers to make the transition from HTML to XML. XHTML is HTML defined as an XML application, which combines the advantages of both HTML and XML.   

Table Of Content: 

• Introduction to XHTML, 

• Diffrence between HTML and XHTM

• Standard XHTML Document Structure

• Exam Based Question in  XHTML, 

• Example of XHTML

• Images

• Hypertext Links, 

• Links and Tables

• Creation of an XHTML Form, 

• Internal Linking and MetaElements, 

Introduction to XHTML:

• XHTML stands for Extensible Hypertext Markup Language. It is a markup language that extends the capabilities of HTML (Hypertext Markup Language) by conforming to the stricter rules of XML (eXtensible Markup Language). XHTML combines the flexibility of HTML with the strict syntax and structural rules of XML.

• XHTML was introduced as an alternative to HTML to provide a more standardized and well-formed approach to web development. It follows the syntax and rules of XML, which means that all tags must be properly nested, attribute values must be quoted, and elements must be closed correctly.

• The main goals of XHTML are to promote the separation of content and presentation, enhance the accessibility of web documents, and ensure cross-browser compatibility. By adhering to XHTML standards, developers can create web pages that are compatible with various devices and platforms, including desktop computers, mobile devices, and assistive technologies.

• XHTML documents can be created using plain text editors or specialized web development tools. The file extension for XHTML documents is typically ".xhtml" or ".html". However, it's worth noting that in recent years, HTML5 has become the dominant standard for web development, and the use of XHTML has significantly declined.

Diffrence between HTML and XHTML: 

HTML (Hypertext Markup Language) and XHTML (Extensible Hypertext Markup Language) are both markup languages used for creating web pages, but they have some key differences. Here are the main DIFFRENT between HTML and XHTML:

• Syntax: 
• HTML has a more lenient syntax compared to XHTML. It allows for certain errors such as unclosed tags and attribute values without quotes. 
• XHTML, on the other hand, follows the stricter syntax rules of XML, requiring well-formed and properly nested tags, quoted attribute values, and explicit closing of elements.

• DTD vs. XML Schema: 
• HTML has its Document Type Definitions (DTDs) for defining the rules and structure of an HTML document. 
• XHTML, being an XML application, uses XML Schemas or Document Type Definitions to define its structure and constraints.

• Compatibility: 
• HTML is widely supported by all web browsers, including older ones, even if the HTML code is not perfectly formed.
• XHTML, however, may not be rendered correctly by older browsers that do not support XML parsing or do not handle XHTML documents properly. This can result in rendering errors or display issues.

• MIME Type: 
• HTML documents are typically served with the MIME type "text/html".
• whereas XHTML documents use the MIME type "application/xhtml+xml". 
• This difference in MIME types indicates to the browser how the document should be parsed and processed.

• XML Conformance: 
• XHTML documents must adhere to the rules of XML, including well-formedness and validity. This means that XHTML documents must be properly structured, have correct element nesting, and use valid attribute values and entity references.

• Scripting: 
• HTML allows scripting languages like JavaScript to be embedded directly within the markup. 
• XHTML, being stricter, requires the use of separate script files or external resources for including scripting functionality.

• Case Sensitivity: 
• XHTML is case-sensitive, meaning that element and attribute names must be written in lowercase. 
• HTML, on the other hand, is case-insensitive, allowing both uppercase and lowercase element and attribute names.

It's important to note that HTML5, the latest version of HTML, incorporates some features from XHTML and has adopted a more XML-like syntax. This has blurred the lines between HTML and XHTML to some extent, and many modern web developers prefer using HTML5 over XHTML for its simplicity and wider browser compatibility.

Standard XHTML Document Structure: 

• An XHTML document consists of two parts, named the head and the body. The head element contains the head part of the document, which provides information about the document(meta data) and does not provide the content of the document. The body of a document provides the content of the document.

• The XHTML documents contains three parts, which are DOCTYPE, head and body2. The head section is used to declare the title and other attributes. The body tag contains the content of web pages. 

• An XHTML document must include an XHTML Doctype Declaration. Other required elements are the html, head, title, and body tags. 

Here is an example of an XHTML Document With Required Elements:  

<!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" xml:lang="en" lang="en">

<head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <title>Your Page Title</title>

  <!-- Additional meta tags, CSS links, or script references can be included here -->

</head>

<body>

  <!-- Your webpage content goes here -->

  <h1>Welcome to My Website</h1>

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

 

  <!-- Additional elements, sections, and content -->

    <!-- Heading elements, Body Elements, Footer Elements -->

 

</body>

</html>

There are Explain of Code : 

• Document Type Declaration (DTD): The <!DOCTYPE> declaration specifies the type of document and its version. In this example, we're using the XHTML 1.0 Strict DTD.

• <html> Element: The root element of the document. It wraps all the content within the HTML document.

• xmlns Attribute: The xmlns attribute defines the XML namespace for XHTML. In this case, it specifies the XHTML namespace.

• xml:lang and lang Attributes: These attributes define the language of the document. The xml:lang attribute is used for XML compliance, while the lang attribute is for human-readable information.

• <head> Element: This element contains meta information about the document, such as the character encoding, title, CSS links, or script references.

• <meta> Element: The <meta> element sets the character encoding for the document. In this example, it's set to UTF-8, which supports a wide range of characters.

• <title> Element: The <title> element defines the title of the webpage. It appears in the browser's title bar or tab.

• <body> Element: This element contains the visible content of the webpage, such as headings, paragraphs, images, links, and other HTML elements.

• Webpage Content: You can add various HTML elements within the <body> element to structure and present your webpage content. In the example, we have a heading (<h1>) and a paragraph (<p>).

You can extend the structure by adding more elements and sections as needed to organize your content and create a well-formed XHTML document. 

Exam Based Questions On XHTML: 

• Example of XHTML:

<!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" xml:lang="en" lang="en">

<head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <title>My XHTML Page</title>

  <style type="text/css">

    .highlight {

      color: red;

      font-weight: bold;

    }

  </style>

</head>

<body>

  <h1>Welcome to My XHTML Page</h1>

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

 

  <ul>

    <li>List item 1</li>

    <li>List item 2</li>

    <li>List item 3</li>

  </ul>

  <a href="https://technology369kk.blogspot.com/2023/05/html-frontend-complete-course-in.html"> Click For More</a>

 

  <p>This is a <span class="highlight">highlighted</span> text.</p>

 

  <img src="##.jpg" alt="Example Image" />

 

  <table>

    <tr>

      <th>Header 1</th>

      <th>Header 2</th>

    </tr>

    <tr>

      <td>Row 1, Cell 1</td>

      <td>Row 1, Cell 2</td>

    </tr>

    <tr>

      <td>Row 2, Cell 1</td>

      <td>Row 2, Cell 2</td>

    </tr>

  </table>

</body>

</html>

In this example, we have included various elements commonly used in XHTML:

• The <style> element is used to define CSS styles for the page.

• The <h1> element represents a heading.

• The <p> element is used for paragraphs of text.

• The <ul> element creates an unordered list, and <li> represents each list item.

• The <a> element creates a hyperlink to another page or resource.

• The <span> element is used to apply styling or class to a specific part of the text.

• The <img> element embeds an image in the page.

• The <table> element is used to create a table, and <tr> and <td> represent table rows and cells, respectively.

These elements demonstrate how XHTML can be used to structure and present content on a webpage while adhering to the rules and standards of XML. 

FOR MORE LEARN ABOUT THAT CLICK HERE:- HTML TOTURIAL