Acme Web Design Info
Build Your First Web Page with HTML
Contents
Related Articles
Headings and Paragraphs
Headings and paragraphs are the bread and butter of a web page. 90% of most content will fall between these two kinds of tags, which is good because they are very easy to use.
To create an HTML paragraph, just stick some content between <p> and a </p> tags and you're set. The browser will automatically create spacing between paragraphs to distinguish one paragraph from another. If you don't want any spacing between paragraphs, you can use a <br /> tag, known as a "break" tag.
The <br /> tag is different from the other tags we have seen so far because it doesn't have a beginning and ending tag, only a beginning one. Whenever you use a tag like this, make sure to add a "/" right before the end bracket. That will tell your browser that the beginning tag doesn't have a matching ending tag.
This code:
<p>This is the content of my paragraph. <br /> This is more content.</p> produces this result:
This is the content of my paragraph.
This is more content.
One more item that is worth noting is that that multiple spaces are reduced to a single space when displayed. For instance, the code:
<p>This is some text with extra spaces.</p> ends up looking like this:
This is some text with extra spaces.
This function is usually more helpful than hurtful, but occasionally you will want that extra space in your text. An extra space requires using a special character that looks like this:
So by using code that looks like this:
<p>This is some text with extra spaces.</p> we can produce this result:
This is some text with extra spaces.
Headings
Now that you can format a paragraph like a pro, you're ready to learn about headings. Headings are just as easy as paragraphs and help you organize your page in a way that would make your high school english teacher proud.
The following code:
<h1>This is an H1 tag</h1> produces the following result:
This is an H1 tag
The following code:
<h2>This is an H2 tag</h2> produces the following result:
This is an H2 tag
As you can see, the different heading tags get smaller as the heading number goes up. You can use these headings to cleanly organize your content, as in the following example:
My Favorite Music Artists
Below is a list of my favorite artists.
Fleetwood Mac
Fleetwood Mac is my favorite band.
Pantera
Pantera rocks!
Headings go all the way up to <h6>, although I rarely see a web site that use anything above <h4>.
To see headings and paragraphs in hands-on action, copy the code below and paste it into your "hello.html" file between the <body></body> tags. Save the file and then open it in your browser by double-clicking.
You are well on your way to becoming an HTML guru! However, headings and paragraphs are not practical for every kind of content. Next, we will talk about how to create lists with HTML.
|
