Web Programcılığı1

Web Programciligi



Temel bir HTML dökümani asagidaki gibi yazilabilir:


 


< title> Burasi konunun yazilacagi yer </title>


< h1> Bu, 1 numarali baslik </h1>


HTML dünyasina hosgeldiniz. <br>


Birinci paragrafimiz. <p>


Bu da ikinci.. <p>


HTML yazarken, metnin Web tarayicinin anlayacagi sekilde gösterilebilmesi için belirteçler kullanir. Yukaridaki örnekte:


25. < title> ve < /title> belirteçleri, dökümanin konusunu gösterir.


26. < h1> ve < /h1> belirteçleri, dökümanin basligini tanimlar.


27. < p> belirteci, paragraf tanimlar.


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.
Yukaridaki örnekte < h1> , Web programina 1 numarali baslik formatinda yazmasini, </h1> ise bu formati kapatmasini söyler. < p> belirteci istisna bir durumdur ve < /p> olarak kapatilmaz.


Not1: HTML belirteçleri küçük-büyük harf ayrimi yapmaz. < title > , < tITLE> veya < tiTlE> belirteçleri ayni görevi yaparlar.
Not2: Her belirtecin bir WWW “browser”inda tanimli olma zorunlulugu yoktur. Eger browser desteklemedigi bir komut ile karsilasirsa kullaniciyi uyarmadan belirteci gözardi eder.


Temel Belirteçler


Bu bölümde en sik kullanilan belirteçler kisaca anlatilacaktir.


Konular


Her HTML sayfasinin ile ayrilan bir konusu olmak zorundadir. Konular genellikle sayfadan bagimsiz olarak ekranin en üstüne basilir.


<title> Sayfamin konusu </title>


Basliklar


HTML, 1’den 6’ya kadar numaralanmis 6 çesit baslik destekler. Basliklar normal karakterlerden daha büyük ve kalin yazilirlar. Temel olarak,


<Hy> Sayfamin basligi </Hy>


olarak tanimlanmis bir belirteçte y, 1 ile 6 arasi bir deger alabilir. Y sayisi arttikça fontun büyüklügü azalir.
Pek çok uygulamada, sayfanin konusu ile basligini ayni tutabilirsiniz.


Paragraflar


Diger kelime islemcilerdekinin aksine, HTML dökümanlarinda programci özel bir belirteç kullanmadikça bir cümle herhangi bir yerinden ayrilip kalan kismi altta görünebilir, birden fazla bos satir tek satir olarak algilanir.
Asagidaki örnekte, kaynak kodunda iki satir olmasina karsin, WWW tarayici bunu algilamaz ve ekranda tek satir olarak görüntüler. Bir tarayici satir sonlarini ve bos satirlari gözardi edeceginden, paragraflari mutlaka < p> belirteci ile ayirmalisiniz.


HTML’ye hosgeldiniz <br>


Bu ilk paragraf <p>


Buna göre asagidaki örnek, okudugunuz dosyanin basindaki örnekle ayni çiktiyi verir.


<title> Burasi konunun yazilacagi yer </title>


<h1> Bu, 1 numarali baslik </h1>


HTML dünyasina hosgeldiniz. Birinci paragrafimiz. <p>


Bu da ikinci.. <p>


HTML dosyalarinin okunurlugunu artirmak için basliklar ile karsilik gelen belirteçleri ayni satirda, paragraf düzenleyen komutlar ise satir sonunda olmalidir.


Satir sonu belirteci


Paragraf, iki satir arasinda bir satir bosluk birakirken, satir sonu belirteci kullanildigi kursör alta geçer ve takip eden tüm metin,bosluk birakmadan bir alttan yazilir.


Bu ilk satir. <br>


Ikinci satir daha uzun. <br>


Ama bu bir paragraf sonu..<p>


Sayfanin ortalanmasi


Paragraflar ortalanirken < center> ve </center> belirteçlerinden yararlanilir. Ortalanmasi istenen tüm metin, bu iki belirtecin arasina yazilir.


<center>


In practical terms, HTML is a collection of styles.


</center>


Baglantilar


HTML’nin en büyük özelliklerinden birisi, tek sayfa ile sinirli kalmamasidir. Böylece bir sayfadan digerine baglanti yapilabilir. HTML’in bu görevini yerine getirmesini saglayan belirteç <a> ‘dir Dökümaninizdan baska dökümana baglanti ypabilmek için:


28. Belirteci girin.
(Kisaca ilk satira <a yazin)


29. Hangi dökümana geçis yapmak istiyorsaniz, ismini yazin.
HREF=”dosyaismi”


30. Bu dökümani ekranda hangi isimle göstermek istediginizi belirtin.


31. Belirteci kapatin.
</a>


Kisa bir örnekle açiklayalim:


<a href=”internet.html”> Internet’ten nasil yararlanabilirim ? </a>


Ekranda “Internet’ten nasil yararlanabilirim ?” yazisi belirecek ve kullanicidan burayi seçmeyi bekleyecektir. Kullanici fare ile bu yazi üzerine tikladiginda ise program kontrolü yine bir HTML dosya olan internet.html dosyasina birakacaktir. Bu durumda bulundugunuz dizinden farkli bir dizindeki dosyaya baglanti yapmak isterseniz, o dosyanin ait oldugu dizini yazmak zorundasiniz.Buna göre “diller/Fortran/giris.html” dosyasini kullanabilmek için


<a href=”diller/Fortran/giris.html” >


Fortran diline giri? </a>


?eklinde bir belirteç yazmak gerekir.


Kaynak Baglantilari


HTML’in bir diger özelligi ise, tek bir makinaya bagimli kalmadan diger Internet servisleriyle baglanti kurabilmesidir. Bunun için URL (Uniform Resource Locator) kullanilir. URL, http,gopher, news ve telnet gibi servisler olabilir. Kullanim sekli,


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


Burada URL,


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


erismek için kullanilir.


Birkaç örnek vermek gerekirse,


<a href=http://yardim.bilkent.edu.tr> Yeni baslayanlar için yardim sayfasi </a>


Port numarasi, genellikle yazilmaz. Size aksi durum belirtilmedikçe, kullanmaniza gerek yoktur. WWW standart portu 80’dir.


Döküman içi baglantilar


Bir metin üzerinde belirli bölgelere ulasmak için yine belirteçler kullanilabilir. Diyelim ki bir döküman hazirladiniz ve bunu kullanicinin erisebilecegi 2 parçaya ayirmak istiyorsunuz. Yapmaniz gereken, bu üç parçanin isimlerini belirlemek ve dökümanda yerlerini ayirmaktir. Örnekte,


<a href=”bu_dökümanin#1.parça”> Buradan ilk bölüme gidin </a>


<a href=”bu_dökümanin#2.parça”> Buradan ikinci bölüme </a>


<a name=”1.parça”> Iste ilk bölüm


Ilk bölüm ile ilgili metinler burada… </br>


<a name=”2.parça”> Iste ikinci bölüm


Ikinci bölüm ile ilgili metiner burada.. </bt>


<a href= ile basladiginiz belirteçte önce döküman ismini, sonra da dökümanin içindeki parça ismini girmelisiniz. <a name= belirtecinde ise o belirteçten itibaren parçanin basladigini anliyoruz.


Kullanici ilk bölüme gitmek için fareyi kullandiginda ekranda ,


Ilk bölüm ile ilgili bilgiler burada


ifadesini görecektir.


Diger döküman bölgelerine baglanti


Yukaridaki örnek dogrultusunda farkli olarak tek yapilmasi gereken, döküman ismine, hangi dökümana baglanti yapmak istiyorsak o ismi vermektir.


<a href=”diger_döküman_ismi#parça_ismi”> baska dökümana geçis</a>


Ana komutlar


Listeler


Dökümanlarin göze hos görünmelerini saglamak amaciyla listeler yaygin olarak kullanilir. HTML, pek çok liste çesidi destekler. Bunlar, düz listeler, numarali listeler, tanimli listeler ve içiçe listelerdir.


Düz listeler


Düz liste yaratmak için,


1. Listeye baslamak için belirteç açilir.
<ul>


2. Liste elemanlarini teker teker girerken basina <li> belirteci girilir. Kapatmak için </li> belirtecine gerek yoktur.


3. Listeyi bitirmek için belirteç kapatilir.
</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, diger dökümanlara baglantilar, ve diger belirteçleri kullanabilirsiniz.


Numarali Listeler


Numarali listeler, düz listelerden farkli olarak, <ul> belirteci yerine <ol> kullanirlar. Ekrandaki liste elemanlarinin basina 1’den baslayarak sayilar eklenir.
Asagidaki HTML kodu,


<ol>


<li> Linux Isletim Sistemi


<li> Linux’un destekledigi donanimlar


</ol>


ekrana sunlari yazar:


1. Linux Isletim Sistemi


2. Linux’un destekledigi donanimlar


Tanimli Listeler


Genellikle birden fazla basligi olan, her baslik altinda kisa bir metin içeren yazilar, tanimli listeler ile olusturulur. Tanimi yapilacak baslik, <dt> ile belirtilir, <dd> ile baslik altina metin girilir. Tüm liste, <dl> ile </dl> arasina alinir.


<DL>


<DT> Kisisel Kullanim


<DD> Linux evinde veya isinde UNIX isletim sistemi altinda çalismak


isteyenler için ideal bir platformdur. Özellikle isi veya egitimi


sirasinda UNIX platformlar altinda çalismak, uygulamalar kullanmak


veya yazilim gelistiren kisiler kendi kisisel bilgisayarlarinda benzer


ortami yakalayabilmektedirler.


<DT> Internet Sunucusu


<DD> Linux dogrudan TCP/IP destegi ile gelmektedir. Bu yönü ile TCP/IP


temelli bilgisayar aglarinda hem istemci hem de sunucu olarak yaygin


kullanim bulmustur.


</DL>


Ekrandaki çikti su sekilde görünür:


Kisisel Kullanim


Linux evinde veya i?inde UNIX i?letim sistemi alt?nda çalismak isteyenler için ideal bir platformdur. Özellikle isi veya egitimi sirasinda UNIX platformlar altinda çalismak, uygulamalar kullanmak veya yazilim gelistiren kisiler kendi kisisel bilgisayarlarinda benzer ortami yakalayabilmektedirler.


Internet Sunucusu


Linux dogrudan TCP/IP destegi ile gelmektedir. Bu yönü ile TCP/IP temelli bilgisayar aglarinda hem istemci hem de sunucu olarak yaygin kullanim bulmustur.


Içiçe Listeler


Tüm liste çesitleri, 3’den fazla bölüm kullanmadikça içiçe yazilabilir. Örnek olarak,


<ul>


<li> Istanbul’un büyük semtleri


<lu>


<li> Beyoglu


<li> Taksim


<li> Bakirköy


</lu>


<li> Ankara’nin belli basli yerlesim birimleri


<lu>


<li> Kizilay


<li> Ulus


</lu>


</lu>


Ekrandaki görüntüsü,


Istanbul’un büyük semtleri


Beyoglu


Taksim


Bakirköy


Ankara’nin belli basli yerlesim birimleri


Kizilay


Ulus


Formatli Metinler


HTML’de, programda yazildigi gibi ekrana çikti vermeyi saglayan komutlar <pre> ve </pre> belirteç çiftleridir. Bunlar kullanildigi zaman tüm metin, yazildigi gibi ekranda görünür. Asagidaki satirlar,


<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


HTML’de yorum satirlari


HTML dokumanda yorumlayici tarafindan gözönüne alinmayacak olan yorum satirlari <!– ve –> belirteçleri arasina alinir. Bu sayede programi yazmayi kolaylastiracak yorumlar eklenebilir. Örnegin,


<!–


karakterler..


karakterler…


–>


veya


<!– karakterler…—


·       karakterler..—


>


Özel karakterler


Web programi, birtakim karakterleri ekranda göstermek için farkli bir format kullanir. Asagida, bu tür farkli karakterleri göstermek için girilmesi gereken kodlar verilmistir.


&lt;


< (küçüktür)


&gt;


> (büyüktür)


&amp;


& (ve)


&quot;


“ (tirnak)


Resim Görüntüleme


Eger Web sayfalarini gezerken grafik destekleyen bir program ( Mosaic, Netscape) kullaniyorsaniz, ekranda resimlerin, arkaplanlarin ve hatta animasyonlarin oldugunu farketmissinizdir. Bu resimler genellikle X Bitmap (XBM) , GIF, veya JPG formatli olurlar ve dosyaya görsel bir çekicilik katarlar. Buna ragmen ayni ekranda çok miktarda resim kullanmaktan sakinmalidir, çünkü bu durumda resimler kullaniciya daha geç bir sürede ulasir.


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


<img src=”resmin bulundugu dizin”>


demeniz yeterlidir. Burada, nasil HTML dökümanlarin hepsi .html ile bitiyorsa, tüm resim dosyalarinin sonu da .xbm , .gif veya .jpg ile bitmelidir. Özel bir durum olmadikça görüntülenen resmin alt kismi ile metin yanyana gelirler.


<img src=”g.gif”>


Metin resmin altinda ..


Örnegi, ekranda su sekilde gösterilir:


Metin resmin altinda ..


Sözkonusu metni resmin yanina veya üstüne koymak için ALIGN=TOP seçenegini yerlestirin.


<img src=”g.gif” align=top>


Metin resmin üstünde ..


Metin resmin üstünde ..


Veya ortaya almak için ALIGN=MIDDLE kullanin.


<img src=”g.gif” align=bottom>


Metin resmin yaninda ..


Metin resmin yaninda ..


Görüntünün orijinal formatinda degisiklik yapmadan ekranda enini ve boyunu ayarlamak mümkündür. Bunun için height=sayi ve width=sayi ara belirteçleri kullanilir. “Sayi” degiskeni piksel olarak verilir.


<img src=”g.gif” height=20 width=30>


Tablo Hazirlama


Grafik destekli Web programlarinin tablo destegi ile çok çesitli istatistiki bilgiler, programlar, her türlü listeler ekranda derli toplu gösterilebilir. Tablo hazirlama basligi altindaki örnekler, her çesit tablonun olusturulmasi için yeterli degildir. Kullanici, istegi dogrultusunda bunlari gerçeklestirmelidir.


Ekranda tablo gösterirken, o an kullanilan pencerenin büyüklügüne ve tablo içindeki metinin genisligine göre tablonun en ve boyu degisebilir.


Tablo, satir ve sütunlardan olustugu için her hücre ayri ayri tanimlanir. Her satir ve sütun, kendi içinde baska satir ve sütunlari ihtiva edebilir.


Tablolara baslik, liste, paragraf, form, figür ve her formatta metin konabilir.


Örnegin,


<TABLE BORDER>


<TR><TH ROWSPAN=2><TH COLSPAN=2>Average


<TH ROWSPAN=2>other<BR>category<TH>Misc


<TR><TH>height<TH>weight


<TR><TH ALIGN=LEFT>males<TD>1.9<TD>0.003


<TR><TH ALIGN=LEFT ROWSPAN=2>females<TD>1.7<TD>0.002


</TABLE>


Yukaridaki örnek, asagidaki gibi görünür:


                    Average                                          other  category   Misc        


                    height     weight                                       


males        1.9            0.003                                          


females    1.7            0.002                                          


                                                                                           


Dikkat edilmesi gereken noktalar:


Öntanimli olarak, header hücreler merkeze alinir, digerleri saga yanasik olarak ekrana gelirler. Bunu engellemek için hücre için <ALIGN=.. belirteci, tüm tablo için <COLSPEC=.. belirteci kullanilir.


Hücreler bo? olabilir.


Tablodaki her satirdaki kolon sayisinin esit olmadigi durumlarda kayip hücreler tablonun sagina yerlestirilir ve içleri bos kalir.


Tablodaki satir sayisi <tr belirteci tarafindan tanimlanir.


<th> ve <tc> belirteçleri sadece <tr> belirteçleri arasinda olabilir.


Hücrelerin üstüste gelmemesine çalisin, bu gibi durumlarda hatali tablo görüntüleri ortaya çikabilir.


Tablo ebadi


Tüm tablonun uzunlugu, en genis satirla belirlenir. Kelimeler kisaltilmadigi için paragraflar <br> ile kesilmedikçe ekrana gelirler. En kisa uzunluk da en genis kelime veya resmin uzunlugu ile bagintilidir. Align


Tablonun dik halinin nasil olacagini belirler.


Left


Metini ekranin soluna yanasik yazar.


Right


Metini ekranin sagina yanasik yazar.


Colspec


Sütunlarin ebadini ayarlar. Sütunlar soldan saga, bir büyük harf ve onu izleyen bir sayi ile listelenirler (örnegin <COLSPEC=”L20 C8 L10” > ). Hücrenin ihtiva etttigi yazilari L harfi sola, R harfi saga alir. C harfi ortalamak için kullanilir. Burada belirteç seçenekleri mutlaka büyük harfle yazilir.


Border


Bu belirteç, tablo kenarlarinin ebadini kontrol etmeye yarar.
<table border=10>


Nowrap


Programin tablo içinde paragraflari otomatik olarak kesmemesi için kullanilir.Böylece kullanici istedigi yerde <br> belirtecini kullanabilir.


Tablo Örnekleri


Temel bir 3X2 tablo


A  B  C     


D  E  F      


<table border>


<tr>


<td>A</td> <td>B</td> <td>C</td>


</tr>


<tr>


<td>D</td> <td>E</td> <td>F</td>


</tr>


</table>


“Rowspan” kullanilmasi


1. hücre    2. hücre    3. hücre   


4. hücre                        5. hücre   


<table border>


<tr>


<td>1. hücre</td>


<td rowspan=2>2. hücre</td>


<td>3. hücre</td>


</tr>


<tr>


<td>4. hücre</td> <td>5. hücre</td>


</tr>


</table>


1. hücre    2. hücre    3. hücre    4. hücre   


                    5. hücre    6. hücre    7. hücre   


<table border>


<tr>


<td rowspan=2>1. hücre</td>


<td>2. hücre</td> <td>3. hücre</td>


<td>4. hücre</td>


</tr>


<tr>


<td>5. hücre</td> <td>6. hücre</td> <td>7. hücre


</td>


</tr>


</table>


“Colspan” kullanilmasi


1. hücre    2. hücre                        


3. hücre    4. hücre     5. hücre   


<table border>


<tr>


<td>1. hücre</td>


<td colspan=2>2. hücre</td>


</tr>


<tr>


<td>3. hücre</td> <td>Item 4</td> <td>5. hücre</td>


</tr>


</table>


“Colspan” ve Basliklarin birlikte kullanilmasi


Head1             Head2                 


A   B    C   D  


E    F    G   H  


<table border>


<tr>


<th colspan=2>Head1</th>


<th colspan=2>Head2</th>


</tr>


<tr>


<td>A</td> <td>B</td> <td>C</td> <td>D</td>


</tr>


<tr>


<td>E</td> <td>F</td> <td>G</td> <td>H</td>


</tr>


</table>


Yan Basliklarin kullanimi


Baslik1   1. hücre    2. hücre    3. hücre   


Baslik2   4. hücre    5. hücre    6. hücre   


Baslik3   7. hücre    8. hücre    9. hücre   


<table border>


<tr><th>Baslik1</th>


<td>1. hücre</td> <td>2. hücre</td> <td>3. hücre</td></tr>


<tr><th>Baslik2</th>


<td>4. hücre</td> <td>5. hücre</td> <td>6.hücre</td></tr>


<tr><th>Baslik3</th>


<td>7. hücre</td> <td>8. hücre</td> <td>9. hücre</td></tr> </table>


“Rowspan” ve yan basliklarin birlikte kullanilmasi


Baslik1   1. hücre    2. hücre      3. hücre      4. hücre     


                  5. hücre    6. hücre      7. hücre      8. hücre     


Baslik2   9. hücre    10. hücre    11. hücre    12. hücre   


<table border>


<tr><th rowspan=2>Baslik1</th>


<td>1. hücre</td> <td>2. hücre</td><td>3. hücre</td> <td>4. hücre</td>


</tr>


<tr><td>5. hücre</td> <td>6. hücre</td><td>7. hücre</td> <td>8. hücre</td>


</tr>


<tr><th>Baslik2</th>


<td>9. hücre</td> <td>10. hücre</td> <td>11. hücre</td> <td>12. hücre</td>


</tr>


</table>


10 birim kenari olan tablo


1. hücre    2. hücre   


3. hücre    4. hücre   


<table border=10>


<tr> <td>1. hücre</td> <td>2. hücre</td>


</tr>


<tr> <td>3. hücre</td> <td>4. hücre</td>


</tr>


</table>


 


belgesi-374

Belgeci , 2422 belge yazmış

Cevap Gönderin