Web topic 5 text formatting

Web Authoring

Topic 5 –
Text Formatting

Objectives
Students should able to:
Describe the function and use the
following text formatting tags:
• Paragraphs
• Headings
• Emphasis
• Line breaks
• Bold
• Italic
• Image source (Img Src)

Paragraph
The tag defines a paragraph.
This tag places a blank line above and
below the text of the paragraph.
The web browser automatically
understands how to display the text
because of the paragraph tag.
Example:
 ... the text goes here ...

Headings
The HTML header contains several
notable items which include:
1. doctype - This gives a description of the
type of HTML document this is.
2. meta name="description" - This gives a
description of the page for search engines.
3. title - Defines the name of your document
for your browser.

Headings
The header in our example document:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-
8859-1">
<meta name="description" content="Comprehensive
Documentation and information about HTML.">
<meta name="keywords" content="HTML, tags, commands">
<title>The CTDP HTML Guide</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

Emphasis
If you learned HTML before you learned
XHTML, you probably know about the bold
and italics tags.
But these tags are not semantic elements
because they define how the text should look
rather than information about the text.
They have been generally replaced by strong
(for bold) and emphasis (for italics).

Emphasis
Example:

This text is emphasized most
browsers display it as italics.

This text is strongly
emphasized most browsers display
it as bold.

Link Break
Line breaks are different from 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
 (paragraph) tag.

Link Break
For example:

 Will Peterson 
Box 61 
Cleveland, Ohio

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

Font
Example: - set font size to 5

 Here is a size 5
font 

Example: - set font colour to red
This text is red

Underline
Underlines can be used to highlight and
emphasize text on web pages.
Text can be underlined using CSS style
sheets, with the text-decoration property, or,
with the HTML U element.
Example:

 ... text to be underlined ...

Preformatted Text
Preformatted text between the start and
end PRE tag is rendered using a fixed
with font, in addition whitespace
characters are treated literally.

The spacing and line breaks are rendered
directly.

Preformatted Text
For example, a verse from Shelley (To a
Skylark):

<PRE> Higher still and higher
From the earth thou springest
Like a cloud of fire;
The blue deep thou wingest,
And singing still dost soar, and soaring ever
singest.</PRE>

Using <style> Tag
The <STYLE> tag is always inside the
header of the document, i.e. between the
<HEAD> Start and End Tags.

<HEAD>
<TITLE>Bach's home page</TITLE>
<STYLE type="text/css">
H1 { color: blue }
</STYLE>
</HEAD>

Web topic 5 text formatting

More Related Content

What's hot

Viewers also liked

Similar to Web topic 5 text formatting

More from CK Yang

Web topic 5 text formatting