Activity 2: HTML Text Exercises

These activities demonstrated how to apply immediate styling effects directly to text using the style attribute and the use of line break tags.

HTML Code (Activity 2.1 & 2.2): The code shows the use of the style attribute directly on the <h1> tag in Activity 2.1 to change the text color to green and the use of the <span> tag in Activity 2.2 to color individual numbers in the sequence. The <br> tag is used in Activity 2.2 to force each number onto a new line. (Image Here: html code.png – showing activity2-1.html and activity2-2.html code)

Output (Activity 2.1 & 2.2): The output confirms the successful application of inline styles. The name is displayed in green, and the numbers 1-10 are displayed on separate lines, each with its designated color. (Image Here: output2.png – showing output for activity2-1.html) (Image Here: output3.png – showing output for activity2-2.html)

HTML Code & Output (Activity 2.3 & 2.4): Activity 2.3 shows the use of the style attribute on a paragraph tag to change the font family to “Tahoma”. Activity 2.4 applies different font families and includes a <br> tag after each phrase to ensure separation. The output confirms that different font styles (like Tahoma, Courier New, Verdana, Georgia, and Comic Sans MS) were rendered correctly for each line. (Image Here: html code2.png – showing activity2-3.html and activity2-4.html code) (Image Here: output4.png – showing output for activity2-3.html) (Image Here: output5.png – showing output for activity2-4.html)

Activity 2.5 introduced fundamental semantic formatting tags to emphasize or highlight specific parts of the text.

HTML Code (Activity 2.5): The code for the excerpt from The Great Gatsby uses nested formatting tags:
- <b>The Great Gatsby</b>: Makes the title bold.
- <u>F. Scott Fitzgerald</u>: Underlines the author’s name.
- <i>captivating</i>: Makes the word italic.
- <i>tragic</i>: Makes the word italic. (Image Here: html code3.png – showing activity2-5.html code)
Output (Activity 2.5): The rendered text clearly displays the formatting: the title is bold, the author is underlined, and the descriptive words are italicized, as specified in the HTML. (Image Here: output6.png – showing output for activity2-5.html)

Activity 2.6 explored the use of HTML heading tags, which are crucial for structuring content semantically and visually.

HTML Code (Activity 2.6): This code uses all six levels of headings, from <h1> (largest/most important) down to <h6> (smallest/least important), to render the same set of letters in descending size order. (Image Here: html code3.png – showing activity2-6.html code)
Output (Activity 2.6): The output visually confirms the hierarchy, with the <h1> being the largest and the <h6> being the smallest, demonstrating the default browser rendering for heading levels. (Image Here: output7.png – showing output for activity2-6.html)

Activity 2 provided a hands-on understanding of essential text control elements in HTML:

Inline Styling vs. External CSS: While inline styles (using the style attribute) are quick for small changes (like color and font), they are generally less scalable than external CSS. This exercise highlighted the direct, immediate impact of inline styling.
Controlling Flow and Breakdowns: The use of the <br> (line break) tag proved essential for forcing text onto a new line, differentiating it from the automatic wrapping of paragraph (<p>) tags.
Semantic Formatting: Tags like <b>, <u>, and <i> allowed for structural formatting, while the Heading tags (<h1> to <h6>) introduced the concept of content hierarchy and importance, which is vital for accessibility and Search Engine Optimization (SEO).