Html

Class: CSCI 426 Professor: R.Anderson Notes:

Description

Pts Your Score

1

4

Grading Rubric –

NP HTML5, CSS3, and JavaScript 6e Tutorial 1, Review

     1. Use your HTML editor to open the mp_index_txt.html, mp_menu.txt.html, mp_events_txt.html, and mp_catering_txt.html files from the html01 ► review folder. Enter your name and the date in the comment section of each file, and save them as mp_index.html, mp_menu.html, mp_events.html, and mp_catering.html respectively.

   2. Go to the mp_index.html file in your HTML editor. Within the document head, do the following:

a. Use the meta element to set the character encoding of the file to utf-8.

b. Add the following search keywords to the document: Italian, Mobile, food, and charlotte.

c. Set the title of the document to Mobile Panini.

d. Link the document to the mp_base.css and mpjayout.css style sheet files.

   3. Go to the document body and insert a header element containing the following:

a. An inline image from the mp_logo.png file with the alternate text Mobile Panini. Mark the image as a hypertext link pointing to the mp_index.html file.

b. A navigation list containing an unordered list with the following list items: Home, Menu, Events, and Catering. Link the items to the mp_index.html, mp_menu.html, mp_events.html, and mp_catering.html files respectively.

          4

   4. Below the header element insert an article element. Below the article element, insert a footer element containing the following text:

Mobile Panini * 31 West Avenue, Charlotte NC 28204 <§> 704-555-2188

where A is inserted using the 9832 character code and an extra space is added between NC and 28204 using the nbsp character name.

   5. Go to the mp_pages.txt file in your text editor. This file contains the text content of the four pages in the Mobile Panini website. Copy the text of the Welcome section, which will be used in the home page of the website. Return to mp_index.html in your HTML editor and paste the copied text into the article element.

   6. Within the article element, do the following: a. Mark the Welcome line as an h1 heading.

b. Below the hi element, insert an inline image containing the mp_photo1.png file with an empty text string for the alternate text.

c. Mark the next five paragraphs as paragraphs using the p element. Within the first paragraph, mark the text Mobile Panini as strong text. Within the third paragraph mark the text Curbside Thai as emphasized text.

d. The fourth paragraph contains Mobile Panini’s phone number. Mark the phone number as a telephone link and be sure to include the international code in the URL. Note that this number is fictional, so, if you have access to a mobile browser and want to test the link, you might want to replace this number with your phone number.

e. The fifth paragraph contains Mobile Panini’s e-mail address. Mark the e-mail address as a hypertext link. Once again, note that this e-mail address is fictional, so, if you want to test this link, you will need to replace the Mobile Panini e-mail address with your e-mail address.

   7. Save your changes to the file and then open the mp_index.html file in your browser. Verify that the layout and appearance of the page resemble that shown in Figure 1-45. If possible, test the telephone links and e-mail links to verify that they open the correct application.

   8. Go to the mp_index.html file in your HTML editor, and copy the header and footer elements. Then go to the mp_menu.html file in your HTML editor and paste the header and footer elements into the body element so that this page has the same logo and navigation list and footer used in the home page. Insert an article element between the header and footer.

    2

2

10

         1

2

   9. Return to the mp_pages.txt file in your text editor and copy the contents of the Mobile Panini menu. Then, go to the mp_menu.html file in your HTML editor and paste the copied text into the article element.

   10. Within the article element of the mp_menu.htm file, do the following: a. Mark the text title Our Menu as an hi heading.

b. Enclose the menu items in a description list with the name of each menu item marked with the dt element and each menu description marked with the dd element.

   11. Save your changes to mp_menu.html file. Open the page in your browser and verify that each menu item name appears in a bold font and is separated from the indented item description by a horizontal line.

   12. Go to the mp_index.html file in your HTML editor and copy the header and footer elements. Then, go to the mp_events.html file in your HTML editor and paste the header and footer elements into the body element. Insert an article element between the header and footer.

   13. Return to the mp_pages.txt file in your text editor and copy the list of upcoming events under the Calendar section heading. Then, go to the mp_events.html file in your HTML editor and paste the copied text into the article element.

   14. Within the article element, do the following:

a. Mark the text Where Are We This Week? as an h1 heading.

b. Enclose each day’s worth of events within a separate div (or division) element.

c. Within each of the seven day divisions, enclose the day and date as an h1 heading. Enclose the location within a paragraph element. Insert a line break element, <br />, directly before the time of the event so that each time interval is displayed on a new line within the paragraph.

   15. Save your changes to mp_events.html file. Open the page in your browser and verify that each calendar event appears in its own box with the day and date rendered as a heading.

   16. Go to the mp_index.html file in your HTML editor and copy the header and footer elements. Then, go to the mp_catering.html file in your HTML editor and paste the header and footer elements into the body element. Insert an article element between the header and footer and then insert an aside element within the article.

    2 2

1 2

2

6

1 2

17. Directly after the opening <article> tag, insert an hi element containing the 2 text catering.

   18. Return to the mp_pages.txt file in your text editor and copy the text about the mobile kitchen, including the heading. Then, go to the mp_catering.html file in your HTML editor and paste the copied text into the aside element.

   19. Within the article element, do the following:

a. Mark the text About the Mobile Kitchen as an h1 heading. b. Mark the next two paragraphs as paragraphs.

   20. Return to the mp_pages.txt file in your text editor and copy the text describing Mobile Panini’s catering opportunities; do not copy the Catering head. Then, go to the mp_catering.html file in your HTML editor and paste the copied text directly after the aside element.

   21. Make the following edits to the pasted text: a. Mark the first two paragraphs as paragraphs.

b. Enclose the list of the six catering possibilities within an unordered list with each item marked as a list item.

c. Mark the concluding paragraph as a paragraph.

   22. Save your changes to mp_catering.html file. Open the page in your browser and verify that the information about the mobile kitchen appears as a sidebar on the right edge of the article.

   23. Return to the mp_index.html file in your browser and verify that you can jump from one page to another by clicking the entries in the navigation list at the top of each page.

    2 2

2

6

1

1 TOTAL 60

YOUR SCORE: ______