HTML Practice
- Get link
- X
- Other Apps
Introduction to HTML: Structure and Essential Tags
What is HTML?
HTML (Hyper Text Markup Language) is the standard language used to create and design webpages. It structures the content on the web, using a series of elements represented by tags.
Basic Structure of an HTML Document
Every HTML document follows a standard structure that includes:
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Web Page</title>
</head>
<body>
<!-- Content goes here -->
</body>
</html>
<!DOCTYPE html>
: Declares the document type and version of HTML.<html>
: The root element that contains all other elements.<head>
: Contains metadata about the document, such as the title, character set, and links to stylesheets.<title>
: Sets the title of the webpage, shown in the browser tab.<body>
: Contains the visible content of the webpage.
Essential HTML Tags
1. Headings (<h1>
to <h6>
)
- Used to define headings, with
<h1>
being the highest (or most important) level and<h6>
the lowest. - Example:<h1>This is a Heading 1</h1>
<h2>This is a Heading 2</h2>
2. Paragraph (<p>
)
- Used to define paragraphs of text.
- Example:<p>This is a paragraph.</p>
3. Links (<a>
)
- Creates hyperlinks to other webpages or resources.
- Example:<a href="https://www.example.com">Visit Example</a>
4. Images (<img>
)
- Embeds images into the webpage.
- Attributes:
src
: Specifies the image source URL.alt
: Provides alternative text for the image.
- Example:<img src="image.jpg" alt="Description of image">
5. Lists
- Unordered List (
<ul>
): Displays items in a bulleted list. - Ordered List (
<ol>
): Displays items in a numbered list. - List Items (
<li>
): Used within<ul>
or<ol>
to define list items. - Example:<ul>
<li>Item 1</li> <li>Item 2</li> </ul> <ol> <li>First item</li> <li>Second item</li> </ol>
6. Tables (<table>
)
- Defines a table structure.
- Table Elements:
<tr>
: Defines a table row.<th>
: Defines a table header.<td>
: Defines a table data/cell.
- Example:<table>
<tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>Data 1</td> <td>Data 2</td> </tr> </table>
Code Examples for Practice
Example 1: Basic HTML Structure
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Practice Page</title>
</head>
<body>
<h1>Welcome to HTML Practice</h1>
<p>This is a basic HTML document.</p>
</body>
</html>
Example 2: Creating a Simple List
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple List</title>
</head>
<body>
<h2>My Favorite Foods</h2>
<ul>
<li>Pizza</li>
<li>Burgers</li>
<li>Ice Cream</li>
</ul>
</body>
</html>
Example 3: Adding a Link and Image
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Link and Image</title>
</head>
<body>
<h2>Check out this cool website!</h2>
<a href="https://www.example.com">Visit Example.com</a>
<h3>Here’s an image:</h3>
<img src="image.jpg" alt="A beautiful view">
</body>
</html>
Example 4: Creating a Table
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Table</title>
</head>
<body>
<h2>Weekly Schedule</h2>
<table border="1">
<tr>
<th>Day</th>
<th>Activity</th>
</tr>
<tr>
<td>Monday</td>
<td>Math Class</td>
</tr>
<tr>
<td>Tuesday</td>
<td>Science Lab</td>
</tr>
</table>
</body>
</html>
Example 5: Creating a Form
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Form</title>
</head>
<body>
<h2>Register Here</h2>
<form action="submit_form.php" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Chapter Challenges
Challenge 1: Create an HTML page that includes all the basic tags you've learned (headings, paragraphs, lists, tables, images, links) in a meaningful way. For example, create a personal portfolio webpage.
Challenge 2: Develop a webpage that lists your favorite movies using ordered lists and includes images and descriptions of each movie.
Challenge 3: Design a simple registration form with multiple input types (text, email, password, etc.) and use CSS to style the form.
Challenge 4: Create a table displaying a class timetable with different colors for each subject and make the header stand out using CSS.
Challenge 5: Build a webpage that displays a block of text using various formatting elements like bold, italic, underlined text, and a blockquote. Also, add a navigation menu at the top.
- Get link
- X
- Other Apps
Comments
Wireless Video transmitters have become essential tools for modern content creation. Whether you're on a film set, live streaming, or setting up multi-cam events, cutting the cable without sacrificing video quality is a huge win. I’ve personally used systems like the VIDEOCAST Mars series—they offer solid range, low latency, and super clean video transmission.
ReplyDelete