Description
Information:
We’ve only seen a limited set of HTML5 tags in lab 1 and chapter 3. There are numerous
other tags that are useful for marking up pages. One of the tags you may find useful for this lab
is the tag. This tag is similar to a
but is used to add a hook to a part of text or a document. More specifically, the tag is an
in-line element, whereas
styling. For example, the tag can be used in the following way (using inline styling –
courtesy: http://www.w3schools.com/tags/tag_span.asp ):
My mother has blue eyes and my father has dark green
eyes.
which will produce:
You may find the tag useful in the production and formatting for your webpage.
Introductions:
1. Using your file produced in Lab 1 as a base for this lab, create a copy of your Lab1.html
file and call lab2.html. Two new images have been added to the images folder that will
be required in subsequent steps. You will find a css folder relative to your html file.
Place all your stylesheets in the css folder relative to your main html page.
2. Create an external style sheet called reset.css that removes all browser formatting for
the main HTML elements. The elements you are to reset are html, body, header,
footer, hgroup, nav, article, section, figure, figcaption, h1, h2, h3,
ul, li, body, div, p, and img. Reset the items to have the following values:
margin 0
padding 0
font-size 100%
2
vertical-align baseline
border 0
Link the style sheet and ensure that the styles have been reset.
3. Create a new stylesheet called lab2.css and include the file in your HTML file.
4. Add styles to lab2.html so that it looks similar to the results shown on the last page
of this lab. You can find additional comments on the image regarding colors, fonts and
spacing. Do not modify the markup within the body with the exception of adding
attributes for id or class (as noted in instructions).
Group your style rules together in appropriately commented sections. Make sure to use
scalable sizes (don’t use pixels for font sizes, padding or margins unless necessary).
To get you started, here is the styling for the header and footer.
header, footer{
color: white;
background-color: #daad86;
margin: 0em 4em 0.5em 4em;
}
5. Set the font family for h1, h2, h3, nav and footer to
“Trebuchet MS”, “Lucida Grande”, Tahoma, sans-serif
6. The font sizes for each heading and nav are
h1 1.5em
h2 0.75em
h3 1.125em
nav 1.125em
7. Set the font family for the body to
Georgia, Cambria, “Times New Roman”, serif;
The font size should be 100% and the background color for the body is #98dafc.
8. For links, the colors are:
Unvisited links #98dafc in bold
Visited links #daad86
Link hover background color #FFFFCC
9. The background color for the header and footer is #312c32
10. On the page, mark items 1, 2, 3 and 4 with a class attribute. Each belong to the byline
class.
11. The large image needs to have a solid black border with a 0.25em gap between image
and border. The width of the image should be 98% of container.
12. To create the gradient for the social links, use the single pixel wide image graygradient.png) (provided). This image is 50px tall. The element requires rounded corners
(http://www.w3schools.com/css/css3_borders.asp ). It is assumed that this image is
located in the images/ folder relative to your html file.
13. Item 5 combines text and graphic elements, centered vertically in the gray box. The icon
image is glyphicons-152-new-window.png (provided). It is assumed that this image is
located in the images/ folder relative to your html file. To align the elements, you can
3
use in inline-block (http://www.w3schools.com/css/css_inline-block.asp) that allows
you to create an array/grid of boxes to hold items. You will want to have one box to hold
glyphicons-152-new-window.png, one box to hold the text “Share:” (which is 70% of
parent text size and a third box to hold the social icons. You can use the
tag with the appropriate attribute as an inline element for formatting
these elements. You will need to experiment with the height, alignment and padding
to correctly align the elements. The elements are to be aligned on the centerline of
the container (as shown).
14. Item 6 is a solid line above the comment bylines and item 7 being a dotted line below
the comments (which can be done with a border).
15. Pay particular attention to the spacing between the byline and comments.
While an exact match is not required, attempt to reproduce as close as possible noting the
evaluation criteria.
Evaluation Criteria:
1 point Reset.css
4 points Visual layout (colors and layout)
3 point Links (color/behavior)
5 points Social icons and gradient
2 points Fonts
2 point Byline formatting and spacing
2 points Main image w/ border
1 point Dotted lines
4
Testing:
One of the major challenges is cross-browser testing when developing sites. While simple
testing can be done by viewing the page on different browsers (seriously, give it a try) it is hard
to test all possible OS and browser configurations, especially with local files. There are
freemium and trial browser testers that will allow for local testing such as BrowserStack.com
and CrossBrowserTesting.com, but the trial period is limited. You are free to see how your page
renders with these tools.
The Page Format:
Your HTML page should appear as follows. Notes regarding specific formatting are on the sides.
1. byline class
2. byline class
(figure caption)
5. Text is 70% of
parent size.
Vertically aligned.
6. Solid
lines above
byline.
7. Dotted
lines below
comments.
Colour:
#98DAFC
Colour:
#312C32
Colour:
#DAAD86
Repeated
1 pixel
gradient
3 & 4. byline
class
