Scribd
Unggah
3 tayangan32 halaman

Belajar Web Dasar (HTML, CSS, JavaScript, DOM)

Modul ini mengajarkan dasar-dasar pengembangan web menggunakan HTML, CSS, dan JavaScript, serta manipulasi DOM. Tujuan pembelajaran mencakup pembuatan struktur halaman web, desain tampilan, dan pengembangan aplikasi web interaktif. Materi mencakup pengantar HTML5, elemen semantik, serta dasar-dasar CSS untuk styling dan layout.

Diunggah oleh

M Rafa Hendriadi
Hak Cipta
© All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
3 tayangan32 halaman

Belajar Web Dasar (HTML, CSS, JavaScript, DOM)

Modul ini mengajarkan dasar-dasar pengembangan web menggunakan HTML, CSS, dan JavaScript, serta manipulasi DOM. Tujuan pembelajaran mencakup pembuatan struktur halaman web, desain tampilan, dan pengembangan aplikasi web interaktif. Materi mencakup pengantar HTML5, elemen semantik, serta dasar-dasar CSS untuk styling dan layout.

Diunggah oleh

M Rafa Hendriadi
Hak Cipta
© All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd

Belajar Web Dasar (HTML, CSS, JavaScript, DOM) Hal.

Pengantar
Modul ajar ini dirancang untuk pengembangan web dasar menggunakan HTML, CSS, dan JavaScript, hingga
manipulasi DOM. Pemahaman yang kuat terhadap materi dalam modul ini akan menjadi fondasi esensial
sebelum Anda melangkah lebih jauh ke pengembangan web sisi server menggunakan bahasa seperti PHP dan
interaksi dengan database seperti MySQL, karena semua data yang diproses di backend pada akhirnya akan
ditampilkan dan dimanipulasi di sisi klien melalui teknologi yang dibahas di sini. Modul ini akan membimbing
Anda melalui 6 sesi praktikum yang berfokus pada konsep-konsep inti dan praktik dalam membangun
antarmuka web interaktif. Semoga modul ini bermanfaat bagi Anda dalam mempelajari pengembangan web
dasar. Selamat belajar dan bereksperimen!

Tujuan Pembelajaran
Setelah menyelesaikan modul ini, mahasiswa diharapkan mampu:

Membangun struktur halaman web menggunakan HTML semantik.


Mendesain tampilan halaman web menggunakan CSS, termasuk responsivitas.
Mengimplementasikan logika interaktif pada halaman web menggunakan JavaScript.
Memanipulasi elemen-elemen HTML dan CSS secara dinamis menggunakan Document Object Model
(DOM).
Mengembangkan aplikasi web sederhana yang interaktif dan responsif.

HTML5 CSS3 JavaScript

📥 Akses & Download File


File PDF ini juga tersedia secara online dan dapat diakses atau didownload langsung melalui repositori GitHub
:
👉 [Link]

Di repositori tersebut tersedia semua modul dalam format Markdown (.md) dan juga PDF (.pdf), sehingga
bisa dipelajari secara offline maupun online.

Halaman 1 / 32 Belajar, Berbagi, Berkarya Abdul Yamin, [Link]., [Link]


Belajar Web Dasar (HTML, CSS, JavaScript, DOM) Hal. 2

Bagian 1: Pengantar HTML (Struktur dan Semantik)

Tujuan Pembelajaran

Pada akhir pembahasan ini, mahasiswa diharapkan mampu:

1. Memahami struktur dasar dokumen HTML5.


2. Menggunakan elemen-elemen HTML semantik untuk membangun kerangka halaman web.
3. Membuat tautan dan menyisipkan gambar.
4. Membuat daftar dan tabel dasar.
5. Memahami pentingnya validasi HTML.

Materi

HTML (HyperText Markup Language) adalah bahasa markup standar untuk membuat halaman web. HTML
mendefinisikan struktur dan konten halaman web. HTML5 adalah versi terbaru dari HTML yang
memperkenalkan banyak fitur baru untuk multimedia, grafis, dan semantik.

1. Struktur Dasar Dokumen HTML5

Setiap dokumen HTML5 dimulai dengan deklarasi <!DOCTYPE html> dan elemen <html> . Di dalamnya
terdapat elemen <head> (untuk metadata) dan <body> (untuk konten yang terlihat oleh pengguna).

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Judul Halaman Saya</title>
</head>
<body>
<h1>Selamat Datang di Halaman Web Saya</h1>
<p>Ini adalah paragraf pertama.</p>
</body>
</html>

2. Elemen HTML Semantik

HTML5 memperkenalkan elemen semantik yang memberikan makna pada struktur konten, bukan hanya
presentasi. Ini membantu mesin pencari dan teknologi asistif memahami halaman Anda dengan lebih baik.

Halaman 2 / 32 Belajar, Berbagi, Berkarya Abdul Yamin, [Link]., [Link]


Belajar Web Dasar (HTML, CSS, JavaScript, DOM) Hal. 3

Contoh elemen semantik:

<header> : Bagian pengantar atau navigasi.


<nav> : Bagian navigasi.
<main> : Konten utama dokumen.
<article> : Konten mandiri yang dapat didistribusikan secara independen (misalnya, posting blog).
<section> : Bagian tematik dari dokumen.
<aside> : Konten yang terkait secara tidak langsung dengan konten utama (misalnya, sidebar).
<footer> : Bagian kaki halaman.

3. Tautan dan Gambar

Tautan ( <a> ): Digunakan untuk menghubungkan satu halaman web ke halaman lain atau sumber
daya eksternal.

<a href="[Link] Google</a>


<a href="[Link]">Pergi ke Halaman Lain</a>

Gambar ( <img> ): Digunakan untuk menyisipkan gambar ke dalam halaman web. Atribut src
menentukan lokasi gambar, dan alt menyediakan teks alternatif untuk aksesibilitas.

<img src="[Link]" alt="Deskripsi Gambar">

4. Daftar ( <ul> , <ol> , <li> )

Daftar Tak Berurut ( <ul> ): Item daftar ditandai dengan bullet point.

<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>

Halaman 3 / 32 Belajar, Berbagi, Berkarya Abdul Yamin, [Link]., [Link]


Belajar Web Dasar (HTML, CSS, JavaScript, DOM) Hal. 4

Daftar Berurut ( <ol> ): Item daftar ditandai dengan angka atau huruf.

<ol>
<li>Langkah 1</li>
<li>Langkah 2</li>
</ol>

5. Tabel ( <table> , <thead> , <tbody> , <tr> , <th> , <td> )

Digunakan untuk menampilkan data dalam format baris dan kolom.

<table>
<thead>
<tr>
<th>Nama</th>
<th>Usia</th>
</tr>
</thead>
<tbody>
<tr>
<td>Yamin</td>
<td>20</td>
</tr>
<tr>
<td>Ani</td>
<td>22</td>
</tr>
</tbody>
</table>

Pembahasan

HTML adalah fondasi dari setiap halaman web. Memahami struktur dasar dan penggunaan elemen semantik
sangat penting untuk membangun halaman yang mudah diakses, diindeks oleh mesin pencari, dan mudah
dipelihara. Praktikum ini akan fokus pada penerapan elemen-elemen dasar HTML untuk membuat kerangka
halaman web yang solid.

Halaman 4 / 32 Belajar, Berbagi, Berkarya Abdul Yamin, [Link]., [Link]


Belajar Web Dasar (HTML, CSS, JavaScript, DOM) Hal. 5

Contoh Kode

Berikut adalah contoh kode HTML lengkap untuk sebuah halaman profil sederhana:

<!DOCTYPE html>
<html lang="id">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Profil Saya</title>
</head>

<body>
<header>
<h1>Profil Singkat</h1>
<nav>
<ul>
<li><a href="#tentang">Tentang Saya</a></li>
<li><a href="#pendidikan">Pendidikan</a></li>
<li><a href="#kontak">Kontak</a></li>
</ul>
</nav>
</header>

<main>
<section id="tentang">
<h2>Tentang Saya</h2>
<p>Halo, nama saya [Nama Anda]. Saya adalah seorang mahasiswa yang tertar
<img src="[Link] alt="Foto Profil">
</section>

<section id="pendidikan">
<h2>Pendidikan</h2>
<table>
<thead>
<tr>
<th>Institusi</th>
<th>Jurusan</th>
<th>Tahun</th>
</tr>

Halaman 5 / 32 Belajar, Berbagi, Berkarya Abdul Yamin, [Link]., [Link]


Belajar Web Dasar (HTML, CSS, JavaScript, DOM) Hal. 6

</thead>
<tbody>
<tr>
<td>Universitas XYZ</td>
<td>Teknik Informatika</td>
<td>2022 - Sekarang</td>
</tr>
</tbody>
</table>
</section>

<section id="kontak">
<h2>Kontak</h2>
<ul>
<li>Email: <a href="[Link]
<li>LinkedIn: <a href="#">[Profil LinkedIn Anda]</a></li>
</ul>
</section>
</main>

<footer>
<p>&copy; 2025 [Nama Anda]. Hak Cipta Dilindungi.</p>
</footer>
</body>

</html>

Kode HTM diatas jika dijalankan akan mengahasilkan tampilan seperti berikut :

Halaman 6 / 32 Belajar, Berbagi, Berkarya Abdul Yamin, [Link]., [Link]


Belajar Web Dasar (HTML, CSS, JavaScript, DOM) Hal. 7

PRAKTIKUM 1 HTML

Langkah-langkah Praktikum

1. Buat folder baru di komputer Anda dengan nama NIM_NAMA_PRAKTIKUM_HTML , lalu buat sub folder
baru dengan nama Web Profil .
2. Di dalam folder Web Profil tersebut, buat file baru bernama [Link] .
3. Buka [Link] dengan editor teks VS Code.
4. Salin dan tempel kode contoh di atas ke dalam [Link] .
5. Ganti placeholder [Nama Anda] , nama@[Link] , dan [Profil LinkedIn Anda] dengan
informasi Anda sendiri.
6. Ganti URL gambar [Link] dengan URL gambar Anda sendiri atau biarkan
untuk sementara.
7. Simpan file [Link] .
8. Buka file [Link] di browser web Anda untuk melihat hasilnya.
9. Eksplorasi:
Tambahkan paragraf baru di bagian Tentang Saya .
Tambahkan baris baru ke tabel Pendidikan .
Buat daftar tak berurut baru di bagian Kontak untuk menambahkan media sosial lain.

Halaman 7 / 32 Belajar, Berbagi, Berkarya Abdul Yamin, [Link]., [Link]


Belajar Web Dasar (HTML, CSS, JavaScript, DOM) Hal. 8

TUGAS 1 HTML

Buatlah halaman web sederhana yang berisi:

1. Informasi pribadi Anda (nama, hobi, minat).


2. Daftar 3-5 hobi atau minat Anda menggunakan daftar tak berurut.
3. Tabel sederhana yang berisi riwayat pendidikan atau pengalaman kerja (minimal 3 baris).
4. Gambar yang relevan dengan salah satu hobi atau minat Anda.
5. Tautan ke profil media sosial Anda atau situs web favorit.
6. Pastikan menggunakan elemen semantik HTML5 yang sesuai ( <header> , <main> , <section> ,
<footer> , dll.).

Kumpulkan file [Link] Anda.

Halaman 8 / 32 Belajar, Berbagi, Berkarya Abdul Yamin, [Link]., [Link]


Belajar Web Dasar (HTML, CSS, JavaScript, DOM) Hal. 9

Bagian 2: Dasar CSS (Styling dan Layout)

Tujuan Pembelajaran

Pada akhir pembahasan ini, mahasiswa diharapkan mampu:

1. Memahami konsep dasar CSS (Cascading Style Sheets).


2. Menggunakan berbagai cara untuk menyisipkan CSS ke dalam dokumen HTML.
3. Memilih elemen HTML menggunakan selektor CSS dasar (tipe, kelas, ID).
4. Menerapkan properti CSS untuk mengatur warna, font, ukuran, dan spasi.
5. Memahami model kotak (box model) CSS.
6. Membuat layout sederhana menggunakan Flexbox atau Grid.

Materi

CSS (Cascading Style Sheets) adalah bahasa stylesheet yang digunakan untuk mendeskripsikan presentasi
dokumen yang ditulis dalam HTML atau XML. CSS memungkinkan Anda mengontrol tampilan halaman web,
seperti warna, font, layout, dan responsivitas.

1. Cara Menyisipkan CSS

Ada tiga cara utama untuk menyisipkan CSS ke dalam dokumen HTML:

Inline Style: Langsung pada elemen HTML menggunakan atribut style . (Tidak disarankan untuk
proyek besar)

<p style="color: blue; font-size: 16px;">Teks berwarna biru.</p>

Internal Style Sheet: Di dalam elemen <style> di bagian <head> dokumen HTML.

<head>
<style>
h1 {
color: green;
}
</style>
</head>

Halaman 9 / 32 Belajar, Berbagi, Berkarya Abdul Yamin, [Link]., [Link]


Belajar Web Dasar (HTML, CSS, JavaScript, DOM) Hal. 10

External Style Sheet: File .css terpisah yang dihubungkan ke dokumen HTML menggunakan
elemen <link> di bagian <head> . (Paling disarankan)

<head>
<link rel="stylesheet" href="[Link]">
</head>

2. Selektor CSS Dasar

Selektor digunakan untuk "menemukan" (atau memilih) elemen HTML yang ingin Anda gayakan.

Selektor Tipe/Elemen: Memilih semua elemen dengan nama tag tertentu.

p {
color: black;
}

Selektor Kelas ( . ): Memilih elemen dengan atribut class tertentu.

<p class="highlight">Teks penting.</p>

.highlight {
background-color: yellow;
}

Selektor ID ( # ): Memilih elemen dengan atribut id tertentu. ID harus unik dalam satu halaman.

<div id="header">Ini adalah header.</div>

Halaman 10 / 32 Belajar, Berbagi, Berkarya Abdul Yamin, [Link]., [Link]


Belajar Web Dasar (HTML, CSS, JavaScript, DOM) Hal. 11

#header {
border: 1px solid red;
}

3. Properti CSS Umum

Warna: color (teks), background-color (latar belakang).


Font: font-family , font-size , font-weight , font-style .
Teks: text-align , text-decoration , line-height .
Ukuran: width , height .
Spasi: margin (spasi luar), padding (spasi dalam).
Border: border (ketebalan, gaya, warna).

4. Box Model CSS

Setiap elemen HTML dianggap sebagai kotak. Box model terdiri dari:

Content: Konten aktual elemen (teks, gambar).


Padding: Ruang di antara konten dan border.
Border: Garis di sekitar padding dan konten.
Margin: Ruang di luar border, memisahkan elemen dari elemen lain.

+-----------------------+
| Margin |
| +-----------------+ |
| | Border | |
| | +-----------+ | |
| | | Padding | | |
| | | +-------+ | | |
| | | |Content| | | |
| | | +-------+ | | |
| | | | | |
| | +-----------+ | |
| +-----------------+ |
+-----------------------+

Halaman 11 / 32 Belajar, Berbagi, Berkarya Abdul Yamin, [Link]., [Link]


Belajar Web Dasar (HTML, CSS, JavaScript, DOM) Hal. 12

5. Layout dengan Flexbox

Flexbox (Flexible Box Layout) adalah modul layout satu dimensi yang dirancang untuk mendistribusikan ruang
di antara item-item dalam sebuah kontainer, bahkan ketika ukurannya tidak diketahui atau dinamis.

Untuk mengaktifkan Flexbox, atur display: flex; pada kontainer induk.


Properti umum Flexbox: justify-content , align-items , flex-direction , flex-wrap .

Pembahasan

CSS adalah kunci untuk membuat halaman web terlihat menarik dan profesional. Dengan menguasai selektor
dan properti dasar, serta memahami box model, mahasiswa dapat mulai mendesain layout yang kompleks.
Penggunaan external style sheet adalah praktik terbaik untuk menjaga kode tetap rapi dan mudah dikelola.
Flexbox akan menjadi alat utama untuk mengatur tata letak elemen secara efisien.

Contoh Kode

Berikut adalah contoh kode HTML dan CSS untuk halaman profil yang dipercantik:

[Link]

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Profil Saya - Dengan CSS</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<header>
<h1>Profil Singkat</h1>
<nav>
<ul>
<li><a href="#tentang">Tentang Saya</a></li>
<li><a href="#pendidikan">Pendidikan</a></li>
<li><a href="#kontak">Kontak</a></li>
</ul>
</nav>
</header>

<main>
<section id="tentang">

Halaman 12 / 32 Belajar, Berbagi, Berkarya Abdul Yamin, [Link]., [Link]


Belajar Web Dasar (HTML, CSS, JavaScript, DOM) Hal. 13

<h2>Tentang Saya</h2>
<p>Halo, nama saya [Nama Anda]. Saya adalah seorang mahasiswa yang tertar
<img src="[Link] alt="Foto Profil">
</section>

<section id="pendidikan">
<h2>Pendidikan</h2>
<table>
<thead>
<tr>
<th>Institusi</th>
<th>Jurusan</th>
<th>Tahun</th>
</tr>
</thead>
<tbody>
<tr>
<td>Universitas XYZ</td>
<td>Teknik Informatika</td>
<td>2022 - Sekarang</td>
</tr>
</tbody>
</table>
</section>

<section id="kontak">
<h2>Kontak</h2>
<ul>
<li>Email: <a href="[Link]
<li>LinkedIn: <a href="#">[Profil LinkedIn Anda]</a></li>
</ul>
</section>
</main>

<footer>
<p>&copy; 2025 [Nama Anda]. Hak Cipta Dilindungi.</p>
</footer>
</body>
</html>

Halaman 13 / 32 Belajar, Berbagi, Berkarya Abdul Yamin, [Link]., [Link]


Belajar Web Dasar (HTML, CSS, JavaScript, DOM) Hal. 14

[Link]

body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
color: #333;
}
header {
background-color: #333;
color: #fff;
padding: 1rem 0;
text-align: center;
}
header h1 {
margin: 0;
}

nav ul {
list-style: none;
padding: 0;
display: flex;
justify-content: center;
}
nav ul li {
margin: 0 15px;
}

nav ul li a {
color: #fff;
text-decoration: none;
}
main {
padding: 20px;
max-width: 800px;
margin: 20px auto;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
section {

Halaman 14 / 32 Belajar, Berbagi, Berkarya Abdul Yamin, [Link]., [Link]


Belajar Web Dasar (HTML, CSS, JavaScript, DOM) Hal. 15

margin-bottom: 20px;
padding: 15px;
border: 1px solid #ddd;
border-radius: 5px;
}

img {
max-width: 100%;
height: auto;
display: block;
margin: 10px 0;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
}

table, th, td {
border: 1px solid #ddd;
}
th, td {
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
footer {
text-align: center;
padding: 20px;
background-color: #333;
color: #fff;
position: relative;
bottom: 0;
width: 100%;
}

Halaman 15 / 32 Belajar, Berbagi, Berkarya Abdul Yamin, [Link]., [Link]


Belajar Web Dasar (HTML, CSS, JavaScript, DOM) Hal. 16

PRAKTIKUM 2 CSS

Langkah-langkah Praktikum

1. Buat folder baru dengan NIM_NAMA_PRAKTIKUM_CSS .


2. Di dalam folder NIM_NAMA_PRAKTIKUM_CSS buat file baru bernama [Link] .
3. Buka [Link] dengan editor teks Anda dan salin/tempel kode CSS di atas ke dalamnya.
4. Buka [Link] Anda dari Pertemuan 1.
5. Tambahkan baris <link rel="stylesheet" href="[Link]"> di dalam elemen <head>
[Link] Anda, di bawah elemen <title> .
6. Simpan kedua file.
7. Buka [Link] di browser Anda dan amati perubahan tampilannya.
8. Eksplorasi:
Ubah warna latar belakang body menjadi warna lain.
Ubah font-family untuk body .
Tambahkan border-radius pada gambar profil Anda.
Eksperimen dengan margin dan padding pada elemen section .
Coba ubah justify-content pada nav ul menjadi space-around atau flex-start .

TUGAS 2 CSS

Perbaiki tampilan halaman web pribadi Anda dari Penugasan Pertemuan 1 menggunakan CSS:

1. Buat file [Link] terpisah dan tautkan ke [Link] Anda.


2. Terapkan gaya dasar untuk body , header , main , section , dan footer (misalnya, warna
latar belakang, font, padding).
3. Gunakan Flexbox untuk mengatur tata letak navigasi atau bagian lain di halaman Anda.
4. Berikan gaya pada tabel dan daftar agar lebih mudah dibaca.
5. Pastikan gambar Anda memiliki ukuran yang responsif (misalnya, max-width: 100%; height: auto; ).
6. Kumpulkan file [Link] dan [Link] Anda.

Halaman 16 / 32 Belajar, Berbagi, Berkarya Abdul Yamin, [Link]., [Link]


Belajar Web Dasar (HTML, CSS, JavaScript, DOM) Hal. 17

Bagian 3: Pengenalan DOM (Document Object Model) dan


Manipulasi Dasar

Tujuan Pembelajaran

Pada akhir pembahasan ini, mahasiswa diharapkan mampu:

1. Memahami apa itu DOM dan perannya dalam pengembangan web interaktif.
2. Mengakses elemen HTML menggunakan berbagai metode seleksi DOM.
3. Memanipulasi konten teks dan atribut elemen HTML.
4. Mengubah gaya (CSS) elemen secara dinamis menggunakan JavaScript.
5. Membuat dan menghapus elemen HTML baru.

Materi

DOM (Document Object Model) adalah antarmuka pemrograman untuk dokumen HTML dan XML. Ini
merepresentasikan halaman web sebagai struktur pohon (tree structure) di mana setiap node adalah bagian
dari dokumen (elemen, atribut, teks, dll.). JavaScript dapat menggunakan DOM untuk mengakses dan
memanipulasi struktur, konten, dan gaya halaman web secara dinamis.

1. Apa itu DOM?

Bayangkan halaman HTML Anda sebagai sebuah pohon keluarga. Setiap tag HTML (seperti <html> ,
<body> , <p> , <div> ) adalah anggota keluarga (node). Hubungan antara tag-tag ini (induk, anak,
saudara) membentuk struktur pohon. DOM adalah cara JavaScript untuk "berbicara" dengan pohon ini,
memungkinkan kita untuk:

Menemukan elemen HTML.


Mengubah konten HTML.
Mengubah gaya CSS.
Menambah atau menghapus elemen HTML.
Bereaksi terhadap peristiwa (events) pengguna.

2. Mengakses Elemen HTML (Seleksi DOM)

Ada beberapa metode untuk memilih elemen dari DOM:

[Link]('id') : Memilih elemen berdasarkan atribut id yang unik.

const judul = [Link]('main-title');


[Link]([Link]); // Mengambil teks konten

Halaman 17 / 32 Belajar, Berbagi, Berkarya Abdul Yamin, [Link]., [Link]


Belajar Web Dasar (HTML, CSS, JavaScript, DOM) Hal. 18

[Link]('class') : Memilih semua elemen dengan nama kelas tertentu.


Mengembalikan HTMLCollection (mirip array).

const itemDaftar = [Link]('list-item');


for (let i = 0; i < [Link]; i++) {
[Link](itemDaftar[i].textContent);
}

[Link]('tagname') : Memilih semua elemen dengan nama tag tertentu.


Mengembalikan HTMLCollection.

const semuaParagraf = [Link]('p');

[Link]('selector') : Memilih elemen pertama yang cocok dengan selektor CSS


yang diberikan. (Paling sering digunakan)

const pertamaParagraf = [Link]('p');


const elemenDenganKelas = [Link]('.highlight');

[Link]('selector') : Memilih semua elemen yang cocok dengan selektor CSS


yang diberikan. Mengembalikan NodeList (mirip array).

const semuaLink = [Link]('a');


[Link](link => {
[Link]([Link]);
});

Halaman 18 / 32 Belajar, Berbagi, Berkarya Abdul Yamin, [Link]., [Link]


Belajar Web Dasar (HTML, CSS, JavaScript, DOM) Hal. 19

3. Memanipulasi Konten dan Atribut

Setelah elemen dipilih, Anda dapat memanipulasinya:

Mengubah Konten Teks:


[Link] : Mengatur atau mendapatkan konten teks dari elemen (mengabaikan
HTML).
[Link] : Mengatur atau mendapatkan konten HTML dari elemen (termasuk tag
HTML).

[Link] = "Judul Baru";


[Link]('konten').innerHTML = '<b>Teks tebal baru</b>';

Mengubah Atribut:
[Link]('nama-atribut', 'nilai') : Mengatur nilai atribut.
[Link]('nama-atribut') : Mendapatkan nilai atribut.
[Link]('nama-atribut') : Menghapus atribut.

const gambar = [Link]('img');


[Link]('src', 'gambar_baru.jpg');
[Link]([Link]('alt'));

4. Mengubah Gaya (CSS) Dinamis

Anda dapat mengubah properti CSS elemen menggunakan properti style :

const kotak = [Link]('myBox');


[Link] = 'red';
[Link] = '20px';

// Menambah/menghapus kelas CSS


[Link]('active');
[Link]('hidden');
[Link]('highlight'); // Menambah jika tidak ada, menghapus jika ada

Halaman 19 / 32 Belajar, Berbagi, Berkarya Abdul Yamin, [Link]., [Link]


Belajar Web Dasar (HTML, CSS, JavaScript, DOM) Hal. 20

5. Membuat dan Menghapus Elemen

Membuat Elemen Baru:


[Link]('tagname') : Membuat elemen HTML baru.
[Link]('text') : Membuat node teks.

const newDiv = [Link]('div');


[Link] = "Ini adalah div baru.";
[Link](newDiv); // Menambahkan ke body

Menambahkan Elemen ke DOM:


[Link](childNode) : Menambahkan node sebagai anak terakhir.
[Link](newNode, referenceNode) : Menambahkan node sebelum node
referensi.
Menghapus Elemen:
[Link]() : Menghapus elemen itu sendiri.
[Link](childNode) : Menghapus anak dari induknya.

const elemenUntukDihapus = [Link]('oldElement');


[Link]();

Pembahasan

Manipulasi DOM adalah inti dari interaktivitas web modern. Dengan DOM, JavaScript dapat merespons
tindakan pengguna, memperbarui konten secara real-time, dan menciptakan pengalaman pengguna yang
dinamis tanpa perlu memuat ulang halaman. Praktikum ini akan memberikan dasar yang kuat untuk
berinteraksi dengan struktur halaman web menggunakan JavaScript.

Halaman 20 / 32 Belajar, Berbagi, Berkarya Abdul Yamin, [Link]., [Link]


Belajar Web Dasar (HTML, CSS, JavaScript, DOM) Hal. 21

Contoh Kode

Berikut adalah contoh sederhana yang menunjukkan manipulasi DOM:

[Link]

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Praktikum DOM Dasar</title>
<style>
#kotak {
width: 100px;
height: 100px;
background-color: lightblue;
margin: 20px;
border: 1px solid blue;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2em;
transition: background-color 0.3s;
}
.highlight {
background-color: yellow;
border-color: orange;
}
</style>
</head>
<body>
<h1 id="judul">Selamat Datang di DOM!</h1>
<p class="teks-info">Ini adalah paragraf informasi.</p>
<button id="ubahJudul">Ubah Judul</button>
<button id="tambahParagraf">Tambah Paragraf</button>
<button id="hapusParagraf">Hapus Paragraf Terakhir</button>
<button id="ubahWarna">Ubah Warna Kotak</button>
<button id="toggleHighlight">Toggle Highlight</button>

<div id="kotak">Kotak Saya</div>

Halaman 21 / 32 Belajar, Berbagi, Berkarya Abdul Yamin, [Link]., [Link]


Belajar Web Dasar (HTML, CSS, JavaScript, DOM) Hal. 22

<script src="[Link]"></script>
</body>
</html>

[Link]

[Link]('DOMContentLoaded', function() {
const judulElement = [Link]('judul');
const ubahJudulBtn = [Link]('ubahJudul');
const tambahParagrafBtn = [Link]('tambahParagraf');
const hapusParagrafBtn = [Link]('hapusParagraf');
const ubahWarnaBtn = [Link]('ubahWarna');
const kotakElement = [Link]('kotak');
const toggleHighlightBtn = [Link]('toggleHighlight');

// Mengubah judul
[Link]('click', function() {
[Link] = 'Judul Telah Diubah oleh DOM!';
});

// Menambah paragraf baru


[Link]('click', function() {
const newParagraph = [Link]('p');
[Link] = 'Paragraf baru ditambahkan secara dinamis.';
[Link]('teks-info');
[Link](newParagraph, [Link]); // T
});

// Menghapus paragraf terakhir


[Link]('click', function() {
const semuaParagrafInfo = [Link]('.teks-info');
if ([Link] > 0) {
semuaParagrafInfo[[Link] - 1].remove();
} else {
alert('Tidak ada paragraf untuk dihapus!');
}
});

// Mengubah warna kotak


[Link]('click', function() {

Halaman 22 / 32 Belajar, Berbagi, Berkarya Abdul Yamin, [Link]., [Link]


Belajar Web Dasar (HTML, CSS, JavaScript, DOM) Hal. 23

const randomColor = '#' + [Link]([Link]()*16777215).toString(16);


[Link] = randomColor;
});

// Toggle kelas highlight pada kotak


[Link]('click', function() {
[Link]('highlight');
});
});

Halaman 23 / 32 Belajar, Berbagi, Berkarya Abdul Yamin, [Link]., [Link]


Belajar Web Dasar (HTML, CSS, JavaScript, DOM) Hal. 24

PRAKTIKUM 3 DOM

Langkah-langkah Praktikum

1. Buat folder baru dengan nama NIM_NAMA_PRAKTIKUM_DOM .


2. Di dalam folder tersebut, buat file [Link] dan [Link] .
3. Salin kode [Link] di atas ke dalam [Link] Anda.
4. Salin kode [Link] di atas ke dalam [Link] Anda.
5. Buka [Link] di browser Anda.
6. Klik tombol-tombol yang tersedia dan amati perubahan pada halaman.
7. Buka konsol browser untuk melihat jika ada error atau output [Link]() .
8. Eksplorasi:
Ubah teks tombol.
Coba ubah atribut id atau class dari elemen yang sudah ada.
Buat tombol baru yang mengubah ukuran font dari h1 .
Buat tombol yang menambahkan gambar baru ke halaman.

TUGAS 3 DOM

Buatlah halaman web sederhana dengan fungsionalitas berikut menggunakan manipulasi DOM:

1. Sebuah <div> dengan id="counter" yang menampilkan angka 0 .


2. Dua tombol: satu dengan id="incrementBtn" dan satu lagi dengan id="decrementBtn" .
3. Ketika incrementBtn diklik, angka di dalam div#counter bertambah 1.
4. Ketika decrementBtn diklik, angka di dalam div#counter berkurang 1.
5. Pastikan angka tidak bisa kurang dari 0.
6. Jika angka mencapai 10, ubah warna teks di div#counter menjadi hijau. Jika kurang dari 10,
kembalikan ke warna hitam.

Kumpulkan file [Link] dan [Link] Anda.

Halaman 24 / 32 Belajar, Berbagi, Berkarya Abdul Yamin, [Link]., [Link]


Belajar Web Dasar (HTML, CSS, JavaScript, DOM) Hal. 25

Bagian 4: DOM Lanjutan (Event Handling, Form Validation, Integrasi)

Tujuan Pembelajaran

Pada akhir pertemuan ini, mahasiswa diharapkan mampu:

1. Mengimplementasikan penanganan peristiwa (event handling) pada elemen DOM.


2. Memahami berbagai jenis peristiwa (klik, submit, keypress, dll.).
3. Melakukan validasi formulir sisi klien (client-side form validation).
4. Mengintegrasikan JavaScript dengan HTML dan CSS untuk membangun antarmuka pengguna yang
dinamis.
5. Membangun aplikasi web sederhana yang interaktif dan responsif.

Materi

Pada pertemuan terakhir ini, kita akan menggabungkan semua pengetahuan yang telah diperoleh tentang
HTML, CSS, dan JavaScript, dengan fokus pada penanganan peristiwa dan validasi formulir untuk menciptakan
pengalaman pengguna yang lebih kaya.

1. Penanganan Peristiwa (Event Handling)

Peristiwa adalah sinyal bahwa sesuatu telah terjadi di browser (misalnya, halaman selesai dimuat, tombol
diklik, input diubah). JavaScript memungkinkan kita untuk "mendengarkan" peristiwa ini dan menjalankan
fungsi sebagai respons.

Metode addEventListener() : Cara paling modern dan disarankan untuk mendaftarkan event
handler.

const tombol = [Link]("myButton");


[Link]("click", function() {
alert("Tombol diklik!");
});

// Dengan fungsi panah


[Link]("mouseover", () => {
[Link]("Mouse di atas tombol");
});

Jenis Peristiwa Umum:

Mouse Events: click , dblclick , mouseover , mouseout , mousedown , mouseup .

Halaman 25 / 32 Belajar, Berbagi, Berkarya Abdul Yamin, [Link]., [Link]


Belajar Web Dasar (HTML, CSS, JavaScript, DOM) Hal. 26

Keyboard Events: keydown , keyup , keypress .


Form Events: submit , change , focus , blur , input .
Document/Window Events: DOMContentLoaded , load , resize , scroll .

Objek Event: Fungsi event handler menerima objek event sebagai argumen, yang berisi informasi
tentang peristiwa yang terjadi.

[Link]("click", function(event) {
[Link]("Elemen yang diklik:", [Link]);
[Link]("Koordinat X:", [Link]);
});

[Link]() : Mencegah perilaku default dari suatu peristiwa (misalnya, mencegah


formulir dikirim saat submit ).

2. Validasi Formulir Sisi Klien

Validasi formulir adalah proses memastikan bahwa input pengguna memenuhi kriteria tertentu sebelum data
dikirim ke server. Validasi sisi klien memberikan umpan balik instan kepada pengguna.

Mengakses Nilai Input: Gunakan properti value dari elemen input.

const inputNama = [Link]("nama");


const nilaiNama = [Link];

Pengecekan Kondisi: Gunakan pernyataan if/else untuk memeriksa apakah input kosong,
formatnya benar (misalnya, email), atau panjangnya sesuai.
Memberikan Umpan Balik: Ubah gaya elemen input (misalnya, border merah), tampilkan pesan error
di dekat input, atau gunakan alert() .

Halaman 26 / 32 Belajar, Berbagi, Berkarya Abdul Yamin, [Link]., [Link]


Belajar Web Dasar (HTML, CSS, JavaScript, DOM) Hal. 27

3. Integrasi HTML, CSS, dan JavaScript

Untuk membangun aplikasi web yang kohesif, penting untuk memahami bagaimana ketiga teknologi ini
bekerja sama:

HTML: Menyediakan struktur dan konten dasar.


CSS: Mengatur presentasi dan layout, termasuk responsivitas.
JavaScript: Menambahkan interaktivitas, memanipulasi DOM, dan menangani peristiwa.

Contoh integrasi:

JavaScript mengubah kelas CSS elemen untuk mengubah tampilannya (misalnya,


[Link]("error") ).
JavaScript membuat elemen HTML baru dan menyisipkannya ke DOM.
JavaScript mengambil data dari formulir HTML dan memprosesnya.

Pembahasan

Penanganan peristiwa adalah fondasi dari setiap aplikasi web interaktif. Dengan menguasai event handling,
mahasiswa dapat membuat halaman web yang responsif terhadap tindakan pengguna. Validasi formulir sisi
klien adalah praktik penting untuk meningkatkan pengalaman pengguna dan mengurangi beban server.
Pertemuan ini akan menyatukan semua konsep yang telah dipelajari untuk membangun aplikasi web yang
lebih fungsional dan dinamis.

Contoh Kode

Berikut adalah contoh aplikasi kalkulator sederhana dengan validasi formulir dan penanganan peristiwa:

[Link]

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kalkulator Interaktif</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f0f2f5;

Halaman 27 / 32 Belajar, Berbagi, Berkarya Abdul Yamin, [Link]., [Link]


Belajar Web Dasar (HTML, CSS, JavaScript, DOM) Hal. 28

margin: 0;
}
.container {
background-color: #fff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
text-align: center;
width: 300px;
}
h1 {
color: #333;
margin-bottom: 20px;
}
input, select, button {
width: calc(100% - 20px);
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box;
}
button {
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #0056b3;
}
#result {
margin-top: 20px;
font-size: 1.5em;
font-weight: bold;
color: #28a745;
}
.error-message {
color: red;
font-size: 0.9em;
margin-top: -10px;
margin-bottom: 10px;

Halaman 28 / 32 Belajar, Berbagi, Berkarya Abdul Yamin, [Link]., [Link]


Belajar Web Dasar (HTML, CSS, JavaScript, DOM) Hal. 29

text-align: left;
}
[Link] {
border-color: red;
}
</style>
</head>
<body>
<div class="container">
<h1>Kalkulator Sederhana</h1>
<form id="calculatorForm">
<input type="text" id="num1" placeholder="Angka Pertama">
<div id="num1Error" class="error-message"></div>

<select id="operator">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>

<input type="text" id="num2" placeholder="Angka Kedua">


<div id="num2Error" class="error-message"></div>

<button type="submit">Hitung</button>
</form>
<div id="result"></div>
</div>

<script src="[Link]"></script>
</body>
</html>

[Link]

[Link]("DOMContentLoaded", function() {
const calculatorForm = [Link]("calculatorForm");
const num1Input = [Link]("num1");
const num2Input = [Link]("num2");
const operatorSelect = [Link]("operator");
const resultDiv = [Link]("result");

Halaman 29 / 32 Belajar, Berbagi, Berkarya Abdul Yamin, [Link]., [Link]


Belajar Web Dasar (HTML, CSS, JavaScript, DOM) Hal. 30

const num1Error = [Link]("num1Error");


const num2Error = [Link]("num2Error");

[Link]("submit", function(event) {
[Link](); // Mencegah form dari submit default

// Reset error messages and styles


[Link] = "";
[Link] = "";
[Link]("invalid");
[Link]("invalid");
[Link] = "";

let isValid = true;

const num1 = parseFloat([Link]);


const num2 = parseFloat([Link]);
const operator = [Link];

// Validasi input pertama


if (isNaN(num1)) {
[Link] = "Angka pertama harus berupa angka.";
[Link]("invalid");
isValid = false;
}

// Validasi input kedua


if (isNaN(num2)) {
[Link] = "Angka kedua harus berupa angka.";
[Link]("invalid");
isValid = false;
}

if (!isValid) {
return; // Hentikan eksekusi jika ada error validasi
}

let result;
switch (operator) {
case "+":
result = num1 + num2;
break;
case "-":
result = num1 - num2;

Halaman 30 / 32 Belajar, Berbagi, Berkarya Abdul Yamin, [Link]., [Link]


Belajar Web Dasar (HTML, CSS, JavaScript, DOM) Hal. 31

break;
case "*":
result = num1 * num2;
break;
case "/":
if (num2 === 0) {
[Link] = "Error: Pembagian dengan nol!";
[Link] = "red";
return;
} else {
result = num1 / num2;
}
break;
default:
[Link] = "Operator tidak valid.";
[Link] = "red";
return;
}

[Link] = `Hasil: ${[Link](2)}`;


[Link] = "#28a745"; // Kembalikan warna hijau jika berhasil
});

// Event listener untuk membersihkan error saat input berubah


[Link]("input", function() {
[Link] = "";
[Link]("invalid");
});

[Link]("input", function() {
[Link] = "";
[Link]("invalid");
});
});

Halaman 31 / 32 Belajar, Berbagi, Berkarya Abdul Yamin, [Link]., [Link]


Belajar Web Dasar (HTML, CSS, JavaScript, DOM) Hal. 32

PRAKTIKUM 4 DOM LANJUTAN

Langkah-langkah Praktikum

1. Buat folder baru dengan nama NIM_NAMA_PRAKTIKUM_DOM_LANJUTAN .


2. Di dalam folder tersebut, buat file [Link] dan [Link] .
3. Salin kode [Link] di atas ke dalam [Link] Anda (termasuk bagian <style> ).
4. Salin kode [Link] di atas ke dalam [Link] Anda.
5. Buka [Link] di browser Anda.
6. Coba masukkan angka dan pilih operator, lalu klik "Hitung".
7. Coba masukkan input non-angka atau lakukan pembagian dengan nol dan amati pesan errornya.
8. Eksplorasi:
Tambahkan operator lain (misalnya, modulus % ).
Buat validasi tambahan, misalnya, memastikan input tidak kosong.
Ubah tampilan pesan error agar lebih menonjol.
Tambahkan tombol "Reset" yang akan mengosongkan input dan hasil.

TUGAS 4 DOM LANJUTAN

Buatlah halaman web sederhana yang menampilkan daftar item yang dapat ditambahkan dan dihapus
(seperti daftar belanja atau to-do list):

1. HTML: Buat sebuah input teks untuk item baru, sebuah tombol "Tambah Item", dan sebuah daftar tak
berurut ( <ul> ) kosong dengan id="itemList" .
2. CSS: Berikan gaya dasar agar tampilan menarik (misalnya, styling untuk input, tombol, dan item daftar).
3. JavaScript:
Ketika tombol "Tambah Item" diklik:
Ambil nilai dari input teks.
Lakukan validasi: jika input kosong, tampilkan pesan error dan jangan tambahkan item.
Jika tidak kosong, buat elemen <li> baru.
Tambahkan teks dari input ke <li> .
Tambahkan tombol "Hapus" ( <button>Hapus</button> ) di samping setiap item <li>
yang baru dibuat.
Tambahkan <li> ini ke <ul> dengan id="itemList" .
Kosongkan input teks setelah item ditambahkan.
Ketika tombol "Hapus" di samping item diklik:
Hapus item <li> yang bersangkutan dari daftar.

Kumpulkan file [Link] , [Link] , dan [Link] Anda.

Halaman 32 / 32 Belajar, Berbagi, Berkarya Abdul Yamin, [Link]., [Link]

Anda mungkin juga menyukai