Facebook

header ads

Grafik dalam Halaman Web

by - Sejutablog on - Juli 12, 2008



Tulisan ini merupakan kelanjutan dari tulisan saya mengenai HTML untuk tingkat lanjut, bagi kamu yang baru bela jar sangat disarankan untuk membaca terlebih dulu materi awal kita yaitu Dasar-Dasar HTML.

3. Grafik dalam Halaman Web


Biasanya orang menggunakan gambar untuk memperindah situsnya. HTML menyediakan tag <IMG> untuk menampilkan gambar dalam halaman web. Dari berbagai macam format gambar yang ada, hanya beberapa saja yang bisa dipergunakan dalam membuat halaman web. Format gambar yang paling sering digunakan adalah GIF dan JPEG. Format penulisannya adalah:


<IMG SRC = “file_gambar” ALT = “nama_alternatif”>


Atribut SRC digunakan untuk menentukan sumber gambar. Atribut ALT berfungsi sebagai teks pengganti gambar untuk browser yang tidak bisa mendukung grafik, atau pada pihak client sengaja mematikan fasilitas pemanggilan gambar.


Contoh:


<HTML>

 <HEAD>

 <TITLE>Grafik dalam halaman web</TITLE>

 </HEAD>

 <BODY>

 <P ALIGN="left">www.bugsinternetcafe.com</P>

 <P ALIGN="left"><IMG SRC="bugs_logo_white.gif"  ALT="Bugs Internet Cafe Yogyakarta"></P>

 </BODY>

 </HTML>




Beberapa atribut pada tag <IMG> yang biasa digunakan dalam halaman-halaman web.

  • BORDER : memberikan suatu border atau batas pada gambar, default-nya = 0

  • HEIGHT, WIDTH : menentukan tinggi dan lebar suatu gambar dalam ukuran pixel

  • HSPACE, VSPACE : menentukan jarak spasi horizontal dan spasi vertikal antara gambar-gambar dengan objek di sekitarnya

  • ALIGN : mengatur perataan gambar terhadap objek di sekelilingnya. Nilainya bisa berupa LEFT, CENTER, RIGHT, BOTTOM, TOP dan MIDDLE



Contoh:


<HTML>

 <HEAD>

 <TITLE>Atribut IMG </TITLE>

 </HEAD>

 <BODY>

 <P>Bugs Internet Cafe, VSPACE = 20

 <BR>

 <IMG SRC=".gif" WIDTH="270" HEIGTH="70" ALT="radiokampus ITB" BORDER="2"

 HSPACE="20" VSPACE="20">

 <BR>

 www.bugsinternetcafe.com, HSPACE = 20</P>

 <P>Jl.Kaliurang Km.5 No.34<IMG SRC=" bugs_logo_white.gif" WIDTH="203" HEIGHT="60"

 ALT=" Bugs Internet Cafe" HSPACE="20">Yogyakarta, HSPACE = 20

 <BR>

 </P>

 </BODY>

 </HTML>

4. Table


Tabel banyak digunakan karena dapat menampilkan informasi dengan bentuk yang ringkas dan mudah dibaca. Untuk membuat tabel digunakan tag awal <TABLE> dan tag penutup </TABLE>. Tag <TABLE> mewakili beberapa bagian penting, yaitu:

  • CAPTION> … </CAPTION> digunakan untuk membentuk judul tabel. Judul tabel ini akan terletak diluar tabel, bisa di bagian atas atau bagian bawah tabel

  • <TH> … </TH> berfungsi untuk meletakkan judul tabel di bagian peling atas atau paling kiri dari suatu tabel

  • <TD> … </TD> digunakan sebagai tempat menulis data atau informasi dalam tabel



Contoh:


<HTML>

 <HEAD>

 <TITLE>Tabel</TITLE>

 </HEAD>

 <BODY>

 <TABLE>

 <CAPTION>Seputar Calciomeecato</CAPTION>

 <TR>

 <TH>Nama Klub</TH>

 <TH>Berita</TH>

 </TR>

 <TR>

 <TD>Fiorentina</TD>

 <TD>Fiorentina mendatangkan Nuno Gomes untuk menggantikan sang legenda Batigol</TD>

 </TR>

 <TR>

 <TD>Lazio</TD>

 <TD>Lazio menjadi klub dengan rekor pembelian pemain sebesar 240 miliar lira!</TD>

 </TR>

 <TR>

 <TD>Perugia</TD>

 <TD>Ahn Jung-Whan resmi menjadi pemain pinjaman Perugia</TD>

 </TR>

 <TR>

 <TD>Udinese</TD>

 <TD>Pemain Spanyol berusia 23 tahun, Luis Helguera menjadi pemain Udinese <BR>

 dengan transfer senilai 349 juta lira</TD>

 </TR>

 </TABLE>

 </BODY>

 </HTML>

Table ALIGN dan WIDTH


Perataan horizontal tabel menggunakan atribut ALIGN. ALIGN dapat bernilai LEFT untuk perataan kiri, CENTER untuk perataan di tengah dan RIGHT untuk perataan di kanan. Sedangkan untuk perataan vertikal menggunakan atribut VALIGN. VALIGN dapat bernilai TOP untuk perataan atas, MIDDLE untuk perataan di tengah dan BOTTOM untuk perataan di bawah.
Lebar tabel biasanya diatur menggunakan atribut WIDTH. Nilai WIDTH dapat dinyatakan dengan persen (%) yang menyatakan lebar tabel dalam persentase atau dinyatakan dengan pixel yang berarti ukuran sesungguhnya dari tabel.


Contoh:


<HTML>
<HEAD>

<TITLE>Tabel dengan WIDTH dan ALIGN</TITLE>
</HEAD>
<BODY>
<TABLE WIDTH="88%" HEIGHT="210">
<TR>
<TD WIDTH="30%" HEIGHT="110" VALIGN="top">Lihatlah VALIGN="top"<br>
Janganlah merasa malu mempelajari sesuatu yang tidak diketahuinya</TD>
<TD WIDTH="34%" HEIGHT="110" VALIGN="middle">Bandingkan dengan VALIGN ="middle"<br>
</TD>
<TD WIDTH="36%" HEIGHT="110" VALIGN="bottom">bagaimana dengan ini VALIGN="bottom"</TD>
</TR>
<TR>
<TD WIDTH="30%" HEIGHT="100" ALIGN="left">kalo ini ALIGN="left"</TD>
<TD WIDTH="34%" HEIGHT="100" ALIGN="center">ALIGN="center"</TD>
<TD WIDTH="36%" HEIGHT="100" ALIGN="right">Dunia diciptakan untuk
semua makhluk, bukan untuk kepentingan dunia itu sendiri, dan ini dengan ALIGN = "right"</TD>
</TR>
</TABLE>

</BODY>
</HTML>

Table CELLSPACING dan CELLPADDING



Atribut CELLSPACING digunakan untuk menentukan jumlah spasi yang terdapat di antara dua buah sel. CELLPADDING berfungsi untuk mengatur jumlah spasi yang terdapat di antara batas/border dengan isi atau teks di dalam sel tersebut.




Contoh:


<HTML>

<HEAD>

 <TITLE>Tabel dengan CELLSPACING dan CELLPADDING</TITLE>

 </HEAD>

 <BODY>

 <TABLE BORDER="3" CELLPADDING="5" CELLSPACING="5" WIDTH="85%">

 <TR>

 <TD WIDTH="43%">baris 1, kolom 1</TD>

 <TD WIDTH="57%">baris 1, kolom 2</TD>

 </TR>

 <TR>

 <TD WIDTH="43%">baris 2, kolom 1</TD>

 <TD WIDTH="57%">baris 2, kolom 2</TD>

 </TR>

 </TABLE>

</BODY>

</HTML>

Table COLSPAN dan ROWSPAN



Atribut COLSPAN digunakan untuk menghubungkan beberapa kolom menjadi satu kolom. Sedangkan ROWSPAN digunakan untuk menggabungkan beberapa baris menjadi satu.




Contoh:


<HTML>

 <HEAD>

 <TITLE>Tabel dengan ROWSPAN dan 

COLSPAN</TITLE>

 </HEAD>

 <BODY>

 <TABLE BORDER="3" CELLPADDING="5" CELLSPACING="5" WIDTH="85%">

 <TR>

 <TD WIDTH="43%" ROWSPAN="2">baris 1, kolom 1<P>baris 2, kolom 1</TD>

 <TD WIDTH="57%">baris 1, kolom 2</TD>

 </TR>

 <TR>

 <TD WIDTH="57%">baris 2, kolom 2</TD>

 </TR>

 <TR>

 <TD WIDTH="100%" COLSPAN="2">baris 3, kolom 1<P>baris 3, kolom 2</TD>

 </TR>

 </TABLE>

 </BODY>

 </HTML>

Table COLOR



Anda bisa memberi warna pada tabel. Selain warna latar belakang, border tabel bisa juga ditentukan warnanya. Untuk latar belakang digunakan atribut BGCOLOR, sedangkan untuk memberi warna pada border gunakan atribut BORDERCOLOR.


Contoh:


<HTML>

 <HEAD>

 <TITLE>Tabel dengan ROWSPAN dan COLSPAN</TITLE>

 </HEAD>

 <BODY>

 <TABLE BORDER="3" CELLPADDING="3" CELLSPACING="5" WIDTH="100%" BORDERCOLOR="#FF0000">

 <TR>

 <TD WIDTH="50%" BGCOLOR="#808080"> </TD>

 <TD WIDTH="50%"> </TD>

 </TR>

 <TR>

 <TD WIDTH="50%"> </TD>

 <TD WIDTH="50%" BGCOLOR="#008080"> </TD>

 </TR>

 </TABLE>

 <TABLE BORDER="3" CELLPADDING="3" CELLSPACING="5" WIDTH="100%" BORDERCOLORLIGHT="#008080"

 BORDERCOLORDARK="#800080">

 <TR>

 <TD WIDTH="100%"> </TD>

 </TR>

 </TABLE>

 </BODY>

 </HTML>


Author : Yudhi
Tags

Posting Komentar

4 Komentar

  1. song's9 September 2008 pukul 23.25

    aku suka dengan tutorial ini semoga bisa menjadi pelajaran yagn sangat berarti bagi semua orang,,,aku pengen belajar bikin web tolong dong kirim tutorial yang komplit ke email ku...thank's

    BalasHapus
  2. haris5 November 2008 pukul 18.36

    okey...
    dah agak jelas la....
    tp....

    kl bikin yang kayak di halaman yang ini gimana????
    karena aku belajarnya otodidak..
    gak da yang mau ngajarion

    BalasHapus
  3. dppkad16 Maret 2009 pukul 20.48

    tertarik banget deh dengan rubrik ini apa bisa dikirim panduan untuk pembuatan web yang lengkap dan mudah broor, tanks

    BalasHapus
  4. bikin web murah3 Agustus 2009 pukul 01.05

    tutorialnya bikin sendiri tuh??
    hebat2!!

    BalasHapus