• Klik tertinggi

  • Backlink

  • Follow Fadilmuhdi's Blog on WordPress.com
  • Masukkan alamat surat elektronik Anda untuk mengikuti blog ini dan menerima pemberitahuan tentang tulisan baru melalui surat elektronik.

    Bergabunglah dengan 1 pengikut lainnya

  • fadilmuhdi

  • Statistik Blog

    • 120,458
  • Kategori

  • Arsip

  • Tulisan Teratas

pengenalan HTML 4 Pertemuan 4

1. Image HTML
Bayangkan apabila di web anda anda berisi tulisan dan tidak ada gambarnya pasti tidak menarik. Gambar di dalam suatu web page merupakan daya penarik bagi pengunjung. Adanya gambar di web anda akan memperindah tampilan. File gambar yang umum digunakan ada 3 jenis format yaitu PNG, GIF, dan JPG. Ketika anda memilih suatu gambar harus memperhatikan dari format gambar yang digunakan karena setiap gambar akan membutuhkan waktu tambahan untuk di download dan memperlambat awal penampilan suatu dokumen dalam browser. Oleh karena itu, berhati-hatilah dalam memilih gambar dan menyertakannya ke dalam suatu dokumen. Untuk menysipkan gambar pada dokumen html di sediakan secara khusus yaitu Tag <img>.
Sintaks penulisannya :
<img src=”url” />
Tag <img> mempunyai atribut di antaranya: Atribut Penjelasan
src
Url dari file image/direktori gambar
align
Letak gambar pada teks, nilai atributnya left, right, top, middle, dan bottom
width
Lebar gambar dalam satuan pixel
height
Tinggi gambar dalam satuan pixel
alt
Menampilkan teks pengganti jika gambar tidak tampil di brows
border
Memberi bingkai pada gambar
latihan1.html
<!DOCTYPE html >
<html>
<head >
<title>Contoh Posisi Img</title>
</head >
<body>
<p>
Logo Amikom
<img src=”amikom.jpg” width=”223″ height=”226″ align=”bottom” alt=”Logo Amikom”/> menggunakan align=”bottom”.
</p>
</body>
</html>
Catatan:
Apabila anda ingin melihat perbedaan letak posisi gambar pada latihan1.html, silahkan ganti pada atribut align=”bottom”. Apabila anda ingin melihat fungsi atribut alt, url dari file image/direktori gambar anda salahkan.
latihan2.html
<!DOCTYPE html >
<html>
<head >
<title>Contoh Border Img</title>
</head >
<body >
<p>
Logo Amikom
<img src=”amikom.jpg” width=”223″ height=”226″ align=”bottom” alt=”Logo Amikom” border=”1″ /> menggunakan border=”1″. </p>
</body>
</html>
Catatan:
Apabila anda ingin melihat perbedaan ketebalan border gambar pada latihan2.html, silahkan ganti pada atribut border=”1”.
Image Sebagai Link
Gambar bisa digunakan sebagai link untuk suatu dokumen.
latihan3.html
<!DOCTYPE html >
<html>
<head >
<title>Img sebagai suatu link</title>
</head >
<body >
<p>
<b>Untuk mengunjungi website amikom klik gambar di samping</b>
<a href=”http://www.amikom.ac.id”><img src=”amikom.jpg” width=”50″ height=”50″ align=”middle” alt=”Tombol” /> </a> </p>
</body>
</html>
2. Tabel HTML
Tabel dapat digunakan untuk memberikan data dalam bentuk kolom dan baris. Sebuah tabel mempunyai judul, baris untuk informasi, dan sel untuk setiap itemnya. Tabel dapat di isi dengan daftar item, paragraf, form, gambar, teks-teks preformatted, dan bahkan tabel-tabel yang lain (tabel dalam tabel). Untuk membuat tabel digunakan tag awal <table> dan tag penutup </table>. Sintaks penulisannya :
<table>
<tr>
<td>Data Tabel</td>
<tr>
</table>
Elemen-Elemen Tabel Elemen Penjelasan
<table> . . . </table>
Tag pembentuk tabel. jika border disertakan, maka tabel akan tampil disertai border. Nilai border 0 – 30.
<caption> . . . </caption>
Pembentuk judul tabel. judul dapat diberi tag apa saja.
<tr> . . . </tr>
Penjelaskan baris tabel dalam tabel. atribut yang dipakai : align(left, center dan right) atau valign(top, middle dan bottom).
<th> . . . </th>
Pembentuk sel header tabel. Secara default teks dalam sel ini di tebalkan dan di tampilkan ditengah.
<td> . . . </td>
Pembentuk sel data dalam tabel.
Catatan :
Jumlah baris tabel ditentukan dengan banyaknya <tr> . . . </tr> yang di tulisankan dalam elemen tabel, dari <table> . . . </table>.
Jumlah kolom dalam tabel ditentukan dengan banyaknya <td> . . . </td> di dalam setiap definisi baris, dari <tr> . . . </tr>.
Setiap baris dalam tabel akan mempunyai jumlah kolom yang berbeda.
Atribut Tag <table> Catatan :
Atribut yang didefinisikan dalam <th> . . . </th> atau <td> . . . </td> akan menggantikan alignment default yang didefinisikan dalam <tr> . . . </tr>
Atribut Tag <tr>
Atribut Tag <td> dan <th>
Berikut ini adalah beberapa contoh penggunaan atribut pada tag <table> dan <td>:
2.1 Atribut Width, Border, Bordercolor latihan4.html
<!DOCTYPE html >
<html>
<head >
<title>Atribut Width, Border, Bordercolor</title>
</head >
<body >
<table width=”500″ border=”1″ bordercolor=”#FF0000″>
<caption>Atribut Width, Border, Bordercolor</caption > <tr>
<th width=”200″>Baris 1 Kolom 1</th> <th width=”180″>Baris 1 Kolom 2</th>
</tr >
<tr>
<td>Baris 2 Kolom 1</td >
<td>Baris 2 Kolom 2</td >
</tr>
<tr>
<td>Baris 3 Kolom 1</td>
<td>Baris 3 Kolom 2</td>
</tr>
</table>
</body>
</html>
2.2 Atribut Backround, Height, Cellspacing, Cellpadding latihan5.html
<!DOCTYPE html >
<html>
<head >
<title>Atribut Backround, height, cellspacing, cellpadding</title>
</head>
<body>
<table width=”1024″ border=”3″ background=”WindowsXp.jpg” height=”768″ cellspacing=”25″ cellpadding=”10″ align=”center”> <caption>Atribut Backround, height, cellspacing, cellpadding </caption>
<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>
2.3 Atribut Colspan, Rowspan, Valign latihan6.html
<!DOCTYPE html>
<html>
<head >
<title>Atribut Colspan, Rowspan, Valign </title>
</head >
<body>
<table width=”500″ border=”1″ bgcolor=”#FFFF00″ align=”center”> <caption>Atribut Colspan, Rowspan, Valign </caption> <tr>
<td colspan=”2″>Kolom 1 dan Kolom 2 Di Gabung</td>
</tr >
<tr>
<td rowspan=”2″ valign=”top”>Baris 2 dan Baris 3 Di Gabung</td > <td bgcolor=”#0000FF”>Baris 2 Kolom 2</td>
</tr >
<tr>
<td bgcolor=”red”>Baris 3 Kolom 2</td >
</tr> </table>
</body>
</html>
2.4 Empty Cell
Penggunaan mnemonic “&nbsp” untuk menangani tabel yang belum mempunyai isi. latihan7.html
<!DOCTYPE html >
<html>
<head>
<title>Empty Cell</title>
</head>
<body >
<table border=”1″>
<caption>Empty Cell</caption >
<tr><td>Nama</td>
<td>TTL</td ></tr>
<tr><td>&nbsp;</td>
<td>Newyogkarto, 23 Maret 1995</td></tr>
</table>
</body>
</html >
2.5 Tabel dalam Tabel latihan8.html
<!DOCTYPE html >
<html>
<head>
<title>Tabel dalam Tabel</title>
</head>
<body>
<table border=”1″>
<tr><td>Parent 1</td>
<td><table border=”1″>
<tr>
<td>Child 1</td>
<td><table border=”1″>
<tr>
<td>Grandson 1</td>
<td>Grandson 2</td>
</tr>
<tr>
<td>Grandson 3</td>
<td>Grandson 4</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>Child 2</td>
<td>Child 3</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>Parent 2</td>
<td>Parent 3</td>
</tr>
</table>
</body>
</html>
3. Form dan Input HTML
Form merupakan salah satu elemen HTML yang digunakan untuk mendapatkan masukan dari pengguna web. Pengguna web dapat memasukkan input melalui halaman-halaman HTML. Umumnya pengolahan form dilakukan pada server dengan menggunakan skrip yang bersifat server-side seperti PHP, ASP dan lain sebagainya. ). Untuk membuat form digunakan tag awal <form> dan tag penutup </form>.
Sintaks penulisannya :
<form action=”url” method=”get|post”>
</form>
3.1 Atribut Tag <form> Atribut Penjelasan
Method
Metode pengiriman data ke tujuan, yaitu:
GET : mengirimkan data pada server dengan cara meletakkan data pada bagian akhir URL
POST : mengirimkan datanya secara terpisah.
Action
Menentukan lokasi dari script yang akan memproses data dari form
3.2 Jenis Masukan dalam Form
Jenis masukan dalam satu formulir dibedakan menjadi :
Text, digunakan untuk mengisi suatu nilai dapat berupa teks atau angka.
Radio, elemen isian berupa pilihan dimana hanya satu pilihan yang dapat dilakukan.
Checkbox, elemen yang menyediakan beberapa pilihan bisa lebih dari satu.
List, elemen pilihan dalam bentuk daftar.
Button, elemen berupa tombol untuk melakukan suatu proses.
Submit, elemen tombol yang digunakan untuk memanggil url.
Reset, elemen tombol yang digunakan untuk mengembalikan kondisi awal.
Image, digunakan sebagai pengganti button, berupa gambar yang dapat melakukan proses.
Textarea, elemen yang dapat menampung kumpulan teks ketikan dari user.
File, elemen button yang dapat memanggil file atau gambar dari storage.
Password, elemen berupa teks yang khusus digunakan untuk mengisi password.
3.2.1 Tag <TEXTAREA>
Tag <TEXTAREA> digunakan untuk membuat sebuah kotak teks multi baris. Tag ini mempunyai beberapa atribut, yaitu :
3.2.2 Tag <SELECT>
Tag <SELECT> digunakan untuk membuat sebuah daftar pilihan. Tag ini memiliki beberapa atribut, yaitu :
latihan9.html
<!DOCTYPE html >
<html>
<head >
<title>Contoh Tag Textarea dan Tag Select</title> </head >
<body>
<table width=”100%” >
<tr>
<td>Pilih Jenis Kendaraan </td>
<td><select name=”motor”>
<option value=”yamaha”>Yamaha</option >
<option value=”honda”>Honda</option >
<option value=”suzuki”>Suzuki</option></select></td> </tr >
<tr>
<td> Alamat </td>
<td><textarea name=”alamat” cols=”55″ rows=”5″></textarea></td> </tr >
</table >
</body>
</html >
3.2.3 Tag <INPUT>
Tag <INPUT> digunakan untuk membuat komponen-komponen yang digunakan untuk meminta informasi dari user, misalnya kotak teks, kotak pilihan, tombol dan lain-lain. Tag ini tidak memerlukan tag penutup. Tag ini mempunyai beberapa atribut, yaitu :
Tipe input yang dapat dibuat adalah :
Text, digunakan untuk membuat kotak teks
Password, digunakan untuk membuat kotak teks, tetapi semua karakter akan ditampilkan dengan tanda *.
Check Box, digunakan untuk membuat suatu daftar pilihan yang dapat dipilih lebih dari satu.
Radio, digunakan untuk membuat suatu daftar pilihan yang hanya dapat dipilih satu saja.
File, digunakan untuk memanggil file atau gambar dari storage.
Hidden, Digunkan untuk mengirim data ke suatu aplikasi yang tidak dingginkan untuk dilihat oleh browser.
Reset, digunakan untuk membuat tombol yang fungsinya untuk menghapus semua isian form yang telah diberikan.
Submit, digunakan untuk membuat tombol yang fungsinya untuk mengirimkan data form agar diolah.
latihan10.html
<!DOCTYPE html >
<html>
<head >
<title>Input Data Berita</title>
</head >
<body text=”#0000FF” >
<h2>Tambah Berita</h2>
<form method=”post” action=”#” enctype=”multipart/form -data”>
<table width=”100%”>
<tr>
<td>Judul</td>
<td> : <input type=”text” name=”judul” size=”60″/></td>
</tr>
<tr>
<td>Kategori</td>
<td> :<select name=”kategori” >
<option value=”kategori_berita” selected>- Pilih Kategori </option>
<option value=”komputer”>Komputer
<option value=”ekonomi”>Ekonomi
<option value=”pendidikan”>Pendidikan
</select>
</td>
</tr>
<tr>
<td>Headline</td>
<td> : <input type=”radio” name=”headline” value=”Y” checked/>Y
<input type=”radio” name=”headline” value=”N”/> N</td>
</tr>
<tr>
<td>Isi Berita</td>
<td> : <textarea name=”isi_berita” cols=”45″ rows=”6″></textarea>
</td>
</tr>
<tr>
<td>Gambar</td>
<td> : <input type=”file” name=”fupload” size=”40″></td>
</tr>
<tr>
<td colspan=2>
<input type=”submit” value=”Simpan”/>
<input type=”reset” value=”Reset”/>
</td>
</tr>
</table>
</form>
</body>
</html>
4. Elemen Label, Fieldset dan Legend
Elemen label memberikan fasilitas untuk menambahkan teks pada elemen masukan form. Elemen ini diisikan dengan deskripsi dari elemen masukan yang ingin ditambahkan dan harus memiliki atribut for. Atribut for pada elemen label berisikan nilai yang sama dengan atribut id pada elemen masukan form. Pengisian nilai yang sama akan mengikatkan elemen label dengan elemen masukan sehingga pengguna dapat langsung mengisikan nilai dengan melakukan klik teks yang dihasilkan oleh elemen label. Elemen fieldset merupakan elemen yang digunakan untuk membungkus beberapa elemen masukan form, untuk menandakan bahwa elemen-elemen tersebut merupakan elemen masukan yang berada pada satu grup yang sama, atau saling berhubungan. Sedangkan Elemen legend digunakan untuk memberikan judul pada sebuah fieldset.
Sintaks penulisannya :
<fieldset>
<legend>Judul</legend>
</fieldset>
latihan11.html
<!DOCTYPE html >
<html> <head >
<title>Penggunaan Label, Fieldset dan Legend</title>
</head >
<body>
<form action=”#” method=”post”>
<fieldset>
<legend>Form Login</legend>
<label for=”username”>Username</label>
<input type=”text” name=”username” id=”username”/>
<label for=”password”>Password</label>
<input type=”password” name=”password” id=”password”/>
<input type=”submit” name=”submit” value=”Login”/>
</fieldset>
</form>
</body>
</html>

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: