CSE 154

Section 1: Introductions, The Internet, and HTML

Today's Agenda

Introductions/Icebreaker

Review the Internet

HTML Basics and Validation

Creating a 404 Page

Section Goals

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

  • Know your TA and classmates a little better
  • Review basic Internet terminology and concepts
  • Be able to identify and fix common HTML validation errors
  • Be able to start designing your custom 404 page for CP0

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: Dogs!

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


                <!DOCTYPE html>
                  <html>
                    <body>
                      <title>Dogs are the Best!</title>
                      <h1>Dogs are the best!!!</h1>
                      <h2>Why dogs are <em>the best</h2></em>
                      <p>
                        <ul>
                          <li>Doggos are happy & cuddly</li>
                          <li>Doggos make people happy too</li>
                          <li>They're obviously the best</li>
                        </ul>
                      </p>
                      <h2>Did you know?</h2>
                      Doggies are the best
                      <h2>Dog pictures:</h2>
                      <img src="images/puppy-mowgli.jpg"></img>
                      <img src="images/moar-puppy-mowgli.jpg"></img>
                    </body>
                  </html>
                </!DOCTYPE>

HTML (Bad)

Exercise 2: Solutions


<!DOCTYPE html>
<html>
  <head>
    <title>Dogs are the Best!</title>
  </head>
  <body>
    <h1>Dogs are the best!!!</h1>
    <h2>Why dogs are <em>the best</em></h2>
    <ul>
      <li>Doggos are happy &amp; cuddly</li>
      <li>Doggos make people happy too</li>
      <li>They're obviously the best</li>
    </ul>
    <h2>Did you know?</h2>
    <p>Doggies are the best</p>
    <h2>Dog pictures:</h2>
    <p>
    <img src="images/puppy-mowgli.jpg" alt="cute pupper"/>
    <img src="images/moar-puppy-mowgli.jpg" alt="moar cute pupper"/>
    </p>
  </body>
</html>

HTML (Good)

Exercise 3: Creating a 404 Page

Why are 404 pages important?

  • Provide a user-friendly message that the page they are looking for is not found
  • There are other types of 300, 400, and 500 error pages, but this is one of the most important ones to implement on a website!

Examples of "bad" and "good" 404 pages

Exercise 3 (Continued)

Steps to creating a 404 page

  1. What's the website "brand"?
    • Personal profile page?
    • E-commerce website for everything related to rubber ducks?
    • World domination via paperclip-clicking?
    • Let's just start with the TA's choice
  2. Draw a mock-up! (whiteboard, paper, etc.)
    • Remember to keep text short! This is just a page to let users know they are not where they want to be, so we don't want to suggest other meaningful information - cute/creative pictures work especially well to keep users happy!
  3. Finally, use HTML tags to create the page, and embed any images/art using the <img> tag

Appendix: Creative 404 Pages

(TA's just found too many awesome ones, so here are some for your CP0 inspiration/browsing pleasure!

Here are two great articles with some more tips on how/why to design your own!