Temel HTML Belirteçleri

Next: Form Hazırlama (CGI) Up: HTML ve CGI Previous: HTML ve CGI

## Temel HTML Belirteçleri

Daha önce bir programlama diliyle uğraşmamış olsanız bile HTML'in kolaylığı ve çok kısa zamanda bu dile hakimiyet sağlayabilmek sizi hayrete düşürecektir. Çeşitli çeviriciler yardımıyla hemen her tür dosyanın bu dile çevrilebilmesi, HTML dilini bilmeyenlerin bile dikkati bu yöne çekmeye yeter. Burada HTML komutlarına kısa bir giriş yapılacaktır, buradaki bilgilerle kendi web sayfanızı hazırlamanız mümkün olacak. Daha geniş bilgi için http://www.w3.orgwww.w3.org veya http://www.yahoo.comwww.yahoo.com adreslerine göz atabilirsiniz. Bu adreslerin yansıları http://www.linux.org.trLinux Kullanıcıları Grubu ana web sayfasından da erişilebilir.

Basit bir HTML dosyası aşağıdaki gibi yazılabilir:

    <title> Burasi konunun yazilacagi yer </title>
    <h1> Bu, 1 numarali baslik </h1>
    HTML dunyasina hosgeldiniz. <br>
    Birinci paragrafimiz. <p>
    Bu da ikinci.. <p>

HTML yazarken, metnin Web programının anlayacağı şekilde gösterilebilmesi için belirteçler kullanır. Yukarıdaki örnekte:

`<title>` ve `</title>` belirteçleri, dokümanın konusunu gösterir.

`<h1>` ve `</h1>` belirteçleri, dokümanın başlığını tanımlar. `<p>` belirteci, paragraf tanımlar.

Tüm HTML belirteçleri, küçüktür işareti (< ), belirteç ismi ve büyüktür işaretinden (> ) oluşur. Genellikle her belirtecin <h1> ve </h1> örneklerindeki gibi bir çifti olur ve sondaki belirtecin ismi önüne '/' karakteri gelir. Yukarıdaki örnekte <h1> , Web programına 1 numaralı başlık formatında yazmasını, </h1> ise bu formatı kapatmasını söyler. <p> belirteci istisna bir durumdur ve </p> olarak kapatılmaz.

Her HTML sayfasının ile ayrılan bir konusu olmak zorundadır. Konular sayfadan bağımsız olarak ekranın en üstüne basılır.

    <title> Sayfamin konusu </title>

HTML, 1'den 6'ya kadar numaralanmış 6 çeşit başlık destekler. Başlıklar normal karakterlerden daha büyük ve kalın yazılırlar. Temel olarak,

    <Hy> Sayfamin basligi </Hy>

olarak tanımlanmış bir belirteçte y, 1 ile 6 arası bir değer alabilir. Y sayısı arttıkça yazıtipinin büyüklüğü azalır. Pek çok uygulamada, sayfanın konusu ile başlığını aynı tutabilirsiniz.

Diğer kelime işlemcilerdekinin aksine, HTML dokümanlarında programcı özel bir 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. Aşağıdaki örnekte, HTML kaynak kodunda iki satır olmasına karşın, WWW tarayıcı bunu algılamaz ve ekranda tek satır olarak görüntüler. Bir html tarayıcı satır sonlarını ve boş satırları gözardı edeceğinden, paragrafları mutlaka <p> belirteci ile ayırmalısınız.

    HTML'ye hosgeldiniz.
    Bu ilk paragraf

Satır sonu belirteci : Paragraf, iki satır arasında bir satır boşluk bırakırken, satır sonu belirteci kullanıldığı kursör alta geçer ve takip eden tüm metin,boşluk bırakmadan bir alttan yazılır.

    Bu ilk satir. <br>
    Ikinci satir daha uzun. <br>
    Ama bu bir paragraf sonu.. <p>

Paragraflar ortalanırken <center> ve </center> belirteçlerinden yararlanılır. Ortalanması istenen tüm metin, bu iki belirtecin arasına yazılır.

    <center>
    Linux Sayfasi
    </center>

HTML'nin en büyük özelliklerinden birisi, tek sayfa ile sınırlı kalmamasıdır. Böylece bir sayfadan diğerine bağlantı yapılabilir. HTML'in bu görevini yerine getirmesini sağlayan belirteç <a>'dır. Dökümanınızdan başka dokümana bağlantı yapabilmek için:

- Belirteci girin. (Kısaca ilk satıra <a yazın)
- Hangi dokümana geçiş yapmak istiyorsanız, ismini yazın. (HREF="dosyaismi")
- Bu dokümanı ekranda hangi isimle göstermek istediğinizi belirtin.
- Belirteci kapatın. </a>

Kısa bir örnekle açıklayalım:

    <a href="internet.html"> İnternet nedir? </a>

Ekranda "İnternet Nedir?" yazısı belirecek ve kullanıcıdan burayı seçmeyi bekleyecektir. Kullanıcı fare ile bu yazı üzerine tıkladığında ise program kontrolü yine bir HTML dosya olan internet.html dosyasına bırakacaktır. Bu durumda bulunduğunuz dizinden farklı bir dizindeki dosyaya bağlantı yapmak isterseniz, o dosyanın ait olduğu dizini yazmak zorundasınız. Buna göre `linux/shells/bash.html` dosyasını kullanabilmek için

    <a href="linux/shells/bash.html"> Bash </a>

şeklinde bir belirteç yazmak gerekir.

HTML'in bir diğer özelliği ise, tek bir makinaya bağımlı kalmadan diğer İnternet servisleriyle bağlantı kurabilmesidir. Bunun için URL (Uniform Resource Locator) kullanılır. URL, http, gopher, news ve telnet gibi alt hizmet birimleri olabilir. Kullanımı şu şekildedir :

    URL-ismi://makina-ismi[:port]/dizinler/dosya-ismi

Burada URL,

- file, Kendi sisteminizde bir dosyaya,
- http, Bir WWW sunucusu üzerindeki dosyaya,
- gopher, Gopher sunucusu üzerindeki dosyaya,
- news, Bir UseNet haber grubundaki dosyaya,
- WAIS, WAIS sunucusu üzerindeki dosyaya

erişmek için kullanılır. Örneğin sayfanızdan Linux Kullanıcıları Grubu'nun ana web sayfasına ulaşmak için :

`<a href=http://www.linux.org.tr/> Linux Kullanıcıları Grubu </a>`

satırını web dosyasında girmek gerekir. Port numarası genellikle yazılmaz. Size aksi durum belirtilmedikçe, kullanmanıza gerek yoktur.

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.

Düz liste yaratmak 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 dokümanlara bağlantılar, ve diğer belirteçler kullanabilirsiniz.

Numaralı listeler, düz listelerden farklı olarak, <ul> belirteci yerine <ol> kullanırlar. Ekranda liste elemanlarının başında 1'er artan numaralar görünür. Aşağıdaki HTML kodu,

    <ol>
    <li> Linux
    <li> Digerleri :-)
    </ol>

ekrana şunları yazar:

1.
  Linux İşletim Sistemi
2.
  Diğerleri :-)

HTML'de, programda yazıldığı gibi ekrana çıktı vermeyi sağlayan komutlar <pre> ve </pre> belirteç çiftleridir. Bunlar kullanıldığı zaman tüm metin, yazıldığı gibi ekranda görünür. Aşağıdaki satırlar,

    <pre>
      PATH=.:~/bin/:$PATH
      export PATH
      # Set up the terminal:
             stty erase "^?" kill "^U" intr "^C" eof "^D"
             stty hupcl ixon ixoff
      date '+Tarih :%D'
      TERM=vt100
    </pre>

ekranda şu şekilde görünür :

        PATH=.:~/bin/:$PATH
        export PATH
        # Set up the terminal:
               stty erase "^?" kill "^U" intr "^C" eof "^D"
               stty hupcl ixon ixoff
        date '+Tarih :%D'
        TERM=vt100

Eğer Web sayfalarını gezerken grafik destekleyen bir program (Mosaic, Netscape) kullanıyorsanız, ekranda resimlerin, arkaplanların ve hatta animasyonların olduğunu farketmişsinizdir. Bu resimler genellikle X Bitmap (XBM) , GIF, BMP veya JPG formatlı olurlar ve dosyaya görsel bir çekicilik katarlar. Buna rağmen aynı ekranda çok miktarda resim kullanmaktan sakınmalıdır, çünkü bu durumda resimler kullanıcıya daha geç bir sürede ulaşır.

Ekranda resim görüntülemek için,

    <img src="resmin bulundugu dizin">

demeniz yeterlidir. Burada, nasıl HTML dokümanların hepsi `.html` ile bitiyorsa, tüm resim dosyalarının sonu da `.xbm`, `.gif`, `.bmp` veya `.jpg` ile bitmelidir.

Şimdi küçük bir örnek hazırlayalım. 2#2 dizininde iken `public_html` isimli bir dizin açın ve buraya girin. İstediğiniz örnek bir HTML dosyası yaratıp `index.html` isminde kaydedin.

    $ cd ~
    /home/gorkem
    $ mkdir public_html
    $ cd public_html
    $ ls index.html
    index.html

Ardından aşağıdaki satırları yazın. Burada web için kullanılan tarayıcı lynx'tir. Eğer X ortamında çalışıyorsanız Netscape de kullanabilirsiniz.

    $ lynx http://itu.linux.org.tr/~ilker

Hazırladığınız web sayfası ekrana gelecektir.

Next: Form Hazırlama (CGI) Up: HTML ve CGI Previous: HTML ve CGI