Web Page Programming (Using HTML and JavaScript)

Chapter 3 HTML – Formatting

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

1|Page
 Web Page Programming (Using HTML and JavaScript)

Specifying Font Face

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
HTML JavaScript CSS
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.
Special Characters:
&gt; for greater than symbol or > &alt; for less than symbol or < &#47; for slash or /
&copy; for copyright symbol or © &reg; for registered sign or ® &amp; for ampersand or &
&ndash; for en dash or - &mdash; for em dash or - &nbsp; for non-breaking space

2|Page
 Web Page Programming (Using HTML and JavaScript)

If you use a word processor, you must be familiar with the ability to make text bold, italicized, or underlined; these are ju st
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>

Subscript Text
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.

3|Page
 Web Page Programming (Using HTML and JavaScript)

<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.

<!DOCTYPE html>
<html>
<head>
<title>Div Tag Example</title>
</head>
<body>

4|Page
 Web Page Programming (Using HTML and JavaScript)

<div id="menu" align="middle" >

<a href="/index.htm">HOME</a> |
<a href="/about/contact_us.htm">CONTACT</a> |
<a href="/about/index.htm">ABOUT</a>
</div>
<div id="content" align="left" bgcolor="white">
<h5>Content Articles</h5>
<p>Actual content goes here.....</p>
</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title>Span Tag Example</title>
</head>
<body>
<p>This is the example of <span style="color:green">span tag</span> and the
<span
style="color:red">div tag</span> alongwith CSS</p>
</body>
</html>

5|Page
 Web Page Programming (Using HTML and JavaScript)

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 src=”picture.jpeg”>
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 src=”picture.jpeg”
align=”center”>
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”
6|Page
is loaded. Smaller images or of lower resolution is usually used lowsrc=” picture.jpeg”>
here.
hspace=”6”>
 Web Page Programming (Using HTML and JavaScript)

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.

<!DOCTYPE html>
<html>
<head>
<title>Images</title>
</head>
<body>
<img src="firefox.jpg" width="10%"
height="20%">Image without horizontal and vertical space
<p>
<img src="ie.jpg" width="10%"
height="20%" hspace="35">Image with horizontal space
<p>
<img src="googlechrome.jpg" width="10%"
height="20%" vspace="35">Image with vertical space
<p>
</body>
</html>

7|Page
 Web Page Programming (Using HTML and JavaScript)

Using Graphics as Hyperlink

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

<!DOCTYPE html>
<html>
<head>
<title>Graphic-Hyperlink</title>
</head>
<body>
<img src="icct.jpg"><br>
<p>
<a href="https://www.facebook.com/"><img src="sfblink.jpg"></a><p>
<a href="https://twitter.com/explore">
<img src="stwitlink.jpg"></a><p>
<a href="https://www.youtube.com/"><img src="sytlink.jpg"></a><p>
</body>
</html>

8|Page
Web Page Programming (Using HTML and JavaScript)

9|Page