Cara Membuat Website Dengan HTML – Sobat Tekno, dalam dunia pengembangan web, memahami cara membuat website dengan HTML dan CSS merupakan langkah awal yang sangat penting. Terutama bagi kamu yang masih pemula, penting untuk memahami kedua bahasa tersebut sebagai dasar dalam membangun situs web.
Salah satu keuntungan utama dalam membuat website menggunakan HTML dan CSS adalah fleksibilitas dan kontrol penuh yang diberikan kepada pengguna. Dengan kedua bahasa ini, pengguna memiliki kebebasan lebih untuk merancang dan mengatur tampilan setiap elemen sesuai dengan preferensi mereka.
Jadi, bagaimana sebenarnya cara membuat website dengan CSS dan HTML? Mari kita temukan jawabannya dalam informasi dan tutorial lengkap yang akan TeknoTask ulas dibawah ini.
Apa Itu HTML?
HTML adalah singkatan dari Hypertext Markup Language. Dengan HTML, seorang pengguna dapat membuat dan menyusun bagian heading, paragraf, link atau tautan, serta blockquote untuk halaman sebuah website. HTML terdiri dari rangkaian elemen yang dapat digunakan untuk melingkupi berbagai bagian dari konten, memberikan tampilan atau fungsi khusus.
HTML bukan hanya sekadar coding yang wajib diketahui oleh pemula, tetapi juga merupakan bahasa pemrograman paling umum dalam pembuatan website. Keuntungan lainnya adalah dengan menguasai coding HTML, kamu dapat membangun website sendiri, membuat template, dan menciptakan karya-karya kreatif lain yang dapat dijual. Seru, bukan?
HTML juga termasuk bahasa pemrograman yang relatif mudah dipahami. Jadi, tidak perlu takut untuk memulai belajar coding.
Cara Membuat Website dengan HTML dan CSS
Sebelum kita masuk ke langkah-langkah cara membuat website dengan HTML dan CSS, pastikan kamu telah menyiapkan Text Editor dan Web Browser. Text editor digunakan sebagai alat untuk menulis kode, sementara web browser digunakan untuk mengakses website.
Pada tutorial ini, kita akan menggunakan Codepen.io sebagai text editor dan Google Chrome sebagai browser. Kamu bisa menggunakan alat favoritmu sendiri. Berikut langkah-langkah membuat website sederhana menggunakan HTML dan CSS di Codepen.io:
1. Buka Codepen.io di browser.
Langkah pertama sebelum kamu ingin membuat website sederhana menggunakan HTML dan CSS di Text Editor Codepen.io, buka dahulu browser di perangkatmu dan akses website codepen.io.
2. Daftar dan Masuk ke dalam Akun Codepen.io
Jika kamu belum memiliki akun Codepen.io, maka kamu bisa mendaftar dengan cara klik tombol “Sign Up” untuk membuat akun baru. Namun jika kamu sudah memiliki akun atau sudah mendaftar maka bisa klik “Log In” untuk mulai membuat website.
3. Klik New Pen
Setelah masuk menggunakan akun Codepen.io milikmu, klik tombol “New Pen” di bagian atas halaman untuk mulai membuat kode HTML dan CSS untuk membuat website.
4. Masukkan kode HTML dan CSS
Nantinya akan muncul tiga panel utama: HTML, CSS, dan JavaScript. Kita akan fokus pada HTML dan CSS dengan mengisikan kode dibawah ini.
Kode HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website Sederhana</title>
</head>
<body>
<header>
<h1>Selamat Datang di Website Sederhana</h1>
<nav>
<ul>
<li><a href="https://teknotask.com/">Beranda</a></li>
<li><a href="https://teknotask.com/">Tentang Kami</a></li>
<li class="right"><a href="https://teknotask.com/">Daftar</a></li>
</ul>
</nav>
</header>
<section>
<img src="kucing.jpg" alt="Contoh Gambar">
<p>Ini adalah contoh website sederhana menggunakan HTML dan CSS di Codepen.io.</p>
</section>
<footer>
<p>© 2024 Website Sederhana. All rights reserved.</p>
</footer>
</body>
</html>
Kode CSS
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
text-align: center;
padding: 20px;
}
nav {
margin-top: 10px;
}
ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
}
li {
margin-right: 20px;
}
li.right {
margin-left: auto;
}
a {
text-decoration: none;
color: #fff;
font-weight: bold;
}
section {
max-width: 800px;
margin: 20px auto;
padding: 20px;
}
img {
width: 100%;
height: auto;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
position: fixed;
bottom: 0;
width: 100%;
}
5. Simpan Proyek
Jika kode HTML dan CSS sudah kamu masukkan ke masing-masing panel, selanjutnya klik tombol “Save & Close” untuk menyimpan proyek.
6. Lihat Hasil Output
Langkah terakhir adalah menampilkan output dari kode tersebut agar bisa menampilkan halaman web, untuk itu kamu bisa klik tombol “Change View” di bagian atas untuk melihat hasil tampilan.
Output Kode
Selamat! Kamu telah berhasil membuat website sederhana menggunakan HTML dan CSS di Codepen.io! Kamu dapat menyimpan dan berbagi URL proyekmu dengan orang lain. Namun jika kamu menggunakan Text Editor selain Codepen.io, untuk file gambarnya bisa kamu unduh disini atau bisa juga menggunakan gambar lainnya di internet.
Akhir Kata
Demikianlah ulasan mengenai cara membuat website dengan HTML dengan mudah. Semoga informasi ini bermanfaat untukmu. Jangan ragu untuk terus mengembangkan keterampilanmu dalam dunia web development.