Scribd Logo
Unggah

Selamat datang di Scribd!

  • Modul TM3

    Diunggah oleh

    ashishishu
    4 tayangan30 halaman

    Judul Asli

    MODUL TM3

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    DOCX, 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 DOCX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    4 tayangan30 halaman

    Modul TM3

    Diunggah oleh

    ashishishu

    Hak Cipta:

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

    MODUL PERKULIAHAN

    PEMROGRAMAN WEB

    TAG HTML(2)

    Fakultas Program Studi Tatap Muka Kode MK Disusun Oleh

    3
    ILMU KOMPUTER TEKNIK W151700011 Kurnia Gusti Ayu, M.Kom
    INFORMATIKA

    Abstract Kompetensi
    Mahasiswa Dapat membuat Mengenali tag dan elemen-
    konsep tag-tag dasar HTML (Table, elemen dalam HTML
    frame, form )
    Table

    Tabel digunakan untuk menyajikan data dalam bentuk kolom dan baris. Untuk
    membuat sebuah tabel, diperlukan tiga buah tag yang berpasangan yaitu :

     <TABLE>...</TABLE> : Digunakan untuk mendefinisikan sebuah tabel


     <TR> ... </TR> : Disebut juga Table Row digunakan untuk membuat sebuah baris
     <TD> ... </TD> : Disebut juga Table Data digunakan untuk membuat kolom dan data

    Pola dasar dalam pembentukan tabel adalah sebagai berikut :

    <BODY>
    <TABLE>
    <TR>
    <TD>Tabel 1 baris 1 kolom</TD>
    </TR>
    </TABLE>
    </BODY

     Membuat Judul Tabel


    o Judul tabel dapat dibuat dengan menambahkan tag <CAPTION> dan
    </CAPTION>. Tag ini diletakkan setelah <TABLE>. Letak judul ini adalah tepat
    di atas tabelnya.
    o Untuk mengatur tata letak judul tabel, dapat digunakan atribut ALIGN dengan
    nilai ”top” jika judul yang diinginkan berada di atas tabel.
    o Dan menggunakan nilai ”bottom” jika judul yang diinginkan berada di bawah
    tabel
    o Untuk mengatur kiri dan kanan, digunakan bantuan sepasang tag <DIV>
    dengan atribut ALIGN yang mempunyai nilai ”right”, ”left”, dan ”center”.

     Tag <table> memiliki beberapa atribut diantaranya :


    – Align, perataan: rata kiri (left), tengah (center) atau kanan (right).
    – Bgcolor, menentukan gambar yang digunakan sebagai background tabel
    – Width, untuk menentukan lebar tabel dalam pixel atau percent.
    – Height, untuk menentukan tinggi tabel
    – Border, untuk menentukan ukuran border tabel (dalam pixel).
    – Cellpadding, untuk jarak antara isi cell dengan batas cell (dalam pixel).
    – Cellspacing, untuk mengatur spasi/jarak antar cell (dalam pixel).

    Tag <tr>

    • Tag ini digunakan untuk membuat baris baru (pada tabel). Terdiri dari atribut:
    – Align, untuk perataan: rata kiri (left), tengah (center) atau kanan (right).
    – Bgcolor, untuk warna latar belakang dari baris.
    – Valign, untuk perataan vertikal: top, middle atau bottom.

    Tag <td>

    Tag ini digunakan untuk membuat kolom baru pada tabel. Attributnya adalah:

    • Align, untuk menentukan perataan kolom


    • Background, untuk menentukan image yang digunakan sebagai latar belakang dari
    kolom.
    • Bgcolor , untuk menentukan warna latar belakang
    • Colspan, untuk menggabungkan kolom ( merge kolom)
    • Height, untuk mengatur ukuran tinggi cell dalam pixels.
    • Nowrap , untuk membuat supaya isi dari kolom tetap berada pada satu baris.
    • Rowspan, untuk menggabungkan baris ( merge baris)
    • Valign, untuk mengatur perataan vertikal: top, middle atau bottom.
    • Width, untuk menentukan lebar kolom dalam pixel atau percen.

    Berikut contoh penggunaan tag < table>


    1. Tabel.htm

    Hasil program :

    2. Tabel2.htm
    Hasil program :

    3. Tabel3.htm
    Hasil Program :
    4. Tabel4.htm

    Hasil program :
    5. Tabel5.htm

    Hasil Program :
    6. Tabel6.htm
    Hasil Program :
    FORM

    Form dalam HTML adalah suatu bagian yang berfungsi sebagai input atau masukan dari
    pengguna yang kemudian akan diproses atau diolah untuk dapat digunakan sesuai dengan
    kebutuhan. Contohnya proses pengiriman data, browse, hapus, penyuntingan data dan lain
    sebagainya. Kategori penggunaan form: form pencarian data dan form pengumpulan data. Data
    tersebut bisa berisi data pendaftaran, data login, data pemesanan, data pencarian, dan
    sebagainya.
    Pada form gambar 1 tersebut, ada data yang boleh diisi bebas tanpa batasan tertentu (tidak
    termasuk validasi data), ada data yang hanya bisa dipilih antara dua pilihan saja, dan ada data
    yang bisa dipilih berdasarkan range (rentang) tertentu.
    • Validasi data : kesesuaian data dengan ketentuan atau aturan yang berlaku.
    • Verifikasi data : pemeriksaan tentang kebenaran data, laporan, dsb.

    Elemen Pada FORM :


     Sintak dasar membuat Form :

     Tag <form> merupakan tag yang digunakan untuk mendefinisikan sebuah form.
    Atribut pada form :
    • Name ; Untuk pemberian nama pada form
    • Method ; Untuk menentukan metode pengolahan form ( get atau post) , metode
    atau cara yang digunakan untuk menyimpan data ke server
    Method GET :
    • Hanya dapat mengirim data dalam ukuran kecil
    • Data yang dikirim akan ditampilkan pada address bar browser
    Method POST :
    • Dapat mengirim data dalam ukuran besar
    • Data tidak ditampilkan pada address bar
    • Action ; Untuk menentukan URL atau direktori dari file yang digunakan untuk
    mengolah form tersebut
    • <form name=“login” method =“get” action=“cek_login.html”
     Tag <input> digunankan untuk membuat inputan dengan berbagai macam tipe. Atribut
    yang digunakan pada tag ini :
    • Name, untuk memberi nama sebagai identitas data yang akan dikirim
    • Value, untuk memberi nilai/ isi data yang akan dikirim
    • Size , untuk mengatur lebar inputan
    • Placeholder , mengatur tulisan yang tampil ketika nilainya kosong
    • Disabled, untuk membuat input tidak dapat diubah isinya
    • Readonly, seperti disabled tetapi masih bisa diubah nilainya dengan skrip
    • Type , untuk menentuk tipe inputan
    • Id, memberi identitas data yang akan dikirim

    Khusus tipe radio dan checkbox memiliki atribut checked. Adapun macam – macam
    tipe input yang dapat diberikan pada atribut Type, yaitu :
    • Text , untuk memasukkan text
    • Hidden , untuk menyembunyikan input
    • Password , untuk memasukkan password .
    • Radio , untuk memberi pilihan beberapa nilai yang dipilih dengan cara diklik
    • Checkbox, untuk memberi pilihan dengan cara dicentang
    • Submit , untuk membuat tombol yang akan mengirim data ketika diklik
    • Reset , untuk membuat tombol yang akan mengkosongkan formulir ketika diklik
    • Button, untuk membuat tombol

    Pada HTML 5 ada penambahan beberapa tipe input. Tipe input yang ditambahkan
    pada HTML 5 adalah sebagai berikut :
    • Email , untuk memasukkan email
    • Number , untuk memasukkan angka
    • Time , untuk memasukkan waktu
    • Date , untuk memasukkan tanggal
    • URL , untuk memasukkan URL ( alamat web)
    • Color untuk memilih warna
    Submit Button dan Reset Button
    Submit Button berfungsi mengirimkan semua input yang sudah diberikan ke Server.
    Proses ini sesuai dengan atribut ACTION yang diberikan pada tag <form>.
    Sedangkan Reset Button berfungsi membersihkan semua input yang sudah diberikan. Pada
    akhir sebuah formulir umumnya tombol SUBMIT dan RESET selalu ditampilkan sebagai
    berikut :

    <input type = “submit”>

    <Input type= “reset”>

    :
    Berikut contoh :
    Hasil Program :
    Frame
    Elemen dalam HTML digunakan untuk membangun web page yang memungkinkan
    penampilan beberapa web page ditampilkann dalam satu window browser. Window dalam
    browser dibagi menjadi beberapa windows yang disebut frame.
    Frame atau yang biasa juga disebut bingkai, merupakan salah satu fasilitas yang disediakan
    oleh web browser dengan cara membagi Windows-Client Area menjadi beberapa bagian (sub
    window). Pembagian ini dapat dilakukan secara horisontal maupun vertikal. Banyak sekali yang
    dapat dilakukan oleh frame seperti tampilan web yang lebih bervariasi
    Dasar penggunaan frame adalah memiliki dua buah dokumen yang berbeda, yaitu :
    1. Layout documents (dokumen tata letak) Dokumen ini biasanya tidak menampilkan isi
    apapun, fungsinya hanya untuk membagi jendela menjadi beberapa bagian. Dalam frame,
    dokumen ini dibuat dengan menggunakan sepasang tag <FRAMESET>.
    2. Content Documents (dokumen isi). Dokumen ini adalah dokumen yang nantinya akan
    mengisi frame tersebut. Dokumen ini adalah merupakan dokumen HTML biasa, namun
    dokumen ini nantinya akan divariasikan melalui Hyperlink, dimana link dapat dibuat pada satu
    bingkai dapat ditampilkan pada bingkai yang lain. Dokumen ini didefinisikan dengan tag
    <FRAME SRC=”url”>

    Membuat bingkai FRAME baris dan kolom


    • Membuat bingkai FRAME baris dan kolom, serta variasi FRAME Membuat bingkai/frame
    sama dengan membuat layout documents yaitu dengan menggunakan sepasang tag
    <FRAMESET>...</FRAMESET>.
    • Dalam pembuatan frame, tidak menggunakan sepasang tag <BODY>...</BODY>
    sebagaimana jika ingin membuat dokumen HTML .
    • Sepasang tag <BODY> tersebut akan digantikan dengan sepasang tag <FRAMESET>.
    Sehingga bentuk struktur dokumen HTMLnya akan berubah menjadi seperti di bawah ini
    :
    <HTML>

    <HEAD>

    <TITLE>.......<TITLE>

    </HEAD>

    <FRAMESET>
    Isi Bingkai

    </FRAMESET>

    </HTML>

    Aturan Dasar Frame

    Aturan-aturan dasar dalam pembagian baris dan kolom pada tag <FRAMESET> adalah
    sebagai berikut :

    1. Dalam pembagian baris/kolom, setiap nilai dipisahkan dengan tanda koma ”,”
    Baris/kolom harus mempunyai nilai berdasarkan banyak baris/kolom tersebut. Misalnya nilai
    25%, 25%, 50% akan membuat tiga buah baris/kolom pada frame.

    Masing-masing atribut tersebut mempunyai nilai yang dapat ditentukan dengan piksel atau
    persentase. Misalnya : <FRAMESET COLS=”100, 100”> berarti frame akan terdiri atas dua
    kolom yang masing-masing kolom lebarnya sebanyak 100 piksel.

    2. Untuk membuat sisa nilai persentase, biasanya menggunakan tanda * Misalnya :


    25%,* Artinya akan membuat dua buah baris/kolom yang pertama lebarnya 25% dan yang
    kedua akan menggunakan berapa pun lebar dari ruang yang tersisa.

    3. Ada juga penggunaan COLS=*, 2* Hal ini berarti pembagian frame menjadi dua
    kolom, dimana kolom kedua memiliki lebar dua kali lebih besar dari kolom pertama.

    Contoh :
    Hasil :

    Penjelasan :

     Tag <FRAME SRC=”url”> digunakan untuk mengisi sebuah frame yang akan
    menunjukkan sebuah alamat/lokasi suatu file yang akan ditampilkan. Penerapannya
    sama dengan tag <IMG SRC=”url”>.
     Jumlah tag <FRAME SRC=”url”> tergantung pada jumlah frame kolom atau baris
    yang ditentukan dari tag <FRAMESET>.
     Jika frame terdiri atas dua baris atau kolom, maka sebanyak dua tag <FRAME
    SRC=”url”> harus dituliskan.
     <frame src = “ikan.html” > merupakan file html sebelumnya yang telah dibuat.

    Berikut contoh frame dengan 3 baris :

    Hasil :
    Atribut Format Frame

    Frame yang telah dibuat dapat diformat sesuai dengan keinginan pembuatnya. Format pada
    frame antara lain MARGIN, BORDER, NORESIZE, dan SCROLLING. Semua format tersebut
    merupakan atribut yang terdapat pada tag <FRAME>.

    • Atribut Margin

    Dokumen HTML yang mengisi sebuah frame dapat ditentukan marginnya, baik margin kiri
    maupun margin kanan. Selain margin kiri dan kanan, dapat ditentukan pula margin atas dan
    bawah. Untuk menentukan margin-margin tersebut digunakan atribut MARGINWIDTH dan
    MARGINHEIGHT pada tag <FRAME>. Atribut-atribut ini menggunakan value/nilai dalam satuan
    piksel.

    • Atribut Border

    Berguna untuk mengatur tebal-tipisnya garis pemisah antar frame. Jika tidak diinginkan
    adanya garis pemisah, dapat menambahkan nilai ”0” pada atribut Border.

    • Noresize

    Jika frame yang telah dibuat tidak dapat diubah ukurannya ketika ditampilkan pada browser,
    maka dapat ditambahkan atribut NORESIZE pada tag <FRAME>.

    • Atribut Scrolling

    Jika isi dokumen HTML yang dimasukkan ke dalam frame mempunyai karakter yang
    panjang dan lebar nya melebihi panjang dan lebar jendela browsernya, maka frame dari isi
    dokumen tersebut akan mengandung scroll kiri-kanan atau scroll atas-bawah (Batang
    penggulung).

    • Pada atribut TARGET dapat diganti menjadi :

     _self : Menampilkan link target pada frame yang sama.


     _parent : Menampilkan link target yang akan menutup seluruh jendela browser
     _top : sama dengan _parent
     _blank : Menampilkan link target pada jendela browser yang baru
    Contoh :
    Margin.htm

    Hasil :
    Margin2.htm

    Hasil :

    Scrolling = “yes”

    Border = “5” ketebalan garis pemisah

    VariasiFrame.htm
    Hasil :

     Link frame
    Hasil :

    Contoh klik Link Latihan , maka

    Anda mungkin juga menyukai