Project One Solution

Project One

    • 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.





















CIS 4004: Project One    Page 2    © Dr. Mark Llewellyn
HTML For Project One

    • 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.



CIS 4004: Project One    Page 3    © Dr. Mark Llewellyn
HTML For Project One

    • The site map for The Lighthouse Bistro is shown below:


Home Page




Our Menu
Entertainment
Reservations

Schedule










    • 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”.











CIS 4004: Project One    Page 4    © Dr. Mark Llewellyn
HTML For Project One

    • The wireframe for each of the two pages to be developed in this project is shown below:

header

navigation





content (main)





footer




    • Create a folder named ProjectOne and place both the index.html and menu.html files for this project inside this folder.



CIS 4004: Project One    Page 5    © Dr. Mark Llewellyn
HTML For Project One

    • 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.





















CIS 4004: Project One    Page 6    © Dr. Mark Llewellyn
The index/home page




Wireframe header

Wireframe navigation











Wireframe (main content)

















Wireframe footer




CIS 4004: Project One




Page 7




© Dr. Mark Llewellyn
h1


























div

Navigation is spaced using   (not  a list). Make links act correctly.


h3





p

ul

Copyright symbol is ©






The index/home page


CIS 4004: Project One    Page 8    © Dr. Mark Llewellyn
The menu page















































CIS 4004: Project One    Page 9    © Dr. Mark Llewellyn
Project One

    • 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).
















CIS 4004: Project One    Page 10    © Dr. Mark Llewellyn
What To Turn In



    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)















CIS 4004: Project One    Page 11    © Dr. Mark Llewellyn











































CIS 4004: Project One    Page 12    © Dr. Mark Llewellyn











































CIS 4004: Project One    Page 13    © Dr. Mark Llewellyn