Şimdiye kadar pek çok metne baktık, ancak webde sadece metin olsaydı gerçekten çok sıkıcı olurdu. Web’i daha ilginç içeriklerle nasıl canlandıracağımıza bakalım! Bu kılavuzda, görüntülerin dahil edilebileceği farklı yollar, video, ses ve hatta tüm web sayfalarının nasıl gömüleceği de dahil olmak üzere, web sayfalarınıza multimedya eklemek için HTML’nin nasıl kullanılacağına bakacağız.
Önkoşullar:
Bu kılavuza başlamadan önce HTML’ye Giriş bölümünde ele alındığı gibi, HTML’nin temelleri hakkında temel bir anlayışa sahip olmalısınız. Bu kılavuz üzerinde çalışmadıysanız, önce oradan başlamanızı tavsiye ederiz.
Not : Kendi dosyalarınızı oluşturamadığınız bir bilgisayar/tablet/başka bir cihaz üzerinde çalışıyorsanız, kod örneklerini (çoğu) çevrimiçi bir kodlama programında deneyebilirsiniz, örneğin JSBin veya glitch.
Bu kılavuz size web sayfalarına multimedya yerleştirmenin tüm temellerini gösterecek olan aşağıdaki makaleleri içerir.
HTML’de görseller
Göz önünde bulundurulması gereken başka türler olsa da, multimedyaya <img> gibi basit bir görüntüyü web sayfasına yerleştiren bir öğe ile başlamak mantıklıdır. Bu makalede, HTML’de görsellere, temel bilgiler de dahil olmak üzere, bakacağız. <figure> öğesinin nasıl kullanılacağına ve bu öğeye altyazılarla açıklama eklemeye ya da CSS arka plan resimleriyle nasıl ilişki kuracağımıza bakacağız.
Video ve ses içeriği
Ardından, farklı tarayıcılara farklı dosya biçimlerine erişim sağlama, video yazıları ve alt yazılar ekleme ve eski tarayıcılar için nasıl destek verileceği de dahil olmak üzere sayfalarımıza video ve ses yerleştirmek için HTML5’in <video> ve <audio> öğelerinin nasıl kullanılacağına bakacağız .
<object>’den <iframe>’e — diğer gömme teknolojileri
Buraya kadar çok çeşitli içerik türlerini web sayfalarınıza yerleştirmenize olanak tanıyan öğelere baktık. Şimdi <iframe>, <embed> ve <object> öğeleri ile bir adım daha ileri atmak istiyoruz: <iframe> diğer web sayfalarını gömmek için kullanılırken diğer ikisi PDF’leri, SVG’yi ve hatta Flash’ları gömmenize izin verir.
Web’e vektör grafikleri ekleme
Vektör grafikleri bazı durumlarda çok faydalı olabilir. PNG/JPG gibi normal biçimlerin aksine, yakınlaştırıldığında bozulmazlar/pikselleşmezler – ölçeklendiğinde de düzgün kalabilirler. Bu makale, vektör grafiklerinin ne olduğunu ve popüler SVG formatının web sayfalarına nasıl dahil edileceğini tanıtır.
Duyarlı görseller
Bu makalede, çok farklı ekran boyutlarına, çözünürlüklere ve bu tür diğer özelliklere sahip cihazlarda iyi çalışan görselleri öğreneceğiz. HTML’nin bunları uygulamaya yardımcı olmak için hangi araçları sağladığına bakacağız. Bu özellik farklı cihazlarda performansı artırmaya yardımcı olur. Duyarlı görüntüler duyarlı tasarımın da parçasıdır.
değerlendirmeler
Aşağıdaki değerlendirme, bu kılavuzda gösterilen HTML temellerini ne kadar anladığınızı test edecektir:
Mozilla açılış sayfası
Bu değerlendirmede, kılavuzumuzda incelediğimiz bazı teknikler hakkındaki bilginizi test edeceğiz. Örneğimizde Mozilla’nın açılış sayfasına bazı resimler ve videolar ekleyeceğiz.
Ayrıca bakınız
Bir resmin üzerine görsel haritası ekleme
Görsel haritaları, bir görselin farklı kısımlarını farklı yerlere bağlamak için kullanılır. (Tıkladığınız her farklı ülke hakkında daha fazla bilgiye bağlantı veren bir harita düşünün.) Bu teknik bazen faydalı olabilir.