HTML nesneleri ve CSS uygulamaları
Yeniden merhaba :)
Önceki iki makalemde HTML e kısa bir giriş yapmıştık ve tasarımla ilgili teorik bilgilerden
söz etmiştik,bu makalemizde ise web tasarımda kolları sıvıyor ve ilk tasarımımızı yapıyoruz.
HTML konusunda makalelerimizi yazarken aynı zamanda CSS'le haşır neşir olacağımız için her iki
konuda senkronize ilerleyeceğiz.
Web tasarımda en çok kullanılan DOM nesnelerinden Div'den bahsetmek istiyorum;
divi kabaca tabir etmek gerekirse sayfada iç içe geçmiş kareler ya da çalışma alanlarını ifade
eder.
Div içerisinde birden çok div olabileceği gibi tek başına bir div nesnesine arkaplan resmi
yükleyerek hoş tasarımlar yapmak mümkündür.
Konuyu daha fazla somut bir biçimde ifade etmek istersek hemen Dreamveaver'i açarak yeni bir HTML
projesi oluşturalım.
Sayfamız ilk açıldığında yukarıdaki gibi bir kod yapısıyla karşılaşıyoruz ve bu kod biçimi boş bir HTML, daha doğrusu
XHTML yapısı ile karşılaşıyoruz.
HTML ile XHTML arasındaki farkı merak ediyorsanız kısaca şöyle söyleyeyim: XHTML,HTML'e göre daha düzenlidir.
Konuyu dağıtmadan ilerlersek Div tagımızı yazacağımız yer iki body tagı arasındaki konumdur.
Gördüğünüz gibi div tagımızı body tagı arasında açıp kapattık ve buna bir de ID özniteliği olarak "ilkDiv" ismini verdik.
Şimdi projemizi Dosya-Kaydet yolu ile kaydedelim ve aşağıdaki gibi tarayıcımızda çalıştıralım:
Şu anda boş bir ekran göreceksiniz çünkü div nesnemize herhangi bir biçim vermedik dolayısıyla tarayıcıda nokta kadar
bir anlamı olmuyor.
Hazır olun şimdi CSS kısmına geldik :)
Şimdiye kadar CSS dedik durduk peki CSS'i HTML nesnemize nasıl uyarlayacağız?
Bunun cevabı 3 şekilde yer alıyor;
1.yol HTML nesnesinin "style" tagı içerisinde kullanarak (bu yol kullanılırsa div gibi nesnelere id özniteliği eklemeye
gerek duyulmaz),
2.yol Sayfanın "head" tagları arasında "style" tagları açarak,
3.yol ise bir ".css" uzantılı dosyaya CSS özelliklerini yazıp dosyayı ilgili sayfanın "head" tagı içerisinde
link şeklinde kısayol olarak vermek.
Web tasarım konusunda standartlar vardır ve bu standartların dışında internet arama motorları (örneğin google) 3.yolun
kullanılmasını tavsiye ediyor bu sebeple siteniz SEO (arama motoru optimizasyonu)'ya uyumlu olacak ve arama sıralarında
üst sıralarda olmasına yardım edecektir.
Not:Sadece 3.yolu kullanarak üst sıralarda çıkacağınızı düşünmeyin,SEO konusu bu kadar basit değil ;)
Yine konuyu dağıtıyorum sanırım :)
Biz şimdilik 1.yolu tercih ediyoruz ve div nesnemize şu bilgileri ekliyoruz:
a-Yüksekliğin 300 piksel olsun,
b-Genişliğin 400 piksel olsun,
c-Arkaplan rengin mavi olsun.
Tekrar projenizi çalıştırırsanız ekranınızda mavi renkli bir kare göreceksiniz,e artık web tasarım dünyasına şimdi
hoşgeldiniz diyebiliriz :)
Gördüğünüz gibi CSS özelliklerini Div nesnesinin içinde belirterek kullanabiliyoruz,peki 2.yolu kullanarak nasıl yapabilirdik?
Öncelikle Div tagına verdiğimiz "style" özniteliğini ve içindeki CSS özelliklerini siliyoruz,
ardından sayfamızın "head" tagı içerisinde "style" tagını ekliyoruz.
ve tekrar çalıştırıyoruz,sonuç yine aynı :)
Bu 2.yolda bir konuya dikkatinizi çekmek istiyorum;gördüğünüz gibi "head" tagı içerisinde "style" tagı açtık ve div nesnesini "#ilkDiv{ }" şeklinde ifade edip CSS özelliklerini içine yazdık.
Div nesnemizi # işaretiyle göstermek yerine "class" (sınıf) özniteliğiyle gerçekleştirebilir ve sayfada birden çok div nesnesi kullandığımızda hepsinde bu özellikleri tek bir class üzerinden gösterebiliriz,ancak henüz web tasarımda yeni
olduğunuzu varsaydığım için kafanızı karıştırmak istemiyorum,bu konuyu ayrı bir makalede daha detaylı anlatmayı planlıyorum.
Peki CSS ile sadece bu kadarcık mı sayfamızı geliştirebiliyoruz,tabiki hayır :)
Bir sonraki makalemizde daha fazla CSS özelliği kullanarak daha yeni tasarımlar geliştirene kadar şimdilik hoşçakalın.
Proje Linki:İndir
Önceki iki makalemde HTML e kısa bir giriş yapmıştık ve tasarımla ilgili teorik bilgilerden
söz etmiştik,bu makalemizde ise web tasarımda kolları sıvıyor ve ilk tasarımımızı yapıyoruz.
HTML konusunda makalelerimizi yazarken aynı zamanda CSS'le haşır neşir olacağımız için her iki
konuda senkronize ilerleyeceğiz.
Web tasarımda en çok kullanılan DOM nesnelerinden Div'den bahsetmek istiyorum;
divi kabaca tabir etmek gerekirse sayfada iç içe geçmiş kareler ya da çalışma alanlarını ifade
eder.
Div içerisinde birden çok div olabileceği gibi tek başına bir div nesnesine arkaplan resmi
yükleyerek hoş tasarımlar yapmak mümkündür.
Konuyu daha fazla somut bir biçimde ifade etmek istersek hemen Dreamveaver'i açarak yeni bir HTML
projesi oluşturalım.
Sayfamız ilk açıldığında yukarıdaki gibi bir kod yapısıyla karşılaşıyoruz ve bu kod biçimi boş bir HTML, daha doğrusu
XHTML yapısı ile karşılaşıyoruz.
HTML ile XHTML arasındaki farkı merak ediyorsanız kısaca şöyle söyleyeyim: XHTML,HTML'e göre daha düzenlidir.
Konuyu dağıtmadan ilerlersek Div tagımızı yazacağımız yer iki body tagı arasındaki konumdur.
Gördüğünüz gibi div tagımızı body tagı arasında açıp kapattık ve buna bir de ID özniteliği olarak "ilkDiv" ismini verdik.
Şimdi projemizi Dosya-Kaydet yolu ile kaydedelim ve aşağıdaki gibi tarayıcımızda çalıştıralım:
Şu anda boş bir ekran göreceksiniz çünkü div nesnemize herhangi bir biçim vermedik dolayısıyla tarayıcıda nokta kadar
bir anlamı olmuyor.
Hazır olun şimdi CSS kısmına geldik :)
Şimdiye kadar CSS dedik durduk peki CSS'i HTML nesnemize nasıl uyarlayacağız?
Bunun cevabı 3 şekilde yer alıyor;
1.yol HTML nesnesinin "style" tagı içerisinde kullanarak (bu yol kullanılırsa div gibi nesnelere id özniteliği eklemeye
gerek duyulmaz),
2.yol Sayfanın "head" tagları arasında "style" tagları açarak,
3.yol ise bir ".css" uzantılı dosyaya CSS özelliklerini yazıp dosyayı ilgili sayfanın "head" tagı içerisinde
link şeklinde kısayol olarak vermek.
Web tasarım konusunda standartlar vardır ve bu standartların dışında internet arama motorları (örneğin google) 3.yolun
kullanılmasını tavsiye ediyor bu sebeple siteniz SEO (arama motoru optimizasyonu)'ya uyumlu olacak ve arama sıralarında
üst sıralarda olmasına yardım edecektir.
Not:Sadece 3.yolu kullanarak üst sıralarda çıkacağınızı düşünmeyin,SEO konusu bu kadar basit değil ;)
Yine konuyu dağıtıyorum sanırım :)
Biz şimdilik 1.yolu tercih ediyoruz ve div nesnemize şu bilgileri ekliyoruz:
a-Yüksekliğin 300 piksel olsun,
b-Genişliğin 400 piksel olsun,
c-Arkaplan rengin mavi olsun.
Tekrar projenizi çalıştırırsanız ekranınızda mavi renkli bir kare göreceksiniz,e artık web tasarım dünyasına şimdi
hoşgeldiniz diyebiliriz :)
Gördüğünüz gibi CSS özelliklerini Div nesnesinin içinde belirterek kullanabiliyoruz,peki 2.yolu kullanarak nasıl yapabilirdik?
Öncelikle Div tagına verdiğimiz "style" özniteliğini ve içindeki CSS özelliklerini siliyoruz,
ardından sayfamızın "head" tagı içerisinde "style" tagını ekliyoruz.
ve tekrar çalıştırıyoruz,sonuç yine aynı :)
Bu 2.yolda bir konuya dikkatinizi çekmek istiyorum;gördüğünüz gibi "head" tagı içerisinde "style" tagı açtık ve div nesnesini "#ilkDiv{ }" şeklinde ifade edip CSS özelliklerini içine yazdık.
Div nesnemizi # işaretiyle göstermek yerine "class" (sınıf) özniteliğiyle gerçekleştirebilir ve sayfada birden çok div nesnesi kullandığımızda hepsinde bu özellikleri tek bir class üzerinden gösterebiliriz,ancak henüz web tasarımda yeni
olduğunuzu varsaydığım için kafanızı karıştırmak istemiyorum,bu konuyu ayrı bir makalede daha detaylı anlatmayı planlıyorum.
Peki CSS ile sadece bu kadarcık mı sayfamızı geliştirebiliyoruz,tabiki hayır :)
Bir sonraki makalemizde daha fazla CSS özelliği kullanarak daha yeni tasarımlar geliştirene kadar şimdilik hoşçakalın.
Proje Linki:İndir