| Introduction to HTML |
|---|
| Introduction to HTML |
|---|
| HTML Attributes |
|---|
| HTML5 Semantic Elements |
|---|
| HTML Graphics |
|---|
Html Tutorial
HTML Basics
HTML Document Structure
An HTML document consists of several elements, including:
- DOCTYPE Declaration: Specifies the HTML version being used. For HTML5, it is
<!DOCTYPE html>. - html Element: The root element of an HTML page, which contains all other elements. It is represented by the
<html>tag. - head Element: Contains meta-information about the document, such as the title, character set, and links to external resources like stylesheets and scripts. It is represented by the
<head>tag. - body Element: Contains the content of the document, such as text, images, and other media. It is represented by the
<body>tag.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My First HTML Page</title>
</head>
<body>
<h1>Welcome to My Webpage</h1>
<p>This is a paragraph of text.</p>
<a href="https://www.example.com" target="_blank" rel="noopener">Visit Example.com</a>
</body>
</html>
HTML Elements and Tags
HTML elements are defined by tags, which consist of a start tag and an end tag, with the content in between. Some elements are self-closing and do not require an end tag.
- Start Tag: ‘
<tagname>‘ - End Tag: ‘
</tagname>‘ - Self-Closing Tag: ‘
<tagname />‘
For example:
- Paragraph element: ‘
<p>This is a paragraph'.'</p>' - Line break element: ‘
<br />‘ (self-closing)
Attributes
HTML elements can have attributes that provide additional information about the element. Attributes are always specified in the start tag and usually come in name/value pairs like ‘name="value"‘.
For example:
- Link element with attributes:
<a href="https://www.example.com" target="_blank">Visit Example.com</a>
Common attributes include:
id: Specifies a unique id for an element.class: Specifies one or more class names for an element (used for CSS and JavaScript).src: Specifies the source file for media elements like images and videos.href: Specifies the URL of a link.
Semantic Elements
HTML5 introduced several semantic elements that provide more meaningful descriptions of the content. Examples include:
<header>: Defines a header for a document or section.<nav>: Defines a container for navigation links.<article>: Defines an independent, self-contained content.<section>: Defines a section in a document.<footer>: Defines a footer for a document or section.
Forms
Forms are used to collect user input. The <form> element encompasses various form controls like text fields, checkboxes, radio buttons, and submit buttons.
For example:
<form action="/submit_form" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<input type="submit" value="Submit">
</form>
Tables
Tables are used to display tabular data. They are defined using the ‘<table>‘ element, with rows defined by ‘<tr>‘, and cells defined by ‘<td>‘ (for data cells) and ‘<th>‘ (for header cells).
For example:
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>30</td>
</tr>
<tr>
<td>Jane</td>
<td>25</td>
</tr>
</table>
Media Elements
HTML supports multimedia elements like images, audio, and video:
- Image:
<img src="image.jpg" alt="Description"> - Audio:
<audio controls><source src="audio.mp3" type="audio/mpeg"></audio> - Video:
<video controls><source src="video.mp4" type="video/mp4"></video>
Inline vs Block-Level Elements
HTML elements are categorized as either inline or block-level:
- Inline Elements: Do not start on a new line and only take up as much width as necessary (e.g.,
<span>,<a>,<img>). - Block-Level Elements: Start on a new line and take up the full width available (e.g.,
<div>,<p>,<h1>).
HTML5 APIs
HTML5 introduced several APIs (Application Programming Interfaces) to enhance web functionality, including:
- Canvas API: Allows for drawing graphics via JavaScript.
- Geolocation API: Provides access to the user’s location.
- Local Storage: Allows for storing data locally in the browser.
HTML is a powerful and flexible language that forms the foundation of the web. By understanding its structure, elements, attributes, and capabilities, developers can create rich and interactive web pages.
