Web Tasarım ve Programlama-HTML Etiketleri-3

14. <img> Etiketi ;
 

Sayfamıza resim yerleştirmek için kullanılan etikettir. Etiketin kullanımına geçmeden önce Internet üzerinde kullanılan resim dosyası biçemleri üzerinde durmak istiyorum. Internet üzerinde en çok kullanılan resim dosyası biçemleri GIF, JPG ve PNG’dir. Bu biçemlerin seçilmesindeki amaç sayfanın yüklenmesini kolaylaştırmaktır. Windows ortamında en çok kullanılan resim formatı olan BMP'lerin web üzerinde kullanılmamasının en büyük sebebi, iyi resim kalitelerine karşın bunun bir bedeli olarak boyutlarının çok büyük olmasıdır. Kullanılan üç biçemin kendine has bazı özellikleri vardır.

GIF biçemi 256 renk kullanarak ve JPG biçemi de resmin kalitesinden biraz kısarak boyut sorununu halleder.

Bunun yanı sıra sayfamızda, mecbur kalmadıkça, büyük boyutlarda (hem ebat hem de kb olarak) resimler kullanmaktan kaçınmak sayfamızın yüklenmesini kolaylaştıracaktır. Yine bu etikette de sonlandırıcı yoktur. Yani bir yorum aralığı belirtmez.

Bu etiket altında kullanacağımız resmin bazı özelliklerini belirtmek için tanımlayıcı bazı kodlar kullanırız. Bu kodları aşağıdaki tabloda belirttim.

Tablo 1.8. Resim kullanımı için yardımcı kodlar

Girilecek Kod	Görevi
src = "resim_dosyası"	Kullanacağımız resim dosyasının tam yolunu yazarak, hangi resmin kullanılacağını belirtiriz.
width = "genişlik"	Resmin genişliği burada tanımlanır. Büyük bir resminiz varsa genişlik değerini "100%" vererek resmin web istemci genişliğine dinamik uydurulmasını sağlayabilirsiniz.
height = "yükseklik"	Resmin yüksekliği burada tanımlanır.
vspace = "düşey_aralık"	Resmimizi eğer metin içinde kullanıyorsak metne olan dikey uzaklığı.
hspace = "yatay_aralık"	Resmimizi eğer metin içinde kullanıyorsak metne olan yatay uzaklığı.
alt = "metin"	Resmin üzerinde fare ile bir süre beklendiğinde çıkan açıklayıcı bilgi burada tanımlanır.
border = "değer"	Resmin dışında çerçeve çizgisi olacaksa "1", olmayacaksa "0" değeri kullanılır..

<img src=”./resimler/banner.jpg” width=”250” height=”85” alt=”Bilgisayar Topluluğu”>

Yukarıdaki satır bulunduğumuz dizinin bir üstünde bulunan “resimler” dizinindeki “banner.jpg” dosyasını belirtilen ölçüler doğrultusunda ekrana basar. (Resmin boyutlarını belirtmek zorunlu değildir!). “Alt” kodu ile tanımlı kısım da resmin üzerinde belli bir süre beklendiğinde “Bilgisayar Topluluğu” yazısının belirmesini sağlar.

15. <a> </a> Etiketi ;
 

Bu etiketi bir adres belirterek başka sitelere, sayfalara ya da aynı sayfanın farklı bölümlerine bağ vermek veya eposta adreslerini yazmak için kullanırız. Web istemciler genellikle öntanımlı olarak bağları altı çizili ve mavi olarak görüntüler. <a> etiketinin bir yorum aralığı vardır ve çeşitli tanımlayıcı kodlar da etiket ile birlikte kullanılabilir.

Tablo 1.9. Bağ vermek için kullanılan kodlar

Girilecek Kod	Görevi
href = "URL"	Yorum alanındaki bileşene tıklandığında yorumlanacak adres.
target = "hedef"	Yorum alanındaki bileşene tıklandığında sayfanın açılacağı yer belirtilir.
name = "isim"	Sayfa içi bağlantılarda başka bir bağın hedefi olacak yeri belirtmek için kullanılır.
type = "mime_türü"	Hedefin içeriğini belirtmek için kullanılır.

<a href=”http://www.belgeler.org”>Linux Belgelendirme Çalışma Grubu</a>

<a href="http://www.slackware.com" target="new">Slackware Linux</a>

<a href="mailto:fni18444@gantep.edu.tr">Fehmi Noyan İSİ</a>

Linux Belgelendirme Çalışma Grubu

Slackware Linux

Fehmi Noyan İSİ

 

İlkinden farklı olarak ikinci kodda “target” özelliğini kullandım. Target özelliğine “new” değerinin verilmesi ile açılacak yeni site yeni bir istemci penceresinde açılır.

Üçüncü satır belirtilen adrese eposta yollamak için kullanılır. Bağın üzerine tıklandığı zaman web istemcisinde öntanımlı olarak kayıtlı eposta istemcisi açılacaktır.

Bunların dışında resimleri de bağ olarak kullanabilme imkanımız var. Sayfamızda resimleri bağ olarak kullanabilmek için kullanmamız gereken kalıp aşağıdaki gibidir.

<a href=”http://www.belgeler.org”><img src="../images/belgeler-logo.png" border="0"></a>

<a href=”http://www.belgeler.org”><img src="../images/belgeler-logo.png" border="1"></a>

16. <font> </font> Etiketi ;
 

HTML dosyası içinde yazdığımız yazıların ekrana nasıl bir çıktı vereceğini bu etiket ile belirleriz. Uyumlu yazı tipleri ve renkler ile sayfanıza güzel bir görünüm kazandırabilirsiniz. Bu etiketin kullanımına alternatif olarak sayfanızda CSS de kullanabilirsiniz. CSS kullanımı sayesinde fazla kod yazımından da kurtulmuş olursunuz. Etiket ile birlikte yazı tipi, renk ve boyut belirtmek üzere üç kod kullanılır.

Tablo 1.10. Font etiketi kodları

Girilecek Kod	Görevi
face = "yazıtipi"	Kullanılacak yazı tipi belirlenir.
color = "renk"	Yazacağımız yazının rengi belirlenir.
size = "boyut"	Yazımızın boyu belirlenir.

<p><font face="tahoma" size="3" color="maroon">
<b>Burada bir yazı var.</b></font></p>

<p><font face="tahoma" size="4" color="maroon">
<b>Burada bir yazı var.</b></font></p>

<p><font face="tahoma" size="5" color="maroon">
<b>Burada bir yazı var.</b></font></p>

<p style="color:maroon;font-family:tahoma;font-weight:bold;font-size:125%">
Burada bir yazı var.</p>

<p class="author">Burada bir yazı var.</p>

Burada bir yazı var. Burada bir yazı var. Burada bir yazı var. Burada bir yazı var. Burada bir yazı var.

17. <acronym> </acronym> Etiketi ;

 

Kısaltmalar için kullanılır.

<acronym title="Linux Kullanıcıları Derneği">LKD</acronym>

LKD

Fare, "LKD" üzerine getirildiğinde kısaltmanın açılımı balon içinde görüntülenecektir.

18. <meta> </meta> Etiketi ;

 HTML dosyasındaki head etiketinin yorum aralığında tanımlanan bu etiket web istemcisine ve arama motorlarına sayfamız hakkında bilgi verir. Bu etiketi ile birlikte kullanılan yardımcı kodların açıklaması ilk bakışta size biraz karmaşık gelebilir. Her kodun kendisi ile birlikte tanımlanan yardımcı kodları da olduğu için bu etiket ile birlikte kullanılan kodların listesini öncekilerden daha farklı bir şekilde vermeyi uygun gördüm.
Tablo 1.11. Meta etiketi ana kodları
Girilecek Kod Görevi
name = "veritürü" Bu bölümde author, description ve keywords özellikleri tanımlanır.
http-equiv = "veritürü" Bu bölümde refresh, expires, content ve content-style-type özellikleri tanımlanır.
size = "boyut" Yazımızın boyu belirlenir.
Yukarıdaki tabloda verdiğim kodlar ile birlikte tanımlanan yardımcı kodları tablo şeklinde vermek yerine örnek şeklinde vermenin daha faydalı olacağını düşündüm.

<meta name=”author” content=”Linux Belgelendirme Çalışma Grubu”>

<meta name=”description” content=”Linux Belgelendirme Çalışma Grubu Web Sayfası”>

<meta name=”keywords” content=”linux unix bsd openbsd freebsd programlama ozguryazılım özgüryazılım sunucu internet”>

Yukarıdaki birinci satır (author), sayfayı hazırlayanların kim olduğu hakkında kısa bilgiler verir.
İkinci satır (description), sitenin ne hakkında olduğuna dair kısa bir bilgi verir.
Sonuncu satır ise (keywords), arama motorlarına bilgi sağlamak için kullanılır. Yani siz bir arama motoruna girip arama kısmına linux, unix, bsd, openbsd, freebsd, programlama, özgüryazılım, sunucu, internet sözcüklerinden birisini yazarsanız bu site adresi de görüntülenecek adresler arasında olacaktır.

<meta http-equiv=”refresh” content=”5; URL=http://www.belgeler.org/”>

<meta http-equiv=”expires” content=”Wed, 25 Feb 2002 12:00:00 GMT”>

<meta http-equiv=”content” content-type=”text/html; charset=iso-8859-9”>

<meta http-equiv=”content-style-type” content=”text/css”>
Yukarıdaki birinci kod satırı (refresh) sayfamız açıldıktan 5 saniye sonra belirtilen adresi otomatik olarak açacaktır.
İkinci kod satırı (expires) GMT saat sistemine göre belirtilen saat ve tarihte sayfanın dosyası silinecektir.
Üçüncü kod satırı (content) tarayıcıya html dosyamızda kullandığımız karakter kodlamasının ISO-8859-9 olduğunu belirtir.
Dördüncü ve son satır (content-type-style) belgemizde kullanılan CSS dosyamızın bir metin dosyası olduğunu belirtir.
Daha öncede belirttiğim gibi meta etiketi ile tanımlanan bilgiler kullanıcıya görüntülenmez. Bu bilgiler genellikle tarayıcıya ve arama motorlarına bilgi sağlamak için kullanılır.

19. <!-- --> Etiketi ;

Bu etiket yorum aralığı olarak kullanılır. Bu kodun kullanım amacı HTML kodunun içine kullanıcıya görünmeyen açıklamalar yerleştirmektir. (İlk etapta işimize yaramasa bile tablo ve frame kullanarak hazırlanan karışık HTML dosyalarında çok yardımcı olacaktır.)

<!-- Burası bir yorum aralığı ve bu kısım sayfada görünmez!!!!