HTML, CSS, dan JavaScript
Pembelajaran HTML
Berikut adalah hal-hal kunci yang sebaiknya Anda pelajari agar lebih mudah memahami
dan menggunakan HTML :
N Poin Utama Kegiatan Kunci Tingkat
o Pemahaman
1. Struktur Mempelajari struktur dasar halaman
1 2 3 4
Dasar HTML web
Tag semantik untuk membuat halaman
lebih mudah dipahami oleh mesin 1 2 3 4
pencari dan pembaca layar
Mempelajari tag dasar, seperti <html>,
1 2 3 4
<head>, <body> dan lainnya
2. Tag Heading <h1> hingga <h6> : Digunakan untuk
dan Paragraf menulis heading dengan ukuran dan 1 2 3 4
tingkat yang berbeda.
<p> : Tag ini digunakan untuk membuat
1 2 3 4
paragraf
3. Tag Tautan <a> : Digunakan untuk membuat link
1 2 3 4
(Link) dan ke halaman lain atau sumber eksterna
Gambar
<img> : Digunakan untuk menampilkan
1 2 3 4
gambar
4. Tag List Ordered list (<ol>) : Daftar bernomor 1 2 3 4
(Daftar)
Unordered list (<ul>) : Daftar dengan
1 2 3 4
bullet point
5. Formulir Form digunakan untuk menerima input
(Form) dari pengguna. Tag-tag utama dalam
form meliputi:
<form> : Membuat form.
<input> : Untuk menerima input 1 2 3 4
dari pengguna (seperti teks, email,
password, dll.).
<button> : Untuk membuat
tombol.
6. Tag Div dan <div> : Tag ini digunakan sebagai 1 2 3 4
Span kontainer untuk mengelompokkan
elemen-elemen HTML. Biasanya
digunakan untuk mengatur layout atau
gaya dengan CSS
Dresthia Yusuf Kalpika Wiratama
S1 PJJ Informatika - 20240100218
HTML, CSS, dan JavaScript
<span> : Tag inline yang digunakan
untuk membungkus teks atau elemen
1 2 3 4
kecil, misalnya untuk menyoroti bagian
tertentu dari teks
7. Komentar Komentar di HTML tidak akan
ditampilkan di halaman web, tapi sangat
berguna untuk menambahkan catatan di 1 2 3 4
dalam kode.
Contoh : <!-- Ini adalah komentar -->
8. Tabel Tag untuk membuat tabel meliputi:
<table> : Membuat tabel.
<tr> : Membuat baris dalam tabel. 1 2 3 4
<th> : Membuat header kolom
tabel.
<td> : Membuat sel dalam tabel.
9. Atribut Atribut digunakan untuk memberikan
(Attributes) informasi tambahan pada tag HTML
class dan id : Digunakan untuk 1 2 3 4
menandai elemen tertentu agar mudah
diatur dengan CSS atau diakses dengan
JavaScript.
href pada tag <a> untuk
1 2 3 4
mendefinisikan tujuan link.
src pada tag <img> untuk menentukan
1 2 3 4
sumber gambar.
Tips Belajar HTML : Baca Dokumentasi dan Tutorial Online W3Schools
(https://www.w3schools.com/) dan MDN Web Docs (https://developer.mozilla.org/en-US/)
Dresthia Yusuf Kalpika Wiratama
S1 PJJ Informatika - 20240100218
HTML, CSS, dan JavaScript
Pembelajaran CSS
Berikut adalah hal-hal kunci yang sebaiknya Anda pelajari untuk memahami dan
menggunakan CSS dengan lebih baik :
N Poin Utama Kegiatan Kunci Tingkat
o Pemahaman
1. Dasar-Dasar Sintaks Dasar : CSS ditulis dalam
CSS format selektor dan deklarasi. Selektor
1 2 3 4
menentukan elemen yang akan diatur,
sementara deklarasi menetapkan gaya.
2. Menghubungk Inline CSS : Menggunakan
1 2 3 4
an CSS atribut style dalam tag HTML
dengan HTML
Internal CSS : Menyisipkan CSS dalam
1 2 3 4
tag <style> di dalam <head> HTML
External CSS : Menggunakan file CSS
terpisah yang dihubungkan dengan 1 2 3 4
tag <link>
3. Selektor CSS Tag Selector : Memilih berdasarkan tag
1 2 3 4
HTML, misalnya p, h1, dll
Class Selector : Memilih elemen
dengan class tertentu, menggunakan 1 2 3 4
titik (.)
ID Selector : Memilih elemen
berdasarkan ID, menggunakan tanda 1 2 3 4
pagar (#)
Attribute Selector : Memilih elemen
1 2 3 4
berdasarkan atribut tertentu
4. Properti CSS Pelajari beberapa properti CSS yang
Dasar umum digunakan :
Color : Mengatur warna teks.
background-color : Mengatur
warna latar belakang. 1 2 3 4
font-size : Mengatur ukuran font.
margin dan padding : Mengatur
ruang di luar dan dalam elemen
border : Mengatur batas elemen
Dresthia Yusuf Kalpika Wiratama
S1 PJJ Informatika - 20240100218
HTML, CSS, dan JavaScript
5. Model Kotak Pahami model kotak CSS, yang terdiri
(Box Model) dari:
Content : Isi elemen.
Padding : Ruang di dalam elemen,
antara konten dan batas. 1 2 3 4
Border : Garis yang mengelilingi
elemen.
Margin : Ruang di luar elemen,
antara elemen dengan yang lainnya
Menggunakan box-sizing untuk
mengontrol bagaimana ukuran elemen 1 2 3 4
dihitung
6. Posisi Pelajari bagaimana mengatur posisi
(Positioning) elemen dengan properti berikut :
Static : Posisi default.
Relative : Posisi relatif terhadap
posisi asli elemen.
Absolute : Posisi absolut, diatur
relatif terhadap elemen terdekat 1 2 3 4
yang diposisikan.
Fixed : Posisi tetap, tetap di tempat
saat halaman di-scroll.
Sticky : Posisi yang berubah dari
relative ke fixed saat pengguna
scroll.
7. Flexbox dan Flexbox : Metode untuk mengatur
Grid Layout elemen dalam satu dimensi (baris atau 1 2 3 4
kolom) dengan lebih fleksibel.
CSS Grid : Metode untuk mengatur
elemen dalam dua dimensi (baris dan 1 2 3 4
kolom)
8. Media Queries Media queries digunakan untuk
membuat desain responsif yang
1 2 3 4
menyesuaikan tampilan berdasarkan
ukuran layar perangkat
9. Transisi dan Pelajari cara menambahkan transisi dan
Animasi animasi ke elemen untuk membuat 1 2 3 4
halaman lebih interaktif
10 Pentingnya Pastikan untuk selalu memvalidasi CSS
. Validasi dan Anda menggunakan alat seperti W3C
1 2 3 4
Konsistensi CSS Validation Service untuk
memastikan tidak ada kesalahan sintaks
Tips Belajar CSS : Baca dokumentasi dan tutorial seperti MDN Web Docs
(https://developer.mozilla.org/) dan CSS-Tricks (https://css-tricks.com/) sangat membantu.
Dresthia Yusuf Kalpika Wiratama
S1 PJJ Informatika - 20240100218
HTML, CSS, dan JavaScript
Pembelajaran JavaScript
Berikut adalah hal-hal kunci yang sebaiknya Anda pelajari untuk memahami dan
menggunakan JavaScript dengan lebih baik :
N Poin Utama Kegiatan Kunci Tingkat
o Pemahaman
1. Dasar - Dasar Variabel : Pelajari cara
JavaScript mendeklarasikan variabel
1 2 3 4
menggunakan let, const, dan var. Ini
adalah fondasi untuk menyimpan data
Tipe Data : Pahami tipe data dasar
seperti string, number, boolean, array, 1 2 3 4
dan object
Operator : Pelajari operator dasar
seperti penjumlahan, pengurangan, 1 2 3 4
perbandingan, dan logika
2. Kondisi Belajar menggunakan if-else untuk
(Conditional) membuat keputusan berdasarkan 1 2 3 4
kondisi tertentu
3. Pengulangan for loop, while loop : Pelajari cara
(Looping) mengulang kode secara otomatis untuk 1 2 3 4
memproses data secara berulang
4. Fungsi Fungsi memungkinkan Anda untuk
(Functions) mengemas blok kode yang bisa 1 2 3 4
digunakan berulang-ulang
5. Event Belajar menangani event seperti klik
Handling tombol, perubahan input, dll. Ini adalah
1 2 3 4
dasar dari membuat halaman web yang
interaktif
6. DOM Pelajari cara memilih dan memanipulasi 1 2 3 4
(Document elemen-elemen HTML menggunakan
Object Model) JavaScript, seperti mengubah teks,
menambah elemen baru, atau
Dresthia Yusuf Kalpika Wiratama
S1 PJJ Informatika - 20240100218
HTML, CSS, dan JavaScript
menghapus elemen
7. Array dan Pahami struktur data dasar
Object ini. Array menyimpan daftar data,
1 2 3 4
sedangkan Object menyimpan data
dalam bentuk pasangan kunci-nilai
8. Debugging Pelajari cara mendeteksi dan
memperbaiki kesalahan (error).
1 2 3 4
Gunakan console.log() untuk memeriksa
nilai variabel saat kode Anda berjalan
9. Asynchronous Operasi asinkron
JavaScript seperti callback, Promises,
dan async/await untuk menangani 1 2 3 4
tugas yang berjalan di latar belakang
seperti mengambil data dari server
Dresthia Yusuf Kalpika Wiratama
S1 PJJ Informatika - 20240100218
