BEFORE YOU BEGIN
6 About Proper HTML Coding
7 Set Up a Web Page's Basic HTML Structure
SEE ALSO
2 Use HTML Tags
34 Create a Page
HTML pages were originally designed to work like a word processor: If you had a big chunk of text, it would flow down the page as if you had typed it on a typewriter. That would have been okay if computer screens were tall and narrow, but they aren't. So web design evolved and now tables are used to make the page work more like a newspaper. Tables were intended originally to display tabular information such as a spreadsheet, but web designers quickly learned to use tables to hold pictures and words so that they could display content in a better way for viewers to read.
1. | Launch the Table Maker Click on the Launch Table Maker button. The Yahoo! GeoCities HTML Table Maker dialog box helps you create code for tables and then enables you to preview the table. When you're done, it enables you to copy the HTML for the table into your page in the HTML Editor . 35. Add a Table |
2 . | Design Your Table You are going to use this table to display photos and captions. To demonstrate abilities , I will place photos in a column on the left, and captions will be on the right with a space between the columns . Of course, you can arrange them in any way you like. In the Table Align section, I will set the alignment to Left. This will ensure that my text and pictures are all on the left side of their table cells . You should try options to get an arrangement you like. Last, I will set the table to have two rows and three columns. I will set the border to 0 and leave the Cellpadding and Cellspacing at the defaults. Experiment with your own content. There are many options you can use with your content. Tables are measured in either percentage of the browser window or pixels. Tables measured in percentages are not always the best choice because the table will resize as the window is resized. If you want your table to always be the same size , try setting the width to 700 pixels. In this case, set the table width to 100%. This means that the table is going to take up 100% of the available browser window. The BGcolor is the background color of the table. If you leave this box blank, the table will simply sit on your page and not look any different than the existing background. If you set a background color , the table is going to stand out from the background. In this case, I have deleted the value from the BGcolor text area. |
3. | Copy the HTML for the Table Click on the Show HTML button, copy the HTML by clicking on the Select HTML button, and then press Ctrl+C to copy the code. Close the window. When you show the HTML, this writes the code needed for the table to be written to the window. To get it into your page, copy it from this window and then paste it into your page in the HTML Editor . |
4. | Paste the Code for Your Table Place your cursor in the HTML Editor below the end of the <p> tag and paste the table. Now that you have the table in the HTML Editor on the page, you can add content to the table. |
5. | Enter Your Photo Captions Photo captions help explain your illustrations and why they are used. Readers like them, and in this task, we will create a few. I will designate where the captions go, but it is up to you to add the captions and experiment with the formatting. Between the <td> tags where there is a 3, enter a photo caption for your first photo. Between the <td> tags where there is a 6, enter a photo caption for your second photo. HTML requires this information be placed in between certain tags. In this case, we are adding the information to the Table Data tags, or td for short. TIP Be sure to place the caption information between the tags or the information may not be seen, or worse , it can corrupt the formatting and displaying of the table overall! |
6. | Add your Images to the Table and Save Your File As I work on the tacothechook website, I've prepared a few graphics. In this task, I will add them to the HTML content I've prepared. Between the <td> tags where there is a 1 , I type <img src="AnniTaco.jpg"> . Between the <td> tags where there is a 4 , I type <img src="taco1.jpg"> . (You need to use the names of two of your own files you uploaded in Chapter 3, "Planning Out Your Website.") Be sure to type your own filenames exactly as shown. TIP The <img> tag tells the browser to go get the picture that you listed in the src="" attribute. I am calling the pictures that I uploaded, but you will need to list the names of the files you uploaded in Chapter 3. For more information about uploading files , see 36 Preview and Use the Easy Upload . |
KEY TERM
Non-breaking space ( ) A non-breaking space is a blank space in HTML that you want to have in some places. You might want to use them for dramatic effect. You might want to use them as part of your page formatting scheme. By default, HTML gets rid of more than one space in a row, so if you want to add more spaces, type in .