weballey logo
 
left HTML - layout backnext right
homesearchsite mape-mail
introduction
software
tags
basic page
text
< layout >
pictures
background
text color
hyperlinks
quick recap
tag overview
publishing
promotion
epilogue
      When you want to start on a new line in your word processor, you press the [Enter] key. In word processing jargon: a hard line break. The cursor goes to the next line and you can go on typing. You could try to do this in a web page.
This is
a HTML
course.

What you will see in your browser window will however look something like this:

This is a HTML course.

Line breaks
    HTML does not really do anything with normal line breaks, it just skips them. Until it reaches the edge of your browser window. This may seem a bit odd at first glance. But it does have its purpose. Browser windows come in all sizes, fonts in numerous varieties. Writing in a wide window and viewing the HTML in a narrow window would produce all kinds of unpredictable results. Like alternating short and long lines.
    The designers of HTML have thought about this. The browser principally only breaks the line at the edge of the window. Or when it encounters a tag telling it to do something else. The basic tag for this purpose is the <BR> or line break. If you would like to make the text appear like above, you could do this.

This is<BR>
a HTML<BR>
course.<BR>

    HTML does not really care about regular line breaks. You can stash everything any way you like, as long as you use the proper tags. It does not matter to your browser at all. You could also try this. You could even create a complete webpage, using only one line of HTML. It will look just the same in your browser.

    This is<BR>a HTML<BR>course.<BR>

Readable code
    For a small piece of HTML this is acceptable. Writing whole pages like this is pure masochism. Your code becomes unreadable. Keep your code similar to the intended look of your web page. When using a <BR> tag, go to a new line in your editor.

    <P>This is a paragraph.</P>

Paragraphs
    When you want to skip a line, using the BR tag won't always work. Even if you use dozens. To this purpose there is another tag, the paragraph tag: <P>. It skips a line and starts a new paragraph of text. While not strictly necessary, it is advisable to use a closing </P> tag for paragraphs. Leaving them out may give you problems when applying style sheets later on.

Margins
    It doesn't look very appealing, if the text just stretches side to side in your browser window. It makes the text also less readable. You can apply margins using the <BLOCKQUOTE> tag. The text will be indented on both sides. Before and after these tags you get an extra white line.
    If you only want to indent on the left side, you can use the <UL> tag. You can also make the left margin wider than the right with this tag. This combination can be used for a background with a continuous side bar.

<BLOCKQUOTE>
<UL>
<UL>
Put the text of your page in here.
</UL>
</UL>
</BLOCKQUOTE>
You can see for yourself what such a page looks like and find some extra tips on layout there.

Table layout
    Making your page look like on this site is a bit more difficult, you need to master the TABLE tag. Too complicated for beginners, I think. But if you would like to see how this is done, have a look at my web design page on tables. If you'd like to learn and understand how to utilize tables yourself, have a look at the tables tutorial.

bottom  
left Copyright © Gerben Hoekstra - All rights reserved backnext right