UNIT-2

Creating DOM

Creating a DOM (Document Object Model) typically refers to dynamically generating HTML elements using JavaScript. This allows you to manipulate the structure and content of a webpage dynamically, without needing to reload the entire page from the server.

DocType

In HTML, the <!DOCTYPE> declaration is used to specify the version and type of the document being served. It stands for "Document Type Declaration." This declaration is placed at the very beginning of an HTML document, before the <html> tag.

The <!DOCTYPE> declaration is not an HTML tag; it's an instruction to the web browser about what type of document it is going to render. It helps the browser to render the content correctly by switching to the appropriate rendering mode.

Character Encording

Character encoding is a method used in computing to represent characters from different languages and symbol sets within a document or piece of text. It's crucial for ensuring that text is displayed and interpreted correctly across different systems and software.

There are several character encoding standards, each designed to support specific languages and character sets. Some common character encoding standards include:

UTF-8 (Unicode Transformation Format 8-bit): UTF-8 is the most widely used character encoding on the web. It supports a wide range of characters from various languages and symbol sets, including ASCII characters. UTF-8 is backward-compatible with ASCII, meaning that ASCII characters are represented using a single byte, while characters from other scripts may use multiple bytes.

UTF-16 (Unicode Transformation Format 16-bit): UTF-16 represents each character in the Unicode character set with either one or two 16-bit code units. It can represent a wider range of characters than UTF-8 but may require more memory due to its use of 16-bit code units.

ISO-8859-1 (Latin-1): ISO-8859-1 is a character encoding standard that supports the Latin alphabet used by many Western European languages. It does not support characters from other scripts or languages.

ASCII (American Standard Code for Information Interchange): ASCII is one of the oldest character encoding standards and only supports characters from the English alphabet, digits, punctuation marks, and control characters.

ISO-8859-, Windows-125, etc.: There are several other encoding standards, each designed to support specific languages or regions.

Deprecated Elements

Deprecated elements in HTML are those that have been officially discouraged or obsolete in the latest HTML specifications. While web browsers may still support these elements for backward compatibility, their usage is discouraged, and developers are encouraged to use modern alternatives. Deprecated elements may be removed from future HTML specifications altogether.

<center>: Used to center-align text or elements within its containing block. Instead, CSS should be used for layout and alignment, such as text-align: center for text alignment.
<font>: Used to specify font size, color, and face for text. Instead, CSS should be used for styling text, such as the font-size, color, and font-family properties.
<strike> and <s>: Used to represent strikethrough text. Instead, CSS should be used with the text-decoration property set to line-through.
<big> and <small>: Used to adjust the size of text relative to its parent element. Instead, CSS should be used for font size adjustments.
<tt>: Used to represent teletype or monospaced text. Instead, CSS should be used with the font-family property set to a monospaced font, such as font-family: monospace.

HTML5 Document (section, article, aside, header, footer, nav, dialog, figure)

header: The <header> element represents introductory content, typically containing headings, logos, navigation menus, and other introductory content for its nearest ancestor sectioning content or sectioning root element. In this example, it contains the website's main heading (<h1>) and a navigation menu (<nav>).
nav: The <nav> element represents a section of the document intended for navigation links. It typically contains a list of links to other pages or sections within the website.
section: The <section> element defines a section in a document. It groups together related content and typically represents a thematic grouping of content, such as chapters, headers, footers, or any other content grouping.
article: The <article> element represents a self-contained piece of content that could be distributed and reused independently, such as a blog post, news article, forum post, or comment. It can include headings, paragraphs, images, etc.
aside: The <aside> element represents content that is tangentially related to the content around it, such as sidebars, pull quotes, or advertisements. It's typically used for content that is not the main focus of the document but provides additional context or related information.
footer: The <footer> element represents a footer for its nearest sectioning content or sectioning root element. It typically contains information such as copyright notices, contact information, or links to related documents.
dialog: The <dialog> element represents a dialog box or other interactive component. It can contain text, buttons, forms, or any other content that might appear in a dialog window.
figure: The <figure> element represents self-contained content, typically with an optional caption (<figcaption>). It's commonly used to encapsulate images, diagrams, illustrations, code snippets, etc., along with their captions.

Script Tag

The <script> tag in HTML is used to include JavaScript code either directly within the tag or by referencing an external JavaScript file using the src attribute. It can be placed in the <head> or <body> section of an HTML document. The type attribute, specifying the scripting language, is optional in HTML5.

Link Tag

The <link> tag in HTML is used to link external resources such as stylesheets, favicons, and alternate documents. It is commonly used to attach CSS files to HTML documents, but it can also be used for other purposes such as defining relationships between documents or specifying the location of icons.

1. Linking CSS Stylesheets: The <link> tag is commonly used to link external CSS stylesheets to HTML documents. This allows you to separate the presentation (CSS) from the content (HTML) of a web page.

2. Defining Relationships: The rel attribute specifies the relationship between the current document and the linked resource. For stylesheets, it's typically set to "stylesheet".

3. Specifying the Resource Location: The href attribute specifies the URL of the linked resource (e.g., a CSS file). Relative or absolute URLs can be used.

Web Forms In Detail

Web forms are an essential part of web development, allowing users to interact with websites by submitting data, such as text inputs, checkboxes, radio buttons, and file uploads. Here's a detailed overview of web forms:

HTML Form Structure: Forms are created using the <form> element in HTML. The form element contains various types of input fields, buttons, and other elements for collecting and submitting data. The action attribute specifies the URL to which the form data should be submitted, and the method attribute specifies the HTTP method to be used (usually GET or POST).

<form action="/submit-form" method="post">
<input type="text" name="username" placeholder="Username">

<input type="password" name="password" placeholder="Password">

<button type="submit">Submit</button>
</form>
Input Types: HTML provides various input types for different kinds of data:
- Text input: <input type="text">
- Password input: <input type="password">
- Checkbox: <input type="checkbox">
- Radio button: <input type="radio">
- File upload: <input type="file">
Form Controls: Apart from input fields, forms can contain other types of controls such as buttons (<button>, <input type="button">, <input type="submit">, <input type="reset">), text areas (<textarea>), and labels (<label>).
Form Submission: When the user submits a form, the browser sends the form data to the server specified in the action attribute. The method used for submitting the data can be either GET or POST. GET appends the form data to the URL as query parameters, while POST sends the data in the request body.