Temel HTML Bilgileri 1

May 21st, 2006

Arkadaşlar önceki yazıda da demiştik, temel HTML bilgileri şarttır. Web sitesi kurup yönetmek için işi ucundan da olsa kavramak gerekir. Zira bir yerde bir karmaşıklık çıktığında, her ne kadar günümüz gezgin programları hatayı örtbas etseler de hata kapanmaz ya da görüntü gene bozuk çıkar. Gezginlerin çaşşidine göre hatayı nasıl kamufle ettikleri de değişir.

Bu kadar göz korkusundan sonra azıcık konuya girelim. HTML’in uzun halini merak eden vardır diye ben sadistik bir duyguyla o uzun açılımı hem ingilizce hem de Türkçe yapacağım ve tarihine gelişimine gireceğim isteyen olursa bu paragrafı direkt olarak atlayabilir. HTML’in tam açılımı Hyper Text Markup Language, Türkçesi ileri(Yüksek) Metin işaretleme Dili. Yanlış hatırlamıyorsam bu işaretleme kavramı HTML’in ilk çıktığı zamanlardan kalma üzerine yapışmış bir lakap.ilk zamanlarda yazıcılardan düzgün çıktı almak için kullanılmış. Kelime işlemciler olmadığı zamanlarda. Paragraf tanımlamadır, tablo oluşturmadır, vs. bir çok özellik oralardan kalma. Tabii ki internet yaygınlaşınca (tahminim) ilk gezgin programı tutmuş HTML’i gezginin anlayacağı dil olarak belirlemiştir. Sonra da delinin kuyuya taş atması misali herkes uğraşmışsa da eksik meksik öyle kalmıştır. Evet eksik dedim, zira sadece HTML (yeni sürümleri bile) şu zamanda (genel olarak) ihtiyaçları karşılamaktan çok uzaktadır.

Bir kaç sene öncesine kadar (yaklaşık 6 sene öncesinde) web sitesi tasarlanırken önceki versiyonlarla uyum konusunda ince elenip sık dokunurdu. Bir web sitesi yapmak için en küçük ortak paydada tasarım yapmalıydınız. Bu tasarım kısıtlamaları genelde 640×480 çözünürlük ve HTML 3.0 dilini kullanarak oluyordu. Ama şimdiki gezginlerin maaşallahı var. Sık sık güncelleniyorlar. Hepsi son teknolojilerden anlıyor. Belki de dijital saldırıların bize en güzel armağanı bu oldu. Bunu belirtmemin sebebi artık tasarımcıların daha korkusuz tasarım yapabilme çağının geldiğini söylemekti. Åžu anda 640×480 çözünürlükte monitör kullanan kullanıcıların sayısı oldukça az olduğu gibi 800×600 çözünürlük bile bulmak zorlaştı. Popüler gezginlerin hepsi son sürüm HTML dilini destekliyor, JavaScript’ten anlıyorlar. Konumuz olmasa da, artık gezginler yeni nesil işaretleme dili olan XML dilinden de anlar duruma geliyorlar. Zaten bu yazıda anlatacaklarım dinazor gezginlerde bile çalışacaktır ama tümü değil tabii ki. Siz içinizi rahat tutabilirsiniz. Tasarımlarınız dünya internet kullanıcılarının büyük bir çoğunluğu tarafından rahatça izlenebilecektir.

HTML dilinde öğeler etiket (tag) denilen kod parçacıklarıyla tanımlanırlar. Her etiketin bir başlatıcısı bir de sonlandırıcısı vardır. Bir HTML sayfası, iki kısımdan oluşur: başlık ve gövde. Başlık kısmında daha çok parametrik bilgiler yer alır. Gezginin bir sayfayı nasıl yorumlayacağı ya da arama motorlarının sayfanın ne gibi şeyleri içerdiği konusunda fikir sahibi olacağı kısım başlık kısmıdır. Gövde kısmında ise sayfanın asıl yapısı bulunur. Yani gezgin asıl bu kısmı bize sunar. Gövde kısmında HTML asıl dansını bize sunar: harflere biçim kazandırır, bilgileri düzenler, vs. Aslında hatalı bir kullanım olsa da şu kodu boş bir metin dosyası açıp içine yazdığınızda:
Merhaba Dünya,[br /][h2]Merhaba Mars![/h2]

Hemen bir açıklama yapayım “” işaretleri yerine “[" ve "]” işaretleri kullandım. Bunu artistlik olsun diye değil WordPress’in her HTML koduna izin vermemesi yüzünden yaptım. Siz kodları uygularken yerine ] koyarak kodlarınızı çalıştırın. Bunu Notepad’de bile olan “Bul ve Değiştir” komutuyla yapabilirsiniz.

Åžimdi bu HTML kodlarını bir metin dosyası içine yazıp, “Merhaba2.html” oalrak kaydedip, kaydedilen dosyayı gezginde açınca önceki örnekten farkı olmayan bir durumla karşılaşacaksınız. Değişikilk olarak gezgin penceresinin üst tarafında title etiketleri arasına konulan söz öbeğinin belirmesi olacaktır.

Açtığınız HTML dosyasını “Merhaba1.html” olarak kaydedip bu HTML dosyasını bir gezginde açtığınızda göreceksiniz ki birinci satırda nisbeten küçük harflerle, ikinci satırda daha büyük harflerle metin yazılmış olacaktır. Bu büyüklük ve küçüklük gezginden gezgine değişir. Kodu incelediğimizde bir başlık tanımlaması ya da gövde tanımlamasının olmadığını fark edebilirsiniz. [h2] etiketi bu şekilde başlatılmış ve [/h2] bu şekilde bitirilmiştir. Genel olarak tüm etiketler bu şekilde başlatılır ve bitirilirler. Yani bitirici etiketin küçüktür işaretinden sonra ters slash konur. Bazı etiketler ise, [br /] gibi, bir sonlandırıcıya gerek duymaz. Bu etikentlerin bir sona ihtiyacı yoktur çünkü koyduğunuz yerde işlerini bitirirler.

Åžimdi adam akıllı bir HTML dosyası yazalım ve yukarıdaki kodu içine ekleyelim:

[html]
[head]
[title]Merhabalar[/title]
[/head]
[body]
[p]Merhaba Dünya,[br][h2]Merhaba Mars![/h2]
[/body]
[/html]


iki örnek arasındaki bariz fark ikincisinin adam akıllı bir HTML sayfası olmasıdır. Başlık ve gövde (head,body) tanımlamaları yapılmıştır. Tüm döküman html etiketi içine alınmıştır. Bu bir bakıma gezginin HTML dosyasını okuduğunu anlaması için yapılır ama genel olarak gezginler HTML kodlarını anlarlar ve başka bir kod gözükmüyorsa direkt olarak yorumlarlar. çünkü biz gezgine dosyanın bir html dosyası olduğunu uzantısıyla göstermişizdir.

Åžimdilik bu kadar girebildim konuya. Bir dahaki yazıda daha elle tutulur çalışmalar yapacağım.

Ertuğrul Karademir
21.05.2006,Ankara

Köşedeki tüm yazılar :

konuk yazarlar

• Önceki: Son Yağmur Damlası
• Sonraki: Temel HTML Bilgileri 2