ana sayfa : araştırma : frontpage2000tr : html kod ile ilgili temel bilgiler [ 5 / 6 ]

5. HTML KODLARIYLA İLGİLİ TEMEL BİLGİLER

5.1. HTML’ye yine de ihtiyacım var mı?

Web sayfaları, HTML adı verilen özel bir formatlama dili kullanılarak yapılır. HTML, Hypertext Markup Language için uydurulan bir kısaltmadır. HTML, sayfalara yazacağınız bilgilerin formatlarını (yazı rekleri, büyüklükleri, paragraf biçimleri vb gibi), sayfalar arasındaki kompozik geçiş bağlantılarını vb verebileceğiniz vb bazı komutlar içerir. Hiç HTML bilmeden görsel editörlerle web sayfası hazırlayabiliyorum.

Bu sayfanızın içeriğine bağlı. Görsel editörler; tablo, frame, her türlü formatlama, resim/ses vb ekleme gibi özellikleri sağlarlar ve bunlar ortalama bir web sayfası için yeter. Ancak, özellikle yeni HTML komutları, Java Appletleri, bazı CGI teknikleri vb eklemek için sayfanızın HTML şekli üzerinde biraz çalışmanız gerekebilir. Ayrıca, HTML felsefesini anlamak ve formatlama ortamlarını öğrenmek yazdığınız sayfaya her haliyle hakim olmak demektir. Bağlandığınız sitelerdeki sayfa içeriklerini anlamak ve bazı teknikleri öğrenmek için de biraz HTML bilmek sonuçta yararlıdır. (Frontpage 2000 Kullanımı, http://www.gastrit.8k.com/fpage.html.)

5.2. HTML Dilinin En Temel Elemanı

HTML'nin en temel işlevi, yazdığınız bir dökümana biçim vermektir (yazı karakterini, rengini, büyüklüğünü değiştirmek; paragraf eklemek; resim eklemek vb gibi). Bu, kullanılan bazı biçimlendirme (formatlama) belirteçleri/komutları kullanılarak yapılır. Söz gelişi; sayfamızda "merhaba" kelimesinin koyu renkli görünmesini isteyelim. Bu durumda, <BODY> ... </BODY> arasına;

<B>deneme</B>

yazmalıyız. Bu ise, bir web istemcisinde görüntülendiğinde, deneme şeklinde bir sonuç üretir. Bu basit örnek aslında HTML dilinin en temel kuralı hakkında tüm ipuçlarını vermektedir : Bir HTML döküman hazırlamak, temel olarak, öncelikle sayfada görünmesini istediğimiz düzyazı bilgileri yazmak; sonrasında da bu yazının istediğimiz yerlerinde uygun belirteçler (TAG) kullanarak istediğimize uygun bir görünüm kazandırmaktır. (Frontpage 2000 Kullanımı, http://www.gastrit.8k.com/fpage.html.)

Tüm HTML belirteçleri < karakteri ile başlar ve > karakteri ile biter ve bu HTML dökümanını gösterecek Netscape, MSIE gibi web istemcilerine, yazıyı koyu göstermek, italik yapmak, bir resim göstermek vb türünden özel birşeyler yaptırır. < > arasına ise, ilgili belirteç komutu ve bazen de birtakım ilave parametreler (seçenekler) gelir. Sözgelimi yukarıdaki örnekte, <B> belirteçi, kendinden sonra yazılan yazıların web istemcilerinde KOYU RENK görünmesini bildirir.

Genellikle HTML belirteçleri çift halinde kullanılır (ancak bu kuralın istisnaları da vardır). Yukarıdaki örneğe tekrar dönecek olursak, <B> belirtecinin çifti </B> dir. Böylece, yazının belli bir kısmına (yani, sadece <B> ..... </B> arasına yazdığımız kısmına) biçimlendirme yapmak mümkün olur. Her belirtecin çifti, isminin başına bir ayıraç (/) konarak elde edilir ve yine < > arasına yazılır.

Herhangi bir HTML belirtecinin genel formatı şöyledir :

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

Bilgileri yazmada küçük/büyük harf ayırımı yoktur. Ancak, tüm HTML belirteçlerini ve seçenek adlarını büyük harfle; değerleri ise küçük harfle yazmak oldukça yaygın bir alışkanlıktır.

HTML, dökümanlar üzerinde kullanılabilecek yüzlerce belirteç içerir. Bu da, web editörlerinin sayfa hazırlamada ne kadar yararlı araçlar olduğunu göstermektedir. En baştaki örneğe tekrar dönelim :

<FONT SIZE=+3>
Sayfama Hoş Geldiniz

</FONT>

<FONT> belirteçi, kendisinden sonra gelen karakterlerin yazı büyüklüğü, rengi, tipi vb ile ilgili değişiklikler yapabilmemizi sağlar. Dikkat edilirse, belirteç adından sonra bir seçenek kullanılmış. Biçimlendirme sadece dökümanın belli bir kısmına uygulanmak istendiğinden, ilgili belirteç, çifti olan </FONT> ile kapatılmış. Kapatma belirtecinde, sadece belirtecin adı ve sol tarafına ayıraç işareti (/) konur. ( Frontpage 2000 Kullanımı, http://www.gastrit.8k.com/fpage.html.)

Baştaki tabloda da belirtildiği gibi, bir HTML döküman, <BODY> </BODY> arasına yazılır. Baştaki <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. Bunlardan en önemlisi, yazılan HTML dökümana isim vermekte kullanılan <TITLE>'dır. Bu belirteç, hazırlanan web sayfasına bir isim verilebilmesini sağlar. Böylece, sayfayı yükleyen birisi, <TITLE> ile verilen isim bilgisini (sayfanın konusunu içeren bir tanımlama) kendi istemcisinin tanımlama satırında görür. Aşağıda, bu belirteçin örnek bir kullanımı görülmektedir.

<HTML>
<HEAD>
<TITLE> Ugur-Onur OnLiNe Web Sayfası </TITLE>
</HEAD>
<BODY>
....
</BODY>
</HTML>

Bu alanda kullanılabilecek ikinci önemli belirteç <META> 'dır. Kullanımda, kendisinden sonra bir seçenek adı verilerek kullanılır. Bu belirteç kullanılarak verilen bilgiler çok çeşitli olabilir. Söz gelişi, web sayfaları üzerinde dolaşan arama motorları, sayfaların bu kısmındaki <META> belirteçlerine bakarak sayfaları gruplar. Bu kullanımda, <META> ile birlikte, sayfanızdaki içeriği yansıtan bazı anahtar kelimeler ve tanımlamalar verebilirsiniz. Aşağıda bununla ilgili bir örnek görülmektedir :

   <META NAME="Description" CONTENT="Web sayfası hazırlamak icin bazı kısa bilgiler">
   <META NAME="KeyWords" CONTENT="html, htm, kişisel web sayfası, web">
   <META NAME="Author" CONTENT="gazibilgisayar">

Meta belirtecinin önemli bir kullanımı da, sayfadaki yazıların hangi "dil ailesi"ne ait karakterlerle yazıldığını belirtmek içindir. Türkçe, Latin5 dil ailesindedir. Buna ait standart tanımlaması ise iso-8859-9 olmaktadır. Aşağıda buna ait bir kullanım gösterilmiştir.

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-9">

5.3. Temel HTML Komutları

Bir HTML döküman hazırlarken, satırlar ya da kelimeler arasında istediğiniz kadar boşluk bırakabilirsiniz. Kodu takip etmeyi kolaylaştırmak için HTML komutlarını metinden boşluklarla ayırabilirsiniz. Bunun dökümanın web istemcisi üzerindeki görünümünde hiç bir fonksiyonu olmayacaktır.

Döküman içinde, yeni bir paragrafa başlarken, <P> belirtecini kullanmalısınız. Bu belirteci çokça kullanacaksınız :-) HTML dökümanlarında <P> belirteç kullanmadıkça bir cümle herhangi bir yerinden ayrılıp kalan kısmı altta görünebilir, birden fazla boş satır tek satır olarak algılanır. Bir web tarayıcısı satır sonlarını ve boş satırları göz ardı edeceğinden, paragrafları mutlaka < p> belirteci ile ayırmalısınız.

Eğer bir satırı belli bir yerinden bölmek istiyorsanız <BR> belirtecini kullanmalısınız. Aşağıda bunlarla ilgili küçük bir örnek var :

<P>Burada yeni bir paragraf başladı. Ben satırın burada <BR>

bölünmesini istiyorum.

Eğer <P> kullanılmasa idi, ilgili metin bir üstteki bilgilerle birleşecekti. <BR> kullanılmasaydı, henüz satır bitmediği için, alt satıra geçilmeyecekti. Hem <P>, hem de <BR> belirteçleri tek kullanılır, çiftleri yoktur.

Aşağıdaki tabloda, sık kullanılan bazı metin formatlama belirteçleri görülmektedir. Belirteçler iç içe kullanılabilir, ancak birbirlerini kesmemelidirler. Bu belirteçleri kullanırken, belirtecin etkimesi istenen yazı <> .. </> arasına alınır. Örneğin :

<i> Bu yazı italik </i> şeklindeki bir HTML kodu, "Bu yazı italik" şeklinde bir sonuç üretecektir.

<i> </i>	*Yazıyı italik* yapar.**
<tt> </tt>	Yazıyı `sabit genişlikli yapar (daktilo harfleri gibi)`.
<h1> </h1> <h2> </h2> <h3> </h3> <h4> </h4> <h5> </h5> <h6> </h6>	Bu belirteçler, döküman içinde kullanılabilecek başlıklardaki yazıların büyüklüklerini tanımlar. Sayı arttıkça yazı büyüklüğü azalır. Bunların yerine, daha esnek <FONT> </FONT> belirteci de kullanılabilir. Bu kullanımda, <FONT SIZE=-2> 'den <FONT SIZE=+2> ye kadar yazı büyüklükleri verilebilir.
<hr>	Yatay bir çizgi oluşturur. <hr SIZE=4 WIDTH= "50%"> şeklinde, daha kalın ve dar bir çizgi de yapılabilir.
<center> </center>	Yazı ve resimleri sayfada ortalar .
<blockquote> </blockquote>	Yazıyı hem sağdan, hem soldan bir miktar içeri kaydırır.
<pre> </pre>	Bu belirteçler arasına yazılan her şey, yazıldığı gibi ekrana çıkar. Boşluklar, tab'lar, satır bölmeleri vb. korunur.

5.4. HTML Döküman İçinde Açıklama Satırları

HTML Döküman İçinde, kodu takip etmede kolaylıklar sağlayacak bazı açıklama satırları konabilir. Döküman içinde herhangi bir yerde, "" belirteçleri arasında kalan hiçbir şey web istemcileri tarafından dikkate alınmaz.Örnek;

5.5. Sayfa Arka Plan Resimleri/Renkleri ve Metin İçinde Renk Kullanımı

HTML sayfalarınızın arka planında isterseniz bir resim olabilir. Ya da, sayfa arka planını sizin istediğiniz bir renk yapabilirsiniz. Bu, döküman başlangıcındaki <BODY> belirtecine bazı seçenekler ekleyerek yapılır. Sözgelimi şu an okuduğunuz dökümanın arka planı aslında, "chalk.gif" isminde bir resim dosyası. Bu :

<BODY BACKGROUND="chalk.gif"> şeklindeki bir kullanımla sağlandı. Eğer arka plan renginin kırmızı olmasını isteseydik o zaman da, <BODY BGCOLOR="#FF0000"> dememiz gerekecekti. Buradaki FF0000, kırmızının, RGB renk ayrım sistemindeki hekzadesimal (16-lik sistem) karşılığı.

(http://www.gastrit.8k.com/fpage.html.)

Aslında, HTML döküman içinde bazı şeylerin renklerini kontrol edebiliyoruz :

<body> belirtecinde, bgcolor, text, link, vlink, ve alink seçenekleri sırasıyla sayfa arkaplan rengi, sayfadaki yazıların rengi, henüz kullanıcının ziyaret etmediği bağlantı elemanları (link), ziyaret edilmiş bağlantı elemanları ve aktif bağlantı elemanlarını (yani, tam bir bağlantının üzerine fare ile tıkladığınızdaki renk) tanımlar.

Sayfa içinde herhangi bir yazının rengini değiştirmek için <font> belirteci, color seçeneği ile birlikte kullanılır (<FONT color="#FF0000"> ... </FONT> gibi).

Renk değerleri verilirken şu şekilde hareket edilir :

Genel renk tanımı : "#RRGGBB" dir. Burada, RR, GG, ve BB, sırasıyla kırmızı (red), yeşil (green) ve mavi (blue) renklerin toplam renk içindeki yoğunluğunu gösteren hekzadesimal sayılardır. Bu sayılar yerine aşağıdaki renk tanımlama kelimeleri de kullanılabilir : aqua, black (siyah), blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red silver, teal, white (white), or yellow (yellow) ,

5.6. Listeleler

Dökümanların göze hoş görünmelerini sağlamak amacıyla listeler yaygın olarak kullanılır. HTML, pek çok liste çeşidi destekler. Bunlar, düz listeler, numaralı listeler, tanımlı listeler ve içiçe listelerdir.

5.6.1. Düz (numarasız) listeler

Düz liste (unordered lists, <ul>) oluşturmak için,

Listeye başlamak için belirteç açılır. <ul>

Liste elemanlarını teker teker girerken başına <li> belirteci girilir. Kapatmak için </li> belirtecine gerek yoktur.

Listeyi bitirmek için belirteç kapatılır. </ul>

Örnek olarak,

<ul>

<li> Elma

<li> Armut

</ul>

Örnek, ekranda şu şekilde görülür :

Elma

Armut

<li> belirteçleri içinde paragraflar, diğer dökümanlara bağlantılar, ve diğer belirteçleri kullanabilirsiniz.

5.6.2. Numaralı listeler

Numaralı listeler (ordered lists <ol>), düz listelerden farklı olarak, <ul> belirteci yerine <ol> kullanırlar. Ekrandaki liste elemanlarının başına 1'den başlayarak sayılar eklenir. Aşağıdaki HTML kodu,

<ol>

<li> Linux İşletim Sistemi

<li> Linux'un desteklediği donanımlar

</ol>

ekrana şunları yazar:

Linux İşletim Sistemi

Linux'un desteklediği donanımlar

5.6.3. Tanımlı listeler

Genellikle birden fazla başlığı olan, her başlık altında kısa bir metin içeren yazılar, tanımlı listeler ile oluşturulur. Tanımı yapılacak başlık, <dt> ile belirtilir, <dd> ile başlık altına metin girilir. Tüm liste, <dl> ile </dl> arasına alınır.

<DL>

<DT> Kişisel Kullanım

<DD> Linux evinde veya işinde UNIX işletim sistemi altında çalışmak

isteyenler için ideal bir platformdur.

<DT> Internet Sunucusu

<DD> Linux doğrudan TCP/IP desteği ile gelmektedir.

</DL>

Ekrandaki çıktı şu şekilde görünür:

Kişisel Kullanım

Linux evinde veya işinde UNIX işletim sistemi altında çalışmak isteyenler için ideal bir platformdur.

Internet Sunucusu

Linux doğrudan TCP/IP desteği ile gelmektedir.

5.6.4. İçiçe listeler

Tüm liste çeşitleri, 3'den fazla bölüm kullanmadıkça içiçe yazılabilir. Örnek olarak,

<ul>

<li> İstanbul'un büyük semtleri

<lu>

<li> Beyoğlu

<li> Bakırköy

<li> Kadıköy

</lu>

<li> Ankara'nın belli başlı yerleşim birimleri

<lu>

<li> Kızılay

<li> Ulus

</lu>

Ekrandaki görüntüsü,

İstanbul'un büyük semtleri

Beyoğlu

Bakırköy

Kadıköy

Ankara'nın belli başlı yerleşim birimleri

Kızılay

Ulus

5.7. Basit Tablolar

HTML, her türlü tablo kullanımına olanak tanır. Tablolar, bilgileri matris düzeninde, birçok hücreler tanımlayarak bunların içinede verebilmemizi sağlar. Ayrıca, hazırladığımız dökümanın kolonlar halinde ya da, belirli hizalarda yapışık şekilde (align) görünmesini de sağlarlar. HTML standartları gelişim süreci içinde tablo tanımlama belirteci de bazı değişikliklere uğradı.
Döküman içinde tablo oluştururken aşağıdaki işlemler takip edilir :

Tablolar, <table> belirteci ile tanımlanır.

<table> belirteci, tablo kaç satır ise, o kadar sayıda arka arkaya <tr> belirteci içerir.

Her <tr> belirteci, o satırda kaç kolon varsa o kadar <td> belirteci içerir.

<td> belirteci ile tanımlı hücrelere her türlü bilgi (yazı, link, resim, liste, ve hatta başka bir tablo) gelebilir.

Tablo içinde satırlar yukardan aşağıya, sütunlarla oluşturulan hücreler ise soldan sağa tanımlanır. Eğer satırlar ve sütunlar arasında satır/sürun çizgilerinin de görünmesi isteniyorsa, <table> belirteci ile birlikte "border" seçeneği kullanılır.

Aşağıdaki örneği inceleyelim :

<table border> 1. tablo belirteci başlangıcı

<tr> 1. satır başlangıcı

<td>Ankara</td> 1. satır 1. sütun

<td>İstanbul</td> 1. satır 2. sütun

</tr> 1. satır sonu

<tr> 2. satır başlangıcı

<td>Eskişehir</td> 2. satır 1.sütun

<td>Şanlı Urfa</td> 2. satır 2. sütun

</tr> 2. satır sonu

</table> 1. tablo belirteci sonu

(http://www.gastrit.8k.com/fpage.html.)

Yukarıdaki kod, bir web istemcisinde görüntülendiğinde aşağıdaki tablo oluşacaktır :

Ankara	İstanbul
Eskişehir	Şanlı Urfa

İstenirse, tablolar için tablo arka plan rengi ya da, her bir hücre ya da satıra bgcolor seçeneği <table>, <tr>, <th>, ve <td> belirteçleriyle kullanılarak verilebilir. Standart html editörlerinin hepsi de, kolay tablo oluşturmak için birtakım tablo sihirbazları sunmaktadırlar.

Tablolar ile ilgili daha ayrıntılı bilgiler bu dökümanın sonraki sürümlerinde verilecektir.

5.8. HTML Döküman içinde Sayaç Kullanımı

Sayaçlar, sayfalarınızın kaç kez ziyaret edildiğini saptayan ve sunucu tarafında çalışan CGI programlardır.

Hazırladığım sayfa her web istemcisinde aynı görünecek mi? Bu konuda nelere dikkat etmeliyim?

Eğer sayfalarınızda standart HTML kullanmışsanız, tüm istemcilerde aynı görünmemesi için hiç bir sebep yok. Ancak;

Sayfalarınızda, sadece özel bir istemcinin anlayabileceği bazı ek HTML belirteçleri kullanmışsanız yine bazı kötü sürprizlerle karşılaşabilirsiniz..