Nama Guru : Novarief Saisywa, S.Kom.
Satuan Pendidikan : SD Al-Azhar 2 Bandar Lampung
Mata Pelajaran : Teknologi Informasi dan Komunikasi (TIK)
Kelas / Semester : 6C / 1
Hari, Tanggal : Jumat, 1 Agustus 2025
Pembelajaran Ke : 02
Selamat pagi anak sholeh - sholehah kelas 6A dan 6B SD AL - AZHAR 2 BANDAR LAMPUNG
Bagaimana kabarnya sholeh-sholehah hari ini? Alhamdulillah, Luar biasa, Allahuakbar.
Semoga kita selalu diberikan kesehatan oleh Allah Subhanahu Wata'ala
Sebelum kita memulai belajar hari ini mari kita membaca Doa Belajar
1.1.1. Pengaturan Properti Dokumen
Properti dokumen diatur melalui atribut-atribut yang terdapat dalam elemen <body>. Sebagai contoh adalah pengaturan warna latar belakang halaman, warna teks, warna link dan lain-lain.
a. Kode Warna
Dalam pengaturan warna menggunakan kode RGB yang mana ditampilkan dalam nilai heksadesimal. Setiap bagian dua digit kode menunjukkan banyaknya intensitas dari kombinasi warna merah, hijau dan biru. Sebagai contoh 00 pada dua digit pertama berarti tidak ada warna merah dalam kombinasi warna. Berikut ini adalah contoh kode warna:
Warna | Heksadesimal |
White | #FFFFFF |
Black | #000000 |
Red | #FF0000 |
Green | #00FF00 |
Blue | #0000FF |
Magenta | #FF00FF |
Cyan | #00FFFF |
Yellow | #FFFF00 |
Aquamarine | #70DB93 |
Chocolate | #5C3317 |
Violet | #9F5F9F |
Brass | #B5A642 |
Copper | #B87333 |
Pink | #FF6EC7 |
Orange | #FF7F00 |
b. Atribut Elemen BODY
BACKGROUND = URI (background image for document)
BGCOLOR = Color (background color for document, default white)
TEXT = Color (text color for document, default black)
LINK = Color (link color for document, default blue)
VLINK = Color (visited link color for document, default purple)
ALINK = Color (active link color for document, default red)
c. Elemen Heading <hx>
Tag heading berfungsi untuk memformat heading (judul dan sub-judul) dari suatu halaman web. Heading ini akan memperbesar ukuran huruf untuk setiap jenis heading. Ada 4 macam heading yang dikenal di HTML, yaitu dari <h1>, <h2>, <h3>, <h4>. Penjelasannya dari ke 4 macam heading adalah :
<h1> : Huruf kapital atau besar di semua tulisan
<h2> : Huruf besar di awal kalimat
<h3> : Huruf besar di setiap awalan kata
<h4> : Huruf kecil di semua tulisan
1.1.2. Membuat Dokumen HTML
Untuk membuat dokumen Web yang bisa ditampilkan di browser, perlu menuliskan kode HTML baik secara langsung misal pada editor notepad maupun wordpad. Maupun secara tidak langsung menggunakan Macromedia Dreamweaver. Dokumen HTML harus disimpan dengan ekstensi “.htm” atau “.html”.
Langkah–langkah membuat sebuah dokumen WEB secara langsung dengan menggunakan NOTEPAD adalah:
1. Buka program notepad dengan mengklik menu start, kemudian pilih all program, kemudian pilih accessories, dan klik Notepad.
2. Sebagai contoh ketiklah kode berikut:
<html>
<head>
<title>PENERIMAAN PESERTA DIDIK BARU</title>
</head>
<body>
SD AL-AZHAR BANDAR LAMPUNG
PERGURUAN YAYASAN AL-AZHAR LAMPUNG
TAHUN PELAJARAN 2024-2025
</body>
</html>
3. Simpan file dengan mengklik menu FILE, kemudian pilih SaveAs, maka akan muncul sebuah kotak dialog penyimpanan yang menanyakan lokasi penyimpanan, nama file dan type penyimpanan.
4. tentukan lokasi penyimpanan pada drop-down Save in
5. Pilih All Files pada drop-down list Save as type
6. Isikan nama lengkap file beserta ekstensinya, misalnya LATIHAN1.html pada isian file name. lebih jelasnya lihat gambar berikut:
Klik tombol Save untuk menyimpan.
1.1.1. Melihat dokumen Web pada Browser
Langkah-langkah untuk melihat tampilan dokumen web pada browser adalah:
- buka browser internet explore atau mozilla, dengan mengklik menu Start, kemudian pilh program dan klik internet explore atau mozilla.
- klik menu file, kemudian pilih open
- ketika jendela open muncul, klik tombol browse. ketika jendela baru muncul, cari folder tempat menyimpan file HTML pada drop-down list save in, kemudian pilih file html yang akan dilihat tampilannya, misalnya LATIHAN1.html.
- klik tombol open, kemudian klik tombol ok. maka di browser akan ditampilkan:
Latihan Praktek 01 :
Ketiklah HTML yang ada dibawah, menggunakan program Notepad kemudian disimpan di drive/data (D) pada folder yang telah kalian buat, ganti nama file dengan Latihan1.html dan save as type menjadi All Files!
<html>
<head>
<title>latihan 01</title>
</head>
<body bgcolor=#003399 text=#ffff00>
<h1>TOKO BUKU FAJAR AGUNG BANDAR LAMPUNG</h1>
<h2>Toko kami menyediakan</h2>
<h3>Macam-Macam Alat Tulis</h3>
<h4>buku, pensil, ballpoint, penghapus, penggaris dll.</h4>
<h3>Macam-Macam Buku Pelajaran</h3>
<h4>bahasa lampung, bahasa inggris matematika, sbdp, pjok, tik dll.</h4>
<h3>Macam-Macam Alat Kantor</h3>
<h4>cap, meja, kursi putar, map dll.</h4>
</body>
</html>
Jalankan browser di Internet Explore atau mozila dan buka file diatas lalu amati apa yang terjadi, huruf pada <h1> dan </h1> akan ditampilkan lebih besar dibandingkan <h2> dan </h2>.
9. Penutup
Demikian untuk pembalajaran hari ini yang dapat bapak sampaikan, semoga apa yang bapak sampaikan bermanfaat bagi kita semua.
Jangan lupa selalu melaksanakan shalat 5 waktu dan senantiasa selalu murojaah agar hafalan kalian tetap terjaga dan jangan lupa selalu berbuat baik dan selalu tolong menolong dan serta jagalah kesehatan.😉
REFLEKSI ATAU KESIMPULAN PEMBELAJARAN
Berdasarkan hasil pembelajaran hari ini dapat diketahui bahwa semua peserta didik sudah mampu memahami materi tentang Membuat properti dokumen dan melihat dokumen html pada web browser. dengan baik.
Dokumentasi Pembelajaran
.png)
.png)
.png)
0 Komentar