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>
</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>)
3. Links (<a>)
4. Images (<img>)
5. Lists
6. Tables (<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.
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