HTML’de Sınıflar (Class)

Web tasarım derslerimize devam ediyoruz. Bugün HTML’de sınıfları inceleyeceğiz.

class özelliğini daha önceki derslerimizde öğrenmiştik; şimdi bu özelliği div’e stil verme vb. konularda nasıl kullanabileceğimizi öğreneceğiz.

Şimdi vereceğimiz örnekte 3 adet div olacak; biz bu div’lere CSS ile biraz stil vereceğiz.

Örnek:

<!DOCTYPE html>
<html>
<head>
<style>
div.sehirler {
    background-color: black;
    color: white;
    margin: 20px 0 20px 0;
    padding: 20px;
    font-family: Century Gothic;
}
</style>
</head>
<body>

<div class="sehirler">
<h2>İstanbul</h2>
<p>İstanbul, Türkiye'de yer alan şehir ve ülkenin 81 ilinden biri. Ülkenin en kalabalık, ekonomik ve sosyo-kültürel açıdan en önemli şehridir. Şehir, iktisadi büyüklük açısından dünyada 34. sıradadır.</p>
</div>

<div class="sehirler">
<h2>Ankara</h2>
<p>Ankara, Türkiye'nin bir ili, başkenti ve en kalabalık ikinci şehri. Nüfusu 2015 itibarıyla 5.270.575 kişidir. Coğrafi olarak Türkiye'nin merkezine yakın bir konumda bulunur ve Batı Karadeniz Bölgesi'nde kalan kuzey kesimleri hariç, büyük bölümü İç Anadolu Bölgesi'nde yer alır.</p>
</div>

<div class="sehirler">
<h2>Mersin</h2>
<p>Mersin, eski adıyla İçel, Türkiye'nin bir ili ve en kalabalık onuncu şehri. 2015 itibarıyla 1.745.221 nüfusa sahiptir. Akdeniz, Aydıncık, Bozyazı, Mezitli, Yenişehir, Toroslar, Anamur, Silifke, Tarsus, Çamlıyayla, Erdemli, Gülnar, Mut ilçeleri olmak üzere toplam 13 tane ilçesi bulunmaktadır.</p>
</div>

</body>
</html>

Bu örnekteki kodları editörünüze yazıp çalıştırdığınızda karşınıza alt alta sıralanmış, siyah arka planlı, içerisinde şehirler hakkında bilgi veren 3 adet div göreceksiniz.

Peki bu div’ler neden alt alta duruyor?
“Biz CSS kodlarımızda div’lerin aşağıya inmesini sağlayacak bir kod yazmadık, nasıl oldu da alta indiler?” diye sormanız gerekiyor.

Geçen derste bahsettiğimizi unutmadıysanız bu sorunun cevabını kendiniz vermiş olmanız gerekir.
Hatırlamıyorsanız ben hatırlatayım: Div’ler varsayılan olarak alabildikleri en büyük genişliği alırlar.
Sizler CSS kodları ile genişlik değeri vermediğiniz sürece en büyük genişliği, yani tüm satır boyunu alırlar.

Ayrıca yine bahsettiğimiz gibi sağında ve solunda da hiçbir nesne istemezler; siz yan yana div ekleseniz bile, CSS ile yan yana koymadığınız sürece sonradan eklenen div alta geçecektir.

HTML `<iframe>` Özelliği

Bu etiket gerçekten seveceğiniz ve web tasarımlarınızda birçok kez kullanacağınız bir özellik.

Site içerisinde site

Bu özelliği kullanarak kendi sitenizin içerisinde başka bir sayfayı gösterebileceksiniz. Hemen bir örnek verelim, sizler de deneyin:

<iframe src="URL"></iframe>

Örnekte URL yazan yere herhangi bir web belgesinin (.html, .php, .aspx vb.) adresini yazdığınızda, o belgedeki sayfa sizin sayfanızın belirlediğiniz bir bölümüne yerleşmiş olacak.

Not: Birçok site güvenlik nedeniyle başka sitelerin iframe’i içinde açılmayı engeller; bu durumda iframe boş görünür.

Iframe’e yükseklik ve genişlik verme

Bu etiketi kullanarak kendi sayfanıza başka bir sayfa eklediniz ama istediğiniz boyutta değilse, bu sorunu önceki derste gösterdiğim width ve height özellikleri ile çözebiliriz (değerler piksel cinsindendir, px yazılmaz).
Hemen bir örnekle açıklamamızı kanıtlamış olalım:

<iframe src="sayfa.html" width="800" height="300"></iframe>

Iframe kenarlıklarını kaldırma

Sitenize iframe eklediniz, yükseklik ve genişlik değerlerini de istediğiniz gibi ayarladınız ama bu sefer de kenarlıklar hoşunuza gitmiyorsa, bu sorunu çözmek için çok basit bir yöntemimiz var: border: none;

Bir örnekle daha iyi anlayacaksınız.

<iframe src="sayfa.html" style="border: none;"></iframe>

none değerini web tasarımlarda çok sık kullanırız; en yoğun kullanım alanı da display: none; olarak bilinir.
Biz de ilerleyen derslerimizde bu değerleri sık sık kullanacağız.

Iframe’e kenarlık verme

Az önce iframe kenarlığını nasıl kaldıracağımızı gördük ama amacımız her zaman kaldırmak olmayabilir.
Web tasarımı yaparken son derece özgür olmalısınız; hayal gücünüz sizi neye yönlendiriyorsa onu yapmalısınız. Bir gün hayal gücünüz size iframe kenarlığına stil vermenizi söylerse şu kodlarla yapabilirsiniz:

<iframe src="sayfa.html" style="border: 2px dashed black;"></iframe>

Kenarlıkları sizler istediğiniz gibi değiştirebilirsiniz.
Ben sizlere en popüler kenarlık türlerini göstereyim, siz hangisini beğenirseniz onu eklersiniz.

none – Kenarlık yok

dotted – Noktalı

dashed – Kesik çizgili

solid – Çizgi

double – Çift çizgi

groove

ridge

inset

Iframe’e link verme

Son olarak iframe’e link vermeye bir göz atalım.

Iframe’e bir isim verip bağlantıları bu isme yönlendirdiğimizde, tıklanan sayfa kendi sayfamızdaki iframe içinde açılır.
Hemen bakalım:

<iframe src="res.jpg" width="700" height="400" name="iframe_a"></iframe>

<p><a href="https://www.eforweb.com/" target="iframe_a">Eforweb</a></p>

Kodlarda gördüğünüz res.jpg yazan yere ben bir resim koydum; siz buraya eskisi gibi bir belge ya da bir resim koyabilirsiniz.
Link olan yere de görünmesini istediğiniz sitenin adresini gireceksiniz; son olarak da linkimize isim veriyoruz ve iframe etiketimiz hazır.

Bugünkü dersimizde div’e stil vermeyi, iframe etiketinin kullanımını ve iframe’e stil verme konularını işledik.
Bir sonraki derste görüşmek üzere.

HTML <iframe> Özelliği