tutorial membuat web sederhana dengan html css – Ingin membangun website sendiri tanpa perlu coding rumit? Tutorial ini akan memandu Anda langkah demi langkah dalam menciptakan website sederhana dengan HTML dan CSS. Dengan HTML, Anda akan membentuk struktur website, sementara CSS akan menambahkan gaya dan desain yang menarik.
Anda akan mempelajari cara membuat file HTML, mengatur struktur dasar website, menambahkan gaya dengan CSS, dan mengatur tata letak elemen website. Tutorial ini dirancang untuk pemula, sehingga Anda tidak memerlukan pengetahuan coding sebelumnya. Siap untuk memulai petualangan membangun website Anda sendiri?
Membangun Pondasi: Persiapan Dasar
Sebelum kita menyelami dunia web, kita perlu menyiapkan perlengkapannya terlebih dahulu. Bayangkan kamu ingin membangun rumah, tentu kamu butuh batu bata, semen, dan alat-alat lainnya, bukan? Begitu pula dengan membangun web, kita butuh perangkat lunak yang akan menjadi “batu bata” dan “semen” dalam proyek kita.
Membuat File HTML, Tutorial membuat web sederhana dengan html css
Langkah pertama adalah membuat file HTML. File HTML adalah seperti “kanvas” tempat kita akan menggambar isi web kita. Untuk membuatnya, kamu bisa menggunakan editor teks sederhana seperti Notepad (Windows), TextEdit (Mac), atau Sublime Text. Buka editor teks kamu dan simpan file baru dengan ekstensi “.html”. Misalnya, “index.html”.
Sekarang, mari kita tulis kode HTML sederhana untuk menampilkan teks “Halo Dunia!”.
<!DOCTYPE html>
<html>
<head>
<title>Halo Dunia!</title>
</head>
<body>
<p>Halo Dunia!</p>
</body>
</html>
Kode di atas mungkin terlihat rumit, tapi tenang saja, kita akan bahas satu per satu. Untuk saat ini, cukup simpan kode ini dalam file “index.html” yang sudah kamu buat.
Alat-alat yang Dibutuhkan
Berikut adalah alat-alat yang kita butuhkan untuk membangun web sederhana dengan HTML dan CSS:
Alat |
Fungsi |
---|---|
Editor Teks |
Untuk menulis kode HTML dan CSS |
Browser Web |
Untuk melihat hasil web yang kita buat |
Membangun Kerangka: Struktur Dasar HTML: Tutorial Membuat Web Sederhana Dengan Html Css
Sekarang kita sudah memiliki “kanvas” HTML, saatnya untuk membangun kerangka web kita. Bayangkan kerangka ini seperti struktur rumah yang akan menopang semua isi web kita. Struktur HTML terdiri dari beberapa tag penting yang akan membantu kita mengatur konten web.
Tag Utama HTML
Tag ``, `
`, dan `` adalah tiga tag utama dalam HTML. Tag `` adalah tag induk yang menyelimuti semua elemen HTML lainnya. Tag `` berisi informasi tentang halaman web, seperti judul halaman, meta data, dan link ke file CSS. Tag `` berisi semua konten yang akan ditampilkan di halaman web.Sebagai contoh, kita bisa menambahkan judul halaman web “Tutorial Web Sederhana” dengan tag `
<!DOCTYPE html>
<html>
<head>
<title>Tutorial Web Sederhana</title>
</head>
<body>
<p>Halo Dunia!</p>
</body>
</html>
Tag HTML Umum
Selain tag utama, ada banyak tag HTML lainnya yang membantu kita mengatur konten web. Berikut adalah beberapa tag HTML umum dan fungsinya:
Tag |
Fungsi |
---|---|
`
` |
Untuk menampilkan paragraf teks |
`
`, `
`, … |
Untuk menampilkan judul dengan berbagai level |
`` |
Untuk menampilkan gambar |
`` |
Untuk membuat tautan ke halaman web lain |
`
|
Untuk membuat daftar yang tidak bernomor |
`
|
Untuk membuat daftar yang bernomor |
Menambahkan Sentuhan Warna: Menambahkan Gaya dengan CSS
Sekarang kerangka web kita sudah siap, saatnya untuk menambahkan sentuhan estetika. Bayangkan kamu membangun rumah, setelah kerangka selesai, kamu akan menambahkan cat, wallpaper, dan furnitur untuk mempercantiknya. Begitu pula dengan web, kita akan menggunakan CSS untuk mempercantik tampilan web kita.
Menghubungkan File CSS
CSS (Cascading Style Sheets) adalah bahasa yang digunakan untuk mengatur tampilan web. Untuk menghubungkan file CSS ke file HTML, kita bisa menggunakan tag `` di dalam tag `
`:
<!DOCTYPE html>
<html>
<head>
<title>Tutorial Web Sederhana</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>Halo Dunia!</p>
</body>
</html>
Kode di atas menghubungkan file CSS bernama “style.css” ke file HTML. Pastikan file “style.css” berada di folder yang sama dengan file HTML.
Mengubah Warna Latar Belakang
Sebagai contoh, kita bisa mengubah warna latar belakang halaman web menjadi biru dengan kode CSS berikut:
body
background-color: blue;
Simpan kode ini dalam file “style.css” dan buka file HTML di browser web. Kamu akan melihat warna latar belakang halaman web berubah menjadi biru.
Mengatur Font dan Warna Teks
Kita juga bisa mengatur ukuran font dan warna teks dengan CSS:
p
font-size: 20px;
color: red;
Kode di atas akan mengubah ukuran font paragraf menjadi 20px dan warna teks menjadi merah.
Menata Isi Web: Mengatur Tata Letak dengan CSS
Setelah kita menambahkan warna dan gaya, saatnya untuk mengatur tata letak web kita. Bayangkan kamu menata furnitur di dalam rumah, kamu perlu menentukan posisi dan jarak antar furnitur agar ruangan terlihat rapi dan nyaman. Begitu pula dengan web, kita akan menggunakan CSS untuk mengatur tata letak elemen web.
Konsep `box model`
Konsep `box model` dalam CSS adalah dasar untuk mengatur tata letak elemen web. Setiap elemen HTML dianggap sebagai kotak yang memiliki margin, padding, border, dan content. Margin adalah jarak antara kotak dengan elemen lainnya. Padding adalah jarak antara border dengan content. Border adalah garis tepi kotak. Content adalah isi dari kotak, seperti teks atau gambar.
Mengatur Margin, Padding, dan Border
Kita bisa mengatur margin, padding, dan border dengan CSS. Sebagai contoh, kita bisa mengatur margin atas dan bawah elemen `
` menjadi 20px, padding kiri dan kanan menjadi 10px, dan border menjadi garis tipis berwarna hitam:
p
margin: 20px 0;
padding: 0 10px;
border: 1px solid black;
Properti CSS untuk Tata Letak
Selain margin, padding, dan border, ada banyak properti CSS lainnya yang bisa kita gunakan untuk mengatur tata letak web. Berikut adalah beberapa properti CSS untuk mengatur tata letak:
Properti |
Fungsi |
---|---|
`float` |
Untuk mengapungkan elemen ke kiri atau kanan |
`display` |
Untuk mengatur jenis tampilan elemen, seperti block, inline, atau inline-block |
`position` |
Untuk mengatur posisi elemen, seperti static, relative, absolute, atau fixed |
Membangun Elemen Web: Tombol, Input Teks, dan Daftar
Sekarang kita sudah memiliki pemahaman dasar tentang HTML dan CSS, saatnya untuk membangun elemen web yang lebih kompleks. Bayangkan kamu membangun rumah, setelah kerangka dan estetika selesai, kamu akan menambahkan pintu, jendela, dan furnitur lainnya untuk melengkapi rumah tersebut. Begitu pula dengan web, kita akan menambahkan elemen web seperti tombol, input teks, dan daftar untuk membuat web kita lebih interaktif.
Membuat Tombol, Input Teks, dan Daftar
Kita bisa membuat tombol, input teks, dan daftar menggunakan HTML dan CSS. Berikut adalah contoh kode HTML untuk membuat tombol, input teks, dan daftar:
<button>Klik Saya</button>
<input type="text" placeholder="Masukkan teks">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Kita bisa menggunakan CSS untuk mengatur gaya tombol, input teks, dan daftar. Sebagai contoh, kita bisa mengubah warna latar belakang tombol menjadi hijau, warna teks menjadi putih, dan menambahkan padding:
button
background-color: green;
color: white;
padding: 10px 20px;
Membuat Formulir Sederhana
Kita juga bisa membuat formulir sederhana menggunakan HTML dan CSS. Berikut adalah contoh kode HTML untuk membuat formulir sederhana:
<form>
<label for="nama">Nama:</label>
<input type="text" id="nama" name="nama">
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<br>
<input type="submit" value="Kirim">
</form>
Kita bisa menggunakan CSS untuk mengatur gaya formulir, seperti warna latar belakang, warna teks, dan margin:
form
background-color: #f2f2f2;
padding: 20px;
margin: 20px;
Mengatur Gaya Elemen Web
Kita bisa menggunakan CSS untuk mengatur gaya elemen web, seperti warna, font, dan ukuran. Sebagai contoh, kita bisa mengubah warna latar belakang tombol menjadi biru, warna teks menjadi putih, dan ukuran font menjadi 16px:
button
background-color: blue;
color: white;
font-size: 16px;
Tutorial Membuat Website Sederhana dengan HTML dan CSS