Belajar Dasar HTML dan CSS dari Nol
Pemrograman web dimulai dengan dua komponen utama: HTML (HyperText Markup Language) untuk struktur halaman dan CSS (Cascading Style Sheets) untuk tampilan visualnya. Dalam materi ini, kita akan mempelajari konsep dasar HTML dan CSS dengan lebih mendalam.
Belajar dasar HTML dan CSS sangat penting bagi pemula yang ingin memahami cara membangun website. Dalam panduan ini, kita akan membahas struktur HTML, sintaks CSS, serta cara menggunakannya untuk membuat tampilan web yang menarik.
1. Pengenalan HTML
HTML adalah bahasa markup yang digunakan untuk menyusun konten dalam halaman web. HTML terdiri dari elemen-elemen yang dibungkus dalam tag.
Struktur Dasar HTML
Setiap dokumen HTML memiliki struktur dasar seperti berikut:
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <head> <title>Judul Halaman</title> </head> <body> <h1>Halo, Mbak F!</h1> <p>Ini adalah paragraf pertama Agam Yogi.</p> </body> </html> |
Elemen HTML Dasar & Contoh Penggunaannya
- Heading (
<h1>–<h6>) → Menampilkan judul.
|
1 2 3 4 5 6 |
<h1>Judul Utama</h1><!--Ini Heading --> <h2>Sub Judul</h2><!--Ini Heading --> <h3>Ini Heading 03</h3> <h4>Ini Heading 04 </h4> <h5>Ini Heading 05</h5> <h6>Ini Heading 06</h6> |
- Paragraf (
<p>) → Menampilkan teks biasa.
|
1 |
<p>Ini Paragraf Saya</p> |
- Gambar (
<img>) → Menampilkan gambar.
|
1 2 |
<img src="gambar.jpg" alt="Deskripsi gambar"> <img src="https://cdns.klimg.com/bola.net/resized/810x540/library/upload/21/2023/03/996x664/liverpool_21c39ef.jpg" alt="Deskripsi gambar"> |
- Link (
<a>) → Membuat hyperlink.
|
1 |
<a href="https://www.zawata.co.id/">Kunjungi Zawata</a> |
- Tabel (
<table>) → Menampilkan data dalam bentuk tabel.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<table border="1"> <tr> <th rowspan="2">Nama</th>//Ini ke bawah <th colspan="2">Informasi</th>//Ini ke samping </tr> <tr> <th>Usia</th> <th>Kota</th> </tr> <tr> <td>Ani</td> <td>20</td> <td>Jakarta</td> </tr> <tr> <td>Budi</td> <td>25</td> <td>Bandung</td> </tr> </table> |
- Form (
<form>) → Mengumpulkan input dari pengguna.
|
1 2 3 4 5 |
<form action="proses.php" method="post"> <label>Nama:</label> <input type="text" name="nama"> <input type="submit" value="Kirim"> </form> |
Kamu bisa dapat mempelajarin lebih lanjut ke w3school
2. Pengenalan CSS
CSS (Cascading Style Sheets) adalah bahasa yang digunakan untuk mengatur tampilan dan desain elemen-elemen dalam halaman web yang dibuat dengan HTML.
berikut cotoh tampilanya
Fungsi CSS
-
Mengubah Tampilan: Mengatur warna, font, ukuran teks, dan lainnya.
-
Membuat Layout: Mengatur posisi elemen menggunakan Grid, Flexbox, dan lainnya.
-
Responsivitas: Menyesuaikan tampilan pada berbagai perangkat seperti komputer, tablet, dan ponsel.
Cara Menyisipkan CSS
Inline CSS (di dalam tag HTML secara langsung).
|
1 |
<p style="color: red; font-size: 20px;">Teks ini berwarna merah.</p> |
Internal CSS (di dalam <style> di <head>).
|
1 2 3 4 5 6 |
<style> p { color: blue; font-size: 18px; } </style> |
External CSS (menggunakan file .css terpisah).
|
1 |
<link rel="stylesheet" href="style.css"> |
Contoh isi file style.css:
|
1 2 3 4 5 6 7 8 |
body { background-color: #f4f4f4; font-family: Arial, sans-serif; } p { color: green; font-size: 16px; } |
Properti CSS Dasar & Contoh Penggunaannya
- Warna: Mengatur warna teks dan latar belakang.
|
1 2 3 4 5 6 |
body { background-color: lightgray; /*backgouncd jadi lightgray*/ } h1 { color: blue; /*warna tulisan jadi biru*/ } |
- Teks: Mengatur ukuran dan jenis font.
|
1 2 3 4 5 |
p { font-size: 18px; /*Ukuran font*/ font-family: Arial, sans-serif;/*Jenis font*/ text-align: center;/*Pengaturan teks menjadi tengahh*/ } |
- Border: Mengatur garis pinggir elemen.
|
1 2 3 4 |
div { border: 2px solid black; padding: 10px; } |
- Padding & Margin: Mengatur jarak elemen.
|
1 2 3 4 |
div { margin: 20px; padding: 15px; } |
Kesimpulan:
-
Padding: Menambah ruang di dalam elemen.
-
Margin: Menambah ruang di luar elemen.
CSS Grid & Flexbox
- CSS Grid
CSS Grid adalah metode yang digunakan untuk mengatur tata letak halaman dengan lebih fleksibel. Selain itu, sistem ini memungkinkan kita untuk membagi halaman menjadi beberapa area tanpa harus menggunakan banyak elemen div tambahan. Dengan demikian, pengelolaan tata letak menjadi lebih sederhana dan efisien.
Contoh CSS Grid Sederhana:
|
1 2 3 4 5 6 7 8 9 10 |
.grid-container { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; } .grid-item { background: lightblue; padding: 20px; text-align: center; } |
html
|
1 2 3 4 5 |
<div class="grid-container"> <div class="grid-item">1</div> <div class="grid-item">2</div> <div class="grid-item">3</div> </div> |
- CSS Flexbox
Flexbox berguna untuk mengatur elemen dalam satu baris atau kolom.
Contoh Flexbox:
|
1 2 3 4 5 6 7 8 9 10 11 |
.flex-container { display: flex; justify-content: center; align-items: center; gap: 10px; } .flex-item { background: lightcoral; padding: 20px; text-align: center; } |
|
1 2 3 4 |
<div class="flex-container"> <div class="flex-item">A</div> <div class="flex-item">B</div> </div> |
Jika kamu mau belajar lebih bisa ke w3school dan dokumentasi css
Dengan memahami CSS Grid dan Flexbox, kita dapat membuat tata letak yang lebih fleksibel dan responsif seperti zawata! 🚀
Tugas
- Buatlah cv diri sendiri atau personal branding mengunakan html dan css jangan lupa push github
