Description
Objective
To get some experience using basic HTML and CSS.
Description
Create a personal web site for a Lehigh student – it could be yourself or a fictional student you have created
(yes, humor is definitely allowed).
Instructions
1. Create a NetBeans project of type HTML/JavaScript : HTML 5 Application. Make the project name
PersonalWebSite-
libraries. Click Finish.
2. NetBeans will create a skeleton web page in the file index.html. This will be the main page of your web
site. Please put your name, etc., in an html comment at the top of the page.
3. Make sure your skeleton html page is complete with head and body elements.
4. Put a title element in the head with the title of your site.
5. Also put a link element in the head that links in a stylesheet named styles.css. Unless otherwise noted,
all your styles will go in the styles.css file.
6. Create a div element in the body and give it an id attribute of “container”. All the content of your page
will go in this div.
7. Style your web page to be exactly 800 pixels wide.
8. Create 4 divs for a banner, 2 columns, and a footer.
9. The banner should have it’s background set to an appropriate color (or, if you’re feeling ambitious, set
a background image) and the name of the person in an appropriately sized (ie. large) font. Any other
text in the banner is optional.
10. The left column should take up about 2/3 the width of the page and have 4 level 1 headers introducing
3 sections:
a) Bio: A brief biography of the person, divided into paragraphs with
elements. Use level 2
headers to divide into Early Life, Life at Lehigh, etc.
b) Favorites: An unordered list of the person’s favorites, styled appropriately.
c) Courses: An unordered list of current courses.
d) Music: A table with two columns listing (a few) songs from the person’s music collection. Column 1
lists the song and column 2 lists the artist. The song name should be a link to a site where the
song can be purchased.
11. The right column should have a level 1 header “Fun Facts” with an ordered list of interesting facts
about the person.
12. Include a copyright notice in the footer (and anything else you would like to put), centered. Use the
proper entity for the copyright symbol. Use a different background color for the footer.
13. To submit your assignment, ZIP it up the NetBeans project and upload the zipped file to Coursesite.
