Exposure To HTML
1. HTML Document Structure
An HTML document consists of several essential components, including the < DOCTYPE> declaration, <html>, <head>, and <body> elements. Here’s a simple outline:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Title Here</title>
</head>
<body>
<!-- Content goes here -->
</body>
</html>
Basic Elements
- <title>: This tag defines the title of the document, which appears in the browser tab.
- <head>: Contains metadata about the document, including the title, character set, styles, scripts, and other meta information.
- <body>: This is where the content of the web page is placed, such as text, images, links, and other elements.
2.Working with Root and Metadata
- Root Element: The <html> tag is the root of the document and contains all other elements.
- Metadata: Includes various <meta> tags in the <head>, such as:
- <meta charset="UTF-8">: Specifies the character encoding.
- <meta name="viewport" content="width=device-width, initial-scale=1.0">: Ensures responsive design.
3.Horizontal Rules and Line Breaks
Horizontal Rule: The <hr> tag creates a horizontal line to separate content. Example:
html code:
Line Break: The <br> tag inserts a line break, allowing content to flow onto the next line without starting a new paragraph. Example:
html code:
Line two.
4. Paragraphs
Paragraph: The <p> tag defines a paragraph. Browsers automatically add space before and after a paragraph. Example:
html code:
5. Working with Citation, Quotation, and Definitions
Citation: The <cite> tag is used for titles of books, articles, etc. Example:
html code:
Quotation: The <blockquote> tag is used for longer quotations, usually displayed as an indented block. Example:
html code:
Inline Quotation: The <q> tag is for short quotations within a paragraph. Example:
html code:
Definition: The <dfn> tag indicates a term being defined. Example:
html code
6. Comments
HTML comments are not displayed in the browser and are useful for leaving notes in the code. They are written like this:
html code:
7. Types of Tags in HTML
HTML tags can be categorized as follows:
Block-level tags: These tags create a new block on the page and typically start on a new line. Examples include:
- <div>
- <p>
- <h1> to <h6>
- <ul>, <ol>, <li>
Inline tags: These tags do not start on a new line and are used within block-level elements. Examples include:
- <span>
- <a> (anchor/link)
- <strong>, <em>
Empty tags: These tags do not have closing tags and are self-contained. Examples include:
- <img> (for images)
- <br> (for line breaks)
- <hr> (for horizontal rules)
8. More HTML Elements
Headings
HTML provides six levels of headings, from <h1> to <h6>, where <h1> is the highest level and <h6> is the lowest.
- <h1>Main Heading</h1>
- <h2>Subheading</h2>
- <h3>Sub-subheading</h3>
Lists
Ordered List (<ol>): Creates a numbered list:
html code:
<ol>
<li>First item</li>
<li>Second item</li>
</ol>
Unordered List (<ul>): Creates a bulleted list.
html code:
<ul>
<li>Item one</li>
<li>Item two</li>
</ul>
Description List (<dl>): Used for a list of terms and descriptions.
html code:
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>
9. Links and Anchors
Anchor Tag (<a>): Creates hyperlinks to other pages or sections within a page. The href attribute specifies the URL.
html code:
Internal Links: To link to a specific section within the same page, use an id attribute.
html code:
<h2 id="section1">Section 1</h2>
<a href="#section1">Go to Section 1</a>
10. Images
Image Tag (<img>): Used to embed images. The src attribute specifies the image source, and alt provides alternative text for accessibility.
html code:
11. Tables
HTML tables are used to organize data in rows and columns.
html code:
<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>
12. Forms
Forms are used to collect user input.
html code:
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<input type="submit" value="Submit">
</form>
13. Semantic HTML
Using semantic tags helps convey meaning about the structure of your content, improving accessibility and SEO. Examples include:
- <header>: Represents introductory content.
- <nav>: Defines navigation links.
- <main>: Contains the main content of the document.
- <article>: Represents an independent piece of content.
- <section>: Defines a section in the document.
- <footer>: Contains footer information.
html code:
<header>
<h1>Website Title</h1>
</header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>
<main>
<article>
<h2>Article Title</h2>
<p>Article content goes here.</p>
</article>
</main>
<footer>
<p>© 2024 Your Website</p>
</footer>
14. Attributes
HTML elements can have attributes that provide additional information. Common attributes include:
- class: Used to define a class for styling.
- id: Used to uniquely identify an element.
- style: Inline CSS styles.
- title: Provides additional information as a tooltip on hover.
html code:
15. HTML Entities
Special characters in HTML can be represented using entities, such as:
- for non-breaking space
- < for less than (<)
- > for greater than (>)
- & for ampersand (&)
html code:
16. Responsive Design
Using the <meta> viewport tag in the <head> section helps make your web pages responsive on different devices.
html code:
good