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)


Outline

Before we begin...

        Sublime

File Directory Structure

HTML: Basics

blah

blah

CSS: Basics

        blah

        blah

Next time...


Before we begin...

Download Sublime


File Directory Structure


HTML Basics

  1. The Skeleton

                <!DOCTYPE html>

        <head>

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

        </head>

        <html>

                <body>

                        ...the meat of your page that is visible

                </body>

        </html>

  1. Tags

                        …

                        <body>

                                <div>

                                        <h1> … </h1>

                                        <p> … </p>

                                        <img />

                                </div>

                                </body>

  1. Elements

<p>Paragraph</p>

<h1>Header 1</h1>

<a href = “http://www.google.com”>Google</a>

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

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

                Output:

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

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

                Output:

                                                List item
                                                List item
                                                List item

                                <h1>Info. Sci. Requirements</h1>
                                
<ul>
                                        <li> Core
                                                <ol>
                                                        <li>INFO1300</li>
                                                        <li>MATH1110</li>
                                                        <li>CS2800</li>
                                                </ol>
                                        </li>
                                        <li> Track
                                                <ol>
                                                        <li>Classes...</li>
                                                </ol>
                                </ul>

                Output:

                                                Info. Sci. Requirements

                                                Core

                                                        1. INFO1300

                                                        2. MATH1110

                                                        3. CS2800

                                                Track
                                                        1. Classes...

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

                <a href = “google.com”> Google </a>

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

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

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

  1. Wrapping

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

                        Clicking on that image will take you to Google.com

  1. Self closing tags

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

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

  1. Comments

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

        HTML:

        <div>

                <div>

                        <h1> Header </h1>

                </div>

                </div>

                CSS:

                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

Resources

        CodePen

        Codecademy

        W3Schools

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!