 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Aşağıdaki panoda
hem
ıstedıgınız rengi sayfaya verebılır,hemde
rengın
kodunu görebilirsiniz.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Kisisel Web Sayfasi Nasil Hazirlanir?
ASLINDA EN KOLAYI SYMANTEC VISUAL PAGE PROGRAMINI CEKIN KULLANIN DAHA SONRA BURAYI OKUYUN OKUMANIZA BILE GEREK KALMAYABILIR ADRES
1. Benim de bir web sayfam olabilir mi? Bunun için nelere ihtiyacim var?
Internet erisimi olan herkesin bir web sayfasi olabilir. Web üzerinde gezinirken rastladiklariniza benzer sayfalar yapabilmeniz için ilk öncelikle bu sayfalari koyabileceginiz bir "web sunucusu" olmasi lazim. Bu sunucular, disardan insanlarin, netscape, msie vb gibi web istemcileri kullanarak ilgili sayfalari görmesini saglayan bilgisayarlardir ve bunlarin üzerlerinde çalisan özel sunucu programlar (httpd) vardir. Internet Servis Saglayici sirketlerin hemen hemen hepsi kullanicilarina kisisel web sayfasi hizmeti veriyorlar. Bu yüzden, internet erisiminiz varsa, muhtemelen, kendinize web sayfasi yapabilmeniz için artik hazirsiniz demektir.
2. Bir Web Sayfasi Neye Benzer? HTML Nedir?
Web sayfalari,'de de görüldügü
gibi, HTML adi verilen özel bir formatlama dili kullanilarak
yapilir. HTML, Hypertext Markup Language için uydurulan bir
kisaltmadir. HTML, sayfalara yazacaginiz bilgilerin formatlarini
(yazi rekleri, büyüklükleri, paragraf biçimleri vb gibi),
sayfalar arasindaki kompozik geçis baglantilarini vb
verebileceginiz vb bazi komutlar içerir. Bunu küçük bir örnekle
açiklayalim :
| <HTML> <BODY> <CENTER><B><FONT COLOR="#FF0000"> <FONT SIZE=+3> Ev Sayfama Hos Geldiniz </FONT> </FONT></B></CENTER> <BODY> </HTML> |
Sagdaki baslik, bir web
sayfasina baglandigimizda web istemcimiz ile gördügümüz sekil
olsun. Bunu üreten ise, aslinda, solda görülen HTML kodu. Yani,
web istemcileri ile gördügümüz cicili-bicili sayfalar aslinda,
birtakim web sunucularinda tutulan, HTML kodlarindan (ayrica
diger bazi yardimci elemanlardan) ve vermek istedigimiz
bilgilerden olusan düz yazi (ASCII) dosyalar!!. Soldaki kisimda
görülen < > isaretleri arasindaki komutlar HTML belirteçleri,
ya da HTML komutlari olarak bilinir. HTML sayfalari
<BODY> .... </BODY> arasina yazilan bilgiler/komutlarla
(HTML kodu/kaynak programi) olusturulur.
Yukaridaki örnekte, <CENTER>, <FONT>, <B> örnek
HTML belirteçleri/komutlaridir. HTML kodu içinde birakilan
bosluklarin hiçbir önemi yoktur. Asil olan, HTML belirteçleri
ile verilen biçimlendirme ortamlaridir. Asagida, genel bir web
sayfasi formu görülmektedir :
| <HTML> <HEAD> Bu alana, normal olarak web sayfasinda görüntülenmeyen bilgiler yazilir. Bunlar; sayfa basligi, anahtar kelime tanimlamalari ve sayfa içeriginde kullanilan karakter bilgisi (dil, code page vb) vb. dir. </HEAD> Döküman genelinde öncelikle yüklenmesi istenen JavaScript, VBScript kodlari da bu alana yazilabilir. <BODY> Bu alana, dogrudan web sayfasinda görülen her türlü düzyazi, formatlama bilgileri, diger komutlar vb. yazilir. </BODY> </HTML> |
Netscape Navigator, Microsoft Internet Explorer, Mosaic, Lynx ve Opera gibi web istemcileri (tarayicilari) ise bu HTML kodlarini yorumlayarak sonucta web sayfalarinin görünen biçimlerini olustururlar. Döküman formatlama özellikleri düsünüldügünde, HTML'yi bir kelime islemci gibi düsünmek te olasi. Ancak bir farkla : HTML her bilgisayar ortaminda, her türlü web tarayicisi ile hep benzer sayfa biçileri olusturur ve sunar. HTML'nin döküman formatlama (biçimleme) disinda sundugu en önemli özelliklerden biri de dökümanlar içinde ve dökümanlar arasi kurulabilecek baglantilardir (link). Bu haliyle, dökümanlar arasi gezinmek ve bilgiler arasinda dolasmak mümkün olur.
6. Bölüm'de anlatildigi gibi, web istemciniz ile baglandiginiz sayfanin kaynak kodunu (yani HTML halini) istemcinizin "View" manüsü altindaki Page Source (Microsoft IE için sadece "Source") ile görebilirsiniz. Yani, Web istemcilerinizde gördügünüz sevimli sayfalar aslinda tamamen ASCII karakterlerden olusan "metin dosyalaridir".
HTML'nin sagladigi bazi önemli özellikler sunlardir :
HTML standartlari sürekli güncellenmektedir. Konu hakkinda, http://www.w3.org/ adresinden daha ayrintili bilgi alinabilir. Şu anki mevcut standart HTML 3.2 (Eylül 1997). HTML 4.0 standarti üzerinde çalisiliyor.
3. Bir web sayfasinda görülebilecek
tipik elemanlar nelerdir?
Web'de gezinmisseniz bilirsiniz. Sayfalara baglandiginizda, karsiniza oldukça degisik türden bilgi ve bu bilgileri size sunan sayfa elemanlari geliyor. Aslinda bu, web'in sagladigi en büyük özelliklerden birisi. Yani, birbirinden çok farkli türden bilgiye ayni platformda ve kompozit bir sekilde ulasmak!!
HTML sayfalari, grafik, animasyon, film, müzik, arkaplan müzikleri gibi hergeçen gün artan oranlarda desteklenen bilesenler de içerirler. Bunun yaninda, kullanicilarin etkilesimli bir sekilde doldurabilecekleri formlar, kullanicinin yönlendirebilecegi ve içerigini degistirebilecegi dizaynlar (dinamik html) da içerir. web sayfalari yapisi ve web istemci teknolojisi, standart olmayan veri yapilarinin da web üzerindeki diger bilgilerle entegrasyonuna "plug-in" denilen yardimci programlar vasitasiyla izin verirler.
4. Sayfa içerigi nasil
saptanir? Ön 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 ürünü mü tanitmak? Ya da, sevdiginiz bir sanatçi ile ilgili bir sayfa mi yapmak istiyorsunuz?? Daha sonra, 1-2 hafta süreyle web'de gezinin. Sizinkine benzer içerikli sayfalarla mutlaka karsilasirsiniz. Buradan, iyi ya da kötü tasarimin ne oldugu konusunda kafanida fikirler olusacaktir. Öte yandan, normal bir internet kullanicisinin profesyonel bir grafik ya da web sayfasi tasarimsici olmasini da bekleyemeyiz.. Bu yüzden, ilk sayfaniz çok sade görünümlü olabilir. Herzaman, web sayfasinin içerdigi bilgilerin önemli oldugunu ve sayfa düzeninin de bu bilgilere kolayca erisimi saglayacak sekilde olmasinin getirecegi kolayliklar ve avantajlari akilda bulundurun. Eger web sayfalarinizda birden çok konuyu isleyecekseniz, buna göre 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, öncelikle, buraya baglanan insanlarin mümkün oldugunca zahmetsiz ve kisa yoldan isteklerine ulasmalarini saglamalidir. Ayrica, konunun disina tasmadan, verilmek istenen anlatilmalidir. Hiç kimse, ekranlar dolusu uzunlukta yazilardan olusan bir siteyi okumak istemez. Bu genellikle çok sikici olur.
Web sayfasinda ne kadar grafik/resim/ses
vb olacagi, bu dosyalarin büyüklüklerinin belirlenmesi de çok
önemli. Hiç kimse, baglandigi bir web sayfasinda 100lerce
kilobyte tutan bir resim ya da animasyon dosyasinin yüklenmesini
beklemek istemez. Web sayfalarinda resim ve animasyon kullanimi
sayfanin çekiciligini arttirsa da, unutmayin ki bu sayfalara
ulasacak kisilerin internet baglanti hizlari 14.4kbps modem
baglantisi düzeyinde de olabilir.
5. Tipik bir web sayfasi düzeni nasildir?
Tipik bir web sayfasi aslinda tam anlamiyla hiyerarsik bir yapidadir. Bu modüler yapi, sayfalara yeni bilgiler ve sayfalar eklenmesini kolaylastirir.
6. Web Sayfasi Hazirlamak zor mudur? Özel bir editöre ihtiyacim var mi?
Web sayfasi hazirlamak basta tahmin edildigi gibi ya da sanildigi kadar zor degildir. Bu isi kolaylastiran birçok araç var.
Aslinda, HTML dökümanlarinin tamami ASCII karakterlerden olusan ve herhangi bir editörde yazilabilen metinlerden olusmustur. UNIX üzerinde pico, vi; DOS altinda MSDOS Edit ya da bir windows textpad veya sevdiginiz herhangi bir metin editörü kullanarak HTML dökümanlarinizi hazirlayabilirsiniz. Yani, hiç bir özel editöre ihtiyaciniz yok. Ancak, HTML format belirteçlerini hatirlamak ayri bir dert, yazmak ayri bir dert.. Yüzlerce HTML belirteçini hatirlamak profesyonel bir tasarimci için bile gerçekten çok zor.
Bunu berteraf eden bazi yardimci bilgisayar programlari var. Bunlara, "HTML Editörleri" denir. HTML editörleri 2 grupta toplanir :
Bu tip editörlerin hemen hepsi, kolay web sayfasi hazirlama sihirbazlari (wizard) sunarlar. Böylece, bazi bosluklari doldurarak basit bir web sayfasini kolayca olusturabilirsiniz. Ayrica, hemen hemen tüm editörler, hazirladiginiz sayfalari bir web sunucusuna (FTP ya da HTTP protokolü ile) gönderebilmek için gerekli araçlari (web publishing) da içerirler. Bu editörler, çogunlukla, dökümaniniz içinde kullandiginiz HTML komutlarini farkli renklerde göstererek sayfanizin olusturulma sürecini kolaylastirirlar.
Çogu editör, bazi temel JavaScript programlari/özellikleri ekleme ya da hareketli GIF resimlerini (animated GIF) kolayca hazirlamanizi saglayabilirler.
Bu editörlerden bazilari, hazirladiginiz web sayfalarindaki HTML kodlarini kontrol edebilirler ve hatali/eksik kullanimlari saptayabilirler. Bunlari yapan bazi yardimci programlari da http://www.halsoft.com/web-lint adresinde bulabilirsiniz.
Bu editörlerden en
popülerlerinden
bazilari HotDog Pro (http://www.sausage.com/), HomeSite, Web Edit, HotMetal
ve DiDo 'dur. Bunlar ve benzeri diger editörlere (Windows,
Mac ve OS/2 için) Raksnet Tucows yansisindan kolayca
ulasabilirsiniz. Adresi : http://tucows.raksnet.com.tr/tucows
http://www.zdnet.com/~pcweek/navigator/htmled.html adresinde deHTML editörleri ile
ilgilibilgilere ve bu programlarin bulundugu diger
adreslere erisebilirsiniz.
HTML yardimi, kolay sayfa hazirlama sihirbazlari, heceleme, web sunucusuna dosya gönderebilme gibi özellikleri bu programlar da, genellikle, sunarlar. Benzer sekilde, buton hazirlama, JavaScript programlari/komutlari ekleme ya da hareketli GIF resimlerini (animated GIF) kolayca hazirlamanizi saglayabilecek özellikler de bu programlarda son günlerde sikça karsilastigimiz özelliklerden. Popüler web istemcilerinden olan Netscape Navigator (4.x) bünyesi içinde yer alan "Composer" bu tür bir editör. Eger Netscape 3.x kullaniyorsaniz web editörü bu ürünün Gold sürümünde.
Popüler görsel editörlerden
bazlari ve alabileceginiz adresler söyle : Microsoft
Front Page (http://www.microsoft.com/) ; Symantec Visual Page (http://www.symantec.com/); Adobe Page Mill (http://www.adobe.com/); Claris Home Page (http://www.claris.com/). Ayrica, Microsoft Internet
Explorer 4.x surumu ile birlikte "Front Page Express"
adiyla, orijinal ürünün daha basit bir sürümü de ücretsiz
dagitilmaktadir. Programlar genellikle Windows (95/NT) ve
Mac (PowerPC) altinda çalismaktadir. Bunlar ve benzeri
diger editörlerin çoguna (Windows, Mac ve OS/2 için)
Raksnet Tucows yansisindan kolayca ulasabilirsiniz.
Adresi : http://tucows.raksnet.com.tr/tucows
http://www.zdnet.com/~pcweek/navigator/htmled.html adresinde deHTML editörleri ile
ilgili diger bazi bilgilere ve bu programlarin bulundugu
diger adreslere erisebilirsiniz.
Görsel editörlerin sunduklari imkanlar, çogu web sayfasi hazirlama isi için yeterli görünmektedir. Özellikle; tablo hazirlama, frame'ler ile çalisma, form hazirlama gibi yüksek oranda HTML kodlamasi gerektiren uygulamalar çok kolay yapilabilmektedir. Sayfa içinde baglanti (link) olusturma, temel formatlama özelliklerini verme bu tip editörlerle kolaydir. Özellikle, hem görsel editör özelligi sunan, hem de düz HTML kodunu degistirebilmenize olanak taniyan editörler hergeçen gün yayginlasmaktadir. Böylece, görsel editörlerle yapamadiginiz bazi isleri bütünlesik bir sekilde, dökmanin HTML hali üzerinde degisiklikler yaparak halledebilirsiniz.
7. Hiç HTML bilmeden görsel
editörlerle web sayfasi hazirlayabiliyorum. HTML'ye yine de
ihtiyacim var mi?
Bu sayfanizin içerigine bagli. Görsel editörler; tablo, frame, her türlü formatlama, resim/ses vb ekleme gibi özellikleri saglarlar ve bunlar ortalama bir web sayfasi için yeter. Ancak, özellikle yeni HTML komutlari, Java Appletleri, bazi CGI teknikleri vb eklemek için sayfanizin HTML sekli üzerinde biraz çalismaniz gerekebilir.
Ayrica, HTML felsefesini anlamak ve formatlama ortamlarini ögrenmek yazdiginiz sayfaya herhaliyle hakim olmak demektir. Baglandiginiz sitelerdeki sayfa içeriklerini anlamak ve bazi teknikleri ögrenmek için de biraz HTML bilmek sonuçta yararlidir.
8. HTML dilinin en temel
elemani : Döküman biçimleme belirteçleri (TAG)
HTML'nin en temel islevi, yazdiginiz bir dökümana biçim vermektir (yazi karakterini, rengini, büyüklügünü degistirmek; paragraf eklemek; resim eklemek vb gibi). Bu, kullanilan bazi biçimlendirme (formatlama) belirteçleri/komutlari kullanilarak yapilir. Söz gelimi; sayfamizda "merhaba" kelimesinin koyu renkli görünmesini isteyelim. Bu durumda, <BODY> ... </BODY> arasina;
<B>deneme</B>
yazmaliyiz. Bu ise, bir web istemcisinde görüntülendiginde, deneme seklinde bir sonuç üretir. Bu basit örnek aslinda HTML dilinin en temel kurali hakkinda tüm ipuçlarini vermektedir : Bir HTML döküman hazirlamak, temel olarak, öncelikle sayfada görünmesini istedigimiz düzyazi bilgileri yazmak; sonrasinda da bu yazinin istedigimiz yerlerinde uygun belirteçler (TAG) kullanarak istedigimize uygun bir görünüm kazandirmaktir.
Tüm HTML belirteçleri < karakteri ile baslar ve > karakteri ile biter ve bu HTML dökümanini gösterecek Netscape, MSIE gibi web istemcilerine, yaziyi koyu göstermek, italik yapmak, bir resim göstermek vb türünden özel birseyler yaptirir. < > arasina ise, ilgili belirteç komutu ve bazen de birtakim ilave parametreler (seçenekler) gelir. Sözgelimi yukaridaki örnekte, <B> belirteçi, kendinden sonra yazilan yazilarin web istemcilerinde KOYU RENK görünmesini bildirir.
Genellikle HTML belirteçleri çift halinde kullanilir (ancak bu kuralin istisnalari da vardir). Yukaridaki örnege tekrar dönecek olursak, <B> belirteçinin çifti </B> dir. Böylece, yazinin belli bir kismina (yani, sadeec <B> ..... </B> arasina yazdigimiz kismina) biçimlendirme yapmak mümkün olur. Her belirteçin çifti, isminin basina bir ayiraç (/) konarak elde edilir ve yine < > arasina yazilir.
Herhangi bir HTML belirteçinin genel formati söyledir :
<belirteç-adi seçenek1="deger1" seçenek2="deger2" seçenek3="deger3"......... >
Bilgileri yazmada küçük/büyük harf ayirimi yoktur. Ancak, tüm
HTML belirteçlerini ve seçenek adlarini büyük harfle;
degerleri ise küçük harfle yazmak oldukça yaygin bir
aliskanliktir.
HTML, dökümanlar üzerinde kullanilabilecek yüzlerce belirteç içerir. Bu da, web editörlerinin sayfa hazirlamada ne kadar yararli araçlar oldugunu göstermektedir. En bastaki örnege tekrar dönelim :
<FONT SIZE=+3>
Ev Sayfama Hos Geldiniz
</FONT>
<FONT> belirteçi, kendisinden sonra gelen karakterlerin yazi büyüklügü, rengi, tipi vb ile ilgili degisiklikler yapabilmemizi saglar. Dikkat edilirse, belirteç adindan sonra bir seçenek kullanilmis. Biçilendirme sadece dökümanin belli bir kismina uygulanmak istendiginden, ilgili belirteç, çifti olan </FONT> ile kapatilmis. Kapatma belirteçinde, sadece belirteçin adi ve sol tarafina ayiraç isareti (/) konur.
Bir baska örnek verelim :
Bu örnekte de, web sayfasinin
bulundugu dizindeki sad.gif isimli resim dosyasinin sayfa üzerinde,
bu komutun yazildigi bölümde, görüntülenmesi isteniyor.
Bunun sonucunda ise görülecektir. Tabii bunun için, ilgili
resim dosyasinin, html sayfanizi sakladiginiz dizinde bulunmasi
lazim. Okudugunuz dökümanin ilerleyen bölümlerinde önemli
HTML belirteçleri ve önemli kullanimlari ile ilgili bilgiler de
verilecek.
9. HTML dökümanin
genelinde etkili ve sayfada dogrudan görülmeyen belirteçler
Bastaki tabloda da belirtildigi
gibi, bir HTML döküman, <BODY> </BODY> arasina
yazilir. Bastaki <HEAD> .. </HEAD>
arasina yazilan belirteçler tüm döküman üzerinde etkilidir
ve web istemcileri tarafindan dogrudan görüntülenmezler.
Bunlardan en önemlisi, yazilan HTML dökümana isim vermekte
kullanilan <TITLE>'dir. Bu belirteç, hazirlanan web
sayfasina bir isim verilebilmesini saglar. Böylece, sayfayi yükleyen
birisi, <TITLE> ile verilen isim bilgisini (sayfanin
konusunu içeren bir tanimlama) kendi istemcisinin tanimlama
satirinda görür. Asagida, bu belirteçin örnek bir kullanimi
görülmektedir.
<HTML>
<HEAD>
<TITLE> Orhan Gökçöl'ün Web Sayfasi </TITLE>
</HEAD>
<BODY>
....
</BODY>
</HTML>
Bu alanda kullanilabilecek ikinci önemli belirteç <META> 'dir. Kullanimda, kendisinden sonra bir seçenek adi verilerek kullanilir. Bu belirteç kullanilarak verilen bilgiler çok çesitli olabilir. Söz gelimi, web sayfalari üzerinde dolasan arama motorlari, sayfalarin bu kismindaki <META> belirteçlerine bakarak sayfalari gruplar. Bu kullanimda, <META> ile birlikte, sayfanizdaki içerigi yansitan bazi anahtar kelimeler ve tanimlamalar verebilirsiniz. Asagida bununla ilgili bir örnek görülmektedir :
<META NAME="Description"
CONTENT="Web sayfasi hazirlamak icin bazi kisa bilgiler">
<META NAME="KeyWords" CONTENT="html, htm,
kisisel web sayfasi, web">
<META NAME="Author" CONTENT="Orhan Gokcol">
Meta belirteçinin önemli bir kullanimi da, sayfadaki yazilarin hangi "dil ailesi"ne ait karakterlerle yazildigini belirtmek içindir. Türkçe, Latin5 dil ailesindedir. Buna ait standart tanimlamasi ise iso-8859-9 olmaktadir. Asagida buna ait bir kullanim gösterilmistir.
<META
HTTP-EQUIV="Content-Type"
CONTENT="text/html; charset=iso-8859-9">
10. HTML Döküman Içinde Link Kullanimi
Web sayfalarinin en önemli
özelliklerinden birisi, kolayca baska sayfalara ve dökümanlara
geçis yapilabilinmesidir. Bu,
<A> belirteçi kullanilarak yapilir. Asagidaki örnegi
inceleyelim :
| Ana sayfaya dönmek için <A HREF="http://www2.itu.edu.tr/~gokcol/css/index.html"> buraya </A> fare ile tiklayiniz. |
Örnekte, "buraya"
kelimesine index.html dosyasi baglanmistir. Böylece, "buraya"
kelimesinin üstüne gelip fare ile tikladiginizda,
http://www2.itu.edu.tr/~gokcol/css/index.html yüklenecektir.Bu
ve benzeri URL lere baglanti tanimlarken, baglanti kurmak
istedigimiz kelimenin soluna <A HREF="tam-url-adi">
yaziyoruz. Baglanti kelimesinden sonra ise, </A> ile
belirteçi kapatiyoruz. Yukaridaki örnekte, eger index.html
dosyasi ayni dizinde ise, uzun uzun URL'i yazmak yerine dogrudan
<A HREF="index.html> yazmak ta yeterlidir. Bu yolla,
her türlü URL kullanilabilir (ftp, http, e-posta, gopher, wais).
Asagida kullanimla ilgili bazi örnekler var :
Istenildigi kadar baglanti ayni anda kullanilabilir.
Bir diger kullanimda, eger
istenirse, bir URL adresine degil de herhangi bir dosyaya da
baglanti yapilabilir. Ilgili baglanti fare ile tiklandiginda,
eger o dosya tipi web sunucusu ve sizin web istemciniz tarafindan
bilinen bir tipse, o zaman ekranda sonucu görürsünüz. Söz
gelimi, düzyazi dosyalar (TXT), Resim dosyalari (GIF, JPG, JPEG,
PNG, XBM) böyledir.
<A HREF="sad.gif"> Buraya tiklarsaniz </A> üzgün bir surat göreceksiniz. |
Eger ilgili dosya bilinmeyen bir tipte ise, o zaman bu baglanti tiklandiginda, kullanicinin web istemcisi o dosyayi "diske saklamak" ya da bir uygulama programiyla açmak seklinde iki seçenek sunar. Bazi dosya tipleri ise, web istemcilerine yüklenen yardimci "plug-in" ler ile islenebilir. Bunlardan en popülerleri ses formatlari (AU, WAV, MID); video formatlari (RM, MOV, AVI) ve bazi özel tipte dosyalardir (AutoCAD çizim dosyalari gibi).
Bir Resim Dosyasinin Baglanti Elemani Olarak Kullanilmasi
:
Bazen bir resim dosyasi da
baglanti elemani olabilir. Böylece, kullanici ilgili resmi fare
ile tiklayarak belirtilen yeni dosyaya ulasir. Bunu bir örnekle
görelim :
| Mail göndermek için zarfin üzerini tiklayin..... <A HREF="mailto:gokcol@sariyer.cc.itu.edu.tr"><IMG SRC="envelope.gif" HEIGHT=20 WIDTH=28 BORDER=0></A> |
Dikkat edilirse, baglanti
yapilacak yerde, <IMG SRC="envelope.gif" HEIGHT=20
WIDTH=28> kullanildi. <IMG>, tek basina kullanilan bir
belirteçtir ve baska parametreler de alabilir. Yukaridaki örnekte,
resmin eni ve boyu piksel cinsinden veriliyor. Ayrica, resmin çevresinde
bir belirgin sinir (BORDER) verilmek isteniyorsa 0 yerine daha büyük
bir deger kullanilmali.
Döküman Içi Baglantilar :
Bir metin üzerinde belirli bölgelere ulasmak için yine belirteçler kullanilabilir. Şu an okuyor oldugunuz döküman, buna bir örnektir. Asagidaki satirlari inceleyelim :
<A HREF="#1">Benim
de bir web sayfam olabilir mi? Bunun için nelere ihtiyacim var?</A>
<A HREF="#2">Bir web sayfasi neye benzer? HTML
nedir?</A>
<A HREF="#3">Bir web sayfasinda görülebilecek
tipik elemanlar nelerdir?</A>
Burada, HREF ile verilen
aslinda, dökümanin sizin belirlediginiz bir kismi. Söz gelimi,
ilk satiri ele alacak olursak, kullanici buraya fare ile
tikladiginda dökümanda "1" belirteci ile verilen
kisma gidiliyor. Burasi ise,
| <A
NAME="1"></A>
Benim de bir web sayfam olabilir mi? Bunun için nelere
ihtiyacim var? <P>Internet erisimi olan herkesin bir web sayfasi olabilir. Web üzerinde gezinirken rastladiklariniza benzer sayfalar yapabilmeniz için ilk öncelikle |
seklinde. Yani, bir baglantiya
tiklandiginda döküman içinde nereye gelinmesi isteniyorsa,
ilgili yere
<A NAME="belirteç-adi"></A> seklinde bir
tanimlama yapiyoruz. Buna "Anchor" (belirteç?) denir.
Belirteç adlarinin illa ki sayilar olmasi gerekmez. tek
karakterden olusmasi da gerekmez. Kendinizin belirleyecegi
herhangi bir isim olabilir.
Eger, bir döküman içinden
baska bir dökümanin "belirteç kullanilarak tanimlanmis"
bir bölümüne baglanti verilmek isteniyorsa, bu durumda da,
HREF="diger_döküman_ismi#parça_ismi" seklinde bir
kullanim uygulanir.
11. Temel HTML
Komutlari/Belirteçleri
Metin Formatlama Belirteçleri :
Bir HTML döküman hazirlarken, satirlar ya da kelimeler arasinda istediginiz kadar bosluk birakabilirsiniz. Kodu takip etmeyi kolaylastirmak için HTML komutlarini metinden bosluklarla ayirabilirsiniz. Bunun dökümanin web istemcisi üzerindeki görünümünde hiç bir fonksiyonu olmayacaktir.
Döküman içinde, yeni bir paragrafa baslarken, <P> belirteçini kullanmalisiniz. Bu belirteçi çokça kullanacaksiniz :-) HTML dökümanlarinda <P> belirteç kullanmadikça bir cümle herhangi bir yerinden ayrilip kalan kismi altta görünebilir, birden fazla bos satir tek satir olarak algilanir. Bir web tarayicisi satir sonlarini ve bos satirlari gözardi edeceginden, paragraflari mutlaka < p> belirteci ile ayirmalisiniz.
Eger bir satiri belli bir yerinden bölmek istiyorsaniz <BR> belirteçini kullanmalisiniz. Asagida bunlarla ilgili küçük bir örnek var :
Eger <P> kullanilmasa idi, ilgili metin bir üstteki bilgilerle birlesecekti. <BR> kullanilmasaydi, henüz satir bitmedigi için, alt satira geçilmeyecekti. Hem <P>, hem de <BR> belirteçleri tek kullanilir, çiftleri yoktur.
Asagidaki tabloda, sik
kullanilan bazi metin formatlama belirteçleri görülmektedir.
Belirteçler iç içe kullanilabilir, ancak birbirlerini
kesmemelidirler. Bu belirteçleri kullanirken, belirtecin
etkimesi istenen yazi <> .. </> arasina alinir. Söz
gelimi,
<i> Bu yari italik </i> seklindeki bir HTML kodu,
"Bu yazi italik" seklinde bir sonuç üretecektir.
| <i> </i> | Yaziyi italik yapar. |
<tt> </tt> |
Yaziyi sabit gernislikli yapar (daktilo harfleri gibi). |
<h1> </h1> <h2> </h2> <h3> </h3> <h4> </h4> <h5> </h5> <h6> </h6> |
Bu belirteçler, döküman içinde kullanilabilecek basliklardaki yazilarin büyüklüklerini tanimlar. Sayi arttikça yazi büyüklügü azalir. Bunlarin yerine, daha esnek <FONT> </FONT> belirteci de kullanilabilir. Bu kullanimda, <FONT SIZE=-2> 'den <FONT SIZE=+2> ye kadar yazi büyüklüklerü verilebilir. |
<hr> |
Yatay bir çizgi olusturur. <hr SIZE=4 WIDTH= "50%"> seklinde, daha kalin ve dar bir çizgi de yapilabilir. |
<center> </center> |
Yazi ve resimleri sayfada ortalar . |
<blockquote> </blockquote> |
Yaziyi hem sagdan, hem soldan birmiktar içeri kaydirir. |
<pre> </pre> |
Bu belirteçler arasina yazilan her sey, yazildigi gibi ekrana çikar. Bosluklar, tab'ler, satir bölmeleri vb. korunur. |
HTML Döküman Içinde Açiklama Satirlari :
HTML Döküman Içinde, kodu takip etmede kolayliklar saglayacak bazi açiklama satirlari konabilir. Döküman içinde herhangi biryerde, "<!--" ve "-->" belirteçleri arasinda kalan hiçbirsey web istemcileri tarafindan dikkate alinmaz.Örnek;
<!-- Bu bir açiklama satiridir ve web istemcisinde görüntülenmez -->