Lesson 4

Lesson 4
• Links & Formatting HTML

• Biblical Relationships
• Gen. 2:18
• https://sites.google.com/a/
• babcock.edu.ng/maitanmi-
lecture-site/
objectives
At the end of the lesson, you should be able to:
• Use all the formatting tags in html or xhtml
• Know how to use links and anchors to link to specific places
inside pages
• Carry out all about URLs: the various parts of the URL and
the kinds of URLs you can use
• Specify the appearance of individual characters (bold, italic,
underlined)
• Include special characters (characters with accents,
copyright marks, and so on)
• Create preformatted text (text with spaces and tabs
retained)
• Align text left, right, and centered
• Change the font and font size
• Create other miscellaneous HTML text elements, including
line breaks, rule lines, addresses, and quotations
HTML – FORMATTING
Bold Text
Anything that appears within ... element, is
displayed in bold as shown below:
<!DOCTYPE html>
<html>
<head>
<title>Bold Text Example</title>
</head>
<body>
The following word uses a bold typeface.
</body>
</html>
Italic Text
Anything that appears within ... element is
displayed in italicized as shown below:
<!DOCTYPE html>
<html>
<head>
<title>Italic Text Example</title>
</head>
<body>
The following word uses a italicized
typeface.
</body>
</html>
Underline Text
Anything that appears within ... element, is
displayed with underline as shown below:
<!DOCTYPE html>
<html>
<head>
<title>Underlined Text Example</title>
</head>
<body>
The following word uses a underlined
typeface.
</body>
</html>
Strike Text
Anything that appears within <strike>...</strike>
element is displayed with strikethrough, which is a
thin line through the text as shown below:
<!DOCTYPE html>
<html>
<head>
<title>Strike Text Example</title>
</head>
<body>
The following word uses a
<strike>strikethrough</strike> typeface.
</body>
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.
<!DOCTYPE html>
<html>
<head>
<title>Monospaced Font Example</title>
</head>
<body>
The following word uses a <tt>monospaced</tt>
typeface.
</body>
</html>
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.
<!DOCTYPE html>
<html>
<head>
<title>Superscript Text Example</title>
</head>
<body>
The following word uses a superscript
typeface.
</body>
</html>
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.
<!DOCTYPE html>
<html>
<head>
<title>Subscript Text Example</title>
</head>
<body>
The following word uses a subscript
typeface.
</body>
</html>
Exercises
Produce the followings using the formatted tags
studied.
H2o
6x2 +4x+6 = 0
Strike through
Deleted & Inserted Text
Anything that appears within <ins>...</ins> element is
displayed as inserted text. Anything that appears within
<del>...</del> element, is displayed as deleted text
<!DOCTYPE html>
<html>
<head>
<title>Inserted Text Example</title>
</head>
<body>
I want to drink <del>cola</del> <ins>wine</ins>
</body>
</html> OUTPUT
Larger Text & Smaller Text
The content of the <big>...</big> and..
element is displayed one font size larger than the rest of
the text surrounding it as shown below:
<!DOCTYPE html>
<html>
<head>
<title>Larger Text Example</title>
</head>
<body>
The following word uses a <big>big</big>
typeface.
The following word uses a small
typeface.
</
</body>
</html>
Grouping Content
The <div> and 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>
<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>
Actual content goes here.....
</div>
</body>
</html>
The element
• This is used to group inline elements only. So, if you
have a part of a sentence or paragraph which you want
to group together, you could use the element
as follows:
<!DOCTYPE html>
<html>
<head>
<title>Span Tag Example</title>
</head>
<body>
This is the example of span
tag and the div
tag alongwith CSS
</body>
</html>
Emphasized & Strong Text
Anything that appears within ... element is
displayed as emphasized text. Also, anything that
appears within ... element is
displayed as important text
<!DOCTYPE html>
<html>
<head>
<title>Emphasized Text Example</title>
</head>
<body>
The following word uses a emphasized
typeface.
The following word uses a strong
typeface.
</body>
</html>
Marked Text
Anything that appears with-in ...
element, is displayed as marked with yellow ink.
<!DOCTYPE html>
<html>
<head>
<title>Marked Text Example</title>
</head>
<body>
The following word has been
marked with yellow
</body>
</html> OUTPUT
Text Abbreviation
You can abbreviate a text by putting it inside opening
<abbr> and closing </abbr> tags. If present, the title
attribute must contain this full description and nothing
else.
<!DOCTYPE html>
<html>
<head>
<title>Text Abbreviation</title>
</head>
<body>
My best friend's name is <abbr
title="Abhishek">Abhy</abbr>.
</body>
</html>
Acronym Element
The <acronym> element allows you to indicate that
the text between <acronym> and </acronym> tags
is an acronym.
<!DOCTYPE html>
<html>
<head>
<title>Acronym Example</title>
</head>
<body>
This chapter covers marking up text in
<acronym>XHTML</acronym>.
</body>
</html>
Text Direction
The <bdo>...</bdo> element stands for Bi-Directional
Override and it is used to override the current text
direction.
<!DOCTYPE html>
<html>
<head>
<title>Text Direction Example</title>
</head>
<body>
This text will go left to right.
<bdo dir="rtl">This text will go right to left.</bdo>
</body>
</html>
Special Terms
The <dfn>...</dfn> element (or HTML Definition Element)
allows you to specify that you are introducing a special term.
It's usage is similar to italic words in the midst of a paragraph.
<!DOCTYPE html>
<html>
<head>
<title>Special Terms Example</title>
</head>
<body>
The following word is a <dfn>special</dfn> term.
</body>
</html>
Quoting Text
When you want to quote a passage from another source, you
should put it in btw <blockquote>...</blockquote> tags.
<!DOCTYPE html>
<html>
<head>
<title>Blockquote Example</title>
</head>
<body>
The following description of XHTML is taken from the W3C Web
site: <blockquote>XHTML 1.0 is the W3C's first
Recommendation
for XHTML, following on from earlier work on HTML 4.01, HTML 4.0,
HTML 3.2 and HTML 2.0.</blockquote>
</body>
</html>
Other formatting tags
• Short Quotation
• Text Citation
• Computer Code
• Keyboard text
• Programming Variables
• Program Outputs
• Address text
Uniform Resource Locators (URLs)
• URLs are street addresses for bits of
information on the Internet.
Parts of URL
• Most URLs contain (roughly) three parts: the

protocol, the hostname, and the directory or
filename as seen in Figure 3.42
Figure 3.42: Parts of URL
Protocol
The protocol is the way in which the page is
accessed; that is, the means of
communication your browser uses to get the
file. If the browser uses HTTP or HTPPS to get
to the file, the protocols part is http or https. If
the browser uses FTP, the protocol is ftp. The
protocol matches an information server that
must be installed on the system for it to work.
You can’t use an FTP URL on a machine that
does not have an FTP server installed.
Hostname
The hostname is the Internet system on which the
information is stored, such as
• www.netcom.com,
• ftp.apple.com,
• or www.aol.com.
You can have the same hostname but have different
URLs with different protocols, such as the following:
http://mysystem.com
ftp://mysystem.com
It’s one machine that offers two different information
services, and the browser will use different methods of
connecting them. As long as all the servers are
installed and available on that system, you won’t have
a problem.
Hostname Cont’d
• The hostname part of the URL might include a port
number. The port number tells your browser to
open a connection using the appropriate protocol
on a specific network port. The only time you’ll
need a port number in a URL is if the server
responding to the request has been explicitly
installed on that port. If the server is listening on
the default port, you can leave the port number
out.
• If a port number is necessary, it’s placed after the
hostname but before the directory, as follows:
• http://my-public-access-unix.com:1550/pub/file

Lesson 4

Uploaded by

Copyright:

Available Formats

Lesson 4

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lesson 4

Uploaded by

Copyright:

Available Formats

Lesson 4

• Links & Formatting HTML

• Most URLs contain (roughly) three parts: the

You might also like