HTML’i anlamak

30-07-2008
ercani html notları

Bu yazımda html işaretleme dilini en kestirme yönden ve işimize yarıcak yönlerini anlatmaya çalışacam. Çünkü css ile birlikte html içindeki biçimlendirme taglarının(<font><b><i>…) yerini stil tanımlamalar almıştır. Bunun yanı sıra htmlde geçen ve artık pek kullanılmayan FRAME yani çerçeveler tagınında üstünde durmucam. Çünkü artık web tasarımcıları görsellik ve teknik olarak bu tekniği kullanmak istemiyorlar.

Öncelikle HTML( Hyper Text Markup Language) işaretleme dili anlamına gelir. İşaretleme dili denmesinin nedeni, sunmak istediğimiz dökümanın, resimlerin yani içeriğin taglar içinde işaretlenip tarayıcı tarafından okunmasını sağlamasındandır. HTML bir programlama dili değildir. Çünkü html ile tek başına çalışabilecek bir program yazamazsınız.HTML W3C(World Wide Web Consortium ) tarafından standartlaştırılmaktadır.

Html’lin asıl görevini anlamak için bir örnek vermek istiyorum.Örneğin bir tarayıcıda ( firefox,internet explorer,nescape,opera,safari…) hazırladığımız bir metnin görüntülenmesini istiyoruz. Metnimiz şu şekilde olsun
“Yeryüzünde barışı sağlayacak sihirli değnek analarla öğretmenlerin elindedir. Eğitim demek, vücutta ve ruhtaki güzelliği ve mükemmelliği son mertebesine kadar geliştirmek demektir.EFLATUN”.
Bu metnimizi tarayıcının tanıması ve istediğimiz şekilde yorumlaması için taglar(< >) kullanırız. Tag kullanılmasının nedeni vereceğimiz komutlarla düz metinimizin ayrılmak istenmesidir. Yukarıdaki metnimizi taglara dökersek;
<p><font color=”blue”>Yeryüzünde barışı sağlayacak sihirli değnek analarla öğretmenlerin elindedir. Eğitim demek, vücutta ve ruhtaki güzelliği ve mükemmelliği son mertebesine kadar geliştirmek demektir.</font><i>EFLATUN</i></p>
Biz burda tarayıcıya şunu demiş olduk;”bak kardeşim <p> ile başlayan ve </p> diye kapan yerler bir paragrafır. <i></i> arasındakiler italiktir.<font></font> arasındakilerde belirttiğim gibi mavi yazıdır. İşte web tarayıcısı bu dilden anlar ve verdiğimiz tagları yorumlar. Yukarıdaki örneğin görüntüsü şu şekildedir.
Yeryüzünde barışı sağlayacak sihirli değnek analarla öğretmenlerin elindedir. Eğitim demek, vücutta ve ruhtaki güzelliği ve mükemmelliği son mertebesine kadar geliştirmek demektir.EFLATUN
HTML tagları büyük küçük harfe duyarlı değildir. Yani <p> ile <P> aynı şekilde yorumlanır. Yukarıdaki örnekte görüldüğü gibi bir bildirim yaparken bildirimin biteceği yer / işaretiyle kapatılarak sonlandırılır. Her html etiketi / işaretiyle bitirilmek zorunda değildir. Bunu ilerleyen örneklerde görecez.
Peki etiketleri yazdık ama bu etiketlerin HTML e ait olduğunu tarayıcıya nasıl anlatacaz. İşte bunun için yazacağımız etikerleri kapsıcak şekilde <html></html> tanımlaması yapılır. Örneğin;

<HTML>
<HEAD>
<title>ornek web sayfası</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=windows-1254″>
</HEAD>
<BODY>
ilk html sayfamız.
</BODY>
</HTML>

Burada tarayıcı <html></html>taglarını kapsayan etiketleri html dili olarak algılar ve öyle yorumlar. Yukarıdaki etiketleri biraz anlatalım.
<head></head> taglarının arasına sayfamız hakkında tanımlamalar yapılır. Mesela sayfamızın hangi dili içerdiği (<meta>) , tarayıcının üstünde çıkacak olan tanımlamasını yazıyoruz(<title>)…
<body></body> taglarının arasında kalan yer gövdedir. Tüm içeriğimizi buraya ekleriz.Düz metin, resim, müzik veya video içerik….
Yani genel olarak anlıcağımız üzere HTML 3 temel tanımlama üstüne kurulur.<html>,<head>,<body>.

<html>
<head>
</head>
<body>
</body>
</html>
Genel yapı bu şekildedir.

Bu şekilde bir sayfa oluşturduktan sonra onu kaydederken .html veya .htm uzantısıyla kaydetmemiz gerekiyor. Yoksa tarayıcımız onun bir html sayfası olduğunu anlamaz. Kaydedilen html dosyamıza baktığımızda hangi tarayıcı işletim sisteminde tanımlanmışsa onun simgesi ile kaydedilir. Ve tıkladığınızda o tarayıcıyla açılır.Farklı tarayıcıyla açmak istiyorsanız üzarine sağ tıklayp birlikte aç sekmesinden diğer tarayıcıyı seçmemiz gerekir.
Bir sayfa oluştururken bir çok editör kullanabiliriz. Eğer ilk defa HTML dilini kullanıyor ve öğrenmek istiyorsanız notpad++ ı öneririm. Bu editör tagları renklendirip sizi yormaz. Bu editörle çalışıp tagları öğrenince microsoftun frontpage veya adobe nin satın aldığı dreamweaver i kullanabilirsiniz. Bu editörlerde başlıklar diğer tanımlamalar daha kolay halledilir. İlerde göreceğimiz tablo oluşturmayı tek tıklamayla halledebilirsiniz. Ben dreamweaver kullanıyorum daha profosyenel ve daha esnek bir editördür.
Oluşturduğumuz bir sayfayı farklı tarayıcılar farklı yorumlayabilirler. O yüzden bir sayfa hazırladıktan sonra farklı tarayıcılarla test etmek yararımıza olur.
HTML dilinin etiketleri yarıdan fazlası metinlerimizi biçimlendirmede ve tanımlamada kullandığımız etiketlerdir.
<p> paragraf etiketidir. <h1><h2><h3><h4><h5><h6> altı ayrı büyüklükteki başlık etiketimizdir. Bunlardan <h1> en büyük puntoda başlıktır ve sona doğru gidildikçe başlıklarımız küçülür.Örnek olarak;
</html> tanımlaması yapılır. Örneğin;

<HTML>
<HEAD>
<title>h1 etiketi</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=windows-1254″>
</HEAD>
<BODY>
<h1>bu h1 etiketidir.</h1>
<h2>bu h2 etiketidir.</h2>
<h3>bu h3 etiketidir.</h3>
<h4>bu h4 etiketidir.</h4>
<h5>bu h5 etiketidir.</h5>
<h6>bu h6 etiketidir.</h6>
</BODY>
</HTML>

Bu kodun görünümü şu şekildedir.

bu h1 etiketidir.

bu h2 etiketidir.

bu h3 etiketidir.

bu h4 etiketidir.

bu h5 etiketidir.

bu h6 etiketidir.

HTML de biçimlendirme etiketlerine geçmeden önce birşey hatırlatmak istiyorum. Html le hazınlanmış bir web sayfasına bu etiketleri kullanmadan CSS (cassading style sheets) yardımıyla biçimlendirebiliriz. Bunu yapmanın 3 yolu vardır. (daha önce anlattığım için burada anlatma gereği duymadım burdan bakabilirsiniz)
Bir metinde, paragrafta veya herhangi bir içerikte bir satır aşağıya inmek için <br> etiketi kullanlır ve kapatılmaz.Bir editör kullanıyorsanız(frontpage, dreamweaver) shift + enter tuşuna denk gelir. eğer yeni bir paragraf açmak istiyorsanız enter tuşuna basmalısınız.
Bir paragrafımızın düzenini Align etiketiyle belirleriz. örneğin <p align=”center”> etiketi paragrafımızın bulunduğu yerde ortalanmasını sağlar. Paragrafımızın sağa dayalı olmasını istiyorsak “right” , sola dayanmasını istiyorsak “left”, iki yana yaslı olmasını istiyorsak “justfy” etiketi kullanılır.
Yazdığımız bir metnin font tipini , büyüklüğünü, rengini <font> tagıyla belirtiriz. Örneğin;
<p><font face=”arial” color=”#ffd400″ size=”12px”>Bu sarı renkte 12px büyüklüğünde bir yazıdır.</font></p> bu kodun görünümü şu şekildedir.

Bu sarı renkte 12px büyüklüğünde bir yazıdır.
Burda “color” ve “face” özelliklerinden bahsetmek istiyorum.
COLOR: css te ve html de color özelliğini tanımlarken ya rengin ingilizce kodunu yada 16 sayı sistemiyle yazılan hexadecimal kodunu yazmak gerekir. Renkler RGB(red-green-blue) karışımından oluşur. 16 lık sayı sisteminde yazılan bir hexadecimal kod kırmızı-yeşil-mavi renklerin ne oranda karışacağını gösterir ve renk tanımlanırken başına diyez(#) işareti konur. Örneğin #000000 kodu hiç bir renk karıştırma demektir o yüzden bu renk siyahtır. #ffffff bu kod hepsini aynı oranda karıştır demekdir o yüzden beyaz rengi içerir. İngilizce renk kodları şunlardır.

#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 (Zeytunî yeşil)

#808080=gray (Gri)

#C0C0C0=silver (Gümüşî gri)

#FF0000=red (kırmızı)

#FF00FF=fuchsia (Parlak pembe)

#FFFF00=yellow (Sarı)

#FFFFFF=white (Beyaz)

Face: bu özellikte font ve font ailesi tanımlannır.Ama burda şuna dikkat etmemiz gerekir. Tanımlayacağımız fontun sayfayı açacak kullanıcının bilgisayarındada yüklü olması gerekir.Yoksa tarayıcı tanımladığımız fontu yorumlayamaz. O yüzden font kullanımında genel font ailelerini seçmemiz gerekir. Web te metinler için genelde verdana kullanılır.

biçimlendirme için bazı etiketler;

<S>..</S>: Ortasından Çizgi Çek (Strikethrough) etiketi, işaretlediği metnin ortasından çizgi çekilmesini sağlar. Bu etkiyi, bir metinden çıkartılmış yerleri göstermek için kullanabilirsiniz

<U>..</U>: Altını Çiz (Underline) etiketi, işaretlediği metnin altına çizgi çekilmesini sağlar. Bu etkiyi, bir metinde vurgulamak istediğiniz bölümü göstermekte kullanabilirsiniz

<HR>: Yatay Çizgi (horizontal rule) etiketi, bulunduğu yerde, vereceğiniz yüklemlere göre yatay bir çizgi çizilmesini sağlar. Bu etiketin kapatılmasına gerek yoktur. Yatay çizginin yüklemleri arasında sağa, sola veya ortaya bloklanacağını gösteren ALIGN, gölgesiz olmasını sağlayan NOSHADE, pixel veya yüzde olarak kalınlığını belirleyen WIDTH vardır.
<b></b>: fontu kalın yapar.
<i></i>: yazıyı italik yapar.

LİSTELEME ETİKETLERİ

iki türden inceleye biliriz.

1:SIRASIZ LİSTELER(unordered): Bir liste hazırlarken hazırladığımız listenin ya içi dolu ya da içi boş bir yuvarlak, veya dört köşe nokta şeklinde olmasını istiyoruz. Bunun için <ul></ul> etiketi kullanılır.<ul></ul> etiketlerinin arasına sıra belirten <li> tagı kullanılır. Kapatmak zorunda değiliz ama kapatılarakta kullanılabilir. Örnek;

<li>ilk</li>
<li>ikinci</li>
<li>üçüncü</li>
</ul> Bu kodun görünümü şu şekildedir.

ilk
ikinci
üçüncü

Dikkat ettiyseniz type özellğini kullandım. Listemizin sıralanmasının içi dolu daire olmasını sağladım.DISC, içi dolu daire ;CIRCLE, içi boş daire; SQUARE dörtköşe nokta ile sıralanmayı sağlar.

2:Sıralı listeler;

Listemizi oluştururken harfle veya rakamla başlatmamızı ve sıralamamızı sağlar.<ol></ol> tagları bu iş için kullanılır. Örneğin;

<ol type=” 1″>
<li>ilk</li>
<li>ikinci</li>
<li>üçüncü</li>
</ol> Bu kodun görünümü şu şekildedir.

ilk
ikinci
üçüncü

yine listemize niteliğini veren type özelliğidir ve şu komutları alır.

1, rakamla; A, büyük harfle; a, küçük harfle; i küçük Romen rakamları ile; ve I, büyük Romen rakamları ile sıralanmayı sağlar.
Buraya kadar sanırım HTML nedir ve nasıl kullanılır sorularına yanıt bulduk.Şimdi html için en önemli konu olan tablolardan bahsedeceğim. Bu konu biraz uzun olduğundan –diğer yazımda– devam etmek istiyorum.

~Sende Konuş~