66 Chapter2 HTML Basics Web Research ZThete are many HTMLS tutorials on the Web, Use your favote Search engine to discover ‘hem, Choose two that are helpful. For each, printout the home age or other pertinent ege and! create @ web page that contains the answers to the following questions: . What is the URL of the website? 2's the tutorial geared toward the beginner level, intermediate level, oF both levels? & Would you reeommens this ste to others? Why or why not? {Us one or two concepts that you leamed from tis tutorial You ate learning the syntax of HTMLS. However, coding elone does not make a web page; esi i also very important. Surt the Web and find two web ages, one that is appealing {0 you and one that is unappealing to you. Print exch Page. Create 2 web page that answers {he folowing questions for each of your examples, ‘. What is the URL of the website? » Is the page appealing or unappealing List three reasons for your answer. 6 Ifthe page is unappealing, what would you do to improve t? @ weesire CASE STUDY \ gh of the case studies inthis section continuge throughout most of the text. This | Chapter introduces each website scenario, presents tne tie Map, and directs you to | Greate two pages for the site, davajam Coffee House & g é 5 2 B a a i : £ a rere cess anc provide acalonéar for he performances. He wold tre na oes, mer gs, musie performance schedule page, and ob oppoties sane Coban fr te Jevalam Cotes House webste i shown i Figure 230, The sho map | eerste arctectue ofthe webste wncrnecn "Home" page withthe Iain Content pages: “Menu,” “Musi” and "Jobs | ‘eu1e 2.50 JavaJam site mapFigure 2.31 displays a wireframe sketch of the page layout for the website. It contains a header area, a Navigation area, a main content area, and a footer area for copyright information. ‘You have thres tasks in this case study: 1. Create a folder for the JavaJam website, 2. Create the Home page: index.html. 3. Create the Menu page: menu.htm Hands-On Practice Case Study Task 1: Create a folder on your hard drive or por- table storage device (thumb drive or SD card) called "iavejam" to contain your JavaJam website files, Website Case Study header main div footer Figure 2.31 Javadam wireframe Task 2: The Home Page. You will use a text editor to create the Home page for the Javalam Coffee House website. The Home page is shawn in Figure 2.32. JavaJam Coffee House Relax at JavaJam Speciy Coffe and Tea ‘Bagels, Mins, nd Orgaie Sacks 1 Mosic nd Peery Readings * Open Mie Night 34321 Routes Eisen Bay. WI5210 50535-5555, eee 85015 an Cae Hae scat Figure 2.92 JavaJam index.html Launch 2 text editor, and create a web page with the following specifications |. Web Page Title. Use a descriptive page title. The company name is 2 goad choice for 2 business website, 2. Wireframe Header. Code the header element with the text, “JavaJam Coffee House” Contained within a heading 1 element, orChapter? HTML Basics 3. Witeframe Navigation. Place the following text within a nav element with bold text (use the element) Home Menu Music Jobs Code anchor tags so that "Home" links to index.html, "Menu" links to menu.html, “Music” links to music.html, and “Jobs” links to jobs.html, Add extra blank spaces between the hyperlinks with the enbsp; special character as needed. 4. Wireframe Main Content. Code the main page content within a main element. Use Hands-On Practice 2.10 as a guide. . Code the follawing text within an h2 element Relax at JavaJam b. Configure the following content in an unordered lis: Specialty Coffee and Tea Bagels, Mutfins, and Organic Snacks ‘Music and Poetry Readings Open Mic Night ©. Code the folowing address and phone number contact information within a div element. Use line break tags to help you configure this area and add extra space between the phone number and the footer area, 54321 Route 42 Elson Bay, Wi 54210 888-555-5555 5. Wireframe Footer. Configure the following copyright and e-mail ink information within 2 footer element. Format it with small text size (use the tag) and ialics font siyle (use the <> tag) Copyright © 2016 Javalarn Coffee House Place your name in an e-mail ink on the line under the copytight The page in Figure 2.32 may seem a ltt sparse, but don't wory; as you gain experience and learn to use more advanced techniques, your pages wil look more professional. White ‘space (blank space) on the page can be added with tags where needed. Your page does nat need to look exactly the same as the sample, Your goal at this point should be to Practice and get comfortable using HTML. Save your page in the javajam folder, and name it index.htm Task 3: The Menu Page. Create the Menu page shown in Figure 2.33. A technique that imoroves productivity i to create new pages based on existing peges s0 that you can benefit from your previous work. Your new Menu page will use the index.html page as a starting point