| Introduction to HTML |
|---|
| Introduction to HTML |
|---|
| HTML Attributes |
|---|
| HTML5 Semantic Elements |
|---|
| HTML Graphics |
|---|
HTML (HyperText Markup Language) is the standard markup language used for creating web pages. It describes the structure of a webpage semantically, and originally included cues for the appearance of the document.
What is HTML?
- HTML stands for Hyper Text Markup Language
- HTML is the standard markup language for creating Web pages
- HTML describes the structure of a Web page
- HTML consists of a series of elements
- HTML elements tell the browser how to display the content
Key Components of HTML
1. Elements and Tags:
- HTML documents are made up of HTML elements. These elements are represented by tags.
- Tags are enclosed in angle brackets. Most tags have an opening tag (e.g.,
<p>) and a closing tag (e.g.,</p>), with content in between.
2. Attributes:
- A basic HTML document has a defined structure that includes the
<!DOCTYPE html>declaration,<html>,<head>, and<body>tags.
Key Components of HTML
<!DOCTYPE html>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph of text on my webpage.</p>
</body>
</html>
Detailed Breakdown
<!DOCTYPE html>:- This declaration defines the document type and version of HTML. It helps browsers display web pages correctly.
<html>:- This is the root element of an HTML page. It encloses all other HTML elements.
<head>:- Contains meta-information about the HTML document, such as its title and links to scripts and stylesheets.
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,JavaScript">
<meta name="author" content="John Doe">
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
4. <body>:
- Contains the content of the HTML document, such as text, images, links, and other media.
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<img decoding="async" src="image.jpg" alt="An example image">
<a href="https://www.example.com" target="_blank" rel="noopener">This is a link</a>
</body>
Common HTML Elements
1. Headings:
- Defined with
<h1>to<h6>tags, where<h1>is the highest level and<h6>is the lowest.
<h1>Main Heading</h1>
<h2>Subheading</h2>
2. Paragraphs:
- Defined with the
<p>tag.
<p>This is a paragraph.</p>
3. Links:
- Created with the
<a>tag. Thehrefattribute specifies the URL of the page the link goes to.
<a href="https://www.example.com" target="_blank" rel="noopener">Visit Example.com</a>
4. Images:
- Defined with the
<img>tag. Thesrcattribute specifies the path to the image, and thealtattribute provides alternative text.
<img decoding="async" src="image.jpg" alt="An example image">
5. Lists:
- Ordered lists (
<ol>) and unordered lists (<ul>), with list items (<li>).
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<ol>
<li>First item</li>
<li>Second item</li>
</ol>
6. Tables:
- Defined with the
<table>tag, with rows (<tr>), headers (<th>), and data cells (<td>).
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
Advanced HTML Elements
1. Forms:
- Used to collect user input. Common form elements include
<input>,<textarea>,<select>, and<button>.
<form action="/submit-form" 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">
<label for="message">Message:</label>
<textarea id="message" name="message"></textarea>
<button type="submit">Submit</button>
</form>
2. Semantic Elements:
- Provide better structure and meaning to the document, such as
<header>,<footer>,<article>,<section>,<nav>, and<aside>.
<header>
<h1>Website Title</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Article Title</h2>
<p>This is the content of the article.</p>
</article>
</main>
<footer>
<p>Footer content here</p>
</footer>
HTML is a versatile language that forms the foundation of web development. Its elements and attributes allow for the creation of structured, well-organized, and accessible web pages. Understanding HTML is essential for anyone looking to develop or design websites.
