IWT UNIT 2 NOTES (HTML)
-------------------------------------Origin and evolution of html and xhtml ----------------------------------
HTML (Hypertext Markup Language) and XHTML (Extensible Hypertext Markup Language) are markup languages used to structure and present content on the web. To understand their origin and evolution, let's dive into their history and key milestones:
1. Origins of HTML:
- In the late 1980s, Tim Berners-Lee, a British scientist, invented the World Wide Web (WWW) while working at CERN (European Organization for Nuclear Research). He created HTML as a way to share and organize scientific documents.
- The first version of HTML, HTML 1.0, was released in 1993. It provided basic structural elements like headings, paragraphs, and lists, but lacked presentational features.
2. Evolution of HTML:
- HTML 2.0: Released in 1995, this version introduced several new elements and attributes for tables, images, and forms. It also introduced the concept of linking documents using anchors (links).
- HTML 3.2: This version, released in 1997, added support for frames, style sheets, and image maps, among other features.
- HTML 4.0 and 4.01: Released in 1997 and 1999, respectively, these versions brought significant improvements, such as better support for scripting (JavaScript) and multimedia embedding (audio and video). They also introduced stricter rules for coding and added new structural elements.
- HTML 5: HTML5 is a major revision that was first proposed in 2008 and officially released as a W3C Recommendation in 2014. It introduced numerous new elements, APIs (Application Programming Interfaces), and improved multimedia support. HTML5 aimed to enhance the web's capabilities, making it a more interactive and powerful platform.
3. Introduction of XHTML:
- As HTML evolved, the need for stricter rules and better interoperability across different platforms arose. XHTML was introduced as a reformulation of HTML using XML (eXtensible Markup Language) syntax, combining the best of both HTML and XML.
- XHTML 1.0: Published as a W3C Recommendation in 2000, XHTML 1.0 brought the stricter syntax of XML to HTML, making it more structured and easier for machines to parse. It required well-formedness, meaning all tags had to be closed and nested correctly.
- XHTML 1.1: Released in 2001, this version of XHTML was designed for compatibility with other XML-based technologies. It introduced modules, which allowed developers to define custom sets of elements and attributes.
- XHTML 2.0: This version was under development for several years but eventually abandoned in 2009. It aimed to be a complete redesign of HTML, focusing on stricter structure and modularity. However, it never gained wide adoption.
4. HTML5 and Beyond:
- HTML5 represented a shift in the web development landscape, focusing on native support for multimedia, semantic elements, offline storage, and improved accessibility. Its adoption has been widespread, and it continues to evolve with regular updates.
- As of now, the latest version of HTML is HTML5.3, which includes additional features and improvements over HTML5. It remains the dominant markup language for building web pages.
In summary, HTML and XHTML have a rich history that spans several decades. HTML has evolved from a simple markup language to a powerful platform for building web applications. XHTML, with its XML syntax, aimed to provide stricter rules and better interoperability. However, HTML5 emerged as the dominant standard, combining the best aspects of HTML and XML. Understanding the historical context and key features of HTML and XHTML will provide a solid foundation for your university exam.
----------------------------------------------Standard xhtml document ---------------------------------
A standard XHTML document structure follows a specific format to ensure compliance with the XHTML specification and maintain consistency across web pages. The structure consists of the following elements:
1. Document Type Declaration (DTD):
- The DTD declares the version of XHTML being used. For XHTML 1.0 Strict, the DTD declaration is as follows:
```html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
```
2. HTML Element:
- The HTML element serves as the root element of the XHTML document and encapsulates the entire page content.
```html
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- Page content goes here -->
</html>
```
3. Head Element:
- The head element contains metadata and other information about the document, including the title, character encoding, linked stylesheets, scripts, and more.
```html
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Page Title</title>
<!-- Additional metadata, stylesheets, scripts, etc. -->
</head>
```
4. Body Element:
- The body element represents the visible content of the document and contains all the elements that appear on the page.
```html
<body>
<!-- Page content goes here -->
</body>
```
It's important to note that XHTML requires elements to be properly nested and closed. Self-closing tags, like `<br />` and `<img />`, should be used when necessary.
Here's an example of a complete XHTML document structure:
```html
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Page Title</title>
<!-- Additional metadata, stylesheets, scripts, etc. -->
</head>
<body>
<!-- Page content goes here -->
</body>
</html>
```
Remember to replace "Page Title" with the actual title of your web page and include any necessary metadata, stylesheets, and scripts within the appropriate sections.
By adhering to this standard structure, you ensure the validity of your XHTML document and improve its compatibility across different web browsers and devices.
Why use XHTML?
- XHTML documents are validated with standard XML tools.
- It is easily to maintain, convert, edit document in the long run.
- It is used to define the quality standard of web pages.
- XHTML is an official standard of the W3C, your website becomes more compatible and accurate with many browsers.
Benefits of XHTML:
- All XHTML tags must have closing tags and are nested correctly. This generates cleaner code.
- XHTML documents are lean which means they use less bandwidth. This reduces cost particularly if your web site has 1000s of pages.
- XHTML documents are well formatted well–formed and can easily be transported to wireless devices, Braille readers and other specialized web environments.
- All new developments will be in XML (of which XHTML is an application).
- XHTML works in association with CSS to create web pages that can easily be updated.
Difference Between HTML and XHTML:
HTML XHTML
HTML or HyperText Markup Language is the main markup language for creating web pages
XHTML (Extensible HyperText Markup Language) is a family of XML markup languages that mirror or extend versions of the widely used Hypertext Markup Language (HTML)
Flexible framework requiring lenient HTML specific parser
Restrictive subset of XML which needs to be parsed with standard XML parsers
Proposed by Tim Berners-Lee in 1987 World Wide Web Consortium Recommendation in 2000.
Application of Standard Generalized Markup Language (SGML).
Application of XML
Extended from SGML.
Extended from XML, HTML
-----------------------------------Basic Text Markup-----------------------------------------------------
Basic text markup refers to the use of markup language elements or tags to format and style text within a document. Markup languages such as HTML and Markdown provide a set of tags or syntax that allow you to apply various formatting and styling options to text. These tags or syntax are interpreted by rendering engines or parsers to present the text in a specified format.
Here are some common examples of basic text markup:
1. Bold Text:
Markup: `<b>Text</b>` or `**Text**` (in Markdown)
Result: **Text**
2. Italic Text:
Markup: `<i>Text</i>` or `*Text*` (in Markdown)
Result: *Text*
3. Underlined Text:
Markup: `<u>Text</u>` (in HTML only)
Result: <u>Text</u>
4. Strikethrough Text:
Markup: `<s>Text</s>` or `~~Text~~` (in Markdown)
Result: ~~Text~~
5. Superscript Text:
Markup: `<sup>Text</sup>`
Result: Text
6. Subscript Text:
Markup: `<sub>Text</sub>`
Result: Text
7. Heading Levels:
Markup: `<h1>Text</h1>` (up to `<h6>`) or `# Text` (in Markdown, level determined by the number of `#` symbols)
Result: (Heading level dependent) Text
8. Lists:
Markup:
```html
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
```
Result:
- Item 1
- Item 2
9. Links:
Markup: `<a href="https://example.com">Link Text</a>` or `[Link Text](https://example.com)` (in Markdown)
Result: Link Text
10. Inline Code:
Markup: `<code>code</code>` or `` `code` `` (in Markdown)
Result: `code`
These are just a few examples of basic text markup options. Markup languages often provide a wide range of additional formatting and styling options, such as font size, color, alignment, and more. By using these markup elements, you can enhance the visual presentation of text in a document or webpage.
-------------------------------- image and links in HTML and xhtml-------------------------------
In HTML and XHTML, you can add images and hypertext links using specific elements and attributes. Here's how you can include images and create hypertext links in both HTML and XHTML:
Adding Images:
1. HTML Syntax:
```html
<img src="image.jpg" alt="Image Description">
```
The `src` attribute specifies the image source (URL or file path), and the `alt` attribute provides alternative text for accessibility purposes.
2. XHTML Syntax:
```html
<img src="image.jpg" alt="Image Description" />
```
In XHTML, the self-closing syntax requires a forward slash at the end of the `<img>` tag.
Creating Hypertext Links:
1. HTML Syntax:
```html
<a href="https://example.com">Link Text</a>
```
The `href` attribute specifies the target URL of the link. Clicking on the link text will navigate to the provided URL.
2. XHTML Syntax:
```html
<a href="https://example.com">Link Text</a>
```
The XHTML syntax for creating hypertext links is the same as in HTML.
Additionally, you can customize the appearance of links using CSS by targeting the `<a>` element.
Remember to replace `"image.jpg"` with the actual image URL or file path, and `"https://example.com"` with the desired URL for the hypertext link. Also, make sure to use proper file extensions (e.g., `.jpg`, `.png`) for image files.
It's important to note that in both HTML and XHTML, the `src` attribute and `href` attribute values can point to local files or external resources, depending on your specific use case.
Certainly! Here are the attributes commonly used for images and hypertext links in HTML and XHTML:
Attributes for Images:
1. `src` (required): Specifies the source URL or file path of the image.
Example: `<img src="image.jpg" alt="Image Description">`
2. `alt`: Provides alternative text for the image, which is displayed if the image fails to load or for accessibility purposes.
Example: `<img src="image.jpg" alt="Image Description">`
3. `width`: Specifies the width of the image in pixels or as a percentage.
Example: `<img src="image.jpg" alt="Image Description" width="300">`
4. `height`: Specifies the height of the image in pixels or as a percentage.
Example: `<img src="image.jpg" alt="Image Description" height="200">`
5. `title`: Provides a tooltip text that appears when hovering over the image.
Example: `<img src="image.jpg" alt="Image Description" title="Image Title">`
Attributes for Hypertext Links:
1. `href` (required): Specifies the target URL of the link.
Example: `<a href="https://example.com">Link Text</a>`
2. `target`: Specifies where the linked page will open. Common values include:
- `_blank`: Opens the linked document in a new tab or window.
- `_self`: Opens the linked document in the same tab or window.
- `_parent`: Opens the linked document in the parent frame.
- `_top`: Opens the linked document in the full body of the window.
Example: `<a href="https://example.com" target="_blank">Link Text</a>`
3. `rel`: Defines the relationship between the current document and the linked document. Common values include:
- `nofollow`: Instructs search engines not to follow the link.
- `noopener`: Specifies that the linked document should not have access to the opener document.
Example: `<a href="https://example.com" rel="nofollow">Link Text</a>`
4. `title`: Provides a tooltip text that appears when hovering over the link.
Example: `<a href="https://example.com" title="Link Title">Link Text</a>`
These attributes can be combined as needed to enhance the functionality and presentation of images and hypertext links in your HTML or XHTML documents.
----------------------------------------------lists and tables ------------------------------
Certainly! Here are the attributes commonly used for lists and tables in HTML and XHTML:
Attributes for Lists:
1. `<ul>` (Unordered List) and `<ol>` (Ordered List) Attributes:
- `type`: Specifies the type of list marker. For `<ol>`, common values include `1` (decimal numbers), `A` (uppercase letters), `a` (lowercase letters), `I` (uppercase Roman numerals), and `i` (lowercase Roman numerals).
Example: `<ol type="A">`
- `start`: Specifies the starting value for the list counter.
Example: `<ol start="5">`
- `reversed`: Specifies that the list items should be numbered in reverse order.
Example: `<ol reversed>`
2. `<li>` (List Item) Attributes:
- `value`: Specifies the value or number of the list item.
Example: `<li value="2">`
Attributes for Tables:
1. `<table>` (Table) Attributes:
- `border`: Specifies the thickness of the table border.
Example: `<table border="1">`
- `width`: Specifies the width of the table.
Example: `<table width="100%">`
- `cellspacing`: Specifies the space between cells.
Example: `<table cellspacing="5">`
- `cellpadding`: Specifies the space between cell content and cell borders.
Example: `<table cellpadding="10">`
- `summary`: Provides a summary or description of the table's purpose for accessibility purposes.
Example: `<table summary="Monthly Sales Report">`
2. `<th>` (Table Header Cell) and `<td>` (Table Data Cell) Attributes:
- `colspan`: Specifies the number of columns a header or data cell should span.
Example: `<th colspan="2">`
- `rowspan`: Specifies the number of rows a header or data cell should span.
Example: `<td rowspan="3">`
- `align`: Specifies the horizontal alignment of the content within a cell. Common values include `left`, `center`, `right`.
Example: `<td align="center">`
- `valign`: Specifies the vertical alignment of the content within a cell. Common values include `top`, `middle`, `bottom`.
Example: `<td valign="top">`
These attributes can be applied to `<ul>`, `<ol>`, `<li>`, `<table>`, `<th>`, and `<td>` elements to customize the appearance and behavior of lists and tables in your HTML or XHTML documents.
Certainly! Here are some examples of how you can use attributes for lists and tables in HTML and XHTML:
Attributes for Lists:
1. `<ul>` (Unordered List) and `<ol>` (Ordered List) Attributes:
- `type` attribute for `<ol>`:
```html
<ol type="A">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
```
- `start` attribute for `<ol>`:
```html
<ol start="5">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
```
- `reversed` attribute for `<ol>`:
```html
<ol reversed>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
```
2. `<li>` (List Item) Attributes:
- `value` attribute for `<li>`:
```html
<ol>
<li value="2">Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>
```
Attributes for Tables:
1. `<table>` (Table) Attributes:
- `border` attribute for `<table>`:
```html
<table border="1">
<!-- Table rows and cells go here -->
</table>
```
- `width` attribute for `<table>`:
```html
<table width="100%">
<!-- Table rows and cells go here -->
</table>
```
- `cellspacing` attribute for `<table>`:
```html
<table cellspacing="5">
<!-- Table rows and cells go here -->
</table>
```
- `cellpadding` attribute for `<table>`:
```html
<table cellpadding="10">
<!-- Table rows and cells go here -->
</table>
```
- `summary` attribute for `<table>`:
```html
<table summary="Monthly Sales Report">
<!-- Table rows and cells go here -->
</table>
```
2. `<th>` (Table Header Cell) and `<td>` (Table Data Cell) Attributes:
- `colspan` attribute for `<th>`:
```html
<tr>
<th colspan="2">Header Cell</th>
</tr>
```
- `rowspan` attribute for `<td>`:
```html
<tr>
<td rowspan="3">Data Cell</td>
<td>Data Cell</td>
</tr>
```
- `align` attribute for `<td>`:
```html
<tr>
<td align="center">Centered Cell</td>
<td align="right">Right-aligned Cell</td>
</tr>
```
- `valign` attribute for `<td>`:
```html
<tr>
<td valign="top">Top-aligned Cell</td>
<td valign="middle">Middle-aligned Cell</td>
<td valign="bottom">Bottom-aligned Cell</td>
</tr>
```
These examples demonstrate how you can use attributes to customize the behavior and appearance of lists and tables in your HTML or XHTML documents. Feel free to modify the attribute values and content according to your specific requirements.
------------------------------------------forms --------------------------------------------------------------
Certainly! Here are the attributes commonly used for forms in HTML and XHTML, along with example code and explanations:
1. `<form>` Attributes:
- `action` (required): Specifies the URL or file path where the form data should be submitted.
- `method` (required): Specifies the HTTP method for submitting the form, commonly `GET` or `POST`.
- `target`: Specifies where to display the response after submitting the form. Common values include `_blank` (new window or tab), `_self` (same window), `_parent` (parent frame), `_top` (full body of the window).
- `enctype`: Specifies how the form data should be encoded when submitting, especially for file uploads. Common values include `application/x-www-form-urlencoded`, `multipart/form-data`, and `text/plain`.
Example:
```html
<form action="/submit-form" method="POST" target="_blank" enctype="multipart/form-data">
<!-- Form elements go here -->
</form>
```
2. `<input>` Attributes:
- `type` (required): Specifies the type of input field, such as `text`, `password`, `email`, `checkbox`, `radio`, `file`, and more.
- `name` (required): Provides a unique name for the input field, which is used to identify the data when the form is submitted.
- `value`: Specifies the initial value of the input field.
- `required`: Specifies that the input field must be filled out before submitting the form.
- `placeholder`: Provides a short hint or example value to be displayed in the input field before the user enters their own value.
- `readonly`: Specifies that the input field is read-only and cannot be modified by the user.
Example:
```html
<input type="text" name="username" value="JohnDoe" required placeholder="Enter your username">
```
3. `<textarea>` Attributes:
- `name` (required): Provides a unique name for the textarea field, which is used to identify the data when the form is submitted.
- `rows`: Specifies the visible number of rows for the textarea.
- `cols`: Specifies the visible number of columns (characters per row) for the textarea.
- `placeholder`: Provides a short hint or example value to be displayed in the textarea.
Example:
```html
<textarea name="message" rows="4" cols="40" placeholder="Enter your message"></textarea>
```
4. `<select>` and `<option>` Attributes:
- `name` (required): Provides a unique name for the select field, which is used to identify the selected option(s) when the form is submitted.
- `multiple`: Specifies that multiple options can be selected (for multi-select).
- `size`: Specifies the visible number of options to display at a time.
- `disabled`: Specifies that the select field should be disabled and cannot be interacted with.
- `selected`: Specifies that an option should be pre-selected when the form is loaded.
Example:
```html
<select name="country">
<option value="usa">United States</option>
<option value="canada" selected>Canada</option>
<option value="uk">United Kingdom</option>
</select>
```
5. `<button>` Attributes:
- `type` (required): Specifies the behavior of the button. Common values include `submit` (submits the form), `reset` (resets form fields), and `button` (default button behavior).
- `name`: Provides a name for the button,
which is used to identify the button when the form is submitted.
- `value`: Specifies the value to be sent to the server when the form is submitted (if the button is included in the form data).
Example:
```html
<button type="submit" name="submit-button">Submit</button>
```
These attributes can be combined and customized based on your specific form requirements. The examples provided demonstrate the usage of attributes for various form elements in HTML or XHTML.
----------------------------syntatic difference b/w HTML and xhtml------------
The semantic difference between HTML and XHTML lies in their syntax and rules for document structure. Here are the key semantic differences between HTML and XHTML:
1. Syntax and Document Structure:
- HTML: HTML has a more lenient syntax with optional closing tags and case-insensitive element and attribute names. It allows for more flexibility and forgiveness in writing markup.
- XHTML: XHTML follows stricter rules based on XML syntax. It requires all elements and attributes to be properly nested and closed, and all tags must be written in lowercase. XHTML documents must also be well-formed XML, meaning they must have a root element and adhere to XML rules.
2. Error Handling:
- HTML: HTML parsers are designed to handle various errors and inconsistencies in markup. They are more forgiving and attempt to render the document even if there are syntax errors.
- XHTML: XHTML parsers strictly follow the XML rules. If there are any syntax errors, the parsing process stops, and the document is considered invalid. XHTML requires well-formed and valid XML syntax.
3. MIME Type:
- HTML: HTML documents are served with the MIME type `text/html`.
- XHTML: XHTML documents are served with the MIME type `application/xhtml+xml`. This indicates that the document is served as XML, requiring proper XML parsing.
4. Extensibility:
- HTML: HTML is not easily extensible. Adding custom elements or attributes may not be recognized by the browser and can lead to compatibility issues.
- XHTML: XHTML follows XML rules, allowing for custom elements and attributes through the use of namespaces. This provides a more structured and extensible markup language.
5. Compatibility:
- HTML: HTML documents are compatible with a wide range of browsers, as they are designed to handle the lenient HTML syntax.
- XHTML: XHTML documents require stricter adherence to XML rules. Older browsers may have limited support for XHTML, as they were primarily designed for HTML.
I apologize for the confusion. You are correct, the differences between HTML and XHTML are primarily syntactic, rather than semantic. Here are the key syntactic differences between HTML and XHTML:
1. Syntax Rules:
- HTML: HTML has a more lenient syntax, allowing for optional closing tags and case-insensitive element and attribute names. Tags and attributes can be written in uppercase or lowercase.
- XHTML: XHTML follows stricter syntax rules based on XML. All elements and attributes must be properly nested and closed, and all tags must be written in lowercase. XHTML requires strict adherence to XML rules.
2. Self-Closing Tags:
- HTML: In HTML, certain elements, such as `<br>`, `<img>`, and `<input>`, can be written as self-closing tags without a closing slash.
- XHTML: In XHTML, all elements must be properly closed, including those that are self-contained. Self-closing tags must be written with a closing slash, like `<br />`, `<img />`, and `<input />`.
3. Attribute Quotation:
- HTML: In HTML, attribute values can be enclosed in either single quotes (`'`) or double quotes (`"`), or they can be left unquoted if they don't contain spaces or special characters.
- XHTML: In XHTML, attribute values must be enclosed in double quotes (`"`). Single quotes are not considered valid for attribute values.
4. Entity References:
- HTML: HTML has a set of predefined entity references, such as `&` for ampersand (`&`), `<` for less-than symbol (`<`), `>` for greater-than symbol (`>`), etc. These entity references are optional and can be used interchangeably with the corresponding characters.
- XHTML: XHTML requires the use of predefined entity references for reserved characters, such as `&`, `<`, `>`, etc. These entity references must be used instead of the corresponding characters to ensure well-formed XML.
These syntactic differences between HTML and XHTML primarily revolve around the strictness of syntax rules and adherence to XML standards. XHTML enforces stricter syntax rules to ensure well-formed XML documents, while HTML provides more leniency and flexibility in its syntax.
It's important to note that while XHTML is stricter and more structured than HTML, its usage has declined in favor of HTML5. HTML5 provides improved semantic elements, form validation, and better compatibility with modern web standards, making it the preferred choice for most web development scenarios.
HTML vs. XHTML
| HTML | XHTML |
|---|---|
| 1. HTML is an SGML-based language. That is, it defines the standard for generalizing the markup languages for documents. SGML stands for Standard Generalized Markup Language. | 1. XHTML is an XML-based language, which means it manipulates and processes data using XML technologies. |
| 2. HTML is not a case-sensitive language. | 2. XHTML is a case-sensitive language. |
| 3. HTML empty elements do not require a closing tag at the end, not even a "/" symbol to signify the end of the tag. | 3. XHTML empty elements must always be closed; that is, there must be a "/" symbol at the end of the empty element. |
| 5. The tags and attributes in HTML can be specified either in lowercase or uppercase since it is not case-sensitive. | 5. All XHTML elements and attributes must be in lowercase since it is a case-sensitive language. |
| 6. The HTML document requires a minimum of four tags to create an HTML page that is <html>, <head>, <title>, and <body>. The <!DOCTYPE> declaration is not necessary for HTML. | 6. An XHTML document must contain the <!DOCTYPE> declaration followed by the <html>, <head>, <title>, and <body> tags in its document to create a webpage. Moreover, the xmlns attribute in <html> tag is also necessary. |
| 7. Some HTML elements may function properly without a closing tag. | 7. All the XHTML elements must be closed. Even the empty elements also require a closing tag. |
| 8. Some elements in HTML may be improperly nested; that is, they do not need to be closed in the order in which they are opened. | 8. All XHTML elements, however, must be properly nested within each other; that is, they must be closed in the order in which they were opened. |
| 9. It is not mandatory to put quotes while using the attributes in HTML. | 9. It is mandatory to put quotes around an attribute in XHTML. |
| 10. It allows attribute minimization, where boolean attributes can omit their values. For example, "checked". | 10. It does not allow attribute minimization. All the attributes must be written in full attribute-value pairs. |
| 11. The webpage is displayed even if the HTML document has some errors in it. | 11. There is a more strict error handling in XHTML. |
| 12. It can have a filename extension of.html or.htm. | 12. Its filename extension can be .xhtml,.xht, or .xml. |
Comments
Post a Comment