Apa itu index HTML? Ketika Anda mulai menekuni dunia perancangan website atau web design maka hal yang perlu Anda pelajari yaitu cara menyimpan dokumen sebagai halaman web. Nah, salah satu yang sering digunakan adalah dokumen HTML dengan nama file index.html.
Nah, di artikel ini akan menjelaskan tentang apa itu index.html pada website dan bagaimana contohnya sehingga Anda dapat menerapkan dan mengoptimalkannya. Jadi, simak sampai selesai, yuk!
Daftar Isi
Apa itu index.html?
Halaman index.html adalah file indeks yang paling umum digunakan untuk halaman default website. Dengan kata lain, index.html adalah file indeks yang harus ada pada setiap website, tanpa file ini ketika Anda membuka website maka browser akan menampilkan file-file lain dalam bentuk tampilan folder, bukan tampilan website sesuai desain yang telah dibuat.
Di mana, sih, letak file yang satu ini? Nah, file index.html terletak pada direktori utama atau directory root sebuah website. Biasanya berisi tampilan homepage website, yaitu halaman default saat website dibuka dengan nama domainnya. File index.html ini berisi script-script, layout website, dan link-link di dalam website.
Sebuah website dibuat di dalam direktori pada server web. Untuk situs web Anda, Anda harus menyimpan setiap halaman web sebagai file terpisah. Sebagai contoh, halaman “Tentang Kami” Anda dapat simpan sebagai about.html dan halaman “Hubungi Kami” Anda dapat berupa contact.html. Situs web Anda akan terdiri dari dokumen-dokumen .html tersebut.
Nama File Indeks Lainnya
Selain index.html, ada beberapa nama file yang dapat digunakan untuk file indeks sebuah website, di antaranya yaitu:
- index.htm (ekstensi ini sama dengan html, akan tetapi html lebih sering digunakan)
- index.php (digunakan apabila file index berisi script php)
- default.htm atau default.html
- home.htm atau home.html
Pada praktiknya, server web dapat dikonfigurasi untuk mengenali berkas apa pun yang Anda inginkan sebagai default untuk situs website tersebut. Kendati demikian, sebaiknya Anda tetap menggunakan index.html atau index.htm karena file ini langsung dikenali di sebagian besar server tanpa perlu konfigurasi tambahan.
Apa itu Index HTML: Mengapa Harus Pakai Index HTML?
Kapan pun Anda memiliki direktori di situs web Anda, sebaiknya Anda memiliki halaman index.html yang sesuai. Meskipun Anda tidak berencana untuk menampilkan konten pada halaman indeks direktori tertentu dengan tautan halaman yang sebenarnya, memiliki file tersebut merupakan langkah cerdas untuk meningkatkan user experience, serta fitur keamanan.
Contoh File Index HTML
Sebuah file index.html sederhana hanya dibuat agar memenuhi format html standar seperti head, body, title, dan isi. Nah, berikut adalah contohnya:
<!DOCTYPE html>
<html lang=”id”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Halaman Utama</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
header {
text-align: center;
padding: 10px;
background-color: #f2f2f2;
}
main {
margin-top: 20px;
}
footer {
text-align: center;
padding: 10px;
background-color: #f2f2f2;
position: fixed;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<header>
<h1>Selamat Datang di Website Saya</h1>
</header>
<main>
<section>
<h2>Tentang Saya</h2>
<p>Selamat datang di halaman utama website saya. Saya adalah seorang web developer yang senang berbagi informasi dan pengetahuan.</p>
</section>
<section>
<h2>Proyek Terbaru</h2>
<p>Di bawah ini adalah beberapa proyek terbaru yang telah saya kerjakan:</p>
<ul>
<li><a href=”#”>Proyek 1</a></li>
<li><a href=”#”>Proyek 2</a></li>
<li><a href=”#”>Proyek 3</a></li>
</ul>
</section>
</main>
<footer>
<p>© 2023 Nama Anda. Hak Cipta Dilindungi.</p>
</footer>
</body>
</html>
Pastikan untuk menggantikan “Nama Anda” dengan nama Anda sendiri. File ini adalah contoh dasar dan dapat disesuaikan sesuai dengan kebutuhan dan desain halaman web yang Anda inginkan.
Nah, sementara berikut ini adalah contoh file index.html untuk halaman Under Construction:
<!DOCTYPE html>
<html lang=”id”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Under Construction</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 100px;
}
h1 {
color: #ff6600;
}
p {
color: #666666;
}
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<img src=”under-construction.png” alt=”Under Construction”>
<h1>Halaman Sedang Dalam Tahap Pengembangan</h1>
<p>Kami sedang bekerja keras untuk membawa fitur baru dan konten menarik. Mohon maaf atas ketidaknyamanan ini.</p>
<p>Silakan kembali lagi nanti. Terima kasih atas kesabaran Anda!</p>
</body>
</html>
Keterangan :
- title = ubah ke nama website milik Anda
- image = silakan upload gambar ke directory website anda, lalu ubah under-construction.png menjadi nama gambar yang Anda upload
Sebelum melakukan perancangan website atau web design dengan menggunakan file index.html, Anda bisa membeli web hosting untuk membuat website dari Exabytes. Sudah termasuk domain gratis, lho!
