Paragraph and BR breaks

If you've ever used a word processor like
Microsoft Word then you know that to start a new
paragraph all you need to do is to hit the Enter
key on your keyboard. The cursor will then move
down, ready for you to start typing. In HTML,
however, you can't do this. If you want to start a
new paragraph, you have to use the P tags.
To try it out, add the following just below your
Heading (You can use your own text, though,
rather than type out the Hamlet soliloquy):
<P>To be, or not to be: that is the question:
Whether 'tis nobler in the mind to suffer the
slings and arrows of outrageous fortune, or to
take arms against a sea of troubles, and by
opposing end them? </P>
<P>To die: to sleep; no more; and by a sleep to
say we end the heart-ache and the thousand
natural shocks that flesh is heir to, 'tis a
consummation devoutly to be wish'd.</P>
When you've finished, your HTML code should
look like this: (Don't worry about the indenting,
though. We did ours just so it would look nice in
this book. Only one press of the spacebar is
recognised in HTML, everything else is ignored,
including indents and carriage returns.)
Note the P tags:
<P></P>
You have to use the P tags whenever you want to
start a new paragraph.
Strictly speaking, though, you don't need the
closing P tag. You can just do this to start a new
paragraph:
<P>
To be, or not to be: that is the question: Whether
'tis nobler in the mind to suffer the slings and
arrows of outrageous fortune, or to take arms
against a sea of troubles, and by opposing end
them?
<P>
To die: to sleep; no more; and by a sleep to say
we end the heart-ache and the thousand natural
shocks that flesh is heir to, 'tis a consummation
devoutly to be wish'd.
The result is the same. But in modern web coding,
it's best to use the closing tag for paragraphs, so
that you can add Styling rules. (You'll learn how
to do this a little later.)
Save your work and view the results in your
browser. You should see this:
Notice the paragraphs breaks in the text. Notice,
too, that although our code was indented, this
doesn't show up in the browser. The browser will
ignore all those indents we had, and any extra
white space. If you want white space you have
'tell' the browser. You do this with the break
tags, like P and BR (which you'll see soon).
As an exercise, try deleting the P tags in your
code. Save and refresh your browser. Watch what
happens:
Without the P tags the text just runs on.
There is still, however, a paragraph break after
the heading, even though we deleted all the P
tags. This is because the H heading tags insert
their own paragraph breaks.
The BR tag
The BR tag is used when you don't want a full
paragraph break. The space between lines of text
is then reduced. The BR tag doesn't need a
closing tag, and can be just by itself.
As an example, add the following to the end of
your text (the BR part).
<P>To die: to sleep; no more; and by a sleep to
say we end the heart-ache and the thousand
natural shocks that flesh is heir to, 'tis a
consummation devoutly to be wish'd.
<BR>
... Rest of Hamlet's Soliloquy goes here
</BODY>
</HTML>
Notice that we've deleted the end P tag for the
second paragraph. If you leave it in, you'll get a
double line break from the two <P> tags, as well
as a single line break from the <BR> tag.
Save your changes and switch to your browser.
Press F5 to refresh the page and the results
should look like this:
So if you don't want a full, double-line break then
remember to use the BR tag. And careful of the
end P tags or you'll end up more line breaks than
you expected.
In the next lesson, we'll take a look at bold and
italic text.
<< 

Basic HTML - Heading Tags

You can have a nice big heading on your web
page quite easily. This is done with the H tags.
The biggest size heading you can have is H1. If
you want smaller sized headings then you change
the number after the H. You can have up to 6
different sizes. All headings need to go between
the two BODY tags.
Try it out for yourself. Open up the code for your
firstwebpage.html file, if it's not already open. (If
it's not, you can now right-click and Send To >
Notepad . If you didn't get this working then
simply click File > Open from the menu at the top
of your text editor.)
Add the following just below your first BODY tag:
<H1> A Size 1 Heading</H1>
Incidentally, tags are not case sensitive. So you
can have this:
<h1> A Size 1 Heading</h1>
Or even this:
<h1> A Size 1 Heading </H1>
But using all capital letters makes your code
more readable.
Once you've added the H1 tags, though, your
HTML should look like this:
To see what it looks like, open Windows Explorer
or Finder on the Mac, if it's not already open.
Navigate to where you saved your web page to,
and then double click to open it up. (If you
already have the page open, simply press F5 to
refresh the page.) You should see this in your
browser:
Switch back to your code and change the 1's into
3's. So your HTML heading should now be this:
<H3> A Size 3 Heading</H3>
Save the changes. Go back to your browser and
press F5 to refresh the page. You should see this:
Notice how much smaller the H3 heading is
compared to the H1 heading. (If your headings
don't look right, make sure you haven't missed
any angle brackets out, or any forward-slash
closing tags.)