Halaman WEB juga dapat memuat gambar atau image. Jenis Formatnya pun beragam antara lain:
- GIF (Grafical Interchange Format) >>(.gif)
- JPEG (Joint Photographic Expert Image) >>(.jpg)
- PNG (Portable Network Grafic) >>(.png)
- BMP (Bitmap) >>(.bmp)
Menggunakan Gambar sebagai Background
kita sudah mempelajari cara menggunakan warna sebagai latar belakang halaman web. Sekarang kita akan mempelajari cara menggunakan gambar sebagai latar belakang. Untuk warna, kita menggunakan atribut BGCOLOR="warna", sedangkan untuk gambar, kita menggunakan atribut BACKGROUND="file_gambar". Kedua atribut ini disisipkan dalam tag BODY. Sangat mudah, bukan? Misalnya kita ingin memanfaatkan gambar email.gif tadi sebagai latarbelakang halaman web maka cukup dengan menyisipkan atribut tersebut ke dalam tag BODY seperti di bawah ini:<HTML><HEAD><TITLE>Latarbelakang Gambar</TITLE> <BODY BACKGROUND="adoth.gif"> <H1><FONT COLOR="blue">informatika tasikmalaya</FONT></H1> </BODY></HTML>
informatika tasikmalaya
Menggunakan Gambar Sebagai Link.
<A HREF="adhyadoth@ymail.com"><IMG SRC="adoth.gif"></A>
Membuat Tabel HTML Setiap tabel minimal tersusun dari tiga tag dasar yaitu tag <TABLE> yang menandai sebuah tabel, tag <TR> yang membentuk baris dan tag <TD> yang membentuk kolom. Masing-masing tag tersebut harus memiliki tag penutup.
<TABLE>
<TR>
<TD>kolom 1 dari baris 1</TD>
</TR>
</TABLE> Bila kita lihat tabel-tabel pada contoh di atas, tampak bahwa secara default, lebar kolom dan tinggi baris mengikuti lebar dan tinggi tulisan di dalamnya. Kita bisa mengatur sendiri lebar dan tinggi tabel, kolom dan barisnya dengan menggunakan atribut WIDTH (lebar) dan HEIGHT (tinggi). Misalnya: Mana tabelnya? Sesungguhnya, tabelnya ada, hanya saja tanpa bingkai (border). Ternyata, secara default, tabel menggunakan nilai border = 0 (nol) alias tanpa bingkai. Jadinya yang tampak hanya tulisan semata. Untuk membuat bingkai dari tabel tersebut, kita harus menyertakan atribut BORDER.
<TABLE BORDER=1>
<TR>
<TD>kolom 1 dari baris 1</TD> <TR>
</TR>
</TABLE>
Silakan coba sendiri mengganti ukuran bingkai menjadi 2, 3 dan seterusnya lalu bandingkan hasilnya. Sekarang mari kita membagi tabel sebaris tersebut menjadi dua kolom. Artinya kita menambah sepasang tag TD lagi.
Hasilnya :
| kolom 1 dari baris 1 | kolom 2 dari baris 1 |
<TABLE BORDER=1>
<TR>
<TD>kolom 1 dari baris 1</TD>
<TD>kolom 2 dari baris 1</TD>
</TR>
<TR>
<TD>kolom 1 dari baris 2</TD>
<TD>kolom 2 dari baris 2</TD>
</TR>
</TABLE>
Tampilan Dalam Browsure menjadi :
| kolom 1 dari baris 1 | kolom 2 dari baris 1 |
| kolom 1 dari baris 2 | kolom 2 dari baris 2 |
Setelah atribut BORDER, atribut selanjutnya yang perlu kita ketahui adalah atribut CELLSPACING yang mengatur jarak antar sel dan CELLPADDING yang mengatur jarak antara sel dan tulisan di dalamnya. Misalnya:
<TABLE BORDER=1 CELLSPACING=10>
<TR>
<TD>kolom 1 dari baris 1</TD>
<TD>kolom 2 dari baris 1</TD>
</TR>
<TR>
<TD>kolom 1 dari baris 2</TD>
<TD>kolom 2 dari baris 2</TD>
</TR>
</TABLE>
Dengan penambahan atribut CELLSPACING=10 dalam tag TABLE berarti akan dihasilkan sebuah tabel dengan jarak antar sel adalah 10 pixel. Beginilah tampilannya dalam browser:
| kolom 1 dari baris 1 | kolom 2 dari baris 1 |
| kolom 1 dari baris 2 | kolom 2 dari baris 2 |
Sekarang mari kita coba bandingkan bila atribut CELLSPACING tersebut diganti dengan CELLPADDING.
<TABLE BORDER=1 CELLPADDING=10>
<TR>
<TD>kolom 1 dari baris 1</TD>
<TD>kolom 2 dari baris 1</TD>
</TR>
<TR>
<TD>kolom 1 dari baris 2</TD>
<TD>kolom 2 dari baris 2</TD>
</TR>
</TABLE>
Hasilnya : <TR>
<TD>kolom 1 dari baris 1</TD>
<TD>kolom 2 dari baris 1</TD>
</TR>
<TR>
<TD>kolom 1 dari baris 2</TD>
<TD>kolom 2 dari baris 2</TD>
</TR>
</TABLE>
| kolom 1 dari baris 1 | kolom 2 dari baris 1 |
| kolom 1 dari baris 2 | kolom 2 dari baris 2 |
<TR>
<TD>kolom 1 dari baris 1</TD>
<TD>kolom 2 dari baris 1</TD>
</TR>
<TR>
<TD>kolom 1 dari baris 2</TD>
<TD>kolom 2 dari baris 2</TD>
</TR>
</TABLE>
hasilnya:
| kolom 1 dari baris 1 | kolom 2 dari baris 1 |
| kolom 1 dari baris 2 | kolom 2 dari baris 2 |
Kesimpulannya, lebar tabel 100% artinya tabel tersebut akan melebar hingga memenuhi lebar tampilan halaman. Bila lebar setiap kolom tidak ditentukan, maka lebar 100% itu akan terbagi sejumlah kolomnya. Seperti dalam contoh di atas, karena terdiri dari dua kolom maka lebar masing-masing kolom adalah 50%. Nah, bagaimana bila kita ingin membagi lebar kolom tidak sama? Ya, caranya sama saja, yaitu dengan memasukkan atribut WIDTH dalam tag kolom.
<TABLE BORDER=1 WIDTH=100%>
<TR>
<TD WIDTH=25%>kolom 1 dari baris 1</TD>
<TD WIDTH=75%>kolom 2 dari baris 1</TD>
</TR>
<TR>
<TD WIDTH=25%>kolom 1 dari baris 2</TD>
<TD WIDTH=75%>kolom 2 dari baris 2</TD>
</TR>
</TABLE>
Hasilnya :<TR>
<TD WIDTH=25%>kolom 1 dari baris 1</TD>
<TD WIDTH=75%>kolom 2 dari baris 1</TD>
</TR>
<TR>
<TD WIDTH=25%>kolom 1 dari baris 2</TD>
<TD WIDTH=75%>kolom 2 dari baris 2</TD>
</TR>
</TABLE>
| kolom 1 dari baris 1 | kolom 2 dari baris 1 |
| kolom 1 dari baris 2 | kolom 2 dari baris 2 |
Bagaimana halnya dengan atribut HEIGHT (tinggi)? Atribut ini juga bisa disisipkan dalam tag TABLE dan tag TR (baris). Selain menggunakan persen untuk menentukan ukuran tabel, kita bisa pula menggunakan satuan pixel. Bila angka sesudah WIDTH dan HEIGHT tidak menggunakan persen (%), berarti satuannya adalah pixel. Contoh:
<TABLE BORDER=7>
<TR HEIGHT=40>
<TD WIDTH=150>kolom 1 dari baris 1</TD>
<TD WIDTH=250>kolom 2 dari baris 1</TD>
</TR>
<TR HEIGHT=80>
<TD WIDTH=150>kolom 1 dari baris 2</TD>
<TD WIDTH=250>kolom 2 dari baris 2</TD>
</TR>
</TABLE>
Ukuran border tabel kita ubah menjadi 7. Tinggi baris pertama adalah 40 pixel sedang baris kedua 80 pixel. Adapun lebar kolom pertama adalah 150 pixel sedang kolom kedua 250 pixel. Perhatikanlah bagaimana atribut-atribut di atas, menghasilkan tampilan tabel dalam browser menjadi:
| kolom 1 dari baris 1 | kolom 2 dari baris 1 |
| kolom 1 dari baris 2 | kolom 2 dari baris 2 |
Sekarang kita akan berbicara lagi masalah perataan (alignment) tulisan. Lihat contoh tabel di atas! Tampak bahwa secara default, tabel menempatkan tulisan rata kiri (secara horisontal) dan di tengah (secara vertikal). Namun demikian, kita bisa mengatur sendiri perataan ini dengan menggunakan atribut ALIGN untuk perataan horisontal dan VALIGN untuk perataan vertikal. Perhatikan penggunaannya:
<TABLE BORDER=7>
<TR HEIGHT=40>
<TD WIDTH=150 ALIGN=left VALIGN=top>kiri atas</TD>
<TD WIDTH=250 ALIGN=right VALIGN=middle>kanan tengah</TD>
</TR>
<TR HEIGHT=80>
<TD WIDTH=150 ALIGN=right VALIGN=bottom>kanan bawah</TD>
<TD WIDTH=250 ALIGN=center VALIGN=middle>tengah tengah</TD>
</TR>
</TABLE>
hasilnya :<TR HEIGHT=40>
<TD WIDTH=150 ALIGN=left VALIGN=top>kiri atas</TD>
<TD WIDTH=250 ALIGN=right VALIGN=middle>kanan tengah</TD>
</TR>
<TR HEIGHT=80>
<TD WIDTH=150 ALIGN=right VALIGN=bottom>kanan bawah</TD>
<TD WIDTH=250 ALIGN=center VALIGN=middle>tengah tengah</TD>
</TR>
</TABLE>
| kiri atas | kanan tengah |
| kanan bawah | tengah tengah |
cukup dulu tenteng tabel.. thanks..
Membuat Link HTML
Sintaks Link:
Tag pembuka berisi atribut link tersebut.
Isi elemen (Teks link) mendefinisikan apa yang ingin anda tampilkan ke pengunjung.
Catatan: Isi elemen tidak harus berupa teks lho. Kamu juga bisa me-link dari sebuah gambar atau elemen HTML lainnya.
Atribut href
Atribut href adalah alamat yang akan dibuka saat seseorang mengklik link yang kita buat.Elemen ini mendefinisikan sebuah link yang akan menuju ke sebuah web site :
<a href="http://www.adhyiasan.com/">ngtes atuh(contoh)</a>
Kode tersebut akan ditampilkan seperti ini.coba klik
ngtes atuh(contoh)
Atribut target
Atribut target sangat berguna bagi kita untuk mengatur halaman yang kita tuju itu akan dibuka di mana.Kita bisa membukanya di halaman utama ini langsung atau membukanya di halaman baru saat seorang pengunjung mengklik link yang kita sediakan.
Berbeda dengan kode sebelumnya yang membuka web jendela yang sama, kode ini akan membuka web site pada sebuah jendela baru:
<a href="http://www.adhyiasan.com/"
target="_blank"> mari belajar bikin web, mau tau?. Klik di sini aja!</a>
Silahkan di klik link di bawah ini biar tahu bedanya:
mari belajar bikin web, mau tau?. Klik di sini aja!
Attribute name
Saat kita menggunakan atribut name, maka itu berarti kita mendefinisikan sebuah nama anchor yang berada di dalam sebuah halaman HTML.Nama anchor tidak akan nampak di mata pengunjung. Itu hanya merupakan pendefinisian di sebuah halaman web aja.
Cara membuat sebuah anchor:
<a name="label">Apapun</a>
Nah, link yang menuju ke halaman itu bikinnya gini:
<a href="#label">Apapun</a>
Perhatikan tanda # yang mendefinisikan nama anchor
contoh:
Sebuah anchor dalam dokumen HTML:
<a name="top">Ini bagian paling atas</a>
Sebuah link yang merujuk ke bagian paling atas dalam dokumen yang sama:
<a href="#top">Kembali ke atas</a>
Sebuah link yang menuju ke sebuah anchor di halaman web lain:
<a href="http://www.prothelon.com/mambo/contoh.htm#top">
Kembali ke halaman utama paling atas</a>
