1. Positioning Text in HTML
Presented by Nobel Mujuji
(BSc Hons Information Systems )(WUA)
2. <p></p> tag
• When using text, you always need to break text into paragraphs to make it look better and easier to read. The <p></p> tag is used
to break text between the tags into paragraphs. This tag will group text together and leave a space making paragraphs.
• The <p></p> has attributes which when added to it can perform more formatting. The first attribute you will learn here is the align
attribute. Like in a word processing tool, using the align attribute, you can align text to either right, left or center. The following
show pieces of code for the three align types.
<p align="right">Your Text Here</p>
<p align="left">Your Text Here</p>
<p align="center">Your Text Here</p>
Note:
You can use either the <center></center> or <p align="center"></p> tags if you wish to center a web item on a web page.
3. <br/> tag
• Another formatting you can do to text is leaving a single line space
also known as leaving a break. You can do this by using the <br/> tag.
This tag is very useful when writing long texts and even when
designing your web page layout.
• To create a new line without a space use a <br/> tag and to create a
line break use <br/><br/> . Unlike other tags you have learnt upto
now, it has no end tag so you can use it by only typing <br/>.
• The following shows some implementations of the <br/> tag.
4. CHALLENGE
<title>My Home Page</title>
</head>
<body>
This text is on a line.<br />
This text is on the next line.<br /><br />
This is text after a line break.<br /><br /><br />
This is text after 3 <br/> tags.
</body>
</html>
5. <hr/> tag
• Another way to break you page or text is by using a horizontal line. The
<hr/> tag creates a horizontal rule under the place you put the tag like this.
• Like the <br/> tag, the <hr/> tag has also got no end tag. The <hr/> tag also
has a few attributes which can be used to change the look of the horizontal
line. These attributes allows you to change the height (pixels), the width (%
of window or pixels) and color (only in IE).
• The following shows a piece of code on how to create a horizontal line with
20 pixels of height, 20% of the window size and blue in color.
<hr width="50%" size="30" color="#0000FF">
6. Comment tags
• As a best practice when coding it is always good to leave bread
crumbs on how you did it. This is done by using comment tags.
• Comments in the HTML code will not be shown in the webpage, but is
still there as the browser will ignore anything within the comment
tags. Comments are usually used to describe the code, for copyright
notices, etc.
• Many servers use comments to point their servers to insert banners.
The following is a sample code for a comment.
<!-- Your Comment Here -->
7. <html>
<body>
<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Comments are not displayed in the browser -->
</body>
</html>
8. HTML Headings
• Headings are defined with the <h1> to <h6> tags.
• <h1> defines the most important heading. <h6> defines the least
important heading.
9. Headings Are Important
• Use HTML headings for headings only. Don't use headings to make text BIG
or bold.
• Search engines use your headings to index the structure and content of
your web pages.
• Users skim your pages by its headings. It is important to use headings to
show the document structure.
• h1 headings should be main headings, followed by h2 headings, then the
less important h3, and so on.
10. CHALLENGE
<html>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>