WIF2003 Tutorial

Tutorial 01: Create a website for JavaJam Coffee House using HTML

Background of JavaJam Coffee House:

JavaJam Coffee House is a gourmet coffee shop that serves snacks, coffee, tea, and soft
drinks. Local folk music performances and poetry readings are held a few nights during the
week. The owner of the JavaJam Coffee House would like a web developer to create a
website to display his services and provide a calendar for the performances.

A site map of the JavaJam Coffee House is shown in Figure 1. The site map describes the
architecture of the website, which consists of a “Home” page with three main content pages:
“Menu”, “Music”, and “Jobs”.

Home Page

Menu Music Jobs

Figure 1: JavaJam site map

WIF2003 Tutorial

Task 1: Create a folder

Create a folder on your hard drive or portable storage device (USB 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 show in Figure 2.

Figure 2 JavaJam index.html

Launch a text editor, and create a web page with the following specifications:
1. Name the page as “index.html” and save it in the “javajam” folder.
2. HTML Head - Web Page Title
a. Type a page title for the new page using <title> and </title> tags. Use a
descriptive page title. The company name is a good choice for a business
website.
3. HTML Body - Wireframe Header
a. Configure the main content within a <header> element.
b. Use <h1> for the JavaJam Coffeee House logo.
4. HTML Body - Wireframe Navigation
WIF2003 Tutorial

a. place the navigation links (Home Menu Music Jobs) within a <nav> element.
Using code anchor tags to create the hyperlinks and add extra blank spaces
between the hyperlinks with the &nbsp; special character.
• “Home” links to index.html
• “Menu” links to menu.html
• “Music” links to music.html
• Jobs” links to jobs.html

5. HTML Body - Wireframe Main Content.

a. Configure the main content within a <main> element.
b. Use <h2> to add a heading: “Relax at JavaJam”
c. Configure the following content in a unordered list:
• Specialty Coffee and Tea
• Bagels, Muffins, and Organic Snacks
• Music and Poetry Readings
• Open Mic Night
d. 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.
54321 Route 42
Ellison Bay, WI 54210
1-888-555-5555
6. HTML Body - Wireframe Footer.
a. Configure the following copyright and email link information within a <footer>
element. Format it with small text size and italics font style.
Copyright © 2021 JavaJam Coffee House
[email protected]
WIF2003 Tutorial

Task 3: The Menu page

Create the Menu page shown in Figure 3. 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 index.html page as a starting point.

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.

Figure 3 JavaJam menu.html

1. HTML Head - Web Page Title

a. Modify the page title for the new page using <title> and </title> tags to the
following: JavaJam House Menu
2. HTML Body - Wireframe Main Content
a. Modify <h2> to “Coffee at JavaJam”
b. Delete the Home page content unordered list and contact information.
c. Use description list to add the menu content to the page. Use the <dt> tag to
contain each menu item name. Configure the menu name to have strong
WIF2003 Tutorial

important and display in bold font weight with the <strong> tag. Use the <dd>
tag to contain the menu item description. The menu item names and
descriptions are as follows:
Just Java
Regular house blend, decaffeinated coffee, or flavor of the day.
Endless Cup $2.00
Cafe au Lait
House blended coffee infused into a smooth, steamed milk.
Single $2.00 Double $3.00
Iced Cappuccino
Sweetened espresso blended with icy-cold milk and served in a chilled glass.
Single $4.75 Double $5.75

3. Test the hyperlink from the menu.html page to index.html. Test the hyperlink from the
index.html page to menu.html. If you links do not work, review your work, paying close
attention to these details:
• Verify that you saved the pages with the correct names in the correct folder.
• Verify your spelling of the page names in the anchor tags.
Test again after you make changes.
WIF2003 Tutorial

Task 4: The Music page

Create the Music page shown in Figure 4.
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 “music.html” in the javajam folder. Now you are ready
to edit the page.

Figure 4 JavaJam music.html

1. HTML Head - Web Page Title

a. Modify the page title for the new page using <title> and </title> tags to the
following: JavaJam House Music
2. HTML Body - Wireframe Main Content
a. Modify <h2> to “Music at JavaJam”
b. Delete the Home page content unordered list and contact information.
c. Modify the content:
• Use paragraph to write the following text (hint: use the special character &rsquo;
for the apostrophe character):
The first Friday night each month at JavaJam is a special night. Join us from 8 pm to 11
pm for some music you won't want to miss!
WIF2003 Tutorial

January Music Performance

• Configure an h4 element with the following text: January
• Code and opening paragraph tag. Assign the paragraph to the class name
details.
• Configure the melaniethumb.jpg as an image link to melanie.jpg. Code
appropriate attributes on the <img> tag.
• Configure the following text within the paragraph after the image:
Melanie Morris entertains with her melodic folk style.

February Music Performance

• Configure an h4 element with the following text: February
• Code and opening paragraph tag. Assign the paragraph to the class name
details.
• Configure the gregthumb.jpg as an image link to greg.jpg. Code appropriate
attributes on the <img> tag.
• Configure the following text within the paragraph after the image:
Tahoe Greg is back from his tour. New songs. New stories.

3. Test the hyperlink from the music.html page to index.html. Test the hyperlink from the
index.html page to music.html. If you links do not work, review your work, paying close
attention to these details:
• Verify that you saved the pages with the correct names in the correct folder.
• Verify your spelling of the page names in the anchor tags.
Test again after you make changes.
WIF2003 Tutorial

Task 5: The Jobs page

Create the Music page shown in Figure 4.
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 “jobs.html” in the javajam folder. Now you are ready
to edit the page.

Figure 4 JavaJam music.html

1. HTML Head - Web Page Title
a. Modify the page title for the new page using <title> and </title> tags to the
following: JavaJam House Jobs
2. HTML Body - Wireframe Main Content
a. Modify <h2> to “Jobs at JavaJam”
b. Delete the Home page content unordered list and contact information.
c. Use paragraph to write the following text:
Want to work at JavaJam? Fill out the form below to start your application. Required
fields are marked with an asterisk (*).
d. Modify the content - Create a HTML form for job applications
• Add the form attributes:
method="post", action=http://webdevbasics.net/scripts/javajam8.php
• Add the following labels and input types:
WIF2003 Tutorial

*Name – using text input

*E-mail – using email input
*Experience – using textarea input
Select job position – using dropdown list
Preferred Interview Data and Time – using datetime input
Upload your photo – using file input
• Add a submit button with the name “Apply Now”

3. Test the hyperlink from the jobs.html page to index.html. Test the hyperlink from the
index.html page to jobs.html. If you links do not work, review your work, paying close
attention to these details:
• Verify that you saved the pages with the correct names in the correct folder.
• Verify your spelling of the page names in the anchor tags.
Test again after you make changes.