ExpertRating - Online Certification and Employment Testing ExpertRating - Online Certification and Employment Testing ExpertRating - Online Certification and Employment Testing

ExpertRating Home
ExpertRating Benefits
Recommend ExpertRating
Suggest More Tests
Privacy Policy
FAQ
Login
 
XHTML Tutorial - Index
XHTML Tutorial - Introduction to XHTML
XHTML Tutorial - Formatting
XHTML Tutorial - Links
XHTML Tutorial - Images
XHTML Tutorial - Forms
XHTML Tutorial - Tables
XHTML Tutorial - Frames
XHTML Tutorial - Style Sheets
XHTML Tutorial - Advanced Tags
     

 
Online Personal Trainer Certification
Personal Trainer Certification (Spanish)
Six Sigma Certification
Find a Personal Trainer
Project Management Certification
Six Sigma Certification
Six Sigma Black Belt Certification
Master Black Belt Certification
Six Sigma Green Belt Certification
Life Coach Certification
Lean Management Certification
Lean Six Sigma Certification
First Aid Certification
CPR Certification
Yoga Certification
Aerobics Certification
Pilates Certification
Business Analyst Certification
SEO Certification
Online Business Writing Course & Certification
Makeup Artist Certification
Baby Sitting Course & Certification
Time Management Certification
Health Club Management Certification
Medical Coding Certification
Medical Billing Certification
Business Analysis Course
Master Trainer Certification
Total Quality Management Certification
Kaizen Certification
Creative Writing Certification
Event Management Certification
Test Search by Job Title
Administrative Assistant Certification
Virtual Assistant Certification
  All Online Courses
   

   
   
   
   
   
   

   
  Home > Courses, Tutorials & eBooks > XHTML Tutorial > Formatting
 

Back

Next

XHTML Tutorial - Formatting

   
                                                                             Page 1 of 2
 
Overview
 

In this chapter you will learn

  • How is formatting done
  • Various formatting tags
  • Use of Font style tags for a richer effect
  • Use of Phrase tags to add more effect on text
  • Different types of lists

 

 

 
Introduction
 

Formatting is the structuring and styling of the document. Formatting allows the designer to determine the appearance and create the style of the XHTML document.

This section acquaints the user with formatting tags associated with XHTML. The formatting tags in XHTML are similar in nature to HTML, but in XHTML, extensive formatting is done only through stylesheets. Some of the tags that were previously used in HTML have been deprecated in XHTML.

 
Heading Tags
 

In XHTML, headings are created by adding text between the heading tags. XHTML has six levels of headings, numbered 1 through 6. In this 1 is the largest heading and 6 is the smallest. The tags used for creating headings in XHTML are h1, h2, h3, h4, h5, h6.

Headings are displayed in larger and bolder fonts than normal body text. The most important heading should be between the h1 tags and all the subsequent headings should be placed accordingly between the heading tags.

 
 
Example

<h1> welcome to my site of jokes </h1>

Output
Welcome to my site of jokes
 
   

The align attribute of the heading tag is not supported in XHTML. In XHTML this type of formatting is done with style sheets.

 
Paragrapg Tag
 

The paragraph tag is defined by a <p>. It indicates the start of a new paragraph. When text is contained between the <p> tags, it is displayed in a new paragraph. A single line above and below the paragraph is automatically left blank. It is exactly similar to the paragraph tag of HTML. It is used in the same way but the rules of XHTML have to be followed.

 
Example

<p> A new paragraph is started with the text written within these tags. A line above and below the paragraph will be left blank automatically </p>

 

Output

A new paragraph is started with the text written within these tags. A line above and below the paragraph will be left blank automatically

 

The presentation attributes of the paragraph tag of HTML are not supported in XHTML. In XHTML extensive formatting is done only through style sheets.

 
Line Break
 

A line can be ended after a particular word without necessarily starting a new paragraph. This can be done by a <br> tag. This break tag just inserts a single line break.

Unlike HTML, the <br> tag in XHTML has to be closed properly. It is done so by inserting a backslash i.e. <br/>. This is another way of closing an opened tag.

 
Example

<p> A new paragraph is started with the text written within these tags. <br/> This text will come in the next line. </p>

Output

A new paragraph is started with the text written within these tags.

This text will come in the next line.

 
Horizontal Tag
 

The horizontal rule tag inserts a horizontal line in between the text. It is written as <hr>. The function of this tag is to separate two lines of text with a horizontal line. This tag has to be closed properly. It is done so by inserting a backslash i.e. <hr/>.

 
 

<p>This line lies above the horizontal rule. <hr/>This line lies below the horizontal rule.<p>

 

This line lies above the horizontal rule.

This line lies below the horizontal rule.

All the presentation attributes of the <hr> tag in HTML has been deprecated in XHTML.

 
Font Style Tags
 

The font style tags add some richer effects to the text. They are used while formatting. These tags are exactly similar to the tags used in HTML. Some of these tags are bold, italics, etc.

 
Bold
 

The bold tag is written as <b>. The text between this pair of tags appears as bold in the document.

Example
<p><b> This text will appear as bold </b></p>
Output
This text will appear as bold
   
Italics
 

The italics tag is written as <i>. The text written between this pair of tags is shown in italics in the document.

 
Example

<p><I> This text will appear in italics </i></p>

Output
This text will appear in italics
 
Big
 

The big tag is written as <big>. The text written inside these tags appear bigger than the normal text.

 
Example

<p><big> This text will appear big </big></p>

Output
This text will appear big
 
Small

The small tag is written as <small>. The text written inside these tags appears smaller than the normal text.

Example

<p><small> This text will appear small </small></p>

Output
This text will appear small

 

Great care has to be taken while applying these tags in XHTML. It is imperative that the code be created correctly to be operable in XHTML.

WRONG WAY OF USING THESE TAGS

 

<p><b><i>This site contains jokes</b></i></p>

 

 

CORRECT WAY OF USING THESE TAGS

 

<p><b><i>This site contains jokes</i></b></p>

The following example illustrates the use of formatting tags in XHTML:

Example

<html>

<head>

<title> My bag of jokes </title>

</head>

<body>

 

<h1> I want to make you laugh</h1>

 

Hello, this is My Jokes website .<hr/>

 

 

<p>Now you will read some rib tickling jokes.<br/>

<b><i>These jokes are meant for people of all ages.

Some of them are very good, they will have you in splits.</i></b></p>

 

 

<h2>Classic jokes.</h2>

<p><b> During their silver anniversary, a wife reminded her husband, “Do you remember that when you proposed to me, I was so overwhelmed that I didn't talk for an hour?"<br/> The hubby replied, "Yes, honey, that was the happiest hour of my life."</b></p>

</body>

</html>

 
 

This is how the web page looks:

There are more formatting tags which help in enhancing a web page. With the use of these tags a web page can be made more presentable. Some more formatting tags are discussed below.

 
PharseTags

The following tags are all phrase element tags. These tags are applied to provide a richer effect to the web page. These tags are used similarly as HTML. Only the basic rules of XHTML have to be followed.

 
Emphasized Tag

The emphasized tag is written as <em>. It is used to make a text emphasized. The emphasized text usually appears in Italics.

 
Example
<em> This text is emphasized </em>
Output
This text is emphasized

Code Tag

The code tag is written as <code>. It indicates that the text written is an example of a typed code. It is usually in a fixed font.

Example
<code> This text is a computer code. </code>
Output
This text is a computer code.

Variable Tag

The variable tag is written as <var>. It defines a variable. It means that the text written between these tags is a variable name.

 
Example
<var> This is a variable </var>
Output
This is a variable

Strong Tag

The strong tag is written as <strong>. It is used for stronger emphasis of the text. The text appears to be bold.

Example
<strong> This text is strongly emphasized. </strong>
Output
This text is strongly emphasized.

Preformatted Text Tag

The preformatted text tag is written as <pre>. It preserves the preformatted element of the text. The text written in the pre tag will appear in the same way in the web page as in the code. It preserves all the spaces and line breaks.

Example

<pre> This is an example of pre tag. </pre>

Output

This is an example of pre tag.

The width attribute of the <pre> tag is not supported in XHTML.

Abbreviations Tag

The abbreviations tag is written as <abbr>. It indicates an abbreviated form like “inc”, USA”, etc. All abbreviations should be put under the <abbr> tag. This tag is not practically in use, as it does not do any special formatting to the abbreviation.

 
Example
<abbr> UNO </abbr>
Output
UNO

Address Tag

The address tag is written as <address>. It usually defines the start of an address. All addresses, emails or signatures should be contained in the address tag. The address usually appears in italics.

 
Example

<address> Mickey Mouse <br/> Box 123 <br/> Disneyland</address>

Output

Mickey Mouse

Box 123

Disneyland

 

Blockquote Tag

The blockquote tag is written as <blockquote>. It defines the start of a long quotation. Quotations are always written within the blockquote tags. This tag generates a line break and white spaces before and after the text. It does not make any other formatting like making the text bigger or bolder or italicizing the text.

To validate the page as strict XHTML, a block-level element must be added around the text within the <blockquote> tag.

 
Example

<blockquote> <p> Don't walk behind me, I may not lead. Don't walk in front of me, I may not follow. Just walk beside me and be my friend.</p> </blockquote>

 

Output

Don't walk behind me, I may not lead. Don't walk in front of me, I may not follow. Just walk beside me and be my friend.

The following example illustrates the use of formatting Tags:

Example

<html>

<head>

<title> My bag of jokes </title>

</head>

<body>

 

<h1> I want to make you laugh</h1>

 

Hello, this is My Jokes website .<hr/>

 

<p>Now you will read some rib tickling jokes.<br/>

<b><i>These jokes are meant for people of all ages.

Some of them are good, they will have you in splits.</i></b></p>

<h2>Classic jokes.</h2>

<p><b> During their silver anniversary, a wife reminded her husband, “Do you remember that when you proposed to me, I was so overwhelmed that I didn't talk for an hour?"<br/> The hubby replied: "Yes, honey, that was the happiest hour of my life."</b></p>

 

<h2>Maths jokes.</h2>

<blockquote> If I had only one day left to live, I would live it in my statistics class, it would seem so much longer.</blockquote>

<strong> Variables like <var> X,Y,Z </var> are not used in this site.</strong><br/><hr/>

 

<address>Mickey Mouse <br/> Box 123 <br/> Disneyland </address>

 

</body>

</html>

 

This is how the web page looks :

 

Lists

Lists are the next element in an XHTML document. A great way of laying out information on the web is through lists. Lists are simple to read and easy to comprehend. They make a web page attractive. The user can retain more data if it is presented to him in a list.

Lists in XHTML are quite similar to the lists in HTML. The only difference is that some attributes of lists used in HTML are not supported by XHTML.

Before going into lists in detail it is imperative to understand the concept of the list index tag.

List Index Tag

The list index tag is written as <li>. It defines the start of a list item. The <li> tag is used in both unordered and ordered lists.

The example of list index tag is shown with the example of unordered and ordered lists later.

Unordered List

An unordered list is defined by the tag <ul>. It contains a list of items in which the items are preceded by bullets or markers.

 
Example

<ul>

<li>Classic jokes </li>

<li>Math jokes </li>

<li>Food jokes</li>

</ul>

Output
  • Classic jokes
  • Math jokes
  • Food jokes

 

The "compact" and "type" attributes of the <ul> tag of HTML are not supported in XHTML.

The following example illustrates the use of lists in a web page:

Example

<html>

<head>

<title> My list of jokes </title>

</head>

<body>

 

<h1>This is my list of jokes </h1>

 

<ul>

<li>Classic jokes </li>

<li>Math jokes </li>

<li>Food jokes</li>

</ul>

 

<hr/>

 

<ol>

<li>Crazy jokes</li>

<li>Ethnic jokes</li>

<li>Golf jokes</li>

</ol>

 

</body>

</html>

 

This is how the web page looks:

 
 
 
Summary
 

In this chapter you have learnt:

  • Formatting allows the designer to determine the appearance and create the style of the XHTML document.
  • XHTML has six levels of headings, numbered 1 through 6 in decreasing order.
  • The paragraph tag indicates the start of a new paragraph. When some text is put within the <p> tags, it is displayed in a new paragraph.
  • The <br> tag is used to break a line or end a line.
  • <b>, <i>, <big>, and <small> are all font style tags which add some richer effects to the text.
  • The output of the emphasized text is usually in italics.
  • The text written in strong tag appears in bold.
  • The preformatted text tag is used to preserve the spaces and line breaks in the text.
  • If a long quotation has to be written, then it is written in a blockquote tag.
  • Lists are used if the information has to be displayed in points.
  • There are two types of lists namely unordered lists and ordered lists.

 

 

 
Review Questions
 

Question 1

How many levels of headings does XHTML have?

Answer

Six

Question 2

How many lines are left blank above and below a paragraph?

Answer

A Single Line

Question 3

Which tag is used for a line break?

Answer

<br> tag

Question 4

What is the common name used for the tags bold, italics, big, and small?

Answer

: Font style tags

Question 5

Which tag is used to make the text bold?

Answer

Strong tag

Question 6

Which tag is generally used to write long quotations?

Answer

Blockquote tag

Question 7

Name the two types of lists.

Answer

Unordered Lists and Ordered Lists

 

 
 
What's Next

The next chapter will acquaint you with the basic concepts of linking. The chapter will further elucidate about URLs and how to link different documents and web pages.

Hop over to the next chapter to get a close up on linking.

 

 

 
     
Home  |  About Us  |  Privacy Policy  |  Site Map  |  FAQs  |  Contact Us
 
© ExpertRating 2015. All Rights Reserved.