Handout2 formatting tags

WEBPROG1 – Web Programming 1 (HTML) Prelim Period
Handout #2

HTML Formatting Tags
In this lesson you will learn the basics of formatting text within an HTML. The examples below will
show you how to do many formatting functions that you have most likely seen in your word processor.

Bold, Italic and More

Code:
An example of Bold Text 
An example of Emphasized Text 
An example of Strong Text 
An example of Italic Text 
An example of superscripted Text 
An example of subscripted Text 
An example of <del>struckthrough Text</del> 
An example of <code>Computer Code Text</code> 

Display:

An example of Bold Text

An example of Emphasized Text

An example of Strong Text
An example of Italic Text

An example of superscripted Text

An example of subscripted Text

An example of

An example of Computer Code Text

Line Breaks
Line breaks are different than most of the tags we have seen so far. A line break ends the line you
are currently on and resumes on the next line. Placing within the code is the same as pressing
the return key in a word processor. Use the tag within the <address> tag.

Code:
<address>
Will Mateson 
Box 61 
Cleveland, Ohio 
</address>

Prepared By: RICHARD F. ORPIANO Page 1 of 6

Handout #2

Display:
Will Mateson
Box 61
Cleveland, Ohio

Preformatted HTML Text
Use the <pre> tag for any special circumstances where you wish to have the text appear exactly
as it is typed. Spaces, tabs, and line breaks will be preserved with the pre tag.

Code:
<pre>
Roses are Red,
Violets are blue,
I may sound crazy,
But I love you!</pre>

Display:
Roses are Red,
Violets are blue,
I may sound crazy,
But I love you!

HTML Horizontal Rule

Use the <hr /> tag to display lines across the screen. Note: the horizontal rule tag the special form,
like the line break tag.

Code:
<hr />
Use
<hr /><hr />
Them
<hr />
Sparingly
<hr />
Display:
Use
Them
Sparingly

HTML - Font

Handout #2

The tag is used to add style, size, and color to the text on your site. Use the size, color, and
face attributes to manipulate your fonts. Use a <basefont> tag to set all of your text to the same size,
face, and color.

Font Size
Set the size of your font with size. The range of accepted values is from 1(smallest) to 7(largest).
The default size of a font is 3.

HTML Code:
Here is a size 5 font

Display:

Here is a size 5 font.
Font Color
Set the color of your font with color.

HTML Code:
This text is hexcolor #990000
This text is red

Display:

This text is hexcolor #990000

This text is red

Font Face
Choose a different font face using any font you have installed. Be aware that if the user viewing
the page doesn't have the font installed, they will not be able to see it. Instead they will default to
Times New Roman. An option is to choose a few that are similar in appearance.

HTML Code:
This paragraph has had its
font...

Display:

This paragraph has had its font formatted by the font tag!

Basefont - Set a Solid Base

Handout #2

With the basefont tag you will be able to set the default font for your web page. We highly
recommend specifying a basefont if you plan on using a specifying a font with HTML. Below is the
correct way to set your basefont.

HTML Code:
<html> <body>
<basefont size="2" color="green">
This paragraph has had its font...
</basefont>
</body> </html>

Display:

This paragraph has had its font formatted by the basefont tag!



However, the use of basefont is deprecated, which means it may not be supported sometime
in the future. The perfectly correct way to change your sites basefont is to set it with CSS.

HTML Color - bgcolor
The bgcolor attribute is used to control the background of an HTML element, specifically page and
table backgrounds. Bgcolor can be placed within several of the HTML tags. However, we suggest you
only use it for your page's main background (<body>) and in tables.

The HTML to change the background color is simple:

<TAGNAME bgcolor="value">

Quick and dirty, here is how to change the background of your web page. Just use the bgcolor
attribute in the <body> tag and you are golden.

Code:
<body bgcolor="Silver">
We set the background...
</body>

Display:

We set the background of the body to be silver. The body tag is where you change the pages
background. Now continue the lesson to learn more about adding background colors in your HTML!

HTML Coloring System - Color Names

Handout #2

Before diving into the bgcolor attribute, it is important to understand the coloring system used in
HTML.

There are 3 different methods to set the background color. The simplest being the Generic terms
of colors. Examples: black, white, red, green, and blue. Generic colors are preset HTML coded colors
where the value is simply the name of each color. Here is a sample of the most widely supported
colors and their respective name values.

Black Gray Silver White
Yellow Lime Aqua Fuchsia
Red Green Blue Purple
Maroon Olive Navy Teal

HTML Coloring System - Hexadecimal
Hexadecimals are by far the hardest to understand but usually work from browser to browser.
Here is a brief math lesson. In the decimal numbering system you have 10 possible values to choose
from. As in the number 2_6, we can choose a number between 0-9 to fill in that blank.

The hexadecimal system is different in that it allows for 16 possible digits. But aren't there only 10
possible numbers? Yes! That is why they use the letters a-f to represent values of 10-15. Below is a
decimal -> hexadecimal reference:

Decimal 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
Hexadecimal 0 1 2 3 4 5 6 7 8 9 A B C D E F

That means the range for a hexadecimal is 0-F, as compared to decimal's 0-9. Color defined with
hex uses the first 2 digits for red, the second 2 for green, and the last 2 for blue. If we wanted to pure
green, our hexadecimal value would be #00FF00, since F is the maximum amount and we would want
red and blue values to be 0. Here is an example of hexadecimal green for a table's background:

bgcolor="#00FF00"

The pound sign (#) simply tells the browser that the following characters are a combined
hexadecimal value. If you want to learn to use hexadecimal we suggest you experiment with making a
bunch of different tables with various hex values. To start off, use pairs like #CCFFEE and notice how
your color is changed.

Hexadecimals are the best choice for compatible web development because of their consistency
between browsers. Even the most minor of change in color can throw your entire site out of whack, so
be sure to check your site in a number of browsers. If you want to be absolutely sure your colors will
not change, use paired hex values for color. Examples: "#0011EE", "#44HHFF", or "#117788". These
are called True Colors, since they will stay true in hue from browser to browser.

HTML Coloring System - RGB Values


Handout #2

We do not recommend that you use RGB for safe web design because non-IE browsers do not
support HTML RGB. However, if you plan on learning CSS then you should glance over this topic.

RGB stands for Red, Green, Blue. Each can have a value from 0 (none of that color) to 255 (fully
that color). The format for RGB is - rgb(RED, GREEN, BLUE), just like the name implies. Below is an
example of RGB in use, but if you are not using a browser that supports it, do not worry, that is just
one of the problems with HTLM RGB.

bgcolor="rgb(255,255,255)" White
bgcolor="rgb(255,0,0)" Red
bgcolor="rgb(0,255,0)" Green
bgcolor="rgb(0,0,255)" Blue


Handout2 formatting tags

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (18)

Similar to Handout2 formatting tags

Similar to Handout2 formatting tags (20)

More from Nadine Guevarra

More from Nadine Guevarra (14)

Recently uploaded

Recently uploaded (20)

Handout2 formatting tags