Scribd Logo
Upload

Welcome to Scribd!

  • 13 views

    Belajar HTML

    Uploaded by

    HHHHHHHHJJJJJJJ
    ok

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content

    You might also like

    Belajar HTML

    Uploaded by

    HHHHHHHHJJJJJJJ
    13 views13 pages
    ok

    Original Title

    belajar html

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    ok

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    13 views13 pages

    Belajar HTML

    Uploaded by

    HHHHHHHHJJJJJJJ
    ok

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    of 13

    Nama : Dwi Bagus Nur Ahmad Fitria

    NIM : 361955401076

    Prodi : Tehnik Informatika

    Kelas : 1C

    1. Default

    Coding:

    <!DOCTYPE html>
    <html>
    <head>
    <title>Page Title</title>
    </head>
    <body>

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

    </body>
    </html>

    Hasil:
    2. Heading(h1 – h6)

    Coding :

    <!DOCTYPE html>
    <html>
    <head>
    <title>Page Title</title>
    </head>
    <body>

    <h1>This is a Heading 1</h1>


    <h2>This is a Heading 2</h2>
    <h3>This is a Heading 3</h3>
    <h4>This is a Heading 4</h4>
    <h5>This is a Heading 5</h5>
    <h6>This is a Heading 6</h6>

    </body>
    </html>

    Hasil :
    3. Color

    Coding :

    <!DOCTYPE html>
    <html>
    <body>
    <p style="color: red;">I am Red</p>
    <p style="color: blue;">I am Blue</p>
    <p style="font-size: 50px;">I am Big</p>
    </body>
    </html>

    Hasil :
    4. Background

    Coding :

    <!DOCTYPE html>
    <html>
    <body>
    <h1 style="background-color: blue;">Hello World</h1>
    <p style="background-color: red;">Lorem ipsum dolor sit amet, consectetur
    adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </body>
    </html>

    Hasil :
    5. Background & color font

    Coding :

    <!DOCTYPE html>

    <html>

    <body>

    <h1 style="background-color: blue; color: white;">Hello World</h1>

    <p style="background-color: red; color: white;">Lorem ipsum dolor sit amet,


    consectetur adipisicing elit, sed do eiusmod

    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    </p>

    </body>

    </html>

    Hasil :
    6. Inline style

    Coding :

    <!DOCTYPE html>

    <html>

    <body>

    <p style="color: red;">this is red</p>

    <p style="color: blue;">this is blue</p>

    <p style="font-size: 50px;">this is big</p>

    </body>

    </html>

    Hasil :
    7. Internal style

    Coding :

    <!DOCTYPE html>

    <html>

    <head>

    <style>

    body {background-color: powderblue;}

    h1 {color: blue;}

    p {color: red;}

    </style>

    </head>

    <body>

    <h1>This is heading</h1>

    <p>This is paragraph</p>

    </body>

    </html>

    Hasil :
    8. External style

    Coding html :

    <!DOCTYPE html>

    <html>

    <head>

    <link rel="stylesheet" type="text/css" href="style.css">

    </head>

    <body>

    <img src="">

    <h1>This is heading</h1>

    <p>This is paragraph</p>

    </body>

    </html>

    Coding css :

    body {background-color: powderblue;}

    h1 {color: blue;}

    p {color: red;}

    Hasil :
    9. Layout

    Coding html :

    <!DOCTYPE html>

    <html lang="en">

    <head>

    <title>CSS Template</title>

    <link rel="stylesheet" type="text/css" href="style.css">

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    </head>

    <body>

    <h2>CSS Layout Float</h2>

    <p>In this example, we have created a header, two columns/boxes and a footer. On smaller
    screens, the columns will stack on top of each other.</p>

    <p>Resize the browser window to see the responsive effect (you will learn more about this in
    our next chapter - HTML Responsive.)</p>

    <header>

    <h2>Cities</h2>

    </header>

    <section>

    <nav>

    <ul>

    <li><a href="#">London</a></li>

    <li><a href="#">Paris</a></li>
    <li><a href="#">Tokyo</a></li>

    </ul>

    </nav>

    <article>

    <h1>London</h1>

    <p>London is the capital city of England. It is the most populous city in the United Kingdom,
    with a metropolitan area of over 13 million inhabitants.</p>

    <p>Standing on the River Thames, London has been a major settlement for two millennia, its
    history going back to its founding by the Romans, who named it Londinium.</p>

    </article>

    </section>

    <footer>

    <p>Footer</p>

    </footer>

    </body>

    </html>

    Coding css :

    *{

    box-sizing: border-box;

    body {

    font-family: Arial, Helvetica, sans-serif;

    }
    /* Style the header */

    header {

    background-color: #666;

    padding: 30px;

    text-align: center;

    font-size: 35px;

    color: white;

    /* Create two columns/boxes that floats next to each other */

    nav {

    float: left;

    width: 30%;

    height: 300px; /* only for demonstration, should be removed */

    background: #ccc;

    padding: 20px;

    /* Style the list inside the menu */

    nav ul {

    list-style-type: none;

    padding: 0;

    article {

    float: left;

    padding: 20px;
    width: 70%;

    background-color: #f1f1f1;

    height: 300px; /* only for demonstration, should be removed */

    /* Clear floats after the columns */

    section:after {

    content: "";

    display: table;

    clear: both;

    /* Style the footer */

    footer {

    background-color: #777;

    padding: 10px;

    text-align: center;

    color: white;

    /* Responsive layout - makes the two columns/boxes stack on top of each other instead of next
    to each other, on small screens */

    @media (max-width: 600px) {

    nav, article {

    width: 100%;

    height: auto;

    }
    Hasil :

    You might also like