Scribd
Unggah
11 tayangan13 halaman

Deklarasi Dan Elemen Dasar HTML

Diunggah oleh

Khairul Wajdi
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
11 tayangan13 halaman

Deklarasi Dan Elemen Dasar HTML

Diunggah oleh

Khairul Wajdi
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/ 13

1.

Deklarasi dan Elemen Dasar HTML


html

Insert CodeRunCopy code


1<!doctype html>
2<html lang="en">

 <!doctype html> : Ini adalah deklarasi tipe dokumen yang menunjukkan bahwa
dokumen ini menggunakan HTML5. Ini membantu browser untuk merender halaman
dengan benar.
 <html lang="en">: Membuka elemen HTML dan menetapkan atribut lang ke "en"
(bahasa Inggris). Ini penting untuk aksesibilitas dan SEO, karena membantu mesin
pencari dan pembaca layar memahami bahasa konten.

2. Elemen <head>
html

Insert CodeRunCopy code


1<head>
2 <meta charset="utf-8">
3 <meta name="viewport" content="width=device-width, initial-scale=1">
4 <title>Bangun Datar</title>

 <head>: Membuka elemen head yang berisi informasi metadata tentang dokumen,
seperti karakter encoding, judul, dan link ke stylesheet.
 <meta charset="utf-8"> : Menetapkan karakter encoding dokumen ke UTF-8, yang
mendukung hampir semua karakter dan simbol dari berbagai bahasa. Ini penting untuk
memastikan teks ditampilkan dengan benar.
 <meta name="viewport" content="width=device-width, initial-scale=1"> :
Mengatur viewport untuk responsivitas. width=device-width mengatur lebar viewport
sesuai dengan lebar perangkat, dan initial-scale=1 mengatur skala awal saat
halaman dimuat. Ini sangat penting untuk tampilan yang baik di perangkat mobile.
 <title>Bangun Datar</title> : Menetapkan judul halaman yang akan ditampilkan di
tab browser. Judul ini juga digunakan oleh mesin pencari dan bookmark.

3. Link CSS dan JavaScript


html

Insert CodeRunCopy code


1 <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
2 <link href="https://fonts.googleapis.com/css2?
family=Poppins:wght@300;400;600&family=Roboto:wght@500&display=swap"
rel="stylesheet">
3 <script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></
script>
 <link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min
.css" rel="stylesheet"> : Menghubungkan file CSS dari Bootstrap, yang merupakan
framework CSS populer untuk membuat desain responsif dan modern. Ini memberikan
gaya dasar untuk elemen HTML.
 <link href="https://fonts.googleapis.com/css2?
family=Poppins:wght@300;400;600&family=Roboto:wght@500&display=swap"
rel="stylesheet"> : Menghubungkan font dari Google Fonts. Dua font yang digunakan
adalah Poppins dan Roboto, yang memberikan tampilan yang bersih dan modern.
 <script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundl
e.min.js"></script> : Menghubungkan file JavaScript Bootstrap yang berisi
fungsionalitas interaktif seperti dropdown, modal, dan
lainnya. bootstrap.bundle.min.js juga menyertakan Popper.js, yang diperlukan untuk
beberapa komponen Bootstrap.

4. Styling CSS
html

Insert CodeRunCopy code


1 <style>
2/* Reset dan dasar styling */
3body {
4 font-family: 'Roboto', sans-serif;
5 background-color: #121212; /* Dark background */
6 color: #e0e0e0; /* Light text */
7 margin: 0;
8}

 <style>: Membuka elemen style untuk menulis CSS langsung di dalam dokumen. Ini
memungkinkan penyesuaian gaya yang lebih spesifik.
 body: Mengatur gaya untuk seluruh halaman.
 font-family: 'Roboto', sans-serif; : Mengatur font utama halaman menjadi
Roboto, dengan sans-serif sebagai cadangan jika Roboto tidak tersedia.
 background-color: #121212; : Mengatur warna latar belakang halaman menjadi warna
gelap (hampir hitam).
 color: #e0e0e0; : Mengatur warna teks menjadi abu-abu terang untuk kontras yang
baik dengan latar belakang gelap.
 margin: 0;: Menghapus margin default dari elemen body untuk menghindari ruang
kosong di sekitar halaman.

5. Styling Header
html

Insert CodeRunCopy code


1header {
2 background: linear-gradient(90deg, #333, #555); /* Dark gradient */
3 color: white;
4 padding: 30px;
5 font-size: 38px;
6 font-weight: 600;
7 text-align: center;
8 border-radius: 12px;
9 margin-bottom: 20px;
10 box-shadow: 0 6px 15px rgba(0, 0 , 0, 0.5);
11}

 header: Mengatur gaya untuk elemen header.


 background: linear-gradient(90deg, #333, #555); : Mengatur latar belakang
header dengan gradien gelap dari #333 ke #555.
 color: white; : Mengatur warna teks header menjadi putih untuk kontras yang baik.
 padding: 30px;: Menambahkan ruang di dalam header untuk membuatnya lebih
estetis.
 font-size: 38px;: Mengatur ukuran font untuk teks header.
 font-weight: 600; : Mengatur ketebalan font menjadi semi-tebal.
 text-align: center; : Mengatur teks agar berada di tengah.
 border-radius: 12px; : Memberikan sudut melengkung pada header.
 margin-bottom: 20px; : Menambahkan ruang di bawah header untuk pemisahan dari
elemen berikutnya.
 box-shadow: 0 6px 15px rgba(0, 0, 0, 0.5); : Menambahkan efek bayangan untuk
memberikan kedalaman visual.

6. Styling Navigasi
html

Insert CodeRunCopy code


1nav {
2 background: #1c1c1c; /* Darker navbar */
3}
4nav .nav-link {
5 color: #e0e0e0;
6 font-weight: 500;
7}
8nav .nav-link:hover {
9 color: #ffd700;
10 text-decoration: underline;
11}

 nav: Mengatur gaya untuk elemen navigasi.


 background: #1c1c1c; : Mengatur latar belakang navbar menjadi lebih gelap.
 nav .nav-link : Mengatur gaya untuk tautan navigasi.
 color: #e0e0e0; : Mengatur warna teks tautan menjadi abu-abu terang.
 font-weight: 500; : Mengatur ketebalan font tautan menjadi sedang.
 nav .nav-link:hover : Mengatur efek saat tautan dinavigasi.
 color: #ffd700; : Mengubah warna teks menjadi emas saat mouse berada di atas
tautan.
 text-decoration: underline; : Menambahkan garis bawah pada tautan saat dihover.

7. Styling Konten Kolom


html

Insert CodeRunCopy code


1.col {
2 background-color: #1f1f1f; /* Dark gray for content columns */
3 padding: 30px;
4 border-radius: 15px;
5 box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
6 transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
7}
8.col:hover {
9 transform: translateY(-10px);
10 box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
11}

 .col: Mengatur gaya untuk kolom konten.


 background-color: #1f1f1f; : Mengatur warna latar belakang kolom menjadi abu-abu
gelap.
 padding: 30px;: Menambahkan ruang di dalam kolom untuk konten.
 border-radius: 15px; : Memberikan sudut melengkung pada kolom.
 box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2); : Menambahkan efek bayangan untuk
memberikan kedalaman.
 transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; :
Menambahkan efek transisi halus saat kolom dihover.
 .col:hover: Mengatur efek saat kolom dinavigasi.
 transform: translateY(-10px); : Menggeser kolom ke atas saat dihover.
 box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3); : Mengubah bayangan untuk
memberikan efek kedalaman yang lebih besar saat dihover.

8. Styling Footer
html

Insert CodeRunCopy code


1.footer {
2 background: #1c1c1c; /* Dark footer */
3 color: #e0e0e0; /* Light text for footer */
4 padding: 20px;
5 text-align: center;
6 position: relative;
7 bottom: 0;
8 width: 100%;
9}

 .footer: Mengatur gaya untuk elemen footer.


 background: #1c1c1c; : Mengatur latar belakang footer menjadi gelap.
 color: #e0e0e0; : Mengatur warna teks footer menjadi abu-abu terang untuk kontras
yang baik.
 padding: 20px;: Menambahkan ruang di dalam footer untuk estetika.
 text-align: center; : Mengatur teks agar berada di tengah footer.
 position: relative; : Mengatur posisi footer relatif terhadap elemen lainnya.
 bottom: 0;: Menempatkan footer di bagian bawah konten.
 width: 100%;: Mengatur lebar footer agar memenuhi seluruh lebar halaman.

9. Elemen <body>
html

Insert CodeRunCopy code


1<body>
2 <header>
3 Selamat Datang di Halaman Bangun Datar
4 </header>

 <body>: Membuka elemen body yang berisi konten utama halaman.


 <header>: Menampilkan judul halaman dengan teks "Selamat Datang di Halaman
Bangun Datar", memberikan sambutan kepada pengunjung.
10. Elemen Navigasi
html

Insert CodeRunCopy code


1 <nav>
2 <ul class="nav">
3 <li class="nav-item"><a class="nav-link" href="#segitiga">Segitiga</a></li>
4 <li class="nav-item"><a class="nav-link" href="#persegi">Persegi</a></li>
5 <li class="nav-item"><a class="nav-link" href="#lingkaran">Lingkaran</a></li>
6 </ul>
7 </nav>

 <nav>: Membuka elemen navigasi untuk tautan ke bagian berbeda di halaman.


 <ul class="nav">: Membuat daftar tidak terurut untuk item navigasi.
 <li class="nav-item"> : Menyusun item dalam daftar navigasi.
 <a class="nav-link" href="#segitiga"> : Membuat tautan ke bagian "Segitiga"
dengan kelas untuk styling. Tautan ini akan membawa pengguna ke bagian yang
relevan saat diklik.

11. Konten Utama


html

Insert CodeRunCopy code


1 <div class="container">
2 <div class="row">
3 <div class="col" id="segitiga">
4 <h2>Segitiga</h2>
5 <p>Informasi tentang segitiga...</p>
6 </div>
7 <div class="col" id="persegi">
8 <h2>Persegi</h2>
9 <p>Informasi tentang persegi...</p>
10 </div>
11 <div class="col" id="lingkaran">
12 <h2>Lingkaran</h2>
13 <p>Informasi tentang lingkaran...</p>
14 </div>
15 </div>
16 </div>

 <div class="container"> : Membuka elemen kontainer untuk mengatur tata letak dan
memberikan padding di sekitar konten.
 <div class="row"> : Membuka elemen baris untuk mengelompokkan kolom.
 <div class="col" id="segitiga"> : Membuka kolom untuk informasi tentang segitiga,
dengan ID untuk navigasi.
 <h2> dan <p>: Menampilkan judul dan paragraf informasi untuk setiap bentuk,
memberikan detail tentang segitiga, persegi, dan lingkaran.

12. Elemen Footer


html

Insert CodeRunCopy code


1 <footer class="footer">
2 &copy; 2024 Bangun Datar. Semua hak dilindungi.
3 </footer>
4</body>
5</html>

 <footer class="footer"> : Membuka elemen footer dengan kelas untuk styling.


 &copy; 2024 Bangun Datar. Semua hak dilindungi. : Menampilkan teks hak cipta di
footer, memberikan informasi tentang kepemilikan konten.

Dengan penjelasan di atas, setiap bagian kode HTML telah dijelaskan secara detail,
memberikan pemahaman yang lebih baik tentang fungsinya

Berikut adalah penjelasan detail untuk bagian JavaScript yang terdapat dalam
file ba.html:

1. Elemen <script> dalam <head>


html

Insert CodeRunCopy code


1<script>
2 function updateColumnContent(menu, shape) {
3 const column = document.getElementById('column1');
4 if (menu === 'pengertian') {
5 if (shape === 'Persegi') {
6 column.innerHTML = `
7 <p>Persegi adalah bangun datar yang memiliki empat sisi sama panjang dan
empat sudut siku-siku.</p>
8 <button class="btn btn-primary"
onclick="toggleAdditionalContent('persegi')">Selengkapnya</button>
9 <div id="persegi" class="additional-content">
10 <h5>Contoh Persegi:</h5>
11 <p>Persegi dapat ditemukan pada benda seperti kotak tisu, meja kecil,
dan lain-lain.</p>
12 </div>
13 `;
14 } else if (shape === 'Persegi Panjang') {
15 column.innerHTML = `
16 <p>Persegi panjang adalah bangun datar yang memiliki dua pasang sisi
yang saling sejajar dan panjang sisi yang berbeda.</p>
17 <button class="btn btn-primary"
onclick="toggleAdditionalContent('persegipanjang')">Selengkapnya</button>
18 <div id="persegipanjang" class="additional-content">
19 <h5>Contoh Persegi Panjang:</h5>
20 <p>Persegi panjang dapat ditemukan pada benda seperti layar TV, papan
tulis, dan lain-lain.</p>
21 </div>
22 `;
23 } else if (shape === 'Segitiga') {
24 column.innerHTML = `
25 <p>Segitiga adalah bangun datar yang memiliki tiga sisi dan tiga
sudut.</p>
26 <button class="btn btn-primary"
onclick="toggleAdditionalContent('segitiga')">Selengkapnya</button>
27 <div id="segitiga" class="additional-content">
28 <h5>Contoh Segitiga:</h5>
29 <p>Segitiga dapat ditemukan pada benda seperti atap rumah, tenda, dan
lain-lain.</p>
30 </div>
31 `;
32 } else if (shape === 'Lingkaran') {
33 column.innerHTML = `
34 <p>Lingkaran adalah bangun datar yang terdiri dari semua titik yang
memiliki jarak yang sama dari titik pusatnya.</p>
35 <button class="btn btn-primary"
onclick="toggleAdditionalContent('lingkaran')">Selengkapnya</button>
36 <div id="lingkaran" class="additional-content">
37 <h5>Contoh Lingkaran:</h5>
38 <p>Lingkaran dapat ditemukan pada benda seperti roda sepeda, jam
dinding, dan lain-lain.</p>
39 </div>
40 `;
41 }
42 } else if (menu === 'sifat') {
43 if (shape === 'Persegi') {
44 column.innerHTML = `
45 <h5>Sifat-sifat Persegi:</h5>
46 <ol>
47 <li>Semua sisi sama panjang.</li>
48 <li>Semua sudut siku-siku (90°).</li>
49 <li>Diagonalnya saling tegak lurus dan membagi dua bagian yang
sama.</li>
50 <li>Diagonalnya memiliki panjang yang sama.</li>
51 </ol>
52 `;
53 } else if (shape === 'Persegi Panjang') {
54 column.innerHTML = `
55 <h5>Sifat-sifat Persegi Panjang:</h5>
56 <ol>
57 <li>Memiliki dua pasang sisi yang saling sejajar dan memiliki panjang
yang sama pada tiap pasang sisi.</li>
58 <li>Semua sudut siku-siku (90°).</li>
59 <li>Diagonalnya memiliki panjang yang berbeda, tetapi saling membagi
dua bagian yang sama.</li>
60 </ol>
61 `;
62 } else if (shape === 'Segitiga') {
63 column.innerHTML = `
64 <h5>Sifat-sifat Segitiga:</h5>
65 <ol>
66 <li>Memiliki tiga sisi dan tiga sudut.</li>
67 <li>Jumlah sudut dalam segitiga selalu 180°.</li>
68 <li>Jenis segitiga dibedakan berdasarkan panjang sisi dan besar
sudut.</li>
69 </ol>
70 `;
71 } else if (shape === 'Lingkaran') {
72 column.innerHTML = `
73 <h5>Sifat-sifat Lingkaran:</h5>
74 <ol>
75 <li>Memiliki jari-jari yang sama panjang dari titik pusat ke setiap titik
pada lingkaran.</li>
76 <li>Lingkaran tidak memiliki sudut.</li>
77 <li> Lingkaran memiliki panjang keliling yang dapat dihitung dengan
rumus \(2\pi r\) dan luas yang dapat dihitung dengan rumus \(\pi r^2\).</li>
78 </ol>
79 `;
80 }
81 }
82 }
83
84 function toggleAdditionalContent(shape) {
85 const content = document.getElementById(shape);
86 if (content.style.display === "none" || content.style.display === "") {
87 content.style.display = "block";
88 } else {
89 content.style.display = "none";
90 }
91 }
92</script>

 <script>: Membuka elemen script untuk menulis kode JavaScript yang akan
digunakan dalam halaman.

2. Fungsi updateColumnContent(menu, shape)

 Deskripsi: Fungsi ini digunakan untuk memperbarui konten kolom berdasarkan menu
dan bentuk yang dipilih.
 Parameter:
 menu: Menentukan kategori konten yang ingin ditampilkan (misalnya, "pengertian" atau
"sifat").
 shape: Menentukan bentuk yang dipilih (misalnya, "Persegi", "Segitiga", dll).
 Proses:
 Mengambil elemen kolom dengan document.getElementById('column1') .
 Menggunakan struktur if untuk memeriksa nilai menu dan shape, kemudian
memperbarui innerHTML kolom dengan konten yang sesuai.
 Setiap bentuk memiliki konten yang berbeda, termasuk deskripsi dan contoh.

3. Fungsi toggleAdditionalContent(shape)

 Deskripsi: Fungsi ini digunakan untuk menampilkan atau menyembunyikan konten


tambahan ketika tombol "Selengkapnya" diklik.
 Parameter:
 shape: Menentukan ID dari elemen konten tambahan yang ingin ditampilkan atau
disembunyikan.
 Proses:
 Mengambil elemen dengan document.getElementById(shape) .
 Memeriksa gaya tampilan elemen. Jika elemen disembunyikan ( display: none), maka
akan ditampilkan (display: block), dan sebaliknya.

4. Penggunaan Fungsi
 Fungsi updateColumnContent dipanggil ketika pengguna memilih bentuk dari menu
navigasi. Konten kolom akan diperbarui sesuai dengan pilihan pengguna.
 Fungsi toggleAdditionalContent dipanggil ketika pengguna mengklik tombol
"Selengkapnya", memungkinkan pengguna untuk melihat informasi tambahan tentang
bentuk yang dipilih.

Dengan penjelasan di atas, setiap bagian dari kode JavaScript telah dijelaskan secara
detail, memberikan pemahaman yang lebih baik tentang fungsinya dan bagaimana
interaksi pengguna dengan halaman web terjadi.

Fungsi updateColumnContent(menu, shape)

Deskripsi Umum
Fungsi ini mengatur konten dalam elemen dengan id="column1". Terdapat tiga jenis menu
(pengertian, sifat, dan gambar), serta empat jenis bangun datar (Persegi, Persegi Panjang,
Segitiga, dan Lingkaran). Konten diperbarui sesuai kombinasi menu dan bangun datar yang
dipilih.
1. Pengaturan Variabel
javascript
Copy code
const column = document.getElementById('column1');
 document.getElementById('column1'):
o Mengambil elemen HTML dengan id="column1".
o Elemen ini akan diisi dengan konten sesuai pilihan pengguna.

2. Kondisi Menu pengertian


javascript
Copy code
if (menu === 'pengertian') {
if (shape === 'Persegi') {
column.innerHTML = `
<p>Persegi adalah bangun datar yang memiliki empat sisi sama
panjang dan empat sudut siku-siku.</p>
<button class="btn btn-primary"
onclick="toggleAdditionalContent('persegi')">Selengkapnya</button>
<div id="persegi" class="additional-content">
<h5>Contoh Persegi:</h5>
<p>Persegi dapat ditemukan pada benda seperti kotak tisu, meja
kecil, dan lain-lain.</p>
</div>
`;
}
}
 menu === 'pengertian': Mengecek apakah menu yang dipilih adalah "pengertian".
 shape === 'Persegi': Mengecek apakah bentuk yang dipilih adalah "Persegi".
 column.innerHTML:
o Mengatur isi elemen kolom column1 dengan teks dan tombol untuk "pengertian"
bangun datar Persegi.
o <button>: Tombol untuk memanggil fungsi toggleAdditionalContent agar
menampilkan atau menyembunyikan konten tambahan.

Pengaturan Konten Tambahan


html
Copy code
<div id="persegi" class="additional-content">
<h5>Contoh Persegi:</h5>
<p>Persegi dapat ditemukan pada benda seperti kotak tisu, meja kecil, dan
lain-lain.</p>
</div>
 <div>: Konten tambahan yang dapat disembunyikan atau ditampilkan.
 id="persegi": Elemen ini digunakan oleh fungsi toggleAdditionalContent untuk
mengatur tampilannya.

3. Menu sifat
javascript
Copy code
} else if (menu === 'sifat') {
if (shape === 'Persegi') {
column.innerHTML = `
<h5>Sifat-sifat Persegi:</h5>
<ol>
<li>Semua sisi sama panjang.</li>
<li>Semua sudut siku-siku (90°).</li>
<li>Diagonalnya saling tegak lurus dan membagi dua bagian yang
sama.</li>
<li>Diagonalnya memiliki panjang yang sama.</li>
</ol>
`;
}
}
 menu === 'sifat': Mengecek apakah menu yang dipilih adalah "sifat".
 column.innerHTML:
o Mengatur konten kolom dengan daftar sifat-sifat bangun datar Persegi menggunakan
elemen <ol>.

4. Menu gambar
javascript
Copy code
} else if (menu === 'gambar') {
if (shape === 'Persegi') {
column.innerHTML = '<div class="image-container"><img
src="Persegi.png" alt="gambar persegi"></div>';
}
}
 menu === 'gambar': Mengecek apakah menu yang dipilih adalah "gambar".
 <div class="image-container">:
o Membungkus elemen gambar agar rapi.
 <img src="Persegi.png" alt="gambar persegi">:
o Menyisipkan gambar Persegi dari file Persegi.png.
o alt: Teks alternatif jika gambar gagal dimuat.

Fungsi toggleAdditionalContent(id)
Deskripsi Umum
Fungsi ini digunakan untuk menampilkan atau menyembunyikan elemen tambahan berdasarkan
id.

Kode
javascript
Copy code
function toggleAdditionalContent(id) {
const content = document.getElementById(id);
if (content.style.display === "none" || content.style.display === "") {
content.style.display = "block";
} else {
content.style.display = "none";
}
}

Penjelasan
1. document.getElementById(id):
o Mengambil elemen dengan id yang sesuai.
2. Kondisi if-else:
o Mengecek properti style.display dari elemen:
 "none" atau "": Menampilkan elemen dengan mengatur display: block.
 Selain itu: Menyembunyikan elemen dengan display: none.

Tujuan
Fungsi ini digunakan untuk mengontrol visibilitas elemen tambahan seperti "contoh persegi".

Alur Penggunaan Script


1. Pengguna memilih menu (misalnya, "pengertian") dan bentuk (misalnya, "Persegi").
2. Fungsi updateColumnContent dijalankan, memperbarui kolom column1 dengan konten yang
sesuai.
3. Jika terdapat tombol "Selengkapnya", fungsi toggleAdditionalContent dapat digunakan
untuk menampilkan atau menyembunyikan detail tambahan.
Jika Anda memiliki pertanyaan tambahan, beri tahu saya!

Anda mungkin juga menyukai