Pertemuan 3

Cover

Melanjutkan pembelajaran tentang teknologi web dan pengembangan website.

Gallery

Image Tag

🖼️ Tag <img>

Tag untuk menampilkan gambar:

Attributes:
•

src

= path ke file gambar
•

alt

= deskripsi jika gambar tidak bisa ditampilkan

File Organization

📁 Organize Files Properly

                    
                      Project Structure:
                    
                    my-gallery/
                    
                      ├── index.html
                    
                      ├── styles.css
                    
                      └──
                    
                      artworks/
                    
                          ├── drawing1.jpg
                    
                          ├── drawing2.jpg
                    
                          └── drawing3.jpg

Pro tip: Selalu simpan gambar dalam folder artworks/ agar tetap rapi dan mudah di-manage.

Gallery Markup Example

💻 Gallery Markup

                    <section class="gallery">
                    
                      <div class="artwork">
                    
                        <img src="artworks/drawing1.jpg"
                    
                              alt="My first drawing">
                    
                        <h3>Drawing 1</h3>
                    
                        <p>Description here...</p>
                    
                      </div>
                    
                    </section>

Struktur: Setiap artwork punya image, title, dan deskripsi

Why Alt Text?

✨ Mengapa Alt Text Penting?

📱 Aksesibilitas
Screen reader membaca alt text untuk user dengan visual impairment

🔍 SEO (Search Engine)
Google menggunakan alt text untuk understand gambar

⚠️ Jika Gambar Error
Alt text ditampilkan jika gambar tidak bisa di-load

Contoh Alt Text Baik: "Abstract watercolor painting with blue and purple swirls" (bukan "image1" atau "pic")

Activity

🎯 Your Activity

Siapkan 5 gambar
Simpan di folder artworks/
Tambahkan <img> tags
Create markup untuk setiap artwork dengan title & description
Isi alt text dengan deskripsi
Gunakan 5-10 kata yang deskriptif
Test di browser
Verifikasi semua gambar tampil dengan baik