HTML & CSS
Purpose
The purpose of this assignment is to develop a short website using the html codes that we have learned to date, integrate CSS into the site and then validate the code through a validator. You will then upload the html documents and CSS. Make sure that you fully understand CSS before starting this assignment so that you can add style.css to each of your html pages. Otherwise, you will have to go back into your html documents and add the style.css back into them after you have finished.
Assignment Guidelines
Personal Webpage for Fictional Character (HTML Only Version)
1. Your first task is to create a personal website for a fictional character using HTML:
a. Choose one of the following:
i. Leslie Knope – Parks & Rec
ii. Pam and/or Jim – The Office
iii. Ross -- Friends
iv. George -- Seinfeld
v. Frank -- Shameless
vi. The Walking Dead Character
vii. Peppa or George from Peppa Pig
viii. Jon Snow – Game of Thrones
ix. Marcia Brady – The Brady Bunch
x. Molly – Mike & Molly
xi. Major Nelson – I Dream of Jeannie
xii. Leonard and Penny – The Big Bang Theory
b. You many use any of the tags, elements, codes you have learned to date. The website should contain the following items:
ØØ Three pages:
· 1) About Me (save as about.html) – this page should provide an introduction about your character. Please include at least one image on the first page
· 2) Show/Series (save as shows.html) – this page should be dedicated to the shows and/or series the character has appeared and starred in
· 3) History of Character: You may choose the third page based on your character (name accordingly – one word, no space, capitalization or characters .html). This information can include the historical
perspective of how the character grew throughout the series, how the character relates to others in the series, along with fun facts.
ØØ Use the
heading tag on each page
ØØ Use
heading tag as a subheading on at least one page
ØØ Include a few paragraphs about your character on the first page so we understand who the character is (background information).
ØØ Include an ordered list or unordered list ØØ All three pages must link together ØØ Include at least 3 external links
ØØ Include at least 2 images with alternative text ØØ Use
and
appropriately
ØØ Include italics, bold, and underline text ØØ Include your email address on each page ØØ CSS page (save as style.css)
· Your style rules should specify font family and font size for paragraph and heading text.
· Your style rules should specify link states including link, visited, focus, hover, and active.
· You should also specify a background color for all of your pages.
· Add tags and setup your style sheet so that every time the name of your character appears, it is in a color and is in bold.
You can find a list of HTML elements commonly considered semantic HTML her
ØØ http://www.web-source.net/html_codes_chart.htm#.UyeaGIEw8Ug
Feel free to add in some additional items to your website if you would like, but there is a more open-ended opportunity to be creative later in the assignment.
CSS
CSS exists to style your HTML — to present your content. The language of Cascading Style Sheets is somewhat different to HTML but it remains simple and straightforward.
To complete this assignment, make sure that you have completed the CSS tutorials in HTML Dog:
Beginning, Intermediate, and Advanced: http://htmldog.com/guides/css/
Add a CSS style sheet to your small website that you just created (style.css), and include the following elements;
• Consistent background with color and size element
• Add font family, font size, font weight
• Choose one text decoration
• Add to one heading tag: margins and padding of your choice
• Add a border element
• Add Span and Div html elements
• Add Meta tags
• You may use any additional elements you see fit. You are only required to use elements through the Beginner CSS tutorial
Validation
Validator is a software program that can check your web pages against the web standards. When using a validator to check HTML, XHTML or CSS documents, the validator returns a list of errors found, according to your chosen standard.
Make sure you make it a habit to validate all your web pages before publishing.
Make sure your files validate at:
üü http://validator.w3.org/ (for HTML)
üü http://jigsaw.w3.org/css-validator (for CSS)
Your files should work on both the latest version of Mozilla Firefox and Google Chrome.
Make sure your webpage validates (see validator above).
Beyond these requirements, feel free to include additional CSS to design your pages as you like! Just be sure to test them locally using Firefox, Chrome, or Safari as you go along.