Membuat Website pribadi 2


PRAKTEK MEMBUAT HALAMAN WEB
Untuk mempermantap keterampilan anda dalam membuat link sekaligus mengulang semua pelajaran yang
telah lalu, kita akan mencoba membuat halaman web. Anggaplah ini adalah proyek pembuatan web anda
yang pertama.
Bukalah program Notepad anda. Klik menu File lalu Save. Pada kotak dialog yang muncul masuklah ke
folder My Documents lalu folder My Webs. Cara masuknya, klik ganda (klik dua kali dengan cepat) folder
yang bersangkutan. Setelah anda berada dalam folder My Webs, buatlah folder baru dengan cara mengklik
ikon create new folder yang berada pada ikon ketiga. Maka akan muncul folder New Folder, silakan anda
ganti namanya misalnya web1. Setelah itu pada kotak Save As Type, ganti isinya dengan All File. Lalu isi
kotak File Name dengan nama yang anda sukai misalnya home.htm. Klik Save.
Pada file dengan nama home.htm ini, buatlah halaman web dengan judul (title) Halaman Pertama. Kemudian
isilah halaman tersebut sedemikian rupa sehingga dalam browser tampak seperti ini:
HAL. 1 | HAL. 2 | HAL. 3
Selamat Datang di Proyek Pertama !
Judul di atas merupakan header level kedua yang diletakkan di tengah. Dalam proyek pertama ini saya akan
berlatih membuat halaman web yang sangat-sangat sederhana. Halaman web ini akan saya isi dengan
beberapa format penulisan halaman web yang telah saya pelajari. Dengan demikian saya bisa memperlancar
dan mempermantap keterampilan saya membuat halaman web. Amin…!
Ini Header Level Ketiga
Masih ingat, kan cara membuat paragraf? Suatu paragraf bisa tidak diberi tag penutup. Yang penting anda
ingat, bila akan membuat lagi paragraf baru, tulis tag pembuka paragraf. Sedangkan untuk membuat baris,
ada tag tersendiri.
Dalam paragraf ini anda akan mengulangi pelajaran membuat baris, seperti di bawah ini:
Klik di sini untuk melihat Daftar Definisi.
Untuk melihat Kesan dan Pesan, klik di sini.
Ini paragraf baru. Perlu anda ketahui bahwa halaman web yang tampak dalam browser merupakan beberapa
baris kalimat, bila dibuat dalam kode HTML, bisa saja ditulis dalam satu baris saja. Yang penting untuk
setiap baris baru harus diawali dengan tag <BR>. Ngerti maksudnya?
Kembali Keatas | Selanjutnya
Sekarang kita akan membuat halaman web selanjutnya dengan judul Halaman Kedua dengan tampilan dalam
browser sebagai berikut:
HAL. 1 | HAL. 2 | HAL. 3
Mengutak-atik Font
Dalam halaman ini, kita menggunakan warna background kuning dengan font Comic Sans ukuran 2 warna
biru sebagai font default. Masih ingat, kan cara pengaturannya?
Daftar Definisi
Internet
Singkatan dari interconnection network atau hubungan antar jaringan. Internet ialah jaringan komputer
global dan merupakan jaringan komputer yang terbesar di dunia karena mampu menghubungkan seluruh
komputer yang ada di dunia.
HTTP
Singkatan dari Hypertext Transfer Protocol adalah salah satu protokol bahasa yang digunakan untuk
Hanya untuk siswa-siswi smansa_Joe/labkom/Nov 2007.
Materi TIK XII SMANSA_JOE
berkomunikasi antar server komputer dalam internet. Protokol bahasa yang lain dalam internet misalnya:
Telnet, News, Gropher, FTP.
URL
Singkatan dari Uniform Resource Locator adalah standar pegalamatan sebuah file di Internet yang dirancang
khusus untuk digunakan dengan browser WWW seperti Netscape, Internet Explorer, Opera, dan lain-lain.
Bila anda ingin mencari terjemahan kata-kata Inggris ke Indonesia atau Indonesia ke Inggris, pergilah ke
situs KamusWeb.
Kembali Keatas | Selanjutnya
Simpanlah halaman di atas dengan nama misalnya: kuning.htm. Kemudian buatlah satu halaman web lagi
dengan titel Halaman Ketiga seperti berikut:
HAL. 1 | HAL. 2 | HAL. 3
Inilah Biodataku ….
Nama
Tempat/tanggal lahir
Nama orang tua
Ayah
Ibu
Pendidikan
Sekolah dasar
Sekolah menengah pertama
Sekolah menengah atas
Perguruan tinggi
Pekerjaan
Alamat
Rumah
Kantor
Hobi
Pesan dan Kesan
Membuat website sebenarnya gampang-gampang susah. Gampang karena kita tinggal mengganti kalimatkalimat
yang diletakkan diantara tag-tag. Kalau mau lebih mudah lagi, ambil saja halaman web yang sudah
jadi (pilih yang paling sederhana). Buka source code-nya, kemudian edit lah isinya sesuai keinginan anda.
Susahnya bila ingin membuat halaman web yang rumit dan dinamis. Untuk itu kita perlu belajar lebih
banyak dan lebih giat lagi ….!
Kembali Keatas
Simpanlah halaman ketiga di atas dengan nama misalnya: biodata.htm. Sekarang kita telah mempunyai tiga
buah file HTML yaitu home.htm, kuning.htm dan biodata.htm. Tugas kita selanjutnya adalah memasukkan
link-link ke dalam setiap halaman web tersebut.
Dalam setiap halaman, di bagian atasnya terdapat link-link berikut: HAL. 1, HAL. 2 dan HAL. 3. Masingmasing
link menuju ke file home.htm, kuning.htm dan biodata.htm.
<P ALIGN=”RIGHT”><A HREF=”home.htm”>HAL. 1</A> | <A HREF=”kuning.htm”>HAL. 2</A> | <A
HREF=”biodata.htm”>HAL. 3</A>
Juga dalam setiap halaman, terdapat link Kembali Keatas dan Selanjutnya. Teks Kembali Keatas merupakan
link yang membawa kita ke bagian paling atas dari setiap halaman. Untuk itu sebelumnya kita harus
memberi nama pada baris tulisan HAL. 1 | HAL. 2 | HAL. 3 yang merupakan baris teratas dari setiap
halaman.
<HTML><HEAD><TITLE>Halaman Pertama</TITLE></HEAD>
Hanya untuk siswa-siswi smansa_Joe/labkom/Nov 2007.
Materi TIK XII SMANSA_JOE
<A NAME=”atas”></A><P ALIGN=”RIGHT”><A HREF=”home.htm”>HAL. 1</A> | <A
HREF=”kuning.htm”>HAL. 2</A> | <A HREF=”biodata.htm”>HAL. 3</A>
Setelah itu barulah kita membuat link Kembali Keatas dengan kode sebagai berikut:
<A HREF=”#atas”>Kembali Keatas</A>
Sedang teks Selanjutnya dijadikan link yang menuju ke file sesudahnya. Yakni dari file home.htm menuju ke
kuning.htm dan dari file kuning.htm menuju ke biodata.htm. Contoh dalam file home.htm:
<A HREF=”#atas”>Kembali Keatas</A> | <A HREF=”kuning.htm”>Selanjutnya</A>
Dalam halaman pertama terdapat dua link lagi di bagian tengah yaitu link yang menuju ke Daftar Definisi
yang ada di halaman kedua dan link yang menuju ke Kesan dan Pesan yang ada di halaman ketiga. Karena
itu kita harus mencantumkan nama terlebih dahulu pada baris Daftar Definisi di halaman kedua (file
kuning.htm) dan pada baris Kesan dan Pesan di halaman ketiga (file biodata.htm) seperti contoh berikut:
<A NAME=”defin”></A><H3>Daftar Definisi</H3>
Untuk halaman ketiga:
<A NAME=”kesan”></A><H3>Kesan dan Pesan</H3>
Setelah itu barulah kita bisa memberi link pada kalimat berikut di halaman pertama:
<BR><A HREF=”#defin”>Klik di sini</A>untuk melihat <B>Daftar Definisi</B>.
<BR>Untuk melihat<B>Kesan dan Pesan</B>, <A HREF=”#kesan”>klik di sini</A>.
Di halaman kedua (file kuning.htm) terdapat contoh link yang menuju ke situs yang lain. Buatlah link
tersebut bila di-klik akan membuka jendela browser baru untuk menampilkannya. Begini jadinya:
<A HREF=”http://www.kamus.web.id&#8221; TARGET=”_blank”>Kamus Web</A>
Bila anda telah selesai memasukkan seluruh link-link tersebut, bukalah browser anda, kemudian cobalah
meng-klik semua link-link yang terdapat dalam ketiga halaman web itu.
Sampai pelajaran ini, anda sebetulnya sudah dapat membuat website sendiri. Kami sangat menyarankan anda
mencoba membuat website sederhana dengan bekal pengetahuan yang telah anda pelajari.
MENYISIPKAN GAMBAR (IMAGE)
Untuk menyisipkan gambar ke dalam sebuah halaman HTML, mula-mula kita harus menyediakan terlebih
dahulu file gambar yang dibutuhkan. File gambar ini biasanya berekstensi GIF, JPG atau BMP. Bila file
gambar itu telah tersedia, dan kita mengetahui nama dan letak (lokasi) file gambar itu, barulah kita bisa
menyisipkannya ke dalam halaman web kita dengan menggunakan tag <IMG SRC=”file_gambar”>.
Misalnya, kita mempunyai sebuah halaman web seperti ini:Sisipkanlah gambar di bawah ini:
Mudah, bukan?
Kita ingin menyisipkan sebuah gambar yang file gambarnya bernama email.gif diantara kedua kalimat di
atas. Bukalah source kode halaman HTML tersebut sehingga tampak seperti ini:
<P>Sisipkanlah gambar di bawah ini:
Hanya untuk siswa-siswi smansa_Joe/labkom/Nov 2007.
Materi TIK XII SMANSA_JOE
<P>Mudah, bukan?
Sisipkan satu tag paragraf lagi diantara kedua paragraf di atas, kemudian tuliskan tag penyisip gambar <IMG
SRC=”file_gambar”> sehingga menjadi seperti ini:
<P>Sisipkanlah gambar di bawah ini:
<P><IMG SRC=”email.gif”>
<P>Mudah, bukan?
Simpan (Save) source code tersebut kemudian buka dengan browser maka tampaklah seperti ini:Sisipkanlah
gambar di bawah ini:
Mudah, bukan?
Untuk contoh di atas, file email.gif dan file halaman yang disisipi gambar itu harus terletak dalam folder
yang sama. Bila terletak dalam folder lain, maka harus dituliskan lokasinya. Misalnya:
<IMG SRC=”images/email.gif”> bila file gambar itu terletak dalam folder bernama images, dimana folder
images itu letaknya di bawah (di dalam) folder yang ditempati oleh halaman HTML yang disisipi gambar.
<IMG SRC=”../email.gif”> bila file gambar itu terletak satu tingkat di atas (di luar) folder yang ditempati
oleh halaman HTML yang disisipi gambar.
ATRIBUT-ATRIBUT GAMBAR
Setelah kita mengetahui cara menyisipkan gambar, sekarang kita akan mempelajari atribut apa saja yang bisa
disertakan dalam tag <IMG SRC> untuk menghasilkan sejumlah efek tertentu. Atribut pertama yang bisa
kita tambahkan ke dalam tag gambar adalah BORDER. Sesuai dengan namanya, atribut ini digunakan untuk
memberi efek bingkai pada gambar. Bukalah file HTML di atas tadi. Kemudian sisipkanlah atribut border
dalam tag gambar sehingga menjadi:
<P>Sisipkanlah gambar di bawah ini:
<P><IMG SRC=”email.gif” BORDER=”3″>
<P>Mudah, bukan?
Anda boleh mengganti angka 3 dengan angka yang lebih kecil atau lebih besar untuk menghasilkan ukuran
border yang lebih kecil atau lebih besar pula. Save lalu tampilkan dalam browser, maka hasilnya seperti
ini:Sisipkanlah gambar di bawah ini:
Mudah, bukan?
Atribut selanjutnya yang bisa anda sisipkan adalah atribut ALT. Dengan atribut ini kita bisa menyiapkan teks
pengganti gambar bila suatu waktu gambar – karena satu dan lain hal – tidak bisa ditampilkan. Misalnya user
menggunakan browser versi lama (yang belum bisa menampilkan gambar) atau browser yang dimatikan
fungsi penampil gambarnya (untuk mempercepat proses loading). Dengan adanya atribut ALT ini, tampilan
Hanya untuk siswa-siswi smansa_Joe/labkom/Nov 2007.
Materi TIK XII SMANSA_JOE
gambar dapat digantikan dengan teks yang kita masukkan di dalamnya. Contoh:
<P>Sisipkanlah gambar di bawah ini:
<P><IMG SRC=”email.gif” ALT=”tombol email”>
<P>Mudah, bukan?
Bila suatu ketika, gambar tidak bisa ditampilkan maka akan tampak seperti ini:Sisipkanlah gambar di bawah
ini:
Mudah, bukan?
Atribut image berikutnya yang akan kita pelajari adalah atribut ukuran gambar yaitu WIDTH (lebar) dan
HEIGHT (tinggi). Tanpa menggunakan atribut ini, browser akan menampilkan gambar sesuai dengan ukuran
asli dari file gambar yang bersangkutan. Kita bisa mengatur ukuran tampilan gambar dalam browser lebih
kecil ataupun lebih besar dari ukuran aslinya dengan menggunakan atribut WIDTH dan HEIGHT tersebut.
Kita masih mengambil contoh gambar email.gif di atas. Ukuran gambar yang sebenarnya dari file GIF ini
adalah 132×37 pixel (ukuran suatu gambar bisa kita ketahui dengan menggunakan program penampil
gambar seperti ACDSee, IrfanView, dsb.). Kita akan mencoba menampilkan gambar itu lebih kecil misalnya
menjadi 99×25 pixel dan lebih besar misalnya menjadi 165×47 pixel. Untuk itu, editlah kode HTML-nya
sebagai berikut:
<P>Sisipkanlah gambar di bawah ini:
<P><IMG SRC=”email.gif”> <IMG SRC=”email.gif” WIDTH=99 HEIGHT=25> <IMG SRC=”email.gif”
WIDTH=165 HEIGHT=47>
<P>Mudah, bukan?
Ingin tahu hasilnya setelah ditampilkan dalam browser?
Sisipkanlah gambar di bawah ini:
Mudah, bukan?
Selain menggunakan satuan pixel, kita pun bisa mengatur ukuran tampilan gambar dalam browser dengan
satuan persen. Umumnya, satuan persen ini digunakan untuk mengatur lebar (WIDTH) gambar, bukan tinggi
gambar. Sebab mengatur tinggi gambar dengan satuan persen akan menghasilkan tampilan yang tidak
konsisten karena akan bergantung pada lebar jendela browser serta setting resolusi monitor. Oleh karena itu
jika anda mengatur lebar gambar dengan satuan persen, atribut HEIGHT tidak perlu diatur lagi karena
ukuran pixelnya secara otomatis diskala dengan ukuran yang benar. Misalnya:
<IMG SRC=”file_gambar” WIDTH=50%>.
Ukuran gambar yang ditampilkan oleh browser akan mengikuti ukuran jendela browser relatif terhadap
setting resolusi monitor. Jika monitor diset pada resolusi 800×600 pixel dan jendela browser dibuat
maksimum, maka gambar akan ditampilkan dengan pada ukuran sekitar 400×300 pixel, yakni 50% dari
ukuran jendela browser, bukan 50% dari ukuran gambar. Penggunaan satuan persen untuk pengaturan ukuran
tampilan gambar ini, sering digunakan untuk gambar-gambar besar dan tampilannya ingin kita sesuaikan
dengan ukuran jendela browser dan resolusi monitor.
Hanya untuk siswa-siswi smansa_Joe/labkom/Nov 2007.
Materi TIK XII SMANSA_JOE
Apakah atribut WIDTH dan HEIGHT ini semata-mata digunakan untuk pengubahan ukuran tampilan
gambar? Ternyata tidak. Atribut ini juga berfungsi untuk mempercepat tampilnya halaman web (loading).
Karena dengan adanya kedua atribut ini, secara teknis memerintahkan browser untuk menyediakan tempat
seukuran itu sebelum gambarnya sendiri selesai di-load. Jadi bila kita ingin menampilkan sebuah gambar
sama dengan ukuran aslinya, alangkah baiknya bila atribut WIDTH dan HEIGHT ini tetap dituliskan dengan
angka yang sama dengan lebar dan tinggi yang sebenarnya dari gambar tersebut.
MENGGUNAKAN GAMBAR SEBAGAI BACKGROUND
Pada pelajaran-pelajaran yang terdahulu, 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=”email.gif”>
<H1><FONT COLOR=”yellow”>Maaf, ini hanya contoh, jadi tulisannya tidak serasi dengan
latarbelakangnya</FONT></H1>
</BODY></HTML>
Bila dibuka dalam browser akan tampak seperti ini:Maaf, ini hanya contoh, jadi tulisannya tidak serasi
dengan latarbelakangnya
Bagaimana cara mendapatkan file-file image untuk dijadikan background? Mudah saja. Misalnya anda
tertarik dengan background halaman web ini yang berlatarbelakang garis kotak-kotak abu-abu. Klik kanan
pada sebarang tempat yang tampak background kotak-kotak itu maka akan muncul pop-up menu. Salah satu
menu di dalamnya pasti bertuliskan Save Background As…. Pilih (klik) menu ini maka muncullah kotak
dialog Save Picture. Di situ anda bisa memilih tempat (folder) dimana file image itu ingin anda simpan
(misalnya di folder tempat halaman-halaman web anda). Anda pun bisa mengubah nama dari file image itu.
Setelah itu klik tombol Save.
MENGGUNAKAN GAMBAR SEBAGAI LINK
Masih ada satu lagi fungsi gambar. Gambar juga dapat digunakan sebagai link. Pada prinsipnya untuk
membuat link gambar sama saja dengan membuat link teks. Kita tinggal mengganti teks yang bertindak
sebagai link itu dengan tag penyisipan gambar (IMG SRC). Misalnya kita punya link seperti ini: email kami.
Kode HTML dari link ini adalah:
<A HREF=”mailto:adifitrah@maktoob.com”>email kami</A>
Untuk membuat link gambar, kita tinggal mengganti tulisan email kami dengan tag penyisip gambar yaitu
<IMG SRC=”email.gif”>. Sehingga lengkapnya tertulis:
<A HREF=”mailto:adifitrah@maktoob.com”><IMG SRC=”email.gif”></A>
Inilah gambar yang sudah dijadikan link:
Hanya untuk siswa-siswi smansa_Joe/labkom/Nov 2007.
Materi TIK XII SMANSA_JOE
Cobalah klik gambar tersebut untuk mengetesnya!
MEMBUAT TABEL
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>
Susunan tag-tag di atas memerintahkan kepada browser untuk menampilkan sebuah tabel yang terdiri dari
satu baris dan satu kolom yang diisi dengan tulisan: kolom 1 dari baris 1. kolom 1 dari baris 1
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>
</TABLE>
Sehingga tabelnya tampak sebagai berikut:kolom 1 dari baris 1
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.<TABLE BORDER=1>
<TR>
<TD>kolom 1 dari baris 1</TD>
<TD>kolom 2 dari baris 1</TD>
</TR>
</TABLE>
Beginilah hasilnya dalam browser:
kolom 1 dari baris 1 kolom 2 dari baris 1
Nah, bila anda ingin menambah sekian baris ke bawah, cukup menyalin ulang dari tag <TR> sampai </TR>.
Sorot (blok) dari tag <TR> hingga </TR> lalu Copy (Ctrl+C). Tempatkan kursor di bawah tag </TR> lalu
Paste (Ctrl+V). Sekian baris yang ingin anda buat, sekian kali pula anda harus menyalinnya (melakukan
perintah Paste). Setelah itu tinggal meng-edit tulisan sesuai keinginan anda. Begini contohnya: <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>
Hanya untuk siswa-siswi smansa_Joe/labkom/Nov 2007.
Materi TIK XII SMANSA_JOE
<TD>kolom 2 dari baris 2</TD>
</TR>
</TABLE>
Tampilannya dalam browser 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>
Beginilah hasilnya dalam browser:kolom 1 dari baris 1 kolom 2 dari baris 1
kolom 1 dari baris 2 kolom 2 dari baris 2
Sedangkan kalau kedua tag tersebut dipakai bersama-sama seperti ini:<TABLE BORDER=1
CELLSPACING=10 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>
Hanya untuk siswa-siswi smansa_Joe/labkom/Nov 2007.
Materi TIK XII SMANSA_JOE
<TD>kolom 2 dari baris 2</TD>
</TR>
</TABLE>
Akan menghasilkan tabel seperti ini:kolom 1 dari baris 1 kolom 2 dari baris 1
kolom 1 dari baris 2 kolom 2 dari baris 2
Ternyata mudah, kan membuat tabel? 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:<TABLE BORDER=1 WIDTH=100%>
<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>
Bagaimana jadinya tabel dengan lebar 100% ?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>
Bagaimana jadinya?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>
Hanya untuk siswa-siswi smansa_Joe/labkom/Nov 2007.
Materi TIK XII SMANSA_JOE
<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 1kolom 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>
Beginilah hasilnya bila ditampilkan dalam browser: kiri atas kanan tengah
kanan bawah tengah tengah
Pembicaraan tentang tabel ini, belum selesai. Akan kita lanjutkan pada halaman berikutnya.

Published in: on 24 January 2010 at 2:05 pm  Leave a Comment  
Tags:

The URI to TrackBack this entry is: https://one2land.wordpress.com/2010/01/24/membuat-website-pribadi-2/trackback/

RSS feed for comments on this post.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: