Adding Paragraphs to a Web Page with HTML

Add paragraphs to a web page using the paragraph tag.

The basic paragraph tag looks like this: <p></p>

Always use an open and close tag when placing paragraphs on your pages. They will work without a closing tag, but to be W3C compliant you should use the closer.

Text that you want to appear on the page is typed between the tags.

Add a couple of paragraph tags below the header tags in the right division.

If you want to save time , here's the code from the home page of the demo site:

<p>This is my first website and this is my first web page. When I complete this tutorial I should have enough information to start work on the website that I really want to build.</p>
<p>I am going to learn about structuring web pages with divisions, how to use CSS style sheets, using color properly and many other aspects of building a great website.</p>
<p>I'm also going to learn the basics of getting my website good positions on the search engines.</p>

Copy and paste below the header tag in the right division.

Save the changes and look at the page in your browser.


Code should look like this:
<div id="main">
<div id="left"><img src="images/strawberry.jpg"></div>
<div id="right">
<h1>My First Web Page</h1>
<p>This is my first website and this is my first web page. When I complete this tutorial I should have enough information to start work on the website that I really want to build.</p>
<p>I am going to learn about structuring web pages with divisions, how to use CSS style sheets, using color properly and many other aspects of building a great website.</p>
<p>I'm also going to learn the basics of getting my website good positions on the search engines.</p>
</div>
</div>

What we need now are the style settings for our paragraphs.

Open the stylesheet in your text editor and add this block of code:
p {
font-family:helvetica, tahoma, verdana, arial,serif;
font-style:normal;
font-weight:normal;
font-size:11pt;
text-align: left;
text-indent:1em;
margin: 4px 30px 4px 30px }

These settings are pretty much the same as the ones we added for the header tag.

We set the size of text to 11 points and aligned the text to the left. We did add a line to indent the text at the beginning of each paragraph. text-indent:1em

margin: 4px 30px 4px 30px }

This line of code adds a 4 pixel margin to the top of the paragraph, 30 pixels to the right, 4 pixels to the bottom and 30 pixelsto the left.


Save the changes to the style sheet and look at the web page in your browser. You may need to click the reload or refresh button to see the change.

We're going to be using firstpage.html as our template page to create the other pages of our site. One of the things we need is a site heading or logo at the top of the page.



Take a short quiz on the information you just learned.

Let's add a site heading.