Post on 08-Jul-2015
Four Equalizing Divisions within Two Columns
Hilal Seda YıldızBÖTE-4Eskişehir Osmangazi Üniversitesihilalyildiz.com
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.
HTML Dosyasını Oluşturma-1
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.
HTML Dosyasını Oluşturma-3
Bu kısımda da bir önceki aşamada yaptığımız işlemlerin devamını gerçekleştirdik.
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
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.
CSS Dosyasını Oluşturma-1
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ıkpadding: Kenarların iç boşluğuowerflow-y: dikey düzlemde oluşacak taşmalarscroll: kutu sınırlarını taşan kısmı kaydırma çubuğu ile ulaşmamızı sağlar
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ıkposition:relative: Göreceli konumlandırma yani diğer nesnelere bağlı olarak bu
nesnenin konumunun değişebilmesi
CSS Dosyasını Oluşturma-2.1: Kod çıktısı
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ştirirz-index:1: sütunu üst katmana taşır
CSS Dosyasını Oluşturma-3.1: Kod çıktısı
CSS Dosyasını Oluşturma-4
Bu kısımda ise fed.html dosyasında genislet olarak tanımladığımız class’ın fiziksel özelliklerini beliriyoruz.
CSS Dosyasını Oluşturma-5:Son Ekran
CSS’den önce CSS’den sonra