A Beginner's Tutorial to HTML - Lesson 3 Formatting Documents shows how to format text in different ways
A Beginner's Tutorial to HTML - Lesson 3 Formatting Documents shows how to format text in different ways!
{short description of image}.

HTML Tutorial:
Lesson 1
Lesson 2
Lesson 3
Lesson 4
Lesson 5
Lesson 6
Lesson 7

 

 

 
html tutorial
Garvick Com

A Beginner's Tutorial to HTML

Lesson 3
Formatting Documents

[ Headings] [ Paragraphs] [Formatting Text ][ Preformatted Text]
[ Blockquote] [Address] [Horizontal Rule ][Comments]


Headings


The heading tags <h?> are placed within the <body> tag. There are 6 levels you can choose from. Following are some examples:

This is what the code would look like: 

<h1>This is Heading 1, the biggest font. (it's surrounded by the <H?> tag. The ? denotes a number between 1 and 6)</h1> 

This is what it would look like in the browser: 

This is Heading 1, the biggest font. (it's surrounded by the <H?> tag. The ? denotes a number between 1 and 6)

Mouse

This is what the code would look like:

<h3 align=center>This is Heading 3, the middle size font. This particular tag includes the attribute align=center (attributes are center, right and left with left being the default)</h3> 

This is what it would look like in the browser: 
 

This is Heading 3, the middle size font. This particular tag includes the attribute align=center (attributes are center, right and left with left being the default)

Mouse

This is what the code would look like:

<h6>This is Heading 6 which is the smallest sized font.</h6> 

This is what it would look like in the browser: 
 

This is Heading 6 which is the smallest sized font.

Mouse

Paragraphs:


Once you put your heading into the document, you'll want to have a paragraph or two to tell people what you're all about. To do this just start typing underneath your heading. This would be the first paragraph to appear within the body of the document. Unless you specify otherwise, the text will wrap with a single space between each word, regardless of how you lay out the document or how many spaces you put between words. To start a new paragrah you have to use a paragraph symbol, like this <P>

If you want to force a line break with no extra space between lines, use the Line Break<br> tag.
This is useful if you want to end a line
before it reaches the end of the page,
or for typing address lists
or whatever.

<NOBR>...</NOBR>

The <NOBR> tag is used if you want to make sure that a few words do not break between lines.

<WBR>...</WBR>

The <WBR> tag is used to indicate a breaking point within a line only when it's appropriate to do so, if the line fits on the screen, then this tag is ignored..



To center a paragraph use the <p align=center> tag.
The code would look like this:

<p align=center>To center a line of text</p>


It would look like this in the browser:

To center a line of text

Mouse

Formatting Text


  • To display text in italics  use the<i>italics</i> tag.

  • To display text in bold use the<b>bold</b> tag.

  • To display text in underline  use the<u>underline</u> tag.

  • To display text in subscript   use the<sub>subscript</sub> tag.

  • To display text in superscript  use the<sup>superscript</sup> tag.

  • To display blinking  text use the<blink>blink</blink> tag (a word of warning, the blink tag seems to be generally looked upon with distaste, use at your own risk. :)

  • To display text in a big font, use the<big>big</big> tag.

  • To display text in a small  font, use the<small>small</small> tag.

  • To display text with strikethrough, use the <strike>strikethrough</strike> tag.

To display text in varying sizes use the <font size=?> tag. The ? denotes a number between 1 and 7, the default being 3. To take this even further you can also use the + or - value to get just the right size, i.e., <font size=+?>.
 
Examples would be:
<font size=5>:  font size=5 
<font size=-1>:    font size=-1 

Mouse

Preformatted Text


The Preformatted Text <pre> tag allows you to place the text anywhere on the screen or have text with more than one space between words. The only drawback with preformatted text is that is uses a monospaced font.

This is what the code would look like: 


<pre>This is an example       This is another
         of preformatted           example of
         text.                           preformatted text.
</pre>


This is how it would look in the browser:
This is an example   This is another
of preformatted      example of 
text.                preformatted text.

Mouse

Blockquote


Use the <blockquote> tag for quotes or stuff that needs to be left and right indented.

This is what the code would look like:

<blockquote>Use this tag for material that needs to be left and right indented, such as quotes.<blockquote>

This is what it would look like in the browser:  

Use this tag for material that needs to be left and right indented, such as quotes.

Mouse

Address


The address <address> tag automatically puts your address into italics. It's normally placed either at the top or the bottom of the document (don't forget to end each line with the <br> tag).

This is what the code would look like:

<address>
Garvick Enterprises
Vancouver, BC
V5W 3K9</address>

This is what it would look like in the browser:

Garvick Enterprises
Vancouver, BC
V5W 3K9

Mouse

Horizontal Rule


The Horizontal Rule <hr>is useful to separate the different sections of your document especially the text from your email address at the bottom of the screen. 

The attributes are:   

  • <size=?>, where "?" is the thickness in pixels. The default is "size=2".
  • <width=? or ?%hr>, where "?" is the width in pixels and "?%" is the width as a percentage of the screen. The default is "width=100%". It's preferable to use percentage when determining the width of the rule.
  • <align=left,center,right>. Determines the alignment of the rule, the default is "align=center"
  • <noshade>. Turns off the 3D effect of the rule, by default the shading is turned off.
This is what the code would look like:

<hr size=5 width=75% noshade>

This is what it would look like in the browser:


Since Horizontal Lines can be pretty boring, it's much more fun to use a graphic line. You can pick these up all over the place as they are just graphics. Put them in your document the same way you'd place any graphic.

This is what the code would look like:

<IMG SRC="cmouse-l.gif" HEIGHT=32 WIDTH=450">

Check out the Graphic Line below to see this in action.

Mouse

Comments


If you want to leave a comment for your own reference but which will not show up on the browser's window enclose the comment in the <!--type your comment here--> tag. (however, the comment will appear if you check out the Document Source under View on your Browsers toolbar (Netscape).

Note: Don't include any HTML tags within a comment, it thoroughly confuses some browsers.

|  Lesson 1 (Learning the Basics) | Lesson 2 (Adding Color)  | Lesson 3 (Formatting Documents) |
Lesson 4 (Graphics) |  Lesson 5 (Linking Text & Graphics) |  Lesson 6 (Lists) |
| Lesson 7 (Tables) | Back to HTML Tutorial |

 

Garvick Home | Free Recipes | Shopping Mall | Annual Events | Vancouver BC

 

Site Map | Garvick's Privacy Policy