User Tools

Site Tools


en:web_development:text:html_tags

Web Development Lesson 2 - Text

HTML Tags

Objectives

In this exercise, you'll learn about how to use HTML uses tags to format text as paragraphs.

Tools: JSFiddle

  • jsfiddle is an online tool that's perfect for testing simple bits of code. It supports HTML, CSS and Javascript, and allows you to see all three on the same screen as the result.
  • Open jsfiddle in your browser.
  • Paste the following code into the HTML section of jsfiddle.
My Story

My friend Pablo has a pet dog called Sam who likes to have his tummy scratched. When they go to the park, he likes to chase a ball. He rolls in the dirt so Pablo has to wash him when they get home.

On Sundays they drive to the mountains where he runs around smelling the grass and wagging his tail. He gets so tired that he sleeps all the way home.
  • Click 'Run' at the top left of the screen. The results will be shown at the bottom right.

Paragraphs

  • Notice how the text runs continuously rather than dividing into paragraphs. The browser ignores carriage returns, tabs, double spaces and other document formatting information. We need to add these using HTML 'tags'. Write <p> before each paragraph and </p> at the end of each parragraph. Like this:
My Story
<p>My friend Pablo has a pet dog called Sam who likes to have his tummy scratched. When they go to the park, he likes to chase a ball. He rolls in the dirt so Pablo has to wash him when they get home.</p>
<p>On Sundays they drive to the mountains where he runs around smelling the grass and wagging his tail. He gets so tired that he sleeps all the way home.</p>
  • Click 'Run' again and observe the results.
  • <p> means 'paragraph'.
  • Each HTML tag <p> must have a corresponding closing tag </p>. The closing tag always includes the symbol /.
  • Everything between the opening and closing tags is considered part of a single paragraph.

Next: Formatting Text

en/web_development/text/html_tags.txt · Last modified: 2023/08/16 09:33 (external edit)