Web sayfasına resim yerleştirmek için img etiketi kullanılır. Etiketin bazı parametreleri ve alabileceği değerler aşağıda verilmiştir. src kaynak (source) parametresi :Resmin yerini gösterir. alt parametresi : resim görüntülenmediğinde veya resim açıklama yazısı için kullanılır. align parametresi : resmin paragrafa göre nasıl yerleşeceğini belirler.
Değerleri left, right, top, bottom, center olabilir. width parametresi : resmin pixel (örn. 100px )olarak genişliğini belirler. Yüzde olarak değerler de alabilir (örn. 50%). height parametresi : resmin pixel (örn. 100px )olarak yüksekliğini belirler. Yüzde olarak değerler de alabilir (örn. 50%). border parametresi : resmin çerçevesini pixel (örn. 100px )olarak belirlemek için kullanılır.
align parametresi ile çalışan paragraf parametrelerinin arasında resim yerleştirmenin daha doğru sonuçlar verdiğini görebilirsiniz. Tablo 1 de bazı resimlerin parametreleri ile birlikte sayfaya nasıl yerleştiğini görebilirsiniz.
Tablo 1 :
p etiketi ve img etiketinin parametreler ile kullanımı
<html><head>
<title>Başlık Çubuğu Metni</title></head>
<body>
<p align='justify'>
<img
src='resim/erlen.png' align='right'
border='1px' alt='500 mL Erlen'
width='30%'
/>
Dibi düz, koni biçimli cam malzemedir.
Özellikle titrasyon işlemlerinde kullanılır.
Çözelti hazırlamak, çözelti kaynatmak
ve saklamaya kadar daha birçok amaçla kullanılmaktadır.
</p>
</body>
</html>
Şimdi web sayfasının yerine ve resmin yerine
bağlı olarak web sayfası içine tanımlamaların nasıl yapılacağına göz atalım.
İki dosyada aynı yerde ise; src parametresi
<img
src="resim.gif">
şeklindedir.
Resim web sayfasının bulunuduğu dizinin bir altındaysa; src parametresi
<img src="alt_dizin1/resim.gif">
şeklinde düzenlenmelidir.
Resim web sayfasının bulunuduğu dizinin alt dizininin altındaki bir
dizinde yer alıyorsa; src parametresi
<img
src="alt_dizin1/daha_alt_dizin/resim.gif">
şeklinde düzenlenmelidir.
Resim web sayfasının bulunduğu dizinin bir üst dizinindeyse; src
etiketi;
<img src="../resim.gif">
şeklinde düzenlenmelidir.
Resim web sayfasının bulunduğu dizinin iki üst dizinindeyse; src
parametresi;
<img src="../../resim.gif">
şeklinde düzenlenmelidir.
Resim ve web sayfası aynı dizinin farklı alt dizinlerinde bulunuyorsa;
src parametresi;
Web sayfalarına resim yerleştirirken dikkat edilmesi gereken noktalardan biri de resmin büyüklüğüdür.
Resmin büyüklüğü ayarlanarak
- Disk alanından, yükleme ve indirme band genişliğinden, zamandan tasarruf yapılmasını sağlar.
Tablo 1 de aynı resim ile ilgili resim kaliteleri, boyutları, resim türü etkisi gösterilmiştir.
Tablo 2 :
Resim dosyasını boyutunun resimin uzantısı, büyüklüğü, ve renk sayısına göre değişimi
Web sayfasına video yerleştirmek için video etiketi kullanılır. Etiketin bazı parametreleri aşağıda verilmiştir. autoplay :video hazır olduğunda otomatik olarak çalıştırma parametresidir. loop : videonun başladıktan sonra kaç defa tekrar edileceği ile ilgili parametredir. src parametresi : özel bir adresteki video kaynak adresi parametresidir. controls : video kontrolü için çeşitli düğmelerin görüntülenmesi için kullanılan parametredir. width parametresi : videonun genişliğini ayarlamak için kullanılan parametredir. height parametresi : videonun yüksekliğini ayarlamak için kullanılan parametredir.
Ayrıca bu etikete ilişkin kullanım biçimi Tablo 3 de gösterilmiştir.
Aşağıdaki örnekte bir ses dosyasının audio etiketi ile sayfaya nasıl eklenebileceği örneklenmiştir.
audio etiketi mp3, ogg ve wav uzantılı dosyaları destekler.
