Membuat Tabel
Tabel adalah sarana untuk menempatkan informasi agar mudah dibaca dan dipahami. Untuk memahami
pembuatan tabel pada HTML, Anda dapat melihat skrip dibawah ini.
<HEAD>
<TITLE>contoh12.htm</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=1>
<TR>
<TD>Sel 1,1</TD>
<TD>Sel 1,2</TD>
</TR>
<TR>
<TD>Sel 2,1</TD>
<TD>Sel 2,1</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Tag <TABLE> memiliki banyak atribut diantaranya adalah BORDER. BORDER digunakan untuk
mengatur ketebalan garis pembatas antar sel-sel dalam tabel. Atribut lainnya yang penting adalah :
• width
Atribut width menyatakan lebar tabel. Apabila dinyatakan dalam persen (%), maka lebar ditentukan
dalam persentase terhadaplebar layar browser.
• Cellspacing
Atribut cellspacing menyatakan jarak antara sel satu dan lainnya.
• Cellpading
Atribut cellpading menyatakan jarak antara isi sel dengan batas dari sel tersebut.
Untuk membuat baris pada tabel, HTML menyediakan pasangan tag <TR> untuk awal baris dan </TR>
untuk mengakhirinya. Tag <TR> memiliki atribut ALIGN untuk mengatur alignment horizontal dan
VALIGN untuk mengatur alignment vertical. Setelah Anda membuat kolom pada baris yang
bersangkutan dengan menggunakan garis pasangan tag <TD> dan </TD>.
Dalam membuat suatu tabel, Anda juga dapat mengatur lebar untuk tabel dan juga masing-masing
kolomnya dengan menggunakan atribut WIDTH.
</HTML>
<HEAD>
<TITLE>contoh13.htm</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=1 WIDTH="80%">
<TR>
<TD WIDTH="70%">Sel 1,1</TD>
<TD WIDTH="30%">Sel 1,2</TD>
</TR>
<TR>
<TD>Sel 2,1</TD>
<TD>Sel 2,1</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Cellspacing dan Cellpading
Atribut cellspacing digunakan untuk mengatur jarak atau
spasi antar sel dengan sel lainnya dan antar sel dengan
batas tabel. Sedangkan atribut cellpading digunakan
untuk mengatur spasi antara batas sel dengan teks di
dalam sel.
Contoh penggunaan atribut cellspacing dan cellpading
diperlihatkan pada gambar dan skrip berikut ini.
<HTML>
<HEAD>
<TITLE>contoh14.htm</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=1 WIDTH="80%" CELLSPACING=10
CELLPADDING=20>
<TR>
<TD WIDTH="85%">Penggunaan Internet menjadi
utama dalam kegiatan perusahaan</TD>
<TD WIDTH="15%">-</TD>
</TR>
<TR>
<TD>Perusahaan banyak memanfaatkan e-mail
sebagai komunikasi mereka.</TD>
<TD>-</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Rowspan dan Colspan
Atribut rowspan digunakan untuk menggabungkan
beberapa buah baris menjadi satu. Sedangkan atribut
colspan digunakan untuk menggabungkan beberapa
kolom menjadi satu. Atribut-atribut ini di pakai
berdasarkan tag <TD>. Perhatikan contoh tersebut:
<HTML>
<HEAD>
<TITLE>contoh15.htm</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=1>
<TR>
<TD COLSPAN=2>Sel 1,1</TD>
<TD>Sel 1,2</TD>
<TD>Sel 1,3</TD>
</TR>
<TR>
<TD ROWSPAN=3>Sel 2,1</TD>
<TD>Sel 2,1</TD>
<TD>Sel 2,2</TD>
<TD>Sel 2,3</TD>
</TR>
<TR>
<TD>Sel 3,1</TD>
<TD>Sel 3,2</TD>
<TD>Sel 3,3</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Memasukkan Gambar
Gambar adalah elemen yang sangat penting dalam menampilkan informasi. HTML menyediakan tag
<IMG> untuk menampilkan gambar pada halaman web Anda.
<IMG SRC=”gambar1.gif” ALT=”gambar1”>
Perintah HTML diatas akan menampilkan gambar gambar1.gif dan menampilkan teks “gambar 1”
apabila browser mematikan fasilitas penampil grafik. Ekstensi grafik yang biasa di tampilkan oleh
HTML adalah GIF, JPG, dan BMP.
Anda juga dapat menggabungkan grafik dengan tag <A> untuk membuat link dari gambar Anda.
<IMG SRC=”gambar1.gif” ALT=”gambar1” HREF=”www.yahoo.com”>
Atribut ALT dipakai untuk menampilkan teks pengganti gambar untuk browser yang tidak mendukung
penggunaan gambar atau apabila client sengaja mematikan fasilitas tersebut.
Anda juga dapat menggunakan atribut align untuk mengatur posisi gambar terhadap teks yang
bersebelahan. Perhatikan contoh berikut :
<HTML>
<HEAD>
<TITLE>contoh10.htm</TITLE>
</HEAD>
<BODY>
<H1>Pelatihan Situs Web Bisnis</H1>
<BR>Pergi ke web site <IMG SRC="sample.gif" ALIGN="MIDDLE"> <A
HREF="www.pelatihan.com">Pelatihan Situs Web Bisnis</A>
</BODY>
</HTML>
Pada contoh HTML di atas, align untuk gambar adalah tengah. Anda dapat mencobanya untuk align dan
align bottom untuk membandingkannya.
Bila
dirasa gambar Anda terlalu kecil atau terlalu besar, Anda dapat
menentukan sendiri lebar dan panjang gambar mengatur property WIDTH dan
HEIGHT pada tag <IMG>.
<HTML>
<HEAD>
<TITLE>contoh12.htm</TITLE>
</HEAD>
<BODY>
<H1>Pelatihan Situs Web Bisnis</H1>
<BR>Pergi ke web site <IMG SRC="sample.gif" ALIGN="MIDDLE" WIDTG=50
HEIGHT=50> <A HREF="www.Pelatihan.com">Pelatihan Situs Web Bisnis</A>
</BODY>
</HTML>
main |
sidebar
Archive
Selasa, 11 Maret 2014
Belajar HTML 2
di 05.15
Subscribe to:
Posting Komentar (Atom)
Template by:
About
Designed by SkinCorner Free Blogger Templates | Sponsored by Papercraft for Kids | Power Point Templates
2 komentar:
Follow my blog's
timbol-media.blogspot.com
Info paling menarik>>>>
http://timbol-media.blogspot.com/2014/02/ternyata-abu-vulkanik-bagus-untuk.html
Posting Komentar