Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
28 views

Detailed HTML5 Tutorial

Uploaded by

fortunedako2
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
28 views

Detailed HTML5 Tutorial

Uploaded by

fortunedako2
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

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.

You might also like