Pemrograma
n Web
HTML Dasar
Apa Itu Web Development?
Web Development adalah proses membuat website
atau aplikasi yang bisa diakses lewat internet.
Contohnya: Instagram Web, Tokopedia, YouTube. Bagaimana Web Bekerja di Browser?
Ada 2 bagian: [Link] alamat website di browser (misalnya
•Frontend: Tampilan yang dilihat pengguna (HTML, CSS, [Link]).
JavaScript). [Link] cari alamat server lewat DNS.
•Backend: Bagian di balik layar, mengatur data & logika [Link] minta data ke server (pakai HTTP).
(contohnya pakai [Link], Express). [Link] kirim file HTML, CSS, JS ke browser.
[Link] tampilkan halaman dan jalankan
kode agar web bisa di-klik & digunakan.
Alur Belajar Web Development 3. Bootstrap (Framework CSS)
•Pelajari: Cara menggunakan class Bootstrap
1. HTML (Struktur Web)
•Pelajari: Tag dasar (<h1>, <p>, <img>, <a>, <form>, dll) •Komponen penting: Button, Card, Navbar, Grid System, Form
•Tujuan: Bisa membuat kerangka halaman web. •Tujuan: Styling cepat dan responsive tanpa menulis CSS dari nol.
2. CSS (Tampilan Web) 4. JavaScript (Interaktivitas Web)
•Pelajari: Selektor, warna, margin, padding, layout •Pelajari: Variabel, kondisi, perulangan, function
(flexbox, grid) •Fokus: DOM Manipulation, Event (klik, input), Validasi Form
•Tujuan: Mengubah tampilan halaman agar menarik. •Tujuan: Membuat web jadi dinamis dan interaktif.
1. Pengenalan HTML
HTML (HyperText Markup Language) adalah bahasa markup yang digunakan untuk membuat
halaman web. HTML digunakan untuk menentukan struktur dasar dari sebuah halaman web.
HTML bekerja dengan menggunakan elemen-elemen yang didefinisikan oleh tag untuk
menampilkan berbagai jenis konten seperti teks, gambar, dan video.
Struktur Dasar HTML Bentuk Tag HTML
Setiap halaman HTML memiliki struktur dasar <element attribute = “value”>
seperti berikut:
Keterangan:
<!DOCTYPE html>
<html>
Element = nama tag
<head> Attribute = atribut dari tag
<title>Judul Halaman</title> Value = nilai dari atribut
</head>
<body> Contoh:
<h1>Selamat Datang di Website Saya</h1>
<p>Ini adalah contoh paragraf pertama.</p>
<body bgcolor = “blue” >
</body>
</html> Element Attribute Value
2. Elemen Dasar HTML
Elemen Teks
Elemen-elemen ini digunakan untuk menampilkan teks dalam berbagai format:
•<h1> hingga <h6>: Heading atau judul.
•<p>: Paragraf.
•<b>: Bold (tebal).
•<i>: Italic (miring).
•<u>: Underline (garis bawah).
Contoh penggunaan elemen teks:
<h1>Judul Utama</h1>
<p><b>Ini adalah teks tebal</b> dan <i>ini adalah teks miring</i>.</p>
Elemen Gambar dan Hyperlink
•<img src="[Link]" alt="Deskripsi gambar"> untuk menampilkan gambar.
•<a href="[Link] di sini</a> untuk menambahkan hyperlink.
Contoh penggunaan gambar dan hyperlink:
<img src ="[Link]" alt="Logo Perusahaan" width="200">
<p>Kunjungi website kami di <a href="[Link]
Daftar dan Tabel Contoh pembuatan daftar:
• <ul> untuk daftar tidak berurutan (bullet list). <ul>
• <ol> untuk daftar berurutan (numbered list). <li>Item 1</li>
• <table> untuk membuat tabel dengan <tr> (baris), <li>Item 2</li>
</ul>
<th> (header), dan <td> (kolom). <ol>
Contoh pembuatan tabel: <li>Langkah 1</li>
<li>Langkah 2</li>
<table border="1"> </ol>
<tr>
<th>Nama</th>
<th>Usia</th>
</tr>
<tr>
<td>Ali</td> 3. Formulir HTML
<td>25</td> Menggunakan <form> untuk input data:
</tr>
</table> <form action="[Link]" method="POST">
Nama: <input type="text" name="nama“><br>
Email: <input type="email" name="email“><br>
<input type="submit" value="Kirim">
</form>
Pemrograma
n Web
HTML Lanjutan
4. HTML5 dan Elemen Semantik
Elemen Semantik
HTML5 memperkenalkan elemen semantik untuk
struktur yang lebih jelas:
• <header>: Bagian atas halaman. Contoh penggunaan elemen semantik:
• <nav>: Menu navigasi. <header>
<h1>Judul Website</h1>
• <section>: Seksi dalam halaman. </header>
<nav>
• <article>: Konten artikel. <a href="#">Home</a> | <a href="#">Kontak</a>
</nav>
• <footer>: Bagian bawah halaman.
<section>
<article>
<h2>Artikel Pertama</h2>
<p>Isi artikel.</p>
</article>
</section>
<footer>
<p>© 2024 Nama Anda</p>
</footer>
5. Media dalam HTML5
Audio dan Video
Menambahkan media ke dalam halaman web:
<audio controls> 6. Formulir Lanjutan dan Validasi
<source src="audio.mp3" type="audio/mpeg"> Input HTML5
</audio>
HTML5 mendukung berbagai input baru:
<video controls> •<input type="date"> untuk memilih tanggal.
<source src="video.mp4" type="video/mp4"> •<input type="range"> untuk slider angka.
</video> •<input type="number"> untuk angka.
Validasi Form
<input type="email" required>
7. Canvas dan SVG untuk Grafis <input type="password" minlength="6">
Menggambar dengan Canvas
<canvas id="myCanvas" width="200" height="100“></canvas>
Menggunakan SVG untuk Grafik Vektor
<svg width= "100" height= "100“ >
<circle cx="50" cy="50" r="40" fill="blue" />
</svg>
Studi Kasus untuk HTML Dasar
Judul: Membuat Halaman Profil Pribadi Sederhana
Deskripsi:
Buatlah halaman web sederhana yang menampilkan profil pribadi Anda. Halaman ini harus mencakup
nama, foto, deskripsi singkat, dan tautan ke media sosial Anda.
Kebutuhan:
[Link] elemen dasar HTML seperti <html>, <head>, <body>.
[Link] heading untuk nama Anda (menggunakan <h1>).
[Link] paragraf (<p>) untuk deskripsi singkat.
[Link] elemen <img> untuk menampilkan foto.
[Link] elemen <a> untuk membuat tautan ke media sosial.
Kesimpulan
Dengan memahami HTML dasar dan lanjutan, Anda dapat membuat halaman web yang lebih interaktif
dan dinamis. HTML5 memberikan banyak fitur baru yang memudahkan pembuatan web modern.
Dengan berbagai elemen yang telah dipelajari, Anda dapat membangun website yang lebih terstruktur,
interaktif, dan menarik bagi pengguna.