Future of the Web

Student Work

• Adam's LittleBitPlanet Page
• Ben's FPS Page
• Ted's Brawl Page
• Jonathan's Super Smash Brothers Page
• Matt's Food Page
• Nate's Duct Tape Wallets
• Riley's Camels
• Alexander and Stephen's Starcraft Guide

Final Project

• Make something awesome, something you'd be proud of.
• Use most of the following tags:
  • p
  • h1, h2, h3, h4, h5, h6
  • a
  • div
  • img
• Use most of the following css attributes:
  • color
  • background-color
  • background-image
  • border
• Ricky's Example about Sonic the Hedgehog

Day 8 (Thursday)

• Continue to work on the final project.

Day 7 (Wednesday)

• Index. What is it? How can we use it to our advantage?
• Absolute and relative file paths. A good article.
  • Absolute path (http://myserver.com/index.html)
  • Absolute server path (/index.html)
  • Relative file path (index.html, photo.jpg)
    • Drill down in directories (images/photo.jpg)
    • Look up in directories (../about.html)

    /1352432/
    /ftp/
    /public_html/
        index.html
        about.html
        images/
            dog.jpg
            logo.png
        css/
            style.css
            about.css
        js/
            general.js

Day 6 (Tuesday)

• The tools of our craft (web programming and web design) are HTML, CSS, and Javascript. HTML is content, CSS is layout and styling, and Javascript is interactive.
• External stylesheets.

• Page-layout.

    #container {
        width: 700px;
        padding: .5em;
        margin: 0 auto;
        background: #000000;
        opacity: 0.9;
    }

Adding Javascript to your page.

• Web Security

Day 5 (Monday)

• Fonts
• Colors.
  • Hexadecimal (base 16).
  • In base 10, we have ten digits (0, 1, 2, 3, 4, 5, 6, 7, 8, 9).
  • In base 16, we have sixteen digits (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F)
  • Black: 00. White: FF
  • Color setup: RGB (Red, Green, Blue)

Day 4 (Friday)

Lesson: The Dos and Don't of Web Design

• Selectors in CSS
  • Tag name.
  • ID: id="top", #top
  • Class: class="big", .big
• Block elements on a page.
  • The box model: padding, border, margin.

Day 3 (Thursday)

• Google: Simplicity, functionality.
• Continue to work on pages.

Day 2 (Wednesday)

• More tags (img, css).
• View source on pages.
• Google Layout.
  • Simple.
  • Attractive.
  • Functional.

Day 1 (Tuesday)

• The Internet is awesome.
• Think of the Internet as a series of connected nodes on a graph. Translation: It's a web!
• Let's learn some HTML!

Resources

Browsers

• Chrome
• Firefox
• Safari
• Opera

Color Websites

• Color Scheme Designer
• Adobe Kuler

Image Editing and Color Utilities

• The Gimp, for graphic manipulation (think Photoshop)
• ColorPic, for grabbing colors off the screen

HTML

CSS

/* This is a comment in CSS. Weird, huh? */
body {
    color: #111111;
    background: #ffeeee;
    background-image: url('background.jpg'); /* This is tricky. */
    background-repeat: repeat; /* repeat, no-repeat, repeat-x, repeat-y */
    background-attachment: scroll; /* scroll, fixed */
    font-family: Times New Roman;
}
p { /* Styling */ }
h1.awesome { 
    font-face: Helvetica;
    font-size: 2em;
    font-style: italic;     /* Replaces em. */
    font-weight: bold;          /* Replaces strong and b. */
    text-decoration: underline; /* Replaces u. */
}
a {
    color: green;
}

Javascript

    // This is a Javascript comment.
    alert("Hello World!");