Description
• This assignment has three main objectives:
(1) To give you some practice marking up text with HTML5
elements.
(2) To make the first steps in developing a complete website.
(3) To begin applying the four principles of visual design to a
website.
Project One
CIS 4004: Project One Page 3 © Dr. Mark Llewellyn
• The owner of The Lighthouse Bistro, located in Mackinac City,
Michigan, has hired you create a website for the restaurant.
• The bistro offers a variety of specialty coffees and teas as well
as various dining options and entertainment for visitors to the tip
of Michigan’s northern peninsula .
• The target audience for The Lighthouse Bistro is both locals and
visitors (vacationers) to the area who enjoy nature and outdoor
activities.
• The owner would like the website to emphasize the uniqueness
of the location and the specialty coffees, teas, and cuisine.
• They would like the website to include a home page, a page to
describe the menu, an entertainment schedule page, and a page
for reserving dining/concerts at the bistro.
HTML For Project One
CIS 4004: Project One Page 4 © Dr. Mark Llewellyn
• The site map for The Lighthouse Bistro is shown below:
• For this assignment you will begin to create the website by
including only two different pages.
– An index/home page titled “index”.
– A page titled “menu”.
HTML For Project One
Home Page
Our Menu Entertainment
Schedule Reservations
CIS 4004: Project One Page 5 © Dr. Mark Llewellyn
• The wireframe for each of the two pages to be developed in
this project is shown below:
• Create a folder named ProjectOne and place both the
index.html and menu.html files for this project inside
this folder.
HTML For Project One
header
navigation
content (main)
footer
CIS 4004: Project One Page 6 © Dr. Mark Llewellyn
• The content to be included in these two pages is illustrated on
the following two slides.
• The layout should conform to the wireframe as shown on page
5.
• Use proper HTML5 semantic elements as shown on the
following two pages.
• Be sure to properly indent your markup.
HTML For Project One
CIS 4004: Project One Page 7 © Dr. Mark Llewellyn
Wireframe header
Wireframe navigation
Wireframe (main content)
Wireframe footer
The index/home page
CIS 4004: Project One Page 8 © Dr. Mark Llewellyn
The index/home page
h1
Navigation is spaced using (not
a list). Make links act correctly.
h3
Copyright symbol is ©
p
div
ul
CIS 4004: Project One Page 9 © Dr. Mark Llewellyn
The menu page
CIS 4004: Project One Page 10 © Dr. Mark Llewellyn
• This first project contains no CSS, only markup using
HTML5.
• Both of your HTML files must pass validation. Use the
validator provided by the W3C organization listed below:
– http://validator.w3.org/
• The output from this validator is illustrated on page 12.
• An alternate HTML validator is available at:
https://html5.validator.nu (see last page for an example).
Project One
CIS 4004: Project One Page 11 © Dr. Mark Llewellyn
The deliverables for this assignment are to be submitted via
WebCourses no later than 11:59pm Sunday September 9, 2018 are:
1. Two valid HTML5 documents containing the semantically
correct markup for the index/home and menu pages. (70 pts –
35pts for each page). Be sure your markup is properly
indented.
2. A document containing screen captures for both HTML5
validations (both passing!) (10 pts – 5pts for each valid page)
3. A screen shot of a browser rendering of the home page and the
menu page. (20 pts – 10pts for each screen shot)
What To Turn In
CIS 4004: Project One Page 12 © Dr. Mark Llewellyn
CIS 4004: Project One Page 13 © Dr. Mark Llewellyn