MEMBUAT WEB SEDERHANA MENGGUNAKAN HTML

Pada bab ini akan dibahas dan dibangun sebuah web sederhana. Sebelum membuat web sebaiknya dibuat dulu sketsa website yang akan dibangun. Adapun sketsa web yang akan dibuat adalah sebagai berikut:

Header

Gambar Header

Footer

Content

(isi web)

Catatan:

1. Lebar (width) dari website adalah: 900 px

2. Lebar menu adalah 200 px

3. Lebar konten adalah 700 px

Selain sketsa kita juga perlu menentukan Peta Situs, yang berfungsi untuk menentukan link dan jumlah halaman yang akan dibangun. Adapun peta situs dari website sederhana yang akan dibangun adalah sebagai berikut:

Beranda

(index.html)

Makanan

(makanan.html)

Minuman

(minuman.html)

Tentang

(tentang.html)

Komentar

(komentar.html)

Keterangan:

Halaman yang pertama tampil saat website dijalankan adalah halaman “Beranda”. Dari halaman Beranda kita dapat beranjak ke halaman Makanan, Minuman, Tentang, maupun Komentar, dengan cara mengklik menu yang ada pada halaman Beranda.

Setelah selesai membuat Peta Situs maka kita dapat melakukan coding, dengan mengetikkan skrip berikut ini:

<html>

<head>

<title>Web Pertamaku</title>

</head>

<body>

<table width="900" border="0" align="center" cellpadding="0" cellspacing="0">

<tr>

<td align="center" width="200" height="200" bgcolor="#FFFF00">

<img src="gambar/latte.jpg" align="center" width="145" height="150" border="3" style="border-color:#CCCCCC" />

</td>

<td bgcolor="#0033CC">Menu-Menu Jualanku 

Sebagai latihan membuat web perdanaku</td>

</tr>

<tr>

<td bgcolor="#00FF00" valign="top">

Menu Utama

<ul>

<li><a href=index.html>Beranda</a></li>

<li><a href=Makanan.html>Makanan</a></li>

<li><a href=Minuman.html>Minuman</a></li>

<li><a href=tentang.html>tentang </a></li>

<li><a href=komentar.html>Komentar</a></li>

</ul>

</td>

<td bgcolor="#00FFFF">Hallo semuanya

<img src="gambar/SAM_2067.jpg" align="center" width="145" height="150" hspace=12 />

Selamat datang di website pembelajaran dengan belajar website ini

diharapkan anda bisa jadi web kreator yang handal, silahkan anda belajar website melalui buku ini dan anda

kembangkan lagi dengan berkreasi dan membaca buku-buku lain yang bisa mengembangkan kemampuan anda.

Semoga anda kompeten dalam bidang website

Selamat berkarya, Jayalah SMK Rekayasa Perangkat Lunak 

 Selamat Mencoba</td>

</tr>

<tr>

<td colspan="2" bgcolor="#006633"><div align="center">Copy right Meida 

All Right Reserve</div></td>

</tr>

</table>

</body>

</html>

<head>

<title>Web Pertamaku</title>

</head>

Keterangan:

Merupakan judul website

<table width="900" border="0" align="center" cellpadding="0" cellspacing="0">

Merupakan tag untuk membangun tabel yang menampung seluruh website dengan lebar tabel 900 px, tanpa bingkai, tanpa padding dan tanpa spasi dengan posisi di tengah.

<td align="center" width="200" height="200" bgcolor="#FFFF00">

<img src="gambar/latte.jpg" align="center" width="145" height="150" border="3" style="border-color:#CCCCCC" />

</td>

Skrip untuk membuat gambar di header disisi kiri yang tempatkan di dalam cell dengan lebar 200 px, dan panjang 200 px, dengan warna latar belakang #FFFF00 (kuning). Gambar/latte.jpg merupakan alamat gambar yang digunakan dan diberi ukuran lebar 145 px panjang 150 px, dan gambar diberi border dengan warna :#CCCCCC (putih).

<td bgcolor="#0033CC">Menu-Menu Jualanku Sebagai latihan membuat web perdanaku</td>

Berfungsi untuk membuat cell judul Header yang berada disisi kanan, dengan warna latar belakang cell 0033CC (biru).Jenis huruf Judul besar header adalah Agency FBdan di cetak tebal.Sedangkan judul kecil dicetak miring.

<td bgcolor="#00FF00" valign="top">

Menu Utama

<ul>

<li><a href=index.html>Beranda</a></li>

<li><a href=Makanan.html>Makanan</a></li>

<li><a href=Minuman.html>Minuman</a></li>

<li><a href=tentang.html>Tentang </a></li>

<li><a href=komentar.html>Komentar</a></li>

</ul>

</td>

Berfungsi untuk membuat menu utama website dengan latar belakang cell adalah #00FF00(hijau) dengan jenis tulisan “Agency FB”.Menu utama ditampilkan dalam susunan Unordered list. Menu-menu tersebut adalah Beranda yang dilinkkan ke file index.html, Makanan yang dilinkkan ke file Makanan.html, Minuman yang dilinkkan ke file minuman.html, Tentang yang dilinkkan ke file tentang.html, dan Komentar yang dilinkkan ke file komentar.html.

<td bgcolor="#00FFFF">Hallo semuanya

<img src="gambar/SAM_2067.jpg" align="center" width="145" height="150" hspace=12 />

Selamat datang di website pembelajaran dengan belajar website ini

diharapkan anda bisa jadi web kreator yang handal, silahkan anda belajar website melalui buku ini dan anda

kembangkan lagi dengan berkreasi dan membaca buku-buku lain yang bisa mengembangkan kemampuan anda.

Semoga anda kompeten dalam bidang website

Selamat berkarya, Jayalah SMK Rekayasa Perangkat Lunak 

 Selamat Mencoba</td>

Merupakan isi konten yang terdiri dari gambar dan teks, gambar yang digunakan beralamat di gambar/SAM_2067.jpg.

<tr>

<td colspan="2" bgcolor="#006633"><div align="center">Copy right Meida 

All Right Reserve</div></td>

</tr>

Merupakan skrip untuk membuat footer, yang dibuat dalam 1 baris dengan pertemuan 2 cell (colspan="2"). Jenis tulisan yang digunakan untuk teks pada footer adalah Trebuchet ms.

Hasil dari skrip di atas adalah sebagai berikut:

Setelah selesai melakukan coding, simpan file tersebut dengan nama index.html pada folder BelajarWeb. Langkah selanjutnya yang harus dilakukan adalah membuat file-file yang lainnya yang ada pada peta situs. Untuk membuat file makanan.html ketikkan code berikut ini:

<html>

<head>

<title>Web Pertamaku</title>

</head>

<body>

<table width="900" border="0" align="center" cellpadding="0" cellspacing="0">

<tr><td align="center" width="200" height="200" bgcolor="#FFFF00">

<img src="gambar/latte.jpg" align="center" width="145" height="150" border="3" style="border-color:#CCCCCC" />

</td>

<td bgcolor="#0033CC">Menu-Menu Jualanku 

Sebagai latihan membuat web perdanaku</td>

</tr>

<tr>

<td bgcolor="#00FF00" valign="top">

Menu Utama

<ul>

<li><a href=index.html>Beranda</a></li>

<li><a href=Makanan.html>Makanan</a></li>

<li><a href=Minuman.html>Minuman</a></li>

<li><a href=tentang.html>tentang </a></li>

<li><a href=komentar.html>Komentar</a></li>

</ul>

</td>

<td valign="top" bgcolor="#00FFFF">Daftar Menu Makanan

<table width="100%" border="0">

<tr>

<td><a href="gambar/Aglio bacon capsicum spagety.jpg"><img src="gambar/Aglio bacon capsicum spagety.jpg" width="200" height="200" border="2" style="border-color:#333399"></a>

Nama :Aglio bacon capsicum spagety

Harga : 25000

</td>

<td><a href="gambar/aglio olio.jpg"><img src="gambar/aglio olio.jpg" width="200" height="200" border="2" style="border-color:#333399"></a>

Nama :aglio olio

Harga : 2700</td>

<td><a href="gambar/aglio-olio-with-salmon.jpg"><img src="gambar/aglio-olio-with-salmon.jpg" width="200" height="200"></a>

Nama : aglio-olio-with-salmon

Harga : 35000</td>

</tr>

<tr>

<td valign="top"><a href="gambar/ayam sambal bali.jpg"><img src="gambar/ayam sambal bali.jpg" width="200" height="197" border="2" style="border-color:#333399"></a>

Nama : Ayam Sambal Bali

Harga : 55000</td>

<td><a href="gambar/bubur ayam.jpg"><img src="gambar/bubur ayam.jpg" width="200" height="198" border="2" style="border-color:#333399"></a>

Nama : Bubur Ayam

Harga : 25000</td>

<td><a href="gambar/capcay seafood.JPG"><img src="gambar/capcay seafood.JPG" width="200" height="200"></a>

Nama : Capcay Seafood

Harga : 37000</td>

</tr>

</table>

</td>

</tr>

<tr>

<td colspan="2" bgcolor="#006633"><div align="center">Copy right Meida 

All Right Reserve</div></td>

</tr>

</table>

</body>

</html>

Hasil dari code diatas adalah sebagai berikut:

Skrip yang perlu diperhatikan adalah skrip untuk membuat isi konten yang menampilkan daftar makanan dilengkapi dengan gambar. Setiap gambar yang ada pada content merupakan sebuah link yang dapat diklik untuk menampilkan gambar yang lebih besar lagi, skrip untuk membuat link tersebut adalah:

<a href="gambar/Aglio bacon capsicum spagety.jpg"><img src="gambar/Aglio bacon capsicum spagety.jpg" width="200" height="200" border="2" style="border-color:#333399"></a>

Jika gambar Aglio bacon capsicum spagety diklik maka hasilnya adalah sebagai berikut:

Setelah membuat file makanan.html maka langkah selanjutnya adalah membuat file minuman.html. Code untuk file tersebut adalah sebagai berikut:

<html>

<head>

<title>Web Pertamaku</title>

</head>

<body>

<table width="900" border="0" align="center" cellpadding="0" cellspacing="0">

<tr><td align="center" width="200" height="200" bgcolor="#FFFF00">

<img src="gambar/latte.jpg" align="center" width="145" height="150" border="3" style="border-color:#CCCCCC" /></td>

<td bgcolor="#0033CC">Menu-Menu Jualanku 

Sebagai latihan membuat web perdanaku</td>

</tr>

<tr><td bgcolor="#00FF00" valign="top">

Menu Utama

<ul>

<li><a href=index.html>Beranda</a></li>

<li><a href=Makanan.html>Makanan</a></li>

<li><a href=Minuman.html>Minuman</a></li>

<li><a href=tentang.html>tentang </a></li>

<li><a href=komentar.html>Komentar</a></li>

</ul>

</td>

<td valign="top" bgcolor="#00FFFF">Daftar Menu Minuman

<table width="100%" border="0"><tr><td><img src="gambar/10946624_346385915556630_402487431_n.jpg" width="200" height="200">

Nama :Koffie Tora Bika

Harga : 45000

</td>

<td><img src="gambar/latte.jpg" width="200" height="200">

Nama : Koffie Latte

Harga : 27000</td>

<td><img src="gambar/10954821_1546867285583648_1368651566_n.jpg" width="200" height="200">

Nama : Koffie I Love You

Harga : 38000</td></tr>

<tr><td valign="top"><img src="gambar/goedang-koffie (2).jpg" width="200" height="200">

Nama : Jus Alfokat, Jeruk, Strawberi

Harga : 35000</td>

<td><img src="gambar/chocolate-country-that.jpg" width="200" height="200">

Nama : Chocolate Country Es

Harga : 18000</td>

<td><img src="gambar/vietnam drip.jpg" width="200" height="200">

Nama : Vietnam Driff

Harga : 65000</td>

</tr>

</table>

</td>

</tr>

<tr>

<td colspan="2" bgcolor="#006633"><div align="center">Copy right Meida 

All Right Reserve</div></td>

</tr>

</table>

</body>

</html>

Hasil dari program di atas adalah sebagai berikut:

File tentang.html, file ini berisi data-data tentang pembuat website. Scripnya adalah sebagai berikut:

<html>

<head>

<title>Web Pertamaku</title>

</head>

<body>

<table width="900" border="0" align="center" cellpadding="0" cellspacing="0">

<tr>

<td align="center" width="200" height="200" bgcolor="#FFFF00">

<img src="gambar/latte.jpg" align="center" width="145" height="150" border="3" style="border-color:#CCCCCC" /></td>

<td bgcolor="#0033CC">Menu-Menu Jualanku 

Sebagai latihan membuat web perdanaku</td>

</tr>

<tr>

<td bgcolor="#00FF00" valign="top">

Menu Utama

<ul>

<li><a href=index.html>Beranda</a></li>

<li><a href=Makanan.html>Makanan</a></li>

<li><a href=Minuman.html>Minuman</a></li>

<li><a href=tentang.html>tentang </a></li>

<li><a href=komentar.html>Komentar</a></li>

</ul>

</td>

<td valign="top" bgcolor="#00FFFF">Tentang Diriku <a href="Biodata.docx">download</a>

<table width="100%" border="0">

<tr>

<td>Nama</td>

<td>: Meida Sitanggang, M. Kom</td>

</tr>

<tr>

<td>Tempat dan Tanggal Lahir</td>

<td> : Siahaan balian, 02 Mei 1984</td>

</tr>

<tr>

<td>Alamat Rumah</td>

<td> : Kiwi Raya blok L no 2, Percut Sei Tuan, Kab. Deli Serdang</td>

</tr>

<tr>

<td>Telepon</td>

<td> : 081375100244</td>

</tr>

<tr>

<td>E-Mail</td>

<td> : meida.sitanggang@gmail.com </td>

</tr>

<tr>

<td>Instansi tempat bekerja</td>

<td>: SMP N 4 Medan 

: SMK Brigjend Katamso</td>

</tr>

<tr>

<td>Alamat Kantor</td>

<td> : Jl. Jati 3 No. 118 Kel. Teladan Timur: 

 : Jl. Pinang Baris Gg. Sae Ganesha no 3 C</td>

</tr>

<tr>

<td>Telepon kantor</td>

<td> : 061 878786</td>

</tr>

</table>

Data Pendidikan 

<table width="100%" border="0">

<tr>

<td rowspan="6"><img src="DSC_0280edit.jpg" width="250" height="250"></td>

<td>

SD</td>

<td>Negeri 3 no. 173739 Pangururan Tamat: 1996</td>

</tr>

<tr>

<td>SLTP</td>

<td>Negeri 1 Pangururan Tamat: 1999</td>

</tr>

<tr>

<td>SLTA</td>

<td>Negeri 1 Pangururan Tamat: 2002</td>

</tr>

<tr>

<td>D-3</td>

<td>STMIK Sisingamangaraja XII Tamat: 2005</td>

</tr>

<tr>

<td>Strata-1</td>

<td>STMIK Sisingamangaraja XII Tamat: 2006</td>

</tr>

<tr>

<td>Strata-2</td>

<td> Universitas Sumatera Utara Tamat: 2013</td>

</tr>

</table>

</td>

</tr>

<tr>

<td colspan="2" bgcolor="#006633"><div align="center">Copy right Meida 

All Right Reserve</div></td>

</tr>

</table>

</body>

</html>

Jika halaman tersebut dijalankan maka hasilnya adalah sebagai berikut:

Dari halaman kita dapat mendownload file biodata.doxc. hal tersebut karena adanya skrip yang menyediakan fasilitas hyperlink ke file Microsoft word. Script tersebut adalah:

<a href="Biodata.docx">download</a>

Jika hyperlink biodata pada halaman tentang kita klik maka hasilnya adalah sebagai berikut:

Dari tampilan di atas jika kita memilih “Open with”, maka aplikasi Microsoft word akan diaktifkan dan file biodata.docx akan ditampilkan, seperti tampilan berikut ini:

Halaman terakhir yang harus kita buat adalah halaman komentar.html. Berikut skripnya:

<html>

<head>

<title>Web Pertamaku</title>

</head>

<body>

<table width="900" border="0" align="center" cellpadding="0" cellspacing="0">

<tr><td align="center" width="200" height="200" bgcolor="#FFFF00">

<img src="gambar/latte.jpg" align="center" width="145" height="150" border="3" style="border-color:#CCCCCC" /></td>

<td bgcolor="#0033CC">Menu-Menu Jualanku 

Sebagai latihan membuat web perdanaku</td>

</tr>

<tr>

<td bgcolor="#00FF00" valign="top">

Menu Utama

<ul><li><a href=index.html>Beranda</a></li>

<li><a href=Makanan.html>Makanan</a></li>

<li><a href=Minuman.html>Minuman</a></li>

<li><a href=tentang.html>tentang </a></li>

<li><a href=komentar.html>Komentar</a></li></ul>

</td>

<td valign="top" bgcolor="#00FFFF">Tinggalkan Komentar Anda 

<form name="form1" method="post" action="">

<table width="100%" border="0">

<tr>

<td>Nama</td>

<td><label>

<input name="nama" type="text" id="nama" size="35">

</label></td></tr>

<tr><td>Alamat Email</td>

<td><input name="email" type="text" id="email" size="35"></td></tr>

<tr>

<td>Komentar</td>

<td><label>

<textarea name="komentar" id="komentar" cols="45" rows="5"></textarea>

</label></td>

</tr>

<tr>

<td><div align="right">

<label>

<input type="submit" name="button" id="button" value="KIRIM">

</label>

</div></td>

<td><label>

<input type="reset" name="button2" id="button2" value="BATAL">

</label></td>

</tr>

</table>

</form>

</td>

</tr>

<tr>

<td colspan="2" bgcolor="#006633"><div align="center">Copy right Meida 

All Right Reserve</div></td>

</tr>

</table>

</body>

</html>

Berikut tampilan dari halaman komentar.html:

Pada halaman ini akan disediakan form yang dapat kita isi. Namun form tersebut belum bisa diproses, karena seperti yang dijelaskan pada bab bab 3, kita perlu menggabungkan bahasa HTMl dengan server side scripting sehingga kita dapat membuat code yang dapat memproses form ini, namun karena web ini masih bersifat statis maka, hal tersebut tidak perlu dibahas dulu.

Jika kita memperhatikan setiap halaman yang baru dibuat, isinya sebenarnya hampir sama antara satu halaman dengan halaman yang lain, yang berubah hanya isi kontenya saja. Oleh karena itu, untuk penggodean yang lebih mudah dan cepat, kita dapat mengkopi paste satu halaman untuk membuat halaman yang lainnya, selanjutnya tinggal kita ganti isi kontennya sesuai dengan yang kita inginkan. Selamat Mencoba.

MENULIS ADALAH TERAPI BUATKU

Cari Blog Ini

MEMBUAT WEB SEDERHANA MENGGUNAKAN HTML

Komentar

Posting Komentar