Scribd Logo
Загрузить

Добро пожаловать в Scribd!

  • HTML Details

    Загружено:

    Brian Bert
    37 просмотров104 страницы

    Авторское право

    © Attribution Non-Commercial (BY-NC)

    Доступные форматы

    PDF, TXT или читайте онлайн в Scribd

    Этот документ был вам полезен?

    Это неприемлемый материал?

    Пожаловаться на этот документ

    Авторское право:

    Attribution Non-Commercial (BY-NC)
    Скачайте в формате PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    37 просмотров104 страницы

    HTML Details

    Загружено:

    Brian Bert

    Авторское право:

    Attribution Non-Commercial (BY-NC)
    Скачайте в формате PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    из 104

    WEB 101

    HTML & CSS

    TOOLS OF THE TRADE

    CODA

    TEXT WRANGLER

    TExTMATE

    EXPRESSION WEB

    DREAMWEAVER

    BROWSERS
    the big four

    BUILDING THE FOUNDATION

    building blocks

    HTML

    <html>
    html tag

    <html> </html>

    <head>
    head definitions

    <html> <head> </head> </html>

    <title>
    page title

    <html> <head> <title>Our Page</title> </head> </html>

    <body>
    document body

    <html> <head> <title>Our Page</title> </head> <body> </body> </html>

    <!-- # -->
    comments

    <html> <head> <title>Our Page</title> </head> <body> <!-- code body here --> </body> </html>

    <p>
    paragraph tag

    <p>My paragraph</p>

    <br>
    line break

    <br />
    line break

    <p>My<br /> paragraph</p>

    <h1>
    heading tag

    <h2>
    heading tag

    <h3>
    heading tag

    <h4>
    heading tag

    <h5>
    heading tag

    <h1> Important heading </h1> <h3> Less important heading </h3>

    <small>
    small font style tag

    <p> Some text <small> some smaller text </small> </p>

    <div>
    division/container tag

    <div> <h3>My section</h3> <p>Lorem ipsum</p> </div>

    <span>
    inline container

    <p> Some<span>thing</span> </p>

    BUILD TIME

    <ul>
    unordered list

    <li>
    list item

    <ul> <li>item 1</li> <li>item 2</li> </ul>

    <table>
    table definition

    <thead>
    table header

    <th>
    table header cell

    <tbody>
    table body

    <tr>
    table row

    <td>
    table cell

    <tfoot>
    table footer

    <table> <thead> <th>Name</th> <th>Price</th> </thead> <tbody> <tr> <td>Latte</td> <td>$3.95</td> </tr> </tbody> </table>

    NAMING CONVENTION

    ids

    singular

    <div id = intro> Some text </div>

    classes

    many

    <div class = product> Some text </div>

    SEMANTIC WEB

    less > MORE

    documenting

    SELF

    BUILD TIME

    ADDING STYLE

    stylesheets

    .css files

    selectors

    h2 { ... } li { ... } p { ... }

    by element

    .products li.products li .products

    { ... } { ... } { ... }

    by class

    #intro div#intro div #intro

    { ... } { ... } { ... }

    by ID

    #intro ul.products li { ... }

    mix and match

    style options

    structure

    height
    50px;

    width:
    100px;

    margin:
    5px 5px 5px 5px

    WAIT!

    introducing
    the box model

    margin padding

    height

    width

    padding:
    5px 5px 5px 5px

    div { height: 50px; width: 100px; padding: 5px 10px 5px 10px; margin: 5px 10px 5px 10px; }

    5px 5px

    10px

    10px

    50px 100px 5px 5px

    10px

    10px

    Height + padding-top + padding-bottom + margin-top + margin-bottom 50px + 5px + 5px + 5px + 5px =

    HEIGHT
    70px

    Width + padding-left + padding-right + margin-left + margin-right 50px + 10px + 10px + 10px + 10px =

    WIDTH
    90px

    div { margin: top right bottom left; } div { margin: 5px 10px 5px 10px; }

    Shorthand
    div { margin: 5px 10px; } div { margin: 5px; }

    OK!

    BUILD TIME

    FLOATS

    div { float: left; } div { float: right; }

    fonts

    font-family:
    helvetica, arial, sans-serif;

    font-size:
    12px;

    font-size:
    12pt;

    font-size:
    1em;

    font-size:
    70%;

    font-weight:
    bold;

    font-weight:
    normal;

    text-decoration:
    underline;

    text-decoration:
    none;

    color

    color:
    black;

    color:
    #000000;

    color:
    #000;

    color:
    rgb(0,0,0);

    background-color:
    black;

    BUILD TIME

    Вам также может понравиться