TAG HTML LANJUT Tujuan Instruksional :

Transkripsi

1 3 TAG HTML LANJUT Tujuan Instruksional : 1. Mahasiswa mengetahui tag-tag tingkat lanjut pada HTML 2. Mahasiswa dapat menyusun dan menyimpan sebuah dokumen HTML dengan tag HTML lanjut 3. Mahasiswa dapat menerapkan tag HTML dasar untuk menyisipkan gambar dan membuat hyperlink pada dokumen HTML

2 A. Tag Image 1. Dalam HTML, gambar atau image didefinisikan dengan menggunakan tag <img>. 2. Tag <img> tidak memiliki tag akhir, maksudnya tidak perlu ditutup dengan tag </img>, sama seperti halnya dengan tag <br> dan <hr>. 3. Untuk dapat menampilkan image, diperlukan atribut SRC (singkatan dari kata source ). Nilai dari SRC ini berisikan nama file image (beserta lokasi tempat penyimpanan file tersebut) yang ingin ditampilkan. 4. Format dasar penulisan tag <img> adalah sebagai berikut : <img src="nama_file_image"> Atau : <img src="lokasi_penyimpanan/nama_file_image"> 5. Bila file image yang digunakan berada pada satu folder (lokasi) penyimpanan yang sama dengan dokume HTML, maka digunakan format yang pertama, misalnya : <img src="foto.jpg"> Namun bila file image yang digunakan disimpan pada folder (lokasi) yang berbeda maka digunakan format yang kedua, misalnya disimpan pada folder bernama image : <img src="image/foto.jpg"> Atribut Alt Atribut ALT digunakan untuk mendefinisikan teks alternatif yang akan ditampilkan bila image yang diinginkan, karena suatu dan lain hal, tidak tampil di web browser. Format penulisannya adalah sebagai berikut : <img src="foto.jpg" alt="ini gambar foto"> Atribut ALT perlu digunakan untuk memberi gambaran/penjelasan kepada pengakses apa yang seharusnya ditampilkan pada dokumen HTML tersebut. Image tidak tampil disebabkan oleh beberapa sebab, seperti image tersebut sudah tidak ada lagi, atau adanya kesalahan dalam penulisan nama file dan lokasi penyimpanan file tersebut. Atribut Align Atribut ALIGN digunakan untuk mendefinisikan posisi image terhadap teks yang diinginkan. Format penulisannya adalah sebagai berikut : <img src="foto.jpg" align="left"> Ada beberapa value yang bisa diberikan pada atribut ALIGN ini, yaitu : 22 E-Commerce - Akademi Akuntansi Y.A.I

3 LEFT, image akan ditampilkan di sebelah kiri teks (paragraf) RIGHT, image akan ditampilkan di sebelah kanan teks (paragraf) TOP, image akan ditampilkan secara vertikal di sisi atas teks. MIDDLE, image akan ditampilkan secara vertikal di sisi tengah teks. BOTTOM, image akan ditampilkan secara vertikal di sisi bawah teks. Tanpa atribut ALIGN, secara default teks akan ditampilkan di bawah, yaitu seperti pada ALIGN=BOTTOM. Atribut Border Atribut BORDER digunakan untuk mendefinisikan besarnya garis batas di sekeliling image yang ditampilkan. Bila diset BORDER=0, maka garis batas tidak akan ditampilkan. Format penulisannya adalah sebagai berikut : <img src="foto.jpg" border="0"> Atribut Background Untuk menjadikan sebuah image sebagai latar belakang sebuah dokumen HTML tag <img> tidak digunakan. Yang dibutuhkan adalah atribut BACK- GROUND. Atribut BACKGROUND disisipkan pada tag untuk menjadikan sebuah image sebagai latar belakang seluruh dokumen HTML. <body background="foto.jpg"> Secara default image tersebut akan disusun secara tile sebagai latar belakang dokumen HTML. Atribut BACKGROUND juga dapat digunakan untuk memberikan latar belakang pada tabel (disisipkan pada tag <table>) dan juga sel data (disisipkan pada tag <td>). <table background="foto.jpg"> <td background="foto.jpg"> Contoh-contoh latihan berikut akan lebih memberi gambaran variasi penggunaan tag <img>. Latihan 1 : File Image dan ketik baris perintah berikut ini : Sebuah file image : <img src="constr4.gif" E-Commerce - Akademi Akuntansi Y.A.I 23

4 width="144" height="50"> Tag HTML Lanjut Sebuah image di folder lain : <img src="c:\windows\web\wallpaper\wind.jpg" width="33" height="32"> Sebuah image dari Internet : <img src=" width="73" height="68"> 2. Simpan file di My Document sebagai coba3-1.html dengan cara klik menu File-Save As.. Di sebelah kiri pilih My Document, kemudian pada bagian Save as type pilih All Files, lalu ketik coba3-1.html pada bagian File name, klik tombol Save. 3. Jalankan aplikasi Internet Explorer, klik File-Open, pada dialog yang muncul klik Browse, cari file coba3-1.html yang baru dibuat tadi (misalnya di C:\My Documents\coba3-1.html), lalu klik OK. Contoh latihan di atas mendemonstrasikan tiga cara menampilkan file image pada dokumen HTML. Cara yang pertama digunakan apabila file image yang ingin ditampilkan berada pada folder yang sama dengan dokumen HTML. Cara kedua digunakan untuk file image yang berada pada folder yang berbeda dari lokasi penyimpanan dokumen HTML, misalnya di dalam folder images. Cara ketiga digunakan bila file image berada di Internet yang alamatnya telah diketahui, misalnya pada contoh di atas image diambil dari dan berada di dalam folder images. Latihan 2 : Posisi Vertikal Teks Terhadap Image Sebuah image <img src="c:\windows\web\wallpaper\tulips.jpg" align="bottom" width="48" height="48"> di bawah teks 24 E-Commerce - Akademi Akuntansi Y.A.I

5 Sebuah image <img src =" c:\windows\web\wallpaper\ tulips.jpg " align="middle" width="48" height="48"> di tengah teks Sebuah image <img src ="c:\windows\web\wallpaper\ tulips.jpg " align="top" width="48" height="48"> di atas teks 3. Simpan file sebagai coba3-2.html muncul klik Browse, cari file coba3-2.html yang baru dibuat tadi (misalnya di C:\My Documents\coba3-2.html), lalu klik OK. Contoh latihan di atas mendemonstrasikan bagaimana posisi sebuah image ditampilkan secara vertikal terhadap teks. Contoh pertama dengan atribut ALIGN=BOTTOM akan menampilkan image dengan posisi teks di posisi bawah dari image tersebut. Contoh kedua dengan atribut ALIGN=MIDDLE akan menampilkan image dengan posisi teks di sebelah tengah. Dan contoh ketiga dengan atribut ALIGN=TOP akan menampilkan image dengan posisi teks di sebelah atas. Latihan 3 : Posisi Horizontal Teks Terhadap Image Sebuah image <img src =" c:\windows\web\wallpaper\tulips.jpg " width="48" height="48"> di tengah teks <img src =" c:\windows\web\wallpaper\tulips.jpg " width="48" height="48"> Sebuah image di awal teks Sebuah image di akhir teks <img src =" c:\windows\web\wallpaper\tulips.jpg " width="48" height="48"> E-Commerce - Akademi Akuntansi Y.A.I 25

6 3. Simpan file sebagai coba3-3.html muncul klik Browse, cari file coba3-3.html yang baru dibuat tadi (misalnya di C:\My Documents\coba3-3.html), lalu klik OK. Contoh latihan di atas mendemonstrasikan penempatan posisi horizontal sebuah image terhadap penulisan teks. Hal ini lebih dipengaruhi oleh penempatan tag <img> itu sendiri, karena tidak ada atribut yang ditambahkan pada tag <img>. Misalnya tag <img> diletakkan di bagian akhir dari kalimat, maka image akan ditampilkan setelah kalimat tersebut. Demikian juga bila tag <img> diletakkan di awal kalimat, maka image akan ditampilkan sebelum kalimat dimulai. Latihan 4 : Penempatan Image dalam Paragraf <img src =" c:\windows\web\wallpaper\tulips.jpg " align ="left" width="48" height="48"> Sebuah paragraf dengan sebuah image. Atribut ALIGN diberi nilai LEFT supaya image akan ditampilkan di sebelah kiri dari paragraf ini. <img src =" c:\windows\web\wallpaper\tulips.jpg " align ="right" width="48" height="48"> Sebuah paragraf dengan sebuah image. Atribut ALIGN diberi nilai RIGHT supaya image akan ditampilkan di sebelah kiri dari paragraf ini. 3. Simpan file sebagai coba3-4.html muncul klik Browse, cari file coba3-4.html yang baru dibuat tadi (misalnya di C:\My Documents\coba3-4.html), lalu klik OK. 26 E-Commerce - Akademi Akuntansi Y.A.I

7 Contoh latihan di atas mendemonstrasikan penempatan posisi sebuah image di dalam sebuah paragraf. Hal ini diatur dengan menggunakan atribut ALIGN seperti terlihat pada dokumen HTML. Atribut ALIGN=LEFT akan menyebabkan image ditampilkan di sisi kiri atas paragraf, sedangkan atribut ALIGN=RIGHT akan menampilkan image di sisi kanan atas dari paragraf. Latihan 5 : Mengatur Ukuran Image <img src="c:\windows\web\wallpaper\tulips.jpg" width="20" height="20"> <img src="c:\windows\web\wallpaper\tulips.jpg" width="45" height="45"> <img src="c:\windows\web\wallpaper\tulips.jpg" width="70" height="70"> Sebuah image dapat dibuat lebih kecil atau lebih besar denga mengatur value pada atribut WIDTH dan HEIGHT. 3. Simpan file sebagai coba3-5.html muncul klik Browse, cari file coba3-5.html yang baru dibuat tadi (misalnya di C:\My Documents\coba3-5.html), lalu klik OK. Contoh latihan di atas mendemonstrasikan bagaimana ukuran sebuah image dapat diatur dengan menggunakan atribut WIDTH dan HEIGHT. Atribut WIDTH dan HEGHT dapat membuat sebuah image lebih besar ataupun lebih kecil dari ukuran sebenarnya. E-Commerce - Akademi Akuntansi Y.A.I 27

8 Misalnya sebuah image memiliki ukuran lebar 100 pixel dan tinggi 100 pixel, karena pada tag <img> diatur WIDTH=45 dan HEIGHT=45 maka image tersebut akan ditampilkan sebesar 45 pixel X 45 pixel. Latihan 6 : Teks Alternatif dan ketik baris perintah berikut ini : <img src="c:\windows\web\wallpaper\tulips.jpg" alt="bunga Tulip" width="32" height="32"> Bila image tidak tampil, maka teks yang merupakan value dari atribut ALT akan ditampilkan pada web browser. 2. Simpan file sebagai coba3-6.html 3. Jalankan aplikasi Internet Explorer, klik File-Open, pada dialog yang muncul klik Browse, cari file coba3-6.html yang baru dibuat tadi (misalnya di C:\My Documents\coba3-6.html), lalu klik OK. Contoh latihan di atas mendemonstrasikan bagaimana teks yang diberikan pada atribut ALT akan ditampilkan apabila image yang dimaksud pada atribut SRC ternyata tidak dapat ditemukan. Pada contoh teks Panah Kiri akan tampil apabila image goleft.gif tidak ditemukan pada lokasi penyimpanan yang dimaksud. Latihan 7 : Image Sebagai Link Image dapat digunakan sebagai link : <a href="lastpage.htm"> <img border="0" src="c:\windows\web\wallpaper\tulips.jpg" width="65" height="38"></a> 28 E-Commerce - Akademi Akuntansi Y.A.I

9 3. Simpan file sebagai coba3-7.html muncul klik Browse, cari file coba3-7.html yang baru dibuat tadi (misalnya di C:\My Documents\coba3-7.html), lalu klik OK. Contoh latihan di atas mendemonstrasikan bagaimana sebuah image dapat dijadikan link. Sama halnya dengan pembuatan link dengan menggunakan teks seperti telah dijelaskan pada pertemuan sebelumnya, hanya saja untuk teks diganti dengan image, yaitu dengan menyisipkan tag <img> di antara tag <a href> dan </a>. B. Link HTML HTML menggunakan hyperlink untuk membuat link ke dokumen lain atau bagian lain dari dokumen di Internet, yaitu dengan tag anchor <a></a>. Tag anchor ini dapat merujuk ke berbagai jenis dokumen multimedia, seperti dokumen teks, gambar/image, suara, video, dan lain-lain. Berikut ini adalah beberapa contoh penggunaan tag <a> dalam HTML : 1. Atribut HREF digunakan untuk memberikan alamat link yang dikehendaki, sedangkan teks yang berada di antara tag <a> dan </a> akan ditampilkan sebagai hyperlink. <a href= nama_file >teks</a> 2. Atribut TARGET digunakan untuk mendefinisikan di mana dokumen pada link tersebut akan dibuka. Pada contoh di atas TARGET= _BLANK akan membuka dokumen pada window web browser baru. Secara default, tanpa atribut TARGET dokumen akan dibuka pada window yang sama. <a href= nama_file target= _blank >teks</a> 3. Atribut NAME digunakan untuk memberikan nama anchor. Dengan nama anchor ini dapat dibuat link untuk menuju ke lokasi spesifik pada halaman HTML yang ditunjukkan oleh nama anchor tersebut. Hal ini memudahkan pencarian bagian halaman HTML tanpa menggulung layar web browser. <a name= label >teks</a> Sedangkan link yang digunakan untuk menuju nama anchor seperti yang ditunjukkan di atas adalah sebagai berikut : <a href= #label >link menuju bagian label</a> Latihan 8 : Hyperlink Teks E-Commerce - Akademi Akuntansi Y.A.I 29

10 <a href="5-1.html">teks ini</a> adalah link ke dokumen lain. <a href=" ini</a> adalah link ke dokumen lain di Internet. 3. Simpan file di My Document sebagai coba3-8.html dengan cara klik menu File-Save As.. Di sebelah kiri pilih My Document, kemudian pada bagian Save as type pilih All Files, lalu ketik coba3-8.html pada bagian File name, klik tombol Save. muncul klik Browse, cari file coba3-8.html yang baru dibuat tadi (misalnya di C:\My Documents\coba3-8.html), lalu klik OK. Contoh latihan di atas mendemonstrasikan bagaimana cara membuat dua hyperlink yang berbeda. Hyperlink pertama digunakan untuk mengakses dokumen lain yang berada pada komputer (server) yang sama. Hal ini terlihat dari nama file yang tertulis pada tag <a> HTML. Sedangkan hyperlink kedua digunakan untuk mengakses dokumen (halaman) lain yang berada di Internet. Oleh karena digunakan sebuah alamat Internet pada tag <a> HTML. Latihan 9 : Hyperlink Image Image juga dapat digunakan sebagai link : <a href="6-1.html"><img src="c:\windows\web\wallpaper\windows XP.jpg"></a> 3. Simpan file sebagai coba3-9.html 30 E-Commerce - Akademi Akuntansi Y.A.I

11 muncul klik Browse, cari file coba3-9.html yang baru dibuat tadi (misalnya di C:\My Documents\coba3-9.html), lalu klik OK. Contoh latihan di atas mendemonstrasikan bagaimana cara membuat hyperlink dengan menggunakan image. Sebagai pengganti teks maka digunakan link berupa image. Image disisipkan dengan menggunakan tag <img src= nama_file_image >. Latihan 10 : Link Ke Alamat (1) dan ketik baris perintah berikut ini : Ini adalah contoh link ke alamat <a href="mailto:[email protected]">kirim </a> 2. Simpan file sebagai coba3-10.html 3. Jalankan aplikasi Internet Explorer, klik File-Open, pada dialog yang muncul klik Browse, cari file coba3-10.html yang baru dibuat tadi (misalnya di C:\My Documents\coba3-10.html), lalu klik OK. Contoh latihan di atas mendemonstrasikan bagaimana tag <a> dapat digunakan untuk membuat link ke alamat . Hal ini berfungsi hanya bila di perangkat komputer yang digunakan telah terinstall program client, seperti Outlook Express, Eudora, IncrediMail, dan lain-lain. Pada contoh latihan di atas, bila link Kirim diklik, program akan secara otomatis terbuka dengan alamat yang dituju sesuai dengan yang telah ditentukan pada atribut HREF, yaitu dengan alamat : [email protected]. Latihan 11 : Link Ke Alamat (2) E-Commerce - Akademi Akuntansi Y.A.I 31

12 Ini adalah contoh link ke alamat <a ngan%20pesta&body=kamu%20diundang%20ke%20pesta %20ulang%20tahun%20besok%20malam!">Kirim Undangan</a> 3. Simpan file sebagai coba3-11.html muncul klik Browse, cari file coba3-11.html yang baru dibuat tadi (misalnya di C:\My Documents\coba3-11.html), lalu klik OK. Beberapa informasi tambahan pada dapat disertakan, seperti subyek , carbon copy (cc), blind carbon copy (bcc), dan bahkan isi dari tersebut. Pada contoh, bila link Kirim Undangan diklik, maka akan terbentuk sebuah dengan informasi sebagai berikut : To : [email protected] Cc : [email protected] Bcc : [email protected] Subject : Undangan Pesta Body : Kamu diundang ke pesta ulang tahun besok malam Perhatikan bahwa untuk setiap spasi digunakan tanda %20 di mana hal tersebut dimaksudkan agar teks dapat ditampilkan sebagaimana mestinya pada web browser. C. Soal Latihan No. Soal Nilai 1 Buatlah sebuah halaman Web (Test3-1.html) berikut ini : 32 E-Commerce - Akademi Akuntansi Y.A.I

13 Keterangan : Image yang digunakan adalah : C:\Windows\web\wallpaper\tulips.jpg dgn ukuran 150 x 150 E-Commerce - Akademi Akuntansi Y.A.I 33