HomeWeb DesignNotary ServicesSpeakerYOUniqueVacationsTidbitsContact RiverCopyright

 

October 22, 2006 11:49 PM

CHAPTER TWO:

Formatting in HTML

INDEX
 
01) Basic HTML Skeleton Review
02) Paragraphs Within the Body
03) Line Breaks Within the Body
04) Horizontal Line Breaks Within the Body
05) Formatting Text in Different Ways
06) Headings Within the Body

01) BASIC HTML SKELETON REVIEW

     This is the basic structure of every Web page. All Web pages start with this skeleton (which you may have saved as a skeleton.html or skeleton.htm file) and build from here.

<HTML>
<HEAD>
<TITLE>Your Title Goes Here</TITLE>
</HEAD>
<BODY>
Everything else goes here... including images, links to other pages, etc.
</BODY>
</HTML>

Everything else discussed in this tutorial WILL go inside the <BODY> section.

02) PARAGRAPHS WITHIN THE BODY

     <P> is the paragraph tag. </P> exists to turn it off, but really isn't necessary, since <P> 'tags' the start of a new one. <P> not only starts a new paragraph, it also inserts an extra blank line in the text.

<HTML>
<HEAD>
<TITLE>Your Title Goes Here</TITLE>
</HEAD>
<BODY>
This text appears in the body of your Web page. It is in the first paragraph.
<P>
This starts the second paragraph.
<P>
This starts the third paragraph. Notice the blank line between each paragraph?
</BODY>
</HTML>

     Click here to see what that page would look like.

03) LINE BREAKS WITHIN THE BODY

     Occasionally, you wish to start a new line, but don't want it as a paragraph (because the extra added blank line that comes with the paragraph <P> tag isn't needed). A line break is useful for this. <BR> is the tag for a line break. It does NOT need to be turned off.

A paragraph tag (<P>) inserts a blank line and begins a new line.  A line break (<BR>) just starts a new line, with no blank line inserted.  Neither of these tags need to be turned off because they automatically turn themselves off when the Web browser encounters the next paragraph and/or page break tag.

04) HORIZONTAL LINE BREAKS WITHIN THE BODY

     What is a horizontal line? It's a line that looks as though it's been etched into a Web page. A horizontal line can be useful to separate sections in a Web page. In it's simplest form, the tag is <HR>, standing for Horizontal Rule. There is NO tag needed to turn it off. In it's more complex form, it can be enhanced in many ways; allowing changes to the line's size, width, alignment, or shading. Directly below is an example of a simple <HR>.


     Listed below are some extensions to the <HR> tag that will enhance horizontal lines, if needed.

HTML CODEDEFINITION OF THE CODE
<HR WIDTH=n> Sets the width of the horizontal line to n, where n is a number that you determine, pixels.
<HR WIDTH=n%> Sets the width to n percent of the screen.
<HR SIZE=n> Sets the thickness of the line to n, whatever you number you wish. 1 is the default.
Using 0 as the number would, of course, cause the size to be nothing, making it
useless as a value.
<HR ALIGN=LEFT> Aligns the line with the left margin.
<HR ALIGN=CENTER> Centers the line.
<HR ALIGN=RIGHT> Aligns the line with the right margin.
<HR NOSHADE> The line becomes solid, rather than 'etched'.

     A combination of the above tags can be used within ONE tag. For example, to set the width to 90% of the screen, with a thickness 3 times the normal, and to center it, the tag would be:

<HR WIDTH=90% SIZE=3 ALIGN=CENTER>

     The above horizontal rule would look like this:


     Another example of a horizontal rule that's set to 300 pixels wide, with a thickness 7 times the normal, and aligned on the left is:

<HR WIDTH=300 SIZE=7 ALIGN=LEFT>

     This horizontal rule would look like this:


The two horizontal rules above show up great in some browsers and not so great in others. Such is the life of different browsers, different versions, viewing from different types of computers (PCs, laptops, etc.).

05) FORMATTING TEXT IN DIFFERENT WAYS

     It is possible to add some pizazz to a Web page. Text can be boldfaced, italicized, underlined,

  preformatted to keep  these     extra spaces,
or monospaced (as printed by a typewriter). The tags are as follows:

<B>This boldfaces text.</B>
<I>This italicizes text.</I>
<U>This underlines text.</U>
<PRE>

This text will keep all of its      spaces      and tabs.
</PRE>
<TT>This monospaces text.</TT>

     Different formats can also be combined. Make sure to turn these off in the opposite order they were turned on!

     This is bolded, italicized, and underlined.  It will
also keep the 5 indented spaces before the first sentence.

     The above tag would look like this:

<B><I><U><PRE>

     This is bolded, italicized, and underlined.  It will also keep the 5
indented spaces before the first sentence.
</PRE></U></I></B>

06) HEADINGS WITHIN THE BODY

     Within the body, headings can be added. Headings come in six different sizes, <H1> through <H6>, with <H1> being the largest and <H6> being the smallest. Headings act as mini-titles within a Web page. Headings are great when used to separate different sections within a Web page. REMINDER: A header (<H1>) must also be turned off at the end of what is being enlarged (</H1>). For example, to enlarge text, use this:

<H1>This is the largest size of header available.</H1>

to get this:

This is the largest size of header available, <H1>.

This is <H2>.

This is <H3>.

This is <H4>.

This is <H5>.
And lastly, this is the smallest -- <H6>.

HTML TUTORIAL 

Tutorial Introduction Introduction
Getting Started How to Get Started
Table of Contents Table of Contents

Chapter One

WHAT IS HTML?

Chapter Two

FORMATTING IN HTML
Chapter Three LISTS
Chapter Four LINKS
Chapter Five IMAGES
Chapter Six TABLES
Chapter Seven FORMS
Chapter Eight EXTENSIONS
Chapter Nine TIPS ON CREATING GREAT WEB PAGES

   

© RiverMOO, Inc.