CHAPTER 3 : HTML-FORMATTING

OBJECTIVES:

➢ Learn HTML contains several elements for defining text with a

Font Styles and Effects

Now that you can make chunk of text appear as headings, appear as paragraphs or get enumerated as
lists, it’s now time to move on to providing them with styles and effects.

Remember that your Web site either provides entertainment and/or information; thus enticing your viewers
is one main concern therefore supplying your content with design is a major boost. But do not exaggerate
in doing so. Remember that there is always beauty in simplicity.

Below anythingelse, let us first take a look at some terms used:

❖ Typography – appearance and arrangement of the characters that make up your text.
❖ Typeface – the actual appearance, examples are Times New Roman, Arial, etc.
❖ Type style – this is the variations given to the text such as boldface, italic, regular, etc.
❖ Font – combination of typeface and type style.

Specifying Font Styles

<b></b> display the text in boldface

<i></i> display the text in italics

<u></u> display the text in underline

<strike></strike> display the text in strikethrough

 display the text in superscript

 display the text in subscript

<em></em> display the text in emphasis

<strong></strong> display the text in strength

<big></big> display the text with an increase in size

<small></small> display the text with a decrease in size

You can specify the text font using the face attribute <face=”value”>. Although you can use any font, it is
recommended to use a more readable font such as Arial or any sans-serif characters with straight lines and
requires less resolution. You should also keep in mind not to use too many different fonts in your Web page.

<font face=”Arial” size=”5”>This is font face Arial</font><br>

Preformatting Text

You can preformat text by using the Preformat Tag pair<pre></pre>.

<font face=”Arial” size=”5”>This is font face Arial</font><br>

We will preformat text to list items in columns.

<pre>

Word Excel Powerpoint

Python VB.net C++

</pre>

Specifying Text Color

The container tag <font></font> is used to alter the typeface, size and color of text.

face Indicates the typeface used in the text

size Indicate the size of the text

color Indicate the color of the text

If the typeface is not set, the text will be displayed in the default typeface set on the Web browser used to
display.
If you use a word processor, you must be familiar with the ability to make text bold, italicized, or underlined;
these are just three of the ten options available to indicate how text can appear in HTML and XHTML.

Bold Text

Anything that appears within <b>...</b> element, is displayed in bold as shown below:

<p>The following word uses a <b>bold</b> typeface.</p>

Italic Text

Anything that appears within <i>...</i> element is displayed in italicized as shown below:

<p>The following word uses a <i>Italicized</i> typeface.</p>

Underlined Text

Anything that appears within <u>...</u> element, is displayed with underline as shown below:

<p>The following word uses a <u>Underlined</u> typeface.</p>

Strike Text

Anything that appears within <strike>...</strike> element is displayed with strikethrough, which is a thin line
through the text as shown below:

<p>The following word uses a <strike>Strikethrough</strike> typeface.</p>

Monospaced Font

The content of a <tt>...</tt> element is written in monospaced font. Most of the fonts are known as variable-
width fonts because different letters are of different widths (for example, the letter 'm' is wider than the letter
'i'). In a monospaced font, however, each letter has the same width.

<p>The following word uses a <tt>monospaced</tt> typeface.</p>

Superscript Text

The content of a ^... element is written in superscript; the font size used is the same size as the
characters surrounding it but is displayed half a character's height above the other characters.

<p>The following word uses a ^superscript typeface.</p>

The content of a _... element is written in subscript; the font size used is the same as the
characters surrounding it, but is displayed half a character's height beneath the other characters.

<p>The following word uses a _subscript typeface.</p>

Inserted Text

Anything that appears within <ins>...</ins> element is displayed as inserted text.

<p>I want to drink <del>cola</del> <ins>wine</ins></p>

Deleted Text

Anything that appears within <del>...</del> element, is displayed as deleted text.

<p>I want to drink <del>cola</del> <ins>wine</ins></p>

Larger Text

The content of the <big>...</big> element is displayed one font size larger than the rest of the text
surrounding it as shown below:

<p>The following word uses a <big>big</big> typeface.</p>

Smaller Text

The content of the <small>...</small> element is displayed one font size smaller than the rest of the text
surrounding it as shown below:

<p>The following word uses a <small>small</small> typeface.</p>

Grouping Content

The <div> and <span> elements allow you to group together several elements to create sections or
subsections of a page.

For example, you might want to put all of the footnotes on a page within a <div> element to indicate that all
of the elements within that <div> element relate to the footnotes. You might then attach a style to this <div>
element so that they appear using a special set of style rules.
Images or Graphics

You can add image to your Web page with the use of <img> tag. The <img> tag supports several attributes,
but the scr= attribute is the one that specifies the name and location of the image.

You can create an image from Adobe Photoshop, MS Paint or any image-editing programs. You should
save your image in a JPEG format and compress the image so that loading time will be fast. You can reduce
image size by saving your file for the web. You can also use GIF format for logos and other images that
include text and graphics.
Attribute Table for <img>

ATTRIBUTE NAME DEFINITION EXAMPLE

src Indicates the image to be inserted. This attribute is a must <img

alt Indicates the alternative text or the text that appears when the <img
src=”picture.jpeg”
mouse hovers over the image and/or when the image can not alt=”Can not
display”>

be displayed.image to be inserted.
name Assigns a name to the image. <img
src=”picture.jpeg”

name=”picture.jpeg”>

border Indicates the width of the border around the image in pixels. <img
src=”picture.jpeg”

By default, the value is zero (doesn’t have a border) however, border=”3”>

images used as hyperlinks have borders by default; use

border=”0” to remove it. <img src=”picture.jpeg” >

height Indicates the height of the image in pixels. If not the actual <img
src=”picture.jpeg”

height is specified, the image will be scaled to fit. height=”300”>

width Indicates the width of the image in pixels. If not the actual <img
src=”picture.jpeg”

width is specified, the image will be scaled to fit. width=”300”>

align Indicates the horizontal alignment of image. <img

vspace Sets the vertical space in pixels above and below the image. <img
src=”picture.jpeg”

vspace=”6”>

hspace Sets the horizontal space in pixels beside the image. <img
src=”picture.jpeg” hspace=”6”>

lowsrc Indicates the image to be loaded before the actual image <img src=”picture.bmp”

is loaded. Smaller images or of lower resolution is usually used lowsrc=” picture.jpeg”>

here.
HTML supports various image formats or file type namely:

❖ Joint Photographic Experts Group or JPEG (or JPG) – Supports a million of colors and has the file
name extension of either jpeg or jpg. This file format is commonly used.
❖ Compuserve Graphics Interchange Format or GIF – Supports up to 256 colors and has the file
name extension of gif. This file format is commonly used and can be animated.
❖ Portable Network Graphics or PNG – Supports a million of colors and has the file name extension
of png.
❖ Bitmap or BMP – Supports a million of colors and has the file name extension of bmp. This type of
image is not compressed that’s why it provides the best quality for image at the cost of file size.
 Page|8

Using Graphics as Hyperlink

Before you can use graphic as hyperlink you have to create the image first in
Photoshop, Paint or other programs.
 Page|9

Video Links:
https://www.youtube.com/watch?v=zc0b3Vrconk
https://www.youtube.com/watch?v=4ZunanytE88
https://www.youtube.com/watch?v=3YVfF3P0hOc
References:

https://www.w3schools.com/html/html_colors.asp
https://www.w3schools.com/html/html_links.asp
https://www.w3schools.com/html/html_images.asp
https://www.w3schools.com/html/html_symbols.asp
https://www.w3schools.com/html/html_emojis.asp