ࡱ > 2 4 / 0 1 @ jbjb 0h d d l M M M M _ _ _ _ _ _ _ 8 _ _ _ z ` a a a a :b . hb |b y y y y y y y , ~ ) z _ b 6b :b b b z c M M a a 4 ` c c c b M h a _ a y c _ @ Z_ @ M M M M b y c c c V ~k >Z _ n ` QH _ _ c " jn n z z vn x c n c Demystifying Basic HTML Inserting Footer Information You next need to add the footer information. The music sites footer includes a footer graphic, the address and phone number information, text links that correspond to the navigation bar links, and some copyright text. The process of inserting a footer graphic is similar to the process of inserting the header graphic described earlier in this lesson. The main difference in the footer area is that youre going to place the footer graphic in the second cell in the third row and youre going to insert some additional information in the cell along with the graphic (as described in the next section). Because youre going to include other information below the footer graphic, youll nest the footer graphic within paragraph tags (
) to ensure that space will be included above the graphic. Lets start to create the footer element by inserting the footer graphic: If necessary, open your text editor and open index.html. In the third row of the table, click after the secondto indicate the start of a paragraph and to specify to center align the paragraphs contents. (By default, paragraphs are left-aligned.) Specify the footer images information by inserting the image tag with the following attributes: Type
to indicate the end of the paragraph section. Next youll insert a second paragraph that centers the address and phone number information. Press Enter twice, press Tab, and type:1234 Songbird Alley, Mesa, AZ 85201
555 555-5555
. Press Enter, press Tab, and type: Home Page | In the preceding link, the words Home Page will display as hypertext on the Web page. If users click the words Home Page, the index.html file will display. Also notice the pipe symbol (|). You type this symbol between each text link to make differentiating the links easier. The symbol is optional but popular. Youre now ready to add the remaining text links. tip You dont have to press Enter and Tab between each of the text link entries in steps 8 through 14. Browsers will show the links in a row regardless of the space you add in the HTML document. We chose to format the text links in the described way to make working with the information easier. Press Enter, press Tab, and type: Lessons | Press Enter, press Tab, and type: Recitals | Press Enter, press Tab, and type: Competitions | Press Enter, press Tab, and type: Performances | Press Enter, press Tab, and type: Background | Press Enter, press Tab, and type: Contact Information | The final text link entry is the text equivalent of the Send Us A Note icon you inserted earlier. Thus, this text link uses the mailto: component in the href attribute. Remember to replace username@domain.com with your own e-mail address in the following step. Press Enter, press Tab, and type: E-mail Chris To complete the text link paragraph, press Enter, press Tab, and type
. The final component of the footer is the copyright information. In this section, you create a centered paragraph and enter the copyright information. One interesting twist here is that you can use a special character entity reference to create a copyright symbol. Press Enter twice, press Tab, and type:© 2002 Chris Soll. All Rights Reserved
Save index.html. Your HTML code should look similar to the code shown the following figure. Footer information in the last cell in the table Open index.html in your browser. The footer in the index.html file should look similar to the footer information in the page shown in the following figure. HTML footer code interpreted by a browser You might have noticed that youve designed everything on the home page except the main content. Youll be happy to hear that theres a method to our madness. Now that you have the basic structure of the home page created, and because youre planning to mimic the home page structure on the subpages, you can use the index.html file to quickly create the foundation pages for the subpages, as described in the next section. Easy Web Design creationguide.com/oldschool ( Copyright 2006 Mary Millhollon. All Rights Reserved. The contents of this document may not be copied in part or full without express written permission. Show slide 06 B sic H ML 49, Next Step. Show slide 06 B sic H ML 49, Next tep. Show slide 06 B sic H ML 49, Next Step. > ? 9 : e f J \ 6 7 G A B { ) > ? h k n o $ F v : m # $ * = d e P Q 0J6B*CJ OJ QJ ph 0JB*CJ OJ QJ ph 0J5B*CJ OJ QJ ph 0JB*ph 0JCJ 5NH M 5 G S { { h /-D M ^ ~ ~ &