HTML (Hyper Text Markup Language) internet üzerinde web sayfası oluşturmak için kullanılan bir betik dilidir/HTML, web sayfası tasarım dilidir.

HTML web sayfalarının 'abc'sidir
İnternet ortamında yayınlanan sayfalar HTML adı verilen özel bir formatlama dili kullanılarak hazırlanır. Daha önceki yazılarımızda da anlattığımız gibi HTML, ya da Hipermetin Anlamlandırma Dili (Hypertext Markup Language), sayfalara yazacağınız yazı rekleri, büyüklükleri, paragraf biçimleri gibi bilgilerin formatlarını ve sayfalar arasındaki geçiş bağlantılarını verebileceğiniz birçok komutu içerir. Basit HTML kodlarını kullanarak sayfalarınızda gerçekleştirebileceğiniz uygulamaların bazıları şunlardır; Örneğin kullanacağınız yazıların karakterlerini, koyu ya da italik gibi seçenekleri, büyüklüklerini ve renklerini seçebilirsiniz. Sayfalarınızda tablolar ve listeler oluşturabilir, değişik resimler, ses ve geçen hafta bahsettiğimiz animasyon uygulamalarını kullanabilirsiniz. Ayrıca eğer isterseniz sayfalarınızı birtakım yardımcı yazılımlarla da destekleyebilirsiniz.
Bir sayfa tasarlarken ilk önce tasarlayacağınız sayfada bulunmasını istediğiniz içeriğe karar vermelisiniz. Çünkü bir sayfa içeriğe göre tasarlanmaya başlanır ve eğer içerik oluşmadan sayfa tasarlamaya başlarsanız sonradan çok pişman olabilirsiniz. İçeriğe göre tasarım yapmanın yanısıra, elinizde tüm veriler oluştuktan sonra bile bir süre İnternet'te dolaşmanızı öneririz. Çünkü böylece yapacağınız sayfanın yapısı konusundaki bilgiler kafanızda daha net bir şekilde belirginleşecektir. Ayrıca gördüğünüz sayfalar karşısında şaşırıp yılgınlığa düşmemelisiniz. Çünkü basit olanlarının yanısıra bu sayfaların birçoğu da profesyonel tasarım ekipleri tarafından hazırlanmış ve içlerinde birçok değişik programlar da kullanılmıştır. Siz en iyi tasarımın olabildiğince basit ve kullanıcıya olabildiğince kolay ve çok bilgi veren tasarım olduğunu düşünün ve bu konuda umutsuzluğa düşmeyin.
Başarı ayrıntılarda gizlidir
Bu haftaki yazımızda da HTML kullanarak İnternet ortamında hazırlayıp yayınlayacağımız sayfaların inşası sırasında karşılaşacağınız problemler ve pratik önerileri yazmaya devam edeceğiz.
Bir İnternet sayfası hazırlarken İnternet'e bağlı kullanıcıların bu sayfaya olabildiğince kolay ulaşıp bu sayfayı ziyaret ettikleri sürece problemlerle karşılaşmamaları için öncelikle dikkat etmeniz gereken bazı temel kurallar bulunmaktadır.
Birinde değil, hepsinde tara
İlk dikkat etmeniz gerekenlerden birisi hazırlayacağınız sayfaların tüm tarayıcılar tarafından algılanıp okunabilmesi ve sayfalar arasında tarayıcıdan tarayıcıya farklılıkların bulunmamasıdır. Bu gerçekten önemlidir ve baştan dikkat etmezseniz sayfanız birçok kullanıcının tarayıcısı tarafından okunmayacaktır. Çok güzel, içerik yönünden çok zengin bir sayfa hazırlamış olabilirsiniz ama, maalesef emeklerinizin çoğu bu tur durumlarda boşa gidebilir. Şöyle düşünebilirsiniz: Bir arkadaşınızdan çok güzel ve zengin, içerik olarak da tam size hitap edecek bir sitenin adresini aldınız. Fakat arkadaşınızın kullandığı tarayıcıda görüntülenebilen bu site maalesef sizin tarayıcınızda görüntülenemiyor. Dolayısıyla belki bir kaç denemeden sonra bir daha bu siteye ulaşmaya çabalamayacaksınızdır. Sonuç olarak bu site hitap ettiği kullanıcılardan birisini kaybetmiş demektir. Siz de bu can sıkıcı durumla karşılaşmamak için sayfalarınızı hazırlarken en azından en popüler internet tarayıcılarında ayrı ayrı sayfalarınızı kontrol etmeli ve sayfalar arasında gördüğünüz hataları ya da farklılıkları gidermelisiniz.
Eğer birçok tarayıcıda kontrol etme şansınız yoksa ve sayfalarınızın uyumlu olduğunu bildiğiniz belli tarayıcılar var ise bunları sayfalarınızda belirtmeye özen göstermelisiniz. Bu sizin kullanıcılara ne derece kolaylıklar sağladığınızın bir göstergesi olacaktır.
Modası geçti demeyin
Dikkat etmeniz gereken bir başka konu ise HTML sayfaları oluştururken en yaygınlaşmış ve çoğu eski versiyon tarayıcılar tarafından da algılanabilen 'tag' leri kullanmanızdır. Hiper Metin Anlamlandırma Dili adını verdiğimiz HTML (Hiper Text Markup Language) birçok koddan oluşur ve bu kodlar zaman içerisinde zenginleştirilmektedir. Bunun iyi yanı olduğu gibi bir de kötü yanı vardır. HTML tag'larının zaman içinde zenginleşmelerine karşın bir çok kullanıcı tarayıcıların yeni versiyonlarını kullanmaktan kaçınırlar ya da bununla uğraşmazlar. Sonuç olarak eski versiyon tarayıcıların bir çoğu yeni oluşturulan HTML kodlarını algılamayacaklardır. Dediğimiz gibi sayfa hazırlarken dikkat etmeniz gereken kurallardan birisi de çok yeni HTML 'Tag'lari yerine daha eski fakat yaygınlaşmış ve birçok tarayıcı tarafından algılanabilen 'Tag' leri tercih etmenizdir.
Sayfa boyutuna aman dikkat
Sayfalarınızı tasarlerken kullanıcıların ekran çözünürlüklerini de hesaba katmalısınız. Her kullanıcı sizin sayfalarınızı tasarlarken kullandığınız çözünürlüğü kullanmaz ve sayfalarınız birçok kullanıcının ekranında düzgün bir şekilde gözükmez. Ekranında sayfanın enlemesine yanlızca yarısını gören bir kullanıcı doğal olarak bundan rahatsızlık duyacak ve sayfanın kalan kısmını görebilmek için 'scroll bar'a ihtiyaç duyacaktır. Bunun için sayfalarınızı tasarlerken 800x600 piksellik çözünürlüğü baz almalısınız. Bu durumda yüksek çözünürlüğe sahip ekran kullanan kullanıcılar bile sayfanın tamamını ekranlarında görüntüleyebileceklerdir.
HTML sırları
Geçen haftaki yazımızda HTML ile İnternet sayfaları hazırlarken dikkat etmeniz gereken püf noktalarını anlatmaya başlamıştık. Bu hafta da sizler için pratik öneriler getirmeyi sürdüreceğiz. Bahsettiğimiz tüm bu öneriler ile temel bir HTML bilgisine sahip olan ya da çok az HTML bilgisi olmasına rağmen birtakım görsel HTML Editörleri kullanabilen herkesin, sayfalarını İnternet'de yayınladıkları zaman karşılaştıkları birçok problemin önüne geçebilmeyi amaçlamaktayız.
En basit önerilerden birisi sayfaları oluştururken seçeceğiniz yazı ve zemin renkleri arasındaki uyum ve kontrastdır. Burada bahsettiğimiz uyum aynı renklerin yakın tonlarını kullanmak olarak algılanmamalıdır. Çünkü bu durumda sayfanız baştan kötü bir yola girecektir. Örneğin beyaz bir zemin üzerinde açık sarı ya da buz mavisi renginde yazı kullandığınızı düşünün. Kullanıcı sizin sayfalarınızı okuyabilmek için ekrana olabildiğince yaklaşmak zorunda kalacak ve kısa bir süre sonra da sabrının sonuna gelerek sayfalarınızı terk edecektir. Böyle açık bir zemin üzerinde renklerin koyu tonlarını kullanmak zorundasınız. Eğer tam tersine çok koyu bir zemin, örneğin siyah üzerinde çalışıyor-sanız, bu takdirde çok açık renk tonlarında yazılar seçmelisiniz. Bu arada sayfanızda kullandığınız animasyon ve resimlerin renklerini de gözönüne almalısınız. Büyük boyutlarda yazacağı-nız bir başlığın rengi ile çevresindeki resim ya da grafiklerin renklerinin uyum içinde olması gerekir. Ayrıca renk seçimi sırasında sayfanızda kullanacağınız linkleri de düşünmelisiniz. Aktif hale gelen ya da ziyaret edilen linklerin renklerini farklı yapacaksanız eğer, yine bu renk uyumlarına dikkat etmelisiniz.
Başarı ayrıntılarda gizlidir
Sayfalarınızda olabildiğince az sayıda animasyon ve Java Applet kullanmanızı tavsiye ederiz. Çok fazla renk ve birbirleri ile bağdaşmayan animasyonlar içeren bir sayfa kullanıcıya sizin acemi olduğunuzu düşündürecektir. Bu tür animasyon ya da Java Applet uygulamaları, kararında ve yerinde kullanıldığında sayfaya ayrı bir lezzet katar. Fakat burada ince bir çizgi bulunur ve eğer siz bu çizgiyi aşıp 'ne kadar çok bu türden uygulama kullanırsam o kadar zengin bir sayfa oluştururum' gibi bir düşünceye kapılırsanız, hatalı bir yolda yürüyorsunuz demektir. Çok fazla hareketli ve rengarenk sayfalar belli bazı konular için tercih edilebilir. Örneğin küçük çocuklar için bir İnternet Sitesi hazırlıyorsanız onların ilgilerini çekecek ölçüde bu uygulamaları kullanabilirsiniz. Fakat daha ciddi bir içeriğe sahip sayfalarda aynı şeyi yapmaya kalktığınızda sayfalarınız ciddiyetten uzaklaşacaktır.
Daha önce söylediğimiz gibi sayfalarınızı değerli kılan diğer bir konu da görsel güzelliğin yanısıra içerik ve sayfalarınızın ağırlığıdır. Toplam ağırlığı ne kadar düşük sayfalar yaparsanız o kadar iyidir. İnternet'de yıllardır yayınlanan bir çok ünlü siteye göz atarsanız, bu sitelerin ana sayfalarında olabildiğince az sayıda imaj kullanıldığını, animasyonların ve hele Java Applet'lerin ise hiç kullanılmadığını görürüz. Animasyon ve Java Applet gibi uygulamalarla dolu bir sayfanın İnternet ortamında, hele de düşük hızlı modemler ile yüklenmesi oldukça zordur ve bu sayfaları herkes göremeyeceği için emekleriniz boşa gidebilir.
İNTERNET KAVRAMLARI
Piksel: Bir bilgisayar ekranında yaratılabilen en ufak noktacıktır. Piksel aynı zamanda resim elemanları için kullanılan bir kısaltmadır ve monitor üzerinde belirtilebilen tek bir bilgi noktasını ifade eder.
Tag: Html'de kullanılan ve İnternet sayfalarına biçim verebilmek için kullanılan etiketlere 'Tag' denilir. 'Tag'ler her zaman '<' ve '>' işaretleri arasında yazıldıkları için tarayıcılar tarafından algılanabilirler. HTML 'Tag'lerinin zaman içerisinde çeşitlilikleri arttırılmakta ve böylece İnternet sayfalarındaki uygulamalarda sayfaların zenginleştirilmeleri gerçekleşebilmektedir.
Grafiklerinizi sıkıştırın
Geçen haftalarda bahsettiğimiz gibi İnternet yayıncılığında en önemli olgulardan birisi sayfaların ağırlığıdır.
Sayfalarınız ne kadar az yer kaplarsa İnternet üzerindeki kullanılabilirliği o ölçüde artacaktır. Resimler ve animasyonlar gibi grafikleri olabildiğince az ve yerinde kullanmak gerektiğini daha önce yazmıştık. Ufak ve sade ya da başka bir deyişle az renk içeren grafikler kullanmak her zaman avantajlıdır. Kullandığınız grafikler belli formatlarda ve renk sayısında olacaktır. Örneğin siyah beyaz bir imaj çok renkli mesela 256 renk bir imaja göre çok daha az yer kaplayacaktır. Belki çok renkli, kocaman grafikler kullanmak birtakım İnternet kullanıcılarının hoşuna gidecektir. Ama size tavsiyemiz, sayfa hazırlarken sayfalarınızı gerçekten görmek isteyecek, fakat düşük hızlı bir modeme sahip olduğu için bunu başaramayacak insanları da düşünmelisiniz.
Ayrıca grafiklerinizin ağırlığını, bu tür grafik ve imajları İnternet ortamında kullanmak için hazırlanmış bulunan bazı sıkıştırma programlarını kullanarak düşürebilirsiniz. Bu sıkıştırma programlarını İnternet yayıncılığında kullanmak, sayfalar için çok büyük avantajlar sağlamaktadır. 'Advanced GIF Optimizer' yada 'Ulead Smart Saver' gibi programlar kolay kullanımları ile de bu alanda en çok tercih edilen programlar arasında yer almaktadır. Daha sonraki yazılarımızda bu programları daha ayrıntılı olarak tanıtacağız.
İşin kolayına kaçmayın
Size tavsiye edeceğimiz bir başka konuysa kendi ses, grafik ve resimlerinizi ve hatta kullanabiliyorsanız kendi yazdığınız applet'leri kullanmanız olacaktır. Çünkü ne kadar büyük bir özgürlükler ortamı olsa bile, tüm yayıncılık türleri gibi İnternet yayıncılığının da kendine ait bir etik ahlâk anlayışı bulunmaktadır. 'Copyright' sistemi İnternet yayıncılığında da bulunmakta, fakat bilhassa amatör siteler arasında takibi yapılamamaktadır. Sonuç olarak birçok insanın sayfa tasarlarken kullandığı kolay yöntem İnternet'te dolaşırken hoşlarına giden resim yada grafikleri toplamak ve sonra bu imajları kendi sayfalarında kullanmaktır. Bu yönteme başvurmak her şeyden önce profesyonel yada amatör uğraşlar içerisindeki bir takım insanların çabalarını, emeklerini hiçe saymak ve onlara saygısızlık etmek anlamına gelmektedir. Halbuki bu tür imajları kullanmak için mutlaka para ödemek zorunda değilsiniz. İnternet üzerinden bulabileceğiniz grafik çalışmaların bir kısmı zaten ücretsizdir. Bir kısmında ise isim belirtmeniz gerekir. 'Copyright'lı çalışmalar için ise kopyalamak yada çalma yoluna gitmemelisiniz.
Ayrıca sayfalarınızda kendi hazırladığınız grafikleri kullandığınızda kendi hazırladığınız sayfalar gözünüze daha hoş gözükecektir.
Uzun metinleri parçalayın
Eğer sayfalarınızda çok az sayıda resim, grafik yada animasyon kullanacaksanız ve ağırlıklı olarak içinde metin olan sayfalar hazırlayacaksanız, belki sayfalarınız kullanıcıların tarayıcıları tarafından daha kolaylıkla görüntülenecektir ama bu kez de dikkat etmeniz gereken başka bir konu ortaya çıkmaktadır. Tüm metinleri sonu gelmeyen bir sayfa halinde alt alta sıralamamanız gerekir. Sayfalara bu şekilde girilen metinler kullanıcıyı çabuk yorar yada dikkatini çabuk dağıtır. Bu durumda yapılması gereken metni gerektiği gibi parçalayarak ayrıntıları farklı farklı sayfalarda kullanıcıya sunmaktır. Bu hem okuyuculara kullanım kolaylığı sağlayacaktır hem de sayfanızda
Karakterinizi kendiniz belirleyin
İnternet yayıncılığının en önemli yanlarından birisi görselliktir. Fakat birçoklarının yanlış düşündüğü gibi bu görsellik yalnızca resim ve animasyonlardan oluşmamaktadır. Sayfalarınızda kullanacağınız fontlar ve yazı karakterleriyle de bir görsellik yaratabilirsiniz.
Maalesef yazılı basında kullanılan yüzlerce değişik yazı karakterini İnternet ortamında yaygın olarak kullanamamaktayız. Bunun sebebi de herkesin bilgisayarında bütün bu fontların bulunmamasıdır. Örneğin sizin hazırladığınız sayfalarda çok severek kullandığınız bir font eğer kullanıcının bilgisayarında bulunmuyorsa yazılar bilgisayardaki bir başka yazı karakteri ile görüntülenecektir. Örneğin sizin belirlediğiniz karakterler görüntülenemediği için tüm sayfalarınız uyumlarını kaybedecek ve belki de bozuk görüntülenecektir. Dikkat etmeniz gereken nokta, özel ve yaygınlaşmamış karakterler yerine İnternet ortamında daha sık kullanılan, yaygınlaşmış karakterleri tercih etmeniz olacaktır. Ayrıca belirtmeliyiz ki yazı karakterlerinin yanısıra yazılarda ve özellikle de başlıklarda kullanacağınız yazı büyüklüklerine de dikkat etmelisiniz. Bir süre İnternet yayıncılığı ile uğraştığınızda göreceksiniz ki, çok iri ve görselliği zedeleyen yazılar kullanmaktansa ana başlıklarda daha iri, ara başlıklarda ya da tablolarda daha ufak yazılar kullanmak her zaman olumlu sonuç vermektedir
Şimdi biraz da yazı karakterleri ve bu karakterleri nereden bulabileceğiniz konusuna gelelim. Her ne kadar fazla yaygınlaşmamış yazı karakterlerini kullanmaktan kaçınmalıysanız da zaman zaman bu tür karakterlere de ihtiyaç duyabilirsiniz. Bilhassa bazı grafik programlarında bu karakterleri kullanarak değişik ve etkileyici durumlar yaratabilirsiniz. Bu gibi durumlarda yazıları imaj yani resim olarak kaydedeceğiniz için kullanıcıların bilgisayarlarında bu yazı karakterleri bulunmasa bile bir problem olmayacak ve oluşturduğunuz imajlardaki karakterler aynen korunacaktır. İhtiyaç duyduğunuz yazı karakterlerine ulaşabileceğiniz en büyük kaynak yine İnternet'tir. İnternet üzerinde ücretsiz tasarım hizmeti veren siteler veya özellikle yazı karakterleri konusunda hizmet veren bazı siteler bu konudaki sıkıntımıza çare olur.
Yeni karakterlerimizi bilgisayarımıza tanıtalım
Biraz da İnternet ortamından alacağınız bu yazı karakterlerini bilgisayarınızda nasıl kullanmanız gerektiğinden bahsedelimÖ Beğendiğiniz yazı karakterini öncellikle bilgisayarınıza kaydetmeniz gerekiyor. Bu işlemi gerçekleştirdikten sonra bilgisayarınıza yüklediğiniz bu yazı karakterlerini bilgisayarınızdaki yazı karakterlerinin bulunduğu bölüme tanıtmalısınız. Bu işlemi yaparken öncelikle bilgisayarınızın 'Başlat-Ayarlar-Denetim Masası' (Start-Settings-Control Panel) bölümüne gitmelisiniz. Daha sonra yeni açılan pencerede 'Karakterler' (Fonts) ikonuna çift tıklayıp, bilgisayarınızda varolan yazı karakterlerinin listesini ya da ikonlarını göreceksiniz. Bu pencerenin üst tarafında yazan 'Dosya' (File) mönüsünden 'Yeni Karakter Ekle ' (Install A New Font) seçeneğini seçmeniz gerekli.
Bu aşamada çıkan pencerenin alt sol tarafında dosya ikonları göreceksiniz. Buradan bilgisayarınıza kaydettiğiniz dosyayı seçip, işaretleyip sonra da 'Hepsini Seç' (Select All) butonunu tıklamalısınız. Bu şekilde yeni fontları sol üst taraftaki boş kısımda göreceksiniz. Bu işlemden sonra 'Tamam' tuşuna basmak yeterli. Bütün bu işlemler bittiğinde artık yeni yazı karakterlerinizi başarıyla bilgisayarınıza tanıttınız demektir.
Kim korkar HTML'den
İnternet yayıncılığına yeni merak salanlar için, kişisel ya da amatör İnternet sayfaları tasarlarken dikkat etmeleri gerekenleri anlatmaya çalışıyoruz. Bu haftadan başlayarak da bu konuya yeni yeni merak salanlar için basit HTML (Hyper Text Markup Language) kodlarını göstermeye ve bu kodları kullanırken nelere dikkat edilmesi gerektiğini örneklerle anlatacağız.
HTML'ye başlangıç yapalım
Bütün HTML dokümanları "tag" ya da "im" adı verilen ve her biri ayrı bir komutu içeren elemanlardan oluşmuştur. HTML' de büyük harf ya da küçük harf ayrımı olmadığı için dokümanda kullanacağınız "tag" leri her iki halde de yazabilirsiniz. Her bir "tag" değişik komutlar içerebileceği gibi kendi alt elemanlarını da barındırabilir ve komut içeren "tag" ların büyük bir kısmı ise sonlandırma "tag"i ne sahiptir.
Örnek; <font face="arial" size="2" color="black"><i><b>Yeni Başlayanlar İçin</b></i></font>
Bir HTML dokümanında yukarıdaki gibi gözüken bir kısım, İnternet'de yayınlandığında kullanıcıların tarayıcıları tarafından
Yeni Başlayanlar İçin
şeklinde görüntülenecektir. Burada <font> "tag"i kendi içinde yazılacak yazının karakteri, büyüklüğü ve rengi gibi bilgileri bulundurabildiği gibi, sonlandırma "tag"inden (</font>) önce yazının italik olacağını gösteren <i> ve yazının kalın olacağını gösteren <b> "tag"i gibi ayrı "tag"leri de kapsayabilir. Yukarıdaki örnekte görüldüğü üzere "<font>" "<i>" "<b>" tag'larının birer de sonlandırma "tag" ları (</font>, </i>, </b>) yazılmıştır. Siz HTML dokümanını yaratırken hangi karakter ve büyüklükte yazı kullanırsanız kullanın, o doküman İnternet ortamında yayınlandığında tarayıcılar tarafından, sizin "taglar" yardımıyla verdiğiniz komutlara göre görüntülenecektir. Örneğin siz yazıyı yazarken 10 piksel büyüklük ve "Geneva" yazı karakteri kullandınız, fakat HTML kodları ile de bu dokümanın "arial" yazı karakterinde "kalın" ve "italik" olarak görüntülenmesi gerektiğini yazdınız. O halde bu yazı İnternet ortamında sizin istediğiniz gibi "arial, kalın ve italik" olarak görüntülenecektir.
Bütün HTML dokümanları <HTML> ile başlar ve </HTML> ile son bulur. <HTML> "tag"i hazırlanan sayfa hakkında bilgilerin yer aldığı <HEAD> ve esas sayfanın içerisinde inşa edildiği <BODY> ve bunların sonlandırma "tag"larını kapsar. Kabaca bir HTML dokümanının çatısı şu şekilde olur.
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
HTML Kodları
Yukarıdaki genel çatının üzerine inşa edilecek sayfanın yapımı ile ilgili bilgiler daha ayrıntılı olarak gelecek haftalarda vereceğiz. Şimdi en basit, fakat basit olduğu kadar da önemli ve sık kullanılan HTML kodlarından bazılarını tanıtmaya başlayalım.
<B>Metinde başlangıç ve sonlandırma "tag"leri arasına yazılan bu alan "kalın" olarak görüntülenir.</B>
<I>Metinde başlangıç ve sonlandırma "tag"leri arasına yazılan bu alan " italik" olarak görüntülenir.</I>
<U> Metinde başlangıç ve sonlandırma "tag"leri arasına yazılan bu alan "altıçizili" olarak görüntülenir.</U>
<BR> (Break) "tag"i metni herhangi bir yerden kesip bir alt satırdan devam etmesini sağlar. Arka arkaya koyduğunuz her bir <BR> "tag"i o sayıda satır atlatır.
Örneğin;
"Bu bir deneme<BR> yazısıdır" yazarsanız, bu tarayıcılar tarafından

"Bu bir deneme
yazısıdır"

şeklinde görüntülenecektir. Fakat eğer bir <BR> daha ekleyerek "Bu bir deneme<BR><BR> yazısıdır" yazacak olursanız, bu kez tarayıcılar bu metni

"Bu bir deneme

yazısıdır"

şeklinde görüntüleyeceklerdir.
Bütün HTML sayfaları <HTML> elemanı ile başlar ve </HTML> sonlandırma elemanı ile son bulur. Bu eleman ise iki ana kısma ayrılır. Birincisi <HEAD> elemanıdır ve bunun sonlandırma elemanı ise </HEAD> dır. Daha sonra <BODY> elemanı gelir ve bu da </BODY> ile son bulur. Yaratılan bir İnternet Sayfasındaki görüntülenecek tüm bilgiler bu kısımda yer alır. Dokümanda kullanılacak tüm HTML tagları bu iki ana elemanın kapsayacağı şekilde yazılır.
<HEAD> elemanının kapsayacağı şekilde yazılan kodlardan bazıları <TITLE> ve <META> dır. Bu kodların sonlandırmaları yoktur ve belirleyici özellikleri kodun içinde verilir. Fakat <TITLE> elemanı <HEAD> içinde yer aldığı halde sonlandırması </TITLE> vardır.
<B>Örnek: </B>
<head>
<title> Miço kursu</title>
<meta http-equiv='Content-Type' content='text/html; charset=ISO-8859-9'>
<meta name='Author' content='Star'>
<meta name='Keywords' content='bilgisayar, bilişim, gazete, haber, medya, star, news, newspaper, press, turkish, türkçe, turkce, ekonomi, magazin, spor, kültür, kultur, sanat, bilim, teknoloji, internet, yazar, köşe yazarları, kose yazarlari, derin haber'>
</head>
Bu örnekte ikinci satırda yazılan <TITLE> (daha önce söylediğimiz gibi HTML'de küçük harf-büyük harf ayrımı yoktur.) elemanı sayfanızın adını belirler ve sayfa bir tarayıcı tarafından görüntülendiğinde bu elemanların arasına yazdığınız kelime ya da kelimeler tarayıcıda sayfanın adı olarak gösterilirler. Yukarıdaki örnekte Miço Kursu tarayıcılar tarafından sayfanın ismi olarak algılanmaktadır.
Karakter setleri
Bir sonraki satırda dokümanın karakter seti belirtilir. Bir İnternet sayfası hazırlarken karakter seti tanımlamak çok önemlidir. Tarayıcılar sayfayı görüntülerken sizin kullandığınız karakter setini baz alarak tanımlama yapabilirler. Aksi takdirde sayfa tarayıcılar tarafından yanlış ya da bozuk olarak görüntülenecektir. En çok kullanılan karakter setleri ISO-8859-1 (Latin1) ve ISO 8859-9'dur (Türkçe). Karakter setlerinin ne işe yaradığı ve nasıl kullanıldıklarını ilerki haftalarda daha kapsamlı olarak inceleyeceğiz.
Dördüncü satırdaki<META NAME=Author content=Startek> ile dokümanı yapan kişi ya da kurum belirtilir.
Anahtar kelimeler
Beşinci satır İnternet üzerinde arama motorları yardımıyla arama yapan kişilerin sizin sayfalarınıza ulaşabilmeleri için girmeleri gereken anahtar kelimeleri belirtir. Bu alan önemlidir. Çünkü buraya yazacağınız kelimeler sayesinde, gerçekten sizin sayfalarınızda yer alan konulara ilgi duyan insanlar bu sayfalara ulaşabileceklerdir. Dökümanınızı tanımlayan anahtar kelimeleri yazarken dikkatli olmalı ve gerçekten sayfalarınızı tanımlayan kısa ama öz kelimeler girmelisiniz.
ÇALIŞMA MANTIĞI: HTML dilinde yazdiginiz kodları ücret karşılığı veya bedava hizmet veren servis sağlayıcınızın sunucusuna(server) yüklersiniz(upload); Bu sunucu sizin web sayfanızı internette yayınlar; Sitenize gelen ziyaretçilerin browserları bu kodları yorumlar ,böylece ziyaretçiler sayfayi görüntülemiş olur. Kendi yazdığınız kodları kendi browserınızla açarak da sayfanızın nasıl goründüğünü test edebilirsiniz.
HTML'nin sağladığı bazı önemli özellikler şunlardır :

• Web sayfalarındaki yazılara değişik formatlar verilebilir (koyu renk yazı, italik yazı, yazı ortalama, renk verme, değişik boyutlarda yazma gibi),
• Tablo, Liste, Adres Alanı, sabit genişlikli yazı alanı vb gibi özel biçimler oluşturulabilir,
• Web sayfalarında "frame" adı verilen, ve birbirleri ile ilişkilendirilebilen alt-kısımlar oluşturulabilir.
• Değişik tipteki menü yapıları ile kullanıcının etkileşimli bir şekilde seçebileceği veri giriş sistemleri kullanılabilir,
• Ses, grafik, animasyon gibi uygulamaların web sayfalarından çalıştırılabilmesi için gerekli ortamlar sağlanabilir,
• Java, JavaScript, VB Script gibi programlama dilleri ile web içeriklerinin etkileşimli kullanımı için gerekli ortamları sağlar,
• Sunucu tarafında çalışan CGI programları ile we içeriklerinin etkileşimli kullanımını sağlar (şifre uygulamaları, sayaç uygulamaları vb gibi).

HTML dilinde çoğu kod için "AÇTIĞINI KAPAT" kuralı geçerlidir. Örneğin bir HTML sayfası <html> koduyla başlatılır ve </html> koduyla bitirilir.

HTMLile Yapılamayacaklar:Metin Biçimlendirme(Renk,font,vs), listeler,bağlantılar(link) ,resim kullanımı,tablolar, Çerçeveler,Formlar

HTMLile Yapılamayacaklar: Etkileşimli,olaylara duyarlı sayfalar;formları işleyip degerlendiren programlar.

HTML kodlarını yazmak için özel bir düzenleyiciye ihtiyacınız yoktur. Bu iş için Windows altında NotePad yeterlidir. Tüm HTML dosyaları <html> etiketi ile başlayıp </html> etiketi ile son bulur. Bunun yanında <html> etiketi ile <HTML> etiketi arasında hiçbir fark yoktur. Ancak etiketleri küçük harflerle yazmaya alışmanızı öneririm. İleride XHTML kodları yazmak zorunda kalabilirsiniz ve XHTML dilinde etiketlerin küçük harflerle yazılması zorunludur. HTML dosyaları temel olarak iki bölümden oluşur. Bunlar HEAD (Başlık) ve BODY (Gövde) kısımlarıdır. Başlık kısmında ziyaretçiye görünmeyen, sayfa hakkında tanımlayıcı bilgiler bulunur. Gövde kısmı ise web sayfamızın ziyaretçiye görünen kısmını yani asıl kısmını oluşturur. HTML içinde kullanılan tüm etiketler “<” işareti ile başlar ve “>”ile biter.

* HTML kodunu başkalarının görmesini engelleyemeyiz.

* Düzenlemek istediğimiz metnin hemen önüne koyacağımız bir etiketle biçimleme stili. Buna in-line (satır içi) biçimlendirme denir.

 * Sayfanın head (baş) kısmına koyulan stillere BODY (gövde) bölümden atıf yapılarak metin biçimleme. (Embedded-Gömülü biçimlendirme)
 

Herhangi bir HTML belirteçinin genel formatı şöyledir :

<belirteç-adı seçenek1="değer1" seçenek2="değer2" seçenek3="değer3"..... >

Yapılabilecekler:
Metin Biçimlendirme(Renk,font,vs),listeler,bağlantılar(link),resim kullanımı,tablolar,Çerçeveler,Formlar

Yapılamayacaklar:
Etkileşimli,olaylara duyarlı sayfalar;formları işleyip degerlendiren programlar.

<meta> </meta>

  HTML dosyasındaki head etiketinin yorum aralığında tanımlanan bu etiket web istemcisine ve arama motorlarına sayfamız hakkında bilgi verir.

Meta etiketi ana kodları:

 Girilecek Kod ----------------------------------- Görevi----------------

name = "veritürü" :Bu bölümde author, description ve keywords özellikleri tanımlanır.

http-equiv = "veritürü":Bu bölümde refresh, expires,ontent ve content-style-type özellikleri tanımlanır.

size = "boyut" Yazımızın boyu belirlenir.

  örnek1:

<meta name=”author” content=”Linux Belgelendirme Çalışma Grubu”>

<meta name=”description” content=”Linux Belgelendirme Çalışma Grubu Web Sayfası”>

  <meta name=”keywords” content=”linux unix bsd openbsd freebsd programlama ozguryazılım özgüryazılım sunucu internet”> Yukarıdaki birinci satır (author), sayfayı hazırlayanların kim olduğu hakkında kısa bilgiler verir.

  İkinci satır (description), sitenin ne hakkında olduğuna dair kısa bir bilgi verir.

  Sonuncu satır ise (keywords), arama motorlarına bilgi sağlamak için kullanılır.

  Yani siz bir arama motoruna girip arama kısmına linux, unix, bsd, openbsd, freebsd, programlama, özgüryazılım, sunucu,internet sözcüklerinden birisini yazarsanız bu site adresi de görüntülenecek adresler arasında olacaktır.

<meta http-equiv=”refresh” content=”5; URL=http://www.belgeler.org/”>

<meta http-equiv=”expires” content=”Wed, 25 Feb 2002 12:00:00 GMT”>

<meta http-equiv=”content” content-type=”text/html; charset=iso-8859-9”>

<meta http-equiv=”content-style-type” content=”text/css”>

  Yukarıdaki birinci kod satırı (refresh) sayfamız açıldıktan 5 saniye sonra belirtilen adresi otomatik olarak açacaktır. İkinci kod satırı (expires) GMT saat sistemine göre belirtilen saat ve tarihte sayfanın dosyası silinecektir. Üçüncü kod satırı (content) tarayıcıya html dosyamızda kullandığımız karakter kodlamasının ISO-8859-9 olduğunu belirtir. Dördüncü ve son satır (content-type-style) belgemizde kullanılan CSS dosyamızın bir metin dosyası olduğunu belirtir. Daha öncede belirttiğim gibi meta etiketi ile tanımlanan bilgiler kullanıcıya görüntülenmez. Bu bilgiler genellikle tarayıcıya ve arama motorlarına bilgi sağlamak için kullanılır.

Örnek2:

<head><!-- Meta etiketleri ile ek bilgiler veriliyor -->
<meta name="author" content="Acemi tasarımcı">
<meta name="description" content="Acemi tasarımcı web okulu">
<meta name="keywords" content="web,html,css">
<meta http-equiv="content" content-type="text/html; charset=iso-8859-9">
<title>İlk HTML Denemem</title> </head>

Meta Etiketi ile Yönlendirme Örneği:

Burada <meta> etiketindeki refresh özelliğini kullanarak yönlendirmeye bir örnek verdim.

Sayfada yazılı olan kodları herhangi bir metin düzenleyici içine yapıştırıp dosyaları belirtildiği gibi kaydedin.

Daha sonra tek yapmanız gereken ornek_html2.html dosyasını üzerine çift tıklayarak açmak ;)

<!-- ornek_html01.html adı ile kaydedin -->
<html>
<head>
<title>Geçici Sayfa</title>
<! -- meta etiketindeki refresh kodu ile başka bir sayfaya yönlendirme yapılıyor -- >
<meta http-equiv="refresh" content="10;URL=ornek_html01_main.html">
</head>
<BODY bgcolor=#ff44ff text=#ooffoo link=#ccffcc vlink=#ffccee alink=#808080>
<br><br>
<center>
<h1>
  Bu sayfa açıldıktan 10 saniye sonra otomatik olarak aynı dizinde bulunan
<a href="./ornek_html02_main.html"> ornek_html02_main.html</a>
dosyasını açacaktır.
</h1>
</center>
</BODY>
</html>

Yukarıdaki dosya bizim birinci HTML dosyamız. Bu dosya açıldıktan 10 saniye sonra otomatik olarak aşağıdaki dosyayı açması gerekli.

<!-- ornek_html01_main.html adı ile kaydedin -->

<html>
<head>
<title>Main page </title>
</head>

<BODY bgcolor="#ffffff" text="#eaeaea">
<center>
<h1>
ornek_html01_main.html dosyasındasınız.
<br>Yönlendirme başarılı!
</h1>
</center>
</BODY>
</html>

<head>
<!-- Meta etiketleri ile ek bilgiler veriliyor -->
<meta name="author" content="Acemi tasarımcı">
<meta name="description" content="Acemi tasarımcı web okulu">
<meta name="keywords" content="web,html,css">
<meta http-equiv="content" content-type="text/html; charset=iso-8859-9">
<title>İlk HTML Denemem</title> </head>

<head> </head>(arasına yazılan belirteçler tüm döküman üzerinde etkilidir ve web istemcileri tarafından doğrudan görüntülenmezler)

<Head> 
Bu Alana,  Normal Olarak Web Sayfasında Görüntülenmeyen Bilgiler Yazılır. Bunlar; Sayfa Başlığı, Anahtar Kelime Tanımlamaları Ve Sayfa İçeriğinde Kullanılan Karakter Bilgisi (Dil, Code Page Vb) Vb. dir.  
</Head>

Yorum alanında sayfamız hakkında bilgilerin bulunduğu bir etikettir. Örneğin sayfamızın başlık bilgisinin bulunduğu TITLE etiketi ya da arama motorlarına bilgi sağlamak için oluşturulan META etiketi bu etiketin yorum alanında tanımlanır

. <html><head> <title>.....</title></head>

Döküman genelinde öncelikle yüklenmesi istenen JavaScript, VBScript kodları da bu alana yazılır. 

<BODY> .... BODY etiketinin içeriği ....</BODY></html>

<title> </title>( ile verilen isim bilgisini/sayfanın konusunu içeren bir tanımlama kendi istemcisinin tanımlama satırında görür)

<tıtle>Bu Belirteç, Hazırlanan Web Sayfasına Bir İsim Verilebilmesini Sağlar</Tıtle> Sayfamızın başlık bilgisi bu etiket altında yer alır. Bu etiket head etiketi içinde kullanılmak zorundadır. <head>
<title> HTML dersi </title>
</head>

* Bu etiket ile BODY etiketinde olduğu gibi renk seçenekleri kullanılamaz.

<BODY></BODY><!-- BODY etiketi ile sayfamızdaki renkleri ayarlıyoruz -->

HTML döküman, <BODY>  </BODY> arasına yazılır

   <BODY text="#000000" bgcolor="#ffffff" link="#80 8080" vlink="#ff3300" alink="#000000">
<center><h1>En büyük boyutlu ortalı bir başlık</h1></center>
Bu Alana, Doğrudan Web Sayfasında Görülen Her Türlü Düzyazı, Formatlama Bilgileri, Diğer Komutlar Vb. Yazılır. Amacımız <acronym title="Hyper Text Markup Language">HTML</acronym>
kodları hakkında bilgi vermektir. <!-- Sayfanın başında başlatmış olduğumuz BODY etiketini bitiriyoruz. --></BODY>

BODY etiketinin bileşenleri: ( bu etiket içinde kullanılan bileşenlerle de sayfamızın bazı temel özellikleridir)

Girilecek Kod -----------------------------------Görevi-----------

text = “renk”sayfanızdaki yazıların rengine renk ile belirtilen değeri verir.
link = “renk”Sayfanızdaki bağların rengine renk ile belirtilen değeri verir.
vlink = “renk”Sayfadaki ziyaret edilmiş bağların renk ile belirtilen değeri verir.
alink = “renk”Sayfanızdaki aktif bağların rengine renk ile belirtilen değeri verir. Artalanı Renklendirmek:

bgcolor = “renk”Sayfanızın arka plan rengine renk ile tanımlı değeri verir.
BODY bgcolor="#ffffff"> (sayfamızın artalananını renklendirir).şu şekilde yazarsak resmimiz artalana döşenecektir.
< background="...">ifadesinin karşısına istediğimiz resmin adresini yazarız.
background = “resim_dosyası”Arka planda sade bir renk değil de bir resim kullanmak istiyorsanız, resim_dosyası kullanacağınız resmin adını temsil eder. topmargin = “değer”Sayfamızda kullanacağımız bileşenlerin istemci penceresinin üst kenarına olan uzaklığını belirler.
leftmargin =“değer”Sayfamızda kullanacağımız bileşenlerin istemci penceresinin sol kenarına olan uzaklığını belirler.
rightmargin =“değer”Sayfamızda kullanacağımız bileşenlerin istemci penceresinin sağ kenarına olan uzaklığını belirler.
onload = “betik” Sayfa yüklenirken çalıştırılacak javascript betiğini belirler.
onunload = “betik”Başka bir sayfaya geçerken çalıştırılacak javascript betiğini belirler.

Renk Adı/Kodları: Fontlar konusunda, metnin rengini belirlerken <font color="..."> etiketini kullanmıştık ve color komutunun karşısına rengin ingilizce karşılığını yazabiliriz demiştik. Fakat bunun daha karmaşık olan bir başka yolu vardı; o da 16'lık sayı düzeninde renk kodu girmek. Önce sayı düzenleri nedir nasıl olur ona bakalım.

Günlük hayatımızda kullandığımız sayı sistemine 10'luk sayı sistemi deniyor, tüm sayıları 0-9 arası toplam 10 rakamdan oluşan sembollerle ifade ediyoruz. 10'luk sayı sisteminin yanısıra diğer sayı sistemleri de vardır. Bunlardan bilgisayar alanında kullanılan iki tanesi ikili (binary) ve onaltılı (hexadecimal) sayı sistemleridir.

İkili sayı sistemi nasıl olur? Bildiğiniz gibi günlük hayatta kullandığımız 10'lu sayı sisteminde 0-9 arası toplam 10 rakam vardır. Aynı şekilde ikili sayı sisteminde de toplam 2 rakam var (bunlar 0 ve 1) ve tüm sayılar bu iki rakamı kullanarak ifade edilebilir, nasıl mı? İşte burada işin içine matematik giriyor. Kısa ve öz olarak belirtmek gerekirse 10'luk düzendeki bir sayıyı ikilik düzene çevirmek için o sayı devamlı olarak 2'ye bölünür ve kalanlar soldan sağa doğru yanyana yazılır.

16'lık sayı sistemin'de toplam 16 rakam var bunlar;

* #000000=black(siyah) * #000080=navy(lacivert)

* #0000FF=blue(mavi) * #008000=green(yeşil)

* #008080=teal(koyu yeşil)* #00FF00=lime(parlak yeşil)

* #00FFFF=aqua(turkuaz) * #800000=maroon(vişne çürüğü)

* #800080=purple(mor)* #808000=olive(zeytuni yeşil)

* #808080=gray(gri)* #C0C0C0=silver(gümüşi gri)

* #FF0000=red(kırmızı)* #FF00FF=fuchsia(parlak pembe)

* #FFFF00=yellow(sarı)* #FFFFFF=white(beyaz)

Renk kodu bir diyez (#) işareti ile başlıyor ve daha sonra altı basamaktan oluşan bir bölüm geliyor. Bu altı basamak içinde F yada f bulunduğu basamaktaki rengin tam olarak kullanılmasını ve sıfır (0) ise o basamaktaki rengin hiç kullanılmamasını sağlamak için kullanılır. Yine html kodlarında olduğu gibi renk kodlarında da büyük-küçük harf ayrımı yoktur. Yani #FFFFFF ve #ffffff aynı rengi yani beyazı temsil eder.

Örnek:

<BODY text="#000000" bgcolor="#FFFFFF" link="#808080" vlink="#eaeaea" alink="#000000">

<BODY text="#000000" background="../resimler/arkafon.gif">

<BODY bgcolor="#334455" text=”#ffffff" topmargin="0">

Birinci kod satırı sayfanın arka plan rengini beyaz, yazıları siyah, bağları ve ziyaret edilmiş bağları gri ve etkin bağları da siyah yapmak için kullanılır.

İkinci satır ise yazı rengini siyah yapmak, bulunduğumuz dizinin bir üst dizinindeki “resimler” dizininde bulunan “arkafon.gif” resmini artalan yapmak için kullanılır.

Üçüncü son kod sayfanın arka fon ve yazı rengini belirliyor, sayfanın bileşenlerinin istemci penceresinin üst kenarlığına olan uzaklığı sıfırlar. Küçük ama işlevi büyük HTML kodları: Kodlamayı yaparken istediğiniz kadar boşluk bırakın, bu sayafada normal olarak görünecektir.. boşluklara ihtiyacınız varsa.. İşte o zaman imdadımıza "Küçük ama işlevi büyük HTML kodları" giriyor :) Sadece boşluk bırakmak için değil "" (Tırnak işaretleri) "<" ">" (büyüktür ve küçüktür işaretleri) yani söylemek istediğim karakterlerin da bazı kodlamaları olduğu.. Ben burada Web sayfalarında en çok kullanılan özel karakterlerin kodlamaları:

Bu kodlamanın sayfada görünümü: