Activity 3.24

HTML Basics Tutorial

What is HTML?

HTML (HyperText Markup Language) is the standard language used to create web pages. It uses tags to structure content and tell the browser how to display text, images, links, and other elements.

Basic HTML Structure

Every HTML document follows this basic structure:

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    <!-- Your content goes here -->
</body>
</html>

Key Components:

<!DOCTYPE html> - Declares this as an HTML5 document
<html> - Root element that wraps all content
<head> - Contains metadata about the document
<title> - Sets the page title (appears in browser tab)
<body> - Contains all visible content

HTML Tags and Elements

HTML uses tags to mark up content. Tags are enclosed in angle brackets < >.

Tag Structure:

Opening tag: <tagname>
Closing tag: </tagname>
Self-closing tag: <tagname />

Example:

<p>This is a paragraph.</p>

Essential HTML Elements

Headings

HTML provides six levels of headings:

<h1>Main Heading</h1>
<h2>Section Heading</h2>
<h3>Subsection Heading</h3>
<h4>Minor Heading</h4>
<h5>Small Heading</h5>
<h6>Smallest Heading</h6>

Paragraphs

<p>This is a paragraph of text.</p>
<p>This is another paragraph.</p>

Text Formatting

<strong>Bold text</strong>
<em>Italic text</em>
<u>Underlined text</u>
<br> <!-- Line break -->
<hr> <!-- Horizontal rule/line -->

Links

<a href="https://www.example.com">Visit Example.com</a>
<a href="page2.html">Link to another page</a>
<a href="#section1">Link to section on same page</a>

Images

<img src="image.jpg" alt="Description of image">
<img src="https://example.com/photo.png" alt="Remote image">

Lists

Unordered Lists (Bullet Points)

<ul>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ul>

Ordered Lists (Numbered)

<ol>
    <li>First step</li>
    <li>Second step</li>
    <li>Third step</li>
</ol>

Tables

<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Row 1, Cell 1</td>
        <td>Row 1, Cell 2</td>
    </tr>
    <tr>
        <td>Row 2, Cell 1</td>
        <td>Row 2, Cell 2</td>
    </tr>
</table>

<table> - Creates the table
<tr> - Table row
<th> - Table header cell
<td> - Table data cell

Forms

<form>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
    
    <label for="message">Message:</label>
    <textarea id="message" name="message"></textarea>
    
    <input type="submit" value="Send">
</form>

Common Input Types:

text - Single line text
email - Email address
password - Password field
number - Numeric input
checkbox - Checkbox
radio - Radio button
submit - Submit button

Semantic HTML Elements

These elements provide meaning to your content:

<header>Page or section header</header>
<nav>Navigation links</nav>
<main>Main content area</main>
<article>Independent piece of content</article>
<section>Thematic grouping of content</section>
<aside>Sidebar content</aside>
<footer>Page or section footer</footer>

Attributes

HTML elements can have attributes that provide additional information:

<img src="photo.jpg" alt="A beautiful sunset" width="300" height="200">
<a href="https://example.com" target="_blank" title="Opens in new tab">Link</a>
<p id="intro" class="highlight">Paragraph with ID and class</p>

Common Attributes:

id - Unique identifier for an element
class - Groups elements for styling
src - Source for images, videos, etc.
href - URL for links
alt - Alternative text for images
title - Tooltip text
target - How to open links

Comments

Add comments to your HTML code (not visible on the page):

<!-- This is a comment -->
<!-- 
This is a 
multi-line comment 
-->

Complete Example

<!DOCTYPE html>
<html>
<head>
    <title>My First Web Page</title>
</head>
<body>
    <header>
        <h1>Welcome to My Website</h1>
        <nav>
            <a href="#about">About</a>
            <a href="#contact">Contact</a>
        </nav>
    </header>
    
    <main>
        <section id="about">
            <h2>About Me</h2>
            <p>This is a paragraph about myself. I'm learning <strong>HTML</strong>!</p>
            <img src="profile.jpg" alt="My profile picture">
        </section>
        
        <section>
            <h2>My Hobbies</h2>
            <ul>
                <li>Reading books</li>
                <li>Playing guitar</li>
                <li>Coding websites</li>
            </ul>
        </section>
        
        <section id="contact">
            <h2>Contact Me</h2>
            <form>
                <label for="email">Email:</label>
                <input type="email" id="email" name="email">
                <input type="submit" value="Send">
            </form>
        </section>
    </main>
    
    <footer>
        <p>&copy; 2025 My Website</p>
    </footer>
</body>
</html>

Best Practices

Always close your tags - Every opening tag should have a corresponding closing tag
Use semantic elements - Choose elements based on meaning, not appearance
Include alt text for images - Important for accessibility
Indent your code - Makes it easier to read and debug
Use lowercase for tags and attributes - Standard convention
Validate your HTML - Use online validators to check for errors

Next Steps

Now that you understand HTML basics, you can:

Practice creating simple web pages
Learn CSS to style your HTML
Explore JavaScript to add interactivity
Study responsive design principles
Learn about web accessibility

Remember: HTML provides the structure and content of web pages, while CSS handles the visual styling and JavaScript adds interactive functionality.

PreviousProject 7

Last updated 9 days ago