Html dersleri 6 serimizde, div / class konusunu öğreniyoruz…
HTML’in en önemli konularından biri olan class, bize hem öğrendiklerimizi pekiştirmemizi hem de web sitemizi daha etkin kurmamızda yardımcı oluyor.
< DIV CLASS >
Division (bölüm). Bölücü (divider) olarak da bilinir. Div etiketi, bir sayfanın “bölümlerini” tanımlamamıza ve tasarlamamıza izin vermek için kullanılır. Div, blok etiketlerinden olduğu için her div etiketini birbirinden ve diğer etiketlerden ayırır. Bloklar halinde sunar.
Önceden div ile aynı mantıkta çalışan tablolar kullanılırdı. HTML5 ile birlikte gelen yeniliklerle artık div yapısını uyguluyoruz. Çünkü tablolu yapılarkarmaşık ve düzenlemeler zor oluyor. Div ile hazırlama sitelerde düzenleme yapmak daha kolay oluyor. Tablololu yapılar çok fazla kod içeridği için ilgili sitenin çok daha yavaş yüklenmesine neden olur. Div kullamanız projenizin tutarlılığı açısından iyi olacaktır.
Örnekte görüldüğü gibi kullanılan div sayısı kadar blok oluşturuldu. Burada yapmamız gereken bu kutuların içerisine style değerlerini girmek. Peki div’e girilen style değerleri nereye uygulanacak? Hangi etikete uygulanacağını belirlemek için Class (sınıf) oluştururuz. Bunu
etiketinin içerisinde style yazarak da yapabiliriz ama her seferinde aynı stili tekrar tekrar yazmamız gerekecektir. Div’ler bir nevi sizin stil paketiniz, aynı stili farklı yerlerde uygulayacağınız zaman kestirme yoldan div’in ismini class’a yazmanız yeterli.
ÖRNEKLER
Aynı örneği biraz daha görselleştirerek yaparsak;
Div’ler çoğaltıp hangi şehre uygulanacaksa oraya div için atadığımız ismi girmemiz yeterli. Birden fazla div oluşturabildiğimiz gibi etiket içerisine de birden fazla div girebiliriz;
Burada her şehir için oluşturduğumuz div’in haricinde küçük dokunuşlar yapabileceğimiz stilleri de ekleyebiliriz.Burada yazı stilini değiştirmek için div oluşturduk ama sadece istanbul’a uyguladık. Bunun için kullanılan div’in yanına ikinci div’i yazmak yeterli.
Div konusunu daha iyi anlamamız için en çok kullanılan örneklerden biri, sayfayı bölmektir. Div’ler ile sayfayı 4’e nasıl bölebiliriz?
Hedefimiz, sayfayı 4’e bölmekti. Bunun için 4 tane div kullandık. Bir web sitesinde temel adım, sayfayı içeriğe uygun olarak bölümler oluşturmaktır. Bizde en basitinden buna bir adım attık. Önce başlık, menü, içerik, altbilgi (hakkında) kısımlarına ayırdık. Her kısım için farklı stil değerlerini girdik. Sayfamızın taslağı hazır…
Küçük bir örnekle içerik oluşturmak istersek;
Kodların fazlalığı hiçbir zaman gözünüzü korkutmasın. Türkçede bir metin okurken orada hangi konudan bahsedildiğini anlamak için defalarca okuruz.Burada görevleriyle birlikte okursak anafikri ortaya çıkarabiliriz. Yukarıda ekranı 4’e bölmek için 4 div oluşturduk ve bu kısımların uzunluk, genişlik değerlerini, rengini, konumu ayarladık. Bu değerler içerikle nasıl görünüyor;
Div’in (<div> </div>) arasına yazdığımız her etiket oluşturmuş olduğumuz bloğun içerisine aittir. Class konusu, evin yaramaz çocuğu gibidir. Detayları anlamada sekteye uğratabilir. Bununla ilgili örnekler devam ettikçe, siz de örnekleri egzersiz olarak çoğaltarak yapabilirsiniz. Kodlar her dilde bol örnek yaptıkça anlaşılması kuvvetleşir.
Yukarıdaki örnekte tanımladığımız özelliklerin anlamları:
{ background-color: tomato; <!– Arka planın kırmızı olacağını, –>
width:100%; <!– Genişliği yüzde (%) cinsinden, –>
height:150px; <!– Yüksekliği pixel (px) cinsinden olacağını, –>
text-align:center; <!– Yazıyı merkeze ortalamasını belirttik, –>
float:left; <!– Sayfa düzeninde, hangi etikete uygulanacaksa onun sola yaslı olmasını sağlar. –> }
Fark ettiyseniz, div class koşunda <style> etiketini <head> başta tanımlandı. Kodlar ise <body> etiketinde yazılı. Yani web sitesi hazırlığı üzerinde çalışırken konuyu ikiye bölüyoruz. Bu alanda bir işe girdiğinizde bir web sitesi için iki gruba ayrılır. Bir grup görselleştirme <style> üzerinde çalışırken, diğer grup sitenin işleyiş mimarisini kodlar. Bunlara Front-End ve Back-End denilir. İkisini bir kişi de yapabilir elbet. Ama bahsettiğimiz geniş çaplı bir çalışmada genelde projenin iyi kalitede olması için bu uygulanır.
Back-End ile ilgili detaylı bilgi edinmek isterseniz, yazımıza göz atabilirsizin… PHP – ASP.Net
İlerleyen zamanlarda hangi alanda daha iyi olduğunuzu bilmeniz ve çalışırken kendinizi iyi hissettiğiniz alanı belirlemek sizin için daha iyi olacaktır. Çünkü tarafınızı bilirseniz kendinizi o alanda geliştirmeniz daha kolay olur. Yolunuza zaman zaman engeller çıkabilir elbette her mevsim yaz olmaz. Ama siz kışa hazırlık yapmazsanız bu zorluklar ikiye katlanır. Hazırlıktan kastım, rahat çalışma zamanlarınızda bol egzersizler yapmak, bildiğiniz konuların mantığını tekrar edip yeni örneklerle pekiştirebilirsiniz. Yararlı yeni fikirlere açık olmanızda fayda var. Bu alanda çoğu bilgi zamanla eskiyor, sabit fikirlilik sizi geride bırakabilir. Geride kalmamanız için size en iyi tavsiyem TeknoTower :). Yeni haber ve gelişmelerden geri kalmayın! Keyifli çalışmalar…
