IMAGE TABLE DAN LINK HTML 2 Peng Komp
IMAGE, TABLE, DAN LINK HTML
2 Peng. Komp & TI 2 C IMAGE HTML Bentuk penulisan Image HTML <img src="Nama. File. Gambar"> Nama. File. Gambar = file gambar yang mempunyai ekstensi. GIF, . JPG, atau. PNG. Bentuk penulisan lain yang dianjurkan (XML style) : <img src="Nama. File. Gambar" />
3 Peng. Komp & TI 2 C IMAGE HTML (cont. ) Contoh Image HTML Contoh pembuatan image HTML dengan ukuran yang ditentukan: <HTML> <BODY> <P>Gambar dengan ukuran default: <IMG SRC="gambar 1. jpg"></P> <P>Gambar dengan ukuran ditentukan: <BR> <IMG SRC="gambar 1. jpg" WIDTH=200 HEIGHT=300></P> </BODY> </HTML>
4 Tabel HTML <table> definisi tabel </table> Penanda baris : <tr> definisi baris </tr> Penanda kolom : <td> data </td> Teks ditebalkan di tengah : <th> data </th> Pinggiran tabel : <table border> Tulisan judul tabel : <caption>. . . </caption> Alignment horizontal untuk sel : Align = {left/center/right} Alignment vertical dalam sel : Valign = {top/middle/bottom} Kolom gabungan : <colspan=“banyaknya kolom yg digabung”> Baris gabungan : <rowspan=“banyaknya bais yg digabung”> Cellpading : Membuat spasi lebih, antara sel dan bordernya Cellspacing : Menambah jarak antar sel Peng. Komp & TI 2 C
5 Tabel HTML (cont. ) Contoh Tabel HTML Peng. Komp & TI 2 C
6 Tabel HTML (cont. ) Contoh Tabel HTML Peng. Komp & TI 2 C
7 Tabel HTML (cont. ) Contoh Tabel HTML Peng. Komp & TI 2 C
8 Tabel HTML (cont. ) Contoh Tabel HTML Peng. Komp & TI 2 C
9 Tabel HTML (cont. ) Contoh Tabel HTML Peng. Komp & TI 2 C
10 Peng. Komp & TI 2 C LINK HTML - Kemampuannya untuk memberikan link dari satu teks dan/ atau gambar menuju ke dokumen atau bagian lain. - Browser web akan menyorot (highlight) teks atau gambar yang diidentifikasi sebagai link dengan warna dan/ atau garis bawah untuk menunjukkan bahwa itu adalah hyperteks link (sering disingkat menjadi hyperlink atau link saja). - Tag Anchor untuk membuat link dalam HTML digunakan tag <a>, atribut href untuk mendefinisikan lokasi dari link. <A HREF=”http: //www. microsoft. com”> clik here to show it</A>
11 Peng. Komp & TI 2 C LINK HTML Ada tiga jenis link : Link Absolut Link yang berada pada website lain di Internet. Harus menuliskan alamat lengkap dari website yang dituju. Contoh : <a href=”http: //www. gunadarma. ac. id>Universitas Gunadarma</a> Link Relatif Link ke page lain pada komputer yang sama. Bila file dalam direktori yang sama cukup menuliskan nama filenya saja, jika berbeda direktori copy paste tempat file berada. Contoh : <a href=”tagdasar. htm> TAG DASAR </a> Link pada dokumen yang sama Jika dokumen panjang, saat ditampilkan dalam windows browser web akan mengharuskan scroll layar. Untuk memudahkan dibuat link antar bagian : - Pada bagian yang akan dituju ketiklah : <a href="#Menu">Kembali ke Awal? </a> - Pada bagian isi (teks yang dituju) harus diketik : <a name="Menu"> Menu Awal </a> untuk menandakan bahwa akan kembali ke Menu Awal.
12 Peng. Komp & TI 2 C CONTOH LINK HTML Pertama buatlah dokumen utama dengan sintaks berikut ini : Dari dokumen utama terdapat 3 link yang digunakan, yang pertama link relatif menuju “Halaman selanjutnya”, yang kedua link absolut menuju www. google. com, yang ketiga link pada dokumen yang sama menuju “Menu Awal”
13 Peng. Komp & TI 2 C CONTOH LINK HTML (cont) Selanjutnya buatlah file “image link. htm” untuk menuju link “Halaman selanjutnya” dengan sintaks berikut ini : Untuk menggunakan link absolut menuju www. google. com harus online (menggunakan internet), untuk melihat hasil link pada dokumen yang sama menuju “Menu Awal” perkecil tampilan lalu klik “kembali ke atas”
14 CONTOH LINK HTML (cont) Saat gambar di klik Peng. Komp & TI 2 C
- Slides: 14
