Computer Assignment HyperText Markup Language Writing a Web Page - Tables and Lists Lesson 3 Building Upon What Has Been Learned Well, you are two-thirds of the way through the 15 HTML files as you begin this last of the three beginning lessons. Once again you will create five (5) HTML files. This time you will use some very different Tags. In these five files you will use the Table and List Tags. The Table Tag is used to organize text, as well as, image content on your page. In the last lesson you displayed text and an image aligned horizontally on a Web page. If you have experimented with text and graphics trying to cooperate and display in the correct position on a page, you probably found it difficult at times. Tables will help you with this problem. The Table Tag ands its attendant Tags will allow you to organize images, text, or mixes of both in your page more easily. The List Tag is a little different. List is only used for text organization. You may or may not use it on Web pages you create, but you need to keep in your mental tools, as you will not know when it will be necessary to use it. The List Tag allows the automatic formatting of text with a heading sentence and an indented list below. The list that forms the second part of the paragraph may be bulleted, numbered, or indented alone, as you will see. You will only type one Web page file to see all of this formatting on one page. Creating a Basic Table What are Tables? They are grids, sometimes with lines, that are used to organize data. Although you will learn how to place basic tables in a Web page, you won t learn all of the ways to format them to make the table virtually any size, color, and text configuration. Here what the Table we are going to use looks like: YOSEMITE LODGE EMPLOYEE SHIFT SCHEDULE 9 A.M. 12 P.M. 2 P.M. HOUSE KEEPING John Mary Marcia SECURITY Kimberly George Ken CHECK-IN Jacob Nancy Adam This very basic Table has no lines to separate the information and it is in black and white, but it organizes the information nicely. That is great, now you know what a Table is, so lets put one into a Web page. Open NotePad, just as you did in Lesson 1 and Lesson 2. Type the HTML shown on the top of the next page into the workspace. Save the file as Table.htm. Be sure to type exactly as you see it, so the page will display properly. You will see a lot of new Tags that you probably don t understand. The text shown after the file you are typing will explain the Table Tegs in detail so you can learn them more effectively. 1
Look at the new Tags that have been used in this file. Here is a brief description of each: The <TABLE> tag declares there will be a table. Since this denotes the beginning of a table, be sure to end with the closing tag of </TABLE>. If you leave the closing off the table will not appear. Notice that the Table begins with the CAPTION tag, but it is optional. Most Browsers automatically center the caption above the table contents, but since some don t, it is good to place the alignment tag here. A Table is made up of Rows and Columns, with each row going left-to-right and each column going top-to-bottom. The first Row contains 9 A.M., 12 P.M., and 2 P.M. and each row is similar. The first Column contains HOUSE KEEPING, SECURITY, and CHECK- IN. This Table consists of four Rows and four Columns. Each row is begun with a <TR> tag. TR stands for Table Row. Tables are constructed as sequences of Rows. <TR> tells the Browser that a new row is beginning. If you don t use this tag then the browser will just keep adding rows to the right. The optional </TR> tag ends the row. It is optional, but not in nested Tables. Rows are divided into Cells. Each cell in the table we are using is a data cell. A cell can also contain no data, as in the cell in Row 1, Column 1. Cells can also overlap. <TD> stands for Table Data. It denotes the beginning of a new cell, This <TD> tag is used to markup each individual Cell. You could also designate type alignment (center, right, left), emphasize (bold, italic, underline), or color (background or text). Images can even be placed in cells. The closing </TD> tag is optional with one Table. 2
The closing </TD> tag is optional with one Row. It is considered good practice to use this Tag. It is a must if one table is nested within the cell of another. It is not used in the Table file you just typed, but could be. The <H3 ALIGN= CENTER > centers the Table, but the H# has no effect on the data. So the Table can be aligned right, center, or left. Notice that the width of each Column in the example you typed is not the same. The width of each Column is determined by the width of the largest amount of data in that column. While we won t do it, the column width, row height, text alignment, and other table sizing attributes can be set using various tags. Now find the file you just typed and saved, then Open it as you did the files in the last lessons. You will see your first Table in the browser. You are going to discover a few more Table attributes before you begin to design your own Web Page. At the right is what the page you just typed from page 15 looks like in the Browser. Look at it and read the explanation on the previous page slowly, while you compare it to what you have typed in the HTML file. Look at each Tag in the HTML file and try to understand how each Tag causes something to occur on the page displayed. It is the Tags that format the page content to appear as you designed the Web page. Making Cell Borders and Adding Color to a Table Open the HTML file in Notepad that you just finished and displayed. You will just make a few additions to the file to add color to some of the Cells and to add borders around the Cells and the Table. You will go to the line containing the TABLE Tag, then type a space after TABLE in the <TABLE> Tag and add BORDER= 5. This will add lines around all of the Cells and the Table that are 5 Pixels thick. The borders will be Black colored by default. Save this file with the name TableBorder.htm. A different number will produce a thicker or thinner line for the border. Now move to the first TD Tag, which you will find a few lines below the TABLE Tag. Insert a Cursor just after the TD, then add a space, followed by BODY BGCOLOR= C0C0FF. After the Tag, type  . This will add a space, like the space between two words, in the empty Cell. This will add a very thin Black border inside the Cell that had none before. You will see the difference if you look before and after you add the  . 3
In case you could not follow the written directions, and example of the file that you will have after you are done modifying. It shows the two changes covered so far. The next, and last step in modifying this file, is to add the same Tag to each of the three TD Tags you will find in the rest of the file. They will read <TD BODY BGCOLOR= FFFF00 > once they are modified. The color code for these will be different so the color produced will be Yellow. Be sure you check the example above as you work. When you done, Open the Web page in the Browser and the example at the right shows what you should see. If your page does not look like this one, edit, resave, and try again. There are a lot more things that can be done with Tables to make them look different, but you will need to experiment on your own. 4
Cellpadding and Cellspacing a Table Once again, you will use an earlier file to create the next one. Open the Table.htm and you will modify it to create the next one in the lesson. This will entail a very simple change to introduce a new formatting Tag. Find the TABLE Tag, which you will find two lines below the BODY Tag. As in the last file, add the BORDER= 5 Tag to the TABLE Tag. Use the example shown below. Immediately after the BORDER Tag, add two new Tags. If you look at the example, you will see CELLSPACING= 8 and CELLPADDING= 5 added to the TABLE Tag. The second addition will be the same Tag added to the last file. Add the BODY BGCOLOR= FFC0FF Tag to the first <TR> Tag. You will see it in the example two lines below the TABLE Tag. This will add a Pink fill color to the first Row in the Table. Last, immediately below the Tag you just worked on, Add the   entry to the empty first <TD> Tag. This doesn t do anything different from the last file, so you know what to expect. So what does all of this do to the Web page and the Table? The CELLSPACING Tag adds space between the individual Cells in the Table. The 5 value spaces the Cells 5 Pixels apart. Try another number, such as 10, and see the difference. The CELLPADDING Tag adds space around the margin of the contents of the Cell. If you compare the last and this Web page you will see the Cell boundaries are much tighter on the text in the Cells. Try changing this value to another value to see what the change looks like. These two Tags are used to give a different look and feel to Tables. 5
So, what should you see in the Browser window when your file is correctly written and uses the original values of 8 and 5? Look to the right and you will see the example that shows you what your Web page should look like. This is only one more Table file you will type. So you will need to experiment with the Tags you have learned in the last 3 files. It will help you get the look you want in your Web pages. But it doesn t stop here. The next file will show you another great use for Tables. Using Tables to Align and Arrange Images and Text The next file you will type will display would could be a real Web page. Before you begin, you will need open the Lesson 3 folder, which is in the HTML Activities folder, which you will find in the Activities Files folder on your Local C: drive. You will need to Copy each of the six files you will find in this folder and Paste them into the folder that holds the HTML file you will type for this Web page. For reference, the files are named Clouds Rest Half Dome.jpg, frozendrops.jpg, frozenfalls.jpg, iciclesimage.jpg, Snow Scene along Merced.jpg, YosemiteHeading.jpg. As you will see, this Web page is image driven. In fact, the largest image, which is YosemiteHeading.jpg, is not a picture. You should open it in Paint Shop Pro 8 and have a look at it. This is one way to display several images on a Web page, but only us one image. The original image is the one shown at the right. After a quick story board sketch, the image was cropped, then resized to the Pixel Size that was desired for the Web page. The Canvas was enlarged with a White background. On the new Canvas, two Blue colors were sampled from the image that would be used to create the text above and below the image that would become the heading and kicker for the Web page. A few other tools were used to touch up the Blue color in the YOSEMITE heading text so it was uniform. The use of Layers for each of the image elements made this job much easier. The resulting image has great impact in the Web page. Remember, though, this is a very simple graphic element. In reality, it might be too large an consume too much space on a commercial Web page or site. 6
The result of the image work is the merged layers of an image that contains a picture that is the essence of the entire Web page and the headings that put the theme into words. You might consider images like this on a Web page that you create on your own. You can begin typing the HTML file you will find on the next page in its entirety. If you take the time to look into the HTML in the file, you will see that the Web page is broken into 3 parts. The first part displays the image that was just discussed at the top of the page. The second, and most of the file, is a Table that contains all of the other images and a small amount of text. The last part is just a couple of lines of text referencing the page to view that will tell you much more about Yosemite. <TABLE BODY BGCOLOR="6782B7" CELLPADDING="20" BORDER="0" BORDER- COLOR="0000FF" WIDTH="1440" ALIGN="CENTER"> <TR> <TD WIDTH="550" ALIGN="CENTER"><IMG SRC="Snow Scene along Merced.jpg"> <TD WIDTH="340" ALIGN="CENTER"><FONT COLOR="FFFFFF" FACE="ARIAL" SIZE="4">Each Season transforms Yosemite Valley into a new magical world. But it is winter that creates a truly magical fantasy land. The landscape in winter is draped with soft, pure and fluffy white. But it is also framed by the structural shapes that ice can form.</font> <TD WIDTH="550" ALIGN="CENTER"><IMG SRC="Clouds Rest Half Dome.jpg"> <TR> <TD> <TD ALIGN="MIDDLE"><IMG SRC="iciclesimage.jpg"> <TD> <TR> <TD ALIGN="MIDDLE"><IMG SRC="frozendrops.jpg"> <TD ALIGN="MIDDLE"><FONT COLOR="FFFFFF" FACE="ARIAL" SIZE="4">As though frozen in time, nature's ice slows down those changes we would not normally be able to witness. In winter, nothing is protected from the stasis of crystalline ice.</font> <TD><IMG SRC="frozenfalls.jpg"> </TABLE> Look at the part of the HTML as you read on the next page. This is the Table. 7
The Table is actually very easy to understand. It contains three Rows TR. The first row contains three Cells TD, that have their width defined in pixels. It might help you to see the way the Table is constructed better if you introduce a Border around all of the Cells in the Table. In the <TABLE> Tag at the top, just change the BORDER= 0 to a value of 1 or 2. This will define the edges of the Cell boundaries with a thin Blue line. The only thing that can sometimes be difficult to work with is the placement of the elements in a Table Cell. It is best if you experiment with the LEFT, CENTER and RIGHT values for horizontal placement and the TOP, MIDDLE, and BOTTOM values for vertical placement. You can use this file to see how it all works. So, take some time and experiment with this file before completing it as it should be. Below is the file you should be creating. This Web page is a really good example of putting it all together and it will help you create your own Web page. Of course, you will need to take the time to study each part until you understand what is going on in the file and how the Tags are working. As with almost any learning you will ever do, you must put effort into trying to understand what is going on to learn. If you don t buy into the lesson, you will not learn much of anything, except that it is the road to failure. At the top of the next page, you will see the Web page that results from this file. When you view it, try to understand how you would change, or manipulate, the HTML to get a different overall look. This is a very formal layout of elements and good design does not need to have this symmetrical look, with everything centered on the page center. The Cells in Tables can be empty, in order to space other elements on the page. Try to think of putting all of your elements into rectangular boxes and arranging them like a puzzle to get the look you want. When you add color and formatting you will get the finished look you need to have a really good looking Web page. 8
9
Using the List Tag For the last HTML file you will use the List Tags. These are very easy Tags to use and master, but you may not have a reason to use them on your Web page. The List Tags perform exactly what they claim in their name, they make lists easy. There are three types of Lists. You can make numbered Lists, bulleted Lists, or indented Lists. All of the Lists begin with a line of text as a heading, then the listed items are all indented under the heading. The types of Lists are self-explanatory. The lines under the heading are indented and the items are either numbered, bulleted, or indented a second time. You will use all three in the HTML file you will type. The file is shown below. Since there are no images involved in this one, you can just Save the HTML file to the same place you have saved the other ones in this series of lessons. As you can see by each of the above formatted Lists, the heading is typed just as you would any standard line of type. The List Tags are then added below. For the numbered List, the Tag is <OL>, with the Tag being typed before each of the items in the list. You must close this tag with a </OL> after. OL means Open List. In the numbered list section of the file above, <LI> appears four time beneath the heading text, so the first Tag applies a number of 1 to the first item, 2 for the second item, and so on. In the second list heading and the four items below, the <UL> Tag is the opening Tag and then a </UL> closes the list at the end. The same <LI> Tag is used, but this time it adds a bullet symbol before each item in the list. The last set of items uses two Tags for formatting. There is a heading text line, then the <DL> Tag begins the List. A <DT> Tag indented the first sub-item and then the indented list uses the <DD> Tag for each item. The second <DT> Tag adds a second indented list. Turn the page to see what these Tags do. 10
If the previous paragraph was a little difficult to follow, just look at the three Lists that have been created by the HTML file. You need to type this to create your own file. Of course the colored text and the lines, as well as the background color, are all from files you types in the earlier lessons. This is a simple way to make lists that are indented below the line above. You can use these in Tables, or in the text on the Web page. They are put to good use on pages with statistics, such as sporting events, or pages that cover any display of numbers or even terms, such as in a contract or the description of an item that is being sold or displayed in a Web page. Putting Your Knowledge to Use You have now created 15 HTML files. The three lessons that they have been contained within are all organized around families, group Tags that are somewhat alike. Some common formatting learned in earlier lessons is also used again on the lessons that follow. While there are many more Tags used in HTML, the ones you have now been exposed to will allow you to create your own Web pages, or assemble a Web page from elements that are supplied to you. Lesson 4 in this series puts it all on you. If you typed these, but did not invest learning as you did, you will have a difficult time creating your own page. If you did learn, it will be easy. Lesson 5 is an assembly lesson, but your teacher will decide which lesson you will do. You should be able to create a simple, but effective product. 11