Past Lesson Note

This note is from 8 months ago. You're viewing content from a previous lesson.

Daily Note for September 9, 2025 Past Lesson

At the start of every class, please: 

  1. Make sure you are working from your programming folder
  2. Make sure your python virtual environment is activated
  3. Make sure you can access our test template at 127.0.0.1:5000

We are going to learn about HTML today -

1. Structure of a Page

  • Every HTML page starts with:

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

2. Common Tags

  • Headings: <h1> to <h6> (biggest to smallest).

  • Paragraphs: <p> for blocks of text.

  • Links: <a href="url">Link</a>

  • Images: <img src="image.jpg" alt="description">

  • Lists:

    • Ordered: <ol><li>Item</li></ol>

    • Unordered: <ul><li>Item</li></ul>

3. <div> and <span>

  • <div> = big container for grouping content.

  • <span> = small container for inline content.

  • Example:

    <div class="card">
      <h2>Title</h2>
      <p>Some text</p>
    </div>
    

4. Attributes

  • Extra information inside tags.

  • Example:

    <img src="cat.jpg" alt="A cute cat">
    

5. Classes and IDs

  • Class = reusable styling group.

  • ID = unique identifier.

  • Example:

    <div class="alert">Warning!</div>
    <div id="main-content">Main Section</div>
    

6. Forms (basic)

  • Collecting user input.

    <form>
      <input type="text" placeholder="Your name">
      <input type="submit" value="Go">
    </form>
    

7. Nesting & Indentation

  • Tags go inside each other (parent/child).

  • Always indent for clarity.

    <div>
      <p>This is inside a div</p>
    </div>