Embed Size (px)
Citation preview
Positioning Text in HTML
Presented by Nobel Mujuji
(BSc Hons Information Systems )(WUA)
<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.
<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.
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>
<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">
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 -->
<html>
<body>
<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Comments are not displayed in the browser -->
</body>
</html>
HTML Headings
• Headings are defined with the <h1> to <h6> tags.
• <h1> defines the most important heading. <h6> defines the least important heading.
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.
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>
