Scribd Logo
Hochladen

Willkommen bei Scribd!

  • HTML CSS

    Hochgeladen von

    Thomas Varghese
    31 Ansichten3 Seiten
    Basic HTML and CSS

    Originaltitel

    HTML_CSS

    Copyright

    © © All Rights Reserved

    Verfügbare Formate

    TXT, PDF, TXT oder online auf Scribd lesen

    Stufen Sie dieses Dokument als nützlich ein?

    Sind diese Inhalte unangemessen?

    Dieses Dokument melden
    Basic HTML and CSS

    Copyright:

    © All Rights Reserved
    Als TXT, PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    31 Ansichten3 Seiten

    HTML CSS

    Hochgeladen von

    Thomas Varghese
    Basic HTML and CSS

    Copyright:

    © All Rights Reserved
    Als TXT, PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    von 3

    Every webpage is written in HTML.

    It provides the skeleton that gives the websit


    e structure.
    HTML stands for HyperText Markup Language.
    Format :
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <body>
    </body>
    </head>
    </html>
    *Additional comments for browser type/meta support*
    <!-- --> for a comment
    Types :
    <GO THROUGH ENTIRE LIST OF ELEMENTS>
    <strong></strong> (bold)
    <em></em> (italics)
    <p></p>
    <h1></h1> (h1 to h6)
    <img src="url" />
    Image to link - <a href="URL"> tag before <img> tag and a </a> tag after
    <a></a> to hyperlink
    <ol></ol> and <li></li>
    <ul></ul> and <li></li>
    Nested lists <ol><li><ul><li><li></li></li></ul></li></ol>
    <table></table>
    <tr></tr> to add rows
    <td></td> to add data
    <thead></thead> and <tbody></tbody>
    <tr></tr> to add rows
    <th></th> to add data
    <table border = "Xpx">
    <th colspan="3">3 columns across!</th>
    <div></div> - Divide the page into sections
    <span></span> - Control smaller pieces of elements
    <br></br>
    <div id="header">
    <div id="navbar"> (as a list)
    <div id="left">
    <div id="right">
    <div id="footer">
    <div id="button">
    <button></button>
    <form><input type="" name="" value=""/></form>
    Style Properties in HTML :
    <GO THROUGH ENTIRE LIST OF SPAN ATTRIBUTES>
    <p style="color: green; font-size: Xpx; font-family: Garamond; background-color:
    brown; text-align:center"></p>
    <div style="width: Xpx; height: Xpx; background-color: red"></div>
    <a href="URL"><div></div></a>
    Exercises :
    - Basic Webpage
    - About Me
    - Clickable Photo Page (Using tables)
    CSS stands for Cascading Style Sheets, a language used to describe the appearanc
    e and formatting of your HTML.
    /*I'm a comment!*/ Commenting in CSS
    <head>
    <link type="text/css" rel="stylesheet" href*="stylesheet.css"/>
    <title></title>
    </head>
    Syntax :
    selector {
    property: value;
    }
    Hexadecimal color codes
    <GO THROUGH ENTIRE LIST OF ELEMENTS AND ATTRIBUTES>
    All HTML elements can be CSS selectors.
    Types :

    color, font-family (use a line of preffered fonts; default: serif, sans-serif, c
    ursive), font-size (px and em (relative measure to different devices)), font-wei
    ght, text-align, margins and padding, height, width, text-decoration
    border, border-radius elements, list elements, image
    Selection : (Based on specificity)
    1. Nested ( div div p {} )
    2. * {} Universal Selector (for all HTML elements)
    3. div > p (Grabs direct children of parent element)
    Classes/Ids :
    1. Classes for a bunch of elements for same styling. <div class=""></div> and ."
    " {}
    2. IDs for a single element with a certain styling. <div id=""></div> and #"" {}
    3. PseudoSelectors selector:pseudo-class_selector {
    property: value;
    } (link/visited/hover)
    p:first-child {}
    p:nth-child(n) {}
    <div></div> - height width background-color border elements (Button)
    HTML Box Model (M-B-P-C)
    Positioning :
    - display (block : takes up full width)
    (inline-block : allows other elements side by side)
    (inline : allows element on same line without block formatting) (for h
    eaders/p)
    (none)
    - margin (from) - Pushes element away from each other (top pushes element down X
    px, from top)
    margin-top/right/bottom/left/auto(equal margins on sides of element)/0 auto
    margin : Xpx Xpx Xpx Xpx;
    - padding - stretches element out toward other elements (top stretches element t
    op Xpx, towards top)
    padding-top/right/bottom/left
    padding : Xpx Xpx Xpx Xpx;
    - float - avoids overlap and places elements accordingly
    float : right, left
    clear : right, left, both (move any floating elements away)
    - position
    absolute - positioned in relation to the first parent element that doesnt have p
    osition : static; else, it is positioned relative to <html>
    relative - moves in relation to the static positioning
    fixed - stays glued in position
    top, left, bottom, right (moves from selected to opposite)
    Exercises :
    - Button for Website
    - Sorting friends*
    - Resume

    Das könnte Ihnen auch gefallen