Web Programcılığı




 


 

Bu doküman, Web programcıları için, mosaic, netscape, lynx gibi web programlarını kullanabildikleri gözönüne alınarak yazılmıştır. Yazının amacı yeni başlayanlara ve HTML programlama hakkında az bilgisi olanlara yol göstermektir.


Kısaltmalar


WWW


World Wide Web


SGML


Standard Generalized Markup Language


HTML


Hypertext Markup Language


VRML


Virtual Reality Modeling Language


HTML dökümanın hazırlanması


Temel bir döküman aşağıdaki gibi yazılabilir:

 
   < title> Burası konunun yazılacağı yer </title> 
   < h1> Bu, 1 numaralı başlık </h1> 
   HTML dünyasına hoşgeldiniz. &ltbr>
   Birinci paragrafımız. &ltp>
   Bu da ikinci.. &ltp> 

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, dökümanın konusunu gösterir.

  • < h1> ve < /h2> belirteçleri, dökü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 ayraç 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.


Not1: HTML belirteçleri “case sensitive”dir..? < title > , < tITLE> veya < tiTlE> belirteçleri aynı görevi yaparlar.ında


Temel Belirteçler


Konular


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

  
   &lttitle> Sayfamın konusu </title> 

Başlıklar


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,

  
   &ltHy> Sayfamın başlığı </Hy> 

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


Paragraflar


Diğer kelime işlemcilerdekinin aksine, HTML dökü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, kaynak kodunda iki satır olmasına karşın, WWW “browser” bunu algılamaz ve ekranda tek satır olarak görüntüler. Bir “browser” satır sonlarını ve boş satırları gözardı edeceğinden, paragrafları mutlaka < p> belirteci ile ayırmalısınız.

 
   HTML’ye hoşgeldiniz &ltbr>
   Bu ilk paragraf &ltp>

Buna göre aşağıdaki örnek, okuduğunuz dosyanın başındaki örnekle aynı çıktıyı verir.

 
   &lttitle> Burası konunun yazılacağı yer </title> 
   &lth1> Bu, 1 numaralı başlık </h1> 
   HTML dünyasına hoşgeldiniz. Birinci paragrafımız. &ltp> 
   Bu da ikinci.. &ltp> 

HTML dosyalarının okunurluğunu artırmak için başlıklar ile karşılık gelen belirteçleri aynı satirda, paragraf düzenleyen komutlar ise satır sonunda olmalıdır.


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 satır. &ltbr>  
   İkinci satır daha uzun. &ltbr>
   Ama bu bir paragraf sonu..&ltp> 

Sayfanın ortalanması


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

 
   &ltcenter> 
   In practical terms, HTML is a collection of styles.
   </center> 

Bağlantılar


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ç &lta> ‘dir Dökümanınızdan başka dökümana bağlantı ypabilmek için:



  1. Belirteci girin.
    (Kısaca ilk satıra &lta yazın)

  2. Hangi dökümana geçiş yapmak istiyorsanız, ismini yazın.
    HREF=”dosyaismi

  3. Bu dökümanı ekranda hangi isimle göstermek istediğinizi belirtin.

  4. Belirteci kapatın.
    </a>

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

 
   &lta 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 “languages/Fortran/introduction.html” dosyasını kullanabilmek için

 
   &lta href=”languages/Fortran/introduction.html” >
   Fortran diline giriş </a>

şeklinde bir belirteç yazmak gerekir.


Kaynak Bağlantıları


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 olabileceği gibi telnet de olabilir. Kullanım “sentaksı”,


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 newsgroup’taki dosyaya,
WAIS : WAIS sunucusu üzerindeki dosyaya


erişmek için kullanılır.


Port numarası, genellikle yazılmaz. Size aksi durum belirtilmedikçe, kullanmanıza gerek yoktur.
Siz de okuduğunuz dosyaya ulaşmak için,

 
 
   &lta href=http://compclup.ceng.metu.edu.tr/web.lat5.html>

yazdınız.


Halihazır döküman bölgeleri bağlantıları


Bir metin üzerinde belirli bölgelere ulaşmak için yine belirteçler kullanılabilir. Diyelim ki bir döküman hazırladınız ve bunu kullanıcının erişebileceği 2 parçaya ayırmak istiyorsunuz. Yapmanız gereken, bu üç parçanın isimlerini belirlemek ve dökümanda yerlerini ayırmaktır. Örnekte,

 
   &lta href=”bu_dökümanın#1.parça”> Buradan ilk bölüme gidin </a> 
   &lta href=”bu_dökümanın#2.parça”> Buradan ikinci bölüme </a>
   &lta name=”1.parça”> İşte ilk bölüm>
   İlk bölüm ile ilgili metinler burada… </br>
   &lta name=”2.parça”> İşte ikinci bölüm>
   İkinci bölüm ile ilgili metiner burada.. </bt>

&lta href= ile başladığınız belirteçte önce döküman ismini, sonra da dökümanın içindeki parça ismini girmelisiniz. &lta name= belirtecinde ise o belirteçten itibaren parçanın başladığını anlıyoruz.


Kullanıcı ilk bölüme gitmek için fareyi kullandığında ekranda ,

 
    İlk bölüm ile ilgili bilgiler burada  

ifadesini görecektir.


Diğer döküman bölgelerine bağlantı


Yukarıdaki örnek doğrultusunda farklı olarak tek yapılması gereken, döküman ismine, hangi dökümana bağlantı yapmak istiyorsak o ismi vermektir.

 
   &lta href=”diğer_döküman_ismi#parça_ismi” başka dökümana geçiş</a>
   &lta name=parça_ismi>

Ana komutlar


Listeler


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 listeler


Düz liste yaratmak için,



  1. Listeye başlamak için belirteç açılır.
    &ltul>

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

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

Örnek olarak,

 
    &ltul> 
    &ltli> Elma
    &ltli> Armut 
    </ul> 

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



  • Elma

  • Armut


&ltli> belirteçleri içinde paragraflar, diğer dökümanlara bağlantılar, ve diğer belirteçler kullanabilirsiniz


Numaralı Listeler


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

 
    &ltol>
    &ltli> Linux İşletim Sistemi
    &ltli> Unix İşletim Sistemi
    </ol>

ekrana şunları yazar:



  1. Linux İşletim Sistemi

  2. Unix İşletim Sistemi

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, &ltdt> ile belirtilir, &ltdd> ile başlık altına metin girilir. Tüm liste, &ltdl> ile </dl> arasına alınır.

 
    <DL>
    <DT> NCSA
    <DD> NCSA, the National Center for Supercomputing Applications,
         is located on the campus of the University of Illinois
         at Urbana-Champaign. NCSA is one of the participants in the
         National MetaCenter for Computational Science and Engineering.
    <DT> Cornell Theory Center
    <DD> CTC is located on the campus of Cornell University in Ithaca,
         New York. CTC is another participant in the National MetaCenter
         for Computational Science and Engineering.
    </DL>

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


NCSA


NCSA, the National Center for Supercomputing Applications, is located on the campus of the University of Illinois at Urbana-Champaign. NCSA is one of the participants in the National MetaCenter for Computational Science and Engineering.


Cornell Theory Center


CTC is located on the campus of Cornell University in Ithaca, New York. CTC is another participant in the National MetaCenter for Computational Science and Engineering.


İçiçe Listeler


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

 
   &ltul>
   &ltli> İstanbul’un büyük semtleri
       &ltlu> 
       &ltli> Beyoğlu
       &ltli> Taksim 
       &ltli> Bakırköy
       </lu>
   &ltli> Ankara’nın belli başlı yerleşim birimleri 
       &ltlu>
       &ltli> Kızılay
       &ltli> Ulus
       </lu>
   </lu>

Ekrandaki görüntüsü,



  • İstanbul’un büyük semtleri


    • Beyoğlu

    • Taksim

    • Bakırköy

  • Ankara’nın belli başlı yerleşim birimleri


    • Kızılay

    • Ulus

Formatlı Metinler


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

 
   &ltpre>
    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

HTML’de yorum satırları


HTML dokumanda yorumlayıcı tarafından gözönüne alınmayacak olan yorum satırları <!– ve –> belirteçleri arasına alınır. Bu sayede programı yazmayı kolaylaştıracak yorumlar eklenebilir. Örneğin,

 
   <!–
   karakterler..
   karakterler…
   –>

veya

 
   <!– karakterler… —
   — karakterler.. —
   >

Özel karakterler


Web programı, birtakım karakterleri ekranda göstermek için farklı bir format kullanır. Aşağıda, bu tür farklı karakterleri göstermek için girilmesi gereken kodlar verilmiştir.


&lt;


< (küçüktür)


&gt;


> (büyüktür)


&amp;


& (ve)


&quot;


” (tırnak)


Resim Görüntüleme


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, 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,

 
   &ltimg src=”resmin bulunduğu dizin”> 

demeniz yeterlidir. Burada, nasıl HTML dökümanların hepsi .html ile bitiyorsa, tüm resim dosyalarının sonu da .xbm , .gif veya .jpg ile bitmelidir. Özel bir durum olmadıkça görüntülenen resmin alt kısmı ile metin yanyana gelirler.

 
   &ltimg src=”../images/G.GIF”>
   Metin resmin altında .. 

Örneği, ekranda şu şekilde gösterilir:


Metin resmin altında ..


Sözkonusu metni resmin yanına veya üstüne koymak için ALIGN=TOP opsiyonunu yerleştirin.

 
   &ltimg src=”../images/G.GIF” align=top>
   Metin resmin üstünde ..

Metin resmin üstünde ..


Veya ortaya almak için ALIGN=MIDDLE kullanın.

 
   &ltimg src=”../images/G.GIF” align=bottom>
   Metin resmin yanında ..

Metin resmin yanında ..


Görüntünün orijinal formatında değişiklik yapmadan ekranda enini ve boyunu ayarlamak mümkündür. Bunun için height=sayı ve width=sayı ara belirteçleri kullanılır. “Sa


 


 


belgesi-373

Belgeci , 2280 belge yazmış

Cevap Gönderin