1. Four Equalizing Divisions within Two Columns
Hilal Seda Yıldız
BÖTE-4
Eskişehir Osmangazi Üniversitesi
hilalyildiz.com
2. HTML Dosyasını Oluşturma-1
Bu kısımda,
HTML dökümanımızın dil kodlamasını utf-8,
Başlığını ‘Four Equalizing Divisions within Two Columns’ olarak belirledik.
3. HTML Dosyasını Oluşturma-2
Bu kısımda,
<body> etiketini açarak sayfanın görünen kısmını kodlamaya başladık.
<div> etiketiyle sayfayı anlamsal bölümlere ayırdık, class lara daha sonra stil dosyamızda
kullanacağımız isimler verdik.
5. HTML Dosyasını Oluşturma
Önceki üç aşamadan sonra html
dökümanımızı fed.html olarak kaydedip
tarayıcıdaki çıktısının yandaki gibi
olduğunu görebilirsiniz
6. CSS Dosyasını Oluşturma-1
Halihazırdaki sayfamızın, yandaki gibi
görünmesini sağlamak istersek neler
yapmamız gerekir?
Öncelikle bunun için bir style dosyası
oluşturmamız gerekiyor.
Oluşturduğumuz style dosyasını
stylefed.css kaydedelim
fed.html dosyamızın <head></head>
kısmına aşağıdaki gibi bir ekleme
yapalım. Bu ekleme bizim sayfamızı
şekillendireceğimiz stil dosyamızı
html sayfamıza çağırmamızı
sağlayacak.
7. CSS Dosyasını Oluşturma-1
1. Satırda sayfanın genel iç ve dış boşlukları belirlenmiştir.
2. Satırdan itibaren body kısmının özellikleri belirlenmiştir.
7. Satırda sayfanın sağında scroolbarı pasif bir şekilde gösterilmesi sağlanmıştır
Şekilde kullanılan etiketler:
margin: Dış boşlık
padding: Kenarların iç boşluğu
owerflow-y: dikey düzlemde oluşacak taşmalar
scroll: kutu sınırlarını taşan kısmı kaydırma çubuğu ile ulaşmamızı sağlar
8. CSS Dosyasını Oluşturma-2
fed.html dosyamızda govde olarak belirlediğimiz class ve alt classları, stylefed.css dosyamızın bu
kısmında şekillendirdik. Background’u açık mavi yaptık
Şekilde kullanılan etiketler:
border: Kenarlık
position:relative: Göreceli konumlandırma yani diğer nesnelere bağlı olarak bu
nesnenin konumunun değişebilmesi
10. CSS Dosyasını Oluşturma-3
Yukarıdaki kodları yazdığımızda ise, tablomuzun genel görünümünü tamamlamış oluyoruz.
Şekilde kullanılan özellikler:
float:left: sütunu sola yerleştirir
z-index:1: sütunu üst katmana taşır
