Leland Initiative Web Tutorial Series: Overview of Last Lesson In the previous lesson, we reviewed the basic elements of an HTML file and began to discuss using HTML tags to format characters and paragraphs. Working with the example HTML file we began in lesson 2, I showed you how to give a web page a title, center text, and apply "headings" (which you may recall are simply ways to make text larger than normal size). In this session, we will build on the sample page from the last session and learn some more ways to format text and paragraphs. I will show you how to create new paragraphs; add "line breaks"; italicize and bold text; and insert "preformatted" text into an HTML document. Paragraphs and Line Feeds Below you will find the sample web page as it looked at the end of our last lesson: <html> <head> <title>Test Web Page Number 1</title> </head> <body> <h1><center>Leland Initiative TEST WEB PAGE</center></h1> Here is an example of a simple web page.<p> </body> </html> Up to now, I have explained what most of the tags in this sample are for. The one tag I have not yet explained, however, is the <p> tag. As a matter of fact, the <p> tag is one of the most important tags in the HTML language. Why? Well, the <p> tag stands for "paragraph", and it tells your web browser to start a new paragraph. If you didn't use this tag, then your entire web page would have no vertical spacing at all; in other words, you would not be able to put a double space between paragraphs to show where they begin and end. Obviously, it would be very difficult to read a document with no such spacing. The sample page currently has just one paragraph, so let's add another so we can make use of the <p> tag. Again, using the sample page, I'll add in some more text: <html> <head> <title>Test Web Page Number 1</title> </head> <body> <h1><center>Leland Initiative TEST WEB PAGE</center></h1> Here is an example of a simple web page.<p> This is an example of a second paragraph. Since there is a paragraph tag after the text above, there will be vertical spacing between the text above and this text. This is how you create new paragraphs using HTML. </body> </html> If you save the text above as HTML and look at it in your browser, you should now see some space between the two paragraphs. By the way, this kind of space is often referred to as "whitespace," since it is an area devoid of (usually) black text. Having enough whitespace in a document is very important to good web page design, since it makes text easier to read (than having dozens or hundreds of lines of text packed together with no breaks. Here is something important to note. Carriage returns--in other words, hitting the "Enter" key on your keyboard to move down a line of text--have no effect in HTML. You could hit your enter key 100 times and then start another paragraph of text, but unless you have that <p> tag after the first paragraph, there won't be any whitespace. Another HTML tag that is related to the <p> tag is the <br> tag. The <br> stands for "line break." As the name implies, it forces a new line of text wherever it appears. But unlike the <p> tag, <br> doesn't put in white space--it just forces the text after it down one line. This tag is particularly useful for putting something like an address into a web page, so let's go ahead and incorporate an example into our test page. I'll put the address under the paragraph we just created: <html> <head> <title>Test Web Page Number 1</title> </head> <body> <h1><center>Leland Initiative TEST WEB PAGE</center></h1> Here is an example of a simple web page.<p> This is an example of a second paragraph. Since there is a paragraph tag after the text above, there will be vertical spacing between the text above and this text. This is how you create new paragraphs using HTML.<p> Jeff Bland<br> 111 Anywhere Street<br> Anywhere, USA 00000 </body> </html> As you can see from the example above, there is a <br> tag after each line of the address. As a result, the address will appear in the browser as it should--with each part of the address on a separate line and with the address single spaced. Also note that the <p> and <br> tags are two that do not require "ending" tags. You do not need a </br> tag to go along with the <br> tag, nor do you HAVE to use a </p> tag with the <p> tag. The <br> tag is a "one time only" tag--there's no need to tell the browser to "turn off" a line break since the <br> tag simply forces text to the next line wherever it appears. You CAN use a </p> tag with the <p> tag, but this is really only necessary if you apply formatting to an entire paragraph. For example, you could add more code to the <p> tag to tell the browser to do something to the entire paragraph (to center the entire paragraph for example)--I'll show you how to do this in the section below. Bolding and Centering Text By now, you should have a pretty good understanding of how HTML tags work. Armed with this knowledge, you can do a lot of things with your page--you just need to know exactly what tags to use for what you want to do. Let's see just how easy this is by centering and bolding some of the text in our example file. Let's center the address we just added to our page. To do this, we will simple add a <center> tag before the address and put a </center> tag at the end of the address to "turn off" the centering: <html> <head> <title>Test Web Page Number 1</title> </head> <body> <h1><center>Leland Initiative TEST WEB PAGE</center></h1> Here is an example of a simple web page.<p> This is an example of a second paragraph. Since there is a paragraph tag after the text above, there will be vertical spacing between the text above and this text. This is how you create new paragraphs using HTML.<p> <center>Jeff Bland<br> 111 Anywhere Street<br> Anywhere, USA 00000</center> </body> </html> Now when you look at the page the address will be horizontally centered. Remember what I saying about using the <p> tag to apply formatting to an entire paragraph? Well, we can center the entire address that way, just by adding a little more coding to the <p> tag before it. So let's get rid of the centering tags and do the same thing with the paragraph tag like so: <html> <head> <title>Test Web Page Number 1</title> </head> <body> <h1><center>Leland Initiative TEST WEB PAGE</center></h1> <p>Here is an example of a simple web page. <p>This is an example of a second paragraph. Since there is a paragraph tag after the text above, there will be vertical spacing between the text above and this text. This is how you create new paragraphs using HTML. <p align=center>Jeff Bland<br> 111 Anywhere Street<br> Anywhere, USA 00000</p> </body> </html> You'll notice that I added "align=center" WITHIN the brackets for that tag. This tells the browser that, FOR THIS PARAGRAPH, align it centered. If you wanted to align the paragraph to the right, then you would use "align=right" instead. Also not that I put a </p> tag at the end of the address. The same principle works with bolding text. Let's make the very first paragraph of our page standing out by making it bold. Again, we simply need to add a <b> tag where we want bold text to start and a </b> tag where we want it to end. After doing so, our file looks like this: <html> <head> <title>Test Web Page Number 4</title> </head> <body> <h1><center>Leland Initiative TEST WEB PAGE</center></h1> <p><b>Here is an example of a simple web page.</b> <p>This is an example of a second paragraph. Since there is a paragraph tag after the text above, there will be vertical spacing between the text above and this text. This is how you create new paragraphs using HTML. <p align=center>Jeff Bland<br> 111 Anywhere Street<br> Anywhere, USA 00000</p> </body> </html> With the addition of these tags, that first paragraph will be in bold text. Try removing the </b> tag and looking at the page again in your browser. What do you see? If the </b> tag isn't there, then the whole page should be in bold text--again, this is where "ending" tags are important! Whew! We covered a lot today, so I'm going to wrap this up for now. Please use the related sites below to experiment with other tags. You can make text blink, make text different colors, italicize it, and a lot more. Just apply the same lessons you learned here, and you'll see how flexible HTML is. Also, please note that I have attached our example file as an HTML file for your use. If there are no problems with using these attachments, I'll continue to attach the latest HTML file with each lesson. Related Sites As usual, here are more web sites that can help you out:
Next Session In the next session, we'll learn how to create lists (with numbers or bullets) in HTML, and I'll show you to change some elements (like the type of font and the color of the background) of an entire web page with one easy step. Plus, we'll change the text in our example to reflect something a little more useful. By the end of the next session, our page should really start coming together! Lesson 3 | Table of Contents | Lesson 5 This series was developed for USAID’s Leland Initiative by the Research and Reference Services Project (operated by the Academy for Educational Development). |