Web Teknolojileri: HTML, XHTML, DHTML, CSS, JavaScript

Web Teknolojileri: HTML, XHTML, DHTML, CSS, JavaScript

HTML (HyperText Markup Language)

İngiliz profesör Tim Berners-Lee tarafından, 1989 yılında CERN’de çalıştığı sırada geliştirilen web işaretleme dilidir. Bugünkü internet sayfalarının temeli bu işaretleme diline dayanır. HTML standartları, Tim Berners-Lee tarafından kurulmuş olan World Wide Web Consortium tarafından belirlenir.

W3C (World Wide Web Consortium), Ekim 1994’te Tim Berners-Lee tarafından kurulmuş, web standartlarını belirleyen kuruluştur. Basitçe anlatmak gerekirse, bir web teknolojisinin standart olup olmayacağına bu kurum karar verir.

HTML’in son sürümü HTML 5’dir. Günümüzde kullanılan birçok web sitesi ise şuan henüz HTML 5 yerine HTML 4.01 ve XHTML teknolojisini kullanıyor.

HTML dosyalarının uzantıları html ve htm’dir.

Tim Berners-Lee

Tim Berners-Lee aynı zamanda 1990 yılında ilk web sunucusunu ve NeXTStep isimli istemci yazılımını icat etmiştir. Yaptığı hizmetlerden dolayı Sir ünvanına da layık görülmüştür.

Örnek bir HTML kodu

<html>
<head>
<title>Sayfa başlığı | Bilim.org</title>
</head>

<body>

<b>Bu bir HTML sayfasıdır</b>

</body>
</html>

Çok bilinmeyen ve her html öğretici kılavuzda yer almayan html taglarından (etiketlerinden) ve tekniklerinden de bahsedeceğim.

Üst simge ve alt simge kullanmak

HTML’de üslü sayıları yazmak için, çift taraflı bir tag olan <sup> tagını kullanılır.

Kod:

X<sup>2</sup>

Alt simge kullanmak için ise benzer bir çift taraflı tag olan <sub> tagını kullanırız.

Kod:

H<sub>2</sup>

Eşit aralıklı yazı kullanmak

Eşit aralıklı yazılar; programlama kod satırlarını verirken, örnek metin verirken ve ASCII sanatı (matin karakterleri kullanarak yapılan şekiller) için kullanılır.

<tt></tt>
<kbd></kbd>
<code></code>
<samp></samp>

çift tarafları tagları ile kullanılabilir. En yayın olanı ise <tt> tagıdır.

Önceden biçimlendirilmiş (preformatting) metin kullanmak

Önceden biçimlendirilmiş metinler, uzun, çok fazla satır ve paragraf sonu içeren metin alıntıları için kullanılır.

<pre></pre> çift taraflı tagı arasına konulan metinler, herhangi bir html kodu gerektirmeksizin, metin editörünün düzenleme bölümünde göründüğü gibi görüntülenir.

E-Posta bağlantısına konu satırı eklemek

HTML’deki e-posta bağlantılarına konu satırı eklemek için eposta adresinden sonra ?subject=konu yazılır. Böylelikle size eposta gödnerecek olan ziyaretçiniz, ilgili bağlantıya tıkladığında varsayılan eposta istemcisi açılacak ve konu kısmına sizin belirlediğiniz yazı çoktan yazılmış olacak.

Kod:

<a href=”mailto:eposta@bilim.org?subject=Kullanıcı Görüşleri”>E-Posta</a>

İç İçe Liste kullanmak

İç içe liste kullanmak için, <li></li> öğeleri arasına yeni bir liste öğesi tanımlanır.

Kod:

<ol>
<li>Astronomi</li>
<li>Bilim Genel</li>
<ol>
<li value=”4″>Kavramlar</li>
<li>Teknoloji</li>
<li>Parapsikoloji<li>
</ol></li>
<li>Bilimkurgu</li>
</ol>

Numaralı listeleri belli bir sayıdan başlatmak

Numaralı listeleri belli bir sayıdan balatmak için <ol> öğesi içerisinde start özniteliğini kullanırız.

Kod:

<ol start=”5″>

Liste içerisinde herhangi bir liste öğesinin sırasını değiştirmek için de <li> öğesi içerisinde value özniteliğini kullanırız.

Kod:

<li value=”4″>

Tanımlama listeleri oluşturmak

HTML’de tanımlama listeleri, sözlük benzeri bir sayfa oluşturulurken yararlı olur.

<dl> (Definition list) çift taraflı tagı ile başlayan tanımlama listesinde <dt> (definition term) ile tanım etiketi, <dd> (definition description) ile etiketin açıklaması kullanılır.

Kod:

<dl>
<dt>Termonükleer füzyon</dt>
<dd>Yüksek sıcaklık ve basınç altında, atom çekirdeklerinin birleşmesi.</dd>
</dl>

Bir tanım etiketi için birden fazla tanım açıklaması etiketi de kullanılabilir.

Kod:

<dl>
<dt>Termonükleer füzyon</dt>
<dd>Yüksek sıcaklık ve basınç altında, atom çekirdeklerinin birleşmesi.</dd>
<dd>Yıldızlara enerji veren çekirdek tepkimesi.</dd>
</dl>

 

HTML öğrenmek isteyenler için adresler:

W3C HTML Tutorials
HTML 4.01 Specification

 

XHTML (Extensible HyperText Markup Language)

XML için uygun hale getirilmiş ve zaman içerisinde HTML’in yerini alması düşünülen versiyondur. 26 Ocak 2000’den itibaren W3C tarafından tavsiye edilmektedir. XHTML’in son sürümü 2.0‘dır.

XHTML’in HTML’den farkları

XHTML’de imler küçük harfle yazılmalıdır
Örnek: <B></B> yerine <b></b>

XHTML’de sayfa elemanlarının hepsi kapanmış olmalıdır
Örnek: <br> gibi tek taglar <br /> olarak yazılır, çift tagların tümü kapatılır

XHTML’de sayfa elemanları düzgün olarak yuvalanmış olmalıdır
Örnek: <b><i></b></i> yanlış, <b><i></i></b> doğru

XHTML’de sayfa elemanları düzgün biçimli (well-formed) olmalıdır
Örnek: Sayfalar tüm elemanları ile düzgün yuvalanmış ve döküman tanımı eklenmiş olmalıdır.

Bir sayfanın XHTML sayfası olduğunu belirtmek için, kodunuza DocType (Belge tanımı) kodunu eklemelisiniz. Aşağıda, farklı XHTML sürümleri için DTD (Document Type Definition) tanımları yer almaktadır.

Kod:

XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

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

XHTML 1.0 Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

XHTML Basic 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">

 

Sayfalarınızın XHTML uyumluluğunu W3C Markup Validation Service (W3C İşaretleme Onayı Hizmeti) sayfasından kontrol edebilirsiniz.

 

DHTML (Dinamik HTML)

HTML, CSS ve JavaScript’in birlikte kullanılarak, sayfaların dinamik hale getirilmesini sağlayan bir soyut kavramın adıdır. DHTML’in avantajı, onu içeren ağ teknolojilerinin standart olarak destekleniyor olmasıdır.

Sadece DHTML kullanarak bir siteyi nasıl dinamik hale getirebileceğinize dair en iyi örneklerden birisi, ozones.com sitesidir.

DHTML kaynakları:

http://www.brainjar.com
http://www.dynamicdrive.com

 

CSS

HTML işaretleme dili ilk yapıldığında amacı, sayfalar ve bağlantılar arasında gezinmekti. Görsel açıdan büyük bir esneklik düşünülmediği için yapılan HTML, sayfa hakimiyetinde görsel zenginliğin kontrolünde zayıf kalmaya başladı. CSS, Türkçesi ile Stil Şablonları da bu amaçla, bu açığı kapatmak üzere geliştirildi ve W3C tarafından bir web standardı olarak kabul edildi. CSS’in son sürümü CSS 3.0‘dır.

CSS kodları 3 farklı şekilde kullanılır:

  • Sayfa içerisindeki taglar (takılar) içinde
  • Sayfa içerisinde <head></head> içerisinde
  • <head></head> içerisidnen css dosyasına bağlantı vererek

Ayrı olarak oluşturulmuş css dosyasının uzantısı da css’dir.

Örnek CSS kodu:

/* Bilim.org */

body
{
background-color:#FFFFFF;
margin-top: 0px;
margin-left: 0px;
margin-right: 0 px;
margin-bottom: 0px;
}   

CSS öğrenmek isteyenler için adresler:

CSS Başlangıç kitabı (Fatih Hayrioğlu)
W3C Schools CSS Tutorials

 

JavaScript

JavaScript, ağ tarayıcılarını dinamik hale getirmek ve kullanıcı ile iletişim kurmak için geliştirilmiş bir scripting dilidir. Javascript, Brendan Eich tarafından ilk olarak LiveScript adıyla, Netscape Navigator tarayıcısı için geliştirilmişti. 1996’da Netscape Navigator 2.0 ile sunuldu ve şu an artık her tarayıcı tarafından destekleniyor.

JavaScript’in son sürümü 2010 yılında sunulan 1.8.5 sürümüdür. JavaScript, adında geçen Java dilinin bir hafif verisyonu değildir. İki dilin birbiri ile alakası yoktur.

JavaScript ile sitelerinizi daha dinamik ve işlevsel hale getirebilirsiniz. Zaten JavaScript’in HTML ve CSS ile birlikte kullanımıyla doğan DHTML kavramı, internet sitelerini durağanlıktan çıkararak, dinamik hale gelmesini sağlamıştır.

Basit olanlardan, çok karmaşık ve işlevsel olanlarına kadar bir çok JavaScript kodu yazabilmek mümkündür. Ancak karmaşık JavaScript kodları yazabilmek kolay değildir. İnternette bir çok hazır JavaScript kodunu sunan site mevcuttur. Bu kaynaklardan temin edebileceğiniz kodları alarak sitenizde kullanmanız da mümkün. Bunu yapmak da programcılık bilgisi gerektirmez. Ancak kodları özelleştirmek isterseniz, bu dili öğrenmeniz gerekir.

JavaScript kod örneği:

<html>
<body>
<script type="text/javascript">

document.write(“Merhaba Bilim.org üyesi!”);

</script>
</body>
</html>

JavaScript öğrenebileceğiniz kaynak:

http://www.w3schools.com/js/default.asp
JavaScript Style özellikleri

JavaScript kod kaynakları:

http://www.javascriptindir.com
http://www.javascriptsource.com/

 

Javascript’in sunduğu özelliklerden faydalanmanın en pratik yollarından biri de javascript framework kullanmaktır. Javascript framework’ler, bir js dosyanın sunduğu özellikleri sayfa içerisinde çok yalın bir referans kodlama ile kullanabilmenize olanak veren bir yapıdır. Yani siteniz için bir tane js framework yüklediğinizde, onunla beraber gelen özellikleri uzun uzun kod yazmadan kolaylıkla kullanabiliyorsunuz.

Beraberinde gelen bir çok özellik sayesinde her işlev için farklı bir javascript kullanmak yerine tek bir javascript dosyası ile tüm javascript işlerinizi halledebilmeniz mümkün olabilir. Hangi framework’ün hangi işlevleri desteklerini bu listeden görebilirsiniz.

Javascript framework’lerin en ünlüsü JSQuery‘dir. Aşağıda bazı javascript framework’lerin listesini verdim. Sizin de kullandığınız ve tavsiye edebileceğiniz js framework’ler varsa yorum olarak ekleyebilirsiniz.

JSQuery
MooJoo
Prototype

Dojo Toolkit

3 Comments

Yorum yap

+ Leave a Comment