Perşembe , Ağustos 17 2017
Anasayfa / DERSLER / Web Tasarım Dersleri / HTML Dersleri / Html Alan Oluşturma (8. Ders Div, İd ve Class)

Html Alan Oluşturma (8. Ders Div, İd ve Class)

Eskiden bir Sayfa şablonu hazırlarken html de Tablolama sistemi kullanılarak Web sitelerinin alanları oluşturuluyordu ancak bu çok sağlıklı ve kullanışlı olmadığı için html geliştiricileri Div Alanlarını html diline dahil ettiler. Html ile bir sayfa şablonu hazırlarken sayfamızda alanlara ihtiyaç duyarız bu alanları <div> etiketi ile belirleriz ancak bir sayfa şablonunda birden fazla alana ihtiyaç duyulacağı için buna <div id=””> ve <div class=””> gibi ayırıcı değerler atayarak düzenlemeleri  atadığımız değer adına göre yaparız id ve class aynı özellikleri bize sağlar ancak xhtml yani kurallarına uygun html yapısı için id değerini sayfada 1 seferlik kullanacağımız yerlere class değerini birden fazla alanda kullanacağımız alanlar için kullanırız. Değer atadığımız Div etiketini Style kodlarına tanıtırken  id değerini verdiğimiz bir div etiketine ( # ) değerini, Class değerini verdiğimiz div etiketine de ( . ) değeri ile tanımlamayı yaparız örneklemelerde daha iyi anlayacaksınız.

Web Sitesi veya bir şablon oluştururken kafanızda bir resim oluşturmalısınız sayfanızda hangi alanların ve hangi boyutların oluşacağı gibi temel resminizi ayarlayıp ona göre düzenlemeler yapmalısınız. örnek olarak bir üst alan oluşturup bunun içine logo ve menü alanı açabilirsiniz. orta kısıma iki alan ekleyip birine yan menü diğerine de içerik alanı olarak düşünebilirsiniz ve alt tarafta bir alan açıp içine 4 farklı bilgi alanı açabilirsiniz yani ilk olarak kafanızda bir şablon oluşmalı ve ona lazım olan alanları hesaplayıp projenize başlayabilirsiniz.

Sayfa Şablon Kodları

Şablonumuz için 4 ana alan oluşturduk tumalan, ustalan, ortaalan, alt ismilerinde.

div id=tumalan etiketinde id değerinde ustalan, ortaalan, alt etiketlerini kapsayıp şablonumuzun 1024 px genişliğinde olmasını istedik.

div id=ustalan etiketinde yanmenu ve icerik alanını kapsayan iki class alanı oluşturduk logo ve menü alanlarını bu alanın içinde class olarak barındırdık.

div id=ortaalan etiketinde yan menu ve içerik alanını  kapsayan iki class alanı oluşturup yan menu ve içerik alanını bu alanın içinde class olarak barındırdık.

div id=alt etiketinde alan adında dört class alanı oluşturup 1.alan, 2.alan, 3.alan, 4.alan kısımlarını bu alanın içinde class olarak barındırdık.

Kafanıza <div class=”temizle”></div> Alanının ne işe yaradığı sorusu gelebilir bu alan bizim kurtarıcımız diyebiliriz ilerde de alan kaymaları gibi sorunlar yaşadığınızda bunu kullanarak alanların kayma sorununu halledebilirsiniz.  Div Kayma Sorununu Nasıl Çözeriz başlıklı konumuzdan bakabilirsiniz.

Hakkında BilgeBank

İlgili Makale

html form alanı

Html Form Alanları (11. Form, İnput, Type, Name, Value )

Html’de form alanlarını kullanıcıların bilgilerini almak için kullanırız bu bilgiler sayesinde kullanıcılar çeşitli bilgileri sayfanıza ekleyebilirler …

Bir Cevap Yazın