float etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

Ders_22 HTML Sayfa Düzeni (Layout)

HTML Sayfa Düzenleri (Layouts)

Aşağıda, sıkça karşılaştığımız bir html sayfa düzeni görmekteyiz. Bu düzen, <div> elemanları kullanılarak oluşturulmuştur.

Şehir Galerisi

İstanbul
Ankara
İzmir

İstanbul

İstanbul güzel bir şehirdir. İstanbul güzel bir şehirdir. İstanbul güzel bir şehirdir. İstanbul güzel bir şehirdir. İstanbul güzel bir şehirdir.

HTML <div> Elamanları ile Sayfa Düzeni

<div> elemanları, sıklıkla, html sayfalarının tasarım aracı olarak kullanılırlar. Çünkü; CSS ile <div> kutucuklarının yerleşimlerini dizayn etmek oldukça kolaydır.

Yukarıdaki html sayfası, CSS ve html ile şöyle kodlanır:

<!DOCTYPE html>
<html>
<head>
<style>
#header {
background-color:black;
color:white;
text-align:center;
padding:15px;
}
#nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px;
}
#section {
width:350px;
float:left;
padding:10px;
}
#footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>
</head>
<body>

<div id="header">
<h1>Şehir Galerisi</h1>
</div>

<div id="nav">
İstanbul<br>
İzmir<br>
Ankara<br>
</div>

<div id="section">
<h2>London</h2>
<p>
İstanbul güzel bir şehirdir. İstanbul güzel bir şehirdir. İstanbul güzel bir şehirdir. İstanbul güzel bir şehirdir. İstanbul güzel bir şehirdir.
</p>
<p>
İstanbul güzel bir şehirdir. İstanbul güzel bir şehirdir. İstanbul güzel bir şehirdir. İstanbul güzel bir şehirdir. İstanbul güzel bir şehirdir.
</p>
</div>

<div id="footer">
Copyright © desimizkod-html.blogspot.com.tr
</div>

</body>
</html>

Hatırlayacağımız gibi, diyez (#) ile başlayan CSS seçicileri, id'ye göre seçim yapar. Örneğin; #nav seçicisi, sadece id="nav" özelliği içeren html elmanlarını seçer.

Yukarıdaki her bir <div> elemanının bir id'si vardır. CSS kısmında da her bir id için yazılmış stiller vardır.

Web tarayıcıları, div kutucuklarını, varsayılan olarak, alt alta gösterirler. Fakat CSS float özelliği bu kutucukları yan yana dizmemizi sağlar.

Yukarıdaki nav ve section kimliğine sahip iki div, float:left kodu sayesinde, sayfanın solundan başlayarak yan yana dizilmişilerdir.

Uygun bir dizilim için, divlere verdiğimiz width (genişlik) değerleri mantıklı olmalıdır yani toplamları sayfanın toplam genişliğini aşarsa, divlerimiz aşağıya düşebilir.

HTML5 İle Sayfa Düzeni

HTML5, html sayfamızın farklı bölgelerini tanıtan anlamsal elemanlara sahiptir. Bu elemanlar ve kastettikleri sayfa bölgeleri aşağıdaki tabloda verilmiştir:

Yukarıdaki sayfa şablonunda hangi html elemanının hangi bölge için kullanılacağı gösterilmiştir. Buna göre;

<header> başlık </header> elemanı: Html sayfanın ana başlığının olduğu bölgedir.
<nav> menü </nav> elemanı: Html sayfasının menü bölgedir. Site içerisinde gezinmek için genellikle bu bölge kullanılır.
<section> kesit </section> elemanı: Html sayfasının içerik üstü bölgesidir.
<aricle> makale </article> elemanı: Html sayfasının makale bölgedir.
<aside> kenarlık </aside> elemanı: Html sayfasının kenarlık bölgedir. Sayfanın sağında veya solunda olabilir. Menü olarak kullanımı yaygındır.
<footer> son </footer> elemanı: Html sayfasının son bölgedir.

Bu dersin başında verdiğimiz html sayfasını şu kodlarla da oluşturabiliriz:

<!DOCTYPE html>

<html>

<head>

<style>

header {

background-color:black;

color:white;

text-align:center;

padding:15px;

}

nav {

line-height:30px;

background-color:#eeeeee;

height:300px;

width:100px;

float:left;

padding:5px;

}

section {

width:350px;

float:left;

padding:10px;

}

footer {

background-color:black;

color:white;

clear:both;

text-align:center;

padding:5px;

}

</style>

</head>

<body>

<h1>Şehir Galerisi</h1>

</header>

<nav>

İstanbul<br>

İzmir<br>

Ankara<br>

</nav>

<h1>London</h1>

<p>

İstanbul güzel bir şehirdir. İstanbul güzel bir şehirdir. İstanbul güzel bir şehirdir. İstanbul güzel bir şehirdir. İstanbul güzel bir şehirdir.

</p>

<p>

İstanbul güzel bir şehirdir. İstanbul güzel bir şehirdir. İstanbul güzel bir şehirdir. İstanbul güzel bir şehirdir. İstanbul güzel bir şehirdir.

</p>

</section>

</footer>

</body>

</html>

Bu kodun çıktısı da tıpkı daha yukarıdaki gibi olacaktır:

Şehir Galerisi

İstanbul
Ankara
İzmir

İstanbul

İstanbul güzel bir şehirdir. İstanbul güzel bir şehirdir. İstanbul güzel bir şehirdir. İstanbul güzel bir şehirdir. İstanbul güzel bir şehirdir.

HTML Sayfa Düzeni İçin <table> (Tablo) Elemanı

Html <table> elemanı, sayfa düzeni için geliştirilmiş bir eleman değildir. Bu yüzden bu amaçla kullanımları tavsiye edilmez.

<table> elemanı, verileri daha düzenli bir şekilde sunmak için kullanılır.

Tavsiye edilmese de, <table> elemanlarının, CSS ile şekillendirilebildikleri için, sayfa düzeni oluşturma yetenekleri vardır.

sonraki ders için tıklayınız

Ders_17 HTML Görselleri (Images)

HTML Görsel Ekleme Kodunun Kalıbı

Html görseli derken, çoğunlukla bir resim dosyası kastedilir.

Html sayfasına bir görsel eklemek için <img> tagı kullanılır.

<img> tagı boş bir tagdır, belli özellikler eklenerek çalışır hale getirilir ve bitiş tagı yoktur.

<img> tagına bir src özelliği ekleyerek, görselin url'sini (adresini) bu özelliğe atarız.

<img src="resmim.jpg" alt="bu bir resimdir">

alt Özelliği

alt özelliği, resmin yüklenmesinde bir sorun oluştuğunda, resim alanında görünecek olan metindir. Ayrıca bir ekran okuyucu programı, sayfamızı okurken, resmi alt özelliğine atadığımız metin ile okur.

alt özelliği, gerekli bir özelliktir, ihmal edilmemelidir.

Görselin Boyutları (width ve height özellikleri)

Bir görselin, genişlik (width) ve yükseklik (height) özelliklerini her zaman belirtmelisiniz. Aksi taktirde, sayfanız yüklenirken titremeler olacaktır.

Bu özelliklere atadığımız değerlerin birimi varsayılan olarak pixeldir (px).

<img src="smile.gif" alt="gülen surat resmi" width="150" height="150">

Yukarıdaki iki eleman arasında bir fark yoktur.

Width-Height mı Style mı?

HTML5'de, bir resmin boyutlarını, hem style özelliği içinde, hem de style kullanmadan, doğrudan width ve height olarak belirleyebiliyoruz.

Aşağıdaki örneğe dikkat edelim:

<!DOCTYPE html>
<html>
<head>

<style>
img {
width:100%;
}
</style>

</head>
<body>
<img src="html5_1.gif" alt="HTML5 resmi" style="width:128px;height:128px;">
<img src="html5_2.gif" alt="HTML5 resmi" width="128" height="128">
</body>
</html>

Yukarıdaki örnekte, html5_2.gif resmi, head tagları arasında belirtilen stili alcaktır ve tüm sayfaya yayılackatır (width:100%).

Fakat html5_1.gif resmi, kendi içinde style özeliğini bulundurduğu için, head tagları arasında ilan edilen width stilinden etkilenmeyecek, kendi stiline göre şekillenecektir.

Farklı Klasörlerdeki Görseller

src özelliğinde, sadece resim dosyasının adı belirtildiğinde (src="resmim.jpg" gibi), web tarayıcısı, resim dosyasını, html dosyasının bulunduğu klasörde arar.

Bununla birlikte, resim dosyalarının farklı bir klasörde derlenmesi bir gelenektir.

Örneğin html dosyamızın bulunduğu klasörün içine, bütün resim dosyalarımızı depolamak için, images adında başka bir klasör açarız ve resmim.jpg doyasını da bu klasör içine kaydederiz.

Bu defa, bu resmi çağırırken, src özelliğine sadece dosyanın adını yazmak yeterli olmayacaktır. Doğru kod şöyledir:

<img src="/images/resmim.jpg" alt="burada resmim var" style="width:150px;height:150px;">

Yukarıda görüldüğü gibi, src özelliğine sadece resim dosyasının adını değil src="/klasör/resim_dosya" kalıbına göre url'sini atadık.

Animasyon Görselleri

gif standartları, canlandırılımış görseller oluşturmamıza da izin verir. Yani animasyon görselleri genellikle gif uzantılıdır.

Sayfamıza bir animasyon dosyası eklemekle bir resim dosyası eklemek arasında bir fark yoktur.

images klaseründe anim.gif adlı bi animasyon dosyamız oldsun. Bu dosyayı sitemize aşağıdaki şekilde ekleyebiliriz:

Bir Web Sunucusundan Görsel Alma

Bazı web siteleri görsellerini başka internet sitelerinden alır. Bu durumda yapılması gereken tek şey, resim dosyasının url'sini koplayayıp, src özelliğine değer olarak atamaktır.

Yukarıdaki kod, www.w3schools.com sitesindeki bir jpg dosyasını çağırır ve html sayfasına ekler.

Görsellere (img) Link Atama

Bir resim veya video dosyasına da link verebiliriz. Kullanıcalar bu görsellere tıkladığında verdiğim url adresine yönlendirilecektir.

Yukarıda bir gif resmi elemanı verilmiştir. Bu kod, html dosyamızla aynı adreste (url) kayıtlı resmim.gif adlı bir resim dosyasını sayfamızda gösterir.

Bu resim elemanını olduğu gibi <a> ve </a> link tagları arasına koyarsak, bu resmi hem göstermiş hem de resme link vermiş oluruz. Yani:

<img src="resmim.gif" alt="Burada bir resim vardır" style="width:42px; height:42px; border:0">

</a>

border:0 kodu, IE9 ve daha eski sürümlerinde, resme otomatik bir çerçeve konmasını engellemek için eklenir.

Görsellerde Float (yerleşim veya dilim) Özelliği

Bir metin ile o metne ait bir görseli bir arada kullanmak durumunda kalırsak, float özelliğine ihtiyacımız olabilir.

Birden fazla resim dosyasını veya html elemanını (div gibi) sağdan sola veya soldan sağa dizmemiz gerektiğinde de float özelliği bu işi halledecektir.

<p>
<img src="smile.gif" alt="Gülümseyen surat" style="float:right;width:42px;height:42px;">
Resim dosyası metnin sağ tarafına yerleşecektir. Resim dosyası metnin sağ tarafına yerleşecektir. Resim dosyası metnin sağ tarafına yerleşecektir.Resim dosyası metnin sağ tarafına yerleşecektir.
</p>

<p>
<img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
Resim dosyası, görselin sol tarafına yerleşecektir. Resim dosyası, görselin sol tarafına yerleşecektir. Resim dosyası, görselin sol tarafına yerleşecektir. Resim dosyası, görselin sol tarafına yerleşecektir. Resim dosyası, görselin sol tarafına yerleşecektir.
</p>

Ayrıntılar için CSS derslerimizi takip edebilirsiniz.

Görsel Haritaları (map)

<map> tagi ile bir görsel haritası (image-map) hazırlayabiliriz.

Bir görsel haritası, tıklanabilir bölgeler içeren bir resimdir, diyebiliriz.

Bir tıklanabilir bölge oluşturmak için <map> ve </map> tagları arasına <area> tagi tanımlamamız gerekir. <area> tagında ilan ettiğimiz özellikler bizim tıklanabilir bölgemiz olacaktır ve bu tagın bitiş tagı yoktur.

Aşağıdaki örneğe dikkat edelim:

Yukarıdaki map elemanın adı gezegenharitasi olarak belirlenmiştir.

arae elemanındaki shape özelliği ile tıklanacak bölgenin geometrik şekli belirlenir.

shape="rect" ifadesi tıklanacak bölgenin bir dikdörtgen (rectangle) olacağını ifade eder.

shape="circle" ifadesi tıklanacak bölgenin bir daire (circle) olacağını ifade eder.

arae elemanındaki coords özelliği ile, tıklanacak geometrik şeklin koordinatları verilir. Bu koordinatlar, resmin sol üst köşesine göre belirlenir. Resmin sol üst köşesinin koordinatı 0,0 kabul edilir ve bu nokta başlangıç noktası olur.

Yani geometrik şekil üzerindeki bir noktanın koordinatı, önce yataya göre sonra düşeye göre pixel cinsinden 0,0 noktasına olan uzaklığı yazılarak verilir.

Örneğin, 50,100 noktası, resmin sol üst köşesinden 50 pixel solda, 100 pixel aşağıdadır.

Piksel, varsayılan birimdir, belirtmek zorunlu değildir.

Eğer bir diktörtgen oluşturacağımızı ilan etmişsek, coords özelliğine sırasıyla, dikdörtgenin sol üst köşesinin (mesela 0,0) ve sağ alt köşesinin koordinatlarını (mesela 82,126) yazmalıyız. (coords="0,0,82,126")

Eğer bir daire oluşturacağımızı ilan etmişsek, coords özelliğine öncelikle dairenin merkez noktasını koordinatlarını (mesela 90,58) ve daha sonra da bu dairenin yarıçapını (mesela 3) yazmalıyız. (coords="90,58,3")

area elemanındaki href özelliği ise koordinatları verilen bölgeye tıklandığında gidilecek dosyayı ilan eder, yani linktir.

<map> elamanı bu şekilde hazırlandıktan sonra sıra, bu koortinatları hangi resimde uygulayacağımızı ilan etmeye gelir. Bu da oldukça kolaydır:

<map> elemanına verdiğimiz name=gezegenharitasi özelliği tam da bu iş için lazımdır. name özelliğine atadığımız değeri (gezegenharitasi), <img> tagının içine usemap="#haritaAdi" kalıbına göre eklersek o resimde, bu haritayı kullanmış oluruz. Artık o <img> elemanı tıklanabilir bir haritaya sahip olacaktır.

Aşağıdaki kod; gezegenler.gif resmine yukarıda hazırladığımız gezegenharitasi adlı haritayı uygular:

sonraki ders için tıklayınız