Scribd Logo
Unggah

Selamat datang di Scribd!

  • Lanjut Latihan1

    Diunggah oleh

    Heri Sri Purnomo
    3 tayangan17 halaman
    html

    Judul Asli

    lanjut latihan1

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    PPT, PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini
    html

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PPT, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    3 tayangan17 halaman

    Lanjut Latihan1

    Diunggah oleh

    Heri Sri Purnomo
    html

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PPT, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 17

    Latihan HTML

    By : Heri Sri Purnomo


    Elemen dasar – Block Level
     Latihan1.html
     Block level element:
    terdapat 6 tingkatan, yaitu
    H1 sampai H6.

    <body>
    <h1>Heading one</h1>
    <h2>Heading two</h2>
    <h3>Heading three</h3>
    <h4>Heading four</h4>
    <h5>Heading five</h5>
    <h6>Heading six</h6>
    </body>

    2
    Elemen dasar – Paragraph (p)
     Menampilkan teks dalam bentuk paragraf.

    <body>
    <h3>Salam Kenal</h3>
    <p>
    Sedang belajar HTML … membuat WEB
    Siapa ya yang mo kenalan dengan saya.
    </p>
    <body>

    3
    Elemen dasar – list item (li)
     Unordered list <ul>: List item tidak berurutan (bullet)

    <body>
    <P>Nama-nama buah</P>
    <ul>
    <li>Mangga</li>
    <li>Duren</li>
    <li>Sirsak</li>
    </ul>
    </body>

    4
    list item (li) - continued
     Ordered list <ol>: List item berurutan.

    <body>
    <P>Daftar Menu Makanan</P>
    <ol start="1" type=“1">
    <li>Nasi Goreng</li>
    <li>Nasi Uduk</li>
    <li>Nasi Kebuli</li>
    <li>Nasi bakar</li>
    </ol>
    <body>

    5
    list item (li) - continued

     Tipe-tipe pada list item - ordered list <ol> :


    • “A” : A, B, C, …
    • ”a” : a, b, c, …
    • ”I” : I, II, III, …
    • ”i” : i, ii, iii, …
    • ”1” : 1, 2, 3, …

    6
    Elemen dasar – Horizontal Rules <hr>
     Horizontal Rule tag digunakan untuk
    menggambar garis horizontal dalam dokumen
    html.
     Attribut dari <hr> adalah:
    • Position: menetukan posisi dari <hr>, dengan nilai :
    center | right | left.
    • Width: untuk menentukan panjang <hr>. Nilai default
    100%.
    • Size: untuk menentukan tebal dari <hr> dalam pixel.
    • Noshad: Efek bayangan.
     Contoh:
    <hr position=“center” width=90% size=3
    noshad>
    7
    Pemformatan Page
     Break : memulai baris baru
    tag : <br>
     Font : menentukan format tampilan font
    <font color="#9966FF" size="5"> Belajar Web </font>

     Color : attribute dgn 3 kategori warna (RGB)


    #RRGGBB, misal #FF0000 adalah Red 8
    Pemformatan Page – Cont. 1
     Alignment : untuk perataan objek (Left,Right,Center,Justify)
    <P align="center">Daftar Menu Makanan</P>
     Format Text :
    A. Physical Format B. Logical Format

    C. Preformatted Text : menampilkan text spt aslinya.


    <pre> HTML sungguh menyenangkan.
    9
    Mudah bukan… </pre>
    Pemformatan Page – Cont. 2
     Contoh :
    <html>
    <head>
    <title>Latihan2</title>
    </head>
    <body>
    <B><P align="center">Daftar Menu
    Makanan</P></B>
    Tersedia makanan khas diantaranya <br>
    <font color="#9966FF" size="3" face="arial">
    1. Nasi Goreng </font> <br>
    2. Nasi Kebuli <br>
    3. Nasi Bakar <br>
    </body>
    </html>

    10
    Elemen dasar – hyperlink <a>
     Untuk membuat link ke dokumen lain.
    Contoh:
    <a href=dua.html>Ke halaman dua</a>
    <a href="https://www.w3schools.com">Visit
    W3Schools</a>
     Untuk membuat link ke bagian tertentu dlm dokumen.
    Contoh:

    11
    Pembuatan Tabel
     Untuk membuat tabel : <tabble>
    Cell-nya dengan tag <td>
    <html>
    <head>
    <title>Using Table</title>
    </head>
    <body>
    <table border="1">
    <td>cell 1</td>
    <td>cell 2</td>
    <td>cell 3</td>
    <td>cell 4</td>
    </table>
    </body>
    </html> 12
    Pembuatan Tabel – Cont. 1
     Untuk membuat baris cell : <tr>
     Untuk title tabel : <caption>
    <body>
    <table border="1">
    <caption>Creating Table</caption>
    <tr> <td>cell 1a</td>
    <td>cell 1b</td>
    </tr>
    <tr> <td>cell 2a</td>
    <td>cell 2b</td>
    </tr>
    </table>
    </body>
    13
    Pemformatan Tabel
     Perataan tabel :
    1. align (center, justify, left, right).
    2. valign (baseline, top, middle, bottom)
     Lebar tabel : width=“25%”
     Warna cell : bgcolor=“red”
     Spasi tabel :
    cellspacing untuk memberi spasi antar sel
    cellpadding untuk spasi dari border ke text dalam cell

    14
    Pemformatan Tabel – Cont. 1
     Contoh :
    <body>
    <table border=1 cellspacing=5
    cellpading=10>
    <tr align="left" valign="top">
    <td width="25%"
    bgcolor=red>cell 1a</td>
    <td width="25%"
    bgcolor=yellow>cell 1b</td>
    </tr>
    <tr align="center"
    valign="baseline">
    <td>cell 2a</td>
    <td>cell 2b</td>
    </tr>
    </table> 15

    </body>
    Latihan tabel
     <!DOCTYPE html>
     <html>
     <head>
     <title>Penggunaan Tag Tabel</title>
     </head>
     <body>
     <h1>Belajar Tag Tabel</h1>
     <table border="1">
     <tr>
     <td>Baris 1, Kolom 1</td>
     <td>Baris 1, Kolom 2</td>
     <td>Baris 1, Kolom 3</td>
     </tr>
     <tr>
     <td>Baris 2, Kolom 1</td>
     <td>Baris 2, Kolom 2</td>
     <td> Baris 2, Kolom 3</td>
     </tr>
     <tr>
     <td> Baris 3, Kolom 1</td>
     <td> Baris 3, Kolom 2</td>
     <td> Baris 3, Kolom 3</td>
     </tr>
     <tr>
     <td> Baris 4, Kolom 1</td>
     <td> Baris 4, Kolom 2</td>
     <td> Baris 4, Kolom 3</td>
     </tr>
     </table>
     </body>
     </html>

    16
    Pemformatan Tabel – Cont. 1
     Contoh :
    <body>
    <table border=1 cellspacing=5
    cellpading=10>
    <tr align="left" valign="top">
    <td width="25%"
    bgcolor=red>cell 1a</td>
    <td width="25%"
    bgcolor=yellow>cell 1b</td>
    </tr>
    <tr align="center"
    valign="baseline">
    <td>cell 2a</td>
    <td>cell 2b</td>
    </tr>
    </table> 17

    </body>

    Anda mungkin juga menyukai