Scribd Logo
Unggah

Selamat datang di Scribd!

  • Materi Lanjutan

    Diunggah oleh

    Silda Selin
    5 tayangan21 halaman

    Judul Asli

    4. materi lanjutan

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    5 tayangan21 halaman

    Materi Lanjutan

    Diunggah oleh

    Silda Selin

    Hak Cipta:

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

    Perancangan Web

    #4-Sruktur Elemen HTML Lanjutan Imam Fathurrahman, M.Kom


    Materi
    Taq Table
    01

    Row- col span


    02

    03 Membuat form

    04 Membuat Link
    Taq Table

    Tabel merupakan salah satu elemen penting dalam s


    ebuah wesbite. Tabel sering kali digunakan untuk me
    nampilkan informasi berupa daftar data, selain itu jug
    a biasa dipakai untuk membandingkan antar data.

    Ada 4 unsur pembentuk utama dalam


    tabel, antara lain:
    - Sel
    - Garis
    - Baris
    - Kolom
    Taq Table

    Cara membuat table HTML

    Ada 6 tag yang digunakan untuk membuat tabel di HTML antara lain:
    <table> – tag pertama yang wajib ditulis saat membuat tabel, berfungsi untuk m
    embungkus tabel.
    <thead> – berfungsi untuk membungkus kepala tabel
    <tbody> – berfungsi untuk membungkus tubuh tabel
    <tr> – berfungsi untuk membuat baris tabel, singkatan dari Table Row
    <th> – berfungsi untuk membuat judul pada header tabel, singkatan dari Table
    Header
    <td> – berfungsi untuk membuat sel tabel, singkatan dari Table Data
    Taq Table

    <html>
    <head>
    <title>Belajar Membuat Tabel HTML</title>
    </head>
    <body>
    <table border="0">
    <tr>
    <td>Baris 1 kolom 1</td>
    <td>Baris 1 kolom 2</td>
    </tr>
    <tr>
    <td>Baris 2 kolom 1</td>
    <td>Baris 2 kolom 2</td>
    </tr>
    </table>
    </body>
    </html>
    Taq Table

    <html> Untuk menampilkan garis table tambahkan value“


    <head> 1” pada pada border
    <title>Belajar Membuat Tabel HTML</title>
    </head>
    <body>
    <table border="1">
    <tr>
    <td>Baris 1 kolom 1</td>
    <td>Baris 1 kolom 2</td>
    </tr>
    <tr>
    <td>Baris 2 kolom 1</td>
    <td>Baris 2 kolom 2</td>
    </tr>
    </table>
    </body>
    </html>
    Row-col span

    Menggabungkan sel table


    Atribut yang digunakan untuk menggabungkan sel tabel adalah rowspa
    n dan colspan:
     rowspan untuk menggabungkan baris;
     colspan untuk mebggabungkan kolom.

    Atribut ini bisa kita berikan kepada tag <td> atau <th>.
    ROWSPAN-CONTOH 1

    Menggabungkan sel table

    <html>
    <BODY>

    <table width="100" border="1" >


    <tr>
    <td bgcolor="#0000FF" rowspan="2"><center>1</td>
    <td bgcolor="#FFFF66"><center>3</td>

    </tr>
    <tr>

    <td bgcolor="#FFCC99"><center>4</td>
    </tr>

    </table>
    </BODY>
    </HTML>
    COLSPAN-CONTOH 2

    Menggabungkan sel table

    <html>
    <BODY>

    <table width="100" border="1" >


    <tr>
    <td bgcolor="#0000FF" colspan="2"><center>1</td>

    </tr>
    <tr>
    <td bgcolor="#FFFF66"><center>2</td>
    <td bgcolor="#FFCC99"><center>4</td>
    </tr>

    </table>
    </BODY>
    </HTML>
    HTML

    Atribut pada tag table

     Atribut border digunakan untuk membuat garis tepi pada tabel. Secara def
    ault, atau tidak kita tulis atribut border, maka web browser akan menampilkan
    tabel tanpa garis. Berlaku juga bila kita isi atribut border dengan nilai 0.

     Atribut cellpadding digunakan untuk mengatur jarak isi teks tabel dengan
    garis dalam tabel yang memuat isi teks tersebut.

     Atribut cellspacing digunakan untuk mengatur jarak antara garis tepi bagia
    n dalam dengan bagian luar.
    MEMBUAT FORM-CONTOH 1
    <html>
    <head>
    <title>Form Login</title>
    </head>
    <body>
    <form action="" method="">
    <fieldset>
    <legend>Login</legend>
    <p>
    <label>Username:</label>
    <input type="text" name="username" placeholder="username..." />
    </p>
    <p>
    <label>Password:</label>
    <input type="password" name="password" placeholder="password..." />
    </p>
    <p>
    <label><input type="checkbox" name="remember" value="remember" /> Remember me</label>
    </p>
    <p>
    <input type="submit" name="submit" value="Login" />
    </p>
    </fieldset>
    </form>
    </body>
    </html>
    MEMBUAT FORM
    Link di HTML
    Tujuan kata Hypertext dari HTML adalah membuat sebuah te
    xt yang ketika di-klik akan pindah ke halaman lainnya. HTM
    L menggunakan tag <a>untuk keperluan ini.
    Link ditulis dengan <a> yang merupakan singkatan cari ancho
    r (jangkar). Setiap tag <a> setidaknya memiliki sebuah atribu
    t href. Dimana href berisi alamat yang dituju (href adalah singk
    atan dari hypertext reference).
    Link di HTML-CONTOH 2

    <html>
    <head>
    <title>Penggunaan Tag Link </title>
    </head>
    <body>
    <h1>Belajar Tag Link</h1>
    <p>Saya sedang belajar HTML dari
    <a href="https://www.google.com">google</a></p>
    </body>
    </html>
    Membuat check box

     Checkbox adalah jenis inputan yang cara memilihnya adalah dengan car
    a mencentang, sehingga memungkinkan user dapat memilih lebih dari sat
    u pilihan.
    • type=’checkbox’ itu adalah deklarasi agar inputan ini berbentuk checkbox
    • attribute name digunakan untuk memberikan nama pada inputan ini ketika nanti inputan form di proses.
    • attribute value digunakan untuk memberikan nilai pada inputan sehingga ketika user mencentang maka nilai yang dikiri
    mkan adalah value dari attribute ini.
    Check box di HTML-CONTOH 3
    <!DOCTYPE html>
    <html>
    <head>
    <title>Form HTML</title>
    </head>
    <body>
    <form action="proses.php" method="get">
    <p>Menu Minuman ?</p>
    <p><input type='checkbox' name='bahasa1' value='es teh' />es teh</p>
    <p><input type='checkbox' name='bahasa2' value='es jeruk' />es jeruk</p>
    <p><input type='checkbox' name='bahasa3' value='jus alpokat'/>jus alpokat</p>
    <input type='submit' name='tombol' value='Kirim' />
    </form>
    </body>
    </html>
    Membuat drop down list

    Dropdown List dalam pembuatan nya dilakukan dengan menggabungkan dua buah
    elemen yaitu select dan option. Select digunakan untuk membungkus seluruh elemen
    yang ada didalam option. Sedangkan option adalah nilai dropdown yang di inginkan.
    Drop down list di HTML-CONTOH 4

    <!DOCTYPE html>
    <html>
    <head>
    <title>Form HTML</title>
    </head>
    <body>
    <form action="proses.php" method="get">
    <p>Menu Makanan ?</p>
    <select>
    <option value="nasi goreng">nasi goreng</option>
    <option value="soto ayam">soto ayam</option>
    <option value="nasi campur">nasi campur</option>
    <option value="mie goreng">mie goreng</option>
    <option value="mie rebus">mie rebus</option>

    </select>
    <input type='submit' name='tombol' value='Kirim' />
    </form>
    </body>
    </html>
    Membuat iframe

     Iframe pada HTML merupakan singkatan dari Inline Frame. Tag "iframe" mendefinisikan suatu wilayah persegi panj
    ang beserta dokumen yang ditampilkan oleh browser yang terpisah dari dokumen lainnya, termasuk scrollbar dan bor
    der-nya. Inline frame digunakan untuk embed (menanamkan) dokumen lain bersamaan dengan dokumen HTML yang
    digunakan.

    Atribut 'src' digunakan untuk URL spesifik dari dokumen yang menempati sebuah frame.
    Sintak: <iframe src="URL"></iframe>
    Iframe di HTML-CONTOH 4

    <!DOCTYPE html>
    <html>
    <body>
    <p>Konten berada disini:</p>
    <iframe
    src="https://www.youtube.com/" height="300" width="400">
    </iframe>
    </body>
    </html>
    Thank you

    Anda mungkin juga menyukai