TUGAS LKPD 4 MATERI KODING DAN CONTOH SOAL KELAS X 2025
Pengantar HTML
HTML adalah bahasa markup standar yang digunakan untuk membuat halaman web. Ini adalah tulang punggung dari setiap website. Tugas utama HTML adalah memberikan struktur dan konten pada halaman web, seperti teks, gambar, tautan, dan tabel.
HyperText: Mengacu pada tautan (link) yang menghubungkan halaman web.
Markup Language: Berarti Anda menggunakan tag untuk "menandai" atau mendefinisikan elemen-elemen konten.
🏗️ Struktur Dasar Dokumen HTML
Setiap dokumen HTML memiliki struktur dasar yang terdiri dari beberapa elemen utama:
| Elemen | Deskripsi |
| <!DOCTYPE html> | Deklarasi yang mendefinisikan dokumen ini sebagai HTML5. Harus ada di baris pertama. |
| <html> | Elemen root yang mengelilingi seluruh konten halaman. |
| <head> | Berisi metadata tentang dokumen (informasi untuk browser dan mesin pencari), seperti judul halaman, tautan ke CSS, dan set karakter. |
| <title> | Menentukan judul halaman yang muncul di tab browser. Terletak di dalam <head>. |
| <body> | Berisi semua konten yang terlihat oleh pengguna, seperti teks, gambar, dan video. |
Contoh Struktur
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Judul Halaman Saya</title>
</head>
<body>
<h1>Ini adalah Judul Utama</h1>
<p>Ini adalah paragraf.</p>
</body>
</html>
🏷️ Elemen dan Tag HTML
HTML dibangun menggunakan tag. Sebagian besar elemen HTML terdiri dari tag pembuka dan tag penutup, dengan konten di antaranya.
Tag Pembuka:
<element_name>Tag Penutup:
</element_name>Elemen Lengkap:
<element_name>Konten</element_name>
1. Tag Heading
Digunakan untuk mendefinisikan judul dan subjudul. Penting untuk struktur dan SEO.
<h1>(Level tertinggi, judul utama)<h2>,<h3>,<h4>,<h5>,<h6>(Level subjudul)
2. Tag Paragraf
<p>: Digunakan untuk memisahkan blok teks atau paragraf.
3. Tag Pemformatan Teks
<b>atau<strong>: Membuat teks menjadi tebal (kuat/penting).<i>atau<em>: Membuat teks menjadi miring (penekanan).<br>: Tag tunggal (tidak memiliki tag penutup) untuk baris baru.
4. Tag Daftar (Lists)
Daftar Tidak Berurut (Unordered List): Digunakan untuk daftar item dengan poin.
<ul>: Kontainer daftar.<li>: Item daftar.
Daftar Berurut (Ordered List): Digunakan untuk daftar item yang berurutan atau bernomor.
<ol>: Kontainer daftar.<li>: Item daftar.
5. Tag Tautan (Links)
<a href="url">Teks Tautan</a>: Digunakan untuk membuat hyperlink ke halaman lain atau sumber daya. Atributhref(Hypertext REFerence) menentukan tujuannya.
6. Tag Gambar (Images)
<img src="url_gambar" alt="deskripsi">: Tag tunggal untuk menampilkan gambar.src(Source): Menentukan jalur ke file gambar.alt(Alternative Text): Teks yang akan ditampilkan jika gambar gagal dimuat, penting untuk aksesibilitas dan SEO.
⚙️ Atribut HTML
Atribut memberikan informasi tambahan tentang elemen HTML. Atribut selalu diletakkan di tag pembuka dan biasanya terdiri dari pasangan nama="nilai".
Contoh Atribut
Atribut
classdanid:id: Digunakan untuk memberikan identifikasi unik pada satu elemen.class: Digunakan untuk memberikan nama grup pada satu atau lebih elemen, sering digunakan oleh CSS dan JavaScript.
HTML<p id="paragraf1" class="intro">Paragraf dengan ID dan Class</p>Atribut
style(Inline CSS):Digunakan untuk menambahkan styling langsung pada elemen. (Sebaiknya hindari penggunaan berlebihan, gunakan CSS terpisah).
HTML<h2 style="color: blue; font-size: 20px;">Judul Biru</h2>
💡 HTML dan Teknologi Lain
HTML jarang berdiri sendiri. Biasanya bekerja bersama dengan:
CSS (Cascading Style Sheets): Mengurus penampilan (warna, font, tata letak, dll.) dari konten yang distrukturkan oleh HTML.
JavaScript (JS): Menambahkan interaktivitas dan fungsionalitas dinamis pada halaman web.
Tentu, ini adalah materi dasar tentang bahasa pemrograman C++.
💻 Pengantar C++
C++ adalah bahasa pemrograman tingkat menengah (yang berarti menggabungkan fitur tingkat tinggi dan tingkat rendah) yang dikembangkan oleh Bjarne Stroustrup sebagai ekstensi dari bahasa C.
Tujuan Utama: Awalnya dirancang untuk menambahkan fungsionalitas Pemrograman Berorientasi Objek (Object-Oriented Programming/OOP) ke C.
Fitur Kunci: C++ adalah bahasa yang dikompilasi (bukan diinterpretasi), membuatnya sangat cepat dan efisien.
Penggunaan: Digunakan secara luas dalam pengembangan software sistem, game engines (seperti Unreal Engine), sistem operasi, database, dan aplikasi dengan kinerja tinggi.
🛠️ Struktur Dasar Program C++
Berikut adalah kerangka program C++ yang paling sederhana:
#include <iostream>
int main() {
// Baris ini adalah komentar dan tidak dieksekusi
std::cout << "Halo, Dunia!" << std::endl;
return 0;
}
Penjelasan Komponen Utama:
#include <iostream>
Ini adalah Preprocessor Directive.
Memberi tahu compiler untuk menyertakan header file iostream (Input/Output Stream). Kita memerlukannya untuk melakukan operasi input dan output, seperti menampilkan teks ke layar.
int main()
Ini adalah fungsi utama (main function).
Setiap program C++ harus memiliki satu fungsi
main. Eksekusi program akan selalu dimulai dari sini.intmenunjukkan bahwa fungsi ini akan mengembalikan nilai bertipe integer (bilangan bulat).
{ ... }
Tanda kurung kurawal digunakan untuk mendefinisikan blok kode atau tubuh fungsi.
std::cout << "Halo, Dunia!" << std::endl;
Ini adalah pernyataan untuk output.
std::cout(Character Output) digunakan untuk menampilkan data ke layar.<<adalah Insertion Operator.std::endldigunakan untuk menyisipkan karakter baris baru (newline) dan membersihkan buffer (opsional, bisa diganti\n).
return 0;
Mengakhiri fungsi
main. Nilai 0 secara konvensional menunjukkan bahwa program telah berhasil dieksekusi.
💾 Tipe Data Dasar
C++ memiliki beberapa tipe data bawaan untuk mendefinisikan jenis data yang disimpan variabel:
| Tipe Data | Deskripsi | Contoh Ukuran (bit) | Contoh Nilai |
| int | Bilangan bulat (integer) | 32 | 10, -500 |
| float | Bilangan desimal dengan presisi tunggal | 32 | 3.14f, 0.001f |
| double | Bilangan desimal dengan presisi ganda (lebih akurat) | 64 | 3.14159265 |
| char | Satu karakter | 8 | 'A', 'z', '9' |
| bool | Nilai boolean (logika) | 8 | true atau false |
| string | Urutan karakter (membutuhkan #include <string>) | Variabel | "Selamat datang" |
🗃️ Variabel dan Konstanta
Variabel
Variabel adalah nama yang diberikan untuk area penyimpanan di memori. Anda harus mendeklarasikan tipe data sebelum menggunakannya.
// Deklarasi dan Inisialisasi
int usia = 25;
double harga = 150.50;
char inisial = 'B';
Konstanta
Konstanta adalah variabel yang nilainya tidak dapat diubah setelah diinisialisasi.
const double PI = 3.14159;
const int MAX_USERS = 100;
🔁 Kontrol Aliran (Control Flow)
1. Kondisional (if, else if, else)
Digunakan untuk menjalankan blok kode berdasarkan kondisi Boolean.
int nilai = 85;
if (nilai >= 90) {
std::cout << "Nilai A" << std::endl;
} else if (nilai >= 80) {
std::cout << "Nilai B" << std::endl;
} else {
std::cout << "Coba lagi" << std::endl;
}
2. Perulangan (Loops)
Digunakan untuk mengeksekusi blok kode berulang kali.
| Tipe | Deskripsi | Contoh |
| for | Perulangan yang diketahui jumlah iterasinya. | for (int i = 0; i < 5; i++) { ... } |
| while | Perulangan selama kondisi bernilai true. | while (i < 10) { ... } |
| do-while | Mirip dengan while, tetapi blok kode dieksekusi setidaknya satu kali. | do { ... } while (i < 5); |
🧱 Konsep OOP (Pemrograman Berorientasi Objek)
Ini adalah inti dari C++. Konsep utamanya meliputi:
Class & Object:
Class: Sebuah blueprint atau cetak biru. Ini mendefinisikan properti (data/members) dan perilaku (methods/functions) yang akan dimiliki oleh objek.
Object: Sebuah instance (wujud nyata) dari class.
Encapsulation (Pembungkusan): Menyembunyikan detail implementasi (data dan fungsi) di dalam class dan membatasi akses dari luar. Ini dilakukan menggunakan access specifiers (
public,private,protected).Inheritance (Pewarisan): Memungkinkan class baru (derived class) untuk mengambil properti dan method dari class yang sudah ada (base class).
Polymorphism (Bentuk Ganda): Kemampuan untuk memperlakukan objek dari class yang berbeda secara seragam. Contohnya adalah Function Overloading (membuat fungsi dengan nama sama tetapi parameter berbeda).
Pengantar Python
Python adalah bahasa pemrograman tingkat tinggi yang populer, ditafsirkan (interpreted), dan memiliki sifat serbaguna (general-purpose). Python dikenal karena sintaksisnya yang bersih dan mudah dibaca, membuatnya sangat ideal untuk pemula dan profesional.
Dibuat oleh: Guido van Rossum (dirilis tahun 1991).
Filosofi Utama: Penekanan pada keterbacaan kode dan memungkinkan programmer untuk mengekspresikan konsep dalam baris kode yang lebih sedikit daripada bahasa lain.
Penggunaan: Sangat luas, termasuk Data Science, Machine Learning, Pengembangan Web (menggunakan framework seperti Django/Flask), Automasi Scripting, dan Pengembangan Aplikasi.
🛠️ Struktur Dasar & Sintaksis
Tidak seperti C++ yang menggunakan kurung kurawal ({}) untuk blok kode, Python menggunakan indentasi (spasi atau tab) untuk mendefinisikan blok kode.
Program "Hello World"
# Ini adalah komentar di Python
print("Halo, Dunia!")
Penjelasan Utama:
Tidak Ada Titik Koma: Python tidak memerlukan titik koma (
;) di akhir setiap pernyataan.Keterbacaan: Sintaksisnya mirip bahasa Inggris biasa.
Kasus Sensitif: Python bersifat case-sensitive (misalnya,
Namadannamaadalah variabel yang berbeda).
💾 Variabel dan Tipe Data
Python adalah bahasa yang dinamis, artinya Anda tidak perlu secara eksplisit mendeklarasikan tipe data variabel saat membuatnya. Interpreter akan menentukannya secara otomatis.
1. Tipe Data Dasar
| Tipe Data | Deskripsi | Contoh |
| int | Bilangan bulat | usia = 30 |
| float | Bilangan desimal | harga = 99.99 |
| str | Urutan karakter (teks) | nama = "Budi" |
| bool | Nilai Boolean (logika) | aktif = True atau False |
2. Koleksi Data (Data Collections)
Python menawarkan beberapa struktur data bawaan yang kuat:
| Struktur | Deskripsi | Sifat | Contoh |
| List | Kumpulan data berurutan | Dapat diubah (Mutable) | buah = ["apel", "pisang", 10] |
| Tuple | Kumpulan data berurutan | Tidak dapat diubah (Immutable) | koordinat = (10, 20) |
| Set | Kumpulan data tidak berurutan | Tidak mengizinkan duplikat | warna = {"merah", "biru"} |
| Dictionary | Kumpulan data yang disimpan sebagai pasangan kunci-nilai | Dapat diubah (Mutable) | data = {"nama": "Ali", "umur": 25} |
🔁 Kontrol Aliran (Control Flow)
1. Kondisional (if, elif, else)
Blok kode ditentukan oleh indentasi (satu level indentasi biasanya 4 spasi).
nilai = 75
if nilai >= 80:
print("Lulus Baik")
elif nilai >= 60:
print("Lulus")
else:
print("Gagal")
2. Perulangan (Loops)
| Tipe | Deskripsi | Contoh |
| for | Untuk mengulang melalui urutan (seperti list atau range). | for item in buah: print(item) |
| while | Untuk mengulang selama kondisi bernilai True. | i = 0; while i < 5: print(i); i += 1 |
✍️ Fungsi (Functions)
Fungsi adalah blok kode terorganisir dan dapat digunakan kembali yang melakukan tugas terkait tunggal.
Fungsi didefinisikan menggunakan kata kunci def.
Fungsi dapat menerima parameter dan mengembalikan nilai.
def sapa_pengguna(nama):
"""Fungsi ini menyapa pengguna."""
return f"Halo, {nama}! Selamat datang."
# Memanggil fungsi
pesan = sapa_pengguna("Siti")
print(pesan) # Output: Halo, Siti! Selamat datang.
🧩 Modul dan Pustaka (Modules and Libraries)
Salah satu kekuatan terbesar Python adalah ekosistem Modul dan Pustaka yang luas.
Modul: File Python (
.py) yang berisi definisi fungsi, class, dan variabel yang dapat Anda impor ke program lain.Pustaka/Framework: Kumpulan besar modul untuk tugas-tugas tertentu. Contoh:
NumPy/Pandas: Untuk komputasi numerik dan analisis data.Matplotlib/Seaborn: Untuk visualisasi data.Django/Flask: Untuk pengembangan web.
Cara Mengimpor Modul
import math
print(math.pi) # Output: 3.141592653589793
SILAHKAN KERJAKAN DI BUKU TULIS
10 Contoh Soal HTML Pilihan Ganda
Pilih satu jawaban yang paling tepat.
Elemen manakah yang wajib berisi metadata tentang dokumen HTML, seperti set karakter dan judul halaman, dan tidak menampilkan konten yang terlihat di browser?
A. <body>
B. <html>
C. <meta>
D. <head>
E. <header>
Manakah tag HTML yang digunakan untuk membuat baris baru secara paksa tanpa membuat paragraf baru?
A. <p>
B. <br>
C. <hr>
D. </line>
E. <break>
Untuk mendefinisikan sebuah link (tautan) yang mengarah ke halaman lain, atribut apa yang harus digunakan di dalam tag <a> untuk menentukan alamat tujuannya?
A. src
B. alt
C. link
D. target
E. href
Tag HTML manakah yang digunakan untuk membuat daftar yang elemen-elemennya ditandai dengan nomor atau huruf (daftar berurut)?
A. <ul>
B. <li>
C. <ol>
D. <dl>
E. <list>
Apa fungsi utama dari atribut alt pada tag <img>?
A. Menentukan lokasi sumber gambar.
B. Menentukan lebar gambar.
C. Menyediakan teks deskriptif jika gambar gagal dimuat (penting untuk aksesibilitas).
D. Membuat link saat gambar diklik.
E. Menentukan judul yang muncul saat kursor diarahkan ke gambar.
Berikut adalah tag-tag heading (judul) yang valid dalam HTML, kecuali?
A. <h1>
B. <h2>
C. <h4>
D. <h6>
E. <h7>
Potongan kode manakah yang akan menghasilkan teks yang dicetak tebal?
A. <italic>Teks ini</italic>
B. <p>Teks ini</p>
C. <strong>Teks ini</strong>
D. <break>Teks ini</break>
E. <u>Teks ini</u>
Dalam kode berikut, bagian yang berperan sebagai nilai (value) dari atribut adalah: <p id="intro">Ini adalah paragraf.</p>
A. p
B. id
C. intro
D. Ini adalah paragraf.
E. </p>
Deklarasi manakah yang harus selalu diletakkan di baris paling atas (pertama) dari dokumen HTML5?
A. <html lang="en">
B. <head>
C. <!DOCTYPE html>
D. <title>Dokumen</title>
E. <h1>
Tag HTML manakah yang harus digunakan untuk mengelompokkan konten yang terlihat (teks, gambar, tautan) yang ditampilkan kepada pengguna?
A. <head>
B. <meta>
C. <link>
D. <body>
E. <style>
Pilih satu jawaban yang paling tepat.Elemen HTML manakah yang berfungsi sebagai kontainer utama untuk semua konten halaman web yang terlihat oleh pengguna?
A. <head>
B. <meta>
C. <body>
D. <html>
E. <header>
Tag manakah yang digunakan untuk membuat judul utama (paling penting) dari suatu bagian konten?
A. <title>
B. <h2>
C. <h1>
D. <p>
E. <main>
Untuk menyajikan daftar item dengan penanda poin (seperti lingkaran atau kotak), bukan penomoran, tag apa yang harus digunakan?
A. <ol>
B. <ul>
C. <li>
D. <dl>
E. <list>
Atribut manakah pada tag <img> yang menyediakan deskripsi teks untuk gambar, yang dibaca oleh pembaca layar atau ditampilkan jika gambar gagal dimuat?
A. src
B. title
C. href
D. alt
E. description
Tag manakah yang digunakan untuk menyertakan file CSS eksternal ke dalam dokumen HTML?
A. <style>
B. <script>
C. <link>
D. <css>
E. <import>
Berikut adalah contoh penggunaan atribut pada elemen HTML:
<a **href**="halaman.html">Link</a>
Pada contoh di atas, apa peran dari kata yang dicetak tebal?
A. Nilai (Value) atribut
B. Tag penutup
C. Nama atribut (Attribute Name)
D. Konten elemen
E. Nama elemen
Potongan kode manakah yang benar untuk membuat tautan yang akan terbuka di tab atau jendela baru?
A. <a href="url" target="_self">...</a>
B. <a href="url" new="tab">...</a>
C. <a href="url" target="_blank">...</a>
D. <a href="url" target="new">...</a>
E. <a href="url" new="true">...</a>
Dalam HTML, elemen manakah yang digunakan untuk membuat paragraf baru?
A. <br>
B. <para>
C. <p>
D. <h>
E. <li>
Tag HTML manakah yang merupakan tag tunggal (tidak memerlukan tag penutup)?
A. <p>
B. <a>
C. <br>
D. <strong>
E. <body>
Untuk memberikan identifikasi unik pada satu elemen HTML (misalnya, untuk diakses oleh CSS atau JavaScript), atribut apa yang harus digunakan?
A. class
B. name
C. id
D. data
E. style
Python dikenal sebagai bahasa pemrograman yang diinterpretasi dan menggunakan sintaksis yang mudah dibaca. Elemen sintaksis penting manakah yang digunakan Python untuk mendefinisikan blok kode (seperti di dalam loop atau if statement)?
A. Kurung kurawal ({})
B. Titik koma (;)
C. Tanda kurung biasa (())
D. Indentasi (spasi atau tab)
E. Kata kunci BEGIN dan END
Manakah tipe data dalam Python yang merupakan kumpulan nilai-kunci (key-value pair), dan sering digunakan untuk menyimpan data terstruktur?
A. List
B. Tuple
C. Set
D. Dictionary
E. Array
Apa hasil dari kode Python berikut?
print(10 // 3)
A. 3.33333
B. 3.0
C. 3
D. 1
E. 0
Variabel Python dideklarasikan dengan cara:
x = 5
y = "Python"
Apa istilah yang digunakan untuk mendeskripsikan sifat Python yang tidak memerlukan deklarasi tipe data secara eksplisit pada variabel? A. Statically Typed B. Compiled C. Strictly Typed D. Dynamically Typed E. Weakly Typed
Apa output dari kode perulangan (loop) berikut?
for i in range(3):
print(i, end=" ")
A. 1 2 3
B. 0 1 2
C. 0 1 2 3
D. 1 2
E. Hanya 3
Struktur data Python manakah yang bersifat tidak dapat diubah (immutable) setelah dibuat, sehingga tidak dapat menambahkan, menghapus, atau mengubah elemen di dalamnya?
A. List
B. Dictionary
C. Tuple
D. Set
E. Array
Kata kunci manakah yang digunakan untuk mendefinisikan sebuah fungsi di Python?
A. function
B. func
C. define
D. def
E. method
Jika Anda ingin mengimpor pustaka random dan menggunakan fungsi randint() di dalamnya, manakah sintaks yang benar?
A. use random; random.randint(1, 10)
B. include random; random.randint(1, 10)
C. import random.randint
D. import random; random.randint(1, 10)
E. get random; random.randint(1, 10)
Manakah operator perbandingan yang berarti "sama dengan" (memeriksa kesamaan nilai) dalam Python?
A. =
B. ==
C. !=
D. is
E. ===
Dalam Python, bagaimana Anda menginisialisasi sebuah List kosong?
A. my_list = {}
B. my_list = []
C. my_list = ()
D. my_list = List()
E. my_list = set()
Gampang banget pa , kurang banyak soalnya btw
BalasHapus