Tutorial Web Statis SHTML: Cara Pakai Server Side Includes

SHTML adalah ekstensi file untuk halaman web HTML yang memanfaatkan teknologi Server Side Includes (SSI). Dengan menggunakan SHTML, pengembang web statis dapat menyisipkan konten dari satu file (seperti navigasi header, footer, atau sidebar) ke dalam banyak halaman web secara otomatis tanpa memerlukan bahasa pemrograman sisi server seperti PHP atau database seperti MySQL.

Meskipun web modern telah beralih ke CMS atau static site generator seperti Hugo dan Jekyll, SHTML tetap menjadi solusi ringan, cepat, dan efisien untuk membangun situs web statis murni yang membutuhkan modularitas dasar.

Prasyarat & Konfigurasi Server

Agar file dengan ekstensi .shtml dapat memproses perintah SSI, server web yang Anda gunakan (seperti Apache atau Nginx) harus dikonfigurasi untuk mengaktifkan modul SSI. Pada server Apache, pastikan modul include_module aktif dan tambahkan baris konfigurasi berikut pada file .htaccess atau konfigurasi virtual host:

AddType text/html .shtml
AddOutputFilter INCLUDES .shtml

Tabel Perintah Dasar Server Side Includes (SSI)

Berikut adalah daftar direktif SSI yang paling sering digunakan dalam pengembangan web statis SHTML:

Langkah-Langkah Implementasi Web SHTML

1. Membuat File Komponen (Header dan Footer)

Buat file terpisah yang berisi bagian berulang dari situs web Anda. Simpan file ini di direktori root server.

header.html:

<header>
    <nav>
        <a href="/index.shtml">Beranda</a> |
        <a href="/about.shtml">Tentang</a> |
        <a href="/contact.shtml">Kontak</a>
    </nav>
    <hr>
</header>

footer.html:

<footer>
    <hr>
    <p>&copy; 2026 Situs Web Statis. Hak Cipta Dilindungi.</p>
    <p>Terakhir diperbarui: <!--#flastmod virtual="/footer.html" --></p>
</footer>

2. Membuat Halaman Utama SHTML

Gunakan ekstensi .shtml pada file halaman utama Anda, lalu panggil file komponen menggunakan sintaks #include.

index.shtml:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Beranda - Website SHTML</title>
</head>
<body>
    <!--#include virtual="header.html" -->

    <main>
        <h1>Selamat Datang di Website Statis SHTML</h1>
        <p>Halaman ini dibangun menggunakan Server Side Includes tanpa database.</p>
    </main>

    <!--#include virtual="footer.html" -->
</body>
</html>

Troubleshooting & Tips Lapangan

Jika tag SSI Anda tidak tampil dan hanya menghasilkan komentar kosong atau error 500 pada browser, periksa beberapa hal berikut:

• Ekstensi File: Pastikan file Anda menggunakan ekstensi .shtml, bukan .html. Sebagian besar server web tidak memproses SSI pada file .html standar demi performa.
• Ikses Lokal: SSI umumnya tidak dapat dijalankan dengan membuka file langsung dari harddisk (protokol file://). Anda wajib menjalankan server lokal seperti Apache (XAMPP/WAMP) atau Nginx untuk menguji sintaks SSI.
• Parameter Include: Gunakan parameter virtual untuk path absolut berbasis root web (diawali dengan garis miring /) atau file untuk path relatif terhadap direktori file saat ini.