Scribd
Unggah
1 tayangan6 halaman

Pembelajaran Pemograman HTML, CSS, Dan JavaScript

Dokumen ini memberikan panduan pembelajaran tentang HTML, CSS, dan JavaScript, mencakup poin-poin kunci yang harus dipahami untuk masing-masing bahasa pemrograman. Setiap bagian mencakup struktur dasar, tag, dan teknik yang penting untuk digunakan dalam pengembangan web. Selain itu, terdapat saran untuk membaca dokumentasi dan tutorial online untuk memperdalam pemahaman.

Diunggah oleh

Dresthia Yusuf Kalpika Wiratama
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 DOCX, PDF, TXT atau baca online di Scribd
1 tayangan6 halaman

Pembelajaran Pemograman HTML, CSS, Dan JavaScript

Dokumen ini memberikan panduan pembelajaran tentang HTML, CSS, dan JavaScript, mencakup poin-poin kunci yang harus dipahami untuk masing-masing bahasa pemrograman. Setiap bagian mencakup struktur dasar, tag, dan teknik yang penting untuk digunakan dalam pengembangan web. Selain itu, terdapat saran untuk membaca dokumentasi dan tutorial online untuk memperdalam pemahaman.

Diunggah oleh

Dresthia Yusuf Kalpika Wiratama
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 DOCX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 6

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

Anda mungkin juga menyukai