Scribd
Unggah
8 tayangan51 halaman

HTML Images, Tabel Dan Form

Dokumen ini membahas tentang cara menampilkan gambar, membuat tabel, dan form pada halaman web menggunakan HTML. Materi mencakup sintaks gambar, pembuatan tabel dengan atribut seperti colspan dan rowspan, serta penggunaan form dengan metode GET dan POST. Terdapat juga penjelasan tentang elemen input dalam form dan berbagai jenis kontrol form.

Diunggah oleh

Chanl_yn
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
8 tayangan51 halaman

HTML Images, Tabel Dan Form

Dokumen ini membahas tentang cara menampilkan gambar, membuat tabel, dan form pada halaman web menggunakan HTML. Materi mencakup sintaks gambar, pembuatan tabel dengan atribut seperti colspan dan rowspan, serta penggunaan form dengan metode GET dan POST. Terdapat juga penjelasan tentang elemen input dalam form dan berbagai jenis kontrol form.

Diunggah oleh

Chanl_yn
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 51

HTML Images, Tabel dan

Form
Pertemuan ke 2
Kompetensi Khusus

• Mahasiswa dapat menampilkan gambar,


membuat tabel dan form pada halaman
web.

• Noted: Akan lebih banyak praktek


langsung
• Install Noted++ (text editor)
Materi
1. Images pada web
2. Tabel pada web
3. Form pada web
1. Images pada Web
1. Images pada Web
• HTML Images Syntax
• Image Size - Width and Height
• Images in Another Folder
• Animated Images
• Images on link web
• HTML Background Images
HTML Images Syntax
• Cara menambahkan gambar ke situs web
menggunakan tag <img> dan harus membawa
setidaknya dua atribut yaitu atribut “src”
menunjukkan sumber gambar dan atribut “alt”
yang memberikan deskripsi gambar.
• Misalnya, jika kita ingin menambahkan gambar
dengan nama “logo.gif” kedalam halaman maka
kodenya sebagai berikut : <img src=“logo.gif”
alt=“Wrox logo”>
HTML Images Syntax
HTML Images Syntax
• contoh
Image Size - Width and Height
• You can use the style attribute to specify
the width and height of an image.
• Ada 2 cara:
– Menggunakan attribute style

– Alternatively, Menggunakan attribute width and height


attributes
Image Size - Width and Height
Images in Another Folder
• If not specified, the browser expects to find the
image in the same folder as the web page.
• However, it is common to store images in a sub-
folder. You must then include the folder name in
the src attribute:
Images on link web
• Some web sites store their images on
image servers.
• Actually, you can access images from any
web address in the world:
HTML Background Images
• To add a background image on an HTML
element, you can use the style attribute.
• To add a background image in HTML, use
the CSS property background-image.
HTML Background Images
2. Tabel Pada Web
2. Tabel Pada Web
• Membuat Tabel
• Caption Tabel
• Spanning Tabel
• Colspan & Rowspan
Membuat Tabel
• Cara membuat tabel pada HTML adalah dengan
menggunakan tag <table>. Didalam tag <table>,
sebuah tabel datanya ditulis baris demi baris.
• Membuat baris pada tabel dengan
menggunakan tag <tr> yang berarti Table Row.
• Setiap sel tabel ditulis di dalam tag row
menggunakan tag <td> yang berarti Table Data.
• Setiap header dapat ditulis <th> .
Membuat Tabel
Caption Tabel
• Menambahkan caption pada Tabel dengan
menggunakan tag :
<caption>judul tabel</caption>
Contoh
Border, Collapsed, Padding
• Border

• Collapsed

• Cell Padding
Spanning Tabel
• Pada tabel setiap sel kolom
memungkinkan untuk direntangkan
dengan cara menggabungkan beberapa
sel menjadi satu.
• Untuk merentangkan sel kolom pada tabel
dapat menggunakan atribut colspan.
• Sedangkan untuk merentangkan sel baris
pada tabel dapat menggunakan atribut
rowspan.
Colspan
Rowspan
Contoh
contoh
3. Form pada Web
3. Form pada Web
• Atribute Form
• Form method Atribute
– Methode GET
– Methode POST
• Form Controls
Form
• Form dalam web adalah untuk
memasukkan elemen-elemen yang biasa
digunakan untuk mengisi formulir secara
tertulis, hanya saja ini digunakan berbasis
web.
Atribute Form
• Form action attribute
– Atribut “action” mengindikasikan apa yang
akan terjadi ketika form disubmit, biasanya
nilai dari atribut “action” adalah sebuah
halaman di web server untuk menerima
informasi.
• Form method attribute
– Atribut “method” adalah bagaimana cara yang
digunakan untuk mengirimkan data ke server.
Method atribut terdiri dari GET dan POST.
Atribute Form
• <form>

• The <input> Element = isi dalam form


The <input> Elemen
• Input type =“text”
The <input> Elemen
• <input type="radio"> = buttons let a user select ONE of
a limited number of choices:
The <input> Elemen
• <input type="submit"> = defines a button for
submitting the form data
Form method Atribute
Form Method Attribut
• Get Method = mengirimkan data sebagai bagian dari
URL tersebut.

• Post Method = mengirimkan data dengan


menyembunyikan data dalam HTTP headers.
Methode GET
• The default method when submitting form
data is GET.
• Meskipun tidak menggunakan GET, ketika
submite data akan terlihat di page address
server
Methode GET
• Form dengan method GET

• Method GET menggunakan variabel


$_GET untuk menampung data/nilai
Methode POST
• Always use POST if the form data
contains sensitive or personal information.
• Methode POST tidak akan menampilkan
submit data di page address kolom
• Form submit dengan POST tidak
bookmarked
Methode POST
• Form dengan method POST

• Method POST menggunakan variabel


$_POST untuk menampung data/nilai
Contoh Change to
POST
Form Controls
• Form Control adalah sebuah cara yang
memungkinan pengguna memasukkan
informasi ke halaman web.
• Form Control secara individual menerima
semua jenis inputan berupa elemen
<input> tekstual, <textarea>, dan elemen
<select>.
Form Controls (1)
• Text input

• Password Input
Form Controls (2)
• Multiple-Line Text input (Textarea)
Form Controls (3)
• Buttons
Cara membuat button pada HTML bisa
menggunakan 2 cara yaitu dengan tag
<input> dan tag <button>
• Jika menggunakan tag <input> maka harus
menambahkan atribut “type”.
• Ada 3 buah “type” atribut untuk membuat button,
yaitu “submit”, “reset”, “button”
Form Controls (4)
• Cara menggunakan 3 “type” dari button
Form Controls (5)
• Check Boxes
Form Controls (6)
• Select Boxes
Form Controls (7)
• Select Boxes Grouping Options
Form Controls (8)
• Structure Form dengan <fieldset> dan <legend>
Ringkasan:
• Menampilkan gambar pada HTML
menggunakan tag <img> dan
menggunakan atribut “src”.
• Pada dasarnya jika ingin membuat form
input maka yang diperlukan adalah input
type text dan input type button.
• Berikut adalah contoh pembuatan form
lengkap dengan input text dan button.
Tugas Pilih Kendaraan Mobil

• Tampilkan web dibawah ini


Login

Tabel Mahasiswa UBM, Prodi TI

No Nama Jenis Kelamin Umur


Laki-laki Perempuan Pilih Mata Kuliah

1.

2.

3.

4.

5.

Anda mungkin juga menyukai