CSE 154

Section 1: The Internet, HTML, and CSS

Today's Agenda

Introductions/Icebreaker

Review the Internet (optional)

Review Debugging

HTML and CSS Basics

Validation

Section Goals

By the end of this section, you should be able to:

  • Know your TA and classmates a little better
  • Use an inspector tool to see the HTML/CSS code on any website
  • Write HTML and CSS to produce a given screenshot output
  • Given HTML, give CSS selectors to match different tags
  • Be able to identify and fix common HTML/CSS validation errors, and understand the motivation behind writing valid HTML and CSS

Exercise 1 (The Internet): 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 these top 10, and why?
  3. What is the first website you remember visiting regularly?
  4. What is one of the WORST designed sites on the web, and why?

Exercise 2 (Debugging): Using the Debugger

Recall: How to Use Firefox Page Inspector and Chrome Web Inspector

Firefox and Chrome both have built-in web inspectors that you can use on any web page. Firefox's Page Inspector is a Firefox add-on that lets you dynamically examine or modify the content and styling of web pages. To use it, right-click any page element and selector "Inspect Element". The Chrome Web Inspector tool behaves the same way, and comes conveniently built-in with Chrome. You can launch both by hitting F12 while in your browser.

Firebug screenshot Firebug screenshot Firebug screenshot

Exercise 2: Using the Debugger (Continued)

Use Firefox 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 blue headings above the course schedule italic.
  5. Make each paragraph in the "Getting Help" section have 3em vertical space between them.
  6. Double the amount of left indentation of the numbered lists.
  7. Change your TA's photo to whatever you want, and make it 200px wide.
  8. Make the overall page's text smaller by 2pt

Exercise 3 (HTML and CSS): CSS Stands For...?

Given the following HTML, what CSS would be necessary to produce the expected output below? (You can download the HTML here and the corgi image here). 

              
              <h2>CSS: Corgis, Short &amp; Sweet</h2>

HTML

CSS: Corgis, Short & Sweet

output

Assume that the corgi image (background image of the h2 tag) is located in the directory '../../img/corgi.gif', is positioned 520px from the left edge of the h2, and has a background size of 60px x 60px in the output. The "CSS" text is green and the "Sweet" text is purple. Any text that is not green/purple has a color of #444. The "short" text is all lower-case and has a font-size of 14pt. The word "Sweet" is italicized, and both "Sweet" and "Corgis" have a cursive font type. Note: you may add <span> tags as appropriate to get the desired output.

Exercise 3: Solution

One possible solution is provided below:

              
                

                  CSS: Corgis, Short &amp; 
                  Sweet

HTML

              
h2 {
  /* background: bg-image bg-repeat bg-position/bg-size */
  background: url("../../img/corgi.gif") no-repeat 520px/60px;
  color: #444;
}

#css-abbr { color: green; }

#short, #sweet { font-family: cursive; }

#short {
  font-size: 14pt;
  text-transform: lowercase;
}

#sweet {
  color: purple; 
  font-style: italic;
}

CSS

Exercise 4 (HTML and CSS): Boxes

Given boxes.html, write boxes.css to make the appearance on the slide below.

              
              <!DOCTYPE html>
              <html>
                  <head>
                  <title>Section 4: Boxes Exercise</title>
                  <link type="text/css" href="boxes.css" rel="stylesheet" />
                </head>
                <body>
                  <div id="outer-box">
                    <div id="inner-box"></div>
                  </div>
                </body>
              </html>

HTML

Exercise 4: Expected Output

output

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.

Exercise 4: Solution A

Two possible solutions are provided below (there are more possible):

              
              body {
                margin: 0;
                padding: 0;
              }
              
              #outer-box {
                background-color: red;
                width: 300px;
                height: 300px;
                padding: 40px;
              }
              
              #inner-box {
                background-color: yellow;
                width: 200px;
                height: 200px;
                border: 50px solid black;
              }

CSS

Exercise 4: Solution B

              
              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;
              }

CSS

Exercise 5 (CSS): GOT Selectors

Directions: Use the given HTML code and CSS selector tool on the slide below to improve your skills in CSS selectors!

<!DOCTYPE html> <html> <head><title>GOT FTW</title></head> <body> <h1>Game of Thrones Page</h1> <div id="intro"> <h2>Introduction</h2> <p>Game of Thrones is the best series ever!</p> </div> <div id="content"> <div class="bordered"> <p>There are five books: A Game of Thrones, A Clash of Kings, a Storm of Swords, a Feast for Crows, and a Dance with Dragons. </p> </div> <h2>Houses</h2> <ul> <li>House Stark</li> <li>House Targaryen</li> <li>House Lannister</li> <li>House Tully</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 5: Solutions

  1. all h2 elementsh2
  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 borderedh2.bordered

Exercise 6: Dogs!

Fix all of the validation errors in dogs.html and also make it match the style guide. 

              
                <!DOCTYPE html>
                <html>
                  <head></head>
                  
Dogs are the best!!!

                  <body>
                    
Why dogs are the best

                      <li>First of all, they are cute.
                      <li>Also, they protect against meanies.
                      <li>Finally, cats SUCK!
                    
Why cats are NOT AS GOOD AS DOGS

                    
They are mean & they scratch.

                    <h2>Dog pictures:
                      
                      
                  </body>
                </html>

HTML (Bad)

Exercise 6: Solutions

              
                <!DOCTYPE html>
                <html>
                  <head>
                    <title>Dogs are the Best!</title>
                  </head>
                  <body>
                    
Dogs are the best!!!

                    
Why dogs are the best

                    
    
                      
  • Finally, cats SUCK!
    • 
                    

                    
Why cats are NOT AS GOOD AS DOGS

                    
They are mean &amp; they scratch.

                    
Dog pictures:

                    

                      cute pupper
                      moar cute pupper
                    

                  </body>
                </html>

HTML (Good)