Project: HTML Documents & Structure

Goal

Learn how to create HTML documents from scratch with semantically meaningful structure.

Overview

This is the beginning of a semester long project to create a professional-grade personal website. In the part, we will create three web pages (a homepage or personal profile, a resume, and a course list) that demonstrate outstanding HTML document structure.

Deliverables and Due Date

Always check the schedule for due dates. Projects are always due by midnight on the scheduled due date.

Create a zip file of your project1 folder and submit via Blackboard.

Details

Create a folder called project1 and create three HTML documents as described below. Each document must include the basic HTML structure shown on page 56 of the text book and must validate as HTML5.

Page Structure

Each of the three web pages must properly use the following tags: html, head, title, meta for charset, and body

Personal Profile (30 points)

Name the file index.html. Use the following tags h1, h2, h3, p, header, footer, br and strong

Grading:

  • 15 proper document structure and validation
  • 10 using all the tags described above properly
  • 5 the overall quality of the content

Content Outline:

Your Name
Siena College Student
Major
Minors (optional)
(everything above should be inside of a header tag)


Info

	Hometown: ???
	Favorite Hobby: ???
	Favorite Part of that hobby: ??? - For example is you like to play games what is your favorite game, if you like to ski, what is your favorite mountain? (use br and strong tag to format this section)

Bio

	Short paragraph describing yourself and your background. (Elevator speech woudl be suitable here)
	
Goals

	Short paragraph describing your professional and academic goals.
	
Places You Want to Visit (at least 5)

	Use an unordered list.

	
Your name and contact information inside a footer tag

Resume (35 points)

Name the file resume.html. Use the following tags ol, li, dl, dt, dd, em, h1, h2, h3, p, header, footer, strong

Grading

  • 5 proper document structure and validation
  • 20 using all the tags described above properly
  • 10 the overall quality of the content

Content Outline:

Your Name
Siena College Student
Major
Minors (optional)
(everything above should be inside of a header tag)

Education

	Use an ordered list.  
	Each school should be a list item.  
	For each item, use strong to highlight school name and em to highlight dates

Employment History

	Use an ordered list.  
	Each job should be a list item.  
	For each item, use strong to highlight company name and em to highlight dates.
	
Skills

	Access
		I used Access extensively in my Accounting courses
	HTML
	  Earned an A in Web Design
	  
	In the skill section, use a definition list (dl).  
	Use dt to give each skill a brief name.  
	Use dd to describe each skills with a short phrase or sentence
	
Your name and contact information inside a footer tag

Course List (35 points)

Name the file courses.html. Use the following tags h1, h2, h3, ul, li, header, footer, br and strong

Grading

  • 5 proper document structure and validation
  • 15 properly nesting the lists according to the descriptions below
  • 15 the overall quality and completeness of the content

Content Outline:

Your Name
Siena College Student
Major
Minors (optional)
(everything above should be inside of a header tag)

Courses by Subject Area

	Use an unordered list for each subject area
		Use a sublist (nested unordered list) to list each course in a subject area
		
Courses by Semester

	Use an unordered list for each semester
		Use a sublist (nested unordered list) to list each course in semester
		
Your name and contact information inside a footer tag