Membuat Web Statis Menggunakan HTML dan CSS

Membuat Web Statis Menggunakan HTML dan  CSS

 

PENGERTIAN

Web Statis adalah web yang content atau isinya tidak berubah – ubah. Maksudnya adalah isi dari dokumen yang ada di web tersebut tidak dapat diubah secara mudah. Ini dikarenakan karena script yang digunakan untuk membut web statis tidak mendukung untuk mengubah isi dokumen. Biasanya script yang digunakan adalah HTML dan  CSS. Web statis ini kesannya kurang aktif dan juga pasif. Web statis ini berbeda jauh dengan web dinamis. Berikut merupakan perbedaan dari Web Statis dan Web Dinamis.

 

Perbedaan Web Statis dan Web Dinamis

1. Interaksi antara pengunjung dan pemilik web
   Dalam web statis tidak dimungkinkan terjadinya interaksi antara pengunjung dengan pemilik web. Sementara dalam web dinamis terdapat interaksi antara pengunjung dengan pemilik web seperti memberikan komentar, transaksi online, forum, dll.


2. Bahasa Script yang digunakan
   Web statis hanya menggunakan HTML saja, atau paling tidak bisa ditambah dengan CSS. Sedangkan web dinamis menggunakan bahasa pemrograman web yang lebih kompleks seperti PHP, ASP dan JavaScript.


3. Penggunaan Database
   Web statis tidak menggunakan database karena tidak ada data yang perlu disimpan dan diproses. Sedangkan web dinamis menggunakan database seperti MySQL, Oracle, dll untuk menyimpan dan memroses data.


4. Konten
   Konten dalam web statis hanya diberikan oleh pemilik web dan jarang di-update, sementara konten dalam web dinamis bisa berasal dari pengunjung dan lebih sering di-update. Konten dalam web dinamis bisa diambil dari database sehingga isinya pun bisa berbeda-beda walaupun kita membuka web yang sama.

LATAR BELAKANG

Bagi yang ingin membuat website tapi kontennya tidak ingin berubah-ubah. Web statis ini merupakan jalan yang terbaik. Ya walaupun kesannya masih kurang aktif tapi setidaknya ada amanya bila menggunakan web statis tersebut. 

MAKSUD & TUJUAN

Memudahkan bagi yang baru belajar membuat web. Dengan membuat web statis ini kita akan belajar bagaimana cara mendesain sebuah web, merancang sebuah web dan juga mengedit isi sebuah web.

ALAT & BAHAN

• Text Editor
• Browser

LANGKAH KERJA

Pertama bukalah text editor milik anda, disini saya menggunakan sublime text sebagai text editor saya.

 

Kemudian kita buat terlebih dahulu file CSSnya. Simpan file tersebut dengan ekstensi .css. Untuk contohnya bisa dilihat pada gambar di bawah.

 

Saya sarankan filenya diberi nama style.css. Dan juga di tempatkan pada file web yang kita buat.  Setelah itu masukkan kode CSS berikut ke dalam file style.css

body {
    background-image: url('a.jpg');
    margin:0;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
}
ul {
    list-style-type: none;
    margin:0;
    padding:0;
    overflow: hidden;
    background-color: #333;
    width: 100%
}
li {
    float: left;
}
li:last-child{
    border-right: 1px solid #bbb;
    float: right;
}
li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
li a:hover {
    background-color: white;
    color: black;
}
footer{
    background-color: black;
    padding: 10px;
    margin:0;
    width: 100%;
    color: white;
    text-align: center;

}
footer a{
    text-decoration: none;
    color: white;
}
footer a:hover{
    background-color: yellow;
    color: red;
}
.a{
    padding: 20px;
    margin-top: 30px;
    background-color: #1abc9c;
    height: 250px;
    color: white;
}
.bg-1{
    background-image: url('8.jpg');
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 360px;
    padding:20px;
    margin-top: 30px;

}
h2 {
    text-align: center;
}
h1 {
    text-align: center;
}
.btn {
    position: relative;
    padding: 16px 32px;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    -webkit-transition-duration:0.4s;
    transition-duration: 0.4s;
    cursor: pointer;
    border:2px solid yellow;
    background-color: white;
    color: red;
    top: 50%;
    left:45%;
}
.btn:hover{
    background-color: yellow;
    color: red;

}
.newspaper {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
    -webkit-column-width: 100px; /* Chrome, Safari, Opera */
    -moz-column-width: 100px; /* Firefox */
    column-width: 100px;
}
p {
    font-family: raleway;

}
.smk{
    width: 100px;
    height: 100px;
}
.smkit {
    width: 100%;

}

 

Nb : Untuk teks yang berwarna merah, bisa anda ganti dengan alamat gambar anda. 

Jangan dibuka dulu karena belum ada apa-apanya. Setelah itu kita desain file HTMLnya. Masukkan kode berikut ke dalam file HTML.

<!DOCTYPE html>

<html>
<head>
    <title>Home</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<ul>
    <li><a href="file:///home/mamadz/Documents/PROKER/Web%20Statis.html">Home</a></li>
    <li><a href="file:///home/mamadz/Documents/PROKER/News.html">News</a></li>
    <li><a href="file:///home/mamadz/Documents/PROKER/Profil.html">Profil</a></li>
    <li><a href="file:///home/mamadz/Documents/PROKER/ppdb.html">PPDB</a></li>
    <li><a href="file:///home/mamadz/Documents/PROKER/Contact%20Us.html">Contact Us</a></li>
    <li><a href="file:///home/mamadz/Documents/PROKER/Gallery.html">Gallery</a></li>
    <li><a href="file:///home/mamadz/Documents/PROKER/Login.html">Daftar</a></li>
</ul>
<h1>SMK IT Ihsanul Fikri Mungkid Magelang</h1>
<h2>Welcome to My Site</h2>
<a href="file:///home/mamadz/Documents/PROKER/News.html"><button type="button" class="btn">Know More</button></a>
<div class="bg-1 newspaper">
<div class="a">
    <h2>Pelantikan Dewan Ambalan Shalahuddin Al-Ayyubi</h2>
    <img src="da.jpg" style="width: 400px; height: 400px">
    <p>Salam Pramuka Indonesia

Dewan Ambalan Shalahudin Al-Ayyubi adalah Dewwan Ambalan yang berada di Gugus Depan Magelang 12-131 yang berpangkalan di SMKIT Ihsanul Fikri .<br>

Alahmdulillah pada tanggal 25 Agustus 2016 telah dilaksanakannya Pelantikan Dewan Ambalan ShalahudinAl-Ayyubi yang bertempatan di Ragilan Tempat wisata Top Selfie. Perjalanan yang di tempuh dengan Long March dari Sekolah tercinta SMKIT Ihsanul Fikri menuju Top Selfie.<br>

Berbagai rintangan menghadang kami lewati bersama, jalan menanjak dan hujan yang mengguyuri segenap tubuh tidak membuat kami menyerah untuk melaksanakan Amanah yang diberikan oleh Pembina yaitu Pak Pawit. Kerja sama dan kekompakan saling membahu-membahu adalah kunci keberhasilan kami dalam mengemban Amanah Dewan Ambalan di SMKIT Ihsanul Fikri.
    </p>
    </div>
</div>
<div class="a">
    <p>
        SMKIT Ihsanul Fikri adalah Sekolah Menengah Kejuruan swasta yang beralamat di desa paremono, kecamatan mungkid Kabupaten Magelang. Sekolah ini didirikan pada tahun 2012 dibawah naungan Yayasan Tarbiyatul Mukmin Pabelan, yang sekaligus membawahi SMPIT dan SMAIT Ihsanul Fikri Mungkid. Atas prakarsa dari Dr. H. Yusuf Asy'ari yang merupakan penasehat yayasan Tarbiyatul Mukmin, sekolah ini didirikan dan telah memiliki siswa sebanyak 82 siswa putra, yang terdiri dari 30 siswa kelas XII TKJ, 32 siswa kelas XI TKJ dan 20 siswa kelas X TKJ.
Sama halnya dengan SMPIT dan SMAIT Ihsanul fikri, SMKIT ihsnul Fikri juga menerapkan sistem Boarding School untuk semua siswanya. Hal ini dimaksudkan agar pembentukan karakter dan kepribadian siswa dapat terlaksana dengan lebih optimal, dalam rangka mencetak generasi yang berprestasi dan berakhlak islami.
    </p>
</div>

<footer>&copy; 2017 | Design By <a href="#">Ahmad Faizin</a></footer>
</body>
</html>

Nb : Untuk teks yang berwarna biru, bisa anda ganti dengan file html yang lainnya. 

 

Setelah itu simpan dalam bentuk HTML. Kemudian untuk membuat menu halaman yang lainnya bisa anda copy paste kode tersebut, kemudian simpan halaman tersebut dan masukkan ke dalam teks yang berwarna biru di atas tadi.

Kemudian jalankan filenya di browser anda. Hasil milik saya tampak seperti ini.

Nah silahkan mencoba, dan edit web anda.

Mungkin itu saja dari saya, bila ada kurang lebihnya mohon maaf.

Syukron 

Wassalamualaikum Wr. Wb.

Referensi 

www.carawebs.info