surewellquotes.org

HTML Fundamentals Course

Welcome to this interactive HTML course! Here, you'll learn the most essential HTML features with clear explanations and visually appealing code examples. HTML (HyperText Markup Language) is the standard markup language for documents designed to be displayed in a web browser.

1. Basic HTML Structure

Every HTML document starts with a basic structure that defines its type, language, and the main sections for metadata and content.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Web Page</title>
</head>
<body>
    </body>
</html>

Output Preview (Invisible elements, but essential structure)

<!DOCTYPE html> declaration defines this document to be an HTML5 document.

<html> element is the root element of an HTML page.

<head> element contains meta-information about the HTML page (e.g., character set, viewport settings, title).

<body> element contains the visible page content.

2. How to Run HTML Code Locally (Notepad & Browser)

Before diving deeper into HTML tags, it's essential to know how to see your HTML code come to life using just a simple text editor and your web browser. This is the most basic way web pages are created and viewed, and it's how web development began!

Step-by-Step Guide:

1. Write Your HTML Code in a Text Editor

**Open Notepad (Windows) or TextEdit (macOS):**
- **Windows:** Search for "Notepad" in your Start Menu and open it.
- **macOS:** Open "TextEdit." Go to **Format > Make Plain Text** (`Shift + Command + T`) to ensure it doesn't add rich text formatting.
- **Linux:** Use a simple text editor like "Gedit" or "KWrite."

**Paste a basic HTML structure:** Use this example code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Local HTML Page</title>
</head>
<body>
    <h1>Hello from my local HTML file!</h1>
    <p>This is a paragraph displayed directly from my computer.</p>
</body>
</html>

**Save the File:**
- Go to **File > Save As...**
- Choose an easy-to-find location, such as your **Desktop** or a dedicated "Web Projects" folder.
- In the "File name:" field, type a name followed by the **`.html` extension**, for example: `my_local_page.html`.
- **Crucial for Windows Notepad:** In the "Save As" dialog, change "Save as type:" from "Text Documents (\*.txt)" to "**All Files (\*.\*)**". This ensures it saves as an HTML file and not a plain text file.
- Click **Save**.

2. Open Your HTML File in a Web Browser

**Locate Your File:** Navigate to the folder where you saved `my_local_page.html`. You should see an icon that looks like your default web browser.
**Open with Browser:**
- **Double-click** the `my_local_page.html` file. Most operating systems will automatically open HTML files in your default web browser (Chrome, Firefox, Edge, Safari, etc.).
- **Alternatively:** Right-click the file, select "Open with," and then choose your preferred web browser from the list.

3. See Your HTML Live!

Your web browser will now display the content of your HTML file. You'll see:

"Hello from my local HTML file!" as a prominent heading.
"This is a paragraph displayed directly from my computer." as a standard text paragraph.
The browser tab's title will be "My First Local HTML Page."

**Important Tip:** Whenever you make changes to your HTML file in Notepad (or any text editor), remember to **save the file** (`Ctrl+S` on Windows, `Cmd+S` on macOS) and then **refresh your browser tab** (`F5` on Windows, `Cmd+R` on macOS, or the refresh icon in your browser) to see the updates! This simple "edit-save-refresh" loop is the core of traditional web development.

3. Headings

Headings are used to define the structure and hierarchy of your content. `<h1>` is the most important heading, and `<h6>` is the least important.

<h1 class="text-4xl font-bold text-indigo-700">This is a Main Heading</h1>
<h2 class="text-3xl font-semibold text-purple-700">This is a Sub-heading</h2>
<h3 class="text-2xl font-medium text-pink-700">This is a Smaller Heading</h3>
<h4 class="text-xl text-red-700">Even Smaller</h4>
<h5 class="text-lg text-orange-700">Getting There</h5>
<h6 class="text-base text-yellow-700">Smallest Heading</h6>

This is a Main Heading

This is a Sub-heading

This is a Smaller Heading

Even Smaller

Getting There

Smallest Heading

4. Paragraphs

Paragraphs are used to group blocks of text. The `<p>` tag defines a paragraph.

<p class="text-gray-800 leading-relaxed bg-blue-100 p-3 rounded-md shadow-inner">
    This is the first paragraph of text. It contains some important information
    about HTML and how paragraphs are used to structure content.
</p>
<p class="text-gray-600 italic bg-green-100 p-3 rounded-md shadow-inner mt-2">
    This is a second paragraph. Notice how browsers automatically add some
    space before and after each paragraph.
</p>

This is the first paragraph of text. It contains some important information about HTML and how paragraphs are used to structure content.

This is a second paragraph. Notice how browsers automatically add some space before and after each paragraph.

5. Links

Links (hyperlinks) connect one web page to another. The `<a>` tag is used, and the `href` attribute specifies the destination URL.

<p>
    Visit the <a href="https://www.google.com" target="_blank" class="text-blue-600 hover:text-blue-800 font-semibold transition duration-300 ease-in-out">Google Search Engine</a>
    in a new tab.
</p>
<p>
    Learn more about <a href="#basic-structure" class="text-purple-600 hover:text-purple-800 font-semibold transition duration-300 ease-in-out">Basic HTML Structure</a>
    (internal link).
</p>

Visit the Google Search Enginein a new tab.

Learn more about Basic HTML Structure(internal link).

6. Images

Images are embedded using the `<img>` tag. The `src` attribute specifies the image path, and `alt` provides alternative text for accessibility.

<img
    src="https://placehold.co/400x200/FF5733/FFFFFF?text=Placeholder+Image"
    alt="A colorful placeholder image"
    class="w-full max-w-md h-auto rounded-lg shadow-lg border-2 border-gray-200 object-cover"
    onerror="this.onerror=null; this.src='https://placehold.co/400x200/CCCCCC/000000?text=Image+Not+Found';"
/>
<p class="text-sm text-gray-500 mt-2">An example image with a fallback.</p>

An example image with a fallback.

7. Lists

HTML supports ordered lists (`<ol>`) and unordered lists (`<ul>`). List items are defined by the `<li>` tag.

<h3 class="text-xl font-semibold text-gray-700 mb-2">Unordered List (Shopping List)</h3>
<ul class="list-disc list-inside text-gray-700 bg-yellow-50 p-4 rounded-md shadow-inner">
    <li>Apples</li>
    <li>Milk</li>
    <li>Bread</li>
</ul>

<h3 class="text-xl font-semibold text-gray-700 mb-2 mt-4">Ordered List (Steps)</h3>
<ol class="list-decimal list-inside text-gray-700 bg-purple-50 p-4 rounded-md shadow-inner">
    <li>Preheat oven</li>
    <li>Mix ingredients</li>
    <li>Bake for 30 minutes</li>
</ol>

Unordered List (Shopping List)

Apples
Milk
Bread

Ordered List (Steps)

Preheat oven
Mix ingredients
Bake for 30 minutes

8. Tables

Tables are used to display tabular data. They consist of rows (`<tr>`), table headers (`<th>`), and table data cells (`<td>`).

<table class="min-w-full bg-white border border-gray-300 rounded-lg shadow-md overflow-hidden">
    <thead class="bg-gray-200">
        <tr>
            <th class="py-2 px-4 border-b text-left text-gray-700">Name</th>
            <th class="py-2 px-4 border-b text-left text-gray-700">Age</th>
            <th class="py-2 px-4 border-b text-left text-gray-700">City</th>
        </tr>
    </thead>
    <tbody>
        <tr class="hover:bg-gray-50">
            <td class="py-2 px-4 border-b text-gray-800">Alice</td>
            <td class="py-2 px-4 border-b text-gray-800">30</td>
            <td class="py-2 px-4 border-b text-gray-800">New York</td>
        </tr>
        <tr class="hover:bg-gray-50 bg-gray-100">
            <td class="py-2 px-4 border-b text-gray-800">Bob</td>
            <td class="py-2 px-4 border-b text-gray-800">24</td>
            <td class="py-2 px-4 border-b text-gray-800">London</td>
        </tr>
        <tr class="hover:bg-gray-50">
            <td class="py-2 px-4 border-b text-gray-800">Charlie</td>
            <td class="py-2 px-4 border-b text-gray-800">35</td>
            <td class="py-2 px-4 border-b text-gray-800">Paris</td>
        </tr>
    </tbody>
</table>

Name	Age	City
Alice	30	New York
Bob	24	London
Charlie	35	Paris

9. Forms

Forms are used to collect user input. Common form elements include `<input>`, `<label>`, `<textarea>`, `<select>`, and `<button>`.

<form action="#" method="POST" class="bg-white p-6 rounded-lg shadow-lg border border-blue-200">
    <div class="mb-4">
        <label for="name" class="block text-gray-700 text-sm font-bold mb-2">Name:</label>
        <input type="text" id="name" name="name" placeholder="Your Name" required
               class="shadow-sm appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline focus:border-blue-500">
    </div>

    <div class="mb-4">
        <label for="email" class="block text-gray-700 text-sm font-bold mb-2">Email:</label>
        <input type="email" id="email" name="email" placeholder="you@example.com" required
               class="shadow-sm appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline focus:border-blue-500">
    </div>

    <div class="mb-4">
        <label for="message" class="block text-gray-700 text-sm font-bold mb-2">Message:</label>
        <textarea id="message" name="message" rows="4" placeholder="Your message here..."
                  class="shadow-sm appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline focus:border-blue-500"></textarea>
    </div>

    <div class="mb-6">
        <label for="country" class="block text-gray-700 text-sm font-bold mb-2">Country:</label>
        <select id="country" name="country"
                class="block appearance-none w-full bg-white border border-gray-300 text-gray-700 py-2 px-3 pr-8 rounded leading-tight focus:outline-none focus:shadow-outline focus:border-blue-500">
            <option value="usa">United States</option>
            <option value="can">Canada</option>
            <option value="uk">United Kingdom</option>
        </select>
    </div>

    <div class="flex items-center justify-between">
        <button type="submit"
                class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transition duration-300 ease-in-out">
            Submit
        </button>
    </div>
</form>

10. Semantic HTML

Semantic HTML elements clearly describe their meaning to both the browser and the developer. They improve accessibility and SEO.

<header class="bg-gray-800 text-white p-4 text-center rounded-t-lg">
    <h1 class="text-3xl font-bold">Website Header</h1>
</header>

<nav class="bg-gray-700 p-2 text-center">
    <a href="#" class="text-white hover:text-blue-300 px-3 py-1 rounded-md">Home</a>
    <a href="#" class="text-white hover:text-blue-300 px-3 py-1 rounded-md">About</a>
    <a href="#" class="text-white hover:text-blue-300 px-3 py-1 rounded-md">Contact</a>
</nav>

<main class="p-6 bg-white rounded-b-lg shadow-inner">
    <article class="mb-6 border-b pb-4 border-gray-200">
        <h2 class="text-2xl font-semibold text-gray-800 mb-2">Article Title</h2>
        <p class="text-gray-700">This is the content of an article. It could be a blog post or a news item.</p>
    </article>
    <section class="bg-blue-50 p-4 rounded-lg">
        <h3 class="text-xl font-semibold text-blue-800 mb-2">Related Section</h3>
        <p class="text-blue-700">This section contains related content to the main article.</p>
    </section>
</main>

<footer class="bg-gray-800 text-white p-4 text-center mt-6 rounded-b-lg">
    <p>&copy; 2024 HTML Course. All rights reserved.</p>
</footer>

Website Header

Article Title

This is the content of an article. It could be a blog post or a news item.

Related Section

This section contains related content to the main article.

11. Divs and Spans

`<div>` is a block-level container for grouping content, while `<span>` is an inline container for styling small parts of text. They are generic elements used when no other semantic element is appropriate.

<div class="bg-teal-100 p-4 rounded-lg border border-teal-300 mb-4">
    <h3 class="text-xl font-semibold text-teal-800 mb-2">A Block-Level Div</h3>
    <p class="text-teal-700">
        This entire block of text and its heading are contained within a
        <span class="font-bold text-teal-900">div element</span>. It takes up the full width available.
    </p>
</div>

<p class="text-gray-700">
    This sentence has a <span class="text-red-600 font-extrabold">highlighted word</span>
    and some <span class="italic text-blue-600">italicized text</span> using <span class="font-bold text-green-600">span elements</span>.
</p>

A Block-Level Div

This entire block of text and its heading are contained within adiv element. It takes up the full width available.

This sentence has a highlighted wordand some italicized text using span elements.

12. Basic Styling (Inline & Internal)

While we've primarily used Tailwind CSS classes, it's good to know about basic inline and internal CSS for quick styling. For larger projects, external CSS files are preferred.

<p style="color: purple; font-size: 1.2em; border: 1px solid purple; padding: 10px; border-radius: 5px;">
    This text is styled using an inline style attribute.
</p>

<style>
    .internal-styled-box {
        background-color: #e0ffe0;
        padding: 15px;
        margin-top: 10px;
        border: 2px dashed green;
        border-radius: 8px;
    }
</style>
<div class="internal-styled-box">
    This div is styled using internal CSS defined in a <code>&lt;style&gt;</code> tag.
</div>

This text is styled using an inline style attribute.

This div is styled using internal CSS defined in a <style> tag.

Course Conclusion

You've now explored the fundamental building blocks of HTML! Understanding these tags and attributes is crucial for creating any web page. Remember, practice is key to mastering HTML.

Keep experimenting with these examples and try building your own simple web pages!