Project1: 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.
Due Date
Always check the schedule for due dates. Projects are always due by midnight on the scheduled due date.
Page Structure
Each of the three web pages must properly use the following tags:
html
,
head
,
title
,
meta
for charset, and
body
Deliverables
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.
Create a zip file of your project1 folder and submit via Blackboard.
Personal Profile (30 points)
Details
Name the file index.html. Use the following tags
h1
,
h2
,
h3
,
p
,
header
,
footer
,
br
and
strong
Grading
- 15 pts: proper document structure and validation
- 10 pts: using all the tags described above properly
- 5 pts: 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 Sport: ??? Favorite Team: ??? (use br and strong tag to format this section) Bio Short paragraph describing yourself and your background. 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)
Details
Name the file resume.html. Use the following tags
ol
,
li
,
dl
,
dt
,
dd
,
em
,
h2
,
h3
,
p
,
header
,
footer
,
strong
Grading
- 5 pts: proper document structure and validation
- 20 pts: using all the tags described above properly
- 10 pts: 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)
Details
Name the file courses.html. Use the following tags
h1
,
h2
,
h3
,
ul
,
li
,
header
,
footer
,
br
and
strong
Grading
- 5 pts: proper document structure and validation
- 15 pts: properly nesting the lists according to the descriptions below
- 15 pts: 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