Introduction to HTML 2: Formatting Text

HTML Tags

HTML works in a very simple, very logical, format. It reads like you do, top to bottom, left to right. That's important to remember. HTML is written with TEXT. What you use to set certain sections apart as bigger text, smaller text, bold text, underlined text, is a series of tags.

Think of tags as commands. Let's say you want a line of text to be bold. You will put a tag at the exact point you want the bold lettering to start and another tag where you want the bold lettering to stop. If you want just a word to be italic, you will place a start italic tag at the beginning of the word and an end italic tag at the end of the word. Is this making sense so far?

Tag Format

All tag (I sometimes call them command) formats are the same. They begin with a less-than sign: "<" and end with a greater-than sign: ">". Always. No exceptions. What goes inside the "<" and ">" is the tag. Learning HTML is learning the tag to perform whatever command you want to do. Here's an example:

The tag for bold lettering is "B". That makes sense.

Here's what the tags look like to turn the word "Joe" bold:

<B>Joe</B>

Look At What's Happening:

1. <B> is the beginning bold tag.
2. "Joe" is the word being affected by the <B> tag.
3. </B> is the end bold tag. Notice it is exactly the same as the beginning tag except there is a slash in front of the tag command.
4. This is what the bold tags above produced: Joe

Some Questions

Q. Is the end tag for other commands simply the begin tag with the added slash?
A. Yup.

Q. Will the tags show up on my page?
A. No. As long as your commands are inside the < and > marks, the tag is used to alter the text, but the actual code is hidden from the viewer.

Q. Your bold tag uses a capital "B". Do all HTML tags use a capital letter?
A. The browser doesn't care. In terms of tags, capitals and lowercase letters are equal. But it would be a very good idea for you to make a habit of writing your tags in capital letters as it sets them apart from the normal text. It also makes them easier to pick out later when you are revisiting the code.

Q. Must everything have a tag to show up on the page?
A. No. If you just type in text, it'll show up. But it will not have any special look.

Q. What if I forget to add the end tag or forget to add the slash to the end tag command?
A. That's trouble, but easy-to-fix trouble. It will be obvious if you've not placed an end tag when you look at the document in your browser. The entire document will be affected after the point where you forgot the end tag. Just go back into the document, add the slash, and reload the document into the browser.

Q. Do all HTML tags require both a begin and end tag, like above?
A. No. There are exceptions to the rule, but let's stay on the ones that do require both tags to work for now. Moving along...


--------------------------------------------------------------------------------

Open and Close Tags

The majority of HTML tags do require both an open and a close tag (a begin and end tag). Most are very easy to understand because the tag is obvious. Here are a few and what they do to text:

Affect
Code
Code Used
What It Does
BOLD
B
<B>Joe</B>
Joe
Italic
I
<I>Joe</I>
Joe
Typewriter
TT
<TT>Joe</TT>
Joe

Can I Use Two Tags at Once?

Yes. Just make sure to begin and end both. Like so:

<B><I>Bold and Italic</I></B> gives you Bold and Italic

<B><TT>Typewriter and Bold</TT></B> gives you Typewriter and Bold

If you do use multiple tags to alter text, make a point of not getting the end tags out of order. Look at this:


<B><I><TT>Text Text</TT></B></I>


In terms of format, the example above is not correct. The end tags are out of order in relation to the start tags.

Follow this rule:
Always set the beginning and end tags at the same time, always placing them on the farthest end of the item being affected.

Here, again, is the example above in correct form:


<B><I><TT>Text Text</TT></I></B>
 
Notice the Bold tags are on the far ends. Next in line are the Italics and finally the Typewriter Text tags are closest to the affected text. Just keep setting commands at the farthest ends each time you add them and you'll stay in good form.

Single Tags

The open and close tag format dominates the majority of the available HTML tags, but there are tags that stand alone. Here are three I use extensively:

Tag What It Does
<HR> This command gives you a line across the page. (HR stands for Horizontal Reference.) The line right above the words "Single tags" was made using an <HR> tag.
<BR> This BReaks the text and starts it again on the next line. Remember you saved your document as TEXT so where you hit ENTER to jump to the next line was not saved. In an HTML document, you need to denote where you want every carriage return with a <BR>.
<P> This stands for Paragraph. It does the exact same thing as the <BR> above except this tag skips a line. BR just jumps to the next line, P skips a line before starting the text again.


NOTE:
<P> This is used both as a single tag and as traditional Open/Close tag. Using the later will give more control over format. If you are getting errors with formatting after using single tag <p>, then use the Open/Close format.

Writing Your First Page

There are some tags that MUST be on every page.

You will start every page with this tag: <HTML>
That makes sense. You are denoting that this is an HTML document.

Your next tags will always be these:<HEAD> and </HEAD>. Whatever you put between these two tags will not show up anywhere in the browser except for the title of the page. It will contain information about the web page.

Inside the <HEAD> and </HEAD> tags, you will put <TITLE> and </TITLE>
Whatever you put between these two tags will show up in the title bar way at the top.

Your next tags will always be these: <BODY> and </BODY>
Whatever you put between these two tags will show up in your web page.

Finally, you'll end every page you write with this tag: </HTML>
You started the page with HTML and you will end the page with /HTML.

Open your text editor and type the following:


<HTML>

<head>
<TITLE> My first html page </TITLE>
</head>

<B>This is my first HTML page!</B><P>

I can write in <I>Italic</I> or <B>Bold</B><BR>

<HR>

<B><I>Or I can write in both</I></B><BR>

<HR>

</HTML>

Save the page as .html

Open the page with a browser:

  • Open your browser.
  • Click File/ Open, and browse to where you saved your file and select your new .html file.

Heading Commands

Heading commands are used extensively in HTML documents.

There are six (6) heading commands: <H1> through <H6>. <H1> is the largest and <H6> is the smallest. Here are their relative sizes:

<H1>This is Heading 1</H1>

<H2>This is Heading 2</H2>

<H3>This is Heading 3</H3>

<H4>This is Heading 4</H4>

<H5>This is Heading 5</H5>
<H6>This is Heading 6</H6>

Heading commands create nice, bold text, as shown above, and are quite easy to use. It's a simple H# and /H# command. However, they do have one annoying trait. They like to be alone.

When you use a heading command, by default, you set the text alone. It's like the heading commands carry a <P> command with them. You cannot get other text to sit right up against a heading.

Font Size Commands

Maybe you'd like a little more control over your text size. Well, here it is. The <FONT SIZE> commands. Heading commands are great for right at the top of the page, but these font commands are going to end up as the workhorses of your pages.

There are twenty-one (21) font size commands available to you:

+7 through +1, 7 through 1, and -1 through -6.

As you've probably guessed, +7 is the largest (it's huge); -7 is the smallest (it's a little too small). Here are a few of them in action. There's no need to show all of them. You'll get the idea of their relative sizes. Follow this pattern to place one on your page.

<FONT SIZE="+3">This is +3</FONT>

<FONT SIZE="3">This is 3</FONT>

<FONT SIZE="-3">This is -3</FONT>

The "+" means take the default font and increase from there. The "-" is just the opposite and no symbol sets the font at a pre-determined size. You can override these predetermined - or "default" sizes with further formatting which we will get into later.

Notice that this first command, <FONT SIZE="--"> is actually doing two things:

1. It's asking for a new font size...
2. then offering a number to denote the font size.

This is what is called passing an "argument" or "attribute" to the tag or command. When you have that, you denote the attribute with an equal sign and enclose it within quotation marks.

Also notice that the end command for a <FONT SIZE="--"> tag only requires </FONT>. I should tell you now that there are two other attributes you can use inside the FONT tag: COLOR and FACE (these both have tutorials unto themselves. Take a look). But even if you use all three inside a FONT tag, you still only need one </FONT>.

Remember that an attribute is inside of a tag. When you use an end command, you are closing the tag, not the attribute. So you only need the one end tag, like above.

Lets type the word Joe with the following attributes:

  • font size"4"
  • face "veranda"
  • color "red"

<font size="4" face="verdana" color="red"> Joe </font>

It should look like this: Joe.

Centering Text

Since you've already done some writing you've no doubt noticed that the text that appeared in the browser window was justified to the left of the screen. That's what's known as the default. It just happens without your specifying any particular justification.


Notice that this text is centered on the page. It's done by surrounding the text you want centered with simple <CENTER> and </CENTER> commands.

Here's what it looks like:


<CENTER>
All text in here will be centered

</CENTER>

Text To The Right

Aligning text to the right or left - or even center - is done by setting the text aside as a paragraph unto itself. I'm going to use the <P> command, but now I'm going to alter it. I'm going to add an attribute to it.
Here's the format:

<P ALIGN="right">Text in here is pushed to the right</P>

It should look like this:     Text in here is pushed to the right.

 

I added the ALIGN="right" attribute to the <P> command. If you add an attribute to a single tag like the <P> tag, or the <BR> tag (yes, there are attributes for BR), then you'll need to use an end tag: </P>.

Bullet Lists - Unordered Lists

The following is a bulleted list - or an un-ordered list.

<UL>
  <LI> one </LI>
  <LI> two </LI>
  <LI> three </LI>
</UL>

Here's what is looks like:
  • one
  • two
  • three

Here's What's Happening

  • UL stands for Unordered List. It means bullets will be used rather than numbers. Numbers will be explained later.
  • LI stands for List Item. It denotes the next thing that will receive a bullet. Although some may say you do not need a /LI - you should get in the habit of using a closing tag whenever you open a tag
  • /UL ends the entire list.

HINT: If you use a center command before this, it doesn't center the entire list, it centers each item messing up the look of the list. If you would like to move the list closer to the center of the page, simply add more List commands.Three moves the list almost to the center. Just remember, if you use three UL commands you need to offer three /UL commands. Like this:

<UL><UL><UL>
<LI> list item </LI>
</UL></UL></UL>

You could also use the <BLOCKQUOTE> </BLOCKQUOTE> command in the same way.

You can change the look of the bullets by simply adding the command TYPE="square" into your UL command. Like so:

<UL TYPE="square">
<LI> List Item 1 </LI>
<LI> List Item 2 </LI>
<LI> List Item 3 </LI>
</UL>

This is what you get:

  • List Item 1
  • List Item 2
  • List Item 3

Number Lists - Ordered Lists

If you would like to create a list that numbers the items rather than just putting a bullet in front, then you create an Ordered list.

<OL>
<LI> List Item 1 </LI>
<LI> List Item 2 </LI>
<LI> List Item 3 </LI>
</OL>

This is what you get:

  1. List Item 1
  2. List Item 2
  3. List Item 3

Notice it's just the same format except I have <OL> where <UL> used to be. If you want Roman Numerals simply place a TYPE="I" inside the OL command. Notice that is a capital "I" and not the number one.

<OL TYPE="I">
<LI> List Item 1 </LI>
<LI> List Item 2 </LI>
<LI> List Item 3 </LI>
</OL>

Here's what you get:

  1. List Item 1
  2. List Item 2
  3. List Item 3

If you want Letters:

<OL TYPE="A">
<LI> List Item 1 </LI>
<LI> List Item 2 </LI>
<LI> List Item 3 </LI>
</OL>

This is what you get:

  1. List Item 1
  2. List Item 2
  3. List Item 3
You can turn the letters or the Roman numerals to lower case letters by putting the lower case version of the letter in the OL tag. like so:

<OL TYPE="i"> and <OL TYPE="a">

YOu can also start the count after one. Maybe you don't want your count to start at one every time. That's easy to fix. Here's an ordered list that starts at four:

<OL START="4">
<LI> List Item 1 </LI>
<LI> List Item 2 </LI>
<LI> List Item 3 </LI>
</OL>

Here's what you get:

  1. List Item 1
  2. List Item 2
  3. List Item 3

Can I put these together?

Yes. Just remember to close each one. You could do something like an OL list and under each LI command for the OL, you could put in a small UL. Like so:

<OL>
  <LI> Main Heading
    <UL>
      <LI> List item 1 </LI>
      <LI> List item 2 </LI>
    </UL>
  </LI>
  <LI> Secondary Heading
    <UL>
      <LI> List item 1 </LI>
      <LI> List item 2 </LI>
    </UL>
  </LI>
</OL>

here's what it looks like:

  1. Main Heading
    • List item 1
    • List item 2
  2. Secondary Heading
    • List item 1
    • List item 2

There is a pattern to putting unordered lists under one another. The first list gives you the solid bullet. The second gives you the empty bullet. You can see that above. Each list after that gives you a square bullet.

The Definition List

There's one more set of list commands that manipulate the text for you. The lists above are all single item lists. Each LI command makes one list item. Here's a Definition List:

<H4> Here's What's For Dinner </H4>
<DL>
  <DT> Salad </DT>
      <DD> Green stuff and dressing </DD>
  <DT> The Meal </DT>
      <DD> Mystery meat and mashed yams </DD>
  <DT> Dessert </DT>
      <DD> A mint </DD>
</DL>

here's what it looks like.

Here's What's For Dinner

Salad
Green stuff and dressing
The Meal
Mystery meat and mashed yams
Dessert
A mint

Here's What's Happening

  • I used an <H4> command to create a heading
  • <DL> stands for Definition List. It tells the browser that a double tier list is coming up.
  • <DT> stands for Definition Term. It's the first tier.
  • <DD> stands for Definition Description. It's indented and appears to modify the definition term.

There are many ways to format text on a page. What we have done here is called "in-line" formatting - the the formatting is in the same line as the text. Another way to format a page is with a "style sheet". This is called a "css" which is short for Cascading Style Sheet. You create a simple text file with all of your formatting and save it as type "text" with a file extension of .css. Creating and including a style sheet is one of the primary elements in creating DHTML - or Dynamic HTML - instead of plain HTML. The other element is scripting.

 
 
 Home
 Previous
Next