HTML OKULU

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

Sayfama Hos Geldiniz

</FONT>

</FONT></B></CENTER>

<BODY>

</HTML>

Web istemcileri ile gördüğümüz sayfalar aslında, bir takım web sunucularında tutulan, HTML kodlarından (ayrıca diğer bazı yardımcı elemanlardan) ve vermek istediğimiz bilgilerden oluşan düz yazı (ASCii) text dosyalarıdır. Soldaki kısımda görülen < > işaretleri arasındaki komutlar HTML belirteçleri, ya da HTML komutları olarak bilinir. HTML sayfaları <BODY> .... </BODY> arasına yazılan bilgiler/komutlarla (HTML kodu/kaynak programı) oluşturulur.

Yukarıdaki örnekte, <CENTER>, <FONT>, <B> örnek HTML belirteçleri/komutlarıdır. HTML kodu içinde bırakılan boşlukların hiçbir önemi yoktur. Asil olan, HTML belirteçleri ile verilen biçimlendirme ortamlarıdır. Asagida, genel bir web sayfası formu görülmektedir :

<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".Belgenin Başı

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.Belgenin Başı

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. Belgenin Başı

Web Sayfasi Hazirlamak icin ozel Bir Editore ihtiyacim Var mı?

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. Belgenin Başı

Temel Belirtecler

Konular

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

<title> Sayfamin konusu </title>

Başlıklar

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. Belgenin Başı

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. Belgenin Başı

Satır 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>

Sayfanın Ortalanmasi

Paragraflar ortalanirken <center> ve </center> belirteclerinden yararlanilir. Ortalanmasi istenen tum metin, bu iki belirtecin arasina yazilir.

Web Sayfasi hazirliyoruz

</center>

Bağlantılar

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> Belgenin Başı

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

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

Burada 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. Belgenin Başı

Döküman içi Bağlantılar

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 burada

ifadesini gorecektir. Belgenin Başı

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 İcinde 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:

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. Belgenin Başı

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 nasil

0 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 istersek

kirmizidan 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. Belgenin Başı

Örnek 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>

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

<FONT COLOR="#FF0000" SiZE=5>Kirmizi ve

Buyuk</FONT>

Bu paragraf saga dayali olarak yazilmistir. <BR>

Satir basi yapildiginda bile saga yanasik yazar

</P>

</BODY>

</HTML> Belgenin Başı

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.

Belgenin Başı

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

Tanımlı 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 çıktı şu şekilde Görünür:

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. Belgenin Başı

İçiçe Listeler

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

ornek olarak,

<ul>

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

<ul>

<li> Beyoglu

<li> Taksim

<li> Bakirkoy

</ul>

<li> Ankara'nin belli basli yerlesim birimleri

<ul>

<li> Kizilay

<li> Ulus

</ul>

Ekrandaki goruntusu,

* istanbul'un buyuk semtleri

· Beyoglu

Taksim
Bakirkoy

* Ankara'nin belli basli yerlesim birimleri

· Kizilay

Ulus Belgenin Başı

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 Belgenin Başı