Neden XHTML ?

Aslında yeni bir makale değil ve önceden başka sitelerde yayınlandı (ceviz.net’te ve 1-2 sitede daha gördüm, kendi siteme ise üşendiğimden koymadım daha.) Ben sadece okumamış olan, böyle bir makaleye gereksinim duyan veya sadece “neden xhtml gereksin ki?” diye düşünen kişilerin okuyup bir fikir edinmesi amacıyla burayada ekliyorum…

Gelelim makaleye,

Merhabalar,

Öncelikle bu makaleyi okuyan kişilerin temel HTML bilgisine sahip olduğu varsayılır. Fakat HTML’e yeni başlıyorsanız (yani daha html bilginiz yok ise) yine de bu makaleyi okumanızı şiddetle tavsiye ediyorum. Çünkü XHTML’in özelliklerini, yararlarını öğrendikten sonra işler çok daha kolaylaşmakta. Çünkü inanıyorum ki xhtml’in ve html’in ana kurallarını bu makaleden öğrenmiş olacağınız için html’i öğrenirken zorluk çekmeyeceksiniz. Daha da önemlisi CSS temelli tasarım’a ve standartlara bağlı, doğrulanmış sayfaları yapmanız için XHTML ilk basamaktır.

XHTML Nedir?
XHTML kısaltmasının açılımı İngilizce’de eXtensible Hyper Text Markup Language yani dilimizde ki karşılığı ise “Geliştirilebilir Büyütülmüş Metin İşaretleme Dili”dir.

XHTML’i aslında şu başlıklar altında toplamak daha doğru olur.

* XHTML aslında HTML içinde kullanılabilen bir XML uygulamasıdır.
* XHTML’in çıkış amacı HTML’in “kirli” yapısını yenilemektir.
* XHTML 1.0 aslında HTML 4.0.1 ile hemen hemen aynıdır. (Bütün elemanları barındırır.)
* XHTML’in kuralları sabittir, XHTML daha temiz ve düzenlidir.
* XHTML standartlara sâdık kodlama, CSS temelli tasarım ve XML’e geçişte bir basamaktır.
* XHTML’i çoğu tarayıcılar tanır.

Neden XHTML?
XHTML, çünkü kullanıcıların istekleri içerik ve görsellikten evvel hızdır ve siz “kirli” html’den uzaklaşıp xhtml’in düzenli ve temiz kodlamasını kullanırsınız, kullanmak zorundasınız.

XHTML 26 Haziran 2000’den beri bir web standartıdır ve W3C (World Wide Web Consortium – WWW Birliği) tarafından tavsiye edilmiştir.

XHTML web standartlarını kulak arkası etmeyen, css temelli tasarımla uğraşan/uğraşacak, xml’e başlayacak veya xml kullanacak herkesin öğrenmesi gereken bir standarttır.

Eğer işi biraz espirili bir dille anlatmak gerekirse kısaca biz html kodlarına “Kendine çeki düzen ver, adama benze.” demişiz ve ortaya XHTML çıkmıştır. 

Gel gelelim işin en can alıcı noktasına; düzen düzen diye bas-bas bağırıyoruz ama ne gereği var? Niye standartlara uyalım diye tatlı canımızı sıkalım? Günümüzde bir çok web tarayıcısı mevcuttur. Gerek bilgisayarlarda, gerek mobil cihazlarda olsun web tarayıcıların görevi kullanıcıya görsellik ve içeriği en doğru biçimde vermektir. Ve tabii ki bir çok tarayıcı ve bir çok firmanın oluşu çok büyük bir dezavantaj doğurdu. Bunlardan en önemlisi tabii ki standartlara uyulmaması ve tarayıcıların yayınlamadaki farklılıklar barındırması.

İşte bu noktada standartlara uygun, düzenli, doğru ve temiz kodlanmış sayfalar değer kazanıyor ve gerek müşteriler, gerek sektördeki firmalar “temiz kodlamaya” önem vermektedirler.

Hiçbir web tasarımcı “html işimi görüyor” diye xhtml’den uzaklaşmamalı. En azından web tasarımcı olduğunu öne süren ve bu işte ilerlemek isteyen kişiler xhtml (ve tabi devamında css) öğrenmek zorundadır. Bunun sebebi standartlardır.
Dipnot: HTML 4.0.1’in de standartları vardır ve bunlarda doğrulanabilir fakat XHTML kadar düzenli kurallar değildir. Bunlar genel olarak CSS ile ilgili kurallardır.

Sayfa 2

XHTML’in Ana Hatları ve Önemli Kurallar
XHTML aslında HTML bilen herkes için çok rahat öğrenilebilecek bir dil. Hatta HTML biliyorsanız aslında biraz daha sıkı kuralların bulunduğu yeni bir html olduğunu anlarsınız.

Aşağıda bir liste halinde önemli kuralları ve dikkat etmeniz gereken bazı hususları sıraladım.

* XHTML’de bütün elemanlar kesinlikle kapalı olmak zorundadır.
-HTML’de bildiğiniz gibi elemanların kapatma işareti / (slash) idi, xhtml’de bu işaret sadece <p></p> gibi elemanların kapanmasında değil içeriksiz elemanların kapanmasında da rol oynuyor.
-Doğru; <li>…</li> ve <img src=”…” … style=”…” />
-Yanlış; <li>… ve <img src=”…” … style=”…”>
* XHTML dökümanları kesinlikle doğru kodlanmış olmalı ve XHTML dökümanları kesinlikle DTD* bildirimi, <html>, <head>, <title> ve <body> elemanlarını barındırmalıdır. Ayrıca <html> elemanı xmlns parametresini almak zorundadır. (DTD= Document Type Definition – Döküman Tipi Tanımı)
Not: DTD bildirimi bir XHTML elemanı değildir ve bu nedenle küçük harflerden oluşma zorunluluğu yoktur, ayrıca kapatma işaretine de ihtiyaç duymaz.
-Örnek; <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”&gt;
* XHTML dökümanlarında elemanlar kesinlikle iç-içe bulunmalıdır.
-Doğru; <b><i>Ömer Balyalı</i></b>
-Yanlış; <b><i>Ömer Balyalı</b></i>
* XHTML dökümanlarında bütün elemanlar kesinlikle küçük harflerle yazılmak zorundadır.
-Doğru; <a href=”index.html” target=”_blank”>Anasayfa</a>
-Yanlış; <a HREF=”index.html” TARGET=”_blank”>Anasayfa</a>
* XHTML dökümanlarında bütün elemanların parametre değerleri kesinlikle çift tırnak içerisinde olmak zorundadır.
-Doğru; <a href=”index.html” target=”_blank”>Anasayfa</a>
-Yanlış; <a href=index.html target=_blank>Anasayfa</a>
* XHTML dökümanlarında elemanların bütün parametreleri kesinlikle değer almak zorundadır. (Değerler true-false alabileceği gibi bir diğer genel kullanım ise parametrenin değer olarak yine kendisini almasıdır, örnek olarak disabled=”disabled”)
-Doğru; <input type=”button” disabled=”true” />
-Yanlış; <input type=”button” disabled />
* XHTML dökümanlarında içeriksiz elemanlarda kapatma işareti’nden (slash) önce bir karakterlik boşlukbulunmak zorundadır.
-Doğru; <input type=”button” disabled=”true” />
-Yanlış; <input type=”button” disabled=”true”/>
* XHTML dökümanlarında <img> elemanında kesinlikle alt=”” parametresi bulunmak zorundadır.
-Doğru; <img … alt=”” />
-Yanlış; <img … />
* XHTML’de lang=”” parametresini kullanan elemana ayrıca xml:lang=”” parametreside eklenmek zorunluluğu vardır.
-Doğru; <div lang=”en” xml:lang=”en”>GNU’s not Unix!</div>
-Yanlış; <div lang=”en”>GNU’s not Unix!</div>
* XHTML dökümanlarında name=”” parametresi yerine id=”” parametresi kullanılmaktadır.
-Zorunlu değildir ve name kullanmanız hataya yol açmaz, aynı zamanda hem name hem de id parametresini kullanabilirsiniz.

 

Sayfa 3

DTD – Döküman Tipi Tanımı Belirtme Zorunluluğu
XHTML dökümanlarında DOCTYPE, <html>, <head>, <title>, <body> elemanlarının zorunlu olduğunu daha evvel söylemiştim. Bu bölümde Döküman tipi tanımı belirtme zorunluluğundan bahsedeceğim.

Şimdiye kadar öğrendiklerimizle çok basit bir XHTML sayfası oluşturalım.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<title>XHTML’e Giriş – Ömer Balyalı</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-9″ />
<style type=”text/css”>@import “stil.css”;</style>
</head>
<body>
<h3>Neden XHTML ve XHTML’e Giriş</h3>
<br />
<p>Merhabalar,

Öncelikle bu makaleyi okuyan kişilerin temel HTML bilgisine sahip olduğu varsayılır. Fakat HTML’e yeni başlıyorsanız (yani daha html bilginiz yok ise) yine de bu makaleyi okumanızı şiddetle tavsiye ediyorum. </p>
</body>
</html>

Evet, burada DTD belirtimi her XHTML dökümanında olduğu gibi sayfanın en başında

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”&gt;

şeklinde ekleniyor.

XHTML’de Bulunan DTD’ler
XHTML’de üç adet DTD bulunmaktadır;

1.Strict
2.Transitional
3. Frameset

Hepsinden kısaca bahsetmeden geçmeyeceğim.

Strict
Strict, İngilizce’de “katı kurallar, düzenli, kusursuz” gibi anlamlara gelir. XHTML’de “strict” bütün kurallara kesin olarak uyulacağı biçiminde adına yakışır biçimde kelimenin anlamını olduğu gibi aktarmaktadır.

XHTML Strict DTD’si XHTML 1.0’ın bütün kurallarını katı bir biçimde ele alır ve XHTML tam mânâsıyla “Strict DTD” ile yazılır. “Strict DTD” de eskitilmiş HTML 4.0.1 elemanları bulunmaz ve eskitilmiş HTML elemanlarıyla birlikte Strict DTD’yi kullanmanız hata verecektir.

-DTD Belirtimi; <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”&gt;

Transitional
Transitional, İngilizce’de “geçiş, geçişme” anlamındadır ve Strict’te olduğu gibi XHTML’de de aynı anlamdadır.

XHTML Transitional DTD’si XHTML 1.0’ın tüm özelliklerini barındırır fakat bazı hususlar vardır, adından da anlaşılabileceği gibi Transitional DTD demek XHTML Strict(yani gerçek XHTML) ile HTML 4.0.1 arasındaki geçişi sağlar. Bu ne demek oluyor? Bu HTML 4.0.1’de ki eskitilmiş elemanlarında XHTML’de kullanılabileceği anlamına geliyor. Ayrıca CSS desteklemeyen tarayıcılar içinde kod yazmak için Transitional DTD kullanılmaktadır.

-DTD Belirtimi; <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;

Frameset
Frameset, Çerçevelerin bulunduğu sayfalarda kullanılan bir DTD’dir. Frameset’in farkı çerçevelere izin vermesidir. (İpucu: Aslında günümüz web tasarımında çerçeveler pek tercih edilmeyen elemanlardır.Fakat unutmamalıyız ki özellikle web betiklerinin yönetim panelleri, barındırma hizmeti aldığımız sunucudaki kontrol panellerde çok sık görebileceğimiz bir elemandır çerçeveler. Ve eğer bizde kontrol panel tasarımı ve kodlaması yapıyorsak çerçeveleri göz ardı edemeyiz ve XHTML’i de kullanabiliyoruz.)

-DTD Belirtimi; <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”&gt;

DTD’ler Hakkında Önemli Not: DTD’ler XHTML sayfanızı doğrulatma 1.ci önceliğe sahip elemanlardır. Ve DTD’si bulunmayan XHTML dökümanlarına doğrulayıcılar XHTML muamelesi yapmazlar.

 

Sayfa 4

XHTML Modülerliği Hakkında
XHTML basit fakat çok güçlü bir dildir. XHTML bazen basit bazende büyük ve karmaşık bir dil olarak kullanılabilir.

W3C, XHTML modüllerini parçalayarak gerekli yerlerde, gerekli modüllerin kullanılmasını sağlayarak bir çok cihazda uyumluluğu kontrol altına almıştır. Ayrıca XHTML ve XML’in standartları ve kurallarına uyarak bir çok uygulama ve modül geliştirmekte mümkündür.

Bu nedenle XHTML’in modülerliği çok önemlidir. Ve XHTML’in bir XML uygulaması olması burada çok büyük önem kazanmaktadır. Bu sayede XHTML ile birlikte kendi modüllerinizide kullanarak cep telefonu, el bilgisayarı, ev sinema sistemleri gibi aygıtlara çok değişik uygulamalar oluşturabilirsiniz.

XHTML Modülleri ile geliştiriciler aşağıdaki listedeki imkanlardan yararlanmaktadırlar;

* Hazır XHTML modül ve uygulamalarını ilgili cihazlar için kullanabilirsiniz.
* XHTML uygulamalarını bilgisayar harici cihazlara taşıyabilir veya sadece o cihazlar için uygun uygulamalar yazabilirsiniz.
* XHTML’in sınırları çerçevesinde XML kullanarak kendi uygulamalarınızı yazabilir ve ekstra özellikler ekleyebilirsiniz.
* Karışık uygulamalar için XHTML’i genişletebilirsiniz.

XHTML Modülleri
Applet Module – Eskitilmiş applet elemanını tanımlar.
Base Module – Base elemanını tanımlar.
Basic Forms Module – Temel form elemanlarını tanımlar.
Basic Tables Module – Temel tablo elemanlarını tanımlar.
Bi-directional Text Module – BDO elemanını tanımlar.
Client Image Map Module – Tarayıcı taraflı imaj haritası elemanlarını tanımlar.
Edit Module – del ve ins gibi düzenleme elemanlarını tanımlar.
Forms Module – Formlarda kullanılan bütün elemanları tanımlar.
Frames Module – Çerçeve elemanlarını tanımlar.
Hypertext Module – a elemanını tanımlar.
Iframe Module – iframe elemanını tanımlar.
Image Module – img elemanını tanımlar.
Intrinsic Events Module – Durum niteliklerini tanımlar. (onclick, onmouseover gibi)
Legacy Module – Eskitilmiş eleman ve parametreleri tanımlar.
Link Module – Link elemanını tanımlar.
List Module – ol,li,ul,dd,dt ve dt elemanını tanımlar.
Metainformation Module – Meta elemanlarını tanımlar.
Name Identification Module – Eskitilmiş name elemanını tanımlar.
Object Module – Object ve param elemanlarını tanımlar.
Presentation Module – b,i ve strong gibi gösterim elemanlarını tanımlar.
Scripting Module – script ve noscript elemanlarını tanımlar.
Server Image Map Module – Sunucu taraflı imaj haritası elemanlarını tanımlar.
Structure Module – Ana elemanları tanımlar. (html, head, title ve body)
Style Attribute Module – style parametrelerini tanımlar.
Style Sheet Module – style elemanını tanımlar.
Tables Module – Tablolarda kullanılan elemanları tanımlar.
Target Module – target parametresini tanımlar.
Text Module – Metin gösterim özellikleri ile ilgili elemanları tanımlar. (p, h1, h2)

-Eskitilmiş elemanlar XHTML’de kullanılmamaktadır.

 

Sayfa 5

Sonsöz
XHTML’e temel bir giriş yapmak, XHTML’in kurallarını öğrenmek için bu makale ne kadar yeterli olsa bile yine de XHTML her dilde olduğu gibi kullanılarak alışacağınız bir dildir. Bu makale ile HTML bilen herkes bu makaleyi okuyarak ve 1-2 saat pratik yaparak XHTML’i kullanacak duruma gelebilir.

Konumuzun dışında gibi gözüksede XML, XHTML, DTD, XML Şemaları, XSLT, XPath, XLink ve XPointer hakkında kapsamlı bilgi için Sistem Yayıncılık tarafından çıkartılmış olan Elizabeth Castro’nun XML kitabını tavsiye ediyorum.

İnternette fazla araştırma yapmanıza gerek olmasada yine kısa bir araştırma ile XHTML bilgilerinizi genişletebilirsiniz. Fakat en önemlisi pratik yapmak ve bundan sonraki bütün dökümanlarınızı XHTML ile kodlamaktır.

Web Tasarım alanında standartları ve gelişebilirliği yakalamak üzere bir daha ki makalede görüşmek üzere.

XHTML Nedir?

XHTML’in ismi EXtensible Hypertext Markup Language kelimelerinden türemiştir. Amacı HTML’yi ortadan kaldırmaktır. HTML 4.01 sürümü ile benzer bir çok yönü vardır. XHTML HTML’nin daha kolay anlaşılır ve kuralcı sürümüdür de diyebiliriz. XHTML HTML’nin XML olarak düzenlenmiş halidir.

XHTML bir web standardı olarak 26 Ocak 2000’de W3C tarafından kabul edilmiştir. XHTML normalde kullanılan HTML’nin yeni nesil sürümü olduğu için web gezginleri ve diğer uygulamalar tarafından kabul edilmesi zaman alacaktır. Bu arada örütbağı uygulamalarınızı mevcut XHTML standardına getirmek istiyorsanız HTML 4.01 sürümü ile uygun hale getirmek ile işe başlayabilirsiniz. Aşağıdaki 10 kuralı da uygularsanız uygulamalarınız XHTML uyumlu hale gelecektir.

1. Dökümanlar XML uyumlu olmalıdır.
HTML’de geçerli olan bu kod:
<b><i>Bu yazı kalın ve yatıktır</b></i>
XHTML’de geçerli değildir. Elemanlar düzgün biçimde iç içe geçmelidir.
    <b><i>Bu yazı kalın ve italiktir</i></b>
Tüm XHTML elemanları <html> kök elemanı içinde bulunmalıdır. Diğer tüm elemanlar alt elemanlara sahip olabilir. Alt elemanların başlangıç ve bitiş tagları olmalı ve doğru biçimde iç içe geçmelidir. Temel döküman yapısı şu şekilde olmalıdır.

   <html>
<head>…….</head>
<body>…….</body>
</html>

2. Tüm elemanlar küçük harfler kullanılarak yazılmalıdır. XHTML bir XML uygulamasıdır ve XML’de küçük büyük harf ayrımı vardır. Örneğin <BR> ve <br> tagları farklı biçimde yorumlanır.
Bu yazım yanlışdır.
    <BODY>
<P>Bu bir paragrafdır</P>
</BODY>
Bu yazım ise doğrudur.
    <body>
<p>Bu bir paragrafdır</p>
</body>
3. Tüm XHTML elemanlarının sonlandırılması gerekir. Boş olmayan her elemanın sonlandırılması gerekir, örneğin aşağıdaki yazım yanlışdır:
    <p>Bu bir paragrafdır
<li>Bu bır liste maddesidir
Doğru olan:
    <p>Bu bir paragrafdır</p>
<li>Bu bir liste maddesidir</li>

4. Boş elemanlarda sonlandırılmalıdır. Boş elemanlar ya bir sonlandırma elemanına yada “ />” işaretine ihtiyaç duyar. Örneğin aşağıdaki yazım yanlışdır.
    Bu bir satır atlar<br>
Yatay çizgi böyle yapılır<hr>
Burada resim olacak <img src=”dosyaismi.gif”>
Doruları ise:
    Bu bir satır atlar<br></br>
Yatay çizgi böyle yapılır<hr />
Burada resim olacak <img src=”dosyaismi.gif” />

XHTML web sayfalarınızı bugünün web gezginleri ile uyumlu hale getirmek istiyorsanız “/” işaretinden önce bir boşluk bırakmalısınız. <br /> yada <hr /> gibi.

5. Parametre isimleri küçük harf olmalıdır. Aşağıdaki örnek yanlıştır:
    <table WIDTH=”100%”>
<div ALIGN=”center”>
Doğrusu:
    <table width=”100%”>
<div align=”center”>

6. Parametre değerleri tırnak işareti içinde olmalıdır. Aşağıdaki örnek yanlıştır:
    <table width=100%>
<div align=center>
Doğrusu:
    <table width=”100%”>
<div align=”center”>

7. Parametre sadeleştirme kaldırılmıştır. Örneğin:
    <input checked>
<option selected>
yanlıştır. Doğrusu:
    <input checked=”checked” />
<option selected=”selected” />

8. “id” parametresi “name” parametresinin yerine geçer.
    <img src=”dosyaismi.gif name=”resim1” />
<a name=”namedanchor”></a>
Yerine doğrusu:
    <img src=”dosyaismi.gif id=”resim1” />
<a id=”namedanchor”></a>

9. XHMTL DTD zorunlu elemanları tanımlar. Tüm XHTML dökümanlarının DOCTYPE tanımlama zorunluluğu vardır. Html, head ve body bulunmalı ve title head içinde yer almalıdır. Aşağıda minimum bir XHTML dökümanını görüyorsunuz.
    <!DOCTYPE Doctype goes here>
<html>
<head>
<title>Title goes here</title>
</head>
<body>
    Body text goes here
</body>
</html>
DOCTYPE elemanı bir XHTML elemanı değildir ve standartlara uymasına gerek yoktur. Ayrıca sonlandırılması da gerekmez.

10. DOCTYPE zorunlu olarak mevcut olmalıdır. Geçerli 3 adet XHTML döküman tipi vardır:
a- XHTML Strict
XHTML Dökümanlarını css dökümanları ile beraber kullanmanız gerektiğinde kullanılır. HTML’nin dizayn unsurlarını içermez.
Tanımı:
    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”&gt;
b- XHTML 1.0 Transitional
CSS anlamayan web gezginlerini desteklemek ve HTML’nin dizayn unsurlarını kullanmak istiyorsanız bu döküman tipini kulanın.
Tanımı:
    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0
Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd”>

c- XHTML 1.0 Frameset
Eğer XHTML dökümanları pencerelere bölünmüş olarak gösterilecekse bu döküman tipini kullanın.
Tanımı:
    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”&gt;

DTD nedir?
DTD bir web sayfasının tipini SGML (Standard Generalized Markup Language) dili ile belirler.
DTD, HTML gibi SGML uygulamaları tarafından kullanılır. Amacı sayfa için geçerli olan markup sitilini belirtmektir. XHTML SGML döküman tipinde tanımlanmıştır. Bir XHTML DTD dökümanı sayfada uyulması gereken kuralları, bilgisayarın anlayabileceği bir dille belirtir.

Tablolar ve formlar ile çalışma

Bu dersimizde önce tablolar hazırlayacağız ardından etkileşimli sayfalar  için formlar hazırlayacağız. Tablolar html tasarımda çok kolay ve hızlı sayfalar hazırlanmasına yardımcı olur ancak iç içe oluşturulan tablolar sayfaların daha yavaş açılmasına sebep olmaktadır. Web 2.0′ın hayata geçmesiyle web siteleri özellikle seo alanında çok gelişti. Bu gelişime en büyük etki sayfaların hızlı açılması etkili oldu. Tablolar sayfaların açılma süresini uzattığı içinde Web 2.0 ile birlikte tabloların kullanımı yerine “div” etiketi ile kutular oluşturup Css ile şekiller verilmesi öneriliyor.

Özetle tabloların yerine div elementinin kullanımı web sayfalarının boyutunu küçültüp açılma hızını arttırdı ancak bir dezavantajı var ki her div elementine css dosyalarında verilen biçimlendirmeler yüzünden css dosyası boyutu birazcık büyüdü. Tabi bu dosyanın büyümesi sayfaların açılmasını aksi yönde etkilemedi, kısaca çok sayıda tablodan oluşan  sayfaların (özellikle browser oyunları gibi) açılması hızını neredeyse 1/3 oranında hızlandırdı..

Tablo hazırlama:

Tablo hazırlamak için için önce “table” elementini açıyor tablomuzun sonunda kapatıyoruz… Tablomuza çerçeve vermek için border etiketini,  çerçeve rengi için bordercolor etiketini, içeriğini renklendirmek için bgcolor etiketini, genişlik vermek için width ve yükseklik vermek içinde height etiketini  kullanıyoruz.. Bir tablo içerisinde en az 1 satır ve 1 sütun olması lazım.. Tablomuza satır eklemek için tr etiketini, sütun eklemek içinse td etiketini kullanıyoruz..

örnek kod:

<table border=”3″ bodercolor=”blue” bgcolor=”red” width=”100″ height=”200″>
<tr>
<td>tablo</td>
</tr>
</table>

kodun çıktısı:

tablo

Tablo Örnekleri:

Örnek 1 // kodun yazımı

<table border=”2″>
<tr>
<td>tablo 1</td>
</tr>
</table>

Örnek 1 // kodun çıktısı

tablo 1

Örnek 2 // kodun yazımı

<table border=”2″>
<tr>
<td>satır 1 sutun 1</td>
<td>satır 1 sutun 2</td>
<td>satır 1 sutun 3</td>
</tr>
</table>

Örnek 2 // kodun çıktısı

satır 1 sutun 1

satır 1 sutun 2

satır 1 sutun 3

Örnek 3 // kodun yazımı

<table border=”2″>
<tr>
<td>satır 1 sutun 1</td>
<td>satır 1 sutun 2</td>
<td>satır 1 sutun 3</td>
</tr>
<tr>
<td>satır 2 sutun 1</td>
<td>satır 2 sutun 2</td>
<td>satır 2 sutun 3</td>
</tr>
<tr>
<td>satır 2 sutun 1</td>
<td>satır 2 sutun 2</td>
<td>satır 2 sutun 3</td>
</tr>
</table>

Örnek 3 // kodun çıktısı

satır 1 sutun 1	satır 1 sutun 2	satır 1 sutun 3
satır 2 sutun 1	satır 2 sutun 2	satır 2 sutun 3
satır 2 sutun 1	satır 2 sutun 2	satır 2 sutun 3

Örnek 4 // kodun yazımı

<table border=”3″ width=”600″>
<tr bgcolor=”green”>
<td> 1. satır 1. sutun</td>
<td>1. satır 2. sutun</td>
<td>1. satır 3. sutun</td>
<td rowspan=”4″>1. satır 4. sutun</td>
</tr>
<tr bgcolor=”#0099CC”>
<td colspan=”3″>orta satır 1</td>
</tr>
<tr bgcolor=”orange”>
<td>2. satır 1. sutun</td>
<td>2. satır 2. sutun</td>
<td>2. satır 3. sutun</td>
</tr>
<tr bgcolor=”yellow”>
<td>2. satır 1. sutun</td>
<td>2. satır 2. sutun</td>
<td>2. satır 3. sutun</td>
</tr>
</table>

Örnek 4 // kodun çıktısı

Tablolarda satırları birleştirmek için colspan, sütunları birleştirmek içinse rowspan etiketlerini kullanıyoruz..

1. satır 1. sutun	1. satır 2. sutun	1. satır 3. sutun	1. satır 4. sutun
orta satır 1
2. satır 1. sutun	2. satır 2. sutun	2. satır 3. sutun
2. satır 1. sutun	2. satır 2. sutun	2. satır 3. sutun

Etkileşimli (dinamik) sayfalar için formlar oluşturma

Kullanıcıların girdikleri verileri mail adresine göndermek yada veritabanına kaydetmek için öncelikle sayfamızın etkileşimli yani dinamik (php, asp, jsp v.s) olması gerekmektedir. Formlar özelikle üye kayıt sayfalarında, üye giriş alanlarında, iletişim sayfalarında, görüş ve öneri gibi kullanıcı fikir ve bilgilerini iletme sayfalarında kullanılır..

Veri girişi için kullanılan yazı kutuları, şifre  kutuları, butonlar v.s tümü form etiketleri arasında yazılır. Aksi halde veri iletimi yada kaydı yapılmaz..

Örnek 1 // kodun yazımı

<form action=”” method=”post” name=”form”>
<p>Kullanıcı adınız: <input type=”text” name=”isim” value=”” /></p>
<p>Şifreniz: <input type=”password” name=”sifre” value=”” /></p>
<input name=”giris” value=”Giriş Yap” type=”submit” />
</form>

Örnek 1 // kodun çıktısı

Kullanıcı adınız:

Şifreniz:

Örnek 6 // kodun yazımı

<form action=”” method=”post” name=”form”>
<p>Adınız: &nbsp; &nbsp; &nbsp; <input type=”text” name=”isim” value=”” /></p>
<p>Soyadınız: <input type=”text” name=”soyad” value=”” /> </p>
<p>Şifre: &nbsp; &nbsp; &nbsp; &nbsp; <input type=”password” name=”sifre” value=”” /></p>
<h4>Hobileriniz</h4>
<input type=”checkbox” name=”muzik” /> Müzik
<input type=”checkbox” name=”spor” /> Spor
<input type=”checkbox” name=”oyun” /> Oyun
<h4>Eğitim</h4>
<input type=”radio” name=”ilk” /> İlk okul<br />
<input type=”radio” name=”lise” /> Lise <br />
<input type=”radio” name=”univ” />Üniversite<br />
<input type=”radio” name=”doktora” /> Doktora<br />
<h4>Şehir</h4>
<select name=”sehir”>
<option>Şehir seçin</option>
<option>Rzie</option>
<option>Artvin</option>
<option>Trabzon</option>
<option>Giresun</option>
<option>Ordu</option>
<option>Samsun</option>
<option>İstanbul</option>
</select>
</form>
<br /><br />
<input name=”bilgiler” value=”Gönder” type=”submit” />
<input name=”reset” value=”temizle” type=”reset” />
</form>

Örnek 6 // kodun çıktısı

Adınız:

Soyadınız:

Şifre:

Hobileriniz

Müzik
Spor
Oyun

Eğitim

İlk okul

Lise

Üniversite

Doktora

Şehir

Şehir seçin Rzie Artvin Trabzon Giresun Ordu Samsun İstanbul

Şimdilik örneklerimiz burada sona erdi. İlerleyen derslerimizde formaları css ile şekillendirecek ve sayfalarımızda daha hoş durmalarını sağlayacağız. Özellikle tablolar yerine div elementi ile kutular oluşturup bu kutuları css ile şekillendireceğiz..

 

Aklıma gelen tüm etiketleri aşağıda önce anlamları sonra da uygulamaları ile yayınlıyorum..
Tek taraflı etiketler:

Br – <br /> – Bir alt satıra inmeyi sağlar..
Hr – <hr /> – Yatay düz çizgi çizer..
İmg – <img src=”” /> – Sayfaya resim dosyası ekler..
İnput – <input type=”” name=”” /> – Kullanıcıya veri girişi yapma imkanı sunar..
Çift taraflı etiketler:
<html></html> – Html sayfası başlangıcı ve bitişini belirler..
<head></head> – Üst kısım yani kullanıcının göremediği kısımı belirler..
<body></body> – Gövde kısmı yani ekrana basılan kısmı belirler..
<div></div> – Bloklar (kutular) oluşturur..
<a href=””></a> – Sayfalar arası bağlantı (köprü) sağlar, link verir..
<b></b> yada <strong></strong> – Metinleri kalın yazar..
<i></i> yada <em></em> – Metinleri italik (yatık) yazar..
<u></u> – Metinleri altı çizili yazar..
<s></s> – Metinlerin üzerini çizer..
<small></small> – Kükük yazmaya yarar..
<big></big> – Büyük yazmaya yarar..
<tt></tt> – Daktilo yazısı yazmaya yarar..
<form></form> / <select>></select> – Kullanıcı veri girişi için form hazırlamada kullanılır..
<p></p> – Paragraf oluşturur..
<ol></ol> – Sıralı listeme işlemi yapar..
<ul></ul> – Sırasız listeleme işlemi yapar..
<li></li> – Alt alta listeme yapar..
<object></opject> – Flash kodları eklemeye yarar..
– Dış kaynaklara ait video veya ses kodlarını (flash) eklemeye yarar..
<table></table> – Tablo eklemeye yarar..
<td></td> Tablolar içerisine bloklar kurmaya yarar..
<tr></tr> – Tablolar içerisinde ki blokları bir arada tutmaya yarar..
<center></center> – İçeriği ekrana ortalar..
<h1></h1>…<h6></h6> – Başlık etiketleri..
<pre></pre> – Sayfalarda ki biçimlendirmeleri word dosyası formatındaymış gibi kullanmaya yarar. Örneğin bir web sayfasında enter ile alt satıra inme gibi işlemler tarayıcılar tarafından normal metin olarak kabul edilir ve alt satıra inmeyi kabul etmez. Ancak “pre” komutu arasına yazılan kodlar nasıl yazarsanız o şekilde ekrana basılır..
<script></script> – Java Script dosyaları yada kodlarını eklemeye yarar..
<font></font> – Metin özelliklerini belirlemeye yarar..
<span></span> – Elementleri bir arada tutmaya yarar..
 – Alt etiketi belirlemeye yarar ve genelde bileşikler ve çözeltileri yazmakta kullanılır..
 – Üs karakteri yazmaya yarar ve 2 üssü 2 gibi (2₂) kullanılır..

CSS – Stil Şablonları

CSS yani Türkçesi stil şablonları, her site tasarımcısının az dahi olsa bilmesi gereken bir konudur. Normalde yazı yazarken veya bir şeyi belirtirken, bazı özelliklerle öğenin şeklini değiştirebilirsiniz ama bu öğenin farklı yerlerde de bu şekilde olmasını istiyorsanız her birine uygulamanız gerekir. 50 tane farklı sayfanız olduğunu ve hepsinde başlıkları mavi renk yaptığınızı varsayalım, aylar sonra rengi kırmızı yapmak istediğinizde bütün sayfaları tek tek düzenlemeniz gerekecektir. İşte burada CSS devreye giriyor, bir şablon içerisine bütün sayfada kullanacağınız şekilleri belirtip buradan kullanıyorsunuz. Mavi başlığı kırmızı yap deyimini sadece şablon içerisinden belirtmeniz yetiyor. Dosyanın içinde ve dışında olmak üzere 2 türlü stil şablonu kullanımı var.

LİNK ÖZELLİKLERİ
a : Linkin, sayfa açıldığında tıklanmadan veya ümleç üzerine getirilmeden önceki durumudur.
a : hover : Linkin imleç üzerine getirildiğindeki durumudur.
a : active : Linkin tıklandığı andaki durumudur.
a : visited : Linkin tıklandıktan sonraki durumudur.

BİÇİMLENDİRME : 
color : Linkin rengini belirler.
background-color : Linkin zemin rengini belirler.
background-image : Linkin zeminine resim ekler(Bu animated-gif de olabilir.)
text-decoration : Linkin altının,üstünün vs. çizgili olup olmayacağını belirler.
font-weight : Yazının kalınlık veya inceliğini belirler.
border : Linkin etrafına kenarlık ekler.
display : Linki içeren hücre , satır vb. istenilen alanın seçilmesini sağlar.

LİSTE ÖZELLİKLERİ
disk : Liste biçiminin disk (içi dolu daire) şeklinde olmasını sağlar.
circle : Liste biçiminin çember şeklinde olmasını sağlar.
square : Liste biçiminin kare olmasını sağlar.
decimal : Liste biçiminin rakamlardan oluşmasını sağlar.
lower-roman : Liste biçiminin i,ii,iii gibi küçük roma rakamlarından oluşmasını sağlar.
upper-roman : Liste biçiminin I,II,II gibi büyük roma rakamlarından oluşmasını sağlar.
lower-alpha : Liste biçiminin a,b,c şeklinde küçük harf olmasını sağlar.
upper-alpha : Liste biçiminin A,B,C şeklinde büyük harf olmasını sağlar.
none : Listenin simgesiz olmasını sağlar.
inside : Listenin ikinci satırının en soldan başlamasını sağlar.
Outside : Listenin ikinci satırının ilk satır ile aynı yerden başlamasını sağlar.
list-style-image : Liste biçiminin resim olmasını sağlar.

KATMAN ÖZELLİKLERİ
position : Katmanın yerinin belirlenmesini sağlar.
absolute : Katmanın yerinin pencere esas alınarak belirlenmesini sağlar.
relative : Katmanın yerinin bir önceki katman esas alınarak belirlenmesini sağlar.
static : Katmanın yerinin sabit olarak (Varsayılan olan sol üst köşe) belirlenmesini sağlar.
top : Katmanın üstten ne kadar aşağıda olması gerektiğini belirler.
left : Katmanın soldan ne kadar içeride olması gerektiğini belirler.
width : Katmanın genişliğinin ne kadar olacağını belirler.
height : Katmanın yüksekliğinin ne kadar olacağını belirler.
overflow : Katmanın belirtilen yükseklik ve genişliğe sığmayan kısmına ne olacağını belirler.
auto : Otomatik olarak belirlenir.
scroll : Kaydırma çubuğu ekleyerek görünmesini sağlar.
visible : Katmanı belirtilen boyutların dışına taşırarak sığmayan yerlerin görünmesini sağlar.
hidden : Sığmayan yerleri gizler.
visibility : Katmanın görünebilirlik ayarını yapar.
visible : Katmanın görünür olmasını sağlar.
hidden : Katmanı gizler.
z-index : Katmanların alttan üste doğru hangi sıra ile gösterileceğini belirler.1 değeri katmanın en altta olacağını belirtir.

FONT ÖZELLİKLERİ
font-family : Yazı türünü belirler.(Arial , Verdana gibi.)
font-style : Yazının normal veya sağa eğik olmasını sağlar.
font-variant : Yazının normal veya tümünün büyük harflerden oluşmuş olmasını sağlar.
font-weight : Yazının kalınlık-inceliğini belirler.
font-size : Yazının büyüklüğünü belirler.

TEXT ÖZELLİKLERİ
word-spacing : Kelimeler arasında bırakılacak boşluğu boşluğu belirler.
letter-spacing : Harfler arasında bırakılacak boşluğu boşluğu belirler.
text-decoration : Kelimenin altının , üstünün vs. çizili olup olmayacağını belirler.
underline : Kelimenin altının (Satır altından) çizili olmasını sağlar.
overline : Kelimenin üstünün (Satır üstünden) çizili olmasını sağlar.
line-through : Kelimenin ortasından çizili olmasını sağlar.
blink : Kelimenin yanıp sönmesini sağlar.(Netscape için)
vertical-align : Metnin yatay olarak nasıl hizalanacağını belirler.
text-transform : Kelimelerin büyük harf veya küçük harflerden oluşmasını sağlar.
capitalize : Kelimelerin ilk harflerinin büyük olmasını sağlar.
uppercase : Kelimelerin bütün harflerinin büyük olmasını sağlar.
lowercase : Kelimelerin bütün harflerinin küçük olmasını sağlar.
none : Kelimelerin orjinal metindeki gibi olmasını sağlar.
text-align : Metnin dikey olarak nasıl hizalanacağını belirler.
left : Metni sola yaslar.
right : Metni sağa yaslar.
center : Metni ortalar.
justify : Metni iki yana yaslar.
text-indent : Metnin ilk satırının soldan ne kadar içerden başlayacağını belirler.
line-height : Satırın yüksekliğini ayarlar.(Yüksek değer verildiğinde satırlar arasındaki boşluk artar.)
first-line : Metnin ilk satırının biçimlendirilmesini sağlar.
first-letter : Metnin ilk harfinin biçimlendirilmesini sağlar.

İMLEÇ ÖZELLİKLERİ
crosshair : İmlecin artı işareti şeklinde olmasını sağlar.
auto : İmlecin metinde dikey çizgi ,boş alanda normal ok şeklinde olmasını sağlar.
default : İmlecin hem metinde hem de boş alanda normal ok şeklinde olmasını sağlar.
hand : İmlecin linkte olduğu gibi el şeklinde olmasını sağlar.
move : İmlecin taşıma işareti şeklinde olmasını sağlar.
ne-resize : İmlecin sağa yatık normal ok olmasını sağlar.
nw-resize : İmlecin sola yatık normal ok olmasını sağlar.
se-resize : İmlecin yukardan aşağı doğru ve sağa yatık normal ok olmasını sağlar.
sw-resize : İmlecin yukardan aşağı doğru ve sola yatık normal ok olmasını sağlar.
n-resize : İmlecin aşağıdan yukarıya doğru ince ok şeklinde olmasını sağlar.
s-resize : İmlecin yukardan aşağı doğru ince ok şeklinde olmasını sağlar.
w-resize : İmlecin sola doğru ince ok şeklinde olmasını sağlar.
e-resize : İmlecin sağa doğru ince ok şeklinde olmasını sağlar.
text : İmlecin hem metinde hem de boş alanda metinde olduğu gibi görünmesini sağlar.
wait : İmlecin meşgul animasyonuna dönüşmesini sağlar.
help : İmlecin yardım-soru işaretine dönüşmesini sağlar

ZEMİN ÖZELLİKLERİ
background-color : Zeminin rengini belirler.
#color : Renk adı.
transparent : Zeminin saydam olmasını sağlar.
background-image : Zemine resim yerleştirilmesini sağlar.
url : Zemine yerleştirilen resmin adresi.
background-repeat : Zemine yerleştirilen resmin nasıl yayılacağını belirler.
repeat : Resmin bütün zemine yayılmasını sağlar.
repeat-x : Resmin sol-üstten sağ-üste doğru yayılmasını sağlar.
repeat-y : Resmin sol-üstten sol-alta doğru yayılmasını sağlar.
no-repeat : Resmin yayılmadan orjinal boyutuyla görünmesini sağlar.
background-attachment : Zemindeki resmin , sayfa kaydırma çubuğuyla hareket ettirildiğindeki durumunu belirler.
scroll : Sayfa hareket ettirildiğinde zeminin de kaymasını sağlar.
fixed : Sayfa kaydırılsa da zeminin sabit kalmasını sağlar
background-position : Zemindeki resmin istenilen şekilde yerleştirilmesini sağlar.
top : Resmi yukarı yerleştirir.
center : Resmi ortalar.
bottom : Resmi aşağı yerleştirir.
left : Resmi sola yerleştirir.
right : Resmi sağa yerleştirir.
…px : Resmin soldan istenilen ölçüde içerde olmasını sağlar.

TABLO ÖZELLİKLERİ
margin : Tablo ile pencerenin kenarları arasında bırakılacak boşluğu belirler.
margin-top : Tablo ile pencerenin üst kenarı arasında bırakılacak boşluğu belirler.
margin-right : Tablo ile pencerenin sağ kenarı arasında bırakılacak boşluğu belirler.
margin-bottom : Tablo ile pencerenin alt kenarı arasında bırakılacak boşluğu belirler.
margin-left : Tablo ile pencerenin sol kenarı arasında bırakılacak boşluğu belirler.

padding : Tablo kenarları ile tablo içeriği (Yazı vb.) arasında bırakılacak boşluğu belirler.
padding-top : Tablonun üst kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.
padding-right : Tablonun sağ kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.
padding-bottom : Tablonun alt kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.
padding-left : Tablonun sol kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.

border : Tablonun kenarlarının şekillendirilmesini sağlar.

border-top : Tablonun üst kenarının şekillendirilmesini sağlar.
border-left : Tablonun sol kenarının şekillendirilmesini sağlar.
border-bottom : Tablonun alt kenarının şekillendirilmesini sağlar.
border-right : Tablonun sağ kenarının şekillendirilmesini sağlar.

border-width : Tablonun kenarlarının kalınlığını belirler.
border-top-width : Tablonun üst kenarının kalınlığını belirler.
border-right-width : Tablonun sağ kenarının kalınlığını belirler.
border-bottom-width : Tablonun alt kenarının kalınlığını belirler.
border-left-width : Tablonun sol kenarının kalınlığını belirler.

border-style : Tablonun kenarlık türünü belirler.
border-top-style : Tablonun üst kenarlık türünü belirler.
border-right-style : Tablonun sağ kenarlık türünü belirler.
border-bottom-style : Tablonun alt kenarlık türünü belirler.
border-left-style : Tablonun sol kenarlık türünü belirler.

border-color : Tablonun kenarlarının rengini belirler.
border-top-color : Tablonun üst kenarının rengini belirler.
border-right-color : Tablonun sağ kenarının rengini belirler.
border-bottom-color : Tablonun alt kenarının rengini belirler.
border-left-color : Tablonun sol kenarının rengini belirler.

color : Tabloda geçen metnin rengini belirler.
width : Tablonon genişliğini belirler.
height : Tablonun yüksekliğini belirler.

CSS Örnekleri ve sayfa içinde kullanımları :

Sayfa İçinde Kullanım

Aşağıdaki örnekte sayfa içi kullanımını görüyorsunuz, head kısmı içerisinde <style type=”text/css”> ile başlayarak kodlar yazılıyor ve </style> ile bitiyor. Kullanmak istediğiniz yerde de class=”komut” yazmanız yetiyor.

<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-9″ />
<title>Site Tanıtım</title>
<style type=”text/css”>
.buyuk {
font-family : Verdana, Geneva, sans-serif;
font-size : 18px;
font-style : italic;
font-weight : bold;
color : #000;
}
</style>
</head>
<body>
<p class=”buyuk”>Site tanıtım stil denemesi</p>
</body>
</html>

Harici Dosya Kullanımı

Stil şablonlarını farklı bir dosyada tutmak istiyorsanız, önce bir metin dosyası içerisine yukarıdaki <style> içerisindeki kodları yazın ve dosya uzantısını .css vererek kaydedin.

Sayfanızın head bölümüne de şablonun bağlantısını verin <link href=”/style.css” rel=”stylesheet” type=”text/css” />, geri kalan kısmında bir fark yok.

<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-9″ />
<title>Site Tanıtım</title>
<link href=”/style.css” rel=”stylesheet” type=”text/css” />
</head>
<body>
<p class=”buyuk”>Site tanıtım stil denemesi</p>
</body>
</html>

Burada yazı örneği ile vermem sadece yazılarla sınırlı kalacağınız  anlamına gelmiyor, tablolar ve div gibi stil özelliği verilebilen her türlü öğe için geçerlidir.

<div class=”buyuk”>
<td class=”buyuk”>
<img class=”buyuk”>

CSS Stil Şablonu Yazımı

class : Yazının başına nokta “.” işareti gelir ( .buyuk ), class (sınıf) özelliği “deneme” olan tüm HTML öğelerine uygulanır.

id : Yazının başına # işareti gelir( #buyuk ), o kimliğe sahip tüm html öğelerine uygulanır.

tag : Bir html öğesinin özelliklerini yeniden tanımlamak içindir, direk ismi yazılır (body, td gibi).

compound : a : link (bağlantı), a : visited (Ziyaret edilmiş bağlantı), a : hover (bağlantının üstüne gelince), a : active (aktif bağlantı) stillerini değiştirmek içindir.

Aynı olan stilleri virgüller ile belirtebilirsiniz :

.buyuk, #buyuk, td

Stil isminden sonra { işareti gelir her özellikten sonra da ; işareti, bittiğinde ise } ile kapatırsınız. Az yer kaplayan bir stil istiyorsanız birleşik yazmanızı tavsiye ederim.

.buyuk { font-family : Tahoma, Geneva, sans-serif; text-decoration : underline;}

Yaptığınız css’ i kontrol etmek için Clean CSS sitesini kullanabilirsiniz, hızlandırmak ve  kontrol etmek için birebir.

Kullanabileceğimiz bazı CSS elementleri

Biz bundan sonraki tüm Stil Şablon örneklerimizde Global Stil Şablonu kullanacağız. Bu yüzden Css ile Html dosyalarımız beraber olacak böylece de konuyu kavrama ve anında uygulamanız daha kolay olacak. Şimdi Css’in etkidiği Html etiketlerini hangi özelliklerini değiştirdiğini görelim.
3.1. Font Özellikleri
Adı üzerinde Font özelliklerini değiştirmeye yarayan bir stil şablon özelliğidir. Nasıl kullanıldığına hemen bir bakalım.

<html>
<body>
<head>
<title>Css</title>
<style type=”text/css”>
<!—
p
{
font-size  :  12pt;
font-family  :  Arial;
font-weight  :  bold;
font-style  :  italic;
color  :  #00FFFF;
}
–>
</style>
<body>
<p>Web Teknikleri</p>
</body>
</html>

Alt özellikleri : 
font-size :  Font büyüklüğünü belirtir.
İsterseniz aşağıdaki gibi standart değerleri seçersiniz;
xx-large (en büyük )
x-large (biraz büyük)
large (büyük)
medium (orta)
small (küçük)
x-small (biraz küçük)
xx-small (en küçük)
isterseniz direkt olarak punto(pt) değerini verebilirsiniz.
font-family :  Font tipini belirler.
Arial, Courier, Verdana gibi font isimlerini alabilir.
font-weight :  Fontun kalınlı incelik durumunu belirler.
bold : Fontu kalın yapar.
normal : Fontun normal halde olmasını sağlar.
Bu özellik yazılmadığında normal özellik alınır.
font-style :  Fontun yatık olup olmamasını sağlar.
italic : Yazının sağa doğru yatık olmasını sağlar.
normal : Fontu normal halde olmasını sağlar.
Bu özellik yazılmadığında normal özellik alınır.
color :  Fontun rengini belirler.
Blue, red,green gibi renklerin ingilizce karşılıklarını alabilir.

3.2 Text Özellikleri
Text özelliği ile de font özelliğinin sahip olmadığı bazı özellikleri etiketimize ekleriz.
Örnek ile açıklayalım.

<html>
<body>
<head>
<title>Css</title>
<style type=”text/css”>
<!—
p {
text-transform  :  lowercase;
text-decoration  :  underline;
text-align  :  left;
line-height  :  20px;
text-indent  :  15px;
}
–> </style>
<body>
<p>Web Teknikleri</p>
</body>
</html>

Alt özellikleri : 
text-transform : 
lowercase : Yazının tümünün küçük harf olmasını sağlar.
uppercase : Yazının tümünün büyük harf olmasını sağlar.
capaitalize : Yazının istenilen şekilde kalmasını sağlar.
text-decoration : 
underline : Yazının altının çizili olmasını sağlar.
overline : Yazının üstünün çizili olmasının sağlar.
line-through : Yazının üstünün çizili olmasını sağlar.
none : Yazının herhangi bir yerine çizgi çekilmemesini sağlar.
text-align : 
left : Yazının sola bitişik olmasını sağlar.
center : Yazının ortada olmasının sağlar.
right : Yazının sağa bitişik olmasını sağlar.
line-height : Yazının normal satırdan çizgi yüksekliğini belirler. 3px, 5px gibi değerler alır.
text-ident : Yazının soldan ne kadar boşlukla içeriden başlayacağını belirler. 5px, 10px gibi değerler alır.

3.3 Background Özellikleri
Background ile html sayfamızın arkafonlarının özelliklerini değiştirmemizi sağlar.

<html>
<body>
<head>
<title>Css</title>
<style type=”text/css”>
<!—
p {
background-color  : #00ff00;
background-image  :  url (“resim_adi.gif”);
background-position  :  center;
background-repeat  :  repeat-y;
}
–>
</style>
<body>
<p>Web Teknikleri</p>
</body>
</html>

Alt özelleikleri :

background-color : 
Arka fonun rengini belirler. Css’te renkleri blue, red gibi tanımlayabileceğimiz gibi Html kodunu vererekte tanımlayabiliriz.
background-image : 
Arka fonu bir resim dosyası yapmak için kullanılır. url etiketinin içine resim dosyasının yolu ve ismi tam olarak yazılmalıdır.
background-position : 
left : Arka fondaki resmin sadece sol tarafta olmasını sağlar.
center : Arka fondaki resmin sadece sol tarafta olmasını sağlar.
right : Arka fondaki resmin sadece sol tarafta olmasını sağlar.

background-repeat : 
Arkafondaki resmin tekrarlanması istendiğinde kullanılır.
repeat : Tüm yönlerde tekrar edilmesini sağlar.
repeat-x : X (yatay) yönünde tekrar edilmesini sağlar.
repeat-y : Y (dikey) yönünde tekrar edilmesini sağlar.
no-repeat : Resmin tekrar edilmeyerek bir kere gösterilmesini sağlar.

3.4 List Özellikleri
Bu Css özelliği <UL> ve <LI> html etiketleri ile oluşturduğumuz listelerin özelliklerini belirlemek için kullanılır.

<html>
<body>
<head>
<title>Css</title>
<style type=”text/css”>
<!—
li {
list-style-type  :  circle;
list-style-position  :  inside;
list-style  :  decimal;
list-style-image  :  url (“resim.gif”);
}
–>
</style>
<body>
<ul>
<li>Web Teknikleri
<li>Html
<li>Javascript
<li>Css
<li>Web Grafik
</ul>
</body>
</html>

Alt özellikleri :

list-style-type : 
disk : Liste biçiminin disk (içi dolu yuvarlak) şeklinde olmasını sağlar.
circle : Liste biçiminin çember şeklinde olmasını sağlar.
square : Liste biçiminin kare olmasını sağlar.
decimal : Liste biçiminin rakamlardan oluşmasını sağlar.
lower-roman : 
Liste biçiminin i,ii,iii, gibi roma rakamlarının küçük harfi olmasını sağlar.
upper-roman : Liste biçiminin I,II,II gibi roma rakamlarının büyük harfi olmasını sağlar.
lower-alpha : Liste biçiminin a,b,c şeklinde olmasını sağlar.
upper-alpha : Liste biçiminin A,B,C şeklinde olmasını sağlar.
none : Listenin imgesiz olmasını sağlar.

list-style-position : 
inside : Listenin ikinci satırının en soldan başlamasını sağlar.
Outside : Listenin ikinci satırının ilk satır ile aynı yerden başlamasını sağlar.
list-style-image : 
Liste biçiminin resim olmasını sağlar.

3.5 Position Özelliği
Html’de kullandığımız Layer (katman) etiketlerinin html üzerindeki yerleştirme işlemi için kullanılır. Hemen bir örnek ile görelim.

<html>
<head>
<title>Css</title>
<STYLE type=”text/css”>
<!—
div {
position : absolute;
top : 20px;
left : 10px;
width : 200px;
height : 200px;
clip : auto;
overflow : scroll;
z-index : auto;
visibility : visible;
}
–>
</style>
<body>
<div>
Web Teknikleri<br>
Html<br>
Javascript<br>
Css<br>
Grafik<br>
</div>
<p> Web Teknikleri </body>
</html>

position : 
absolute : Katmanın yerinin kesin olarak belirlenmek istendiğinde kullanılır.
relative : Katmanın yerinin göreli(diğer öğelere göre değişebilen) olarak belirlenmek istendiğinde kullanılır.
static : Katmanın yerinin sabit olarak belirlenmek istendiğinde kullanılır.
top :  Katmanın üst kısımdan kaç piksel aşağıda olması gerektiğini belirler.
left :  Katmanın sol kısımdan kaç piksel aşağıda olması gerektiğini belirler.
width :  Katmanın genişliğinin kaç piksel olacağını belirler.
height :  Katmanın boyunun kaç piksel olacağını belirler.
clip :  Katmanın görünmesi istenen bölgeyi içeren kutucuk.
overflow :  Katmanın belirtilen yükseklik ve genişliğe sığmayan kısmına ne olacağını belirler.
auto : Otomatik olarak belirlenir.
scroll :  Kaydırma çubukları ekler.
visibility :  Katmanın görünebilirlik ayarı yapar
visible : Görünür hale getirir.
hidden : Gizler.
z-index :  Katmanın sayfa üzerindeki sıra sayısı.

Örneklerin bir kısmı alıntıdır.. Biz burada global yani genel stil şablonunu kullandık. Ancak sitelerimizi hazırlarken harici stil (css) şablonu kullanacağız. Sebebine gelince,  css şablonu hazırlamaktaki amacımız zaten sayfamızın her yerinde biçimlendirme etiketlerini kullanmamak ve sayfamızın düzenini ve yükleme hızını korumak. Bunun içinde css dosyamızı harici kullanıp sayfamıza link ile çağıracağız..

 

CSS (X)HTML

CSS güçlüdür, çünkü CSS uygun stilleri ve bu stilleri nasıl uygulanacağını belirlemek için (X)HTML dökümanının yapısını kullanır. (X)HTML Sayfa yapısına stil uygulamanın bir çok yolu vardır. Ancak bu yolları öğrenmeden önce (X)HTML hiyerarşisini öğrenmemiz gerekir.

(X)HTML Döküman Hiyerarşisini Anlamak

Seçici(Selector) ve Döküman arasındaki ilişkiyi anlayabilmemiz için, dökümanların nasıl planlandığını tekrar gözden geçirmemiz gerekir. Aşağıdaki basit (X)HTML dökümanı üzerine biraz düşünelim:

<html>
<head>
<title> CSS (X)HTML Hiyerarşisi </title>
</head>
<body>
<h1>CSS<em>(X)HTML Hiyerarşisi </em></h1>
Sitemize hoş geldiniz <em>Merhaba</em>biz <strong>sizler için <a xhref=”konu.html”> bazı <em>önemli</em> konular </a></strong>! hazırladık
<ul>
<li>Konu Başlıkları :
<ul>
<li><strong>Asıl</strong> Giriş</li>
<li>Önsöz</li>
<li><em>ilk</em> bölüm:
<ol>
<li>Elma</li>
<li>Armut</li>
<li>Karpuz</li>
</ol>
</li>
</ul>
</li>
<li>…vd.</li>
</ul>
<p>
Ayrıntılılı bilgi çin <a xhref=”mailto:destek@gabya.net”> mesaj gönder </a>
</p>
</body>
</html>

CSS’in güçlü olmasının en büyük nedeni (X)HTML elementleri arasındaki ilişkiden yararlanmasıdır. (X)HTML dökümanları gizli bir hiyararşi ile oluşturulur. Bu hiyerarşi içinde tüm (X)HTML elementleri kendilerine uygun bir yer bulur. Bu ilişkiyi biz soy ağacına benzete biliriz.

Kodun çıktısı:
CSS (X)HTML Hiyerarşisi

CSS (X)HTML Hiyerarşisi

 

Sitemize hoş geldiniz Merhababiz sizler için bazı önemli konular ! hazırladık

• Konu Başlıkları :
  • Asıl Giriş
  • Önsöz
  • ilk bölüm:
    1. Elma
    2. Armut
    3. Karpuz
• …vd.

Ayrıntılılı bilgi çin mesaj gönder

Yukarıdaki (x)html yapısını bir soy ağacı gibi düşünüp değerlendirirsek:

Bir elementin ebeveyn(anne-baba) olduğunu anlamak için o elementin altında başka element olup olmadığına bakmalıyız, eğer varsa o element ebeveyndir. Yukarıdaki şekilde p elementine dikkat edelim. p bir ebveyndir çünkü altında em ve strong elementleri bulunmaktadır. strong da bir ebeveyndir ki onun altında aelementi vardır. Bir elementin çocuk element olduğunu anlamak için de üstünde bir elementin olup olmadığına bakarız. Yani yukarıdaki olayın tersi. Buna görestrong elementi p elementinin bir çocuğudur.

Daha karmaşık yapılarda ata(ancestor) ve torun(descendant) ilişkisi vardır. Aradaki fark eğer bir element diğer elementin tam olarak bir seviye üstünde ise o atadiğeride torun durumundadır. Yukarıdaki şekili incelersek ilk ul elementinin iki adet li çocuk elementi bulunmaktadır ve bu iki li elementinin altındaki tüm elementler ilkul elementinin torun elementleridir.

Torun Seçicileri (Descendant Selectors)

Bu modelin avantajlarından birisi Torun Seçicileridir(diğer bir isimleride içiçe seçicilerdir). Torun Seçicilere yapılan tanımlama sadece belitilen elementlere uygulanır bu kuralların haricinde kalanlara ise uygulanmaz. Bir örnek verecek olursak bir h1 elementinin em torun elementine belirli bir stil uygulamak istesek. Normalde bir sınıf tanımlaması yapılarak her h1 elementi altındaki em elementini tek tek seçerek bu sınıfı uygulamamız gerekir ki bunun font etiketi uygulmasından farkı yoktur. Açıkcası bu işlemi yapmak uzun zaman alacaktır. Ancak Torun Seçicisi kullanarak bu işi kolayca yapabilriz. örnek kod yazarsak:

1. h1 em {color: gray;}

Bu kod dökümandaki atası h1 olan tüm em elementlerini gri yapacaktır. Diğer em‘ler ise bu kuralı uygulamayacaktır.

Torun Seçicilerde, seçici kısmı birbirinden bir boşlukla ayrılmış iki veya daha fazla seçiciden oluşur. Aradaki boşluk bağlayıcı özellik taşır.

Sadece iki elementle sınırlı değiliz, sınırsız element tanımlayabiliriz.

1. ul ol ul em {color: gray;}

Torun Seçiciler çok kuvvetli olabilirler. Onlar (X)HTML ile yapılmasının imkanı olmayan işler yaparlar. Örnek bir dökümanda iki adet alan oluşturduğumuzu düşünün birinci alanın ardalanı(background) mavi, ikinci alanın ardaalanının beyaz olduğunu düşünün ve her iki alanın içinde de linkler olduğunu farz edelim. Tüm linkleri mavi olarak atamamız mümkün olmayacaktır çünkü ilk alanın ardaalanı mavi olduğu için linkler görünmeyecektir.

Çözüm Torun Seçicilerindedir; ilk alan içindeki linklere farklı renk diğerlerine farklı renk tanımlaması yaparak bu işi halledebiliriz.

1. td.sidebar {background: blue;}
2. td.main {background: white;}
3. td.sidebar a:link {color: white;}
4. td.main a:link {color: blue;}

Bir örnek daha verelim. blockquote ve p elementleri içindeki b elementi ile blockquote içinde ve normal paragraf içinde geçen b elementlerine özel bir atama yapmak istiyoruz bunun için kod yazarsak:

1. blockquote b, p b {color: gray;}

Koda dikkat edersek her iki atamayı ayrı ayrı yapmak yerine araya bir virgül koyarak birlikte yaptığımızı görürsünüz.

Browser Uyumu:

Internet Explorer 5.0, 5.5, 6.0, 7.0: destekliyor ;
Netscape Navigator 6.0, 7.0: destekliyor ;
Mozilla 1.0: destekliyor ;
Opera 5.0 ‘ 6.0: destekliyor

Çocuk Seçicileri

Bazı durumlarda keyfi olarak bir torun seçicisi kullanmaktansa daha ayrıntılı bir ayrım yapmak isteyebiliriz. Örneğin bir h1 elementinin altındaki strongelementlerinden sadece Çocuk Elementi için tanımlamalar yapmak istersek (torun elementleri hariç), Bunun için çocuk bağlayıcısını kullanırız ( > ) büyüktür işareti

<html>
<head>
<title>Örnekler</title>
<style type=”text/css”>
h1>strong {color: red;}</h1>
</style>
</head>
<body>
<h1>Bu <strong>koda</strong> uygulanacaktır.</h1>
<h1>Bu <em>koddaki <strong> bu kısım </strong></em> uygulama dışıdır..</h1>
</body>
</html>

Yukardaki durumda sadece ilk strong elementi için tanımlama gerçekleşecektir ikincisi için herhangi bir stil tanımı uygulanmayacaktır.
Kodun çıktısı:

 

Bu koda uygulanacaktır.

Bu koddaki bu kısım uygulama dışıdır..

Yukarıda ana örneğimizin bir kısmı gösterilemektedir. Ebeveyn-çocuk ilişkisini daha iyi anlamak için hazırlanmıştır. a elementi strong‘un ebevenynidir. p elementide anın ebeveynidir. Ancak p elementi strong‘un ebeveyni değildir. Biz burada p > a ve a > strong şeklinde tanımlama yapabilriz ancak p > strong tanımlamasını yapamayız.

Birde aynı seçici içinde hem torun birleştiricisini hemde çocuk birleştiricisini kullanabiliriz.

1. table.summary td > p

Browser Uyumu :

Internet Explorer 5.0, 5.5, 6.0: desteklemiyor (7.0 destekliyor)
Netscape Navigator 6.0, 7.0: destekliyor
Mozilla 1.0: destekliyor
Opera 5.0 ‘ 6.0: destekliyor

Bitişik Kardeş Seçiciler

Bitişik Kardeş Seçicileri biribiri ardına gelen aynı seviyedeki elementlere stil tanımlası için kullanılır.

Örneğin bir h3 elementine stil uygulamak istiyoruz ayrıca bir sonraki h2 elementinede aynı stili uygulmak istediğimiz durumlarda kullanılır. Genel uygulamalarda kullanılan bir durumdur. Biz genelde h2 ve h3 arasındaki aralığı ayarlamak için bu durumla karşılaşırız. Örnek verecek olursak:

<body>
<h2>Başlık 2 <em>metni</em></h2>
<h3>Başlık 3 metni</h3>
<p>Buraya <em>önemli</em> ve <strong>iyi</strong> kod gir</p>
</body>

Kodun çıktısı:

Başlık 2 metni

Başlık 3 metni

Buraya önemli ve iyi kod gir

Biz burada h2 ve h3 arasında boşluk vermek için aşağıdaki kodu kullanırız:

1. h2 + h3 {margin: -1em; }

Browser Uyumu :

Internet Explorer 5.0, 5.5, 6.0: desteklemiyor (7.0 destekliyor)
Netscape Navigator 6.0, 7.0: destekliyor
Mozilla 1.0: destekliyor
Opera 5.0 ‘ 6.0: destekliyor

Sonuç olarak konunun başında söylediğimiz gibi CSS, (X)HTML elementlerinin kendi aralarındaki ilişkileri kullanarak bize bir çok avantaj sağlar. Bu sayede bir çok kod yığınından kurtulmuş oluruz ve kodlarımız bir düzene girer. Bu kuralları uyguladıkça önemini daha iyi anlayacağız.

Çocuk Seçicileri ve Bitişik Kardeş Seçicileri‘ni Internet Explorer 7 versiyonundan itibaren desteklemeye başlamıştır. Bu nedenle kullanımı konusunda dikkat etmeliyiz.

Genel Seçiciler

Genel Seçiciler bir elementi bütüne uygulamak için kullanılır bu işlem için * işareti kullanılır. Aşağıdaki kod tüm elementleri kırmızı yapacaktır.

1. * { color:red;}

Ayrıca bir katmanın içindeki sınıflara uygulamak istersek

1. div .uyari * { color:red;}

katman, .uyari sınıfı içindeki tüm elementler kırmızı olacaktır.

Browser Uyumu :

Internet Explorer 5.0, 5.5, 6.0,7.0 destekliyor
Netscape Navigator
6.0, 7.0: destekliyor
Mozilla 1.0: destekliyor
Opera 5.0 ‘ 6.0: destekliyor

HTML 5 nedir?

Bu ara dersimizde Html 5 nedir ve nasıl çalışır, eski versiyonlar ile farklarnı inceleyeceğiz. Web sayfası görüntüleme teknolojisi html’nin (hyper text markup language)  en son ve oldukça gelişmiş sürümüdür. Bu sürümde diğer sürümlere nazaran yeni elementler (etiketler) ön plana çıkıyor. Html 5′in en büyük avantajı web sayfalarını kod kirliğinden kurtarıp temizler. İçeriğin sade ve doğal olmasını sağlar, bu seo açısından çok önemli bir artıdır. Ancak ne var ki Html 5′in bazı dezavantajları da vardır. Bunlardan en önemlisi güncel tarayıcıların hiçbiri tam destek vermiyor.  Kısaca html 5′i tüm özellikleriyle kullanmamız şu an için mümkün değil.  Ancak kısıtlı özelliklerde kullanabiliriz. Bu yüzden halen daha web siteleri hazırlanırken html 4.X sürümüne göre hazırlanır…

Html 5 ile gelen yeni elementler

<canvas>: Sayfada bir tuval alanı oluşturur. Tuvale çizim javascript ile yapılabilir.
<audio>: Sayfaya ses oynatıcı bir modül ekler.
<video> : Video oynatıcı bir modül ekler.
<progress> : İşlem süreci göstergesi ekler.
<caption> : Başlık olarak düşünülen metinleri düzenler.
<header> : Sitenin başlık ve açıklama içeriğini alır.
<nav> : Menüleri ve bir takım zaruri işlevleri içine alır.
<footer> : Sitelerin en alt kısmını içine alır.
<section> : Sitelerin ana içerik kısmını içine alır.
<aside> : Ana içerikte ayrı yazılan kısımdır.
<article> : Makale, deneme tarzı yazıları kapsar.
: Dışarıdan eklenen componentler için kullanılır. (Örn : .swf uzantılı dosyalar)
<details> : Detay bilgisi içerir.
<summary> : Yazının başlığını belirler.
<time> : Tarih, saat verilerini kapsar.
<mark> : Yazı içerisinde özellikle üstünde durulan kelimeleri belirler.
<figcaption> : <figure> elementinin başlığını belirler.
<figure> : Çeşitli medya içeriği gruplarını belirler.
<hgroup> : Başlık grubunu belirtir. H1, H2 gibi başlık elementleri burada tanımlanabilir.
<datalist> : Düzenlenebilir elementlere otomatik tamamlama özelliği verilmesini sağlar.

kaynak: wikipedia

Bu elementler sayesinde hem tasarımcı için hemde tarayıcı için büyük kolaylık sağlar.. Tasarımcı kod kalabalığından kurtarıp temiz ve hızlıca kodlama yapmaya izin verir.  Tarayıcı için ise daha az kod ve daha hızlı yüklenme sağlar..