HTML : Membuat Halaman Index Polos.


Binti Qomariah – Assalamu’alaikum Wr. Wb.
Selamat malam teman-teman, berjumpa lagi dengan saya nih. Kali ini, saya akan membagikan tutorial tentang pembuatan halaman index meggunakan html. Tapi masih polos lho, murni html. Simak ya ..

A. JUDUL KEGIATAN
HTML : Membuat Halaman Index Polos.


B. PENDAHULUAN
1. Pengertian
Menurut saya, halaman index adalah sebuah halaman pada website yang bisa disebut juga sebagai home pada website, halaman ini akan muncul pertama kali pada saat kita membuka sebuah website.
2. Maksud dan Tujuan
Maksud dan tujuan dari pembuatan halaman index ini adalah untuk digunakan sebagai halaman awal atau juga bisa disebut dengan home pada sebuah website.
3. Hasil yang Diharapkan
Dapat membuat halaman index menggunakan HTML.
4. Latar Belakang
Dikarenakan index adalah bagian utama yang harus ditampilkan oleh sebuah website, maka dalam pembuatan sebuah website, kita harus membuat sebuah index. Index ini nanti akan tampil pada saat kita membuka hasil dari source code kita di browser. Index ini lah yang pertama kali muncul.


C. ALAT DAN BAHAN
- Komputer atau Laptop.
- Text Editor.

D. JANGKA WAKTU PELAKSANAAN
-/+ 20 - 40 menit.

E. TAHAPAN PENGERJAAN
1. Buka Text editor kita. Text editor ini bisa menggunakan apa saja, tergantung selera kita. Text editor yang saya gunakan saat ini adalah sublime text.
2. Kemudian di text editor, ketikkan :
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
3. Selanjutnya, isi bagian tag <title>, isi sesuai selera kita karena ini adalah bagian judul website di url. Kemudian, di dalam tag <body> kita akan membuat sebuah navigasi. Apa itu navigasi ?. Menurut yang saya baca di wikipedia, navigasi atau pandu arah adalah penentuan kedudukan (position) dan arah perjalanan baik di medan sebenarnya atau di peta, dan oleh sebab itulah pengetahuan tentang pedoman arah (compass) dan peta serta teknik penggunaannya haruslah dimiliki dan dipahami. Jadi, yang dimaksud navigasi disini merupakan penentuan kedudukan menu pada website. Oke, untuk membuat navigasi kita ketikkan :
<body> <h1>Si Perpustakaan</h1> <ul> <li><a href="">Peminjaman</a></a></li> <li><a href="">Pengembalian</a></li> <li><a href="">Data Kategori</a></li> <li><a href="">Data Buku</a></li> <li><a href="">Data Anggota</a></li> <li><a href="#" onclick="return confirm('Anda yakin akan keluar?')">Logout</a></li> </ul>
Setelah kita ketikkan seperti diatas, maka hasilnya akan seperti ini :



4. Kemudian di tag <body> tepatnya dibagian bawah navigasi kita ketikkan :
<div class="konten">
<div class="kiri">
<h2>Kewajiban</h2>
<p>Menyenangkan-Mu</p>
</div>
</div>
<div class="kanan">
<ul>
<li>Berita1</li>
<li>Berita2</li>
</ul>
</div><br/>
 <footer>
<p><center>Copy  Right &copy 2017<br/>
Design by Binti Qomariah</center></p>
</footer>
Nah, mengapa kita menggunakan div ?. Karena agar pada saat pemanggilan css-nya nanti lebih mudah. Hasilnya seperti ini :


Oke, halaman index sederhana kita sudah jadi, tinggal ngasih css-nya nih. Untuk penambahan css-nya akan dibahas di blog selanjutnya.

G. HASIL YANG DIDAPAT
Dapat membuat halaman index untuk sebuah website.

H. MASALAH YANG DIALAMI
Terjadi kesalahan pada saat pembuatan source code sehingga hasil tidak dapat muncul di browser kita atau tidak terjadi perubahan saat kita mengubah source codenya atau bisa juga disebut dengan error. Hal ini disebabkan karena kita kurang teliti dan mungkin kurang aqua hehe cuma bercanda kok.

I. KESIMPULAN
Halaman index sangat dibutuhkan dalam pembuatan website.

J. REFERENSI
Teman-teman PHP Indonesia.
Previous
Next Post »