University of Washington CSE 154

Section 1: Internet and WWW

Except where otherwise noted, the contents of this document are Copyright © Marty Stepp, Jessica Miller, and Victoria Kirst. All rights reserved. Any redistribution, reproduction, transmission, or storage of part or all of the contents in any form is prohibited without the author's expressed written permission.

Valid HTML5 Valid CSS

Exercise : Ballparking

  1. What do you think are the top 10 most visited sites on the web today? How would you find out what they actually are?
  2. What is one of your favorite web sites not listed among those top 10, and why?
  3. What is the first website that you remember visiting regularly?
  4. What is one of the WORST designed sites on the web, and why?

Exercise : Firebug/Chrome Web Inspector

Firebug is a Firefox add-on that lets you dynamically examine or modify the content and styling of web pages. After installing it, right-click an element and choose Inspect Element with Firebug. The Chrome Web Inspector tool behaves in a very similar way. You can launch both by hitting F12 while in your browser.

Firebug Firebug Firebug

Exercise activities 1

Use Firebug or Chrome to inspect the course web site:

  1. What is the color being used for links?
  2. How many px of margin are used on the right side of general page content?
  3. What is the URL of the "CSE" image in the top-left corner of the page? Change it to point to an image of your choice, such as this one.
  4. Make all headings in the top link bar area italic.
  5. Make the "Announcements" bullets have 3em vertical space between them.
  6. Double the left indentation of the bullets in the "Announcements" list.

Exercise activities 2

  1. Make the overall page's text size smaller by 2pt.
  2. Make the "Syllabus" link green (without affecting any other links).
  3. Delete the two W3C validator images from the page.
  4. Insert a new "Announcements" bullet with any text you like.
  5. Change the instructor's contact information to have the following styles:
    • A green dotted-line border, 2px thick.
    • A light orange background color (lighter than the "orange" HTML color).
    • 1em of spacing inside the element on all sides (should be orange).

Exercise : LotR Selectors (by Alex Miller)

<!DOCTYPE html> <html> <head><title>LotR FTW</title></head> <body> <h1>Lord of the Rings Fan Page</h1> <div id="intro"> <h2>Introduction</h2> <p>LotR is the best movie ever!</p> </div> <div id="content"> <div class="bordered"> <p>There are three volumes: FotR, T2T, and RotK.</p> </div> <h2>Characters</h2> <ul> <li>Bilbo</li> <li>Frodo</li> <li>Gandalf</li> </ul> <h2>Plot</h2> <p>It's too long to describe. Just read the books!</p> </div> <div id="footer"> <h2 class="bordered">Thank you!</h2> </div> </body> </html>
Write a CSS selector here for:
  1. all h2 elements
  2. element with ID intro
  3. h2 elements inside intro
  4. h2 elements, except those inside intro
  5. p elements inside content
  6. p elements directly inside content
  7. elements with class bordered
  8. h2 elements with class bordered

Exercise solution

  1. All h2 elements: h2
  2. element with ID intro: #intro
  3. h2 elements inside intro: #intro h2
  4. h2 elements, except those inside intro: #content h2, #footer h2
  5. p elements inside content: #content p
  6. p elements directly inside content: #content > p
  7. elements with class bordered: .bordered
  8. h2 elements with class bordered: h2.bordered

Exercise : Lex (by Morgan Doocy)

Given the following HTML, what CSS would be necessary to produce the expected output below? (Assume the red line is 3px thick, and the default font is used for the first word. The second word is in Comic Sans MS. The larger letters are 2em and green in color.) Are any HTML changes needed? You can download the html file here.

HTML 
<h1>Web Programming</h1>

Web Programming

Exercise solution

First, wrap the text inside the <h1> in an inline tag. The <em> tag is one possible choice: 

<h1>
	<em class="term">
		Web Programming
	</em>
<h1>

You then need to add span tags to the first letter of each word, as well as the whole second word to be able to target them. 

<h1>
	<em class="term">
		<span class="big">W</span>eb 
		<span id="font"><span class="big">p</span>rogramming</span>
	</em>
<h1>

Exercise solution

Then add the following CSS rules: 

h1 {
	text-align: center;
	background-color: #cccccc;
}

em.term {
	border-bottom: dashed 3px red;
}

.big {
	font-size: 2em;
	color: green;
}

#font {
	font-family: "Comic Sans MS", fantasty;
}