Scribd Logo
Încărcați

Bine ați venit la Scribd!

  • Membuat Website

    Încărcat de

    Aris Munandar Prasetya
    9 vizualizări16 pagini
    membuat website

    Drepturi de autor

    © © All Rights Reserved

    Formate disponibile

    PPTX, PDF, TXT sau citiți online pe Scribd

    Vi se pare util acest document?

    Este necorespunzător acest conținut?

    Raportați acest document
    membuat website

    Drepturi de autor:

    © All Rights Reserved
    Descărcați ca PPTX, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    9 vizualizări16 pagini

    Membuat Website

    Încărcat de

    Aris Munandar Prasetya
    membuat website

    Drepturi de autor:

    © All Rights Reserved
    Descărcați ca PPTX, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    din 16

    Membuat Website

    MASTERING HTML & CSS


    You Don’t Have To Be Genius To
    write Code
    You just have determination
    TOOLS

    Notepad++
    Save as .html,.CSS

    Browser(Chrome or Mozilla)
    HTML BASIC
    <!DOCTYPE html>
    <html>
    <head>
    <title>Judul Halaman</title>
    </head>
    <body>
    Content muncul di sini
    </body>
    </html>
    Sintaks Dasar HTML
    (Open & Close Tag)
    • <!DOCTYPE html>
    <html><head>
    <title>Latihan Dasar CSS</title>
    </head>
    <body>
    <h1>Judul </h1>
    <p>Hello World!</p>
    </body>
    </html>
    CSS Syntaks

    h1 {color: blue;font-size: 12px;}


    CONTOH
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    body {background-color: linen;
    }
    h1 {color: maroon;
    margin-left: 40px;
    }
    </style>
    </head>
    <body>
    <h1>Judul </h1>
    <p>Paragraph.</p>
    </body>
    </html>
    CSS External style sheet
    <!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    </head>
    <body>

    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>

    </body>
    Mycss.css
    • body {
    background-color: lightblue;
    }

    h1 {
    color: navy;
    margin-left: 20px;
    }
    Internal Style Sheet
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    body {background-color: linen;
    }
    h1 { color: maroon;
    margin-left: 40px;
    }
    </style>
    </head>
    <body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
    </body>
    Inline Styles

    <!DOCTYPE html>
    <html>
    <body>

    <h1 style="color:blue;margin-left:30px;">This is a
    heading.</h1>
    <p>This is a paragraph.</p>

    </body>
    ID SELECTOR
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    #para1 {
    text-align: center;
    color: red;
    }
    </style>
    </head>
    <body>

    <p id="para1">Hello World!</p>


    <p>This paragraph is not affected by the style.</p>

    </body>
    </html>
    Class Selector
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    .center {
    text-align: center;
    color: red;
    }
    </style>
    </head>
    <body>
    <p class="center">Red and center-aligned paragraph.</p>

    </body>
    </html>
    LATIHAN
    <html>
    <head>
    <style>
    div {border: 3px solid blue;
    }
    .clearfix {
    overflow: auto;
    }
    nav {
    float: left;
    width: 200px;
    border: 3px solid #73AD21;
    }
    section {
    margin-left: 206px;
    border: 3px solid red;
    }
    </style>
    </head>
    <body>
    <div class="clearfix">
    <nav>
    <span>Menu</span>
    <ul>
    <li><a target="_blank" href="#">Home</a></li>
    <li><a target="_blank" href="#">CSS</a></li>
    </ul>
    </nav>
    <section>
    <span>section 1</span>
    <p>Content Di sini</p>
    </section>
    <section>
    <span>section 2</span>
    <p>Content disini</p>
    </section>
    </div>
    </body>
    </html>
    KEEP CODING
    Fransisko Situmorang
    089613747224

    S-ar putea să vă placă și