Activity 2: Text Exercises

What was this all about?

In Activity 1, we learned how to build the structure (the HTML skeleton). In Activity 2, we took the next step: making that text look good! This activity focused on using basic styling (like color and font) and powerful formatting tags to control how text appears on the page. We used simple CSS (Cascading Style Sheets) right inside our HTML to customize the look of the content.

Showing the Final Look (The Output)

This screenshot shows the completed output for all the different text exercises. The goal for each exercise was to make the text behave or look a specific way.

As you can see, we tackled:

Changing colors (2.1 and 2.2).
Changing the font style (2.3 and 2.4).
Adding formatting like bold, italic, and underline (2.5).
Playing with text size (2.6).

Taking a Peek at the Code

These screenshots show the HTML and CSS used to achieve the different effects in Activity 2.

Let’s break down how we achieved some of the key effects:

Exercise 2.1 & 2.2: Color Changes

The Goal: Make my name print in green (2.1) and print the numbers 1-10 each in a different color (2.2).
The Technique: To change a small part of the text, we used the  tag. This tag doesn’t do anything by itself, but it acts like a container that allows us to apply a style to just that piece of content.
The Code (See Lines 75 and 82-91): Inside the  tag, I used the style attribute. For example: My Name. For the numbers, I had to apply a different color code (like #e39351 for orange-red) to ten separate  tags! This taught me how powerful and precise inline styling can be.

Exercise 2.4: Different Fonts in One Paragraph

The Goal: Write four sentences, each using a completely different font style.
The Technique: Again, the  tag was essential here, wrapping around each sentence.
The Code (See Lines 104-109): The style attribute was changed to font-family. For example: This is the second sentence.. This demonstrated how to control typography and use system fonts like Georgia, Courier New, Lucida Sans, and Times New Roman.

Exercise 2.5: Complex Text Formatting

The Goal: Format a book description by underlining the title and author, and using bold and italic for adjectives.
The Technique: This exercise was about using the standard formatting HTML tags to give text meaning.
The Code (See Lines 116-120):
- Underline: I used the  tag for the title and author.
- Bold: I used the  tag for important adjectives (“magical,” “poignant,” “thought-provoking”).
- Italic: I used the  tag for the word “tale.”
- The key takeaway here is using the right tag for the right job:  is for importance (strong emphasis), while  is for just visual boldness (basic bold).

What I Took Away From This Activity

This activity moved us from simple structure to actual design and presentation. The main lessons were:

Introducing CSS (Inline Style): I learned the basic concept of CSS by using the style attribute directly inside my HTML tags. This allows for quick, precise control over colors, fonts, and other visual properties.
The Power of : This tag became one of the most useful tools! It lets you target and style a tiny section of text without changing the structure of the surrounding paragraph or heading. It’s the ultimate inline text editor.
Semantic vs. Presentational Tags: I learned the difference between tags like  (which says “this is important”) and older tags like  (which just says “make this bold”). Using the right tag helps search engines and accessibility tools better understand your content.