Nama Guru : Novarief Saisywa, S.Kom.
Satuan Pendidikan : SD Al-Azhar 2 Bandar Lampung
Mata Pelajaran : Teknologi Informasi dan Komunikasi (TIK)
Kelas / Semester : 6D / 1
Hari, Tanggal : Senin, 28 Juli 2025
Pembelajaran Ke : 02
Selamat pagi anak sholeh - sholehah kelas 6D 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
Assalammualaikum anak sholih dan sholihah bagaimana kabarnya hari ini? semoga selalu diberikan kesehatan. Aamiin.
Apersepsi
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)
0 Komentar