Bir yazı dosyası açalım ve uzantısını html olarak ayarlayalım. Biz dosyamızın adını 002.html koyduk.
Şu kodları dosyamıza yazalım:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>Tekir</h1>
<img src="./resimler/1920.jpg" title="Kasaba" alt="1920" width="100%">
Nasreddin Hoca eve bir okka yahnilik et almış, bir ara işten eve uğrayarak hanımına etleri teslim etmiş ve işe geri dönmüş. Hanımı hazırlıklarını tamamlayıp etleri pişirdiği sırada misafirler çıkagelmişler. Misafirlere karşı cömert olan kadın, pişirdiği etleri onlara ikram etmiş, tüm etler bitmiş. Akşam yahnilik etin hasretiyle eve gelen Nasreddin Hoca, hanımının önüne koyduğu bir tabak pilavı görünce, şaşırıp yahnilik eti neden pişirmediğini sormuş. Nasreddin Hoca'dan çekinen hanımı, eti bizim kedi Tekir yedi demiş. Nasreddin Hoca hışımla fırlayarak Tekir'in peşine düşmüş. Tekir'i yakalamış, ancak bakmış ki Tekir'in neredeyse kemikleri görünecek. Tekir'i tutmuş ve teraziye çıkarmış, bakmış ki bir okka geliyor:
<br>
"Yahu hatun" demiş,
<br>
"Bizim eti Tekir yedi ise, Tekir nerede? Yok bizim Tekir burada ise yahnilik et nerede?"
<br>
</body>
</html>
<img src="./resimler/1920.jpg" title="Kasaba" alt="1920" width="100%"> tagı ile resmimizi geçen dersteki yazımıza eklemiş olduk. title="Kasaba" tanımı ile resmimizin üzerinde mouse ile gezinirken görünecek yazıyı tanımlamış olduk. alt="1920" ile resmimiz açılmadığı takdirde görüntülenecek altındaki yazıyı tanımladık. width="100%" ile resmimizin genişliğini bulunduğu elementin tamamını kaplayacak şekilde ayarladık. Genişliği dilersek uzunluk belirterek ayarlayabiliriz. Ayrıca height="400px" veya height="300em" gibi bir tanımlama ekleyerek yüksekliği de istediğimiz şekilde ayarlayabiliriz. Ancak cep telefonu ve tablet uyumu açısından yüksekliği tanımlamadan genişlik için yüzdesel bir ölçü kullandık. Tarayıcınızın boyutunu değiştirerek sayfayı açmayı denediğinizde resmin sayfanın boyutuna göre konumlandığını görebilirsiniz. Günümüzde cep telefonları ve tabletlerden internet kullanımı oldukça yaygınlaşmış durumda, bir internet sitesi hazırlerken onlarla uyumlu olmasını gözardı etmek pekte makul olmayacaktır. Bu konuda farklı boyuta resmin farklı ölçeklendirilmiş hallerini kullanmak gibi çözüm yolları da var. Yeni eklediğimiz viewport meta tagı ile cep telefonu-tablet uyumluluğunu tarayıcımıza bildirmiş olduk. Viewport meta tagını da standart olarak kullanmanız faydalı olacaktır.
src="./resimler/1920.jpg" tanımlaması ile kullanacağımız resimin yerini bildirdik. Tarayıcımıza bulunduğumuz dizindeki resimler klasörünün içine bak ve 1920.jpg resimini bularak sayfada göster demiş olduk. ./ bulunduğumuz dizini simgeler. ../ bir üst dizini simgeler. ../../ iki üst dizini simgeler. Bu tanımlamaları kullanarak dilediğiniz klasördeki resimi html dosyanızda kullanabilirsiniz.
Boyutlandırmada kullandığımız em, göreceli bir değerdir. Değerini kendisine en yakın tanımlanmış üst elementten alır. Örneğin bir üst element 20px olarak tanımlanmışsa 1em değeri 20px değerine eşit olur. 1.5em ise 30px değerine eşit olur. Yüzde olarak tanımlama yapacağımız zaman ise dikkat edeceğimiz % işaretinin tanımın başına değil, sonuna eklendiğidir. (Türkçe'deki gibi başta değil yani)
<img> tagı için usemap, srcset, sizes, longdesc, ismap, crossorigin gibi farklı tanımlamalar da kullanılabilir. Ayrıca html global tanımlamalarından herhangi birisi veya html olay tanımlamalarından herhangi birisi de kullanılabilir.
<img> tagını yazıdan sonra veya başlıktan önce de ekleyebilirdik. Resmimizi body tagının içerisinde herhangi bir yere konumlayabiliriz.
Resimlerinizi optimize ederek yüklemek sayfalarınızın daha hızlı açılmasına katkı sağlayacaktır. GNU/linux işletim sistemlerinden birini kullanıyorsanız komut satırında jpegoptim, optipng gibi programlar işinizi görecektir. Windows üzerinde de çalışan benzeri optimizasyon programları mevcut.
2. dersimizin dosyalarını indirmek için
tıklayınız.