Web Statis Menggunakan HTML dan CSS


07/10/2016 02:20:25 3349

Aplikasi web terdiri atas dua kategori besar yakni web statis dan web dinamis. Web statis ialah web yang halamannya bersifat statis dan untuk mengubah halaman tersebut harus mengubah source code, web ini biasanya dibangun hanya menggunakan HTML, CSS ataupun dengan tambahan javascript atau dengan kata lain menggunakan Client-side programming. Sedangkan web dinamis ialah web yang datanya disimpan dalam database, sehingga untuk mengubah halaman ini sangatlah mudah, dengan mengubah data pada database saja, tidak perlu untuk mengubah source code. Web kategori ini menggunakan bahasa pemrograman yang berjalan pada sisi server (server-side programming) seperti PHP, java, atau ASP, atau Ruby dan database untuk penyimpanan data seperti MySQL, MongoDB dan lain sebagainya.

Tuturial ini kita akan membuat sebuah halaman web statis dengan menggunakan bahasa HTML dan CSS. Tema web yang dibangun ialah web institusi yang mana akan menggunakan data web pemprov Kalimantan Timur (http://kaltimprov.go.id). Web ini tentu tidak selengkap web tersebut, namun menyediakan informasi-informasi dasar seperti:

  1. Home
  2. Profil
  3. Visi dan Misi
  4. Program Kerja
  5. Kontak

Untuk membuat sebuah web statis dengan menggunakan requirement diatas, maka terdapat beberapa file yang harus kita buat seperti:

  1. File index.html sebagai halaman depan dari web
  2. File profil.html untuk menampung informasi profil dari Kalimantan Timur
  3. File visi-dan-misi.html untuk menampung informasi dari Visi dan Misi Kalimantan Timur
  4. File program-kerja.html untuk menampung informasi program kerja dari Pemrov
  5. File kontak.html untuk menampung informasi kontak yang dapat dihubungi

Sketsa

Untuk mempermudah dalam mendesain suatu halaman web, kita akan membuat sebuah sketsa yang menggambarkan struktur website yang akan dibuat. Terdapat dua sketsa yang akan dibuat

  1. Sketsa yang menggambarkan bagian-bagian dari web, seperti pada gambar 1. Pada bagian ini membagi halaman menjadi beberapa bagian utama, seperti header, menu, konten, dan footer
  2. Sketsa yang kegua menggambakan layout web, seperti pada gambar 2. Pada bagian ini konten dibagi menhadi dua bagian yakni konten utama dan sidebar

Gambar 1. Sketsa Desain Web

Gambar 2. Sketsa Desain Layout Konten

Implementasi Desain Halaman

Berdasarkan sketsa yang telah dibuat pada sebelumnya, untuk implementasi kita akan membuat dua buah file yakni desain-utama.html dan style.css yang diletakan dalam direktori css sehingga menjadi css/desain-utama.css.

desain-utama.html

Desain utama berisi basic implementasi dari sketsa yang telah dibuat, dimana halaman web dibagi menjadi empat (4) bagian yakni header, menu, konten dan footer. Berikut ialah kode HTML untuk hal tersebut.x

<html>
<head>
    <title>Website Pemprov</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="utama">
        <div id="header"></div>

        <div id="menu"></div>

        <div id="konten"></div>

        <div id="footer"></div>
    </div>
</body>
</html>
<html>
    <head>
        <title>Website Pemprov</title>
        <link rel="stylesheet" href="css/style.css">
    </head>

    <body>
        <div id="utama">
            <div id="header">
                <img src="images/logo.png">
                <h1>Provinsi Kalimantan Timur</h1>
                <h3>Menuju Kalimantan Timur Maju Tahun 2018</h3>
            </div>
            <div id="menu">
                <a href="home.html">Home</a>
                <a href="profil.html">Profil</a>
                <a href="visi-misi.html">Visi dan Misi</a>
                <a href="program-kerja.html">Program Kerja</a>
                <a href="kontak.html">Kontak</a>
            </div>
            <div id="content">
                <div id="konten-utama">
                    <h2>Selamat datang</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum culpa, numquam suscipit sint quas debitis aliquam provident iusto? Dolor itaque, ducimus facilis omnis quas tenetur incidunt. Esse reiciendis repellendus ut.</p>

                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium illo, dignissimos repudiandae aut assumenda tempora, quae quis voluptatum, ea omnis dolorem laboriosam eos neque iusto. Tempora corporis cum dolorum perferendis?</p>

                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus et, aliquid facere inventore sapiente fugiat accusamus error. Totam molestias labore sed. Quo pariatur ratione culpa totam, doloribus, optio ex quisquam.</p>
                </div>
                <div id="sidebar">
                    <div class="konten-sidebar">
                        <h4>SKPD</h4>
                        <ul> 
                            <li><a href="http://diknas.kaltimprov.go.id">Dinas Pendidikan</a></li> 
                            <li><a href="http://kominfo.kaltimprov.go.id">Diskominfo</a></li> 
                            <li><a href="http://dewan-pendidikan.kaltimprov.go.id">Dewan Pendidikan</a></li> 
                        </ul>
                    </div>
                    <div class="konten-sidebar">
                        <h4>Pranala Luar</h4> 
                        <ul> 
                            <li><a href="">DPR RI</a></li> 
                            <li><a href="">Presiden RI</a></li> 
                        </ul>
                    </div>
                </div>
                <div class="clear"></div>
            </div>

            <div id="footer">
                Copyright &copy; 2016 by Rofilde Hasudungan. All Right Reserved.
            </div>
        </div>
    </body>
</html>

style.css

#body {
    font-family: verdana;
    font-size: 14px;

}

#utama {
    width: 992px;
    border:1px solid #fff;
    margin-left: auto;
    margin-right: auto;
}

#menu, #footer {
    border:1px solid #000;
    margin-top: 20px;
}

/* STYLE HEADER */

img {
    width: 70px;
    display: inline-block;
    float: left;
}

#header h1, #header h3{
    margin-top:5px;
    margin-bottom:5px;
}

#header:after {
    clear: both;
    content: ".";
    visibility: hidden;
}

/* END STYLE HEADER */

/* STYLE MENU */

#menu {
    border: 1px solid #11290f;
    border-bottom: 3px solid #11290f;
    background: #24791b;
}

#menu a{  
    display: inline-block;
    padding:9px;
    text-decoration: none;
    color: #fff;
}

#menu a:hover {
    background: #11290f;
    border-bottom: 3px solid #000;
    margin-bottom: -3px;
}

/* END STYLE MENU */

/* KONTEN */

#konten-utama {
    width: 700px;
    display: inline-block;
}

p {
    text-align: justify;
}

#sidebar {
    width: 270px;
    display: inline-block;
    float: right;
}

.konten-sidebar {
    border:1px solid #1b4017;
    margin-top: 10px;
    margin-bottom: 10px;
}

.konten-sidebar h4{
    margin:0;
    padding:12px 5px;
    background: #14420f;
    border-bottom: 1px solid #1b4017;
    color: #fff;
}

.konten-sidebar ul {
    margin:0px;
    padding:0px;
}

.konten-sidebar ul li {
    list-style: none;
    padding: 10px 5px;
    border-bottom: 1px solid #1b4017;
}

.konten-sidebar ul li a{
    color: #333;
    font-weight: bold;
    text-decoration: none;
}

/* END KONTEN */

/* FOOTER */

#footer {
    border: 1px solid #11290f;
    background: #24791b;
    padding: 10px;
    text-align: center;
    color: #fff;
}

/* END FOOTER */

.clear {
    clear:both;
}

Desain Halaman Depan (Front Page)

Halaman depan (index.html) suatu web sangatlah penting, halaman depan menggambarkan informasi yang terdapat pada keseluruhan web. Halaman depan dari web ini akan berisi informasi-informasi sebagai berikut:

  1. Sepintas Kaltim
  2. Link-link SKPD
  3. Galeri Kegiatan
  4. Visi Pemprov
  5. Informasi Alamat

Berikut ialah isi konten dari halaman utama sesuai dengan requirement seperti diatas:

<h2>Selamat datang</h2>
<img src="images/kaltim.png" align="left" width="200px" class="thumbnail">
<p>Kalimantan Timur atau biasa disingkat Kaltim adalah sebuah provinsi Indonesia di Pulau Kalimantan bagian ujung timur yang berbatasan dengan Malaysia, Kalimantan Utara, Kalimantan Tengah, Kalimantan Selatan dan Sulawesi. Luas total Kaltim adalah 129.066,64 km² dan populasi sebesar 3.6 juta. Kaltim merupakan wilayah dengan kepadatan penduduk terendah keempat di nusantara. Ibukotanya adalah Samarinda.</p>

<p>Kalimantan Timur sebelum mekar menjadi Kalimantan Utara merupakan provinsi terluas kedua di Indonesia setelah Papua, dengan luas 194.489 km persegi yang hampir sama dengan Pulau Jawa atau sekitar 6,8% dari total luas wilayah Indonesia.</p>

<blockquote>Mewujudkan Kaltim Sejahtera yang merata dan Berkeadilan berbasis Agroindustri dan Energi Ramah Lingkungan</blockquote>

<h2>Kegiatan</h2>

<div class="gallery">
    <img src="images/1.jpg" alt="" class="thumbnail">
    <img src="images/2.jpg" alt="" class="thumbnail">
    <img src="images/3.jpg" alt="" class="thumbnail">
    <img src="images/4.jpg" alt="" class="thumbnail">
    <img src="images/5.jpg" alt="" class="thumbnail">
    <img src="images/6.jpg" alt="" class="thumbnail">
    <img src="images/7.jpg" alt="" class="thumbnail">
    <img src="images/8.jpg" alt="" class="thumbnail">
</div>

pada halaman index terdapat galleri dan gambar. Untuk itu kita meng-update style agar galeri gambar tersebut memiliki style yang sesuai. Berikut ialah kode CSS yang ditambahkan pada style.css

.thumbnail {
    padding:5px;
    border:1px solid #ccc;
}

.gallery img{
    width: 20%;
    height: 20%;
    margin: 5px;
}

blockquote{
    font-style: italic;
    border:2px solid #989696;
    padding:10px;
    font-size: 22px;
    text-align: center;
}

Halaman Profil

Desain halaman profil.html sama dengan desain utama, namun konten disesuaikan dengan profil Kalimantan Timur. Berikut ialah kode konten halalaman profil:

<h2>Profil Kalimantan Timur</h2>
<p>Sebelum masuknya suku-suku dari Sarawak dan suku-suku pendatang dari luar pulau, wilayah ini sangat jarang penduduknya. Sebelum kedatangan Belanda terdapat beberapa kerajaan yang berada di Kalimantan Timur, diantaranya adalah Kerajaan Kutai (beragama Hindu), Kesultanan Kutai Kartanegara ing Martadipura, Kesultanan Pasir dan Kesultanan Bulungan.</p>

<p>Menurut Hikayat Banjar, wilayah Kalimantan Timur (Pasir, Kutai, Berau, Karasikan) merupakan sebagian dari wilayah taklukan Kesultanan Banjar, bahkan sejak jaman Hindu. Dalam Hikayat Banjar menyebutkan bahwa pada paruh pertama abad ke-17 Sultan Makassar meminjam tanah sebagai tempat berdagang meliputi wilayah timur dan tenggara Kalimantan kepada Sultan Mustain Billah dari Banjar pada waktu Kiai Martasura diutus ke Makassar dan mengadakan perjanjian dengan I Mangngadaccinna Daeng I Ba’le’ Sultan Mahmud Karaeng Pattingalloang, yaitu Sultan Tallo yang menjabat mangkubumi bagi Sultan Malikussaid Raja Gowa tahun 1638-1654 yang akan menjadikan wilayah Kalimantan Timur sebagai tempat berdagang bagi Kesultanan Makassar (Gowa-Tallo), dengan demikian mulai berdatanganlah etnis asal Sulawesi Selatan. Sejak 13 Agustus 1787, Sultan Tahmidullah II dari Banjar menyerahkan Kalimantan Timur mejadi milik perusahaan VOC Belanda dan Kesultanan Banjar sendiri dengan wilayahnya yang tersisa menjadi daerah protektorat VOC Belanda.</p>

<p>Sesuai traktat 1 Januari 1817, Sultan Sulaiman dari Banjar menyerahkan Kalimantan Timur, Kalimatan Tengah, sebagian Kalimantan Barat dan sebagian Kalimantan Selatan (termasuk Banjarmasin) kepada Hindia-Belanda. Pada tanggal 4 Mei 1826, Sultan Adam al-Watsiq Billah dari Banjar menegaskan kembali penyerahan wilayah Kalimantan Timur, Kalimantan Tengah, sebagian Kalimantan Barat dan sebagian Kalimantan Selatan kepada pemerintahan kolonial Hindia Belanda. Pada tahun 1846, Belanda mulai menempatkan Asisten Residen di Samarinda untuk wilayah Borneo Timur (sekarang provinsi Kalimantan Timur dan bagian timur Kalimantan Selatan) bernama H. Von Dewall. Provinsi Kalimantan Timur selain sebagai kesatuan administrasi, juga sebagai kesatuan ekologis dan historis. Kalimantan Timur sebagai wilayah administrasi dibentuk berdasarkan Undang-undang Nomor 25 Tahun 1956 dengan gubernurnya yang pertama adalah APT Pranoto.</p>

<p>Sebelumnya Kalimantan Timur merupakan salah satu karesidenan dari Provinsi Kalimantan. Sesuai dengan aspirasi rakyat, sejak tahun 1956 wilayahnya dimekarkan menjadi tiga provinsi, yaitu Kalimantan Timur, Kalimantan Selatan dan Kalimantan Barat.</p>
<p>Daerah-daerah Tingkat II di dalam wilayah Kalimantan Timur, dibentuk berdasarkan Undang-undang No. 27 Tahun 1959, Tentang Pembentukan Daerah Tingkat II di Kalimantan (Lembaran Negara Tahun 1955 No.9).</p>

Halaman Visi dan Misi

Desain halaman visi-misi.html sama dengan desain utama, namun konten disesuaikan dengan visi dan misi Kalimantan Timur. Berikut ialah kode konten halalaman visi dan misi:

<h2>Visi dan Misi</h2>

<h3>Visi</h3>
<p>
    <strong><u>VISI KALTIM MAJU 2018</u></strong> <br>
    <strong><i>
        "Mewujudkan Kaltim Sejahtera yang merata dan Berkeadilan
        berbasis Agroindustri dan Energi Ramah Lingkungan"
    </i></strong>

</p>

<h3>Misi</h3>
<ol>
    <li>Mewujudkan kualitas Sumber Daya Manusia Kaltim</li>
    <li>Mewujudkan daya saing Ekonomi yang berkerakyatan berbasis SDA dan Energi terbarukan</li>
    <li>Mewujudkan Infrastruktur dasar yang berkualitas bagi masyarakat secara merata</li>
    <li>Mewujudkan Tata Kelola Pemerintahan yang Profesional dan Berorientasi pada pelayanan publik</li>
    <li>Mewujudkan Kualitas lingkungan yang baik dan sehat serta berperspektif perubahan iklim</li>
</ol>

Halaman Program Kerja

Desain halaman program-kerja.html sama dengan desain utama, namun konten disesuaikan dengan visi dan misi Kalimantan Timur. Berikut ialah kode konten halalaman visi dan misi:

<h2>Program Kerja Agenda Prioritas</h2>

<ol>
    <li>Atasi pengangguran, karena di Kaltim jumlah angkatan kerja, dengan jumlah lapangan pekerjaan masih belum seimbang.</li>
    <li>Pembangunan infrastruktur perekonomian, terutama jalan, jembatan dan pelabuhan. Jalan trans Kalimantan perlu segera dituntaskan. Begitu pula pembangunan jalan kabupaten/kota.</li>
    <li>Pelaksanaan komitmen untuk mengalokasikan biaya pendidikan sebesar 20 persen (di luar gaji dan kesejahteraan guru), pencanangan wajib belajar 12 tahun serta pendidikan gratis.</li>
    <li>Penanganan banjir yang melanda Kota Samarinda, Balikpapan, dan kota-kota lainnya, terutama sepanjang Daerah Aliran Sungai Mahakam.</li>
    <li>Pemberdayaan ekonomi rakyat semakin ditingkatkan, terutama memperhatikan pada sektor riil, sektor informal dan UKM. Begitu pula perlunya mengurangi keterbatasan akses permodalan.</li>
    <li>Peningkatan daya beli masyarakat dan peningkatan kesejahteraan PNS / TNI dan Polri.</li>
    <li>Penyelesaian krisis energi, mengurangi ketimpangan antara ketersediaan tenaga listrik dengan kebutuhan tenaga listrik.</li>
    <li>Kemandirian/kecukupan pangan dalam rangka ketahanan pangan.</li>
    <li>Pembangunan kawasan wilayah perbatasan, kawasan pedalaman dan daerah terpencil. Satu hal yang perlu terobosan khusus, mengingat tingkat kemajuan yang dicapai pada saat ini relatif lambat.</li>
    <li>Pertumbuhan ekonomi yang tinggi, dengan memperbaiki iklim investasi.</li>
</ol>

Halaman Kontak

Desain halaman kontak.html sama dengan desain utama, namun konten disesuaikan dengan visi dan misi Kalimantan Timur. Berikut ialah kode konten halalaman visi dan misi:

<h2>Kontak Kami</h2>
<b>Biro Humas dan Protokol Setda Prov. Kaltim :</b>
<p>
    Jl. Gadjah Mada No 2 Samarinda <br>
    TELP : +62541 733333 Ps.164, 160 <br>
    FAX : +62541 7443048 <br>
    Email : humas@kaltimprov.go.id
</p>