|
The are some simple ways to get your HTML page to have your text and images, as well as other things, aligned differently. You will learn that these tags are very beneficial as they make a better looking web page. By default, your text and images are left justified. That means that if you type something, it will be attached to the left side of the browser page. If you wish to change that, you can do that with these alignment tags.
How do I center, left, or right justify text or an image?
This is the center tag and what is does. This can be used with text, or the image tag that was gone over in Chapter 3. The <center> tag is the easiest way to center a piece of text or an image.
This is Centered
The code: <center><b>This is Centered</b></center>
Here is another way to center using the <h1> tag:
Center Align
The code: <h1 align="center">Center Align</h1>
Note: You can left and right justify using the same type of align attributes in the <h1> tag. The following are a few examples...
Right Align
The code: <h1 align="right">Right Align</h1>
Left Align
The code: <h1 align="left">Left Align</h1>
The other ways to center, right or left align text, without adding a table, are by using the <div></div> tag and the <p></p> tag. See some examples below:
Using the div tag <div</div>:
Center Align
The code: <div align="center">Center Align</div>
Right Align
The code: <div align="right">Right Align</div>
Left Align
The code: <div align="left">Left Align</div>
Using the paragraph tag <p</p>:
Center Align
The code: <p align="center">Center Align</p>
Right Align
The code: <p align="right">Right Align</p>
Left Align
The code: <p align="left">Left Align</p>
Listed below are the body attributes that can be added to your web pages.
|
Opening HTML Tag |
Corresponding Closing Tag |
Explanation of Tag |
| <center> |
</center> |
This tag will center a text or an image.
|
| <h1> |
</h1> |
This tag will create a Header. Attributes:
align="" - the align attributes are: center, right, left. Using the align feature will align the header text to the center, right or left of the web page.
|
| <div> |
</div> |
This tag will group text, image or code together. Attributes:
align="" - the align attributes are: center, right, left. Using the align feature will align the text or image(s) to the center, right or left of the web page.
id="" - you can name your div, for more advanced coding purposes.
|
| <p> |
</p> |
The paragraph tag will create a line break before and after the tag.
Attributes:
align="" - the align attributes are: center, right, left. Using the align feature will align the text or image(s) to the center, right or left of the web page.
|
|
Try it yourself. Put these lines in the Text Box provided, and see what the HTML tags you have learned will do to an HTML page.
<html>
<head>
<title>Chapter 7</title>
<meta name="keywords" content="altavista, excite, hotbot, lycos, webcrawler, google, website ranking, search engine promotion">
<meta name="description" content="How to increase your website ranking in the search engines">
</head>
<body bgcolor="#000000" text="#FFFFFF" link="#FF0000" vlink="#3333FF" alink="#FFCC00">
<h1>Aligning Text</h1><br>
<center><b>This is Centered</b></center><br>
<h1 align="center">Center Align</h1><br>
<h1 align="right">Right Align</h1><br>
<h1 align="left">Left Align</h1><br>
<div align="center">Center Align</div>
<div align="right">Right Align</div>
<div align="left">Left Align</div>
<p align="center">Center Align</p>
<p align="right">Right Align</p>
<p align="left">Left Align</p>
</body>
</html>
|
View Cart