Contoh Membuat Web Sederhana dengan HTML dan CSS – Sobat Tekno, bagi kamu yang ingin tahu cara membuat website dengan HTML dan CSS, tenang saja karena kamu sudah berada di tempat yang tepat. Di artikel ini, kita akan menyajikan panduan lengkap tentang cara membuat website dengan mudah.
Pengertian HTML dan CSS
Sebelum membuat website sederhana menggunakan HTML dan CSS, TeknoTask akan membahas sedikit tentang pengertian HTML dan CSS dibawah ini.
HTML (Hypertext Markup Language)
HTML merupakan singkatan dari Hypertext Markup Language, dan ini adalah salah satu bahasa standar yang memiliki peran krusial dalam mengatur dan memformat halaman sebuah website serta dokumen lainnya di World Wide Web.
CSS (Cascading Style Sheets)
Sementara CSS adalah kepanjangan dari Cascading Style Sheets, digunakan untuk menciptakan tampilan dan biasanya dikombinasikan dengan HTML.
Kenapa kita perlu belajar CSS juga? Untuk menjawab pertanyaan ini, mari kita perhatikan ilustrasi berikut:
Saat membangun sebuah website, bisa diibaratkan seperti membuat kerangka bangunan rumah. HTML berperan sebagai komponen-komponen untuk membangun struktur dasar sebuah halaman, sementara CSS memberikan sentuhan akhir untuk membuat komponen-komponen tersebut menyatu menjadi satu kesatuan utuh. Dengan begitu, website bisa dibangun dengan rapi dan menarik.
CSS digunakan untuk mengatur jarak antar elemen, ukuran (tinggi, lebar), jenis dan ukuran font, warna, efek hover, dan banyak lagi. Jadi, kita tidak bisa hanya mengandalkan HTML saja; kita membutuhkan CSS juga untuk membuat website yang estetis dan fungsional.
Cara Membuat Website dengan HTML dan CSS
Sebelum kita masuk ke pembahasan teknis cara membuat website dengan HTML dan CSS, ada beberapa tools yang perlu kamu persiapkan terlebih dahulu, seperti web browser dan text editor. Dalam tutorial ini, kita akan menggunakan text editor Sublime Text dan web browser Chrome, berikut dibawah ini adalah hal yang perlu disiapkan untuk membuat website sederhana menggunakan HTML dan CSS.
Teks Editor
Teks editor akan menjadi alat untuk membuat kode HTML dan CSS yang diperlukan untuk membangun sebuah halaman website. Notepad mungkin menjadi aplikasi standar yang sudah ada di platform Windows. Namun, untuk tingkat profesionalitas, disarankan menggunakan Notepad++ atau Sublime Text 3. Dari ketiganya, saya lebih merekomendasikan Sublime Text 3. Semua aplikasi tersebut bisa kamu download secara gratis di internet.
Browser
Website HTML yang kita buat melalui teks editor akan dijalankan di aplikasi browser. Saya merekomendasikan menggunakan Chrome atau Firefox; kamu bisa memilih salah satunya sesuai preferensi. Contoh Website Sederhana Menggunakan HTML dan CSS Sekarang, mari kita lihat contoh sederhana pembuatan website menggunakan HTML dan CSS dibawah ini.
3 Contoh Website Sederhana Menggunakan HTML dan CSS
Contoh 1 Website Sederhana Profil Pribadi
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Profil Pribadi</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
section {
max-width: 600px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
footer {
text-align: center;
padding: 10px;
background-color: #333;
color: #fff;
}
</style>
</head>
<body>
<header>
<h1>Profil Pribadi</h1>
</header>
<section>
<h2>Selamat datang di profil saya!</h2>
<p>Ini adalah halaman profil sederhana menggunakan HTML dan CSS.</p>
</section>
<footer>
<p>© 2024 Nama Saya. All rights reserved.</p>
</footer>
</body>
</html>Output Contoh 1
Contoh 2 Website Sederhana Galeri Foto
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Galeri Foto</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
section {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
padding: 20px;
}
img {
max-width: 100%;
height: auto;
margin-bottom: 20px;
}
footer {
text-align: center;
padding: 10px;
background-color: #333;
color: #fff;
}
</style>
</head>
<body>
<header>
<h1>Galeri Foto</h1>
</header>
<section>
<img src="gambar1.jpg" alt="Gambar 1">
<img src="gambar2.jpg" alt="Gambar 2">
<img src="gambar3.jpg" alt="Gambar 3">
</section>
<footer>
<p>© 2024 Galeri Foto. All rights reserved.</p>
</footer>
</body>
</html>Output Contoh 2
Contoh 3 Website Blog Sederhana
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blog Sederhana</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
article {
max-width: 600px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
footer {
text-align: center;
padding: 10px;
background-color: #333;
color: #fff;
}
</style>
</head>
<body>
<header>
<h1>Blog Sederhana</h1>
</header>
<article>
<h2>Judul Posting</h2>
<p>Tanggal Posting: 1 Maret 2024</p>
<p>Ini adalah konten dari posting blog sederhana menggunakan HTML dan CSS.</p>
</article>
<footer>
<p>© 2024 Blog Sederhana. All rights reserved.</p>
</footer>
</body>
</html>Output Contoh 3
Akhir Kata
Demikianlah ulasan tentang contoh pembuatan website sederhana dengan HTML dan CSS. Semoga informasi ini bermanfaat dan memberikan gambaran yang jelas untuk memulai perjalananmu dalam mengembangkan website. Jangan ragu untuk terus belajar dan eksplorasi lebih lanjut di dunia web development, selamat mencoba!