Pada kesempatan kali ini kita akan membahas cara membuat website dengan menggunakan html dan css. Namun harus di pastikan setidaknya kalian sudah memahami dasar-dasar html.
Sebetulnya saat ini untuk membuat website itu sangat mudah, bahkan ada beberapa CMS yang telah menyediakan fitur website builder sehingga kita bahkan tidak perlu sedikitpun untuk ngoding. Namun sangat baik jika kalian memahami cara membuat website dari nol tanpa bantuan tools atau CMS yang ada saat ini.
Secara umum website yang sering kita jumpai di internet menggunakan bahasa markup HTML dan CSS (Cascading Style Sheet) serta bahasa pemrograman javascript dan PHP. Namun untuk membuat website sederhana bersifat statis cukup dengan HTMLdan CSS saja.
Daftar Isi
Kenapa Harus Belajar CSS Juga?
Untuk menjawab pertanyaan ini perhatikan ilustrasi gambar di bawah ini:
Saat membangun sebuah website saya ilustrasikan seperti membuat kerangka bangunan rumah, html ibaratnya komponen-komponen untuk membangun sebuah rumah sedangkan CSS akan membuat komponen-komponen tersebut menjadi satu kesatuan yang utuh sehingga rumah tersebut bisa dibangun dengan pas dan menarik.
CSS kita gunakan untuk mengatur jarak antar elemen, ukuran (tinggi, lebar), ukuran dan jenis font, warna, efek hover dan masoh banyak lagi.
Jadi kita tidak bisa hanya memakai html saja untuk membuat website, kita membutuhkan css juga.
Oke, Saya harus mulai dari mana ?
Untuk mulai langkah awal kita butuh tools untuk coding dan menjalankan hasil codingan. Secara sederhana yang kita butuhkan hanya teks editor dan broeswer.
1. Teks Editor
Teks editor ini akan menjadi tools untuk kalian membuat kode-kode HTML dan CSS yang di butuhkan untuk membangun sebuah halaman website.
Notepad menjadi aplikasi yang paling standar dan sudah tersedia di platform windows. Jika kalian ingin yang profesional sebaiknya kalian pakai notepad++ atau sublime text 3. Dari ketiganya yang paling saya rekomendasikan adalah sublime text 3.
Semua aplikasi di atas bisa kalian download secara gratis di internet.
2. Browser
Website html yang kita buat melalui teks editor selanjutnya akan kita jalankan di aplikasi browser.
Browser yang saya rekomendasikan adalah chrome dan firefox kalian bisa memilih salah satunya.
Mengenal Struktur Dasar Dokumen HTML
Secara umum struktur dasar dari suatu dokumen HTML adalah seperti berikut:
<!DOCTYPE html>
<html>
<head>
<title>Membuat Web dengan HTML dan CSS - Kelasprogrammer.com</title>
</head>
<body>
<!--Elemen yang ditampilkan di halaman browser -->
</body>
</html>Di dalam HTML versi ke-5 setiap membuat dokumen html harus di awali dengan sintak <!DOCTYPE html> sintak ini berfungsi untuk memberitahu kepada browser bahwa dokumen html yang dibuat menggunakan versi ke-5, fungsi lain sekaligus membantu browser untuk menampilkan setiap elemen html dengan baik (karena menggunakan versi terbaru).
Selanjutnya dokumen HTML selalu di mulai dengan tag pembuka <html> dan kemudian di akhiri dengan penutup </html>
Setiap tag di html di desain memiliki pasangan, ada tag pembuka dan tag penutup, walaupun ada juga beberapa tag yang single (berdiri sendiri) seperti <br> untuk membuat baris baru <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> bisa kita buat judul dokumen, inisialisasi css, desktripsi dan meta tag lainnya.
Di dalam tag <head> terdapat tag <title> untuk membuat judul yang nantinya akan di tampilkan pada menu tab di browser.
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 nya.
Belajar Dasar-Dasar HTML
Agar artikel ini tidak begitu panjang, untuk beberapa sub topik sudah saya bahas pada artikel berikut:
- Membuat Paragraf dan Heading
- Membuat List
- Membuat Tabel
- Membuat Link
- Menampilkan gambar
- Membuat tombol (button)
- Membuat Form
Belajar Penggunaan Dasar CSS
Untuk memahami penggunaan dasar CSS di html coba baca aritikel ini
Silakan teman-teman pelajari dahulu topik-topik di atas karena kalau kalian belum menguasai nantinya akan kesulitat di tahap berikut.
Menentukan Struktur navigasi
Struktur navigasi web adalah adalah suatu struktur untuk menggambarkan bagaimana suatu halaman di dalam website yang saling berhubungan antara satu dengan lainnya.
Penting untuk membuat struktur navigasi sebelum kita membuat website. Berikut ini contoh navigasi halaman website yang akan kita buat:
Saat pertama kali pengguna mengakses website, halaman index akan menjadi halaman utama yang terdiri dari menu home, kontak saya dan tentang saya, halaman home bisa kita gunakan sebagai halaman index yang berisi konten artikel-artikel pada website kita.
Membuat Layout Website
Layout adalah tata letak dari setiap komponen elemen di dalam website. Layout berfungsi untuk memetakan bagian-bagian dalam halaman website. Dengan desain layout yang baik akan memberikan kenyamanan kepada pengunjung.
Secara umum website memiliki 4 bagian layout yaitu
- Header – Berisi judul website
- Navigasi – Untuk membuat menu navigasi
- Konten – Bagian utama yang menjadi sasaran informasi yang ingin di sampaikan ke pengunjung
- Footer – Bagian paling bawah biasa berisi keterangan tambahan seperti informasi kepemilikan atau copyright.
Untuk membuat layout di HTML 5 kita bisa menggunakan tag-tag berikut:
- Untuk membuat header menggunakan tag <header>
- Membuat navigasi menggunakann tag <nav>
- Membuat konten/artikel menggunakan tag <article>
- Membuat footer menggunakan tag <footer>
<!DOCTYPE html>
<html>
<head>
<title>Contoh Membuat Layout - www.kelasprogrammer.com</title>
</head>
<body>
<header>
<p>Header</p>
</header>
<nav>
<p>Navbar</p>
</nav>
<article>
<p>Konten</p>
</article>
<footer>
<p>Footer</p>
</footer>
</body>
</html>Agar bisa terlihat lebih jelas tambahkan kode CSS di dalam tag <head> seperti berikut:
<style>
body {
width: 65%;
height: auto;
background: white;
margin:auto;
margin-top: 5px;
padding-bottom: 5px;
}
p {
text-align: center;
font-size: x-large;
margin:auto;
}
header,nav,article,footer {
border-radius: 3px;
margin: 5px 5px 5px 5px;
border: 1px solid gainsboro;
}
header {
height: 80px;
background-color: aquamarine;
}
nav {
height: 45px;
background-color: blanchedalmond;
}
article {
height: 150px;
background-color: cornflowerblue;
}
footer {
height: 50px;
background-color: darkkhaki;
}
</style>Hasil:
Studi Kasus : Membuat Website Sederhana Dengan HTML dan CSS
Setelah kalian memahami pembahasan diatas , selanjutnya kita akan belajar membuat website sederhana.
Website yang kita buat bersifat statis karena hanya menggunakan HTML dan CSS, kedepannya kalian bisa kembangkan dengan belajar javascript, PHP, atau python untuk membuat website dinamis.
Baca juga : Perbedaan web statis dan dinamis
Langkah 1 : Buatlah folder project web
Buatlah sebuah folder baru dalam di rektori kalian, contoh dibawah ini saya membuat folder web-saya
Selanjutnya buatlah folder gambar yang berisi gambar untuk kebutuhan konten website
Perhatikan untuk nama gambar pastikan tidak ada spasi jika nama lebih dari satu kata pakailah tanda penghubung – (strip) atau _ (underscore).
Kenali setiap ekstensi gambar apakah menggunakan format .png atau jpeg karena nantinya kita akan sertakan gambar-gambar ini dalam sintak html menggunakan tag <img>.
Langkah 2 : Buatlah file index melalui teks editor
Buatlah sebuah file dengan nama index.html melalui teks editor yang kalian miliki, saran saya kalian bisa menggunakan sublime text atau teks editor lainnya yang kalian miliki dan sukai.
<!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">
Web Saya
</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="penyu.html"><img src="gambar/penyu.jpg" ></a>
<div class="judul">
<a href="penyu.html">Penyu</a>
</div>
<p>Penyu adalah hewan yang banyak di temukan bertelur di beberapa pesisir pantai di Indonesia sejak dahulu.</p>
</div>
<div class="konten">
<a href="ikan-badut.html"><img src="gambar/ikan-badut.jpg" ></a>
<div class="judul">
<a href="ikan-badut.html">Ikan Badut</a>
</div>
<p>Ikan badut ini dapat dikenali dengan warna jingganya ikan ini tumbuh mencapai 8 cm serta termasuk dalam ikan terpopuler didunia. </p>
</div>
<div class="konten">
<a href="lion-fish.html"><img src="gambar/lion-fish.jpg" ></a>
<div class="judul">
<a href="lion-fish.html">Lion Fish</a>
</div>
<p>Lionfish atau volitans adalah ikan berbisa milik keluarga yang Scorpaenidae terjemahan harfiah berarti ikan kalajengking.</p>
</div>
<div class="konten">
<a href="moorish-idol.html"><img src="gambar/Moorish-Idol.jpg" ></a>
<div class="judul">
<a href="moorish-idol.html">Moorish Idol</a>
</div>
<p>Ikan Moorish Idol adalah salah satu ikan yang cukup populer di kalangan ara hobiis ikan hias karena bentuknya yang unik dan pola warnanya yang menarik.</p>
</div>
</article>
<footer>
Copyright 2020 web-saya.com
</footer>
</div>
</body>
</html>Jika kita menjalankan file index.html di browser maka hasilnya akan seperti pada gambar berikut:
Untuk mengatur tampilan halaman website kita perlu menambahkan style CSS. Coba perhatikan di dalam tag <head> saya menyertakan sintak ini:
<link rel="stylesheet" type="text/css" href="style.css">Sintak ini meruapakan cara menyisipkan style css secara eksternal (terpisah dari file html) sehingga kita perlu membuat file baru bernama style.css
Langkah 3 : Membuat Style CSS
Buat file dengan nama style.css dengan isi kode seperti berikut:
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;
}Hasil
Dapat di lihat setelah kita menambahkan style CSS tampilan website menjadi lebih menarik.
Pada tahap ini kita baru membuat satu halaman yaitu halaman index selanjutnya masih ada halaman lainnya yang perlu dibuat.
Langkah 4 : Membuat Halaman Artikel
Agar ketika pengguna mengklik salah satu konten artikel untuk dapat di baca secara keseluruhan isi konten, maka kita perlu membuat halaman untuk masing-masing konten tersebut.
Halaman yang harus kita buat adalah
- penyu.html
- ikan-badut.html
- lion-fish.html
- moorish-idol.html
Contoh : Membuat Halaman ikan-badut.html
<!DOCTYPE html>
<html>
<head>
<title>Ikan Badut</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">
Web Saya
</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="isi">
<div class="judul">
Ikan Badut
</div>
<img src="gambar/ikan-badut.jpg" >
<p>Ikan badut ini dapat dikenali dengan warna jingganya ikan ini tumbuh mencapai 8 cm serta termasuk dalam ikan terpopuler didunia. Hewan ini masuk kedalam Genus Amphiprion. Ikan giru atau lebih dikenal dengan sebutan ikan badut adalah ikan dari anak suku Amphiprioninae dalam suku Pomacentridae. Ada 28 spesies yang biasa dikenali, salah satunya adalah genus Premnas, sementara sisanya termasuk dalam genus Amphiprion. </p>
<p>Mereka tersebar di lautan Pasifik, Laut Merah, lautan India, dan karang besar Australia. Di alam bebas mereka bersimbiosis dengan anemon laut. Anemon akan melindungi Ikan badut dari pemangsa dan Ikan badut akan membersihkan Anemon dengan memakan sisa - sisa makanan Anemon. Ikan badut berwarna kuning, jingga, kemerahan atau kehitaman. </p>
<p>Spesies terbesar mencapai panjang 18 cm, sementara yang terkecil hanya 6 cm. Mereka, pada umumnya, dijumpai pada laguna-laguna berbatu di seputar terumbu karang, atau pada daerah koastal dengan kedalaman kurang dari 50 meter dan berair jernih. Di perairan Papua New Guinea, bisa ditemukan ikan badut tidak kurang dari 8 spesies. Di alam, ikan badut mengkonsumsi zooplankton, udang-udangan dan algae yang dijumpai di habitat mereka.</p>
</div>
</article>
<footer>
Copyright 2020 web-saya.com
</footer>
</div>
</body>
</html>Hasil
Kalian bisa lakukan cara yang sama dengan cara meng-copy dari file ikan-badut.html lalu mengganti dengan file lainnya.
Langkah 5 : Membuat Halaman Kontak & Tentang saya
Selain membuat halaman diatas, kita juga perlu membuat dua halaman lainnya yaitu:
- kontak-saya.html
- tentang-saya.html
Ketika penjung mengklik menu kontak saya pengunjung tersebut akan di arahkan ke halaman kontak-saya.html begitu juga dengan halaman tentang saya. Kalian bisa memuat profil kontak kalian pada kedua halaman ini.
Download Source Code
Untuk mempersingkat tutorial kali ini saya sudah menyediakan source code yang bisa kalian download secara gratis.
[sociallocker id=”5349″] [/sociallocker]