The <p> tag defines a paragraph (as discuss on last topic). The p element automatically creates some space before and after itself. The space is automatically applied by the browser, or you can specify it in a style sheet. However, we will be discussing about stylesheet later on, in the meantime, let's just focus on the attributes that does not rely on a stylesheet.
According to W3C, the <p> tag is supported in all major browsers including IE (Microsoft Internet Explorer), Mozilla Firefox, Opera, Google Chrome, and Apple Safari.
The Attributes
An attribute is a format or function you can apply on an element. In this case, on the <p> element or tag. It is written after the p for instance <p align="left">.
Align
On our last discussion about <p>, I have only taught how to display a text or paragraph using the default align format. The alignment by default is left or left aligned. However, using the align attribute, you can change the alignment of the text. You can designate the values: left, right, center, and justify. According to W3C, the align attribute is allowed in HTML 4.01/XHTML 1.0 DTD type webpages under Transitional and Frameset, however, is not accepted under Strict compliance, possibly because, it causes issues on some browsers.
Values:
left - the texts or paragraph aligns to the left of the page. If the words do not fit in a row, it is automatically move below, causing a break at the right column.
right - the texts or paragraph aligns to the right of the page. If the words do not fit in a row, it is atumatically move below, causing a break at the left column.
center - the texts or paragraph aligns at the center. The texts floats on the middle of the row.
justify - the texts or paragraph automatically adjust its spacing so that the paragraph is evenly fitted in every row.
Syntax:
<p align="x"> where x stands for the values. See the values above.
Example:
<html>
<head>
<title>Text Alignment</title></head>
<body>
<p align="left">The texts here are left aligned.</p>
<p align="right">The texts here are right aligned.</p>
<p align="center">The texts here are centered.</p>
<p align="justify">The texts here are justified. Observe that the words are being distributed evenly to fit the row. This is a sample. This is a sample. This is a sample. This is a sample. This is a sample. This is a sample. This is a sample. This is a sample.</p>
</body>
</html>
<head>
<title>Text Alignment</title></head>
<body>
<p align="left">The texts here are left aligned.</p>
<p align="right">The texts here are right aligned.</p>
<p align="center">The texts here are centered.</p>
<p align="justify">The texts here are justified. Observe that the words are being distributed evenly to fit the row. This is a sample. This is a sample. This is a sample. This is a sample. This is a sample. This is a sample. This is a sample. This is a sample.</p>
</body>
</html>
The output:
 |
| Click to enlarge |
Class
Class stands for any classname matching on the stylesheet. It calls its format from a stylesheet. Class is a standard attribute for <p>, meaning, all browsers support it. We will discuss more on this later on.
Syntax:
<p class="x"> where x is a corresponding name found in the stylesheet. It could be any name (user-specific).
Direction
The attribute use is dir. It specifies the direction of the text. ie. from left to right or right to left. It is a standard attribute and resembles the left or right align attributes.
Values:
rtl - (right to left) text is right aligned and moves toward the left. Similar to align="right".
ltr - (left to right) text is left aligned and moves toward the right. Similar to align="left".
Syntax:
<p dir="x"> where x can be "rtl" or "ltr". See values above.
ID
ID is similar to class in that it also looks for a corresponding id name in the stylesheet. It specifies a unique id for an element. This is also a standard attribute, meaning, it is recognized by all browsers.
Syntax:
<p id="x"> where x is any user-specified name in the stylesheet, which usually begin in a #.
Language
Specifies a language code for the content in an element. This has no effect on the graphical side other than to assist search engines and browsers in use. There are numerous language you can use on this attribute but to name a few, see values below:
Values:
en - English
tl - Tagalog
sd - Sindhi
la - Latin
ja - Japanese
zh - Chinese
We will provide a list for this one, later on...
Syntax:
<p lang="x"> where x is an abbreviation of a language code. W3C has a list for them.
Style
Specifies an inline style for an element. The style attributes used in this attribute is similar to the ones used in the sylesheet or CSS (Cascading Stylesheet). However, instead of calling a format from a stylesheet, you can directly set the property within the p element itself; even without requiring a stylesheet. There are numerous stylesheet properties you can use to directly give the text a style. A few example of the values are shown below:
Values:
color: - to specify the font's color. It must be terminated by a ; [ie. red, blue, #000000, rgb(255,255,255)]
font-size: - to specify the font's size. It must be terminated by a ; [ie. small, medium, large, x-large, xx-large, smaller]
font-weight: - determines how thin or thick characters in text should be displayed. It must be terminated by a ; [ie. bold, normal, bolder, lighter, 100, 500, 700]
We will go deeper into this once we study CSS.
Syntax:
<p style="x"> where x is a value of a Stylesheet property.
Example:
<html>
<head>
<title>Text</title></head>
<body>
<p style="color: red;">Text</p>
</body>
</html>
<head>
<title>Text</title></head>
<body>
<p style="color: red;">Text</p>
</body>
</html>
Output:
or we can also combine a set of stylesheet properties to give the text additional styles. For example:
<html>
<head>
<title>Text</title></head>
<body>
<p style="color: rgb(215,60,56); font-weight: bolder; font-size: medium;">Text</p>
</body>
</html>
<head>
<title>Text</title></head>
<body>
<p style="color: rgb(215,60,56); font-weight: bolder; font-size: medium;">Text</p>
</body>
</html>
Output:
Title
This specifies extra information about an element. When you move the mouse pointer over a text, the title specified on the text will display.
Syntax:
<p title="x"> where x can be any word or sentence, or paragraph (user-specific).
Example:
<html>
<head>
<title>Text</title></head>
<body>
<p title="A Dragon is a mythical giant lizardlike creature that breaths fire.">Dragon</p>
</body>
</html>
<head>
<title>Text</title></head>
<body>
<p title="A Dragon is a mythical giant lizardlike creature that breaths fire.">Dragon</p>
</body>
</html>
Output:
XML Language
Specifies a language code for the content in an element, in XHTML documents. This is similar to Language attribute only that this one is use in an XHTML document or page.
Syntax:
<p xml:lang="x"> where x may contain a language code.
Event Attributes
These attributes requires a javacript command in order to work. Since javascipt is out of our topic, I am simply going to give all the event attributes that can be use with the p element. Note that these attributes requires advance javascript understanding, it provides special features or effects not normally provided in HTML.
onclick - Script to be run on a mouse click.
ondbclick - Script to be run on a mouse double-click.
onmousedown - Script to be run when mouse button is pressed and hold down.
onmousemove - Script to be run when mouse pointer moves.
onmouseout - Script to be run when mouse pointer moves out of an element.
onmouseover - Script to be run when mouse pointer moves over an element.
onmouseup - Script to be run when mouse button is released.
onkeydown - Script to be run when a key is pressed and hold down.
onkeypress - Script to be run when a key is pressed and released.
onkeyup - Script to be run when a key is released.
Example:
<p onmouseover="x"> where x is a javascript command.
That's all for today. Now, go and practice.
For an exercise, how about creating this page.
Goodluck!
