Scribd Logo
Importer

Bienvenue sur Scribd !

  • Introduction To Web Development Lecture 2

    Transféré par

    Tech-Up
    80 vues20 pages
    [Tech-Up] Introduction to Web Development Lecture 2: Expanding the Horizon - Fancy Links - Tabular Goodness - What?! I Can Haz Many Pages? - Labels, Boxes, and Buttons - Stylin' Up! - Can I Make This More Efficient? [Lab] Power Up, HTML!

    Titre original

    Introduction to Web Development Lecture 2

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Formats disponibles

    PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document
    [Tech-Up] Introduction to Web Development Lecture 2: Expanding the Horizon - Fancy Links - Tabular Goodness - What?! I Can Haz Many Pages? - Labels, Boxes, and Buttons - Stylin' Up! - Can I Make This More Efficient? [Lab] Power Up, HTML!

    Droits d'auteur :

    Attribution Non-Commercial (BY-NC)
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    80 vues20 pages

    Introduction To Web Development Lecture 2

    Transféré par

    Tech-Up
    [Tech-Up] Introduction to Web Development Lecture 2: Expanding the Horizon - Fancy Links - Tabular Goodness - What?! I Can Haz Many Pages? - Labels, Boxes, and Buttons - Stylin' Up! - Can I Make This More Efficient? [Lab] Power Up, HTML!

    Droits d'auteur :

    Attribution Non-Commercial (BY-NC)
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 20

    TECH-UP WORKSHOP SERIES:

    HTML + CSS (2)

    Expanding the Horizon

    Curriculum & Contents by Tech-Up


    ME...
    President, C.E.O. & Founder, Tech-Up

    Eric @mugmania @techupnyc

    ...YOUR LAB PARTNERS


    ARE YOU NEW?
    •Web Browser

    Chrome (10.X) / Firefox (4.X)

    •Text Editor

    ANY Text Editor e.g. TextEdit (plain text), Notepad

    Preferably with syntax highlighting

    TextWrangler (Free, Mac) TextMate ($, Mac)

    NotePad++ (Free, Win) GEdit (Free, Linux)
    REVIEW (1)
    <i></i>! ! ! ! italic
    <b></b> bold
    <u></u> underline
    superscript
    <sup></sup>
    <sub></sub> subscript

    <p></p> paragraph
    <center></center>! align center
    <h1-6></h1-6> heading
    REVIEW (2)
    <br /> line break
    <a href=””></a> link
    <ol> or <ul>! list

    <li></li>
    ...
    </ol> or </ul>

    <img src=”” alt=”” image


    width=”” height=”” />
    LAB: HELLO, HTML!
    Introduce yourself to the world...
    Use all the concepts we learned so far to create your own
    personal page.

    You may (and should) have:


    •formatted texts
    •headings
    •paragraphs
    •(ordered/unordered) lists
    •images
    •link to other pages and anchors within the page
    FANCY LINKS
    Image Link
    <a href=””><img src=”” /></a>

    Relative Address
    e.g.!
    ! <img src=”/image/chemistry.png”>
    ! ! <a href=”../page.html”>

    width/height 30px

    http://www.chemistry.com
    BONUS: AUDIO/VIDEO
    <audio or <video!
    ! ! ! !
    ! src=””! ! ! ! ! ! ! ! source
    ! controls! ! ! ! ! ! ! (optional)
    ! autoplay! ! ! ! ! ! ! (optional)
    ! loop>!! ! ! ! ! ! ! ! (optional)
    Text! ! ! ! ! ! ! ! ! ! (alt text)
    </audio> or </video>! ! ! !

    * Different browsers support different types of media
    ** Refer to: http://en.wikipedia.org/wiki/HTML5_video#Table
    TABULAR GOODNESS!
    <table border=”” width=”” cellspacing=”” cellpadding=””>
    ! <tr>! ! ! ! ! row
    ! ! <th></th>!! header
    ! ! ...
    ! </tr>!! ! ! ! ! ! !
    ! <tr>
    20
    ! ! <td></td>!! data
    ! ! ...
    ! </tr> border 1
    </table>! ! ! !

    10
    BONUS: CAPTION
    <table>
    ! <caption>

    ! Table 1: Bingo Board

    </caption>
    ! <tr>
    ! ! <td>0</td>
    ! ! <td>4</td>
    ! ! <td>7</td>
    ! </tr>
    ! ...
    </table>
    CAN I HAZ MORE PAGES?
    <frameset cols=”” or rows=””>!! px or %
    ! <frame src=”” />! ! ! ! ! source html
    ! ...
    </frameset>
    ! ! ! !

    * <frameset> and <frame> tags are not supported in HTML5

    30%

    70%
    OMG!! WHAT, THEN?!
    <iframe
    ! src=””! ! ! ! ! ! ! source html
    ! border=0 or 1! ! ! ! (optional) border
    ! width=””! ! ! ! ! ! (optional) % or px
    ! height=””!! ! ! ! ! (optional) % or px
    ! name=””>! ! ! ! ! ! (optional) % or px
    </iframe>!! ! !

    FORMTASTIC (A.K.A. LABELS, BUTTONS & BOXES)
    <form> type=
    “text“, “password”, “submit”,
    ! <input type=””> “search”, “radio”, “range”,
    ! ...!! !



    “checkbox”, “number”, ...
    </form> required
    maxlength (text)
    min/max (range, number)
    Please fill out this field placeholder
    value
    ...
    STYLIN’ UP!
    Style Attribute
    style=”property:value;...”
    e.g. <body>, <p>, <table>, ...

    Style Properties
    font-: family, size, style, ...
    text-: color, align, transform, ...

    * http://www.w3schools.com/css/
    GIVE ME A BREAK! I NEED SOME SPACE...
    <span></span>!! ! group in-line elements









    no visual change









    great way to stylize

    Pay attention to styles


    THIS AGAIN?
    SCREW THIS; I’M GOING HOME
    Want to play a 10 by 10 bingo?
    How many table cells do you have to style?
    Doesn’t it sound fun?

    You may ask: is there a better way?


    Of course!

    Use CSS (Cascading Style Sheets)
    We are not going to do it today.

    Stay tuned.
    USEFUL RESOURCES
    W3C School - HTML5
    http://www.w3schools.com/html5/

    W3C School - CSS


    http://www.w3schools.com/CSS/

    Color Hex Color Codes


    http://www.color-hex.com/
    LAB: POWER UP, HTML!
    Let’s put these pieces together.
    Use all the concepts we learned so far to create a multi-
    page website

    You may (and should) have:


    •image link(s)
    •iframe with menu for the next 3 items
    •your introduction page with styling
    •table(s)
    •form(s)

    Vous aimerez peut-être aussi