| Ana Sayfa  | Çalışmalar | Dersler | Ders Programı | Simülasyonlar  | Diğer | İletişim |

Web Sayfasına Nesne Yerleştirmek

img Etiketi İle Resim Yerleştirmek

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.

web_sayfam_resim1.jpg (13601 bytes) İki dosyada aynı yerde ise; src parametresi

<img src="resim.gif">

şeklindedir.

web_sayfam_resim2.jpg (13446 bytes) Resim web sayfasının bulunuduğu dizinin bir altındaysa; src parametresi

<img src="alt_dizin1/resim.gif">

şeklinde düzenlenmelidir.

web_sayfam_resim3.jpg (13530 bytes)  

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.

web_sayfam_resim4.jpg (13565 bytes) Resim web sayfasının bulunduğu dizinin bir üst dizinindeyse; src etiketi;

<img src="../resim.gif">

şeklinde düzenlenmelidir.

web_sayfam_resim5.jpg (13153 bytes) Resim web sayfasının bulunduğu dizinin iki üst  dizinindeyse; src parametresi;

<img src="../../resim.gif">

şeklinde düzenlenmelidir.

web_sayfam_resim6.jpg (13503 bytes) Resim ve web sayfası aynı dizinin farklı alt dizinlerinde bulunuyorsa; src parametresi;

<img src="../alt_dizin2/resim.gif">

şeklinde düzenlenmelidir.

web_sayfam_resim7.jpg (13529 bytes) Yandaki durum için; src parametresi;

<img src="../alt_dizin2/daha_alt_dizin/resim/resim.gif">

şeklinde düzenlenmelidir.

web_sayfam_resim8.jpg (13119 bytes) Resim ve web sayfası aynı dizinin farklı alt dizinlerinde bulunuyorsa; src parametresi;

<img src="../../../alt_dizin1/daha_alt_dizin/resim.gif">

şeklinde düzenlenmelidir.

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


png dosya uzantılı (Mod : RGB)
Genişlik : 377 piksel, Yükseklik : 237 piksel
Dosya Boyutu : 162 KB

jpg dosya uzantılı (Mod : RGB)
Genişlik : 377 piksel, Yükseklik : 237 piksel
Dosya Boyutu : 120 KB

jpg dosya uzantılı (Mod : RGB)
Genişlik : 189 piksel, Yükseklik : 119 piksel
Dosya Boyutu : 61 KB

gif dosya uzantılı (Mod : Indekslenmiş Renk : 256 )
Genişlik : 189 piksel, Yükseklik : 119 piksel
Dosya Boyutu : 19 KB

video Etiketi İle Video Yerleştirmek

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.

Tablo 3 : video etiketinin parametreler ile kullanımı


<html><head>
<title>Başlık Çubuğu Metni</title></head>
<body>

<p align='justify'>

<video width="300" controls>
  <source src="resim/desikator_01.mp4" type="video/mp4">
</video>

</p>
</body>
</html>

 

audio Etiketi İle Ses Dosyası Yerleştirmek

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.

<audio controls>
  <source src="KimyaGuzeldir.ogg" type="audio/ogg">
  <source src="KimyaGuzeldir.mp3" type="audio/mpeg">
  Web Tarayıcının audio Etiketini Desteklememektedir.
</audio>

iframe Etiketi İle Sayfa İçinde Sayfa Yerleştirmek

Aşağıdaki örnekte bir sayfanın içine bir sayfa veya sayfa adresin nasıl eklenebileceği gösterilmiştir.

iframe Örnek Deseni :

<iframe src="http://kimya.balikesir.edu.tr" title="Kimya Bölümü Web Sayfası" width='800' height='300' ></iframe>

iframe Örnek Deseninin Sonucu :

object Etiketi İle Sayfaya Bir Nesne Yerleştirmek

Bu etiket kullanılarak sayfaya birçok farklı nesne yapıştırılabilir. Örnek kodlar ve sonuçları aşağıda verilmiştir.

object Örnek Deseni :

<object data="resim/png.png" width="400" ></object>

object Örnek Deseni Sonucu :

object Örnek Deseni :

<object data="resim/desikator_01.mp4" width="400" </object>

object Örnek Deseni Sonucu :