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, 17 November 2025
Pembelajaran Ke : 11
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
1.1 Menampilkan Gambar
1.1.1. Mengenal jenis gambar
Jenis gambar yang dapat disajikan dalam halaman web adalah:
1. GIF (Graphic Interchange Format)
Karakteristik dari jenis gambar GIF adalah:
· Ekstensi .gif
· GIF hanya mendukung warna 8 bit atau 256 warna
· Salah satu warna dapat bersifat transparan
· Dapat memasukkan gambar lebih dari satu dalam satu file dan menampilkannya secara bergantian (animasi)
· GIF cocok untuk membuat gambar yang melibatkan sedikit warna, misalnya logo, gambar tombol, banner, ikon, gambar latar belakang dan lain-lain.
2. JPEG (Joint Photograph Experts Graphics)
Karakteristik dari jenis gambar JPEG adalah:
· Ekstensi .jpg/jpeg
· JPEG Mendukung warna hingga 24 bit atau lebih dari 16 juta
· JPEG tidak mendukung transparansi dan animasi
· JPEG cocok untuk menampilkan gambar-gambar yang nyata seperti foto
3. PNG (Portable Network Graphic)
· Ekstensi .png
· PNG merupakan format yang diciptakan khusus untuk web
· Terdapat 2 Jenis PNG, yaitu PNG-8 yang dan PNG-24 yang mendukung gambar 24 bit.
· PNG mendukung animasi dan transparansi.
1.1.2. Cara Menampilkan Gambar
Untuk menampilkan gambar, digunakan tag <img>. tag <img> mempunyai banyak atribut, tetapi hanya satu yang harus disertakan, yaitu atribut src.
bentuk paling sederhana dari tag<img>:
<img src=”nama gambar”>
Contoh:
<img src=”logo.gif”>
<img src=”image/gbr1.jpg”>
Latihan: Menggunakan Tag Gambar
Buka contoh sebelumnya dan tambahkan tag berikut ini:
<html>
<head>
<title>latihan 05</title>
</head>
<body>
<img src= logo.gif>
…
</body>
</html>
1.1.3. Mengatur letak gambar
Tag <img> menyediakan atribut bernama align yang berfungsi untuk mengatur penempatan gambar. Nilai atribut align adalah:
Nilai | Keterangan |
Bottom | Meratakan bagian bawah teks dengan bagian bawah gambar |
Top | Meratakan bagian atas gambar dengan bagian paling atas suatu item pada baris saat ini |
Middle | Meratakan bagian tengah gambar dengan bagian bawah teks |
Left | Meletakkan gambar disebelah kiri teks |
Right | Meletakkan gambar disebelah kanan teks |
1.1.4. Mengatur ruang gambar
tribut-atribut yang dimanfaatkan untuk mengatur jarak gambar terhadap teks adalah
· Vspace, akan memberikan ruang kosong sebanyak nilai yang disebutkan dalam atribut ini (dalam satuan pixel) diatas dan dibagian bawah gambar.
· Hspace, akan memberikan ruang kosong sebanyak nilai yang disebutkan dalam atribut ini (dalam satuan pixel) disebelah kiri dan dibagian kanan gambar.
Contoh Penggunaan:
……………………….
<marquee behavior="alternate" bgcolor="orange">
<strong>Selamat Datang di Website Perguruan Alazhar Lampung</strong>
</marquee>
<hr size="1" noshade>
<p align=center><font color="aqua" face=arial>
<img src="gambar2.jpg" align="left" vspace="2" hspace="3">
Nama ku Aisyah, aku kelas 6A ini pertama kalinya aku membuat program html, aku senang sekali belajar program html, aku selalu memperhatikan setiap guruku menjelaskan didepan dan aku mulai tertarik untuk belajar html.
<b>belajar html itu Asiik</b>
</p>
<p align=right><font color="yellow" face=jokerman font size="5">
<img src="gambar3.jpg" align="left" vspace="80" hspace="3"><br>
<br>Nama ku Faiz, aku kelas 6E awalnya aku bingung belajar html tapi karena aku selalu memperhatikan guruku menjelaskan, akhirnya aku bisa dan ternyata belajar html itu mudah dan menyenangkan lho teman-teman…<b>Ayo Belajar HTML</b>
</p>
</body>
</html>
Maka tampilannya akan seperti berikut ini:
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 belajar materi tentang Elemen Pemformatan Karakter berjalan dengan baik.
Dokumentasi Pembelajaran
.png)
.png)
.png)
.png)
0 Komentar