html css - massachusetts institute of technology6.148. · pdf file 2017-01-10 ·...

Click here to load reader

Post on 24-May-2020

0 views

Category:

Documents

0 download

Embed Size (px)

TRANSCRIPT

  • HTML & CSS

    6.148 Yolanda Zhou

    go.6148.io/uiux

  • HTML Hypertext Markup Language

    The language your web browser uses to describe the content and structure on web pages

  • Title!

    Heading!

    Paragraph!

    hello.html

  • Title!

    Heading!

    Paragraph!

    hello.html

  • Title!

    Heading!

    Paragraph!

    hello.html

  • Title!

    Heading!

    Paragraph!

    hello.html

  • HTML Tags

    content goes here

    Opening tag

    Closing tag

  • Title!

    Heading!

    Paragraph!

    hello.html

  • HTML Tags

  • Title!

    Heading!

    Paragraph!

    hello.html

  • Title!

    Heading!

    Paragraph!

    hello.html

  • Title!

    Heading!

    Paragraph!

    hello.html

  • Title!

    Heading!

    Paragraph!

    hello.html

  • Title!

    Heading!

    Paragraph!

    hello.html

  • Title!

    Heading!

    Paragraph!

    hello.html

  • Title!

    Heading!

    Paragraph!

    hello.html

  • Basic HTML Elements Root of HTML Document Info about Document Document Body Header tags Paragraph tags

    , , , …

  • Inserting Links Link

    Link to 6.148!

  • HTML Attributes

    content goes here

    Opening tag

    Closing tag

    attribute value

  • Inserting Links

    Link to 6.148!

    Link to 6.148!

  • Inserting Links

    Link to home!

    Link to home!

  • Inserting Images Image

  • Inserting Images

  • Inserting Images

  • Inserting Images

    app/ hello.html pusheen.gif

  • Inserting Images

    app/ hello.html images/

    pusheen.gif

  • Lists Ordered List (1, 2, 3…) Unordered List (bullets)

    List Item

  • Title!

    hello.html

  • Title!

    Item 1

    hello.html

    • Item 1

  • Title!

    Item 1 Item 2

    hello.html

    • Item 1 • Item 2

  • div & span Block Section in Document Inline Section in Document

  • Title!

    Heading!

    Paragraph!

    hello.html

  • Title!

    Heading!

    Paragraph!

    hello.html

  • Title!

    Heading!

    Paragraph!

    hello.html

  • CSS Cascading Style Sheets

    The rules that tell your web browser how stuff looks

  • p { color: red; font-family: Arial; font-size: 24pt;

    }

  • p { color: red; font-family: Arial; font-size: 24pt;

    }

    selector

  • p { color: red; font-family: Arial; font-size: 24pt;

    }

    selector

    property

  • p { color: red; font-family: Arial; font-size: 24pt;

    }

    selector

    property value

  • Title!

    Heading!

    Paragraph!

    hello.html

    Heading Paragraph!

  • Heading!

    Paragraph!

    hello.html Heading Paragraph!

  • Heading Paragraph!

    Info

    Heading!

    Paragraph!

    Info

    hello.html

  • Heading Paragraph!

    Info

    Heading!

    Paragraph!

    Info

    hello.html

    p { color: red; font-family: Arial; font-size: 24pt;

    }

    style.css

  • Heading Paragraph!

    Info

    Heading!

    Paragraph!

    Info

    hello.html

    p { color: red; font-family: Arial; font-size: 24pt;

    }

    style.css

  • Heading Paragraph!

    Info

    .info { color: red; font-family: Arial; font-size: 24pt;

    }

    style.css

    Heading!

    Paragraph!

    Info

    hello.html

  • Heading Paragraph!

    Info

    #unique { color: red; font-family: Arial; font-size: 24pt;

    }

    style.css

    Heading!

    Paragraph!

    Info

    hello.html

  • Class Can use the same class on multiple elements Can use multiple classes on the same element

    Class vs ID ID Each element can have only one ID Each page can have only one element with that ID

  • Combining HTML & CSS

  • Title!

    Heading!

    Paragraph!

    hello.html

  • Title!

    Heading!

    Paragraph!

    hello.html

  • CSS Workshop

    Workshop: go.6148.io/css Slides: go.6148.io/html

  • Exercise 1 Open packing_list.html in your text editor

    Add an unordered list with some items you might need to embark on your journey of finding Sonde.

  • CSS Time!! Don’t edit your HTML file anymore.

    Open styles.css.

  • CSS Time!! Don’t edit your HTML file anymore.

    Open styles.css.

  • Exercise 2 CSS Warmup:

    Change the color of the packing list to your favorite color

  • Exercise 2 CSS Warmup:

    Change the color of the packing list to your favorite color

    Change it to #777

  • display The display property specifies how an element is displayed.

    display: none

    display: block

    display: inline

    display: inline-block

  • display: block Block level elements always start on a new line and take the full width available by default. You can set width and height of block elements.

    Examples of block level elements:

  • style.css

    Heading!

    Paragraph!

    hello.html

    Heading! Paragraph!

  • h1 { background-color: gray;

    }

    p { background-color: #ECCEA1;

    }

    style.css

    Heading!

    Paragraph!

    hello.html

    Heading! Paragraph!

  • display: inline Inline elements do not start on a new line and only takes up as much width as necessary

    Examples of inline elements:

  • display: inline-block Inline-block elements do not start on a new line but also have a width and a height

    img { display: inline-block;

    }

  • Exercise 3 Change the display of the list items to be block and then inline-block.

  • Exercise 4 Give the area surrounding the list items a border and a background color. Try making it red, or dashed, or very thick.

    div { border: solid black 1px;

    } style color width

  • Exercise 4 Give the area surrounding the list items a border and a background color. Try making it red, or dashed, or very thick.

    Google how to round the corners of an element and give it a background color.

    Make a solid border 1px thick with color #e7e7e7. Make the background color #f8f8f8 and the corners radius 4px.

  • Exercise 5 When the user hovers over a list item, change the color of the background and the text.

  • Exercise 5 When the user hovers over a list item, change the color of the background and the text.

    The color of the background should become #e7e7e7 and the color of the text should become #555.

  • Exercise 6 Make the area around the list areas bigger, keeping the background color on hover like this:

  • CSS Box Model MARGIN

    BORDER

    PADDING

    CONTENT

  • Exercise 6 Make the area around the list areas bigger, keeping the background color on hover filling up the entire menu.

    MARGIN BORDER

    PADDING

    CONTENT

  • Exercise 7 Get rid of the extra space at the end of the menu and then center the menu in the window.

  • Position, float, z-index

    Advanced Topics

  • Position, float, z-index

    Advanced Topics

  • Position, float, z-index

    Advanced Topics

  • Cascading and specificity

    Advanced Topics

    #unique { color: red;

    } .info {

    color: blue; } p {

    color: purple; }

    style.css

    Info

    hello.html

  • Flexbox

    Advanced Topics

  • Media Queries

    Advanced Topics

    @media (min-width: 900px) { p {

    color: red; }

    }

  • CSS frameworks/libraries (Bootstrap, Foundation, Semantic UI)

    Advanced Topics

  • LUNCH!

    JavaScript workshop

    jQuery Workshop

    Up Next...