12/06/2011 12:33:00 AM
Anthony Yap
Basic HTML Tutorial
Basic HTML Tutroial: Background Colors
The first is an introductions to HTML, while the second is about setting background colors on pages.
This time, we go into paragraph or texts. These are, of course, the texts that you read on a web page. Here, I'm going to teach you how to display texts inside a page. Let's begin...
Note: If you don't know how to create a web page, read the first lesson first (Basic HTML Tutorial).
The element used by HTML to display a text is <p> or <P>, where "p" is for paragraph. Every browser usually does not need <p> in a web page to display a text; any texts entered within the <body>, except for elements, is automatically treated as paragraph. For example:
<html>
<head><title>Sample Page</title></head>
<body>
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789
!@#$%^&*()-_=+/\|]}[{`~·♠
</body>
</html>
<head><title>Sample Page</title></head>
<body>
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789
!@#$%^&*()-_=+/\|]}[{`~·♠
</body>
</html>
The output will be:
 |
| Click to enlarge |
You see, it displays the texts as is. But note that the wildcard ♠ was displayed as ?, this is because this wild card was not recognized by the browser, in this case, I use Mozilla Firefox v.8.0.1 (latest version). However, if the browser supports the character, it will be displayed properly.
Now assuming we use the <p> element.
<html>
<head><title>Sample Page</title></head>
<body>
<p>ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789
!@#$%^&*()-_=+/\|]}[{`~·♠</p>
</body>
</html>
<head><title>Sample Page</title></head>
<body>
<p>ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789
!@#$%^&*()-_=+/\|]}[{`~·♠</p>
</body>
</html>
The result:
|
| Click to enlarge |
Well, it's still the same. In other words, by default, browsers treat texts inside the body as contents of <p>. The only problem with this is that you cannot align or break the texts into sentences. For example:
<html>
<head><title>Sample Page</title></head>
<body>
My name is Gabriel.
I am 3 yrs. old.
I live in Molo, Iloilo City
</body>
</html>
<head><title>Sample Page</title></head>
<body>
My name is Gabriel.
I am 3 yrs. old.
I live in Molo, Iloilo City
</body>
</html>
The result:
As you can see, even though I have broken the paragraph into separate sentences by vertically spacing them, the browser still treats it as one paragraph.
To remedy the problem, we have to use the <p> element.
<html>
<head><title>Sample Page</title></head>
<body>
<p>My name is Gabriel.</p>
<p>I am 3 yrs. old.</p>
<p>I live in Molo, Iloilo City</p>
</body>
</html>
<head><title>Sample Page</title></head>
<body>
<p>My name is Gabriel.</p>
<p>I am 3 yrs. old.</p>
<p>I live in Molo, Iloilo City</p>
</body>
</html>
Which will once again bring us into the output...
However, this time, note the difference... the paragraph has now been separated into double-spaced sentences. In some browsers, this may come out as single-spaced sentences.
Finally, you guys should know that by default, the texts (either or neither using the <p> element), will come out as black in color, with a varying size depending on the browser but is usually normal in size, and left aligned. In some browsers, it is also impossible to create single-spaced sentences without using a stylesheet or an attribute.
Well, that's all for now... next time, I am going to explain the <p> attributes, which would give you more paragraph styles, and likewise, more control of your paragraph. Until then...
Posted in: 
0 comments:
Post a Comment