Cara Membuat Website Keren dengan HTML dan CSS – Sobat Tekno, apakah kamu ingin mempelajari cara membuat website, namun masih bingung harus mulai darimana? Jangan khawatir, kita bisa memulainya dari dasar, yaitu HTML dan CSS! Bagi seorang web developer, HTML dan CSS merupakan fondasi yang wajib dipahami dan dikuasai untuk mengembangkan website.
Untuk membuat website yang keren dan responsif, kamu harus tahu dulu apa itu HTML dan CSS. Dibawah ini TeknoTask akan memberikan kamu penjelasan tentang dasar-dasar HTML dan CSS, serta langkah-langkah membuat web yang keren menggunakan HTML dan CSS.
Mengenal HTML dan CSS
HTML atau HyperText Markup Language adalah bahasa markup standar yang digunakan untuk mengatur dan mendesain tampilan konten halaman. Dengan HTML, kita dapat membuat struktur dan format elemen-elemen website seperti teks, gambar, video, dan lainnya. HTML menjadi bahasa dasar dalam merancang struktur web dan kontennya.
Sementara itu, Cascading Style Sheets atau CSS adalah kumpulan perintah yang berfungsi mengontrol tampilan dan tata letak elemen halaman. CSS memungkinkan kita mengatur estetika desain halaman seperti mengganti font, mengatur warna, padding, margin, dan lainnya. HTML dan CSS bekerja sama untuk menciptakan tampilan halaman yang menarik dan interaktif.
Cara Membuat Website Keren dengan HTML dan CSS
1. Persiapkan Struktur Folder
Dimulai dari langkah awal pertama-tama, buka manajer file dan buat folder baru untuk proyek website keren, misalnya, beri nama folder “WebsiteKeren”. Di dalamnya, buat subfolder “Gambar” untuk menyimpan elemen desain dan gambar, berikut dibawah ini adalah contoh struktur foldernya.
WebisteKeren
- Gambar
– fitur.jpg
– galeri.jpg
– testimoni.jpg - index.html
- style.css
Untuk contoh gambar yang ada pada tutorial pembuatan web kali ini, bisa kamu unduh disini.
2. Buat File HTML Utama (index.html)
Buka Sublime Text dan buat file baru bernama “index.html” dalam folder proyek, jika sudah dibuat isi file tersebut dengan kode HTML dibawah ini.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Website Keren</title>
</head>
<body>
<header>
<div class="logo">
<img src="logo/logo teknotask.png" alt="Website Logo">
</div>
</header>
<nav>
<ul>
<li><a href="#features">Fitur</a></li>
<li><a href="#gallery">Galeri</a></li>
<li><a href="#testimonials">Testimoni</a></li>
<li><a href="#contact">Kontak</a></li>
</ul>
</nav>
<section id="features">
<h2>Fitur</h2>
<div class="feature-item">
<img src="web/fitur1.jpg" alt="Fitur 1">
<h3>Desain Modern</h3>
<p>Desain modern yang memukau untuk pengalaman pengguna yang luar biasa.</p>
</div>
<div class="feature-item">
<img src="web/fitur2.jpg" alt="Fitur 2">
<h3>Responsif</h3>
<p>Tampilan responsif untuk penggunaan yang nyaman di berbagai perangkat.</p>
</div>
<!-- Tambahkan fitur lainnya sesuai kebutuhan -->
</section>
<section id="gallery">
<h2>Galeri</h2>
<div class="gallery-item">
<img src="web/galeri1.jpg" alt="Gambar 1">
</div>
<div class="gallery-item">
<img src="web/galeri2.jpg" alt="Gambar 2">
</div>
<!-- Tambahkan gambar galeri lainnya sesuai kebutuhan -->
</section>
<section id="testimonials">
<h2>Testimoni</h2>
<div class="testimonial-item">
<img src="web/profil1.jpg" alt="Avatar 1">
<p>"Website ini benar-benar menginspirasi. Saya sangat merekomendasikannya!"</p>
<cite>- John Doe</cite>
</div>
<div class="testimonial-item">
<img src="web/profil2.webp" alt="Avatar 2">
<p>"Pelayanannya luar biasa. Saya sangat puas dengan pengalaman saya."</p>
<cite>- Jane Smith</cite>
</div>
<!-- Tambahkan testimonial lainnya sesuai kebutuhan -->
</section>
<section id="contact">
<h2>Kontak</h2>
<p>Jika Anda memiliki pertanyaan atau ingin bermitra dengan kami, hubungi kami melalui formulir di bawah ini atau melalui kontak langsung.</p>
<!-- Tambahkan formulir kontak atau informasi kontak -->
</section>
<footer>
<p>© 2024 TeknoTask. All rights reserved.</p>
</footer>
</body>
</html>3. Buat File CSS (style.css)
Buka Sublime Text dan buat file baru bernama “style.css” dalam folder proyek, jika sudah dibuat isi file ini dengan kode CSS dibawah ini.
<style type="text/css">
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: darkcyan;
color: white;
text-align: center;
padding: 1em 0;
}
.logo img {
width: 250px; /* Sesuaikan ukuran logo sesuai kebutuhan */
height: auto;
}
nav {
background-color: yellowgreen;
padding: 0.5em 0;
}
nav ul {
list-style: none;
text-align: center;
}
nav ul li {
display: inline;
margin: 0 10px;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-weight: bold;
}
section {
max-width: 800px;
margin: 20px auto;
padding: 20px;
}
.feature-item,
.gallery-item,
.testimonial-item {
text-align: center;
margin: 20px;
}
.feature-item img,
.gallery-item img,
.testimonial-item img {
width: 100%;
max-width: 400px; /* Sesuaikan dengan kebutuhan ukuran maksimum gambar */
height: auto;
border-radius: 8px;
margin-bottom: 10px;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 1em 0;
}
</style>4. Tambahkan Konten dan Desain
Buka kembali file “index.html” dan “style.css” menggunakan Sublime Text, lalu tambahkan konten untuk bagian yang perlu kamu kamu tambahkan.
5. Jalankan Kode
Jika dirasa desain web sudah cocok, simpan semua perubahan pada semua kodenya. Selanjutnya untuk menjalankan kodenya, buka file “index.html” menggunakan browser default untuk melihat hasilnya.
6. Tampilkan Website
Selamat! Kamu telah berhasil membuat website keren dengan HTML dan CSS menggunakan Sublime Text.
Penutup
Dengan mengikuti langkah-langkah diatas, kamu bisa membuat website yang keren sekaligus dapat menjadi tempat memberikan informasi. Jangan ragu untuk terus mengembangkan ide dan keterampilanmu dalam dunia pengembangan web. Semoga sukses!