HTML 101

By Scot Hacker, Lisa Pickoff-White
Published May 16, 2007 in Web Development

Working With Text

You insert normal text by using the paragraph tag: <p>. Because it's a block-level element, the paragraph tag automatically creates an empty line above and below itself. Let's create a new paragraph in the section, under the heading:

<html>
<head>
<title>My First HTML Page</title>
</head>
<body style="background-color: #F5F5DC;">

<div align="center"><h1>Welcome to My First HTML Page </h1></div>

<p>
I'm learning HTML at the UC Berkeley Graduate School of Journalism.
</p>

</body>
</html>

Paragraph textNotice that the text aligns to the left, because it is not contained in the div tag that aligns center.

Emphasizing text

We can emphasize text by using the <strong> and <em> tags.

<strong> makes text stand out as bold by default, and <em> emphasizes (italicizes) text.

Let's use these two tags – strong and em – in our sentence:

<html>
<head>
<title>My First HTML Page</title>
</head>
<body style="background-color: #F5F5DC;">

<div align="center"><h1>Welcome to My First HTML Page </h1></div>

<p>
I'm learning <em>HTML</em> at the UC Berkeley <strong>Graduate School of Journalism.</strong>
</p>

</body>
</html>

Emphasis textNow let's write a new sentence inside the same paragraph, while putting some space in between the lines by using the break tag <br />. The <br /> tag in HTML is the equivalent of holding down Shift while you hit Enter/Return in a word processor – you get a line break, but not a new paragraph.

<html>
<head>
<title>My First HTML Page</title>
</head>
<body style="background-color: #F5F5DC;">

<div align="center"><h1>Welcome to My First HTML Page </h1></div>

<p>
I'm learning <em>HTML</em> at the UC Berkeley <strong>Graduate School of Journalism.</strong><br />
Here is one of my favorite Web sites.
</p>

</body>
</html>

Line break Notice that your second sentence is on a new line, but still contained within the same paragraph.

Add your comment

Login to post a comment.