Leland Initiative Web Tutorial Series: Overview of Last Lesson In the previous lesson, we discussed the fundamentals of an HTML file. As you may recall, HTML stands for Hypertext Markup Language. HTML is the code used in web pages to tell a web browser how to display the page's contents. You may also recall that HTML codes are called "tags" and are always surrounded by brackets (<>). An example of an HTML tag is <center>--this tag indicates that any contents (text or images) between it and the </center> tag should be centered. I also explained that all web pages contain a few common tags--the <html>,<header>, <title>, and <body> tags, along with their corresponding </html>, </header>, </title>, and </body> tags. I will remind you here that an HTML file can be created with any text editor. For an HTML file to work, it must contain the appropriate tags (including the mandatory tags listed above), and it must be saved with a .htm extension ("home.htm," for example). Thus, aside from these two requirements, an HTML file is really no different from any other text file. Give Your Web Page a Title OK, now that we've reviewed the basics of a web page, let's look at some of the things we can do with HTML tags. If you created the test HTML file from the last session, go ahead and open it up in the text editor you are using. If you can't find it or never created it, just open Notepad, MS Word, WordPerfect, or some other text editor and type in the coding below into a new file (just everything between the dashed lines--don't include the dashes themselves). If you want just copy and paste the following. Here's the test file from last session: <html> <head> <title>My Web Page</title> </head> <body> Here is an example of a simple web page.<p> </body> </html> Look at the <title> and </title> tags. Whatever appears between those 2 tags will appear on the top bar of a user's web browser when he or she looks at the page. Using these tags is a good way to identify web pages and let users know what they are looking at quickly. In the example above, users would see "My Web Page" at the top of the browser. Try changing the text to whatever you want. For this exercise I'm going to change the text to "Test Web Page Number 1". Formatting Text and Paragraphs OK, I have changed the title. The HTML file now looks like this in my text editor: <html> <head> <title>Test Web Page Number 1</title> </head> <body> Here is an example of a simple web page.<p> </body> </html> Let's add a title to this web page. I want the title to appear at the top of the web page (not in the top browser bar, but in the browser window itself. I also want the title to be centered in the middle of the page and I want the text to be bigger than the other text so it stands out (just like the title of a book). If the title is "Leland Initiative TEST WEB PAGE" and it is to be centered, then the coding should be: <center>Leland Initiative TEST WEB PAGE</center> This would appear after the <body> tag in the file above. The <center> and </center> tags around the text make the text horizontally centered. How do we make the text bigger? The best way to do this is to use "heading" tags. There are 6 heading tags. The <h1> tag enlarges text to the maximum extent, while the <h6> tag enlarges text the least. <h2> is the next largest size, then <h3>, <h4>, and <h5>. Let's make the title as big as possible. To do this, we'll need to add the <h1> tag to the title. After we do this, the title line should look like this: <h1><center>Leland Initiative TEST WEB PAGE</center></h1> Note that in addition to the <h1> tag before the text begins, there is also a </h1> after the text. This </h1> tag is there to tell the browser to "turn off" the text enlargement. If you didn't put that tag there, then ALL the text after the <h1> tag would be enlarged, and the title would not stand out from the rest of the page! So remember, with a lot of these tags, it is important to put in an "ending" tag in addition to the starting tag (just like there is a </center> tag after the text above, telling the browser to turn off text centering). After you put in the title and tags above, your HTML file should now look like this in your editor: <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> If you want to, you can now view this page in your browser. Just save the file with a ".htm" extension (for example, save it as "mypage.htm"), and then choose "File"-"Open File" in your web browser and locate the file you just saved. If you did everything right, you should now see a page with "Leland Initiative TEST WEB PAGE" in large bold text centered at the top of these page. "Here is an example of a simple web page." Should appear below the title, but it should NOT be centered as the title is; rather, this sentence should be aligned to the left of the page. Finally, "Test Web Page Number 1" should appear in the bar at the very top of your browser. If you see what I just described, congratulations! You just created a web page. If you posted this page on a web server, then any web user would be able to view your handiwork! If your page doesn't look right, don't panic. Check to make sure that you put "ending" tags after appropriate text--that is, you should have </title>, </center>, and </h1> tags at the right places. Also make sure that you put in the <html>, <head>, and <body> tags, AS WELL AS their corresponding "ending" tags. Wrap-Up In this lesson, you have learned how to add a title to your web page. You have also learned how to enlarge and center text. Please be sure to save the sample HTML file you created. Remember, save it with a ".htm" extensions, and if you are using a word processor, be sure to save it as "text" (not in Word or WordPerfect format). We will continue to build on this basic file and add more features to it, so by the end of the course, this simple web page should be much more complicated. Related Sites As usual, here are some web sites that can help you out. These sites cover the basic tags we discussed today. Some also discuss other tags, but feel free to experiment with your sample web page if you want!
Next Session In the next session, we'll continue to look at ways to format text in HTML. You will learn how to add new paragraphs; how to add "line breaks"; and how to bold, italicize, and underline text. Lesson 2 | Table of Contents | Lesson 4 This series was developed for USAID’s Leland Initiative by the Research and Reference Services Project (operated by the Academy for Educational Development). |