• Horizontal headers
    		•

    Front end darsliklari moduli html, css, javascript




    Download 105.45 Kb.
    bet2/12
    Sana11.04.2023
    Hajmi105.45 Kb.
    #50258
    1   2   3   4   5   6   7   8   9   ...   12
    Bog'liq
    FRONT END full notes (7) (2022 05 08 17 42 47 UTC)
    00, mansur, 1, 2, 3-иловалар(1), Алишер, 1673 (1), MI-102 guruh Ergasheva M
    2. HTML — BASIC
    • comments, file path
    The "picture.jpg" file is located in the same folder as the current page
    The "picture.jpg" file is located in the images folder in the current folder
    The "picture.jpg" file is located in the images folder at the root of the current web
    The "picture.jpg" file is located in the folder one level up from the current folder
    • div va span
    • a tagi => tel, email, #id ...
    Visit W3Schools.com!
    Target=”_blank” new page

    +47 333 78 901
    Send Email
    download

    • HTML da atributlar yozish.


    https://www.w3schools.com/tags/ref_attributes.asp

    • HTML da rasm, audio va video, iframe;


    IMG
    IMG
    AUDIO



    Your browser does not support the audio tag.

    VIDEO



    Your browser does not support the video tag.

    IFRAME




    3. HTML – INTERMEDIATE
    • HTML da Jadval strukturasi va ular bilan ishlash;
























    Month Savings
    January $100
    February $80
    Sum $180













    Company Contact Country
    Alfreds Futterkiste Maria Anders Germany


    Horizontal headers:













    Name Email Phone
    John Doe john.doe@example.com 123-45-678


    Vertical headers:















    Name: John Doe
    Email: john.doe@example.com
    Phone: 123-45-678

    • HTML da Listlar bilan ishlash;
    • ul – unordered
    • ol – ordered
    • dl – description list

    • Coffee

    • Tea

    • Milk


    square, disc, none
    description list, data, title

    Coffee

    - black hot drink

    Milk

    - white cold drink



    4. HTML – INTERMEDIATE
    • HTML da Form elementining strukturasi;
    • Form elementlari va attributlari;
    • Elementlar: input, textarea, button, select, option…
    • Attributlar: action, method, target, autocomplete…
    • Form input turlari va attributlari;
    • Turlari: button, checkbox, email, password, tel, number…
    • Attributlari: for, type, name, value, id, autocomplete…


    First name:



    Last name:

















































    The cat was playing in the garden.

    Choose a car:

    Volvo
    Saab
    Fiat
    Audi

    Use the size attribute to specify the number of visible values:
    Use the multiple attribute to allow the user to select more than one value:







    Disabled
    readonly 
     maxlength="4" size="4"
    required
    // range
    autocomplete="off" // “on”

    --------------------------------------------------------------------------------------------
    CSS
    --------------------------------------------------------------------------------------------

    1. CSS – INTRODUCTION
    • CSSga kirish style turlari;
    • Inline style
    • Internal style
    • External style
    • CSS selector turlari (class, id , tag)
    • background-color
    • Text Fonts
    • font family
    • font-size = rem, em, %, vw, vh,
    While 
    em is relative to the font-size of its direct or nearest parent, rem is only relative to the html (root) font-size.
    • font-style normal, italic
    • CSS color ( color picker )
    • RGB (Red, Green, Blue) va RGBA (Red, Green, Blue, Alpha)
    • HEX (Hexadecimal – 16raqamlik)
    • HSL (Hue, Saturation, Lightness) va HSL (Hue, Saturation, Lightness, Alpha)

    HEX RED GREEN BLUE #90403a


    HUE color
    Saturation = ‘0-pale=> 100 bold’
    Alpha = ‘shaffoflik’
    https://www.w3schools.com/colors/colors_hsl.asp


    2. CSS – Background stylellar
    • Display hususiyatlari;
    • Inline, Block, Inline-block, none
    visibility:hidden;
    display:none;

    • Compared to display: inline, the major difference is that display: inline-block allows to set a width and height on the element.

    • Also, with display: inline-block, the top and bottom margins/paddings are respected, but with display: inline they are not.

    • float
    https://css-tricks.com/almanac/properties/f/float/



    • none: the element does not float. This is the initial value.

    • left: floats the element to the left of its container.

    • right: floats the element to the right of its container.

    • inherit: the element inherits the float direction of its parent.

    • background-position / image / attachment


    body {
    background-image: url('w3css.gif');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    }
    https://www.w3schools.com/cssref/playit.asp?filename=playcss_background-position
    body {
    background: lightblue url("img_tree.gif") no-repeat fixed center;
    }
    https://www.w3schools.com/cssref/tryit.asp?filename=trycss_background

    • text-decoration, text-transform, text-indent, letter-spacing, word-spacing, text-shadow, white-space, line-height


    h1 {
    text-decoration: underline overline dotted red;
    }

    text-transform: capitalize; uppercase, lowercase


    text-shadow: 2px 2px 8px #FF0000; // v, h blur
    white-space: nowrap;

    • Box-modellar:


    • Content, Padding, Margin, Border, Width, Height
    • max-width, max-height
    • Box-sizing
    box-sizing: border-box; // on padding


    Download 105.45 Kb.
    1   2   3   4   5   6   7   8   9   ...   12




    Download 105.45 Kb.
    Bosh sahifa
    Aloqalar
        Bosh sahifa
    Dərs
    Mühazirə
    Qaydalar
    Referat
    Xülasə
    Yazı


    Front end darsliklari moduli html, css, javascript

    Download 105.45 Kb.