Beginning HTML/CSS

11 November 2015 / 4:00 - 6:00 PM / Olin 155

WICC Instructors

Haewon Hwang (hh474)

Nikita Gupta (ng354)

Jerica Huang (jh2263)

Inyoung Hong (ih235)


Before we begin...


File Directory Structure

HTML: Basics



CSS: Basics



Next time...

Before we begin...

Download Sublime

File Directory Structure

HTML Basics

  1. The Skeleton

                <!DOCTYPE html>


                ...information about your website, not visible on the page




                        ...the meat of your page that is visible



  1. Tags




                                        <h1> … </h1>

                                        <p> … </p>

                                        <img />



  1. Elements


<h1>Header 1</h1>

<a href = “”>Google</a>

<img src = “img.jpg” alt = “image” />

                        <li> List item </li>
                        <li> List item </li>
                        <li> List item </li>


                                                1. List item
                                                2. List item
                                                3. List item

                                <li> List item </li>
                                <li> List item </li>
                                <li> List item </li>


                                                List item
                                                List item
                                                List item

                                <h1>Info. Sci. Requirements</h1>
                                        <li> Core
                                        <li> Track


                                                Info. Sci. Requirements


                                                        1. INFO1300

                                                        2. MATH1110

                                                        3. CS2800

                                                        1. Classes...

  1. Absolute vs. Relative paths (<a> and <img>)

                <a href = “”> Google </a>

                <img src = “” alt = “google image” />

                        <a href = “page2.html”> Page 2 </a>

                        <img src = “img/image.jpg” alt = “image” />

  1. Wrapping

                        <a href = “”><img src = “img/image.jpg” alt =
                        “image” /></a>

                        Clicking on that image will take you to

  1. Self closing tags

                        <img … /> instead of <img … > </img>

                        <link … /> instead of <link … > </link>


                <!-- This is an HTML comment -->

  1. Formatting

CSS Basics

  1. Types
  1. External stylesheets

<link type = “text/css” rel = “stylesheet” href = “stylesheet.css” />

  1. Syntax

        selector {

                property: value ;



        p {

                color: red;


        Output: all <p> element text will be red

                /* This is a CSS comment */

                * { styling…; }




                        <h1> Header </h1>




                div div h1 { styling… ; }

  1. Styling

                height: 500px;

                width: 200px;

        text-decoration: none;

        <a> links are by default blue and underlined. This will get rid of that.

                display: block;

                        display: inline-block;

                display: inline;

                        display: none;

                        position: absolute;

                position: relative;

                position: fixed;

  1. ID vs. Class
  1. Box Model
  1. Chrome Inspector





Next time…

        Responsive design

        Javascript / JQuery (scrolling, buttons change colors, size, event handling)

        PHP (forms, basic name email text send)

        User testing / design

        Make it live!