TwoPointFour Beginner's Guide to HTML
Now you have a few paragraphs and headers on your page we will look at alignment of text and text decoration.
We can align the text to the left, right, center or we can justify the text (force the text to be aligned to the left and right) within the <p> and <h> tags:
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<p align="center">
This is a basic web page!</p>
<p align="right" ><font face="verdana">This is a new paragraph!</font></p>
<h1 align="right" >Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html> |
The alignement will only exist within the <p> or <h> tag you set it and the default is aligned to the left. We can't really try the justify text out with only short snippets of text so try copying and pasting the following just above the </body> tag in your code:
<p align="justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
Save the file as usual and you should see the above text justified in your Browser.
You will have noticed that the headers are bold by default. If you want to change the appearance of your text you can use the following tags:
<b></b> for BOLD
<i></i> for ITALIC
<u></u> for UNDERLINE
Play around with the text decoration tags above in your code to see what the output is like or copy and past the following into your code:
<p align="justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <b>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</b><i> Duis aute irure</i> dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <b><i><u>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</u></i></b></p> |
As usual, take special care to close the tags in reverse order! See the <b><i><u> in the above paragraph are closed starting with the </u> then the </i> then the </b> and finally the </p> to close the paragraph.
As a beginner's guide, we think that covers all you need to know to get your first proper web page set up. Happy coding!
Return to Tutorials homepage
