Formatting HTML

Paragraphs

In HTML, a paragraph \index{paragraph} is a block of text that is separated from other blocks of text by an empty line. It is used to group together related sentences or ideas. To create a paragraph in HTML, you use the <p> tag.

Here’s an example:

<p>I went to the beach with my friends last weekend. We had a
   great time playing volleyball and building sandcastles. 
   Later, we went swimming and saw some dolphins in the water.</p>

In this example, the <p> tag is used to create a paragraph that includes three sentences. The opening tag <p> indicates the start of the paragraph, and the closing tag </p> indicates the end of the paragraph. Everything inside the tags is considered part of the paragraph.

It’s important to use paragraphs in HTML because it makes your content easier to read and understand. By breaking up your text into smaller sections, it’s easier for your readers to scan your content and find the information they need. Additionally, it makes your content more visually appealing and organized.

Here’s another example of paragraphs in HTML:

<p>My favorite hobby is playing video games. I love playing games 
  on my computer, console, and mobile devices. I have played many 
  different types of games, including action, adventure, and 
  puzzle games.</p>

<p>When I play games, I like to challenge myself and see how far 
  I can go. I also enjoy playing games with my friends and 
  competing against them. I think video games are a great way 
  to have fun and learn new things at the same time.</p>

In this example, there are two paragraphs, each separated by an empty line. The first paragraph describes the writer’s love of playing video games, while the second paragraph talks about the different ways the writer enjoys playing games. Using paragraphs like this makes the text easier to read and helps the reader understand the writer’s thoughts and ideas.

Activity: Introduce Yourself

Create a webpage that introduces yourself using HTML. The webpage should contain at least three paragraphs using the <p> tag

Headings

HTML heading tags are used to create headings or titles in a web page, just like the headings you see in a book or newspaper article. There are six levels of headings, each with a different size and importance.

Here are the six levels of HTML heading tags and their example usage:

• <h1>: The largest and most important heading. Usually used for the main title of a page.

• <h2>: A smaller heading that can be used for subheadings or section titles.

• <h3>: Smaller than <h2>, can be used for sub-subheadings or subsection titles.

• <h4>: Smaller than <h3>, can be used for sub-sub-subheadings or subsection titles.

• <h5>: Smaller than <h4>, can be used for even lower level headings.

• <h6>: The smallest and least important heading. Rarely used in web pages.

When creating a web page, it’s important to use heading tags to give structure and hierarchy to the content. This makes it easier for readers to understand the organization of the page and navigate it.

Activity: Using Headings and Subheadings

Create a webpage about your favorite hobby, activity or interest using HTML. The webpage should contain at least three different levels of headings using the <h1>, <h2>, and <h3> tags.

Lists

In HTML, a list is a group of related items that are presented in a specific order. There are two main types of lists in HTML: ordered lists and unordered lists.

An ordered list is a list in which the items are numbered or ordered in a specific way. To create an ordered list in HTML, you use the <ol> tag. Each item in the list is marked with the <li> tag, which stands for list item. Here’s an example:

<ol>
  <li>Wake up</li>
  <li>Brush your teeth</li>
  <li>Eat breakfast</li>
  <li>Get dressed</li>
</ol>

In this example, we have an ordered list of four items that describe the steps for getting ready in the morning. Each item in the list is marked with the <li> tag, and the entire list is enclosed within the <ol> tags.

An unordered list, on the other hand, is a list in which the items are not numbered or ordered in any specific way. Instead, each item is marked with a bullet point or a similar symbol. To create an unordered list in HTML, you use the <ul> tag. Each item in the list is marked with the <li> tag, just like in an ordered list. Here’s an example:

<ul>
  <li>Apples</li>
  <li>Bananas</li>
  <li>Oranges</li>
</ul>

In this example, we have an unordered list of three items that describe different types of fruit. Each item in the list is marked with the <li> tag, and the entire list is enclosed within the <ul> tags.

Lists are an important HTML element because they help organize and structure content, making it easier to read and understand. They can be used to present a variety of different types of information, from simple to-do lists to more complex collections of data.

Activity: List Favorite Movies

Create a webpage that lists your top five favorite movies using HTML. The webpage should contain two lists, one ordered and one unordered, using the <ol>, <ul>, and <li> tags.

Bold Text

<strong> tag is used to make text bold. For example, if you want to highlight an important word or phrase, you can use the <strong> tag to make it bold. Here’s an example:

<strong>Bolded Text</strong>

In this example, the phrase “Bolded Text” is emphasized and made bold with the <strong> tag.

Activity: Descibe Favorite Hobby

Create a webpage that describes your favorite hobby using HTML. The webpage should contain at least two paragraphs and use the <strong> tag to emphasize key points.

Italicize Text

<em> tag is used to italicize text. For example, if you want to show emphasis or importance in a sentence, you can use the <em> tag to make it italicized. Here’s an example:

<p>She was <em>so</em> excited to go on the trip.</p>

In this example, the word “so” is emphasized and made italicized with the <em> tag.

Activity: Describe Vacation

Create a webpage that describes a memorable trip or vacation you’ve taken using HTML. The webpage should contain at least two paragraphs and use the <em> tag to emphasize key points.

Underline Text

<u> tag is used to underline text. For example, if you want to draw attention to a particular word or phrase, you can use the <u> tag to underline it. H`ere’s an example:

<p>He was <u>very</u> happy to receive the award.</p>

In this example, the word “very” is emphasized and underlined with the <u> tag.

Activity: Describe A Cause

Create a webpage that describes a cause or organization you’re passionate about using HTML. The webpage should contain at least two paragraphs and use the <u> tag to underline key points.

Strikethrough Text

<del> tag is used to strike through text. For example, if you want to show that something has been deleted or removed, you can use the <del> tag to strike through the text. Here’s an example:

The event has been cancelled The event has been rescheduled.

In this example, the sentence “The event has been cancelled” is crossed out with the <del> tag to indicate that it has been cancelled, and the new sentence “The event has been rescheduled” is shown instead.

Activity: Striking Through Text

Create a webpage that lists some outdated technologies or trends using HTML. The webpage should contain at least three items and use the <del> tag to indicate items that are no longer relevant.

Highlight Text

<mark> tag is used to highlight text with a background color. For example, if you want to draw attention to a particular word or phrase, you can use the <mark> tag to highlight it with a background color. Here’s an example:

<mark>Highlighted Text</mark>

In this example, the phrase “Highlighted Text” is highlighted with a yellow background color using the <mark> tag to indicate that it is very important.

Activity: Highlight Phrases

Create a webpage that highlights key terms or phrases using HTML. The webpage should contain at least two paragraphs and use the <mark> tag to highlight important words or phrases.

Putting It All Together

Create a webpage that discusses the benefits of exercise. The webpage should contain multiple sections, each with its own heading, and should use a variety of HTML tags to format the content.

Requirements:

• The webpage should have a <head> section with a <title> tag that describes the content of the page.
• The webpage should have a <body> section that contains an <h1> tag for the page title.
• The webpage should have at least three sections, each with its own <h2> tag to indicate the topic.
• The first section should introduce the topic of exercise and its benefits. Use the <p> tag to write a paragraph or two about why exercise is important.
• The second section should describe the physical benefits of exercise. Use the <ul> and <li> tags to list some of the benefits, such as improved cardiovascular health, increased strength, and weight loss.
• The third section should describe the mental benefits of exercise. Use the <ol> and <li> tags to list some of the benefits, such as improved mood, reduced stress and anxiety, and better sleep.
• Use appropriate text formatting tags (e.g., <strong>, <em>, <mark>, <del>, <u>) to emphasize key points in your text.
• Save the webpage with an appropriate file name and test it in a web browser to make sure it displays correctly.

Vocabulary Review