Free Web tutorials covering HTML, CSS, JavaScript, and DHTML from beginner to advanced. Free downloads and developer resources. Personalized help via email, form, and chat. free, web, tutorials, HTML, html, CSS, css, stylesheet, cascading stylesheet, Javascript, javascript, JavaScript, DHTML, dhtml, beginner, advanced, web development, web page, web site, free web tutorial, free HTML tutorial, free CSS tutorial, free css tutorial, free cascading stylesheet tutorial, free stylesheet tutorial, free javascript tutorial, free DHTML tutorial, free HTML class, free CSS class, free stylesheet class, free cascading stylesheet class, free javascript class, free DHTML class

Home	<Code_Punk>'s Web Tutorials

Beginning HTML

Beginning CSS

Website Development and Management

Downloads & Resources

Lesson 2: Formatting Text

The Tag

As you typed text into the <body> of the last lesson, you probably noticed that line breaks made in the code did not break the line when your browser rendered the page. (A line break is made when you hit "Enter" as you're typing in a text editor. A new line is started.)

Browsers ignore line-breaks in code. This is handy because we can use line-breaks to organize our code without it effecting the appearance of the rendered page. But, we do need to have a way to make line breaks. We have two tags to help us: the and tags.

The tag causes a single line break. The tag is one of the few tags that does not have a closing tag. You just type " " wherever you want a line break in your text. Open the page you made in the first lesson and try this:

<html>

<head>
<title>My Page</title>
</head>

<body>
Roses are red Violets are blue Other sites stink But my site is cool.
</body>

</html>

Notice that I didn't make any line breaks in the code. They don't matter to the browser. The browser is only rendering the line breaks defined by the tags. See what it looks like when run in a browser here. In practice, it's easier to understand your code if you make one or two line breaks in the code when using these tags. These line breaks in the code have no effect when the page is rendered in a browser, but they make your code a little easier to keep up with. Tags make line breaks.

Say we want a lot of lines between one line and another. Lets say five lines. We'll use the tag to make as many line breaks as we need:

<html>

<head>
<title>My Page</title>
</head>

<body>
Roses are red
 
Violets are blue Other sites stink But my site is cool.
</body>

</html>

Now view the page this code produces here. Using the tag is a common way of making vertical "whitespace". Use the tag to make any extra vertical whitespace you may need.

Making Paragraphs

The tag blocks text off into paragraphs by inserting two line breaks between separate blocks of text. It has a closing tag. I suggest you use it, but others disagree. It will work in most cases if you just open a paragraph with the opening tag and ignore the closing tag. There can, however, be spacing problems in certain circumstances and using available closing tags is a good habit to get into.

Try this in the <body> of your page:

Roses are red. Violets are blue
Other sites stink. But, my site is cool.

Check out what this page would look like here

You'll notice that the text is now in two blocks with two line breaks after "blue". This is pretty much what the tags do. They add the double line breaks. The tag adds single line breaks (instead of two).

There's also the conceptual difference that the tags contain a block of content and the "unclosed" tag merely causes an effect. This will be important later on. Remember to use the tag to make extra line breaks, not the tag. Only use the tag set when you're going to put some content between the tags.

Adding Emphasis

We add emphasis to a word or phrase by italicizing or making the letters bold. The tags to do this are really simple: and for italics, and and for bold. Using the sample we've started above (except I put everything in one paragraph - ), lets make the words "Roses" and "Violets" italicized and the phrase "my site" bold:

<html>

<head>
<title>My Page</title>
</head>

<body>

Roses are red 
Violets are blue 
Other Sites Stink 
But my site is cool

</body>

</html>

Click here to see the page the new code makes. It will open in a separate window.

Quoting Blocks Of Text

Now for a couple of other ways to format blocks of text. First is the <pre> tag. The <pre> and </pre> tags tell the browser to render the content between them exactly as typed -- including extra spaces and line breaks. The element "pre" refers to pre-formatted text like something you copied from a text or document file. It also comes in handy when you have some odd formatting like if we chose to indent some of the lines of our current poem:

<html>

<head>
<title>My Page</title>
</head>

<body>
<pre>
 Roses are Red
 Violets are blue

 Other sites stink

 But my site is cool.
</pre>
</body>
</html>

Notice that I've put the poem between <pre> tags and that I've included some extra spaces and line breaks in the code. These extra spaces and line breaks will be rendered by the browser because they are between <pre> tags. See how the above code looks when rendered in a browser here. See? The extra spaces and line breaks in the code are now rendered and not ignored.

The next tag used for presenting quoted material is the <blockquote> tag. This makes a neat effect that you're probably used to seeing in print media. It causes some extra margin space to the left of the content between the <blockquote> and <blockquote> tags. This makes the <blockquote> content appear as a more indented than the surrounding text in the rest of the page.

For the example I'm going to code some regular paragraphs () and put a couple of <blockquote>s in between them so you can better see the effect:

<html>

<head>
<title>My Page</title>
</head>

<body>

Here's some text I'm putting in just to make a quick paragraph. I'll put the poem inside a block quote so you can see how the new tag makes wider margins for its content. You'll be using this when you're quoting a large amount of text from another source.

<blockquote>
Roses are red. Violets are blue. Other sites stink. But my site is cool.
</blockquote>

I put the whole poem on one line so the margins would be more noticeable. Below is a better example with a block of text I copied from the Code Punk file zipping guide:

<blockquote>
Unzipping Files -- If you're like me you'll be doing more unzipping than zipping. Fortunately, it couldn't be easier to unzip files with WinZip: 1) Open Windows Explorer (not Internet Explorer) and find the zipped file you want to unzip. 2) In the left frame of Explorer find or make a folder to unzip the zipped file. I made a work folder I use just for unzipping. 3) Now, get the zipped file opened in the right frame of Explorer and the folder in which you want to unzip it in the left frame. Make sure both are visible on the screen to make things easy. 4) Now RIGHT-drag the zipped file to the folder and release the right mouse key. From the pop up menu select the first zip option -- "Extract to C:\name of work folder". You right drag by holding down the right mouse button while dragging instead of the left one. This gives you a pop up menu that offers options instead of just moving the file. WinZip adds the unzipping options to this menu.
</blockquote>

This is some more text in a regular paragraph. I didn't bother formatting the sample text above because I wanted you to be able to clearly see the extra margin space caused by the blockquote tag.

</body>
</html>

Click here to see how the above code would look in your browser. Notice the extra space at the left margin of the text inside the <blockquote> tags. This is how the <blockquote> offsets its content from the surrounding content on the page.

Using

As your code gets longer and bulkier, you'll eventually need to put notes or "comments" in your code that won't show up when the page is rendered in a browser. These notes can help you find your way around your code and can be a real time saver. They also help to explain your code to other people reading it.

You make a comment like this:

Just begin the comment with a "<" followed immediately (no space) by an exclamation point ( ! ) and two dashes ( - , minus signs). Now make a space (or not) and type in your comments. Close the  tag with a space, two dashes and the ">" angle bracket.

Here's what a comment looks like in your code:

<body>


<h2 align="center">Big Page Header</h2>


Here's the main text of the page...

</body>

These comments will appear in your code, but not on your page when it's viewed in a browser. You can add this type of comment anywhere in your HTML code, but most comments are found in the <body>. Get used to adding comments to your pages early. They'll really help you find your way around your code.

Practice making all of the effects above. To save you some typing, download some bulk text here. It is a zipped text file. It's the full tutorial I've written on how to use WinZip®. You can copy and paste sections of the text from it to save you a lot of time typing. Make sure to notice the differences between using <pre> tags and <blockquote>s.

What's important at this point is that you know how to use the tags from this lesson to format any text. Make a single page with at least two examples of each of the above tags before moving on. I'd recommend making your basic code framework from lesson 1, paste in some of the bulk text from my WinZip® tutorial and then add tags as you see fit. Make sure to check your work in a browser frequently.

Next we'll see how to make

big, bold headlines

to title our page's sections and sub-sections. We'll also learn how to align text.

Continue To Lesson 3 -- Making Headers and Alignment >>>

<<< Back To Beginning HTML Index

<Code_Punk>'s Web Tutorials

The <br> Tag