HTML 4.01 Standardı:

Gerçek anlamda 3 tane HTML 4.01 versiyonu vardır. Bunlar;

· Strict

· Transitional

· Frameset

olarak adlandırılır. Bu versiyonların her biri kendilerine ait bir "Döküman Tipi Tanımı" (DTD: Document Type Definition) ile temsil edilir. Bunlar;

Strict HTML 4.01 (Değişmez, katı): Bu versiyon saf HTML 4.01'i ifade eder. Bu döküman tipinde atılmış (obsolete) ve değerini kaybetmiş (deprecated) etiketleri asla kullanılmaz.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<HTML>…
ile başlamalı.

Transitional HTML 4.01 (Geçişli): Önceki versiyonlar olan HTML 3.2 ve HTML 4.0 'ın çeşitli yönlerini alarak şimdi ki strict versiyon yapısıyla kombine eden standarttır.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">

<HTML>…

ile başlamalı.

Frameset HTML 4.01 (Frame Tabanlı): Geçişli versiyondaki tüm bilgiler ile FRAME, FRAMESET, NOFRAMES ve IFRAME gibi frame tabanlı öğelerin tümünü kapsayan versiyondur. Çerçeve içeren sayfa yapıyorsanız bu döküman tipi tanımını yapmalısınız.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/frameset.dtd">
<HTML>…

ile başlamalı.

Bu döküman tipi belirtimlerinin sayfanın görünümü açısından direkt etkili olmadığını sadece dökümanın geçerlilik kazanmasına yaradığını ifade edelim. Her 3 versiyon bilgisinin bir web sayfası kodunda nasıl yer alacağına dair bilgi aşağıda yer alıyor;

DEPRECATED Tanımlaması: (değerini yitirmiş) Yukarıda listelenen etiketler içerisinde "Deprecated" olarak belirtilmiş etiketler değerini yitirmiş (modası geçmiş) etiketlerdir. Artık bunları kullanmasak da olur, çünkü aynı işlevi elde edebilmek için daha yeni alternatifler ortaya konmuştur. Bir etiketin DEPRECATED olarak tanımlanmasının anlamı budur.

W3C Konsorsiyumu bu etiketleri kullanmaktan kaçınmamızı önermektedir. Ancak bunları kullanmanın öyle büyük bir sakıncası da yoktur. Çünkü tarayıcılar bu etiketleri hala yorumlayabilirler.

HTML 4.01 sürümünde değerini kaybetmiş etiketler şunlar; APPLET, BASEFONT, CENTER, DIR, FONT, ISINDEX, MENU, S, STRIKE, U

OBSOLETE Tanımlaması: (kullanım dışı) Bir de "Obsolete" olarak tanımlanan etiketler vardır. Bu etiketler artık kullanımda değildir ve yeni HTML standartlarından çıkarılmışlardır. Hemen aklımıza gelen "Obsolete" olarak belirlenmiş şunlar; EMBED, LISTING, PLAINTEXT, XMP, BLINK MARQUEE, BGSOUND, MULTICOL .

Örnek Şablon:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Web Sayfası Başlığı</title>

body { background: white; color: black}

A:link { color: red }

A:visited { color: maroon }

A:active { color: blue }

A:hover { color: black }

</style>

</head>

<body>

</body>

</html>

Şablonun mutlaka böyle olması zorunluluğu yoktur. Herkesin kendi ihtiyaçlarına göre bir şablon HTML dökümanı hazırlaması büyük kolaylıklar sağlayacaktır.

Referans: http://www.w3.org/TR/html4/sgml/framesetdtd.html

Web Sitesi Tasarlarken vb Geliştirirken Nelere Dikkat Edilmeli?

Giriş:

Bize göre Web'in sihiri, çok farklı türden bilgilere aynı platformda vb bütünleşik bir şekilde sunmasıdır. HTML sayfaları, grafik, animasyon, film, müzik.( arkaplan=background müzikleri, önplan=foreground müzikleri) gibi tipleri içerir. Bunun dışında, standart olmayan veri yapılarının da web üzerindeki diğer bilgilerle entegrasyonuna "plug-in" denilen yardımcı programlar vasıtasıyla izin verirler. (Örneğin: .doc, .xls, .pdf ve macromedia flash plug-inleri vb…)

Sayfa içeriği belirlenmesi ve dikkat edilmesi gereken hususlar:

Web sayfasında hangi bilgilerin yer alacağını saptamak ilk adım olmalıdır.Sayfanızı hazırlamadaki amacınız ne? Sorusuna net cevaplar verilmelidir. Amacımız kendinizi mi, bir ürünü mü, bir organizasyonu mu (kurum, kuruluş, özel teşebbüs vb) tanıtmak?

Daha sonra, bir süre web'de gezinmek çok yaralı olacaktır. Tasarlamaya çalıştığımıza benzer içerikli sayfaları internet arama motorları (search engine; Altavista, Yahoo, Google, Lycos, Netbul vb) yardımı ile bulunması iyi fikir olacaktır. Bu benzer sayfalarda hoşunuza giden, gitmeyen, eksiğini gördüğünüz, olmasının yararlı olacağını düşündüğünüz özelliklerin bir listesini çıkarabilirsiniz. Buradan, iyi ya da kötü tasarımın ne olduğu konusunda kafanızda fikirler oluşacaktır.

Öte yandan, normal bir internet kullanıcısının profesyonel bir grafik ya da web sayfası tasarımsıcı olması beklenemez. Bu yüzden, hazırlanacak olan ilk sayfalarımız basit ve sade görünümlü olabilir.

Her zaman, web sayfasının içerdiği bilgilerin önemli olduğunu ve sayfa düzeninin de bu bilgilere kolayca erişimi sağlayacak şekilde olmasının getireceği kolaylıklar ve avantajları akılda bulundurun.

Eğer web sayfalarınızda birden çok veya bir konuyu işleyeceksek, buna göre ilgili dosyaların düzenli bir dizin yapısına sokmak iyi bir fikir olacaktır. Her farklı içerikli sayfanın farklı bir dizinde saklanması sayfa organizasyonunu kolaylaştırır.

Belirli bir konuda hazırlanmış iyi web sayfaları, öncelikle, buraya bağlanan insanların mümkün olduğunca zahmetsiz ve kısa yoldan isteklerine ulaşmalarını sağlamalıdır. Ayrıca, konunun dışına taşmadan, verilmek istenen anlatılmalıdır. İnsanların, ekranlar dolusu uzunlukta yazılardan oluşan bir siteyi okumaktan sıkılacaklarını düşünerek içerik hazırlamalıyız.

Web sayfasında ne kadar grafik/resim/ses vb olacağı, bu dosyaların büyüklüklerinin günümüz altyapısı ile olan uyumu da çok önemlidir. Web kullanıcıları, bağlandığı bir web sayfasında 100lerce kilobyte tutan bir resim ya da animasyon dosyasının yüklenmesini beklemek istemez. Web sayfalarında resim ve animasyon kullanımı sayfanın çekiciliğini arttırsa da, bazı İnternet kullanıcıların bağlantı kapasitelerinin hala çok düşük düzeylerde olduğu unutulmamalıdır.

Backup politikasının belirlenmesi sitenin devamlılığı açısından çok önem kazanmıştır. (Günlük, aylık, real-time backup)

Bütün tarayıcılarla uyumlu olup olmadığı test edilmeli. (Netscape, MS Internet Explorer, Opera vb) İnternet kullanıcıların değişik tipte tarayıcıları kullandıkları göz önüne alınmalıdır. Yani, mümkün olduğu kadar fazla tarayıcı için uyumlu olan etiketler ve teknolojiler kullanılmalıdır.

Diğer önemli hususlar:

Mutlaka ana web sayfanızın sonuna kendinize veya webmaster’a ait e-mail adresine bir bağlantı eklenmelidir. Böylece insanların size ulaşmalarını ve sayfa hakkındaki muhtemel görüşlerini size iletebilmelerini kolaylaştırılmış olacaktır. Örneğin,

<a href="mailto:csevgi@ii.metu.edu.tr"> Dilek ve İstekleriniz İçin ! </a>

şeklindeki bir satır oldukça işe yarar.

Hazırladığınız sayfalara, mümkünse birkaç farklı web tarayıcısı ile (netscape,Microsoft Internet Explorer, Mosaic, Opera vb) bakılmalıdır. Tarayıcı penceresini küçülterek (window resize) sayfanızın nasıl göründüğünü kontrol edilmelidir. Tabloların kayıp kaymadığı, paragraflar düzeni gözden geçirilmelidir.

Mutlaka tüm bağlantılar (linkler) kontrol edilmelidir. Tüm bağlantıları "bağıl" (relative) yapmak genelde iyi olacaktır.
Bilir kişilerle görüş alışverişinde bulunmak faydalı olacaktır.
Sayfalarınıza, grafik, renk vb özellikleri kısıtlı bilgisayarlardan da erişilebileceğini düşünerek biraz dikkatli olmakta fayda var. Sayfanıza herhangi bir istemci ile (sözgelimi, metin tabanlı lynx ile) erişen birisinin sayfayı (resimleri/renkleri göremese bile) takip edebilmesi lazım.
Eğer <img> belirteci kullanıyorsanız, mutlaka "alt", "width", ve "height" seçeneklerini de ekleyin. "alt" seçeneği, bu resmi gösteremeyen istemciler için alternatif bir yazıyı ekrana getirir. "width" ve "height" ise, resmin piksel cinsinden genişlik ve uzunluğunu verir. Bu bilgileri vermezseniz, resim yüklenmesi bitmeden sayfanın kalan yazı kısımları görüntülenmez. Eğer verirseniz, resim yükleniyorken, sayfanızın ziyaretçisi aynı anda ziyaretçi yazıları da görebilir.
HTML kodunu anlaşılır ve kolayca takip edilebilir şekilde yapılması iyi olacaktır. Sonuçta, siteyi geliştiren ya da bir başkası aynı satırları tekrar elden geçirmek zorunda kalabilir. Açıklamalar (Comment , ) eklemek faydalı olabilir.
Web siteniz tutarlı bir görünüm sergilemelidir (aynı yazıtipi, renk ve boyutu ve benzer şekilde yerleştirilmiş resim ve grafikler)
Web sitenizin devamlı ziyaretçisi olabileceğini düşünerek güncel ve çekici tutulmalıdır. (içerik ve teknoloji açısından)
Sayfalar gereksiz özelliklerle boğulmamalıdır. (gereksiz resim, ses dosyaları ve yersiz formlar)
Gezinme kolaylığı sağlanmalıdır. (back, forward, home vb)
Web sitesinin sürekli test edilmelidir.

Web sitelerinin duyurulması için birkaç ipucu:

Listeler ve tartışma grupları sayfanızın varlığından söz eden mesajlar atabiliriniz.

Gönderdiğiniz her e-posta'nın sonuna isminizden sonra web sayfanızın adresini (Signature) yazabilirsiniz. Bu yolla daha çok insanın bilgisi olacaktır.

AltaVista, LyCos gibi popüler arama motorlarına sayfanızı kaydettirebilirsiniz.

Ayrıca, içerikle ilgili anahtar kelimeleri aşağıdaki kodla birlikte web sayfanızın başına koyarak arama motorlarının sitenizi daha kolay bulmasına yardımcı olabilirsiniz. (Meta etiketindeki keywords’leri kullanmak suretiyle)

Örnek:

<meta name="keywords" CONTENT="kelime1, kelime2, kelime3">

<html>

<head>

<title>Web Sayfası Başlığı</title>

<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1254">

<meta name="description" CONTENT="Cüneyt Sevgi Official Home Page">

<meta name="keywords" CONTENT="Cüneyt Sevgi, , METU, Informatics Institute">

<meta name="author" CONTENT="Cüneyt">

<meta name="language" CONTENT="tr">

<meta name="reply-to" CONTENT="csevgi@ii.metu.edu.tr">

<meta name="robots" CONTENT="INDEX,FOLLOW">

<style type="text/css">

body { background: white; color: black}

A:link { color: red }

A:visited { color: maroon }

A: active { color: blue }

A:hover { color: black }

</style>

</head>

<body>

Meta Etiketleri

Meta etiketleri, HTML sayfalarının başında yer alan elementlerdir. Meta etiketlerinin görevi web sayfası hakkındaki bilgileri tutmaktır.

charset=windows-1254">

Sayfada Türkçe font kullanılmış ise, bunu ziyaretçinin web tarayıcısı Türkçe olarak gösteren etiketlerdir.

charset=ISO-8859-9">

charset=windows-1254">

Bu etiket kullanılmaz ise, kullandığımız Türkçe harfler ziyaretçimizin bilgisayarında düzgün görünmeyebilir ve ne yazdığımızı anlamayabilir.

Web sayfalarının tanıtımı için de meta etiketlerinden yararlanılabilir. Buda ya arama motorlarına ve bazı listelere üye olmak ile ya da sayfanız ile aynı amacı paylaşan sayfalara link vermek ile mümkün olabilir. Bunun bir yolu daha var. Sayfamızdaki meta etiketi ile bazı arama motorlarında görüntülenmesini sağlayabiliriz.

Örnek:

Sayfamızın arama motorlarında görüntülenmesini meta etiketleri sayesinde sağlayabiliriz. Ama bir de sayfamızın içeriği hakkında daha geniş bilgi vermeliyiz. Bu sayede ziyaretçi hiç tereddüt etmeden aradığının bizim sayfamızda olduğunu anlayacak ve ziyaret edecektir.

Sayfanın yapımcısının adının bulunması, sayfanın bu parametreye göre çalışan arama motorlarının sayfamızı daha rahat bulabilmesi için iyi olacaktır.

Bunun için:

Bazı arama motorları arama yapalara sonucu gösterirken site yapımcısının adını "author" ifadesini okumak sureti ile yapar. Bu bir nevi sizin imzanız da sayılabilir.

Örnek:

Bu meta etiketi sayfanın 4 Nisan 2001'de GMT saatiyle 23:59:59'dda tüm arama motorlarından ve Browser'ların geçici internet dosyaları klasöründen silinmesini sağlar.

Örnek:

Bu meta etiketi ise, sayfanın 10 saniye sonunda belirtilen adrese yönlendirilmesini sağlar.

Her arama motorunun indeksleme yöntemi farklıdır. Bazen istediğimiz sonucu elde edemeyebiliriz. Birçok arama motoru da bir süre geçtikten sonra sayfamızı kaydedebilir

HTML'nin YETERSİZ YÖNLERİ

HTML işin en başında bir tasarım dili olarak planlanmamıştı. Amaç dökümanları düz ve basit bir şekilde biçimlendirmekti. Ancak web yayıncılığı bugün öyle bir noktaya geldi ki; HTML ne kadar geliştirilirse geliştirilsin bazı konularda web tasarımcıların isteklerine tek başına cevap veremiyor. Günümüze dek HTML'nin yetersiz yönlerini azaltabilmek amacıyla bir çok yöntem geliştirildi. Script kullanımı, Stiller, gelişkin tablolama ve frame özellikleri, CSS, DHTML gibi... Ama bu yöntemler de kendi içinde birtakım problemlere sahipler. Bulunan çözümler ya ticari markalara bağımlı, ya plug-in'ler gibi ek uygulamaların kurulumuna ihtiyaç duyuyorlar ya da bütün web tarayıcılar tarafından desteklenmiyorlar. İşte buna benzer yetersizlikeri ile HTML, tek başına ihtiyaçlarımızı tam olarak karşılamıyor.

Dinamik İçerik Sorunu:

Bir web sayfasının "dinamik" olarak nitelenebilmesi için görünüşün (renk, font özellikleri, imaj özellikleri vb...) veya sayfada sergilenen verilerin sayfa yeniden yüklenmeden yenilenebilir ya da değişebilir olması gerekir. HTML bu işi tek başına çözemiyor. Web sayfalarına dinamik özellik katmak için Java, DHTML gibi ek teknolojilerin devreye girmesi gerekiyor.

Genişletilebilirlik Sorunu:

HTML genişletilebilir bir dil değildir. Sayfa geliştiricileri kendi içeriklerini daha iyi ilişkilendirebilmek için kendi etiketlerini HTML ile yaratamazlar. Bu nedenle W3C Konsorsiyumu "XML" gibi yeni teknoloji standartları ortaya koymak zorunda kaldı.

Tekrar Kullanım Sorunu:

HTML bir web sayfasındaki bilgiyi tekrar kullanmak için kullanışlı metotlardan yoksundur. Herhangi bir veri kümesinin değişmesi halinde oturup bunu tek tek ilgili web sayfalarında elle değiştirmek zorunda kalabiliriz.

Nesne Yönelimi Yoksunluğu:

İyi bir sayfa geliştiricisi "nesne yönelimi" gücünü sonuna kadar kullanmak ister. HTML şu andaki yapısıyla bir "nesne modeli" (object-oriented) desteklemez.

Güvenli Veri Akışı Problemleri:

Web dökümanları arasındaki otomatik ve güvenli veri alışverişinde HTML tek başına hiçbir işe yaramaz. Halbuki bugünün web sayfalarının çoğu birbirleriyle sürekli ilişki içinde olmak ve birbirlerine sürekli veri aktarmak zorundadır. (ASP, PHP gibi)

Uluslararası Olma Özelliği:

HTML'nin özel ya da uluslararası karakterler konusunda tutarlı bir çözümü yoktur. Örneğin Türkçe oluşturulmuş bir web dökümanı ilave desteklerle sağlamlaştırılmazsa ülke ya da platform değişikliklerinde bozulup, okunamaz hale gelebilmektedir. Bu sorun matematiksel formüller kullanılmak istendiğinde de ortaya çıkar.