Create the css for a website

Assignment Help Programming Languages
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.

Reference no: EM13760324

Questions Cloud

Trends toward western-style consumption : China and India have demonstrated trends toward Western-style consumption over the last decade. Given the emphasis on the youth market in the US over the last 60 years (since the baby boom), what can you suggest for marketers in these youth-orient..
Audit professional organizations : Visit a Web site for one of the audit professional organizations.
Breadth and depth of knowledge : The breadth and depth of knowledge required to audit IT and systems are extensive and may include
How do children in us fare in terms of critical issues : How do children in the United States fare in terms of the critical issues of poor health and hygiene, poverty, and malnutrition? Why is supporting each of these basic needs such a difficult challenge
Create the css for a website : Create a file called lab1.html which contains the HTML of a blog page. Create another filelab1.css which is linked from lab1.html , and which contains all the style formatting of thedocument. These files must match the specification given below.
Electro-magnetic force in newtons : The topic of this assignment was chosen so that you won't allow mathematical equations and scientific notation to intimidate you. No knowledge is required to complete the assignment beyond knowing how to perform mathematical operations within a fo..
The future of public health : This course has presented the various roles of the public and community health nurse.
Collective bargaining to both management and employees : Show the level of education is graduate level not 1st grade level - do not repeat the same sentences or paragraphs in other parts within the project.
Write an essay on american literature before the civil war : Write an essay on American Literature before the Civil War. Based on the readings from weeks one and two, discuss the images of America the European writers constructed to promote colonization and settlement.

Reviews

Write a Review

 

Programming Languages Questions & Answers

  Create a project in xcode

Create a new project in XCode using the Mac OS X/Command Line Tool template

  Program which accepts candy name-price per pound

A program which accepts the candy name (for example, "chocolate-covered cherries"), price per pound, and number of pounds sol in average month, and displays item's data only if it is best-selling item.

  Program to calculate area of two-dimensional shape

Implement the Shape hierarchy shown in following figure. Each TwoDimensionalShape should contain method getArea to calculate the area of the two-dimensional shape.

  Program-compute monthly interest-print next balance for sav

Set annual interest rate to 4% then compute monthly interest and print next balance for both savers. Then set annual interest rate 5%. Compute next month interest and print next balance for both savers.

  Develop two packages to accept information

Develop two packages, package1 comprises two classes manager and clerk.both classes having method to accept corresponding information.packages.

  Explain how array simplifies program development

Describe the requirement for complex data structures and how they are utilized. Describe the design and application of arrays and how array simplifies program development.

  Probability line is executed in nth iteration of for loop

What is the probability that line is executed during the nth iteration of the for loop? What is the exact expected number of executions of line?

  File processing commands worksheet

File Processing Commands Worksheet. What UID and PID have the highest amount of physical memory a process has used and is not swapped out? Show all processes and full output.

  Program application to check donation amount

Additionally, program application to check that donation amount and number of donations are positive numbers. If either donation amount or number of donations is not positive value.

  Display the gross earnings-tax payable using program

Print the gross earnings, tax payable, medical levy and net earnings for each employee. At the end of report, print total gross earnings, total tax, total medical levy and total net earnings.

  Javascript function for cookie added to user-s computer

JavaScript function has verified that all the required fields have been filled, cookie is added to user's computer. If same user attempts to fill out form second time.

  Report on a seminar or webinar

A report must be written regarding a seminar or webinar. Describe the key points of the seminar or webinar.

Free Assignment Quote

Assured A++ Grade

Get guaranteed satisfaction & time on delivery in every assignment order you paid with us! We ensure premium quality solution document along with free turntin report!

All rights reserved! Copyrights ©2019-2020 ExpertsMind IT Educational Pvt Ltd