Lesson 2: Formatting Text and Lists – Give Your Web Page Some Structure (Now with Caddy Server!)

Lesson2

Lesson 2: Formatting Text and Lists – Give Your Web Page Some Structure (Now with Caddy Server!)

Welcome back, web wizard! Now that you’ve started your HTML journey, it’s time to make your web page look more organized. Today, we’ll dive into headings, paragraphs, and lists to give your page a solid structure. And just like in Lesson 1, we’ll use Caddy to host your creation. Ready to show off your well-organized content? Let’s get started!

Headings: Make Your Content Stand Out

Headings in HTML act like titles and subtitles. They help structure your content and give visitors an idea of what’s important. HTML offers six heading levels, from <h1> (the most important) to <h6> (the least).

Here’s how they look:

<h1>Main Heading (H1)</h1>
<h2>Subheading (H2)</h2>
<h3>Smaller Subheading (H3)</h3>
<h4>Heading Four (H4)</h4>
<h5>Heading Five (H5)</h5>
<h6>Heading Six (H6)</h6>

Task: Try Your Own Headings

Create a page about your favorite hobby or topic. Use different headings to organize your thoughts. Remember, <h1> is the main heading, and <h6> is the smallest.

Paragraphs: Time to Write!

A paragraph tag (<p>) lets you add blocks of text to your page. It’s how you share your brilliant ideas without overwhelming your readers.

Here’s an example:

<p>This is a paragraph. You can write as much as you want, and it will automatically wrap to fit the page. Perfect for writing stories or explaining things.</p>

Task: Add Some Paragraphs

Write a few paragraphs about something you enjoy—movies, books, or your favorite dessert. It’s your page, so have fun!

Lists: Organize Your Content Like a Pro

Unordered Lists (Bullet Points)

An unordered list (<ul>) creates a bulleted list. Perfect for making to-do lists or anything that doesn’t need a specific order.

Example:

<ul>
    <li>Learn HTML</li>
    <li>Master web development</li>
    <li>Rule the internet</li>
</ul>

Ordered Lists (Numbered Steps)

An ordered list (<ol>) creates a numbered list, ideal for steps that need to be followed in order.

Example:

<ol>
    <li>Wake up</li>
    <li>Make coffee</li>
    <li>Conquer the day</li>
</ol>

Task: Create Your Own Lists

Create an unordered list (your favorite movies, foods, or activities) and an ordered list (like steps for your morning routine). Feel free to experiment!

Nesting Lists: Go One Level Deeper

You can also nest lists inside other lists for more detailed organization.

Example:

<ul>
    <li>Things to Learn:
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    </li>
    <li>Things to Master:
        <ol>
            <li>Version control</li>
            <li>Command line</li>
        </ol>
    </li>
</ul>

Task: Try Nesting Lists

Create a nested list of your goals and mini-goals. It’s like life planning, but for your web page!

Hosting Your Page with Caddy

Now that your page is filled with structured content, let’s use Caddy to host it again. Follow these steps to show off your awesome HTML skills:

Step 1: Open Your Terminal

Navigate to the folder where your HTML file is saved:

cd ~/my-website

Step 2: Start Caddy

Run this command to host your website locally on port 8080:

caddy file-server --listen :8080

Step 3: View Your Page

Open your browser and visit http://localhost:8080 to see your newly structured web page. Look at all that perfectly organized content!

Summary:

In this lesson, you learned how to:

  • Use headings to organize your content.
  • Write paragraphs to add meaningful text.
  • Create both unordered (bulleted) and ordered (numbered) lists.
  • Nest lists for more complex content.

You also hosted your updated web page using Caddy, so now you can show off your neatly formatted website! In the next lesson, we’ll add some flair with images and links to make your page even more interactive. Stay tuned!

HTML  Beginners  Web Design  Caddy 

See also