|
|
İÇİNDEKİLER
HTML Nedir?
HTML dokumanlarinin tamami ASCii karakterlerden olusan ve herhangi bir editorde yazilabilen metinlerden olusmustur. UNiX uzerinde pico, vi veya sevdiginiz herhangi bir metin editoru kullanarak HTML dokumanlarinizi hazirlayabilirsiniz.Bunun disinda, kullanicinin HTML dilini bilmedigi farzedilerek Windows ve DOS altinda calisan cesitli yazilimlar hazirlanmistir. Ayrica, HTML kodunun dogrulugunu kontrol eden yardimci programlara da internet uzerinden erisilebilir.HTML, sayfalara yazacaginiz bilgilerin formatlarini (yazi rekleri, buyuklukleri, paragraf bicimleri vb gibi), sayfalar arasindaki gecis baglantilarini verebileceginiz bazi komutlar icerir.Bunu kucuk bir ornekle aciklayalim :
<HTML>
<BODY>
<CENTER><B><FONT
COLOR="#FF0000">
<FONT SiZE=+3>
Sayfama Hos Geldiniz
</FONT><br>
</FONT></B></CENTER>
<BODY>
</HTML>
Web istemcileri ile gordugumuz sayfalar aslinda, birtakim web sunucularinda tutulan, HTML kodlarindan (ayrica diger bazi yardimci elemanlardan) ve vermek istedigimiz bilgilerden olusan duz yazi (ASCii) text dosyalaridir. Soldaki kisimda gorulen < > isaretleri arasindaki komutlar HTML belirtecleri, ya da HTML komutlari olarak bilinir. HTML sayfalari <BODY> .... </BODY> arasina yazilan bilgiler/komutlarla (HTML kodu/kaynak programi) olusturulur. Yukaridaki ornekte, <CENTER>, <FONT>, <B> ornek HTML belirtecleri/komutlaridir.
HTML kodu icinde birakilan bosluklarin hicbir onemi yoktur. Asil olan, HTML belirtecleri ile verilen bicimlendirme ortamlaridir. Asagida, genel bir web sayfasi formu gorulmektedir :
<HTML>
<HEAD>
Bu alana, normal olarak web sayfasinda goruntulenmeyen bilgiler yazilir. Bunlar; sayfa basligi, anahtar kelime tanimlamalari ve sayfa iceriginde kullanilan karakter bilgisi (dil, code page vb) vb. dir.
</HEAD>
Dokuman genelinde oncelikle yuklenmesi istenen JavaScript, VBScript kodlari da bu alana yazilabilir.
<BODY>
Bu alana, dogrudan web sayfasinda gorulen her turlu duzyazi, formatlama bilgileri, diger komutlar vb. yazilir.
</BODY>
</HTML>
Netscape Navigator, Microsoft internet Explorer, Mosaic, Lynx ve Opera gibi web istemcileri ise bu HTML kodlarini yorumlayarak sonucta web sayfalarinin gorunen bicimlerini olustururlar. Dokuman formatlama ozellikleri dusunuldugunde, HTML'yi bir kelime islemci gibi dusunmek de olasi. Ancak bir farkla : HTML her bilgisayar ortaminda, her turlu web tarayicisi ile hep benzer sayfa bicimleri olusturur ve sunar. HTML'nin dokuman formatlama (bicimleme) disinda sundugu en onemli ozelliklerden biri de dokumanlar icinde ve dokumanlar arasi kurulabilecek baglantilardir yani linklerdir. Bu haliyle, dokumanlar arasi gezinmek ve bilgiler arasinda dolasmak mumkun olur. Web istemciniz ile baglandiginiz sayfanin kaynak kodunu (yani HTML halini) istemcinizin "View" menusu altindaki Page Source (Microsoft iE icin sadece "Source") ile gorebilirsiniz. Yani, Web istemcilerinizde gordugunuz sevimli sayfalar aslinda tamamen ASCii karakterlerden olusan "metin dosyalaridir".
Temel bir HTML dokumani asagidaki gibi yazilabilir:
< 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 tarayicinin anlayacagi sekilde gosterilebilmesi icin belirtecler kullanir. Yukaridaki ornekte:
* < title> ve < /title> belirtecleri, dokumanin konusunu gosterir.
* < h1> ve < /h1> belirtecleri, dokumanin basligini tanimlar.
* < p> belirteci, paragraf tanimlar.
Tum HTML belirtecleri, kucuktur isareti (< ), belirtec ismi ve buyuktur isaretinden (>) olusur. Genellikle her belirtecin < h1> ve < /h1> orneklerindeki gibi bir cifti olur ve sondaki belirtecin ismi onune ayrac gelir. Yukaridaki ornekte < h1> , Web programina 1 numarali baslik formatinda yazmasini, </h1> ise bu formati kapatmasini soyler. < p> belirteci istisna bir durumdur ve < /p> olarak kapatilmaz.
Not1: HTML belirtecleri kucuk-buyuk harf ayrimi yapmaz. < title > , <tiTLE> veya < tiTlE> belirtecleri ayni gorevi yaparlar.
Not2: Her belirtecin bir WWW "browser"inda tanimli olma zorunlulugu yoktur. Eger browser desteklemedigi bir komut ile karsilasirsa kullaniciyi uyarmadan belirteci gozardi eder.
HTML'nin Sagladigi Bazi onemli ozellikler sunlardir :
Web sayfalarindaki yazilara degisik formatlar verilebilir (koyu renk yazi, italik yazi, yazi ortalama, renk verme, degisik boyutlarda yazma gibi), Tablo, Liste, Adres Alani, sabit genislikli yazi alani vb gibi ozel bicimler olusturulabilir, Web sayfalarinda "frame" adi verilen, ve birbirleri ile iliskilendirilebilen alt-kisimlar olusturulabilir.
Degisik tipteki menu yapilari ile kullanicinin etkilesimli bir sekilde secebilecegi veri giris sistemleri kullanilabilir, ses, grafik, animasyon gibi uygulamalarin web sayfalarindan calistirilabilmesi icin gerekli ortamlar saglanabilir, Java, JavaScript, VB Script gibi programlama dilleri ile web iceriklerinin etkilesimli kullanimi icin gerekli ortamlari saglar, Sunucu tarafinda calisan CGi programlari ile web iceriklerinin etkilesimli kullanimini saglar (sifre uygulamalari, sayac uygulamalari vb gibi). HTML standartlari surekli guncellenmektedir.
Sayfa icerigi Nasil Saptanir? on Dizayn Yapmanin Getirebilecegi Avantajlar Nelerdir? Nelere Dikkat Edilmeli?
Web sayfasinda hangi bilgilerin yer alacagini saptamak ilk yapilmasi gerekenlerden. Sayfanizi hazirlamadaki amaciniz ne? Kendinizi tanitmak mi? Bir urunu mu tanitmak? Daha sonra, sayfanizi hazirlamadan once 1-2 hafta sureyle web'de gezinin yani internet diliyle sorf yapin. Sizinkine benzer icerikli sayfalarla mutlaka karsilasirsiniz. Buradan, iyi ya da kotu tasarimin ne oldugu konusunda kafanizda fikirler olusacaktir. ote yandan, normal bir internet kullanicisinin profesyonel bir grafik ya da web sayfasi tasarimsici olmasini da bekleyemeyiz.. Bu yuzden, ilk sayfaniz cok sade gorunumlu olabilir. Herzaman, web sayfasinin icerdigi bilgilerin onemli oldugunu ve sayfa duzeninin de bu bilgilere kolayca erisimi saglayacak sekilde olmasinin getirecegi kolayliklar ve avantajlari akilda bulundurun. Eger web sayfalarinizda birden cok konuyu isleyecekseniz, buna gore ilgili dosyalarin sabit diskte bulunmasi gereken dizin yapilarini saptamak ta yapilmasi gereken ilk islerden biri olmali. Her farkli sayfanin farkli bir dizinde saklanmasi sayfa organizasyonunu kolaylastirir. Belirli bir konuda hazirlanmis iyi web sayfalari, oncelikle, buraya baglanan insanlarin mumkun oldugunca zahmetsiz ve kisa yoldan isteklerine ulasmalarini saglamalidir. Ayrica, konunun disina tasmadan, verilmek istenen anlatilmalidir. Hic kimse, ekranlar dolusu uzunlukta yazilardan olusan bir siteyi okumak istemez. Bu genellikle cok sikici olur. Web sayfasinda ne kadar grafik/resim/ses vb olacagi, bu dosyalarin buyukluklerinin belirlenmesi de cok onemli. Hic kimse, baglandigi bir web sayfasinda 100lerce kilobyte tutan bir resim ya da animasyon dosyasinin yuklenmesini beklemek istemez. Web sayfalarinda resim ve animasyon kullanimi sayfanin cekiciligini arttirsa da, unutmayin ki bu sayfalara ulasacak kisilerin internet baglanti hizlari cok dusuk modem baglantisi (14.4kbps gibi) duzeyinde de olabilir.
Web Sayfasi Hazirlamak icin özel Bir Editore ihtiyacim Var Mi?
Web sayfasi hazirlamak basta tahmin edildigi gibi ya da sanildigi kadar zor degildir. Bu isi kolaylastiran bircok arac vardir. Aslinda, HTML dokumanlarinin tamami ASCii karakterlerden olusan ve herhangi bir editorde yazilabilen metinlerden olusmustur. UNiX uzerinde pico, vi; DOS altinda MSDOS Edit ya da bir windows notepad veya sevdiginiz herhangi bir metin editoru kullanarak HTML dokumanlarinizi hazirlayabilirsiniz. Yani, hic bir ozel editore ihtiyaciniz yok. Ancak, HTML format belirteclerini hatirlamak ve yazmak zor gelebilir. Yuzlerce HTML belirtecini hatirlamak profesyonel bir tasarimci icin bile gercekten cok zor. Bu sorunu gideren bazi yardimci bilgisayar programlari var. Bunlara, "HTML Editorleri" denir. HTML editorleri 2 grupta toplanir : ilk gruba giren editorler, HTML komutlarini menuler ya da bazi butonlar yardimiyla dokuman icine yazmanizi, ilgili ortamlari kolayca olusturmanizi saglar. Bu editorlerden bazilari, yazdiginiz HTML kodunun sonuclarini bir "preview" pencereden gormenizi saglarlar. Hemen hepsi, tum HTML belirtec ve komutlarinin anlatildigi yardim dosyalari sunarlar. Bazilarinda (genellikle ingilizce) heceleme (spell-check) ozelligi vardir. Hazirladiginiz sayfalarin icinde kullandiginiz resim linklerini, diger sayfa linklerini vb istatistik tablolar olarak size gosterebilirler ve bu sekilde dizaynda yardimci olurlar. ikinci tip editorlerin hemen hepsi, kolay web sayfasi hazirlama sihirbazlari (wizard) sunarlar. Boylece, bazi bosluklari doldurarak basit bir web sayfasini kolayca olusturabilirsiniz. Ayrica, hemen hemen tum editorler, hazirladiginiz sayfalari bir web sunucusuna (FTP ya da HTTP protokolu ile) gonderebilmek icin gerekli araclari (web publishing) da icerirler. Bu editorler, cogunlukla, dokumaniniz icinde kullandiginiz HTML komutlarini farkli renklerde gostererek sayfanizin olusturulma surecini kolaylastirirlar. cogu editor, bazi temel JavaScript programlari/ozellikleri ekleme ya da hareketli GiF resimlerini (animated GiF) kolayca hazirlamanizi saglayabilirler. Gorsel editorlerin sunduklari imkanlar, cogu web sayfasi hazirlama isi icin yeterli gorunmektedir. ozellikle; tablo hazirlama, frame'ler ile calisma, form hazirlama gibi yuksek oranda HTML kodlamasi gerektiren uygulamalar cok kolay yapilabilmektedir. Sayfa icinde baglanti (link) olusturma, temel formatlama ozelliklerini verme bu tip editorlerle kolaydir. ozellikle, hem gorsel editor ozelligi sunan, hem de duz HTML kodunu degistirebilmenize olanak taniyan editorler hergecen gun yayginlasmaktadir. Boylece, gorsel editorlerle yapamadiginiz bazi isleri dokmanin HTML hali uzerinde degisiklikler yaparak halledebilirsiniz.
Temel Belirtecler
En Sik Kullanilan Belirtecler:
Konular
Her HTML sayfasinin ile ayrilan bir konusu olmak zorundadir. Konular genellikle sayfadan bagimsiz olarak ekranin en ustune basilir.
<title> Sayfamin konusu </title>Basliklar
HTML, 1'den 6'ya kadar numaralanmis 6 cesit baslik destekler. Basliklar normal karakterlerden daha buyuk ve kalin yazilirlar. Temel olarak,
<Hy> Sayfamin basligi </Hy>
olarak tanimlanmis bir belirtecte y, 1 ile 6 arasi bir deger alabilir. Y sayisi arttikca fontun buyuklugu azalir.Pek cok uygulamada, sayfanin konusu ile basligini ayni tutabilirsiniz.
Paragraflar
Diger kelime islemcilerdekinin aksine, HTML dokumanlarinda programci ozel bir belirtec kullanmadikca bir cumle herhangi bir yerinden ayrilip kalan kismi altta gorunebilir, birden fazla bos satir tek satir olarak algilanir.Asagidaki ornekte, kaynak kodunda iki satir olmasina karsin, WWW tarayici bunu algilamaz ve ekranda tek satir olarak goruntuler. Bir tarayici satir sonlarini ve bos satirlari gozardi edeceginden, paragraflari mutlaka < p> belirteci ile ayirmalisiniz.
HTML'ye hosgeldiniz <br>Bu ilk paragraf <p>
Buna gore asagidaki ornek, okudugunuz dosyanin basindaki ornekle ayni ciktiyi verir.
<title> Burasi konunun yazilacagi yer </title> <h1> Bu, 1 numarali baslik </h1>
HTML dunyasina hosgeldiniz. Birinci paragrafimiz. <p>
Bu da ikinci.. <p>
HTML dosyalarinin okunurlugunu artirmak icin basliklar ile karsilik gelen belirtecleri ayni satirda, paragraf duzenleyen komutlar ise satir sonunda olmalidir.
Satir Sonu Belirteci
Paragraf, iki satir arasinda bir satir bosluk birakirken, satir sonu belirteci kullanildigi kursor alta gecer ve takip eden tum 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> belirteclerinden yararlanilir.
Ortalanmasi istenen tum metin, bu iki belirtecin arasina yazilir.
<center>
Web Sayfasi hazirliyoruz
</center>
Baglantilar
HTML'nin en buyuk ozelliklerinden birisi, tek sayfa ile sinirli kalmamasidir. Boylece bir sayfadan digerine baglanti yapilabilir. HTML'in bu gorevini yerine getirmesini saglayan belirtec <a> 'dir Dokumaninizdan baska dokumana baglanti yapabilmek icin:
1 Belirteci girin.(Kisaca ilk satira <a yazin)
2. Hangi dokumana gecis yapmak istiyorsaniz, ismini yazin.HREF="dosyaismi"
3. Bu dokumani ekranda hangi isimle gostermek istediginizi belirtin.
4. Belirteci kapatin.</a>
Kisa Bir ornekle Aciklayalim:
<a href="internet.html"> internet'ten nasil yararlanabilirim ? </a>
Ekranda "internet'ten nasil yararlanabilirim ?" yazisi belirecek ve kullanicidan burayi secmeyi bekleyecektir. Kullanici fare ile bu yazi uzerine tikladiginda ise program kontrolu 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 gore "diller /Fortran/giris.html" dosyasini kullanabilmek icin<a href="diller/Fortran/giris.html" >Fortran diline giris </a>seklinde bir belirtec yazmak gerekir.
Kaynak Baglantilari
HTML'in bir diger ozelligi ise, tek bir makinaya bagimli kalmadan diger internet servisleriyle baglanti kurabilmesidir. Bunun icin URL (Uniform Resource Locator) kullanilir. URL, http,gopher, news ve telnet gibi servisler olabilir. Kullanim sekli,
URL-ismi://makina-ismi[:port]/dizinler/dosya-ismiBurada URL,file : Kendi makinaniz uzerindeki bir dosyaya,http : Bir WWW sunucusu uzerindeki bir dosyaya,gopher : Gopher sunucusu uzerindeki bir dosyaya,news : Bir UseNet haber grubundaki bir dosyaya,
WAiS : WAiS sunucusu uzerindeki bir dosyaya
erismek icin kullanilir.
Birkac ornek vermek gerekirse,
<a href=http://yardim.bilkent.edu.tr> Yeni baslayanlar icin yardim sayfasi </a>
Port numarasi, genellikle yazilmaz. Size aksi durum belirtilmedikce,
kullanmaniza gerek yoktur. WWW standart portu 80'dir.
Dokuman ici Baglantilar
Bir metin uzerinde belirli bolgelere ulasmak icin yine belirtecler kullanilabilir. Diyelim ki bir dokuman hazirladiniz ve bunu kullanicinin erisebilecegi 2 parcaya ayirmak istiyorsunuz. Yapmaniz gereken, bu uc parcanin isimlerini belirlemek ve dokumanda yerlerini ayirmaktir. ornekte,
<a href="bu_dokumanin#1.parca"> Buradan ilk bolume gidin </a>
<a href="bu_dokumanin#2.parca"> Buradan ikinci bolume </a>
<a name="1.parca"> iste ilk bolum
ilk bolum ile ilgili metinler burada... </br>
<a name="2.parca"> iste ikinci bolum
ikinci bolum ile ilgili metinler burada.. </br>
<a> href= ile basladiginiz belirtecte once dokuman ismini, sonra da dokumanin icindeki parca ismini girmelisiniz. <a name= belirtecinde ise o belirtecten itibaren parcanin basladigini anliyoruz.
Kullanici ilk bolume gitmek icin fareyi kullandiginda ekranda ,ilk bolum ile ilgili bilgiler buradaifadesini gorecektir.
Diger Dokuman Bolgelerine Baglanti
Yukaridaki ornek dogrultusunda farkli olarak tek yapilmasi gereken, dokuman
ismine, hangi dokumana baglanti yapmak istiyorsak o ismi vermektir.
<a href="diger_dokuman_ismi#parca_ismi"> baska dokumana gecis</a>
Sayfa Arka Plan Resimleri Renkleri ve Metin icinde Renk Kullanimi
Sayfanin genel ozelliklerini sayfanin "HEAD" elemanini kapadiktan sonraki ilk
satirda BODY komutu ile belirlersiniz.
ornek:
<BODY BGCOLOR="#000000" BACKGROUND="tile.gif"
TEXT="#FFFFFF" LiNK="#FF0000" VLiNK="#AA0000"
ALiNK="#FFFFFF">
Burada BGCOLOR sayfanin arka plan rengi (#000000 = siyah); BACKGROUND arka plan resmi (kucuk bir resim koyarak bir deneyin); TEXT normal yazilarin rengi; LiNK, ALiNK ve VLiNK baglantilarla ilgilidir (bunu simdilik bosverin, asagida baglantilari aciklarken buna da deginecegim). simdi sirayla gitmek gerekirse renk referanslarina bakmamiz gerekebilir. Sayfanizin renklerini yukaridaki komutla belirleyeceksiniz, ancak istediginiz rengi secmek icin renklerin mantigini anlamaniz gerekiyor. Resimler Sadece yazilardan olusan bir web sayfasinin nasil hazirlanacagini daha once basitce anlattim. simdi sayfamiza resimlerle biraz renk katip diger sayfalara gecis yapalim. Sayfaniza resim eklemek icin <iMG SRC="images/dene.gif"> gibi bir satir yazmaniz gerektigini yazmistim. Burada dikkat edilmesi gereken bir "/" isaretinin dostakinin tersi yonde kullanilmasi, ki bunu Un*x kullananlar anlayacaktir, bir de "dene.gif" adli bir GiF formatindaki dosyanin bilgisayardaki tam yeridir. Bu arada hazir sirasi gelmisken belirteyim, web sayfalarindaki resimleri kopyalamak zor bir is degildir ve engellenemez. Tarayici programiniz (Netscape, internet Explorer vs.) ile bir sayfaya baglandiktan sonra herhangi bir resmin uzerine farenizin sag tusu ile tikarsaniz bir menu ile karsilasirsiniz. Buradan "Save image as..." ya da "Save picture as" secenegini tiklarsaniz o resmi kopyalayabilirsiniz. Bu sekilde bircok yaygin kullanilan resimleri sayfaniza ekleyebilirsiniz. Ama tabii insanlarin emegine saygi gostermeye dikkat edin... Donelim teknige. DENE.GiF adli bir resminiz olsun. Bunu sayfanizda gostermek istiyorsunuz. Eklemek istediginiz dosyanin adi da "resim.html" olsun. simdi oncelikle DENE.GiF dosyasini resim.html dosyasinin bulundugu dizine (directory ya da folder) kopyalayin. Sonra da resim.html dosyasina <iMG SRC="DENE.GiF"> yazin. iste web sayfaniza resim eklediniz bile. Eger resim cikmadiysa lutfen buraya tiklayin. Resimlerle ilgili secenekleri yazayim ki bu komutu verimli olarak kullanabilin. Tum seceneklerin kullanildigi bir iMG komutu ornegi su sekildedir:<iMG SRC="images/dene.jpg" BORDER=2 WiDTH=20 HEiGHT=35 ALT="Bu deneme adli resim" ALiGN="LEFT" LOWSRC="images/dene-dusuk-cozunurluk.gif"> Burada bastan itibaren aciklamaya baslayayim ancak unutmayin ki yukardaki seceneklerin hepsini birden yazmak zorunda degilsiniz. "SRC" seceneginde resim dosyasini yazacaginizi soylemistim. "BORDER" secenegi ile resminize cerceve verebilirsiniz. Bu arada sunu da belirteyim; eger resminiz ile baska bir sayfaya baglanti yaparsaniz (yani <A HREF...> <iMG... > </A> seklinde) otomatik olarak 1 pixel kalinliginda bir cerceve belirecektir. Bunu engellemek icin cerceve kalinligini 0 yapabilirsiniz (BORDER=0). "WiDTH" ve "HEiGHT" ile resimlerinizin boyutlarini degistirebilirsiniz. Ancak resim kalitesi dusebilir bu durumda..."ALT" ile resminize alternatif bir yazi koyabilirsiniz. Bu yazi herhangi bir nedenden dolayi resim gorunmediginde gorunecektir. Butun resimlerinize bir alternatif yazi yazmayi aliskanlik haline getirmelisiniz. "ALiGN" secenegi resmin yaziya gore konumunu belirtir. Eger "LEFT" yazarsaniz resim sola yanasacak ve "iMG" komutundan sonra yazilanlar resim bitene kadar resmin soluna yazilacaktir. Ancak resim bitmeden yazinin resmin solundan kurtulmasini istiyorsaniz <BR CLEAR="LEFT"> yazmalisiniz. Burada "LEFT" ya da "RiGHT" kullanabilirsiniz.
"LOWSRC" biraz daha ileri duzey bir komut oluyor ve bu komutu gercek anlaminda kullanmak icin grafik tasarimindan da anlamaniz gerekli. Byte olarak cok yer kaplayan resimleri sayfaniza koydugunuzda, disaridan baglanan bir kisi o resmi gormek icin bekleyecektir (Normal olarak:)) Bu durumda daha az yer kaplayan herhangi bir resmi "LOWSRC" ile ayni yere yerlestirebilirsiniz. Boylece sayfaniza baglanan kisi buyuk resmin gelmesini beklerken bosluk yerine daha mutevazi bir resimle karsilasir. Ancak burada dikkat edilmesi gereken nokta bu iki resmin boyutlarinin (yani eni ve boyu) ayni olmasidir.
Renk Referansi
Gerek yazilara renk verirken, gerekse sayfanin ozelliklerini tanimlarken bazi renkler tanimlanir. Bu renklerin nasil tanimlandigini anlamaniz icin once renklerden biraz bahsedelim. Web sayfanizdaki renkler RGB modunda tanimlanir. Yani her renk kirmizi, yesil ve mavinin karisimindan olusur. 256 ton kirmizi, yesil ve mavimiz var. Bunlari cesitli oranlarda karistirarak renkleri elde ediyoruz. Aslinda bilgisayardaki bircok programda bu yontem kullanilir. ornegin
255,0,0 kirmizi rengini verecektir. (0-255 arasi 256 adet ton var). Ya da
0,255,0 yesildir. Her zaman renkler RGB (Red-Green-Blue) sirasinda yazilir.
HTML'de ise bu renkler 16'lik sayi sisteminde tanimlanir. 16'lik sistemde iki haneli bir sayi 256 farkli deger alabilir. (00 - FF arasi). 16'lik sayi sisteminde rakamlar:0 1 2 3 4 5 6 7 8 9 A B C D E F
dir. Yani 10'luk bildigimiz sayi sistemindeki rakamlar nasil0 1 2 3 4 5 6 7 8 9
den olusuyorsa 16'lik sayi sisteminde rakamlar da 0 – F arasidir.
Renkler tanimlanirken kirmizi, yesil ve mavi iki haneli 16'lik sayilar olarak;yanyana yazilir. FF 256 renge, 00 ise 0 renge karsilik gelir. Yani kirmizi rengini tanimlamak istersekkirmizidan 256 renk almali, mavi ve yesilden ise hic almamaliyiz. Bu durumda #FF0000 kodlamasini yapacagiz. ornek olarak birkac ana renk:
#FFFFFF Beyaz
#000000 Siyah
#FF0000 Kirmizi
#00FF00 Yesil
#0000FF Mavi
#FFFF00 Sari
#FF00FF Magenta
#00FFFF Cyan
Baska renkleri de deneme yanilmayla elde edebilir ya da bunun icin cesitli programlardan faydalanabilirsiniz. Renklerin koyulugu ile oynamanin da bir mantigi var. Mesela kirmizi rengi size cok parlak geldi ve koyulastirmak istiyorsunuz. Bu durumda kirmizi'nin miktarini azaltacaksiniz (Kirmiziyi azalttikca renk siyaha yaklasacaktir mantiken). Yani #AA0000 koyu bir kirmizi olacaktir. Eger kirmizinin rengini acmak ve soluklastirmak istiyorsaniz kirmiziyi sabit tutup mavi ve yesili arttirmaniz gerekecektir. Bu durumda da mantiken rengi beyaza yaklastirdiginizdan renk soluklasacaktir.
ornek Sayfa
simdi yukarida ogrendiklerimizi uygulayacagimiz bir ornek sayfa hazirlayalim.
Adim adim sunlari gerceklestirin:
1.oncelikle bir text editoru ile (Windows 95 ve Windows NT icin Notepad; Linux,
AiX, iRiX, SCO vb. unix benzeri isletim sistemi icin vi, pico, joe) bir dosya
acin.
2.Bu dosyaya asagidakileri yazin. Yukaridaki komutlari kullanarak istediginiz diger yazilari da ekleyebilirsiniz:
<HTML>
<HEAD>
<TiTLE>Deneme Sayfasi</TiTLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<H1 ALiGN=CENTER>Deneme sayfasi</H1>
<B>Bu bir deneme sayfasidir ve ben kalin (Bold) yazi yaziyorum.
<i>su anda yazi kalin ve italik oldu</i>.</B>simdi ise normal yaziyor.
<HR WiDTH=80% SiZE=2>
<FONT COLOR="#FF0000" SiZE=5>Kirmizi ve
Buyuk</FONT>
<P ALiGN=RiGHT>
Bu paragraf saga dayali olarak yazilmistir. <BR>
Satir basi yapildiginda bile saga yanasik yazar
</P>
</BODY>
</HTML>
Ana Komutlar
Listeler
Dokumanlarin goze hos gorunmelerini saglamak amaciyla listeler yaygin olarak kullanilir. HTML, pek cok liste cesidi destekler. Bunlar, duz listeler, numarali listeler, tanimli listeler ve icice listelerdir.
Duz Listeler
Duz liste yaratmak icin,
1. Listeye baslamak icin belirtec acilir.
<ul>
2. Liste elemanlarini teker teker girerken basina <li> belirteci
girilir. Kapatmak icin </li> belirtecine gerek yoktur.
3. Listeyi bitirmek icin belirtec kapatilir.
</ul>
ornek olarak,
<ul>
<li> Elma
<li> Armut
</ul>
ornek, ekranda su sekilde gorulur :
* Elma
* Armut
<li> belirtecleri icinde paragraflar, diger dokumanlara baglantilar, ve diger belirtecleri kullanabilirsiniz.
Numarali Listeler
Numarali listeler, duz 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 iceren yazilar, tanimli listeler ile olusturulur. Tanimi yapilacak baslik, <dt> ile belirtilir, <dd> ile baslik altina metin girilir. Tum liste,<dl> ile </dl> arasina alinir.
<DL>
<DT> Kisisel Kullanim
<DD> Linux evinde veya isinde UNiX isletim sistemi altinda calismak isteyenler icin ideal bir platformdur. ozellikle isi veya egitimi sirasinda UNiX
platformlar altinda calismak, uygulamalar kullanmak veya yazilim gelistiren kisiler kendi kisisel bilgisayarlarinda benzer ortami yakalayabilmektedirler.
<DT> internet Sunucusu
<DD> Linux dogrudan TCP/iP destegi ile gelmektedir. Bu yonu ile TCP/iP temelli bilgisayar aglarinda hem istemci hem de sunucu olarak yaygin kullanim bulmustur.
</DL>
Ekrandaki cikti su sekilde Gorunur:
Kisisel Kullanim
Linux evinde veya isinde UNiX isletim sistemi altinda calismak isteyenler icin ideal bir platformdur. ozellikle isi veya egitimi sirasinda UNiX platformlar altinda calismak, uygulamalar kullanmak veya yazilim gelistiren kisiler kendi kisisel bilgisayarlarinda benzer ortami yakalayabilmektedirler. internet Sunucusu Linux dogrudan TCP/iP destegi ile gelmektedir. Bu yonu ile TCP/iP temelli bilgisayar aglarinda hem istemci hem de sunucu olarak yaygin kullanim bulmustur.
icice Listeler
Tum liste cesitleri, 3'den fazla bolum kullanmadikca icice yazilabilir.ornek olarak,
<ul>
<li> istanbul'un buyuk semtleri
<lu>
<li> Beyoglu
<li> Taksim
<li> Bakirkoy
</lu>
<li> Ankara'nin belli basli yerlesim birimleri
<lu>
<li> Kizilay
<li> Ulus
</lu>
</lu>
Ekrandaki goruntusu,
* istanbul'un buyuk semtleri
Beyoglu
Taksim
Bakirkoy
* Ankara'nin belli basli yerlesim birimleri
Kizilay
Ulus
Formatli Metinler
HTML'de, programda yazildigi gibi ekrana cikti vermeyi saglayan komutlar <pre> ve </pre> belirtec ciftleridir. Bunlar kullanildigi zaman tum metin, yazildigi gibi ekranda gorunur. 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 su sekilde gorunur :
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 gozonune alinmayacak olan yorum satirlari
<!-- ve --> belirtecleri arasina alinir. Bu sayede programi yazmayi
kolaylastiracak yorumlar eklenebilir. ornegin,
<!--
karakterler..
karakterler...
-->
veya
<!-- karakterler... --
-- karakterler.. --
>
ozel Karakterler
Web programi, birtakim karakterleri ekranda gostermek icin farkli bir format kullanir. Asagida, bu tur farkli karakterleri gostermek icin girilmesi gereken kodlar verilmistir.
< < (kucuktur)
> > (buyuktur)
& & (ve)
" " (tirnak)
Resim Goruntuleme
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 gorsel bir cekicilik katarlar. Buna ragmen ayni ekranda cok miktarda resim kullanmaktan sakinmalidir, cunku bu durumda resimler kullaniciya daha gec bir surede ulasir.Ekranda Resim Goruntulemek icin,<img src="resmin bulundugu dizin">demeniz yeterlidir. Burada, nasil HTML dokumanlarin hepsi .html ile bitiyorsa, tum resim dosyalarinin sonu da .xbm , .gif veya .jpg ile bitmelidir. ozel bir durum olmadikca goruntulenen resmin alt kismi ilemetin yanyana gelirler.
<img src="g.gif">
Metin resmin altinda ..
ornegi, ekranda su sekilde gosterilir:
[image] Metin resmin altinda ..
Sozkonusu metni resmin yanina veya ustune koymak icin ALiGN=TOP seceneginiyerlestirin.
<img src="g.gif" align=top>
Metin resmin ustunde ..
[image] Metin resmin ustunde ..
Veya ortaya almak icin ALiGN=MiDDLE kullanin.
<img src="g.gif" align=bottom>
Metin resmin yaninda ..
[image] Metin resmin yaninda ..
Goruntunun orijinal formatinda degisiklik yapmadan ekranda enini ve boyunu ayarlamak mumkundur. Bunun icin height=sayi ve width=sayi ara belirtecleri kullanilir. "Sayi" degiskeni piksel olarak verilir.
<img src="g.gif" height=20 width=30>
[image]
Tablo Hazirlama
Grafik destekli Web programlarinin tablo destegi ile cok cesitli istatistiki bilgiler, programlar, her turlu listeler ekranda derli toplu gosterilebilir. Tablo hazirlama basligi altindaki ornekler, her cesit tablonun olusturulmasi icin yeterli degildir. Kullanici, istegi dogrultusunda bunlari gerceklestirmelidir.Ekranda tablo gosterirken, o an kullanilan pencerenin buyuklugune ve tablo icindeki metinin genisligine gore tablonun en ve boyu degisebilir.Tablo, satir ve sutunlardan olustugu icin her hucre ayri ayri tanimlanir. Her satir ve sutun, kendi icinde baska satir ve sutunlari ihtiva edebilir.Tablolara baslik, liste, paragraf, form, figur ve her formatta metin konabilir.ornegin,
<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 ornek, asagidaki gibi gorunur:
Average other Misc
height weight category
males 1.9 0.003
females1.7 0.002
Dikkat Edilmesi Gereken Noktalar:
* ontanimli olarak, header hucreler merkeze alinir, digerleri saga yanasik olarak ekrana gelirler. Bunu engellemek icin hucre icin <ALiGN=.. belirteci, tum tablo icin <COLSPEC=.. belirteci kullanilir.* Hucreler bos olabilir.* Tablodaki her satirdaki kolon sayisinin esit olmadigi durumlarda kayip
hucreler tablonun sagina yerlestirilir ve icleri bos kalir.* Tablodaki satir sayisi <tr> belirteci tarafindan tanimlanir.* <th> ve <tc> belirtecleri sadece <tr> belirtecleri arasinda olabilir.* Hucrelerin ustuste gelmemesine calisin, bu gibi durumlarda hatali tablo goruntuleri ortaya cikabilir.
Tablo Ebadi
Tum tablonun uzunlugu, en genis satirla belirlenir. Kelimeler kisaltilmadigi
icin paragraflar <br> ile kesilmedikce 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.
Border:Bu belirtec, tablo kenarlarinin ebadini kontrol etmeye yarar. <table border=10>
Nowrap:Programin tablo icinde paragraflari otomatik olarak kesmemesi icin kullanilir.Boylece kullanici istedigi yerde <br> belirtecini kullanabilir.
Tablo ornekleri
Temel bir 3X2 tablo
AB C
DE 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. hucre 3. hucre
2. hucre
4. hucre 5. hucre
<table border>
<tr>
<td>1. hucre</td>
<td rowspan=2>2. hucre</td>
<td>3. hucre</td>
</tr>
<tr>
<td>4. hucre</td> <td>5. hucre</td>
</tr>
</table>
2. hucre 3. hucre 4. hucre
1. hucre
5. hucre 6. hucre 7. hucre
<table border>
<tr>
<td rowspan=2>1. hucre</td>
<td>2. hucre</td> <td>3. hucre</td>
<td>4. hucre</td>
</tr>
<tr>
<td>5. hucre</td> <td>6. hucre</td> <td>7. hucre
</td>
</tr>
</table>
"Colspan" Kullanilmasi
1. hucre2. hucre
3. hucre4. hucre 5. hucre
<table border>
<tr>
<td>1. hucre</td>
<td colspan=2>2. hucre</td>
</tr>
<tr>
<td>3. hucre</td> <td>item 4</td> <td>5. hucre</td>
</tr>
</table>
"Colspan" ve Basliklarin birlikte kullanilmasi
Head1Head2
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
Baslik11. hucre 2. hucre 3. hucre
Baslik24. hucre 5. hucre 6. hucre
Baslik37. hucre 8. hucre 9. hucre
<table border>
<tr><th>Baslik1</th>
<td>1. hucre</td> <td>2. hucre</td> <td>3. hucre</td></tr>
<tr><th>Baslik2</th>
<td>4. hucre</td> <td>5. hucre</td> <td>6.hucre</td></tr>
<tr><th>Baslik3</th>
<td>7. hucre</td> <td>8. hucre</td> <td>9. hucre</td></tr> </table>
"Rowspan" ve yan basliklarin birlikte kullanilmasi
1. hucre 2. hucre 3. hucre 4. hucre
Baslik1
5. hucre 6. hucre 7. hucre 8. hucre
Baslik29. hucre 10. hucre 11. hucre 12. hucre
<table border>
<tr><th rowspan=2>Baslik1</th>
<td>1. hucre</td> <td>2. hucre</td><td>3. hucre</td> <td>4. hucre</td>
</tr>
<tr><td>5. hucre</td> <td>6. hucre</td><td>7. hucre</td> <td>8. hucre</td>
</tr>
<tr><th>Baslik2</th>
<td>9. hucre</td> <td>10. hucre</td> <td>11. hucre</td> <td>12. hucre</td>
</tr>
</table>
10 birim kenari olan tablo
1. hucre 2. hucre
3. hucre 4. hucre
<table border=10>
<tr> <td>1. hucre</td> <td>2. hucre</td>
</tr>
<tr> <td>3. hucre</td> <td>4. hucre</td>
</tr>
</table>
Cellpadding ve Cellspacing belirteclerinin kullanilmasi
A B C
D E F
<table border cellpadding=10 cellspacing=0>
<tr>
<td>A</td> <td>B</td> <td>C</td>
</tr>
<tr>
<td>D</td> <td>E</td> <td>F</td>
</tr>
</table>
A B C
D E F
<table border cellpadding=0 cellspacing=10>
<tr>
<td>A</td> <td>B</td> <td>C</td>
</tr>
<tr>
<td>D</td> <td>E</td> <td>F</td>
</tr>
</table>
A B C
D E F
<table border cellpadding=10 cellspacing=10>
<tr>
<td>A</td> <td>B</td> <td>C</td>
</tr>
<tr>
<td>D</td> <td>E</td> <td>F</td>
</tr>
</table>
Tablo icinde birden fazla satir kullanimi
Ocak subat Mart
Bu 1. Hucre2. Hucre Diger hucre,
3. hucre
4. Hucre ve iste bu 6. hucre
5. hucre
<table border>
<tr>
<th>Ocak</th>
<th>subat</th>
<th>Mart</th>
</tr>
<tr>
<td>Bu 1. hucre</td>
<td>2. hucre</td>
<td>Diger hucre,<br>3. hucre</td>
</tr>
<tr>
<td>Cell 4</td>
<td>ve iste bu<br>5. hucre</td>
<td>6. hucre</td>
</tr>
</table>
Hucrenin sagina, soluna ve ortasina metin yazmak
Ocak subat Mart
Hepsi ortada2. hucre Diger hucre,
3. hucre
saga yanasikmerkezde default,
sola yanasik
<table border>
<tr>
<th>Ocak</th>
<th>subat</th>
<th>Mart</th>
</tr>
<tr align=center>
<td>Hepsi ortada</td>
<td>2. Hucre</td>
<td>Diger hucre,<br>3. hucre</td>
</tr>
<tr>
<td align=right>saga yanasik</td>
<td align=center>merkezde</td>
<td>default,<br>sola yanasik</td>
</tr>
</table>
Form Hazirlama
Formlar, kullanicidan bilgi girisi oldugu zaman bunlari okunmaya hazir duruma getirmeye yarar. Diger bir deyisle, kullanici ile programci arasinda bir kopru kurar. Programciya mail atmak, WWW uzerinden arastirma yapmak belirli bir anahtar sozcugu kullanarak arama yapmak, ve hatta telefon bilgi bankalarina girmek form kullanarak halledilir.Form konusunu anlayabilmek icin, HTML programlamayi bilmek ve en azindan bir programlama diline ( tercihan shell, PERL veya C ) hakim olmak gereklidir.Form hazirlanirken asagidaki adimlar izlenir :
* Programin, form hazirladigimizi bilmesi icin, <form .. belirteci acilir. Bu belirtecin iki parametresi vardir:
Method"Method", kullanicinin girdigi bilgileri ne sekilde alacagimizi belirler. Bu konunun disinda kalmasina ragmen, POST metodunu kullanmanizi tavsiye ederim.
Action
Bu bolume, alinan girdileri isleyecek programin ismi yazilir. Bu program ayri bir cgi-bin/ dizini altinda durmalidir.ornek bir form baslangici soyle olabilir:
<form method="POST" action="http://cclub.metu.edu.tr/cgi-bin/postala" >
* simdi kullanicinin girecegi bilgiler icin forma birkac bolum ekleyebiliriz.
Bunun icin asagidaki parametreleri kullanan <iNPUT .. > belirtecine gerek
vardir.
Name
Kullanicinin klavyeden girdigi bilgilerin tutuldugu degisken burada tutulur.
Size
Bu sayi, ekranda kullaniciya ayrilan boslugun ne uzunlukta olacagini saptar.
Type
Anket tipi (burada anlatilmayacaktir)
ornek bir girdiyi olusturmak icin su tur bir program yazilabilir.
<iNPUT NAME="isim" SiZE=26>
Birden fazla satir kullanma durumunda, farkli bir secenegi, <TEXTAREA ...>
</TEXTAREA> secenegini kullanmalisiniz :
Name
Yine ayni degisken ismi.
Rows
Bu sayi kullanicinin yazdigi alanin kac satir olacagini belirler.
Cols
Bu sayi kullanicinin yazdigi alanin kac sutun olacagini belirler.
<TEXTAREA NAME="body" rows=10 cols=60></TEXTAREA>
Yukaridaki alana kucuk bir metin de yerlestirebilirsiniz.
<TEXTAREA name="body rows=10 cols=60>
Bu metin, kullanicinin yazacagi alanda goruntulenir.
</TEXTAREA>
Kullanicinin tum bilgileri girdikten sonra formu ister yollamasi, isterse tekrar silmesi icin ikon yaratan bir <input .. belirtecine gerek vardir. Bu belirtecin aldigi secenekler,
Type
Kullanilan formun isleme sokulabilmesi icin type degeri submit olmalidir. Baska bir secenek de kullanicinin girdigi tum bilgileri silmektir. Bunun icin type'dan sonra reset gelmelidir.
Value
Buton icine bir mesaj yazacaksaniz, bu secenegi kullanin. Kullaniciyi bilgilendirmek amaciyla herhangi bir metin yazilabilir.Reset secenegi, formu tamamen temizlemez, sadece formdaki degerler eski hale donerler.
Tipik bir ornek:
<input type="submit" value="Bu formu gonder" >
<input type="reset" value="Temizle" >
* Artik formun yazilimi bitmistir. Formun sonuna </FORM> belirteci konarak form kapatilir.Tamamlanmis form ekranda su halde gorunur.
----------------------------------------------------------------------
E-mail adresiniz :
isminiz :
Buraya herhangi bir not yazabilirsiniz:
----------------------------------------------------------------------
<hr>
<p>
<form method="POST"
action="http://cclub.metu.edu.tr/cgi-bin/deneme"><P>
E-mail adresiniz : <iNPUT NAME="email" SiZE=28>
isminiz : <iNPUT NAME="name" SiZE=42><P>
Buraya birseyler yazabilirsiniz:</P>
<TEXTAREA name="body" rows=10 cols=50>Something</TEXTAREA>
<P>
<input type="submit" value="Gonder">
<input type="reset" value="Temizle"></P>
</FORM>
<p>
<hr>
Yukaridaki formu doldurup gonderin. Form, cclub.metu.edu.tr adresi uzerinde bir programi calistiracaktir. Bu program degiskenlerin ismini ve aldiklari degerleri ekrana basacaktir.
Kullanicinin yazdigini okuyabilmekBundan sonra kullanicinin forma ne tur bilgiler girdigini bulmak kaldi. Form bilgilerini okuyabilmek icin tercihan perl veya shell bilmek gerekir. Burada ornegi verilecek cgi-bin programlarini herhangi bir dildeyazabilirsiniz, buradaki ornekler, hemen herkesin asina oldugu shell script ile yazilacaktir.simdi asagidaki bilgilerin girilmesini isteyen bir form hazirlayalim ve .html formatinda yazalim.
* Haftanin bir gunu (gun)
* Bir sifat (sifat)
* Bir fiil (fiil)
Yarattiginiz form, cgi-bin dizini altindaki (bu dizine yazma hakki elde etmeniz gereklidir) form.cgi programini calistirsin.Bir gun, iki insan ismi, bir sifat ve bir fiil giriniz..
------------------------------------------------------------------------
* Haftanin bir gunu
* Bir sifat
* Bir fiil
<html>
<title> Form hazirlama </title>
<h3> Bir gun, iki insan ismi, bir sifat ve bir fiil giriniz..</h3>
<hr>
<form method="POST"
action="http://www.catt.ncsu.edu/cgi-bin/madlib.pl">
<UL>
<Li> Haftanin bir gunu <input name="gun">
<Li> Bir sifat <input name="sifat">
<Li> Bir fiil <input name="fiil">
</UL>
<input type="submit" value="Formu postala">
<input type="reset" value="Ekrani temizle">
</form>
</html>
Yukarida sadece calistirilmayi bekleyen bir form hazirladik. Aslinda bu haliyle
program calismayacaktir, cunku henuz cgi-bin altina yerlestirmemiz gereken shell
programimizi (kodu) yazmadik. Yazacagimiz kodun amaci, kullanicinin girdigi
bilgileri ekranda aynen gostermek.
Kod, programcinin istegi dogrultusunda kolayca degistirilebilir.
##
# ayrac.sh
# Bu program, cagirildigi zaman, ekrana $STRiNG_QUERY degiskeni
# icindeki degerleri basar. Program, $QUERY_STRiNG icindeki degisken
# sayisini 3 olarak kabul eder.
##
#!/bin/bash
echo "Content-type: text/plain"
echo
deger=`echo "$QUERY_STRiNG" | awk -F"&" '{ print $1 " " $2 " " $3 }'`
echo $deger
deger1=`echo "$deger" | awk '{ print $1 }'`
deger2=`echo "$deger" | awk '{ print $2 }'`
deger3=`echo "$deger" | awk '{ print $3 }'`
sabit1=`echo "$deger1" | awk -F"=" '{print $1}'`
sabit2=`echo "$deger2" | awk -F"=" '{print $2}'`
sabit3=`echo "$deger3" | awk -F"=" '{print $3}'`
echo $sabit1 $sabit2 $sabit3
Hazirladigim Sayfa Her Web istemcisinde Ayni Gorunecek Mi? Bu Konuda Nelere
Dikkat Etmeliyim?
Eger sayfalarinizda standart HTML kullanmissaniz, tum istemcilerde ayni gorunmemesi icin hic bir sebep yok. Ancak; Eger sayfalariniza, lynx ya da benzeri bir metin tabanli web istemcisi (tarayicisi) ile birisi bakarsa, resimleri goremeyecektir. Sayfalarinizda, sadece ozel bir istemcinin anlayabilecegi bazi ek HTML belirtecleri kullanmissaniz yine bazi kotu surprizlerle karsilasabilirsiniz.. Baglandigim Bir Web Sayfasinin Html Kodunu Nasil Alabilirim?Bunun icin, sayfa yuklendikten sonra, web istemcisinizin "File" menusunden "Save (As)" secenegi ile dosyayi kendi bilgisayariniza kaydedebilirsiniz. Ancak, bu durumda sadece HTML kodu almis olursunuz. Sayfadaki resimler ve link bilgileri gelmez. Bunlarin da gelmesini istiyorsaniz sayfayi herseyiyle almalisiniz. Resimlerin uzerinde iken mouse’in sag butonuna basip save image as secenegi ile alabiliriz.
Bir Web Sayfasi Yaptim. Diger insanlarin Bundan Nasil Haberi Olacak?
Bunun birkac yolu var. Eger sayfanizda islediginiz bir konu varsa (pop muzuk ya da bilgisayar programlama veya baskabirsey..) bununla ilgili listeler ve tartisma obeklerine sayfanizin varligindan sozeden mesajlar atabiliriniz. Ayrica, gonderdiginiz her e-posta'nin sonuna isminizden sonra web sayfanizin adresini yazabilirsiniz. Bu yolla daha cok insanin bilgisi olacaktir. Ayrica, AltaVista, LyCos gibi populer arama motorlarina sayfanizi kaydettirebilirsiniz.
Diger Formatlarda (Word DOC gibi) Hazirlanmis Dosyalari Hemen HTML'ye Donusturebilir Miyim?
Microsoft Word ve Power Point, yeni surumuyle birlikte (Word 97, PowerPoint 97), hazirladiginiz dokumanlari HTML olarak kaydetmenize izin veriyor. Diger Word surumleri icin de HTML Assistant adinda bir yardimci program var.
Sayfa Hazirlamada Gozonune Alinmasi Yararli Olabilecek Bazi Diger ipuclari
Mutlaka ana web sayfanizin sonuna kendi e-mail adresinize bir baglanti ekleyin. Boylece insanlarin size ulasmalarini ve sayfa hakkindaki muhtemel goruslerini size iletebilmelerini kolaylastirmis olursunuz. Soz gelimi, Her turlu gorus ve oneriler icin e-mail adresim :<a href="mailto:webadm@gazi. edu.tr"> webadm@ gazi.edu.tr </a>seklindeki bir satir oldukca ise yarar. Hazirladiginiz sayfalara, mumkunse birkac farkli web istemcisi ile (netscvape, msie gibi) bakin. istemcinizin goruntu penceresini kuculterek (window resize) sayfanizin nasil gorundugunu kontrol edin. Tablolar kayiyor mu? Paragraflar ne alemde? Mutlaka sayfalarinizdaki tum linkleri kontrol edin. Belki de yanlislikla kendi yerel diskinizdeki bir dosyaya baglanti yapmis olabilirsiniz. Sayfalariniza, grafik, renk vb ozellikleri kisitli bilgisayarlardan da erisilebilecegini dusunerek biraz dikkatli olun. Sayfaniza herhangi bir istemci ile (sozgelimi, metin tabanli lynx ile) erisen birisinin sayfayi (resimleri/renkleri goremese bile) takip edebilmesi lazim. Eger ana sayfaniza bagli birden cok sayfa tasarlamissaniz, bu sayfalar arasinda rahatca dolasilabilmesi icin gerekli tedbirleri alin (sayfalar arasi baglantilar ve uygun yerlerde verilecek ana sayfaya donus baglantilari gibi) Eger <img> belirteci kullaniyorsaniz, mutlaka "alt", "width", ve "height" seceneklerini de ekleyin. "alt" secenegi, bu resmi gosteremeyen istemciler icin alternatif bir yaziyi ekrana getirir. "width" ve "height" ise, resmin piksel cinsinden genislik ve uzunlugunu verir. Bu bilgileri vermezseniz, resim yuklenmesi bitmeden sayfanin kalan yazi kisimlari goruntulenmez. Eger verirseniz, resim yukleniyorken, sayfanizin ziyaretcisi ayni anda ziyaretci yazilari da gorebilir. HTML kodunu anlasilir ve kolayca takip edilebilir sekilde yapin. Sonucta, siz ya da bir baskasi ayni satirlari tekrar elden gecirmek zorunda kalabilir Ziyaret ettiginiz web sitelerindeki iyi ve kotu tasarlanmis sayfa tarzlari sizin kendi stilinizi ve kendi sayfa organizasyonunuzu gelistirmenizde yardimci olacaktir.