Waroeng InTEC deSmart75 Network Inc.

Information Technology of Education Center ——— The Performance of Higher Education ——– Reach the Successful of Your Successful by Reaching Successful of Knowledge

  • Pos-pos Terbaru

  • Klik tertinggi

    • Tak ada
  • Berlangganan

  • RSS Kekuatan Kepercayaan Pendidikan

    • cara install wordpress di local host September 8, 2008
      cukup mudah menginstaall wordpress di local host komputer kita di rumah, berarti kita bisa mengelolo content dan bisa belajar wordpress cms kita sendiri, tanpa harus conect dengan internet, sehingga kita bisa belajar wordpress cms dengan hemat tanpa harus bayar internet,trus apa sih yang perlu di siapkan untuk bisa menjalankan wordpress cms kita di komputer […]
      pakde_smart75@yahoo.co.id (pakdesmart75)
    • Perancangan Database September 8, 2008
      Pendahuluan perancangan Database : Ø Tantangan dalam merancang database adalah bagaimana merancang sehingga database dapat memenuhi keperluan saat ini dan masa mendatang Ø Perancangan Model Konseptual perlu dilakukan disamping perancangan model fisik Proses perancangan basis data , dibagi menjadi 3 tahapan yaitu : Ø Perancangan basis data secara konseptual, […]
      pakde_smart75@yahoo.co.id (pakdesmart75)
    • JURNAL PENYESUAIAN September 6, 2008
      Ingatkah Anda pelajaran dalam modul kelas XI yang lalu tentang jurnal penyesuaian? Apakah sama dengan jurnal penyesuaian yang disajikan dalam modul ini? Jawabnya adalah sama. Hanya saja jurnal penyesuaian dalam modul kelas XI untuk perusahaan jasa dan dalam modul kelas XII ini untuk perusahaan dagang. Sehingga yang berbeda dalam hal ini adalah karakteristik […]
      pakde_smart75@yahoo.co.id (pakdesmart75)
    • Kisah Lahirnya si Raja Batak Agustus 16, 2008
      dicopy tanpa izin dari basibanget.net
      pakde_smart75@yahoo.co.id (pakdesmart75)
    • Cara Convert File Micosoft Office ke Format PDF Juli 25, 2008
      Dengan adanya plugin gratis dari Microsoft Office 2007 maka dengan ini pengguna Office 2007 dapat dengan mudah mengkonversikannya. Sebelumnya saya pribadi sering menggunakan program dari Adobe yaitu Adobe Acrobat yang berbayar. Nah dengan adanya plugin ini maka kita tidak perlu lagi perangkat lunak tambahan, cukup gunakan Office 2007 Anda saja ditambah denga […]
      pakde_smart75@yahoo.co.id (pakdesmart75)
  • Top Tags Widget

  • Popular News

  • Technorati Authority Widget

Struktur Dokumen HTML Mahir-2

Posted by intecsmart75 pada Juli 25, 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.pakde-smart75.blogspot.com</P>

<P ALIGN=”left”><IMG SRC=”intec.gif” ALT=”The Performance of Higher Education”></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>The Performance of Higher Education, VSPACE = 20

<BR>

<IMG SRC=”intec.gif” WIDTH=”270″ HEIGTH=”70″ ALT=”intec HM” BORDER=”2″

HSPACE=”20″ VSPACE=”20″>

<BR>

http://www.pakde-smart75.blogspot.com, HSPACE = 20</P>

<P>Jl. Brigjend Zein Hamid No. 40 Medan<IMG SRC=” intec.gif” WIDTH=”203″ HEIGHT=”60″

ALT=” The Performance of Higher Education” HSPACE=”20″>Medan, 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>

Tinggalkan Balasan

Please log in using one of these methods to post your comment:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

 
%d blogger menyukai ini: