Temel Etkileşimler, Medya Kullanımı ve Yapı Öğeleri
Bu yazı, “4 Etapta HTML” adlı serinin üçüncü bölümüdür. Bu bölümde HTML ile etkileşimli sayfalar yapmayı, ses ve video eklemeyi, span/div farklarını ve sayfa düzenini anlatacağım. Her bölümde örnek kodlar sade bir şekilde açıklanmıştır.
1. Butonla Etkileşim Sağlamak HTML ile sadece görüntü değil, kullanıcıyla etkileşim de kurabiliriz. En basit örneği, bir butona tıklanınca bir yazının değişmesi.Senaryo:Sayfada “Çay içseneee!” yazıyor. Altına bir “ÇAY” butonu koyuyoruz. Butona tıklanınca yazı “Afiyet olsunnnnnnn” olarak değişiyor.Yapısı şöyle olur:Bir buton oluşturulur. Arka planı camgöbeği (cyan), yazı rengi koyu yeşil (darkgreen), genişliği 100px ve kenarları oval (border-radius: 15px).Butonun onclick özelliğine bir fonksiyon bağlanır.JavaScript ile getElementById kullanılarak yazının içeriği değiştirilir.Örnek anlatım:1. <button> etiketiyle bir buton oluştur.2. id atadığın <p> etiketi ile bir yazı yaz.3. Aşağıda JavaScript kodu ile onclick olayında bu yazıyı değiştir.
2. Meta Etiketleri – Sayfa Bilgileri Meta etiketleri, HTML belgesinin <head> kısmına yazılır ve sayfa hakkında bilgi verir. Bu bilgiler tarayıcılar ve arama motorları tarafından kullanılır.Örnek kullanım:description etiketiyle sayfanın kısa açıklaması verilir.keywords etiketi ile sayfanın anahtar kelimeleri yazılır.author ile sayfanın yazarı belirtilir.refresh etiketiyle sayfa belirli saniyelerde otomatik yenilenebilir.Örnek içerik açıklaması:Açıklama: “Nasıl başarılı olunur?”Anahtar kelimeler: başarı, bilge, başarılarYazar: miyavıala başkanı Sayfa her 3 saniyede yenileniyor.
Span ve Div Farkı= Span: Satır içi (inline) bir etikettir. Metnin bir parçasını farklı renkte göstermek, vurgulamak için kullanılır.Div: Blok (block) yapısında bir etikettir. İçerik bölümlendirmek veya bir alanı kutu gibi ayırmak için kullanılır.Örnek:Span ile yeşil zeminli bir kelime vurgulanır: “BU BİR MİYAVDIR”Div ile mor (lavanta) arka planlı bir kutu içinde uzun bir metin yer alır:“Fezayı bağlayarak yorgun kanatlarına, bir güvercin uçurup kıtalar arasından çağırın beni.”
4. Sayfa Arka Planı ve Yazı Rengi HTML sayfanın görünümünü güzelleştirmek için arka plan rengi ve yazı rengi ayarlanabilir.Örnek:Arka plan rengi: pembe Yazı rengi: lacivert Bu şekilde göze hoş gelen bir tasarım yapılabilir. Sayfaya şöyle bir başlık da eklenebilir:“RENKLİ DÜNYAMA HOŞGELDİN!”
5. Sayfaya Ses Eklemek HTML ile sayfaya ses dosyası (örneğin bir müzik veya efekt) eklemek mümkündür.Bunun için <audio> etiketi kullanılır.Kullanımı şu şekilde açıklanabilir:<audio controls> yazarak ses çalar oynatıcısı oluşturulur.İçine <source src=”dosya.mp3″ type=”audio/mpeg”> şeklinde ses dosyasının yolu yazılır.Tarayıcı desteklemiyorsa gösterilecek alternatif bir mesaj da eklenebilir: “Tarayıcınız ses etiketini desteklemiyor.”Bu yapı sayesinde kullanıcı isterse sesi başlatır veya durdurur.
6. Sayfaya Video Eklemek Tıpkı ses gibi video da sayfaya kolaylıkla gömülebilir. Bunun için <video> etiketi kullanılır.Örnek anlatım:Genişliği 320px, yüksekliği 240px olan bir oynatıcı oluşturulur.controls özelliği ile durdurma, oynatma ve sarma seçenekleri gelir.İçine <source src=”kedim.mp4″ type=”video/mp4″> şeklinde video yolu belirtilir.Eğer tarayıcı desteklemiyorsa kullanıcıya bir mesaj gösterilir.Bu yöntemle bir kedinin videosu, tanıtım ya da eğitim videosu rahatça yerleştirilebilir.
Sonuç= Bu bölümde HTML ile sayfayı daha canlı ve işlevsel hâle getirmenin yollarını öğrendik. Butonlarla yazı değiştirmek, ses veya video eklemek gibi etkileşimli unsurlar HTML öğreniminde önemli basamaklardır. Aynı zamanda yapı düzeni için span ve div gibi etiketlerin ne işe yaradığını da kavradık.
Hayallerin için gerçeği kodla! 🙂
