Introduction To HTML
Uploaded by
chalacunaIntroduction To HTML
Uploaded by
chalacunaIntroduction to HTML
HTML, or HyperText Markup Language, is the foundational building block of the web. It was
created by Tim Berners-Lee in 1991 as a way to share documents over the internet. Unlike
programming languages that execute logic (like Python or JavaScript), HTML is a markup
language—it describes the structure and content of a webpage using tags, allowing browsers
like Chrome or Firefox to render it visually. Think of HTML as the skeleton of a website: it
organizes text, images, links, and other elements into a coherent layout. CSS (Cascading Style
Sheets) adds style (colors, fonts), and JavaScript adds interactivity, but HTML is where it all
starts.
Why learn HTML? It's essential for web development, empowers you to create personal sites,
blogs, or portfolios, and understanding it helps you debug websites or even customize content
on platforms like WordPress. Plus, it's beginner-friendly—no prior coding experience needed.
Key Concepts Expanded
Tags and Elements: Tags are enclosed in angle brackets (e.g., <h1> for a top-level
heading). Most tags come in pairs: an opening tag (e.g., <p>) and a closing tag (e.g.,
</p>). The content between them forms an element. Self-closing tags like <img /> don't
need a pair.
Attributes: These provide additional details to tags, like href in <a href="url"> for links or
alt in images for accessibility (important for screen readers).
Document Structure: Every HTML file starts with <!DOCTYPE html> to declare it's
HTML5 (the current standard). The <html> tag wraps everything, <head> contains
metadata (like the title), and <body> holds the visible content.
Nesting: Elements can be nested inside others, like paragraphs inside lists, but they
must be properly closed to avoid errors.
Semantics: Use tags that describe meaning (e.g., <header> for page tops, <nav> for
navigation) for better accessibility and SEO.
Environment Setup (Detailed Guide) Before starting tasks, set up your workspace:
1. Choose a Text Editor: Download Visual Studio Code (free from code.visualstudio.com)
for syntax highlighting, or use built-in ones like Notepad/Notepad++ (Windows) or
TextEdit (Mac in plain text mode).
2. Create a Project Folder: On your desktop, make a folder called "HTML_Intro". Inside it,
create subfolders like "images" for assets.
3. Test Your Setup: Open your editor, type a simple line like "Hello, World!", save as
"test.txt", then rename to "test.html". Double-click to open in a browser—it should
display the text.
Now, let's dive into hands-on tasks. Each includes a step-by-step guide, expected outcome, and
tips. Start with a blank index.html file using the basic structure from before.
Task 1: Build the Basic Structure
Objective: Create a valid HTML skeleton and view it in a browser.
Step-by-Step Guide:
1. Open your text editor and create a new file.
2. Type the following code exactly (pay attention to indentation for readability):
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Intro to HTML</title>
</head>
<body>
<!-- Your content will go here -->
</body>
</html>
3. Save the file as index.html in your project folder (ensure the extension is .html, not .txt).
4. Open the file in a web browser (right-click > Open with > Browser or drag into browser
window).
5. Refresh the browser (Ctrl+R or Cmd+R) to see changes after edits.
Expected Outcome: A blank page with "Intro to HTML" in the browser tab. Tips: The <meta
charset="UTF-8"> ensures special characters display correctly. Add comments with <!--
comment --> for notes.
Task 2: Add Headings and Paragraphs
Objective: Structure text content with hierarchy.
Step-by-Step Guide:
1. Inside the <body> tag, add a main heading:
html
<h1>Welcome to My HTML Page</h1>
2. Below it, add a subheading and paragraph:
html
<h2>About This Page</h2>
<p>This is a simple introduction to HTML. It includes headings, text, and more.</p>
3. Add another paragraph with line breaks (use <br> for manual breaks):
html
<p>Line one.<br>Line two.</p>
4. Save the file and refresh your browser.
Expected Outcome: The page shows a large "Welcome" title, a smaller subtitle, and two
paragraphs. Tips: Headings range from <h1> (largest/most important) to <h6> (smallest). Use
them for SEO and accessibility, not just sizing.
Task 3: Insert Images and Links
Objective: Embed media and create navigation.
Step-by-Step Guide:
1. Download a free image (e.g., from unsplash.com) and save it as example.jpg in your
"images" subfolder.
2. Inside <body>, after the paragraphs, add the image:
html
<img src="images/example.jpg" alt="A descriptive alt text for the image" width="300">
3. Below the image, add an external link:
html
<a href="https://www.w3schools.com/html/">Learn More About HTML</a>
4. Add an internal link (to another file—create a blank about.html first):
html
<a href="about.html">Go to About Page</a>
5. Save and refresh.
Expected Outcome: An image displays (resized to 300px wide), with clickable links that open
new pages. Tips: Always include alt for accessibility. Use relative paths like images/example.jpg
for local files. Test links!
Task 4: Create Lists and Tables
Objective: Organize data in structured formats.
Step-by-Step Guide:
1. Add an unordered list (bullets) for favorite items:
html
<h3>My Favorites</h3>
<ul>
<li>Coffee</li>
<li>Books</li>
<li>Coding</li>
</ul>
2. Add an ordered list (numbers) for steps:
html
<h3>Steps to Make Tea</h3>
<ol>
<li>Boil water</li>
<li>Add tea bag</li>
<li>Stir and enjoy</li>
</ol>
3. Create a simple table for data:
html
<h3>Sample Table</h3>
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Alice</td>
<td>25</td>
</tr>
<tr>
<td>Bob</td>
<td>30</td>
</tr>
</table>
4. Save and refresh.
Expected Outcome: Lists appear as bullets/numbers; table shows with borders, headers, and
rows. Tips: <th> is for table headers (bold/centered), <tr> for rows, <td> for cells. Remove
border="1" for no lines.
Task 5: Add a Simple Form
Objective: Introduce user input (basic interactivity).
Step-by-Step Guide:
1. Add a form section:
html
<h3>Contact Form</h3>
<form action="" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br>
<input type="submit" value="Submit">
</form>
2. Save and refresh.
3. Test by entering data and clicking Submit (it won't send anywhere yet— that's for
advanced topics).
Expected Outcome: A form with labeled fields and a button. Tips: action="" means it submits to
the same page (placeholder). Use type="email" for validation.
Full Sample index.html (Combining All Tasks)
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Intro to HTML</title>
</head>
<body>
<h1>Welcome to My HTML Page</h1>
<h2>About This Page</h2>
<p>This is a simple introduction to HTML. It includes headings, text, and more.</p>
<p>Line one.<br>Line two.</p>
<img src="images/example.jpg" alt="A descriptive alt text for the image" width="300">
<a href="https://www.w3schools.com/html/">Learn More About HTML</a>
<a href="about.html">Go to About Page</a>
<h3>My Favorites</h3>
<ul>
<li>Coffee</li>
<li>Books</li>
<li>Coding</li>
</ul>
<h3>Steps to Make Tea</h3>
<ol>
<li>Boil water</li>
<li>Add tea bag</li>
<li>Stir and enjoy</li>
</ol>
<h3>Sample Table</h3>
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Alice</td>
<td>25</td>
</tr>
<tr>
<td>Bob</td>
<td>30</td>
</tr>
</table>
<h3>Contact Form</h3>
<form action="" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Assessment and Extensions
Self-Check: Validate your HTML at validator.w3.org—upload your file and fix errors.
Troubleshooting: Browser not updating? Clear cache (Ctrl+Shift+R). Tags not working?
Check for typos or missing closures.
Homework: Add a footer with <footer>Copyright 2025</footer>. Research and add a
video embed using <iframe> (e.g., from YouTube).
Advanced Twist: Link a CSS file for styling (create styles.css and add <link
rel="stylesheet" href="styles.css"> in <head>).