XHTML Div Etiketi – XHTML Ders 9

xhtml-div-etiketi

XHTML div etiketi hazırlayacağımız sayfaların iskeletini oluşturur. Div etiketi sayfaları kolay bir şekilde bölümlere ayırmamıza olanak sağlar.

Div etiketinin kullanımı; <div> Buraya gösterilmek istenen ifade yazılır.</div>

Div etiketini kullanmamızdaki asıl neden sayfayı bölümlere ayırmaktır ve sayfamızı düzenli ve kontrol edilebilir şekilde bölümlere ayırmak için mutlaka CSS kullanmalıyız. CSS, XHTML içerisinde kullanılabileceği gibi dışarıdan da çağrılabilir. Doğru olan kullanımı dışarıdan çağırmaktır, biz CSS derslerini XHTML derslerinden sonra göreceğimiz için şimdilik XHTML içerisinde CSS kullanacağız.

XHTML içerisinde CSS kullanımı;

<div style=”padding:10px;width:300px;height:300px;background-color:aqua;”>Buraya istenen her türlü ifade yazılır. </div>

Yukarıda div etiketine nasıl stil verebileceğimizi gördük biraz detaylandıralım.

Width, div etiketinin genişliğini,

Height, div etiketinin yüksekliğini,

Padding div içerisindeki ifadeler ile div çerçevesi arasına boşluk vermemizi sağlar. En basit şekilde iç kenar boşluğu vermemizi sağlar. Padding-left, padding-right vb. kullanımları da vardır. Sol kenardan sağ kenardan vb. boşluk vermemizi sağlar.

Float, XHTML içerisinde kullandığımız resimleri, metinleri, div’leri sağa sola yaslamamızı sağlar. Sola yaslamak için float:left;sağa yaslamak için float:right;kullanırız.

Background-color, arka plan rengini belirlememize olanak sağlar. Yukarıda div uygulaması içerisinde kullanacağımız bazı CSS tanımlamalarını kısaca anlattım. Bu tanımlamalar çoğaltılabilir bunu CSS derslerimizde detaylı olarak göreceğiz şimdilik div etiketinin mantığını anlamanız açısından basit olarak stil tanımladım.

Div etiketleri ile genel sayfa tasarımımızı da yapacağız bu yüzden birçok div etiketi kullanacağız bu div etiketleri iç içe, yan yana vb. birçok şekilde kullanılabilir.

XHTML Div Uygulaması

Bir senaryo üzerinden uygulama yapalım. Anne&Çocuk,Teknoloji ve Excel Eğitimi kategorileri bulunan, logo alanı bulunan, yazıların listelendiği bir alan ve hemen bu alanın yanında sidebar bulunan bir web sayfası tasarlayalım. Olabildiğince basit kodlayacağım aşağıdaki kodu editörünüze yapıştırın ve editör üzerinden kodu inceleyin. Daha sonra kaydedin ve tarayıcıda nasıl göründüğüne bakın.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>XHTML Dersleri</title>
</head>
<body>
    <div style="width:auto;">
        <!-- Tüm sayfa için kullanılacak en üst div  -->
        <div style="height:80px;width:125px;padding-left:550px;"><h2>WEBAGİ</h2></div><!-- logo için oluşturulan div  -->
        <!-- Menü için oluşturulan div -->
        <div style="height:25px;width:auto;padding-left:425px;"><pre><strong>Anasayfa</strong>   <strong>Teknoloji</strong>  <strong>Anne&Çocuk</strong>  <strong>Excel Eğitimi</strong></pre></div>
        <div style="height:430px;width:984px;float:left;float:left;">
            <h2>Lorem Ipsum Nedir?</h2><!-- yazı listelenen alan için oluşturulan div -->
            Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir
            hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte...
            <hr />
            <h2>Nereden Gelir?</h2>
            Yaygın inancın tersine, Lorem Ipsum rastgele sözcüklerden oluşmaz. Kökleri M.Ö. 45 tarihinden bu yana
            klasik Latin edebiyatına kadar uzanan 2000 yıllık bir geçmişi vardır. 
            <hr />
            <h2>Neden Kullanırız?</h2>
            Yinelenen bir sayfa içeriğinin okuyucunun dikkatini dağıttığı bilinen bir gerçektir. 
        </div>
        <div style="height:430px;width:220px;padding-left:5px;float:left;">
            <!-- sidebar için oluşturulan div  -->
            <h3>Yazar Hakkında</h3>
            <hr />
            Lorem Ipsum pasajlarının birçok çeşitlemesi vardır. Ancak bunların büyük bir çoğunluğu mizah
            katılarak veya rastgele sözcükler eklenerek değiştirilmişlerdir. 
            <hr />
        </div>
    </div> <!-- en üst div'in kapanışı -->
</body>
</html>

Arkadaşlar kod içerisinde anlamadığınız bir yer olursa mutlaka sorun.  Aşağıdaki resimde de kodun tarayıcı üzerindeki görünümünü inceleyebilirsiniz.

xhtml-div-etiketi

Evet arkadaşlar XHTML 9. dersimizde XHTML div nedir? Div nasıl kullanılır? Öğrenmiş olduk. XHTML ile ilgili bütün derslerime aşağıdaki linkten erişebilirsiniz. İnşAllah faydalı bir ders olmuştur bir sonraki derste görüşmek duası ile…