Reference no: EM13760324

Purpose: You are going to learn how to create the CSS for a website to match a certain look
and feel.

Requirements: To complete this project you will write and submit 2 files: one HTML document
and one CSS document.

Create a file called lab1.html which contains the HTML of a blog page. Create another file
lab1.css which is linked from lab1.html , and which contains all the style formatting of the
document. These files must match the specification given below.

These files will be created as an ASCII file (i.e. a plain text document with a .html extension).
You may create them with any editor (notepad/wordpad/MS Word) but you must ensure that
they are text files. In other words, they should not contain anything except ASCII characters
(including HTML tags/CSS rules and content).

This time YOU MAY USE A WYSIWYG EDITOR! This editor can be used to generate your
HTML document. All style must be applied in the file lab1.css, which must be coded "by
hand" without the use of any automated CSS code-generation tool.

The purpose of this lab is to create a blog page for one of your interests. These interests may
be fictional, if you like. Be as creative as you wish, although points are not awarded for this. J
The page will contain some placeholder blog entries (i.e. all static content).
Each blog entry is dated and has a title (heading) and one or more paragraphs of body text. For
the date, use a <time> tag.

Each blog entry also has an associated image. (Link to images available on the web, so that
you need not include any image files with your lab submission. Remember...you are only
submitting 2 files...an HTML file and a CSS file!)

The page also contains a box of links to your Friends in a separate column to the left of the blog
entries. (Your friends may also be fictional if you wish. In this example, mine are.)
The page is labeled with a title and subtitle. In the example page given, the title is "Adam's
Metal Journal" and the subtitle is "A Playlist For Every Occasion.

Match the colors and layout of this example as best you can. The emphasis is on layout, so
using the colors black, lightblue, lightgreen, purple, and blue is acceptable. Note that the
background color of the entire page is blue.

Abide by the following style specifications for the page:
• There should be divs around every boxed element, allowing you to style the entire
enclosing virtual box. This includes the page title box, the friends box, each blog entry,
and the white box surrounding this content. These divs should be given appropriate
classes to match the corresponding styles.
• The <time> tag for the blog date should be enclosed within its own span which can be
individually styled.
• The title is a <h1> and the subtitle is a <h2> in the lightblue title box. These headings
should be aligned to the right of that section of the page. The subtitle should have 0.8em
font.
• The text of each blog entry should be widened so that it fills the entire width of its section
(i.e. "fully justified").
• The title of each blog entry is an <h2>.
• The images should float on the right side of a blog entry next to the surrounding text.
They must stay within the bounds of the enclosing box, and not bleed into other content.
• The white containing box should have a solid, black, 4-px thick border.
• The blog boxes should have have a solid, black, 2-px thick border.
• The title box should have a solid, black, 1-px thick border.
• The friends box should have a <h1> for "Friends" and a <ul> with hyperlink list items to
each friend. The hyperlinks should be underlined and change color to red when mousedover
(using the hover pseudoclass).
• The friends box is a left-aligned independent div. The friends box should have a solid,
black, 4-px thick border.
• Set all padding/margins to best match the example above.
• Use the universal selector (*) so that if you hover over ANY element, it is
highlighted yellow. (This is a bit trickier than it may seem...you will need to
exclude certain elements from this behavior, like the html and body tag for
instance.)

BE SURE TO USE THE UNIVERSAL SELECTOR! OTHER METHODS WILL
LOSE CREDIT.

Submission: Prior to the deadline upload your file lab1.html and lab1.css to moodle. Do
not submit any other documents!

Grade Breakdown:

10%: Submission instructions followed to the letter (1 html and 1 css file submitted, named as
stated above, with no contents except plain-text HTML and CSS respectively)

10%: CSS has proper formatting and comments where appropriate

20%: Web page renders properly in Mozilla Firefox 17+ as well as Internet Explorer 9+

30%: Web page contains all required content, visually organized and styled according to spec

30%: CSS rules and HTML tags abide by specifications given.