• Sonuç bulunamadı

Bölüm 11 : div Tegi

N/A
N/A
Protected

Academic year: 2021

Share "Bölüm 11 : div Tegi "

Copied!
9
0
0

Yükleniyor.... (view fulltext now)

Tam metin

(1)

ETK229 Web Tasarımının Temelleri Dersi

Ankara Üniversitesi Elmadağ Meslek Yüksekokulu Öğretim Görevlisi : Murat Duman

Mail: [email protected]

7. Hafta

(2)

Bölüm 11 : div Tegi

stil.css dosyasına gidelim ve başlığımızı soldan 50 piksel birim sonra başlatmak için kod satırına Şekil 11.1.’de görüldüğü gibi margin-left: 50 px; satırını yazalım.

Şekil 11.1. İlgili ekran görüntüsü

İlgili kod satırının etkisi Şekil 11.2.’de verilmiştir.

(3)

Şekil 11.2. İlgili ekran görüntüsü

Şimdi başlığa ek olarak metnin ve resmin de soldan 50 piksel mesafede olmasını

sağlayalım.

(4)

İlgili kod satırları Şekil 11.3.’de verilmiştir.

Şekil 11.3. İlgili ekran görüntüsü

Yalnız her eleman için soldan 50 piksel boşluk bırakılmak istenildiğinde aynı işlemi

tekrarlamak iyi bir pratik değildir.

(5)

Bunun yerine aynı işlemden etkilenen elemanları gruplamak Şekil 11.4.’ten görüldüğü üzere daha iyi bir pratik gibi görülmektedir.

Şekil 11.4. İlgili ekran görüntüsü

Fakat web sayfamıza başka bir resim eklediğimizi ve bu resim için soldan 50 piksel

boşluk eklemek istemediğimizi varsayalım. Dolayısıyla bu uygulama da aslında iyi bir

pratik değildir.

(6)

Bunun yerine istenilen ya da spesifik bir işlemden etkilenmesini istediğimiz elemanları

<div> tegi ile paketlemek en iyi pratik olacaktır. <div> tegi basit olarak ilgili işlemden etkilenmesini istediğimiz elemanların pozisyonunu vermektedir. Şekil 11.5.’te sola 50 piksel boşluk bırakma işleminden etkilenmesini istediğimiz elemanlar <div> tegi

arasına alınmış ve stil dosyasında ilgili işlem div parantezi içine alınmıştır.

Şekil 11.5. İlgili ekran görüntüsü

(7)

<div> tegini “bir çeşit kova” olarak ta düşünebiliriz. Tarayıcıya <div> tegi sayesinde

“bütün kovadakileri al ve soldan 50 piksel boşluk bırak” diyoruz. Böylece belirli bir işlemi uygulamak için bütün elemanları teker teker almak zorunda kalmıyoruz. Şekil 11.5.’teki <div> tegi kullanımı index.html sayfasında birden fazla <div> tegi bulunması durumunda bütün div’leri etkileyecektir.

Şekil 11.5.’te <div> tegi içerisine yazılan kodu inceleyelim.

margin: auto; satırı tarayıcıya ideal boşluğu bırakmasını söylemektedir.

background: brown; satırı arka planı kahverengi yapmaktadır.

width: 500px; tarayıcıya arka planın 500 piksel genişliğinde olmasını söylemektedir.

Şekil 11.6. İlgili ekran görüntüsü

İlgili kodların çıktısı Şekil 11.7.’de verilmiştir.

(8)

Şekil 11.7. İlgili ekran görüntüsü

Sayfamıza “Yeni Bölüm” adında ikinci bir başlık ekleyelim ve bu başlığı da ikinci bir div tegi içerisine alalım. Yapılan değişikliklerden div tegleri içerisindeki bütün kod satırları etkileneceğinden ikinci başlık ta Şekil 11.8.’den görüleceği üzere aynı arka plan

içerisinde merkezde görüntülenecektir.

(9)

Şekil 11.8. İlgili ekran görüntüsü

Burada dikkat edilmesi gereken nokta eğer ihtiyacımız yoksa div tegi kullanmamamız gerektiğidir.

Peki ilgili işlemden sadece belirli “div tegleri” nin etkilenmesini istiyorsak ne

yapmalıyız!

Referanslar

Benzer Belgeler

Wstin Odeminin yakla~1k 1/400 vakada gorOidOgO tahmin edilmektedir (5). Genellikle diabetik ketoasidoz tedavisini takib lden gOnler veya haftalar i&lt;;inde ortaya &lt;;1kar

Bazı basit sayma tekniklerini bilmemiz bu soruya cevabı daha doğru hale

• Öğrencilere programlama ve FeTeMM alanında deneyim kazandırmak için tasarlanmış, birleşebilen bir robotik sistemdir. • VEX Robotics’deki kitler kutu içerisindeki

Yere yakın hava yerden yüksekteki havadan daha soğuk olduğunda, neler olduğuna bakalım: Ses dalgaları kaynaktan uzaklaşarak hareket ederken, daha ılık havada daha hızlı

İklimsel ve çevresel koşullar: Yapılan sporun açık hava ya da salonda yapılmasına bağlı olarak, yağıştan etkilenme sonucunda zeminin ağırlaşması, havadaki

Özet olarak söyleyecek olursak ökaryotlarda transkripsiyonun başlaması için önce genel transkripsiyon faktörlerinin bazıları tarafından promotor bölge teşhis edilmekte

Ahmet Paşa beyitlerinde çok az da olsa çınarı sevgilinin boyuna benzetmiş, onun bahara benzeyen güzelliği, güllerle dolu olan yüzü, sümbül saçı ve bütün bunlara

Paranın miktar teorisine göre enflasyon haddi para arzının büyümesi ile reel GSYİH büyüme oranı arasındaki farka eşittir.. Merkez bankalarının iki öncelikli