Intro to HTML and CSS
Asst 2 requires that you understand a little about the structure and meaning of an HTML document, but the starter.html file actually includes most of the HTML you'll need.
Obtaining Asst 2 Starter Code
The Starter Code for Asst 2 consists of a Web page (HTML code). You will want to download a copy of the starter page to your own working area on your personal computer and/or mathlab, where you can modify it and view the results with a Web browser.For a Personal Computer
Go to the Asst 2 handout (which is itself a Web page) and right click on the starter link to select save-link-as to save the page to your local disk.On the mathlab Server
Copy the file from the assignment directory to your Web-space, e.g. in your cmslab home directory, execute these two commands (you can copy-paste from this handout with cntl-c in the browser window and shift-insert on the mathlab command line).cd /courses/webspace/cscb20w17/YOUR_UTORid cp /courses/webspace/cscb20w17/bretsche/assignments/a2/fresh.html .You should now be able to load the starter page using a Web browser with this URL:
https://mathlab.utsc.utoronto.ca/courses/cscb20w17/YOUR_UTORid/fresh.htmlIf you get a "permission denied" response, make sure the starter file is readable to the Web server:
chmod go+r fresh.html
The main task for step 1 is to craft a Cascading Style Sheet that will render the fresh.html document to match the image shown on the handout. Let's examine some of the key CSS concepts that you'll have to master.
div and span elements
<div> and <span> are section elements that are convenient for associating style (CSS) and behavior (JavaScript) with parts of an HTML page. We differentiate among sets of <div> and <span> elements by their "id" and/or "class" attributes. For example:<div id="first_section"> ... other elements ... </div> <span id="first_phrase"> ... other elements ... </span> <div class="left_menu"> ... other elements ... </div> <span class="conspicuous"> ... other elements ... </span>We'll see below how to associate a style with div and span section elements. In Asst 2, you'll see many div elements in the starter page. Briefly, when a style is associated with a <div> or <span> section element, that same style is "inherited" by all the elements nested within that section element.
CSS "selectors" - binding style to HTML elements
As shown in the lecture notes, the general form of a CSS style definition is:
selector { style_property: style_value; style_property: style_value; ... }
The "selector" identifies the part of an HTML element to which the enumerated style_properties are to apply. CSS provides a compact yet powerful set of selector types (summarized in the lecture slides). The "id" and "class" selectors are mentioned above, and these are the most important for Asst 2. Others that may come in handy are contextual selection and element-list selection.
Write a CSS selector for each of these element sets:
- all "h2" elements
- element with ID "intro"
- "h2" elements inside an element with ID "intro"
- "h2" elements, except those inside elements with ID "intro"
- "p" elements inside elements with id "content"
- "p" elements directly inside (child of) elements with id "content"
- elements with class "bordered"
- "h2" elements with class "bordered"
- h2
- #intro
- #intro h2
- #content h2, #footer h2
- #content p
- #content > p
- .bordered
- h2.bordered
Creating Web pages with CSS Styling
Box Model
Given the HTML shown below "boxes.html", write "boxes.css" to create the appearance show in the adjacent image, and described more precisely below the HTML.
<!DOCTYPE html>
<html>
<head>
<link href="boxes.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="outer-box">
<div id="inner-box"></div>
</div>
</body>
</html>
The outer border of the box is red, the inner border of the box is black, and the inner background color of the box is yellow.
Both the outer and inner borders have a width of 50 pixels. The yellow
portion of the box has a width and height of 200 pixels. The overall box
has a width and height of 400 pixels.
body {
margin: 0;
padding: 0;
}
#outer-box {
background-color: red;
width: 300px;
height: 300px;
padding: 50px;
}
#inner-box {
background-color: yellow;
width: 200px;
height: 200px;
border: 50px solid black;
}
or
body {
margin: 0;
padding: 0;
}
#outer-box {
background-color: black;
width: 300px;
height: 300px;
border: 50px solid red;
}
#inner-box {
background-color: yellow;
width: 200px;
height: 200px;
margin: 50px;
}
... many other alternatives possible ...
Fonts, background-color's
Create a webpage that looks like the "Stretch Longcat" shown at right. Use a mix of serif and sans-serif fonts, extra-large fonts, and clashing colors. Use the following text and image to build your page: stretch.txt stretch.jpg
Validating HTML and CSS
HTML Validation
The following HTML code has errors that cause it to fail the W3C HTML validator test. Identify and fix the errors in the code. You can copy-paste the code into the validator using its "Validate by Direct Input" tab.
<!DOCTYPE html>
<html>
<head>
</head>
<h1>Dogs are the best!!!</h1>
<body>
<h2>Why dogs are the best</h2>
<li>One, of all, they are cute.
<li>Two, they protect against meanies.
<li>Finally, CATS don't do either one or two!
<h2>Why cats are <em>NOT AS GOOD AS DOGS</h2></em>
<p>They are mean & they scratch.</p>
<h2>Dog pictures:
<img src="http://www.example.com/images/boxer.jpg">
</body>
</html>
</!DOCTYPE>
CSS Validation
The following CSS code has errors that cause it to fail the W3C CSS validator test. Identify and fix the errors in the code. As above with HTML, you can copy-paste the CSS into the validator using its "By direct input" tab.
Once your CSS passes the validation check,
add a short comment header to the CSS code,
and a new CSS rule to justify the text in paragraphs (<p> elements)
with the CSS text-align and text-justify properties.
body {
background-color: white,
foreground-color: red;
}
h1 {
font-align: "centered";
}
h2 {
font-decoration; underlined;
}
li (
font-name: Times New Roman; serif;
)
Firebug
Firebug is an add-on for the Firefox browser that lets you dynamically examine or modify the content and styling of Web pages, among many other features. After installing it, right-click any element on this handout, or on one of the above exercises, and choose Inspect Element to get started.