sini saya akan sharing membuat halaman web statis menggunakan bantuan tabel. Fungsinya, agar lebih rapi dan mudah dipahami. Sebaiknya agan baca artikel diatas.
Oke, untuk membuat web statis kita persiapkan tool kita yaitu text editor. Bisa notepad++, dreamweaver, dll. Selanjutnya, kita buka text editor dan mulai membuat web statis. Kita akan membuat web pribadi yang berisi data diri, hobby, galery. Cukup 3 halaman saja, jika ingin tambah silahkan agan kembangkan sendiri. Oke…
Membuat web statis halaman biodata.html
Oke, langkah awal membuat suatu halaman web html adalah dengan perintah berikut ini:
<html>
<head>
<title>Halaman Biodata</title>
</head>
<body>
</body>
</html>
Save dengan nama biodata.html pada folder namanya web statis atau apa yang agan suka. Untuk setiap tag html di atas jika agan belum paham silahkan baca dasar html link di atas tadi. Di situ sudah saya jelaskan dengan gamblang. he…
Next, selanjutnya kita isi halaman biodata.html dengan table. caranya sebagai berikut:
<body>
<center>
<table width=”80%” border=”1″>
<tr>
<td colspan=”2″>Header web</td>
</tr>
<tr>
<td width=”26%”>sidebar kiri</td>
<td width=”74%”>Isi web</td>
</tr>
<tr>
<td colspan=”2″>Footer</td>
</tr>
</table>
</center>
<body>
Nah, kita save lalu kita buka file biodata.html tadi dengan mozilla. Biasanya file sudah otomatis terindex oleh mozilla/web browser agan. berikut gambarnya:
membuat web statis dengan tabel selanjutnya adalah mengisi setiap kolom yang ada. baik header, sidebar, isi web, dan footer. pada kolom header kita isi dengan kata yang biasanya menggunakan tag <h1></h1>. Silahkan pelajarin pada
Mengatur Format Teks Pada HTML. Nah, Kita isi dengan
<h1> Web Profil Ganang</h1>
Selanjunya pada Sidebar Kiri kita isi lagi dengan Link untuk menuju halaman Hobby dan Galery. Caranya sebagai berikut, ganti tulisan “sidebar kiri” menjadi:
<a href=”hobby.html”> Halaman Hobby</a><br>
<a href=”galery.html”> Halaman Galery</a>
Dan Untuk “Isi Web” Kita ganti dengan informasi biodata yang akan kita tampilkan pada web statis yang kita buat. Bebas saja, tapi saya contohkan sbb:
<h3>Halaman Biodata Ganang</h3>
<p>Selamat datang diwebsite pribadi ganang julianto, ini merupakan web profil saya dimana terdapat data mengenail saya dan juga foto galery saya</p>
<p>Berikut detail biodata saya:</p>
<p>Nama : Ganang </p>
<p>Alamat : Bantul, Yogyakarta</p>
<p>Skolah : STMIK ELRAHMA YK</p>
<p>Agama : Islam</p>
Dan pada “Footer” kita ganti dengan tulisan copy right. caranya:
<center>© Copyright 2014</center>
Save file biodata.html lalu jalankan kembali/reflesh pada browser. Maka hasil dari pembuatan web statis sederhana di atas adalah:
Jika file biodata agan tidak berhasil, download saja file biodata.html
disini.
Oke, Web statis sederhana dengan tabel html sudah jadi satu halaman biodata. Selanjutnya kita buat halaman hobby dan galery. caranya mudah, kita tinggal save as pada file biodata.html tadi dan kita beri nama dengan hobby.html. Dalam hal ini artinya kita tinggal edit isi halaman saja dan kerangkanya sama. Yang harus diganti pada hobby.html adalah sidebar dan isi web.
Pada sidebar kita ganti link “Halaman Hobby” dengan “Halaman Biodata”. caranya sbb:
<a href=”biodata.html”> Halaman Biodata</a><br>
<a href=”galery.html”> Halaman Galery</a>
Dan untuk isi web kita ganti dengan keterangan tentang hobby kita. saya contohkan sbb:
<h3>Halaman Hobby Ganang</h3>
<p>Halaman ini berisi hobby saya dan kegemaran saya baik yang sering lakukan maupun
jarang. </p>
<p>Berikut Hobby saya:</p>
<ol>
<li>Lari-lari</li>
<li>Badminton</li>
<li>Bersepeda</li>
<li>Internetan</li>
<li>Memancing</li>
</ol>
Kita save halaman html hobby.html. Lalu kita jalankan, maka membuat web statis halaman hobby sbb:
Jika tidak berhasil file agan download hobby.html
disini dan coba jalankan. cara membuat web statis dengan html ini cukup mudah kan? halaman biodata dan hobby sudah selesai. berikutnya adalah membuat web statis halaman galery. Masih sama, kita save as halaman hobby dan beri nama galery.html. Kita ganti link sidebar galery dengan hobby. caranya sbb:
<a href=”biodata.html”> Halaman Biodata</a><br>
<a href=”hobby.html”> Halaman Hobby</a>
Dan untuk isinya kita menampilkan gambar tentang kita. untuk penjelasan lengkap menampilkan gambar di html ada pada halaman
Menyisipkan Gambar di HTML. Gambar yang ditampilkan kita siapkan. pilih Gambar dari komputer, lalu letakkan gambar persis satu folder dari file html yang kita buat (biodata.html, hobby.html, dan galery.html). Oke langsung saja pada perintahnya:
<h3>Halaman Galery Ganang</h3>
<p>Halaman ini berisi foto saya</p>
<img src=”gowes3.jpg” width=”200″ height=”200″>
Save dokumen. Maka web statis halaman galery yang kita buat di atas jika kita jalankan akan tampil seperti ini:
Download file galery.html
disini. Em, maaf jika gambar kurang jelas. saya kompres soalnya. Gimana mudah cara membuat web statis dengan tabel html kan? Jika kita akan pindah halaman, tinggal klik pada sidebar berupa link.
Membuat halaman website statis menjadi indah atau menarik bisa kita lakukan dengan cara memberi background halaman dan memberi background pada tabel. untuk halaman bisa kita atur dengan mengedit tag <body>. caranya kita ganti dengan warna hijau:
<body bgcolor=”green”>
Untuk tabel Utama, kita beri warna latar putih. dengan cara :
<table width=”60%” border=”1″ bgcolor=”white”>
Selanjutnya pada header dan footer kita ganti dengan background warna kuning.Caranya pada tag <td> kita tambah bgcolor juga, sbb:
<td colspan=”2″ bgcolor=”yellow”>
Pada sidebar kiri, kita beri warna biru muda dengan kode hex sbb:
<td width=”26%” bgcolor=”B6FAF8″>
Selanjutnya kita save. Dan kita jalankan atau reflesh maka hasil dari membuat web statis menjadi indah dan keren sebagai berikut:
Belajar HTML merupakan dasar penting dalam membuat sebuah web statis. Jadi alangkah baiknya sebelum membuat web statis kita pelajari sintak dan simantek (penulisan dan makna). Belum lagi kita membuat dengan CSS. Maka web akan menjadi lebih menarik dan mudah diotak-atik. Sekian penjelasan saya dalam membuat web statis dengan tabel HTML semoga bermanfaat. Silahkan Komentar atau bertanya.
Download juga contoh website statis dengan html tanpa tabel tentang profil wisata pantai parangtritis:
- Halaman profil wisata pantai parangtritis = download
- Halaman Galery wisata pantai parangtritis = download
