Cara Membuat Website Statis Sederhana Dengan HTML dan CSS
CSS HTML Programming
Pada artikel kali ini, saya akan membagikan Cara Membuat Website Sederhana dengan HTML dan CSS. Sebelumnya, apa sih website statis? apa bedanya dengan website dinamis?
Sebelum meranjak ke cara pembuatan website statis, terlebih dahulu akan saya jelaskan mengenai website statis dan apa perbedaan antara website statis dengan website dinamis.
Website Statis (Static Website) adalah sebuah website yang kontennya statis / tidak berubah-ubah. Jika file di upload pada hosting, kita tidak dapat mengubahnya kecuali dengan cara manual, yaitu langsung mengubah isi file html maupun css nya.
Sedangkan Website Dinamis (Dinamic Website) adalah jenis halaman web yang disusun oleh konten dan layout yang kaya akan informasi didalamnya. Dinamakan Website Dinamis karena konten nya dapat berubah-ubah, dengan kata lain konten dapat kita ubah melalui halaman dashboard. Website Dinamis seperti ini sangat cocok sekali untuk Website E-commerce yang biasanya harus update konten secara berkala.
Kelebihan Website Statis
- Dapat dikerjakan oleh pemula, dalam artian dengan pengetahuan dasar, kita dapat membuat Website Statis ini, dan cocok sekali jika ingin mengasah kemampuan dengan praktek secara berkala.
- Dapat dilihat langsung dengan web browser, tanpa membutuhkan aplikasi server.
- Lebih mudah untuk Web Development menggunakan bahasa HTML.
Kekurangan Website Statis
- Konten nya statis tidak berubah-ubah
- Terbatas dalam interaksi dengan client
- Tidak menggunakan database
- Tidak menggunakan bahasa pemrograman PHP di server
Mengenal Struktur Dasar dari HTML
Secara umum, struktur dasar dari suatu dokumen HTML adalah sebagai berikut :
<!DOCTYPE html>
<html>
<head>
<title>Membuat Web dengan HTML dan CSS - Pemuda IT</title>
</head>
<body>
<!--Elemen yang ditampilkan di halaman browser -->
</body>
</html>
Pada HTML 5 setiap file dokumen HTML harus diawali dengan sintak <!DOCTYPE html>. Sintak tersebut memiliki fungsi untuk memberitahu kepada browser bahwa dokumen HTML yang dibuat menggunakan HTML 5. Selain itu, juga memiliki fungsi membantu browser untuk menampilkan setiap elemen HTML dengan baik karena menggunakan versi HTML terbaru. Untuk mengakhiri menggunakan tag penutup </html>.
Setiap tag di HTML di desain memiliki pasangan, ibarat ada pembuka dan ada penutup nya. Tetapi, beberapa tag tidak mengharuskan kita membuat penutup, seperti <br> (untuk membuat baris baru) dan <hr> (untuk membuat garis horizontal) dan lainnya.
Tag selanjutnya adalah tag <head> yang berfungsi sebagai heading dari dokumen html yang kita buat. Pada bagian <head> kita bisa membuat judul dokumen, inisialisasi css, deskripsi dan meta tag lainnya.
Bagian utama dalam struktur dokumen html adalah bagian <body> karena di bagian ini berkaitan dengan elemen yang tampil dan di lihat oleh pengguna, kita akan banyak membuat kode-kode html di dalam body.
Membuat Layout Website
Layout merupakan tata letak dari setiap komponen elemen di dalam sebuah website. Layout ini memiliki fungsi untuk memetakan bagian-bagian dalam halaman website. Dengan desain layout yang baik, tentu saja akan memberikan kenyamanan kepada pengunjung website.
Pada umumnya, dalam sebuah website memiliki 4 bagian layout, yaitu :
- Header : Berisi judul website
- Navigasi : Menu navigasi, untuk memudahkan pengunjung menuju halaman-halaman tertentu
- Konten : Bagian utama yang menjadi sasaran informasi yang ingin disampaikan ke pengunjung, atau biasa disebut body
- Footer : Bagian paling bawah dari sebuah website, biasanya berisi informasi tambahan seperti copyright atau informasi dari kepemilikan sebuah website
Cara Membuat Website Statis Sederhana Dengan HTML Dan CSS
Sebelum memulai membuat website statis ini, kalian perlu sebuah text editor seperti VS Code, Sublime, Notepad++ dan lain-lain. Pada contoh ini saya menggunakan VS Code sebagai text editor.
Pertama buat sebuah folder baru, lalu buatlah sebuah file pada text editor kemudian beri nama index.html seperti pada gambar di bawah ini.
Setelah membuat file index.html, kemudian copy code di bawah dan pastekan pada text editor, kemudian save.
<!DOCTYPE html>
<html>
<head>
<title>Beranda</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
<div class="container">
<header>
<div class="logo">
Belajar Membuat Website Statis
</div>
</header>
<nav>
<ul>
<li><a href="index.html">Beranda</a></li>
<li><a href="kontak-saya.html">Kontak Saya</a></li>
<li><a href="tentang-saya.html">Tentang Saya</a></li>
</ul>
</nav>
<article>
<div class="konten">
<a href="konten1.html"><img src="gambar/image1.png" ></a>
<div class="judul">
<a href="konten1.html">Belajar HTML</a>
</div>
<p>Hypertext Markup Language adalah bahasa markah standar untuk dokumen yang dirancang untuk ditampilkan di peramban internet. Ini dapat dibantu oleh teknologi seperti Cascading Style Sheets dan bahasa scripting seperti JavaScript dan VBScript.</p>
</div>
<div class="konten">
<a href="konten2.html"><img src="gambar/image2.png" ></a>
<div class="judul">
<a href="konten2.html">Belajar CSS</a>
</div>
<p>Cascading Style Sheet merupakan aturan untuk mengatur beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman.</p>
</div>
<div class="konten">
<a href="konten3.html"><img src="gambar/image3.png" ></a>
<div class="judul">
<a href="konten3.html">Belajar PHP</a>
</div>
<p>Hypertext Preprocessor atau hanya PHP saja, adalah bahasa skrip dengan fungsi umum yang terutama digunakan untuk pengembangan web. Bahasa ini awalnya dibuat oleh seorang pemrogram Denmark-Kanada Rasmus Lerdorf pada tahun 1994. Implementasi referensi PHP sekarang diproduksi oleh The PHP Group.</p>
</div>
<div class="konten">
<a href="konten4.html"><img src="gambar/image4.png" ></a>
<div class="judul">
<a href="konten4.html">Belajar C++</a>
</div>
<p>C++ adalah bahasa pemrograman komputer yang dibuat oleh Bjarne Stroustrup, yang merupakan perkembangan dari bahasa C dikembangkan di Bell Labs. Pada awal tahun 1970-an, bahasa itu merupakan peningkatan dari bahasa sebelumnya, yaitu B.</p>
</div>
</article>
<footer>
Copyright 2022 website-saya.com
</footer>
</div>
</body>
</html>
Jika kita buka file index.html pada web browser, maka tampilan nya akan seperti berikut :
Agar tampilan nya menjadi lebih menarik, kita membutuhkan CSS. Perhatikan di dalam tag <head> .... </head>, terdapat sintak seperti ini :
<link href="style.css" rel="stylesheet" type="text/css"></link>
Fungsi dari sintak tersebut untuk memanggil file css yang dibuat terpisah.
Selanjutnya, buat file baru di folder yang sama dengan nama style.css, dan masukkan kode di bawah ini :
body{
font-family: Arial, Helvetica, sans-serif;
background: #e6e6e6;
padding: 0;
margin:0;
}
.container{
width: 65%;
height: auto;
background: white;
margin:auto;
margin-top: 5px;
padding-bottom: 5px;
}
.logo {
font-size: xx-large;
padding: 30px 0 30px 10px;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #1a75ff;
border: 1px solid gainsboro;
}
nav li {
float: left;
}
nav li a{
display: inline-block;
color:#ffffff;
text-align: center;
padding: 14px 15px;
text-decoration: none;
}
nav li a:hover {
opacity:0.9;
background-color: #3385ff;
}
article {
width: 98.8%;
height: auto;
border-radius: 3px;
margin: 5px 5px 5px 5px;
border: 1px solid gainsboro;
clear: both;
}
article p {
padding: 5px 6px 5px 5px;
line-height: 1.5;
}
article .konten {
width: 23.5%;
height: auto;
margin: 5px 5px 5px 5px;
border-radius: 3px;
border: 1px solid gainsboro;
float: left;
}
article .isi {
width: 98.5%;
height: auto;
margin: 5px 5px 5px 5px;
border-radius: 3px;
border: 1px solid gainsboro;
float: left;
}
article .isi .judul {
font-size: xx-large;
margin-bottom: 10px;
margin-left: 10px;
margin-top: 10px;
}
article .isi p {
margin-top: 0;
}
article .isi img {
float: left;
margin: 5px 5px 5px 5px;
}
article .konten img {
width: 95.8%;
height: 150px;
margin: 5px 5px 5px 5px;
}
article .konten:hover {
opacity:0.9;
}
article .konten .judul a {
margin-left: 5px;
text-decoration: none;
font-size:x-large;
color:#020101;
}
article .konten a:hover {
opacity:0.9;
}
footer {
clear: both;
width: 98.8%;
height: auto;
text-align: center;
margin: 5px 5px 5px 5px;
border-radius: 3px;
border-bottom: 1px solid gainsboro;
padding-top: 15px;
padding-bottom: 15px;
}
Hasilnya akan seperti ini :
Demikianlah artikel mengenai Cara Membuat Website Statis Sederhana dengan HTML dan CSS, apabila ada kesalahan dalam penulisan, mohon dimaklumi. Jika ada pertanyaan, silahkan bertanya pada kolom komentar di bawah..