Assalamualaikum
Bissmilah Hirahmanirahim
Tulisan kali ini adalah lanjutan dari tulisan tentang kegiatan perkuliahan Praktikum Pemodelan dan Simulasi minggu lalu, bisa dicek disini. Kalau pertemuan minggu lalu membahas mengenai membuat teks, merubah teks (warna,ukuran dan juga jenis hurufnya), dan juga membuat daftar/list pada website kita.
Nah, untuk pertemuan diminggu ini akan dibahas mengenai "cara mudah memasukan gambar dalam website" serta "cara mudah dalam membuat sebuah tabel".
Sebuah website mungkin akan tampak sepi jika tidak ada gambar-gambar yang mendukung tulisan/artikel-artikel yang telah kita buat. Maka dari itu keberadaan beberapa gambar dalam website kita amatlah sangat membantu dalam menjelaskan artikel-artikel yang telah kita muat. Begitu juga dengan keberadaan sebuah tabel dalam website kita, fungsinya tak jauh berbeda dari keberadaan sebuah gambar. Selain itu, tabel juga dapat membuat sesuatu tampak rapih.
Oke, tidak panjang lebar dan tidak panjang tulisan. Mari kita lihat dulu tampilan-tampilan website yang nantinya akan terbentuk dari source HTML yang akan kita buat nanti. Berikut tampilannya.
Tampilan hasil compile source HTML
Belum puaskan...masa cuma liat-liat tampilannya saja. Nah, sekarang mari kita coba buat website seperti tampilan diatas. Gampang kok! Ikutin aja source-source HTML berikut.
*Ingat: Ketelitian dan Konsentrasi adalah Kuncinya. ^^
<html>
<head>
<title>Gambar dalam web page</title>
</head>
<body>
<center>
<h1><font color =green>Gambar</font></h1>
</center>
Anda dapat menambahkan gambar <img src="1.jpg" width="50" size> di dalam semua web page anda. Gambar ini akan berada di sebelah kiri dan kanan teks yang ada.
</br>
</br>
<p><img align=left src="1.jpg" width="50">Gunakan attribut ALIGN=LEFT jika anda ingin meletakkan gambar di sebelah kiri teks anda seperti dalam contoh ini.
</br>
</br>
</br>
<p><img align=right src="1.jpg" width="50">Gunakan attribut ALIGN=RIGHT jika anda ingin meletakkan gambar di sebelah kiri teks anda seperti dalam contoh ini.
</br>
</br>
</br>
<p>ALIGN=TOP Teks rata dengan bagian atas <img align=top src="1.jpg" width="50"> gambar.
</br>
</br>
<p>ALIGN=MIDDLE Teks rata dengan bagian atas <img align=middle src="1.jpg" width="50"> gambar.
</br>
</br>
<p>ALIGN=BOTTOM Teks rata dengan bagian atas <img align=bottom src="1.jpg" width="50"> (default) gambar.
</br>
</br>
<hr size="5">
<h2>WIDTH dan HEIGHT</h2>
<img width=100 height=90 src="1.jpg">
WIDTH=100, HEIGHT=90
<hr size="5">
<h2>ALT</h2>
Jika gambar tidak tampil akan digantikan sebuah teks alternatif dengan memberi attribut alt, saat gambar di sorot oleh mouse.</br>
<img src="alt.jpg" align=middle width=100 height=90 alt="Gambar diriku"></br>
Arahkan mouse pada gambar yang tidak tampil
<hr size="5">
<dl>
<dt><img src="1.jpg" width="10%"> Menu Satu
<dt><img src="1.jpg" width="10%"> Menu Dua
<dt><img src="1.jpg" width="10%"> Menu Tiga
<dt><img src="1.jpg" width="10%"> Menu Empat
</dl>
<hr size="5">
<center>
<h1>Tabel</h1>
<caption><b>Judul Tabel</b></caption>
<table width=70% height=70% border=1>
<tr>
<th>Baris 1 Kolom 1</th>
<th colspan=2>Baris 1 Kolom 2-3</th>
</tr>
<tr>
<th>Baris 2 Kolom 1</th>
<td rowspan=2>Baris 2-3 Kolom 2</td>
<td>Baris 2 Kolom 3</td>
</tr>
<tr>
<th>Baris 3 Kolom 1</th>
<td>Baris 3 Kolom 3</td>
</tr>
<tr>
<td align=left>LEFT</td>
<td align=center>CENTER</td>
<td align=right>RIGHT</td>
</tr>
<tr>
<td valign=top>TOP</td>
<td valign=middle>MIDDLE</td>
<td valign=bottom>BOTTOM</td>
</tr>
</table>
</center>
<center>
<hr width="25%" size="5" color="green">
<img src="1.jpg" width="20%">
<hr width="25%" size="5" color="green">
<address>
Nama : Wisnu Jati Primadana </br>
TTL : Jakarta, 11 Februari 1990 </br>
NIM : 107091002272 </br>
No.Tlp : 085693096966 </br>
E-mail : demongpok@gmail.com </br>
Ym : sempax_zone </br>
Fb : demong_pok@plasa.com </br>
Koprol : shinobis </br>
Blog : klintink.blogspot.com </br>
Alamat : Jl. Sarangan Raya/No.6 Perumnas 2 Karawaci Tangerang
</address>
<hr size="5" color="blue">
</center>
</body>
</html>
Langkah selanjutnya, Save file dengan ekstensi .html (ingat jangan .txt). Lalu run/buka/jalankan file ini dengan browser (IE, Mozilla atau Opera).
*Catatan : Oh iya, perlu diketahui bahwa dalam script tersebut kita memanggil file suatu gambar dengan nama 1.JPG. Agar gambar tersebut dapat muncul pada halaman website kita, maka satukan file gambar tersebut dengan file hmtl kita.
Mau tidak ribet dan tidak capek...
>>Download Disini!<<
Mau tidak ribet dan tidak capek...
>>Download Disini!<<
Selamat Mencoba...
Wassalam
0 comments:
Post a Comment