HTML5 Tutorial for Beginners
1. Introduction to HTML
- What is HTML?
HTML (HyperText Markup Language) is used to create the structure of web pages. Every webpage
you see on the internet is made using HTML.
- Basic HTML Document Structure:
Here is an example of a basic HTML document:
<!DOCTYPE html> --> This defines the document type. HTML5 requires this declaration.
<html> --> This is the root element of the page.
<head> --> Contains meta information like the page title.
<title> --> The title displayed in the browser tab.
</head>
<body> --> The main content of the page.
<h1>This is a Heading</h1> --> Heading elements define the titles on the webpage.
<p>This is a paragraph.</p> --> Paragraphs contain text content.
</body>
</html>
- Key Elements:
- `<html>`: The root element that defines the entire document.
- `<head>`: Contains metadata like the page title and external resources (CSS, JS).
- `<body>`: Contains the visible content of the page.
- `<h1>` to `<h6>`: Heading tags, `<h1>` is the largest, `<h6>` is the smallest.
- `<p>`: Paragraph tag that holds blocks of text.
Project: Create a Simple HTML Page
- Create an HTML page with a heading and a paragraph, using the structure above.
2. HTML Tags and Elements
- Headings and Paragraphs:
Headings are defined with the <h1> to <h6> tags. Paragraphs are created with the <p> tag.
- Links:
The <a> tag is used to create hyperlinks. Example:
<a href="https://example.com">Visit Example</a>
- Lists:
There are two types of lists: ordered (<ol>) and unordered (<ul>). Example:
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
Project: Create a Blog Post Layout
- Create a blog layout using headings, paragraphs, and a list of links.
3. HTML Attributes
- Attributes provide additional information about HTML elements.
- `id`: Uniquely identifies an element.
- `class`: Groups multiple elements for CSS styling or JavaScript manipulation.
- `title`: Provides extra information shown as a tooltip.
- Example of an image with attributes:
<img src="image.jpg" alt="An image" title="This is an image" />
Project: Create an Image Gallery
- Use the <img> tag to create an image gallery with multiple images.
4. Forms in HTML
- Forms allow users to submit information. Example form:
<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>
- Explanation:
- `<form>`: Wraps the entire form and specifies the submission URL and method.
- `<input>`: Specifies input fields, such as text, email, and buttons.
Project: Create a Simple Contact Form
- Create a contact form with text and email fields and a submit button.
5. Tables and Layouts
- Tables are used to organize data into rows and columns. Example:
<table>
<tr>
<th>Product</th>
<th>Price</th>
</tr>
<tr>
<td>Apple</td>
<td>$1</td>
</tr>
<tr>
<td>Banana</td>
<td>$0.5</td>
</tr>
</table>
- Explanation:
- `<table>`: Defines the table.
- `<tr>`: Table row.
- `<th>`: Table header.
- `<td>`: Table data (cell).
Project: Create a Product Table
- Design a table displaying product names and prices.
6. Multimedia in HTML
- HTML allows embedding multimedia using the <video> and <audio> tags. Example:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
<audio controls>
<source src="audio.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
Project: Build a Portfolio with Video and Audio Integration
- Create a webpage with embedded video and audio files.
