Program Dasar Membuat Halaman Web Menggunakan HTML
- Browser: Alat yang digunakan untuk membuka website kamu, seperti Chorome
- dan Firefox
- Notepad++: Alat untuk menulis kerangka HTML bila kamu adalah penggunasistem
- operrasi Windows
- Sublime Text: Alat untuk menulis kerangka HTML bila kamu adalah pengguna sistem
- operasi MacOS kARENA Notepad++ tidak bisa dipakai di MacOS
- XAMPP: Platfrom server web yang banyak digunakan untuk membantu programmer
- dalam membuat dan menguji program di web server lokal. XAMPP digunakan ketika
- website yang akan kamu bangun membutuhkan koneksi ke database.
Sudah menemukan desain website yang akan dibuat? Bagus! Sekarang saatnya membuat website dengan HTML.
Pertama-tama, saya membuat folder baru di dalam laptop. Memberinya nama sesuai dengan nama proyek/website yang akan dibuat.
Tidak ada masalah dimanapun folder ini saya simpan. Tapi, ketika kita ingin menggunakan XAMPP, maka folder tersebut harus disimpan di dalam direktori “htdocs”.
5. Buat File Utama dalam Membuat Website
Setidaknya ada 2 file utama yang harus dibuat pertama kali ketika ingin membuat website, file tersebut umumnya diberi nama “index.html” dan “style.css”.
File “index.html” dibuat untuk menyimpan kumpulan baris kode HTML. Sedangkan “style.css” akan digunakan untuk menyimpan kumpulan baris kode CSS.
Kenapa harus diberi nama index.html? Karena, file tersebut akan dibaca untuk pertama oleh browser, sehingga tanpa nama file dibelakangnya, saya bisa melihat website tersebut hanya dengan nama foldernya, seperti “https://www.lusiana-dbm/”.
Sedangkan, untuk file CSS bisa dibuat dengan nama yang lebih custom. Tergantung kemauan dari kita sendiri.
6. Masukkan Kerangka Inti HTML
Sampai disini, saatnya kita memasukkan kerangka inti dari ratusan baris kode HTML. Beberapa kerangka inti tersebut antara lain:
- <!DOCTYPE html>: Berfungsi untuk mendeklarasikan kepada komputer bahwa kita akan menuliskan perintah dalam kode HTML.
- <html>: Tag yang berfungsi untuk memulai dan mengakhiri dokumen dalam kode HTML.
- <head>: Tag yang berisi metadata seperti judul tab, deskripsi, dan lain-lain.
- <title>: Judul dari website.
- <body>: Berisi konten utama dari website.
Kerangka di atas bisa disebut sebagai “tag”. Dari kerangka inti tersebut, kita bisa membuat kerangka seperti gambar berikut ini.
<!DOCTYPE html>
<html>
<head>
<title>Cara Membuat Website dengan HTML - dibalikmeja.com</title>
</head>
<body>
</body>
</html>Sebagai tambahan, saya membuat beberapa tampilan custom untuk menampilkan beberapa gambar, teks, dan navigasi pada website yang sedang saya buat.
<!DOCTYPE html>
<html>
<head>
<title>Cara Membuat Website dengan HTML - dibalikmeja.com</title>
</head>
<body>
<h1>Belajar Cara Membuat Website dengan HTML</h1>
<p>Bersama Lusiana Haryanti</p>
<a href="#">Beranda</a>
<a href="#">Tentang Saya</a>
<a href="#">Hubungi Saya</a>
<h2>Bagaimana Tentang Saya?</h2>
<h5>Lusiana Haryanti</h5>
Image
<p>Saya adalah ...</p>
<p>Lusiana Haryanti - UI/UX Enthusiast yang memiliki passion di dunia bisnis startup</p>
<h2>Bagaimana Cara Menghubungi Saya?</h2>
<h5>Kontak Saya</h5>
Image
<p>Hubungi saya ...</p>
<p>Melalui kolom komentar yang ada di dibalikmeja.com</p>
<h2>Footer</h2>
</body>
</html>
Hasil tampilan dari baris kode yang sudah saya buat di atas akan menampilkan website seperti berikut ini.
Tampilan tersebut masih benar-benar kaku dan membutuhan file CSS untuk membuatnya lebih menarik lagi. Hal ini bisa saya lakukan dengan langkah ke-7.
7. Percantik Halaman Web Dengan CSS
Layout HTML di atas tentu masih belum menarik untuk dilihat dan belum sesuai dengan apa yang sudah saya gambarkan pada studi kasus sebelumnya.
Agar layout tersebut bisa dibuat dengan lebih menarik dan sesuai desain, maka saya membutuhkan kumpulan baris kode CSS.
Namun, saya harus memastikan terlebih dahulu file “style.css” sudah dipanggil oleh file “index.html” dalam tag <head>. Kemudian, menambahkan class ataupun id sebagai pembeda antara tag satu dengan tag lain serta elemen satu dengan elemen lain.
Sehingga, kode HTML di dalam index.html akan berbentuk seperti di bawah ini.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Cara Membuat Website dengan HTML - dibalikmeja.com</title>
</head>
<body>
<div class="header">
<h1>Belajar Cara Membuat Website dengan HTML</h1>
<p>Bersama Lusiana Haryanti</p>
</div>
<div class="topnav">
<a href="#">Beranda</a>
<a href="#">Tentang Saya</a>
<a href="#">Hubungi Saya</a>
</div>
<div class="row">
<div class="card">
<h2>Bagaimana Tentang Saya?</h2>
<h5>Lusiana Haryanti</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Saya adalah ...</p>
<p>Lusiana Haryanti - UI/UX Enthusiast yang memiliki passion di dunia bisnis startup</p>
</div>
<div class="card">
<h2>Bagaimana Cara Menghubungi Saya?</h2>
<h5>Kontak Saya</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Hubungi saya ...</p>
<p>Melalui kolom komentar yang ada di dibalikmeja.com</p>
</div>
</div>
<div class="footer">
<h2>Footer</h2>
</div>
</body>
</html>
Untuk merubahnya menjadi desain seperti studi kasus saya, maka saya memerlukan kode seperti berikut ini.
* {
box-sizing: border-box;
}
body {
font-family: Arial;
padding: 10px;
background: #f1f1f1;
}
/* Header/Blog Title */
.header {
padding: 30px;
text-align: center;
background: white;
}
.header h1 {
font-size: 50px;
}
/* Style the top navigation bar */
.topnav {
overflow: hidden;
background-color: #333;
}
/* Style the topnav links */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change color on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Fake image */
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
/* Add a card effect for articles */
.card {
background-color: white;
padding: 20px;
margin-top: 20px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Footer */
.footer {
padding: 20px;
text-align: center;
background: #ddd;
margin-top: 20px;
}Sampai ke tahap ini, website kita sudah berhasil sesuai dengan contoh dari desain studi kasus yang sudah ditujunkan di atas.
Mari kita buka file index.html tersebut di halaman browser seperti berikut ini.
Kreasikan kembali tampilan ini sesuai dengan keinginan kamu. Jangan khawatir dengan tampilan yang kurang menarik untuk saat ini. Karena, website tersebut hanya bisa diakses oleh kamu melalui laptop yang kamu gunakan.
Bila semua kreatifitasmu sudah tertuliskan di dalam barisan kode itu kemudian kamu ingin websitenya bisa dipublikasikan dan dapat diakses secara online, maka ikuti langkah-langkah selanjutnya.
Penutup : Itu dia tahapan cara membuat website dengan HTML dari pengalaman yang pernah
saya lakukan. Jika ada tahapan yang menurut kamu masih kurang sesuai atau sulit
untuk dilakuka, silahkan tinggalkan komentar kamu dibawah
Kunci dari selama membuat web dengan HTML, Ya sudah pasti kita harus
memperkuat ilmu dari HTML dan CSS. Selanjutnya, Agar bisa membuat website
lebih profesional, kamu bisa mempelajari bahasa pemrograman yang lainnya.