the work I have done notepad+++ want to make if is correct done I want to check if all the work I did was made
the work I have done notepad+++ want to make if is correct done
I want to check if all the work I did was made properly
Figure 32 displays a wireframe sketch of the page layout for the website. It contains a header area, a header avigation area, a main content area, and a footer area for copyright information. nav main You have three tasks in this case study: 1. Create a folder for the JavaJam website. div 2. Create the Home page: index.html 3. Create the Menu page: menu.html. footer Hands-On Practice Case Study Task 1: The Website Folder. Create a folder on your Figure 32 Java.Jam wireframe hard drive or portable storage device (thumb drive or SD card) called "javajam" to contain your JavaJam website files. Task 2: The Home Page. You will use a text editor to create the Home page for the JavaJam Coffee House website. The Home page is shown in Figure 33. Javalam Coffee House JavaJam Coffee House Home Menu Music Jobs Relax at JavaJam . Specialty Coffee and Tea .Bagels, Muffins, and Gluten-free Pastries Organic Salads Music and Poetry Readings . Open Mic Night 12010 Garrett Bay Road Ellison Bay, WI 54210 888-555-5555 Copyright 2018 JavaJam Coffee Hous Figure 33 JavaJam index.html Launch a text editor, and create a web page with the following specifications: 1. Web Page Titl. Use a descriptive page tile. The company name is a good choice for the home page of a business website. On pages other than the home page, the title typically contains both the company name and a word or a phrase that describes the purpose of the page. 2. Wireframe Header. Code the header element with the text, "JavaJam Coffee House" contained within a heading 1 element. HTML Bas 3. Wireframe 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. htmi, "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 snbsp: special character as needed 4. Wireframe Main Content. Code the main page content within a main element. Use Hands-On Practice 10 as a guide a. Code the following text within an h2 element Relax at JavaJam b. Configure the following content in an unordered list Specialty Coffee and Tea Bagels, Muffins, and Gluten-free Pastries Organic Salads Music and Poetry Readings Open Mic Night c. Code the following 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. 12010 Garrett Bay Road Ellison Bay, WI 54210 888-555-5555 5. Wireframe Footer. Configure the following copyright and e-mail link information within a footer element. Format it with small text size (use the tag) and italics font style (use the tag). Copyrighto 2018 Java.lam Coffee House Place your name in an e-mail link on the line under the copyright. The page in Figure 33 may seem a litte sparse, but don't worry; as you gain experience and learn to use more advanced techniques, your pages will look more professional . White space (blank space) on the page can be added with tags where needed. Your page does not 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.html. Task 3: The Menu Page. Create the Menu page shown in Figure 34. A technique that improves productivity is to create new pages based on existing pages so that you can benefit from your previous work. Your new Menu page will use the index.html page as a starting point. lavalam Coffee House MenuX JavaJam Coffee House Home Mens Musis Jobs Coffee at Java Jam Just Java Regular house blend, decaffeinated coffee, or flavor of the day Endless Cup $3.00 Cafe au Lait House blended coffee infused into a smooth, steamed milk. Single $3 00 Double $4.00 Iced Cappuccino Sweetened espresso blended with icy-cold milk and served in a chilled glass Single $4.75 Double S6.00 Coprigh o 2018 Java Ja Cofee Houre Figure 34 JavaJam menu.html Open the index.html page for the JavaJam website in a text editor. Select File > Save As, and save the file with the new name of menu.html in the javajam folder. Now you are ready to edit the page. 1. Web Page Title. Modify the page title. Change the text contained between the and tags to the following: JavaJam Coffee House Menu 2. Wireframe Main Content. a. Delete the Home page content unordered list and contact information. b. Replace the text in the h2 element with the following: Coffee at JavaJam c. Use a description list to add the menu content to the page. Use the dt> tag to contain each menu item name. Configure the menu item name to have strong importance and display in bold font weight with the tag. Use the
tag to contain the menu item description. Configure line break tags as needed to display two lines of infor- mation within each dd element. The menu item names and descriptions are as follows: Just Java Regular house blend, decaffeinated coffee, or flavor of the day. Endless Cup $3.00 Cafe au Lait House blended coffee infused into a smooth, steamed milk. Single $2.00 Double $4.00 Iced Cappuccino Sweetened espresso blended with icy-cold milk and served in a chilled glass. Single $4.75 Double $6.00 HTML Basics Save your page, and test it in a browser. Test the hyperlink from the menu.html page to index.html. Test the hyperlink from the index.html page to menu.html. If your links do not work, review your work, paying close attention to these details . Verify that you have saved the pages with the correct names in the correct folder. e Verify your spelling of the page names in the anchor elements. Test again after you make changes. WEBSITE CASE STUDY Implementing CSS Each of the case studies in thiss ection continues throughout most of the text. This chapter implements CSS in the websites. JavaJam Coffee House See Chapter HTML Basics for an introduction to the JavaJam Coffee House Case Study. Figure 31 shows a site map for the JavaJam website. The Home page and Menu page were created in this chapter. You will develop a new version of the website that uses an external style sheet to configure text and color. Figure 32 depicts the wireframe page layout. You have the following tasks: 1. Create a new folder for this JavaJam case study. 2. Create an external style sheet named javajam.css that configures the color and text for the JavaJam website. 3. Modify the Home page to utilize an external style sheet to configure colors and fonts. The new Home page and color swatches are shown in Figure 29. a--RI Figure 29 New JavaJam index. JavaJam Coffee House | html #221811 JavaJam Coffee House Home Menu Musis lobs #FCEBB6 Relax at JavaJam Speciality Coffee and Tea . Bagels, Muffins, and Gluten-free Pastries e Organic Salads . Music and Poetry Readings Open Mic Night #D2848C 12010 Garrett Bay Road Ellison Bay, WI 54210 888-555-5555 t 2018 Javalam Coffee House Configuring Colof anu / 4. Modify the Menu page to be consistent with the new Home page 5. Configure centered page layout Hands-On Practice Case Task 1: The Website Folder. Create a folder on your hard drive or portable storage de Task 2: The External Style Sheet. You will use a te led vice ca Copy all the files from your Chapter 2 javajam folder into the javajamcss folder xt editor to create an external style sheet named javajam.css. Code the CSS to configure the following. 1. Global styles for the document (use the body element selector) with background color #FCEBB 6; text color #221811; and Verdana, Arial, or any sans-serif font 2. Styles for the header element selector that configure background color # D284 8 centered text 3. Styles for the hl elem ent selector that configure 200% line height. 4. Styles for the nav element selector that configure centered, bold text. Hint: Use the CSS text-align and font-weight properties 5. Styles for the footer element selector that configure background color # D2B48c, small font size (. 60em), italics, and centered text Save the file as javajam.css in the javajamcss folder. Check your syntax with the CSS vali dator (http:/ljgsaw.w3.org/css-validator). Correct and retest if necessary Task 3: The Home Page. Launch a text editor, and open the index.html file. You will modify this file to apply styles from the javajam.css external style sheet as follows 1. Add a element to associate the web page with the javajam.css external style sheet file 2. Configure the navigation area. Remove the elements which are no longer needed because you have configured bold text with CSS 3. Configure the page footer area. Remove the and elements-they are small> and elements-they no longer needed since CSS is now used to configure the text. Save the index.html file, and test it in a browser. Your page should look similar to the one shown in Figure 29 except that your page content will be left-aligned instead of centered Don't worry-you'll center your page layout in Task 5 of this case study Task 4: The Menu Page. Launch a text editor, and open the menu.html file. You will modify this file in a similar manner as you modified the home page: Add the element and configure the navigation and page footer areas. Save and test your new menu.html page. It should look similar to the one shown in Figure 30, except for the alignment. Task 5: Center Page Layout with CSS. Modify javajam.css, index.html, and menu.html to configure page content that is centered with 80% width (refer to Hands-On Practice 9 if necessary): 1. Launch a text editor, and open the javajam.css file. Add a style rule for an id named wrapper with width set to 80%, margin-right set to auto, and margin-left set to auto. 2. Launch a text editor, and open the index.html file. Add the HTML code to configure a div element assigned to the id wrapper that "wraps," or contains, the code within the body section. Save and test your index.html page in a browser and you'll notice that the page content is now centered within the browser viewport as shown in Figure 29 3. Launch a text editor, and open the menu.html file. Add the HTML code to configure a div element assigned to the id wrapper that "wraps," or contains, the code within the body section. Save and test your menu.html page in a browser and you'll notice that the page content is now centered within the browser viewport as shown in Figure 30. Experiment with modifying the javajam.css file. Change the page background color, the font family, and so on. Test your pages in a browser. Isn't it amazing how a change in a single file can affect multiple files when external style sheets are used? x Figure 30 Javalam Coffee House Menu X + New menu.html page JavaJam Coffee House Home Menu Music Jobs Coffee at JavaJam Just Java Regular house blend, decaffelnated coffee, or flavor of the day Endless Cup $3.00 Cafe au Lait House blended coffee infused into a smooth, steamed milk. Single $3.00 Double $4.00 Iced Cappuccino Sweetened espresso blended with icy-cold milk and served in a chilled glass. Single $4.75 Double $6.00 t 2018 Javadam Coffee Fish Creek Animal Clinic See Chapter 2 for an introduction to the Fish Creek Animal Clinic Case Study. Figure 35 shows a site map for the Fish Creek website. The Home page and Services page were created in Chapter 2. You will develop a new version that uses an external style sheet to configure text and color. Figure 36 depicts the wireframe page layout. You have the following tasks: 1. Create a new folder for this Fish Creek case study. 2. Create an external style sheet named fishcreek.css that configures the color and text for the Fish Creek website. 3. Modify the Home page to utilize an external style sheet to configure colors and fonts. The new Home page and color swatches are shown in Figure 31 4. Modify the Services page to be consistent with the new Home page. 5. Configure centered page layout. D: New folder javajam1 case studylunit 3javajam.css Notepad++ File Edit Search View Encoding Language Settings Tools Macro Rur ase study un Date javajam.css 3 Kbody> 3/1/ | 2 3/1/21 3 | color: #221011; 3/1/24to {background-color: #FCEBB6; 4 font-family: Verdana SLArial, sans-serif: 6 E-header {background-color: #D2B48C; textralign: centen hl (linerheight: 20081 9nav (textralign: center font weight: bold:) a0 21| 12 |footer {background-color: #D2B48C; front-size: .60emi font style: italic: textraiign: center: 15 /body> DN New folder javayam, 1 case study'unit 3menu.html-Notepad.. File Edit Search View Encoding Language Settings Tools Macro Run Plugins Window ? javajam1 case menu htni 83 nd Date 1Doctype h 3/1/23 3/lal title> s JavaJam Coffee House Mena 4 Cmeta charset-"utE-B"> 8 Kbody> cheader> 10 12 13 14 JavaJam Coffee House 1e 17 strong Ca hret " index . html">Honec/a> 19 snbep : ca hre f="mas 1 c.html">Mas10 snbsp 21 | Jaba 22 K/atrong> 23 - 25
Coffee at JavaJam26
27 Regular house blend, decaffeinated coffee, or flavor of the 9 Endless Cup $3.00
30 1 Kdd Bouse blended coffee intused into a smooth, steamed milk 32 Single $2.00 Double $4.00cdt>catrong Cafe an Laitc/strong>s/dt> bx tcstrong-Iced Cappuecino/dds presso blended with icy-cold milk and served in a chilled glass. 35 Single $4.75 Double $6.00/dds 27 cfooter? emeil sem-Copyright scopy: 2018 JavaJam Coffee House b# a hrofa"mialto:jsalassilva00760panther ahaffey.edu"a jsalass i Iva007 64 panther , chat fey. edu a> ch5y Javier Salas Si1vac/h5 /body? Hyper Tet IMarkup Language file terigth: 1,139 lines 1 45 Sel: 010 Windows (CR LF SAMSUNG ,D We foldenjavajamT case study unit 3 index.html Notepad++ File Edit Search View Encoding Language Settings Tools Macro Run Plugins Window ? > javajam1 case study > un Date index html 3 DOCTTYPE html 172 2E Chead> 3/1/2 4 5 JavaJam Coffee House 6 8 10
11 JavaJam Coffee House 12 /hl> 13 14 Ekbody 15 16 17 Home 18 |ca hr ef="menu.html">Menu 19 | Mus i c 20 | Jobs 21
Step by Step Solution
There are 3 Steps involved in it
Step: 1
Get Instant Access to Expert-Tailored Solutions
See step-by-step solutions with expert insights and AI powered tools for academic success
Step: 2
Step: 3
Ace Your Homework with AI
Get the answers you need in no time with our AI-driven, step-by-step assistance
