- PDF Free Download

Transkript

1 HTML Dokümanlarının Yapısı HTML (HyperText Markup Language) dokümanlarında baslıkların, paragrafların, "link"lerin (bağlantı) vb.nin başlangıcını ve sonunu "tag"ler belirler. HTML elemanlarının çoğu bir başlangıç "tag"i, içeriği ve bir de bitiş "tag"iyle tanımlanır. Başlangıç tagleri < ve > ile, bitis tagleri de </ ve > işaretleri ile sınırlanır. Örneğin: <TITLE>Bu bir sayfa başlığı</title> <H1>Bu büyük puntoda bir baslık</h1> Bu da bir paragraf. Bir HTML dokümanında kabaca, dokümanın türü, giriş ("head" elemanları) ve içerik ("body" elemanları) bulunur: <!DOCTYPE HTML PUBLIC "-//W3O//DTD W3 HTML 3.2 Draft//EN"> <HTML> <HEAD> <TITLE>başlık</TITLE>... diğer HEAD elemanları </HEAD> <BODY>... içerik </BODY> </HTML> Yukarıdaki tagler bir arada bir HTML dokümanın iskeletini oluşturur, ama bu öyle önemli bir iskelet değil :) aslında bunların hiçbirini tanımlamasanız da soyadı.html/.htm olan (serveriniza göre değişir) ve diger tagleri içeren sayfanız rahatça çalışır :) Simdi yukarıda geçen bu tagleri açıklamak gerekirse: <!DOCTYPE HTML PUBLIC "-//W3O//DTD W3 HTML 3.2 Draft//EN"> nin anlamı, yazdığınız sayfanın HTML 3.2 standartlarını içerdiğidir. (HTML 3.2'nin son sekli yayınlandığında "Draft" yerine "Final" gelecek.) Bazı "browser"lar henüz sadece HTML 2.0 standartlarını destekliyor. Bir de Netscape'e özgü HTML tagleri var, <CENTER>, , <FRAMESET> gibi. Hangi tag'in hangi standarda uyduğunu (HTML 2.0, HTML 3.2, Netscape) sırasıyla belirtmeye çalıştım, özellikle herkese hitap etme kaygısında olanlar için. <HTML> </HTML> tagleri HTML dokümanının başlangıcını ve sonunu ifade ederler. HEAD elemanı <HEAD> </HEAD> tagleri de dokümanın "bas"ini oluştururlar, bir mailin bas kısmi gibi. Bu taglerin arasındaki kısımda dokümanın baslığı (title elemanı), dokümanın kendi URL i (base

2 elemanı), meta, isindex gibi dokümanın kendi özellikleriyle ilgili elemanlar belirtilebilir. Head tagleri hiç bulunmasa da olur, ama TITLE olmazsa olmaz bir elemandır. Diger head elemanları ancak özel durumlarda gereklidirler. BODY elemanı <BODY> </BODY> taglerinin arasında ise dokümanın "gövdesi" bulunur, ama BACKGROUND gibi body'nin içerebildiği özellikler atanmadığı sürece bu elemana da gerçekte gerek yoktur. BODY yapısı Body, dokümanın browserda gözüken kısmıdır ve aşağıdaki elemanların sıfır veya daha fazlasını içerir: Başlıklar (heading; H1'den H6'ya) - önem sırasına göre değişen Başlıklar Yazı biçimi elemanları - paragraflar, sıralı ve sırasız listeler, formlar, tablolar vb. Çizgiler (horizontal rule; HR) Yazı ve karakter stili elemanları - italik, kalın vb. Resimler, linkler ve diger elemanlar. Title olayı Kullanım: <TITLE>...</TITLE> HTML 2.0 Eveet, ise title'inizi koymakla başlamak en iyisi.. Title, Netscape ya da başka bir browser'da browser penceresinin başlığında gözükecek olan yazıdır. Yani örneğin bu sayfanınki için sunu yazdım: <TITLE> TITLE ve diger HEAD elemanları </TITLE> Su an Netscape'inizin (browser'inizin yani) başlık çubuğuna bakarsanız bunun sonucunu görebilirsiniz :) Her HTML dokümanının TITLE elemanı bulunmalıdır ve bu başlık dokümanın neyi içerdiği hakkında kabaca fikir vermelidir, çünkü bu başlık dokümanın hem gösterilmekte olduğu penceredeki etiketi hem de "search engine"lerde ve bookmarklarda gözükecek olan adidir. Bu başlık, "heading"lerin aksine, dokümanın içinde görüntülenmeyecektir. TITLE elemanı dokümanın "bas" (head) kısmında bulunmalıdır ve sade olmalıdır :) yani paragraf, kalın/italik gibi özellikler eklenmez. Bir dokümanda ancak bir TITLE olabilir.

3 Bu TITLE'in uzunluğunun bir limiti yoktur ama uzun Başlıklar yerine göre sorun yaratabilirler, bu yüzden başlıkların 64 karakterden kısa olması tavsiye edilir. Ama unutmayın ki çok kısa bir başlık da, Önsöz diyelim, konudan uzaktayken (örneğin bookmarklarin arasında) anlamsız kaçacaktır :) Diger head elemanları BASE BASE elemanı, doküman yabancı ellerde :) okundugu durumlarda, dokümanın kendi URL'inin kaydedilmesine yarar. dokümanın içindeki Bazı URL'ler bu adrese göreceli olarak "kısmi" verilmis olabilir. Herhangi bir BASE adresi atanmamissa dokümanın BASE adresi, bulundugu adres olur. Fon resmi: BACKGROUND Kullanım: <BODY BACKGROUND="yol/resim_adi.gif" > HTML 3.0 Hazirladiginiz sayfalarin fonuna resim koymak istiyorsaniz, <BODY> tag'inin içine BACKGROUND="yol/resim_adi.gif" özelligini eklemeniz yeterlidir. Diyelim sayfanizin bulundugu directory'nin altinda "resimler" adli dir.de duran fon.gif'i sayfanizin fonuna koymak istiyorsunuz: <BODY BACKGROUND="resimler/fon.gif"> Resmi seçerken üstüne gelecek olan yazilarin okunmasini engellememesine dikkat edin. Yazilarin rengini de resimle yeterli kontrast saglayacak sekilde ayarlamak yardimci olacaktir. Fon ve yazi renkleri: BGCOLOR, TEXT, LINK, ALINK, VLINK Kullanim: <BODY BGCOLOR="#RRGGBB" TEXT="#RRGGBB" LINK=...> HTML 3.2 Sayfanizin fonunun ve yazilarinin renklerini de <BODY> tag'inin içinde tanimlayabilirsiniz. Örnegin bu sayfanin BODY tag'i, yani: <BODY BGCOLOR="#E0E0E0" TEXT="#900090" LINK="#00A000" ALINK="#FF00FF" VLINK="#909090"> su gördügünüz renkleri tanimliyor: Açik gri bir fon rengi (BGCOLOR)

4 Koyu mor metin rengi (TEXT) Yesil baglantilar (LINK) Pembe aktif baglantilar (ALINK; active link) - yani mouse ile baglantinin üstüne tiklandigi andaki renk Koyu gri daha önce ziyaret edilmis baglantilar (VLINK; visited link) Linklerin renklerine ne oldugunu görmeniz için ana sayfaya gönderen örnek bir link koyalim; büyük olasilikla o sayfaya ugrayip da buraya geldiginiz için bu link "visited link" renginde olacaktir. Henüz ugranmamis bir link için ise hmm suraya (hey, geri dönmeyi unutmayin!) gönderebiliriz... ALINK'in rengini denemek için de bu iki linkten birinin üzerinde mouse'u tiklayip basili tutmaniz yeterlidir. Simdiii, "bu renkler nasil tanimlaniyor, ne garip bir ifade bu?" diye soruyorsaniz, bunlar aslinda renklerin hekzadesimal #RRGGBB degerleridir. Bu da ne demek diye sormaya devam ediyorsaniz, bilgisayarda renkler her biri arasi degisen birer Red, Green ve Blue degeri ile tanimlanmaktadir. Yani her renk kirmizi, yesil ve mavinin bir kombinasyonundan olusmaktadir. Bunun "hexadecimal" ifadesi de 16'lik sayi sistemine çevrilmis halidir. Kendi renklerinizi yaratirken asagidaki hekzadesimale çevirme ve renk ipuçlarindan da yararlanabilirsiniz... Bu sekilde tanimlanan renkler sayfanin tamami için geçerlidir. Bazi yazilari renklendirmek: COLOR Kullanim: Netscape Eger belli bir yazinin farkli renkte olmasini istiyorsaniz onun da çözümü var, ama bunu saglayan tag'i sadece Netscape'e özgü bir tag, koydugunuz renk diger browserlarla gözükmeyecek... Örnek: Renkli yazi Renkli yazi Daha artistik bir örnek vermek gerekirse :) Rainbow Tabii ki bu örnek ayni zamanda daha masrafli oluyor: R a i n b o

5 w Not: Buradaki ve tag'lerini, renkler daha rahat gözüksün diye yaziyi kalinlastirmakta (Bold) kullandim. Eger yaziyi vurgulamak için renklendiriyorsaniz, Netscape olmayan browserlarla sayfaniza bakacak olanlarin da vurgunuzu anlamalari için yaziyi ayni zamanda italik yapabilirsiniz: Renkli yazi Renkli yazi Hekzadesimale çevirme Rengi kafaniza göre takilarak seçecekseniz burayi okumaniza gerrek yok, renkler için olan ipuçlari hekzadesimal düsünmenizi saglayacak zaten :) Ama RGB degerini bildiginiz özel bir rengin hekzadesimalini hesaplamak istiyorsaniz dogru yerdesiniz. 16'lik sistemde her basamak için 16 olasi deger vardir (10'luk sistemde 10 tane oldugu gibi: 0,1,..,9) ve bu degerler sirasiyla: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D ve E'dir (A=10,B=11,..,E=15). Renk degerleri arasi degistiginden renkler iki basamakli hekzadesimal sayilarla ifade edilir. 10'luk sistemdeki bir RGB degerini hekzadesimale çevirirken rakam 16'ya bölünerek kaç tane 16 içerdigi bulunur. Bulunan bu deger, iki basamaktan soldakini verir. Arta kalan deger ise sagdaki basamagi verir. Örnek olarak (227, 7, 160) RGB degerini çevirecek olursak: 227'de kaç tane 16 var? 14 tane. 14 x 16 = 224 => Geriye 3 kalir. Öyleyse kirmizi degerini bulduk: D3 Yesile gelince, belli zaten: 'ta da 10 tane 16 var, kalan yok => mavi: A0 Yani sonucumuz: D307A0. Bu rengi merak ediyorsaniz, canli bir pembeyi örnek seçtim size... Tüm bunlar çok kafa karistirici geldiyse ya da üsendiyseniz merak etmeyin, sizi de düsünmüsler, RGB degerlerini hekzadesimale çeviren programlar da var... Renkler için ipuçlari: Renkler, renksiz diyebilecegimiz SiYAHtan tüm renklerin biraraya gelmesiyle olusan BEYAZa dek degisir: Siyahin RGB degeri (0,0,0), hekzadesimal degeri de "#000000", Beyazin RGB degeri (255,255,255), hekzadesimal degeri de "#FFFFFF" dir. Renk degerleri düstükçe renk koyulasir.

6 R, G ve B degerleri birbirine esit seçildiginde grinin tonlari elde edilir. Kirmizi ve mavinin esit karisimlarindan pembe-mor tonlari elde edilir. Buna ne kadar çok yesil katarsaniz, renk o kadar açilir. Kirmizi ve yesilin esit karisimlarindan sari elde edilir. Bunun da mavisi azaltildikça rengi koyulasir. Yalniz dikkat, kirmizi ve yesilden de tutumluluk yapmaya kalkarsaniz siyahimsi bir renk elde edebilirsiniz :) Yesil ve mavinin yaklasik esit karisimlarindan ise MS Windows'da "cyan" olarak adlandirilan, turkuaz diyebilecegimiz rengin tonlari ortaya çikar. Fon ve yazi renklerinizi seçtikten sonra, bir de renksiz ekranda denemeyi unutmayin, renkli ekranda gayet okunakli gördügünüz yazilar renksiz ekranlarda kaybolabilir, kontrasta dikkat! Basliklar: H1, H2,.. H6 (heading) Kullanim: <Hn>...</Hn> HTML 2.0 HTML'de alti tane baslik seviyesi tanimlanmistir. Bir baslik elemani, yazi tipi degisikligini yapar, yazinin öncesine ve sonrasina paragraf bosluklari koyar ve basligin çevresinde belli bir aralik kalmasini saglar. Baslik elemanlari, H1 en yüksek (veya en önemli), H6 da en düsük düzey olmak üzere H1, H2, H3, H4, H5 ve H6'dir. Örnegin: Bu en yüksek düzeyde bir baslik Bu da ikinci dereceden bir baslik <H1>Bu en yüksek düzeyde bir baslik</h1> <H2>Bu da ikinci dereceden bir baslik</h2> Baslik elemanlari, paragraflar gibi yazi ve karakter tagleri barindirabilirler, örnegin vurgulu yazi, resimler,.. : Bu da italik üçüncü derece bir baslik <H3>Bu da italik üçüncü derece bir baslik</h3> Basliginiz uzunsa ve pencereye uzun gelen kisminin rastgele alt satira geçmesini istemiyorsaniz sözcuk dizilimi ile ilgili bölüme bakiniz. Basligin içerebildigi özelliklerin bazilari HTML 3.2 <Hn ALIGN=left right center>

7 Örnegin: ALIGN özelligi, basligin yatayda duracagi yeri ayarlamaya yarar. Bu özellikle basligi sola (önceden ayarlanmadiginda otomatik olarak sola dayanir; default), ortaya ya da saga yerlestirebilirsiniz. Bu ortalanmis bir baslik. Bu da biraz yazi. Saga dayali bir baslik Ve biraz daha yazi... <H4 ALIGN=center>Bu ortalanmis bir baslik.</h4>bu da biraz yazi. <H4 ALIGN=right>Saga dayali bir baslik</h4>ve biraz daha yazi... CENTER ve DIV elemanlari, default olan sola dayamayi degistirebilirler, basligin burada anlatilan ALIGN özelligi de bunlarla tanimlanan genel yerlestirmeyi degistirebilir. Paragraflar: P Kullanim: ...() HTML 2.0 elemani, bir paragrafi tanimlamak için kullanilir. Paragraf elemanlari, basliklar gibi yazi ve karakter tagleri barindirabilirler, örnegin vurgulu yazi, resimler,.. Örnek: Paragraftan önce bir baslik Ilk paragrafin metni. Bu da ikinci paragrafin metni. <H3>Paragraftan önce bir baslik</h3> Ilk paragrafin metni. Bu da ikinci paragrafin metni. Aslinda baslik elemanini, kendisinden sonra bir paragraf konmasi özelligini tasidigindan ilk paragrafa gerek yoktu. Bir sonraki elemanina dek olan metnin o anki paragrafa dahil oldugu kabul edilir. Bu, SGML'nin gibi bazi bitis taglerinin içerikten anlasildigi durumlarda kullanilmamasina izin vermesine bir örnektir. Paragrafinizdaki bazi satirlarin pencereye uzun gelen kisminin kesilip alt satira geçmesini istemiyorsaniz sözcuk dizilimi ile ilgili bölüme bakiniz.

8 Paragrafin içerebildigi özelliklerin bazilari HTML 3.0 Paragraflar genelde sola dayalidir. ALIGN özelligi, paragrafin yatayda duracagi yeri ayarlamaya yarar, bununla paragrafi sola (Önceden ayarlanmadiginda otomatik olarak sola dayali olur; default), saga dayayabilir ya da ortalayabilirsiniz. Örnegin: Bu ortalanmis bir paragraf Bu ise saga dayali bir paragraf... Bu ortalanmis bir paragraf Bu ise saga dayali bir paragraf... HTML 3.0'da tanimlanmis diger bazi paragraf özelliklerini (NOWRAP dahil) Netscape 3.0b4 henüz desteklemediginden burada bahsi geçmiyor. Satir Kesmeleri: BR Kullanim: HTML 2.0 elemani, satiri bulundugu yerden kesip alt satira geçirerek browser'da metnin görüntülenisi üzerinde kontrol saglar. Örnegin: Bulut mu olsam, gemi mi yoksa, Balik mi olsam, yosun mu yoksa? Ne o, ne o, ne o. Deniz olunmali ogul, Bulutuyla, gemisiyle, baligiyla, yosunuyla. Bulut mu olsam, gemi mi yoksa, Balik mi olsam, yosun mu yoksa? Ne o, ne o, ne o. Deniz olunmali ogul, Bulutuyla, gemisiyle, baligiyla, yosunuyla. Önceden sekillendirilmis metin: PRE Kullanim: <PRE>...</PRE>

9 HTML 2.0 <PRE> tag'i tarafindan sinirlandirilan metin, fiks tipte bir fontla (tüm karakterler esit genislikte), oldugu gibi görüntülenir, yani tüm bosluklariyla, tab'leriyle, satir sonlariyla. Bu eleman, bir metni, sekillendirilmis sekliyle sunmaniza olanak verir (PREformatted text). Bu elemanin disindaki metinlerde pespese birden fazla bosluklar tek bosluga indirgenir, Return'ler para etmez, onlar da birer bosluga indirgenir, satirlar browser pencere genisligine göre otomatik olarak kesilir (asagidaki sözcük dizilimi kisminda bu sonuncuyla ilgili baska elemanlar bulacaksiniz). /\ /[]\ Home sweet home... / \ / [][] \ _ Evim güzel evim :) [] _ <PRE> /\ /[]\ Home sweet home... / \ / [][] \ _ Evim güzel evim :) [] _ </PRE> PRE'nin diger tag'lerle iliskileriyle ilgili birkaç nokta: PRE tag'leri arasindaki satir kesmeleri (BR) yeni satirbasina götürür. Baslangiç ve bitis PRE tag'lerinin beraberinde otomatik olarak birer BR bulunur. tag'lerini kullanmaktan kaçinilmalidir ama browser'larin bunlari satir kesmesine dönüstürmesi tavsiye edilmistir. Link'ler ve yazi tipi elemanlari kullanilabilir.

10 FORM elemanlari yer alabilir. Baslik elemanlari, listeler, tablolarin bulunmasi HTML 3.0'da önerilmese de Netscape tarafindan bu elemanlarin da PRE tag'leri arasinda bulunmasi desteklenmektedir. Sözcük Dizilimi (Satirin browser penceresinin boyutuna göre kesilmesi) Sözcük Dizilimi: Kullanim: sözcük_1 sözcük_2 Browser'lar satirlari pencereye sigmalari için bosluk karakterinin bulundugu yerlerden keserler. Bir satirin belli bir yerden kesilmesini istemiyorsaniz, yani "non-breaking space" karakterini kullanabilirsiniz: BU YAZI ANCAK BURADAN: KESiLEBiLiR, DiGER BOSLUKLARDAN KESiLMESiNi ÖNLEDiM :) <H1>BU YAZI ANCAK BURADAN: KESiLEBiLiR, DiGER BOSLUKLARDAN KESiLMESiNi ÖNLEDiM& nbsp;:)</h1> Browser'inizin penceresini istediginiz kadar daraltin, bu yazilar baska yerden kesilmeyecek :) Sözcük Dizilimi: NOWRAP Kullanim: , <H2 NOWRAP> HTML 3.0 karakterine bir alternatif, HTML 3.0'in satirin olmadik yerden kesilmesini önleyen NOWRAP özelligini kullanmaktir, satirlarda istenen yerlerde ile alt satira geçilebilir: Bu paragrafi NOWRAP özelligini kullanarak yazdigimdan satir sonlari ancak benim istedigim yerlerde olacak, örnegin bir tane suraya koyalim... Bu paragrafi NOWRAP özelligini kullanarak yazdigimdan satir sonlari ancak benim istedigim yerlerde olacak, örnegin bir tane suraya koyalim... Yalniz, gördügüm kadariyla Netscape 3.0b4 NOWRAP özelligini henüz desteklemiyor, örnegim çalismadigina göre :) Sözcük Dizilimi: NOBR ve WBR

11 Kullanim: ..., Netscape Netscape, satirlarin ancak istenen yerlerden kesilmesini saglamak için iki tag içeriyor: ... ve . NOBR, tagin baslangiç ve bitisi arasindaki metinde sözcüklerin pencereye göre dizilmesini önlüyor, WBR de gerektiginde satirin bölünebilecegi yeri belirlemeye yariyor (where to break). Yukaridaki örnegi bir de Netscape'e özgü bu taglerle denersek: Bu paragrafi NOBR özelligini kullanarak yazdigimdan satir sonlari ancak benim istedigim yerlerde olacak, örnegin bir tane suraya koyalim... Bu paragrafi NOBR özelligini kullanarak yazdigimdan satir sonlari ancak benim istedigim yerlerde olacak, örnegin bir tane suraya koyalim... Gördügünüz gibi HTML standart olmadigindan ayni isi gören, üçü de farkli yerlerde geçerli olan üç farkli kullanim olabiliyor... Seçim size kalmis... Bu sayfa en son 08/11/ :40:02 tarihinde degistirilmistir. Ortalama: CENTER Kullanim: <CENTER>...</CENTER> HTML 3.2 CENTER'in baslangiç ve bitis tagleri arasindaki tüm satirlar browser penceresinin sol ve sag kenarina göre ortalanir. Örnegin simdiki paragrafi ortalayarak devam edelim. HTML 3.0 standartlarindaki varken Netscape'e özgü bu elemani kullanmaya gerek olmadigi düsünülebilir. CENTER'in özelligi daha genel olmasi, baslangiç ve bitisi arasindaki basliklar, resimler gibi diger elemanlari da ortalamasi. Yoksa basliklarin da kendi ortalanma özellikleri (örnegin <H2 ALIGN=center>) var, saga/sola dayama özelliklerinin bulundugu gibi. <CENTER>Örnegin simdiki paragrafi......özelliklerinin bulundugu gibi.</center> DIV Kullanim: <DIV ALIGN=left center right>...</div> HTML 3.2

12 Çizgi: HR (Horizontal Rule) Kullanim: <HR> HTML 2.0 HR elemani, bir sayfadaki bölümleri birbirinden ayirmaya yarayan bir çizgidir. Basit kullanimini bu sayfalarda da görüyorsunuz. Ek özellikler: Netscape <HR SIZE=sayi> Çizginin kalinligini ayarlamaya yarar. Buradaki sayi, piksel cinsindendir. <HR WIDTH=sayi yüzde> Bu özellik eklenmediginde çizginin uzunlugu her zaman sayfaninki kadar olur. Sayi olarak belirtildiginde uzunlugu SIZE'daki gibi piksel olarak belirlenmis olur. Yüzde olarak ise dokümanin genisliginin yüzdesi olarak atanmis olur. <HR ALIGN=left right center> Çizginin uzunlugunu sayfaninkinden kisa yaptiktan sonra çizgiyi sayfada sola/saga dayayabilir ya da ortalayabilirsiniz. <HR NOSHADE> Çizginizin üç boyut etkisi veren gölgelerinin olmasini istemiyorsaniz bu özelligi kullanabilirsiniz. Örnekler: <HR WIDTH=80%> <HR SIZE=5 WIDTH=60%> <HR SIZE=10 WIDTH=40%> <HR> <HR NOSHADE WIDTH=400 ALIGN=left> Hypertext linkleri: A (anchor)

13 Kullanim: <A HREF="..." NAME="..." TITLE="...">...</A> HTML 2.0 <A> elemani, "hypertext link"lerinin baslangicini ve/veya gidecekleri yeri tanimlamaya yarar. Örnek: Bornova Web Server'inda Ege Üniversitesi ögrencilerinin kisisel sayfalarini bulabilirsiniz. <A HREF=" Web Server</A>'inda Ege Üniversitesi ögrencilerinin kisisel sayfalarini bulabilirsiniz. Baslangiç ve bitis tag'leri arasindaki metin, göndereceginiz yerin adini tanimlar. Koydugunuz baglanti, seçen kullaniciyi HREF özelligi ile belirlediginiz yere gönderir. Baslangiç ve bitis tag'leri arasina <IMG> elemaniyla tanimladiginiz resimleri de koyabilirsiniz. A elemaninin içerebildigi özelliklerin bazilari HTML 2.0 <A HREF="..."> HREF özelligi, anchor'in bir hypertext linkinin baslangici (etiketi) olarak is gördügünü tanimlar. Linkin götürdügü yer Universal Resource Identifier (URI) ifade sekliyle belirtilen HREF ile tanimlanir. <A NAME="..."> Bu özellik, hypertext baglantilarinda kullanilmak üzere bir isim tanimlamaya yarar. Bu tanim, varilacak yerde yapilir. Örnegin, fon renkleri ile ilgili yazdigim sayfadaki: <H3><A NAME="renk">Renkler için ipuçlari:</a></h3> Renkler, renksiz diyebilecegimiz SiYAHtan tüm renklerin biraraya gelmesiyle olusan BEYAZa dek degisir:... ile, fon.htm sayfasindaki "Renkler için ipuçlari" basligina bir isim ("renk") tanimladim. Bu basligin bulundugu yere götüren bir link koymak istedigimde: Dilerseniz <A HREF="fon.htm#renk">renklerin kullanimi ile ilgili hazirladigim ipuçlari</a>ndan yararlanabilirsiniz. Ipuçlarimi merak edenler için :) Dilerseniz renklerin kullanimi ile ilgili hazirladigim ipuçlarindan yararlanabilirsiniz. <A TITLE="...">

14 Bu sadece bilgi verir ve HREF özelligi ile belirlenen nesneyi açiklar. Grafikler, salt metinden olusan dokümanlar ya da Gopher menüleri gibi basligi olmayan nesneler için kullanilabilir. Resimler: IMG (Image) elemani Kullanim: <IMG SRC="..."> HTML 2.0 <IMG> tag'i, html dokümanina in-line grafikler yerlestirmek için kullanilir. Örnek: <IMG SRC="konak.gif" ALT="Izmir Konak Meydani"> In-line resim gösteremeyen browser'lar, ALT özelligini içermiyorsa IMG elemanini yok sayarlar. Bazi browser'lar ise in-line resimleri görüntüleyemezler ama link konulmus resimleri gösterebilirler (veya yazdirabilirler). Eger resim önemli bir resimse in-line koymak yerine link koymak tercih edilebilir. Ama sadece dekoratifse IMG elemani uygundur. IMG elemaninin özellikleri HTML 2.0 <IMG SRC="..."> (Source) SRC özelligi, dokümana yerlestirilecek resmin URI'inin belirtilmesine yarar. Kullanimi <A> elemaninin HREF özelligi ile aynidir. SRC, bulunmasi sart olan bir özelliktir. <IMG ALT="..."> (Alternate text) Metin tabanli browser'larda resmin yerine alternatif bir yazi gösterilmesini saglayan, kullanimi istege bagli olan bir özelliktir. Resim ayni zamanda bir linki temsil ediyorsa bu özelligin kullanilmasi tavsiye edilir. ALT metni, "ö" (ö) gibi özel karakterler içerebilir ama markup içeremez. Yukaridaki örnek bu özelligin kullanimini da gösteriyor. <IMG ALIGN=top middle bottom left right> Bu özellikleri örnekler üzerinde açiklamak daha uygun olacak sanirim: ALIGN=top, satirin üst siniri ile resmin üst kenarini ayni hizaya getirir. ALIGN=middle ise, satirin alt çizgisi ile resmin ortasindan geçen çizgiyi ayni hizaya getirir. Asagida bulacaginiz Netscape'in absmiddle'i ise satirin ortasi ile resmin ortasini ayni hizaya getirir.

15 ALIGN=bottom da, Netscape'in baseline'i da ayni isi görür. satirin alt çizgisi ile resmin alt kenarini ayni hizaya getirir. Simdi gelelim ALIGN=left'ee... ALIGN=left özelligi olan bir resim, bir sonra bulunan boslukta sol kenara dayanacak ve yazi resmin saginda devam edecektir. Benim bu örnekte yazdigim: Simdi gelelim ALIGN=left'ee... <IMG SRC="karo.gif" ALIGN=left>... a göre resmin sol kenari bos bulacagi bir alt satira gidip sola dayanmasi gerekiyordu ki söz dinlemis gözüküyor :) Ama eger satirin basinda resmi çagirsaydim: <IMG SRC="karo.gif" ALIGN=left> bla bla bla... bla bla bla... Burada gördügünüz gibi ilk buldugu bos sol kenar o satirda olacagindan resim alt satira geçmeyecekti. Yazi da yine resmin saginda devam ediyor... ALIGN=right'a gelince... Mantigi ALIGN=left ile ayni. Yani resim, sag kenarda buldugu ilk bosluga gidip yerlesiyor ve yazi resmin solunda devam ediyor. Ben burada resmi yine ilk satirin basinda çagirmadigimdan resim yine ikinci satirda buldugu bos sag kenara gidip dayandi... Gördügünüz gibi ALIGN=left ve right özellikleri bir metnin içine küçük resimler yerlestirmeye olanak veriyor. <IMG SRC="..." ISMAP> Image map'ler, kullanicinin çesitli kaynaklara ulasmasini saglayan, bir bakima harita görevi gören resimlerdir. ISMAP özelligi, bir resmin image map oldugunu gösterir. Bu durumda IMG elemani, saglanan baglantilarin etiketi olmus olur. Kullanici resmin üzerine tikladiginda tikladigi pikselin resim içindeki yeri server'a iletilir. Örnegin: <A HREF=" <IMG SRC="kibris.gif"></A> HTML 3.0 <IMG WIDTH=sayi HEIGHT=sayi> Bu iki özellikle resmin önerilen genisligi ve yüksekligi belirtilir, birimi default olarak pikseldir. Örnegin, yukaridaki orijinal hali ile 26x26 piksel olan karo.gif'i: <IMG SRC="karo.gif" WIDTH=18 HEIGHT=18> seklinde tanimlarsam görüldügü gibi browser'in resmi küçültmesini saglamis olurum. Tabi bu islemle resmi de bozmus oluyorum :)

16 Resmin gerçek genislik ve yüksekligi de belirtilebilir bu iki özellikle. Resmin boyutlarini neden elimizle yazalim ki derseniz, browser'in resmin boyutlarini hesaplamasina gerek kalmayacagindan resmin daha hizli yüklenmesini saglamis olursunuz. <IMG... UNITS=pixels en> Bu özellikle genislik ve yükseklik özelliklerinin birimini degistirebilirsiniz. Iki deger alabilir: ilki, zaten default olan UNITS=pixels, digeri de UNITS=en (noktanin yarisi diye geçiyor). Netscape <IMG ALIGN=absmiddle baseline absbottom texttop> Yukarida HTML 3.0 dahilinde bulunan ALIGN seçeneklerine ek olarak dört seçenek daha tanimlamis Netscape'çiler. Bunlari da örneklerle açiklamak daha uygun olacak: ALIGN=absmiddle, aslinda ALIGN=middle 'in yapmasi gerekeni yapiyor, yani resmin ortasi ile satirin ortasini ayni hizaya getiriyor. (middle, satirin alti ile hizaliyor.) ALIGN=baseline, ALIGN=bottom ile ayni isi görür, yani satirin alt çizgisi ile resmin alt kenarini ayni hizaya getirir. Bu ismi daha uygun görmüsler. ALIGN=absbottom, da aslinda ALIGN=bottom 'in yapmasi beklenen hizalamayi yapiyor, yani satirin alt siniri ile resmin alt kenarini ayni hizaya getiriyor. ALIGN=texttop ise, çogu kisinin ALIGN=top 'tan bekledigini yapar, yani resmin üst kenarini satridaki en yüksek yazi karakterinin tepesi ile ayni hizaya getirir. Bu genelde (ama her zaman degil) ALIGN=top ile ayni sonucu verir. <IMG BORDER=sayi> Bu özellik, kisiye resmin etrafindaki çerçevenin kalinligini ayarlama olanagi verir. Link olmayan bir resme bu özellik atandiginda çikan sonuç budur: <IMG SRC="karo.gif" BORDER=4> Link olan bir resmin ise default olarak link renginde bir çerçevesi vardir. Bu çerçevenin gözükmesini istemiyorsaniz, kullanicinin biraz kafasini karistirmak pahasina BORDER=0 ile çerçeveyi kaldirabilirsiniz. <IMG HSPACE=sayi VSPACE=sayi> Metin içine yerlestirilmis resimlerin metne yapismasi istenmiyorsa bu özellikler kullanilabilir. VSPACE (Vertical Space), resmin alt ve üstündeki dikey bosluklari, HSPACE (Horizontal Space) de resmin sol ve sagindaki yatay bosluklari ayarlamaya yarar. Burada kullanacaginiz rakam yine piksel cinsindendir.

17 Örnegin: Suraya biraz yazi yazalim... Gördügünüz gibi bu özellikleri atamazsak yazi resme yapisiyor. Resimle yazi arasinda biraz boslu bulunsun istiyorsak: iste 6 piksellik bir bosluk... <IMG SRC="kare.gif">Suraya biraz yazi... <IMG SRC="kare.gif" HSPACE=6>iste 6 piksellik... Bu sayfa en son 08/11/ :40:26 tarihinde degistirilmistir. Görünüse ve kullanilis amacina göre yazi tipleri Görünüse göre HTML yazi tipleri Amaca göre HTML yazi tipleri Font boyutlarini ayarlama tag'i Görünüse göre yazi tipleri Görünüse göre yazi tipleri derken, font stillerini kastettim, yani italik, kalin gibi fiziksel tanimlamalar. Asagida her bir fiziksel yazi tipinin açiklamasini mümkün oldugunca o y a z i t i p iy l e yazmaya çalistim. Basliklarda kisaltmalarin kökenlerini de belirttim. NOT: Bu paragrafin HTML kodunu asagida, fiziksel yazi tipi tanimlarinin sonunda bulabilirsiniz... NOT: Bu tag'ler içiçe kullanilabilir. Boldface: ... elemani tarafindan sarili olan metin, kalin yazi tipiyle görüntülenir. Italic: ... tag'leri arasindaki metin italik fontla yazdirilir. TeleType: <TT>...</TT> Bu tag'lerin arasindaki metin, daktilo tipi fiks bir fontla (her karakterin genisligi ayni) yazilir. Underline: ... Tanima göre elemanlarinin arasindaki metin, alti çizili yazdirilir. Yalniz bu tag pek desteklenmemektedir, su an bu yazilari alti çizili olmadan görüyorsaniz farketmissinizdir, çünkü alti çizili metinler baglantilari belirtmek üzere ayrilmistir. Strike through: <S>...</S> HTML 3.0'da yeni olan bu eleman, arasindaki metnin, üstü ortasindan geçen bir çizgiyle çizili görüntülenecegini belirtir. Netscape 3.0b4'te desteklenmiyor.

18 Big print: <BIG>...</BIG> Bu tag'ler, aralarindaki yazinin normal metinden daha büyük olacagini belirtir. HTML 3.0'da yeni. Small print: ... Bu tag'lerin arasindaki metin ise normal metinden daha küçük fontla yazilir. HTML 3.0'da yeni. Subscript: ... tag'leri arasindaki metin, mümkünse normal metinden daha küçük bir fontla, alt yazi olarak yazilir: P 2 Superscript: ... tag'leri arasindaki metin, mümkünse normal metinden daha küçük bir fontla, üst yazi (üs) olarak yazilir: H +1 Görünüse göre yazi tipleri derken, font stillerini kastettim, yani <TT>italik</TT>, <TT>kalin</TT> gibi <BIG>f<BIG>iz<BIG>ik</BIG>se</BIG>l</BIG> tanimlamalar. Asagida her bir fiziksel yazi tipinin açiklamasini mümkün oldugunca o yazi tipiyle yazmaya çalistim... Amaca göre yazi tipleri HTML'de fiziksel font stili elemanlarindan baska, amaca göre yazi tipleri diye belirttigim, örnegin adres yazarken ya da alinti yaparken font stilini bu amaçlara göre degistirmeye yarayan, o arada da bu amaçla adlandirilan anlamli, bir bakima mantiksal tag'ler var. Bu tag'ler, bu amaçlar için kullanilacak yazi tipi seçimini browser'a birakirlar ve göreceginiz gibi yazi tipini degistirmekten öte, doküman tarayan programlara da hitap edebilecek bir anlam da belirtirler. Asagida her bir mantiksal yazi tipinin açiklamasini o yazi tipiyle yazdim, herbirinin anlamini da basligina eklemeye çalistim. Emphasis: ... Vurgu vermek istediginiz yazilar için tanimlanmis olan bu tag'lerin arasindaki metin genelde italik olarak görüntülenir. Citation: <CITE>...</CITE> Kaynak göstermek için... Genelde italik. ... Güçlü vurgu için... Genelde kalin (bold) yazi tipi. <ADDRESS>...</ADDRESS> Adres, imza ya da dokümanin yazari gibi bilgileri belirtmek için kullanilir ve tipik olarak dokümanin basina ya da sonuna yerlestirilir. <CODE>...</CODE>

19 Program kodu örnegi için. Tipik olarak fiks tipte bir fontla görüntülenir (karakterler esit genislikte). PRE ile karistirmayin. <SAMP>...</SAMP> Bir dizi literal karakteri gösterir. Keyboarded: <KBD>...</KBD> KBD, kullanici tarafindan girilen (keyboarded) metni gösterir. Bir kullanim kilavuzunda kullanilabilir. Variable: <VAR>...</VAR> Bir degisken adini (variable name) belirtmeye yarar. Definition: <DFN>...</DFN> Bir terimin tanimini açiklarken. HTML 3.0. Quotation: <Q>...</Q> Kisa alintilar için... HTML 3.0'la ilk kez tanimlanmis, Netscape 3.0b4 desteklemiyor. Tanima göre alintinin basina ve sonuna tirnak isaretlerini ekliyormus. Blockquote: <BLOCKQUOTE>...</BLOCKQUOTE> veya <BQ>...</BQ> HTML 2.0'daki adiyla BLOCKQUOTE, HTML 3.0'daki adiyla ise BQ tag'i, uzun alintilariniz için... Netscape bu uzun alintilari, basina ve sonuna paragraf (P) ekleyerek ve sol kenari daha saga alarak görüntülüyor. <NOTE>...</NOTE> NOTE elemani, teknik dokümanlardaki uyari, ikaz gibi ihtarlari bildirmek için HTML 3.0'da tanimlanmis. Font boyutlarini ayarlama HTML'de artik font boyutlarini ayarlamanin birden fazla yolu var: 1. Basliklar: H FONT tag'inin SIZE özelligi 3. BIG ve SMALL tag'leri font color'i fon.html'ye gonder. Kullanim: <>

20 içerebildigi özelliklerin bazilari <> Örnegin: Bu sayfa en son 08/11/ :36:22 tarihinde degistirilmistir. Görünüse ve kullanilis amacina göre yazi tipleri Görünüse göre HTML yazi tipleri Amaca göre HTML yazi tipleri Font boyutlarini ayarlama tag'i Görünüse göre yazi tipleri Görünüse göre yazi tipleri derken, font stillerini kastettim, yani italik, kalin gibi fiziksel tanimlamalar. Asagida her bir fiziksel yazi tipinin açiklamasini mümkün oldugunca o y a z i t i p iy l e yazmaya çalistim. Basliklarda kisaltmalarin kökenlerini de belirttim. NOT: Bu paragrafin HTML kodunu asagida, fiziksel yazi tipi tanimlarinin sonunda bulabilirsiniz... NOT: Bu tag'ler içiçe kullanilabilir. Boldface: ... elemani tarafindan sarili olan metin, kalin yazi tipiyle görüntülenir. Italic: ... tag'leri arasindaki metin italik fontla yazdirilir. TeleType: <TT>...</TT> Bu tag'lerin arasindaki metin, daktilo tipi fiks bir fontla (her karakterin genisligi ayni) yazilir. Underline: ... Tanima göre elemanlarinin arasindaki metin, alti çizili yazdirilir. Yalniz bu tag pek desteklenmemektedir, su an bu yazilari alti çizili olmadan görüyorsaniz farketmissinizdir, çünkü alti çizili metinler baglantilari belirtmek üzere ayrilmistir.

21 Strike through: <S>...</S> HTML 3.0'da yeni olan bu eleman, arasindaki metnin, üstü ortasindan geçen bir çizgiyle çizili görüntülenecegini belirtir. Netscape 3.0b4'te desteklenmiyor. Big print: <BIG>...</BIG> Bu tag'ler, aralarindaki yazinin normal metinden daha büyük olacagini belirtir. HTML 3.0'da yeni. Small print: ... Bu tag'lerin arasindaki metin ise normal metinden daha küçük fontla yazilir. HTML 3.0'da yeni. Subscript: ... tag'leri arasindaki metin, mümkünse normal metinden daha küçük bir fontla, alt yazi olarak yazilir: P 2 Superscript: ... tag'leri arasindaki metin, mümkünse normal metinden daha küçük bir fontla, üst yazi (üs) olarak yazilir: H +1 Görünüse göre yazi tipleri derken, font stillerini kastettim, yani <TT>italik</TT>, <TT>kalin</TT> gibi <BIG>f<BIG>iz<BIG>ik</BIG>se</BIG>l</BIG> tanimlamalar. Asagida her bir fiziksel yazi tipinin açiklamasini mümkün oldugunca o yazi tipiyle yazmaya çalistim... Amaca göre yazi tipleri HTML'de fiziksel font stili elemanlarindan baska, amaca göre yazi tipleri diye belirttigim, örnegin adres yazarken ya da alinti yaparken font stilini bu amaçlara göre degistirmeye yarayan, o arada da bu amaçla adlandirilan anlamli, bir bakima mantiksal tag'ler var. Bu tag'ler, bu amaçlar için kullanilacak yazi tipi seçimini browser'a birakirlar ve göreceginiz gibi yazi tipini degistirmekten öte, doküman tarayan programlara da hitap edebilecek bir anlam da belirtirler. Asagida her bir mantiksal yazi tipinin açiklamasini o yazi tipiyle yazdim, herbirinin anlamini da basligina eklemeye çalistim. Emphasis: ... Vurgu vermek istediginiz yazilar için tanimlanmis olan bu tag'lerin arasindaki metin genelde italik olarak görüntülenir. Citation: <CITE>...</CITE> Kaynak göstermek için... Genelde italik. ... Güçlü vurgu için... Genelde kalin (bold) yazi tipi. <ADDRESS>...</ADDRESS>

22 Adres, imza ya da dokümanin yazari gibi bilgileri belirtmek için kullanilir ve tipik olarak dokümanin basina ya da sonuna yerlestirilir. <CODE>...</CODE> Program kodu örnegi için. Tipik olarak fiks tipte bir fontla görüntülenir (karakterler esit genislikte). PRE ile karistirmayin. <SAMP>...</SAMP> Bir dizi literal karakteri gösterir. Keyboarded: <KBD>...</KBD> KBD, kullanici tarafindan girilen (keyboarded) metni gösterir. Bir kullanim kilavuzunda kullanilabilir. Variable: <VAR>...</VAR> Bir degisken adini (variable name) belirtmeye yarar. Definition: <DFN>...</DFN> Bir terimin tanimini açiklarken. HTML 3.0. Quotation: <Q>...</Q> Kisa alintilar için... HTML 3.0'la ilk kez tanimlanmis, Netscape 3.0b4 desteklemiyor. Tanima göre alintinin basina ve sonuna tirnak isaretlerini ekliyormus. Blockquote: <BLOCKQUOTE>...</BLOCKQUOTE> veya <BQ>...</BQ> HTML 2.0'daki adiyla BLOCKQUOTE, HTML 3.0'daki adiyla ise BQ tag'i, uzun alintilariniz için... Netscape bu uzun alintilari, basina ve sonuna paragraf (P) ekleyerek ve sol kenari daha saga alarak görüntülüyor. <NOTE>...</NOTE> NOTE elemani, teknik dokümanlardaki uyari, ikaz gibi ihtarlari bildirmek için HTML 3.0'da tanimlanmis. Font boyutlarini ayarlama HTML'de artik font boyutlarini ayarlamanin birden fazla yolu var: 1. Basliklar: H FONT tag'inin SIZE özelligi 3. BIG ve SMALL tag'leri font color'i fon.html'ye gonder. Kullanim: <>

23 içerebildigi özelliklerin bazilari <> Örnegin: Bu sayfa en son 08/11/ :36:22 tarihinde degistirilmistir. Görünüse ve kullanilis amacina göre yazi tipleri Görünüse göre HTML yazi tipleri Amaca göre HTML yazi tipleri Font boyutlarini ayarlama tag'i Görünüse göre yazi tipleri Görünüse göre yazi tipleri derken, font stillerini kastettim, yani italik, kalin gibi fiziksel tanimlamalar. Asagida her bir fiziksel yazi tipinin açiklamasini mümkün oldugunca o y a z i t i p iy l e yazmaya çalistim. Basliklarda kisaltmalarin kökenlerini de belirttim. NOT: Bu paragrafin HTML kodunu asagida, fiziksel yazi tipi tanimlarinin sonunda bulabilirsiniz... NOT: Bu tag'ler içiçe kullanilabilir. Boldface: ... elemani tarafindan sarili olan metin, kalin yazi tipiyle görüntülenir. Italic: ... tag'leri arasindaki metin italik fontla yazdirilir. TeleType: <TT>...</TT> Bu tag'lerin arasindaki metin, daktilo tipi fiks bir fontla (her karakterin genisligi ayni) yazilir. Underline: ...

24 Tanima göre elemanlarinin arasindaki metin, alti çizili yazdirilir. Yalniz bu tag pek desteklenmemektedir, su an bu yazilari alti çizili olmadan görüyorsaniz farketmissinizdir, çünkü alti çizili metinler baglantilari belirtmek üzere ayrilmistir. Strike through: <S>...</S> HTML 3.0'da yeni olan bu eleman, arasindaki metnin, üstü ortasindan geçen bir çizgiyle çizili görüntülenecegini belirtir. Netscape 3.0b4'te desteklenmiyor. Big print: <BIG>...</BIG> Bu tag'ler, aralarindaki yazinin normal metinden daha büyük olacagini belirtir. HTML 3.0'da yeni. Small print: ... Bu tag'lerin arasindaki metin ise normal metinden daha küçük fontla yazilir. HTML 3.0'da yeni. Subscript: ... tag'leri arasindaki metin, mümkünse normal metinden daha küçük bir fontla, alt yazi olarak yazilir: P 2 Superscript: ... tag'leri arasindaki metin, mümkünse normal metinden daha küçük bir fontla, üst yazi (üs) olarak yazilir: H +1 Görünüse göre yazi tipleri derken, font stillerini kastettim, yani <TT>italik</TT>, <TT>kalin</TT> gibi <BIG>f<BIG>iz<BIG>ik</BIG>se</BIG>l</BIG> tanimlamalar. Asagida her bir fiziksel yazi tipinin açiklamasini mümkün oldugunca o yazi tipiyle yazmaya çalistim... Amaca göre yazi tipleri HTML'de fiziksel font stili elemanlarindan baska, amaca göre yazi tipleri diye belirttigim, örnegin adres yazarken ya da alinti yaparken font stilini bu amaçlara göre degistirmeye yarayan, o arada da bu amaçla adlandirilan anlamli, bir bakima mantiksal tag'ler var. Bu tag'ler, bu amaçlar için kullanilacak yazi tipi seçimini browser'a birakirlar ve göreceginiz gibi yazi tipini degistirmekten öte, doküman tarayan programlara da hitap edebilecek bir anlam da belirtirler. Asagida her bir mantiksal yazi tipinin açiklamasini o yazi tipiyle yazdim, herbirinin anlamini da basligina eklemeye çalistim. Emphasis: ... Vurgu vermek istediginiz yazilar için tanimlanmis olan bu tag'lerin arasindaki metin genelde italik olarak görüntülenir. Citation: <CITE>...</CITE> Kaynak göstermek için... Genelde italik.

25 ... Güçlü vurgu için... Genelde kalin (bold) yazi tipi. <ADDRESS>...</ADDRESS> Adres, imza ya da dokümanin yazari gibi bilgileri belirtmek için kullanilir ve tipik olarak dokümanin basina ya da sonuna yerlestirilir. <CODE>...</CODE> Program kodu örnegi için. Tipik olarak fiks tipte bir fontla görüntülenir (karakterler esit genislikte). PRE ile karistirmayin. <SAMP>...</SAMP> Bir dizi literal karakteri gösterir. Keyboarded: <KBD>...</KBD> KBD, kullanici tarafindan girilen (keyboarded) metni gösterir. Bir kullanim kilavuzunda kullanilabilir. Variable: <VAR>...</VAR> Bir degisken adini (variable name) belirtmeye yarar. Definition: <DFN>...</DFN> Bir terimin tanimini açiklarken. HTML 3.0. Quotation: <Q>...</Q> Kisa alintilar için... HTML 3.0'la ilk kez tanimlanmis, Netscape 3.0b4 desteklemiyor. Tanima göre alintinin basina ve sonuna tirnak isaretlerini ekliyormus. Blockquote: <BLOCKQUOTE>...</BLOCKQUOTE> veya <BQ>...</BQ> HTML 2.0'daki adiyla BLOCKQUOTE, HTML 3.0'daki adiyla ise BQ tag'i, uzun alintilariniz için... Netscape bu uzun alintilari, basina ve sonuna paragraf (P) ekleyerek ve sol kenari daha saga alarak görüntülüyor. <NOTE>...</NOTE> NOTE elemani, teknik dokümanlardaki uyari, ikaz gibi ihtarlari bildirmek için HTML 3.0'da tanimlanmis. Font boyutlarini ayarlama HTML'de artik font boyutlarini ayarlamanin birden fazla yolu var: 1. Basliklar: H FONT tag'inin SIZE özelligi 3. BIG ve SMALL tag'leri font color'i fon.html'ye gonder.

26 Kullanim: <> içerebildigi özelliklerin bazilari <> Örnegin: Bu sayfa en son 08/11/ :36:22 tarihinde degistirilmistir. Görünüse ve kullanilis amacina göre yazi tipleri Görünüse göre HTML yazi tipleri Amaca göre HTML yazi tipleri Font boyutlarini ayarlama tag'i Görünüse göre yazi tipleri Görünüse göre yazi tipleri derken, font stillerini kastettim, yani italik, kalin gibi fiziksel tanimlamalar. Asagida her bir fiziksel yazi tipinin açiklamasini mümkün oldugunca o y a z i t i p iy l e yazmaya çalistim. Basliklarda kisaltmalarin kökenlerini de belirttim. NOT: Bu paragrafin HTML kodunu asagida, fiziksel yazi tipi tanimlarinin sonunda bulabilirsiniz... NOT: Bu tag'ler içiçe kullanilabilir. Boldface: ... elemani tarafindan sarili olan metin, kalin yazi tipiyle görüntülenir. Italic: ... tag'leri arasindaki metin italik fontla yazdirilir. TeleType: <TT>...</TT>

27 Bu tag'lerin arasindaki metin, daktilo tipi fiks bir fontla (her karakterin genisligi ayni) yazilir. Underline: ... Tanima göre elemanlarinin arasindaki metin, alti çizili yazdirilir. Yalniz bu tag pek desteklenmemektedir, su an bu yazilari alti çizili olmadan görüyorsaniz farketmissinizdir, çünkü alti çizili metinler baglantilari belirtmek üzere ayrilmistir. Strike through: <S>...</S> HTML 3.0'da yeni olan bu eleman, arasindaki metnin, üstü ortasindan geçen bir çizgiyle çizili görüntülenecegini belirtir. Netscape 3.0b4'te desteklenmiyor. Big print: <BIG>...</BIG> Bu tag'ler, aralarindaki yazinin normal metinden daha büyük olacagini belirtir. HTML 3.0'da yeni. Small print: ... Bu tag'lerin arasindaki metin ise normal metinden daha küçük fontla yazilir. HTML 3.0'da yeni. Subscript: ... tag'leri arasindaki metin, mümkünse normal metinden daha küçük bir fontla, alt yazi olarak yazilir: P 2 Superscript: ... tag'leri arasindaki metin, mümkünse normal metinden daha küçük bir fontla, üst yazi (üs) olarak yazilir: H +1 Görünüse göre yazi tipleri derken, font stillerini kastettim, yani <TT>italik</TT>, <TT>kalin</TT> gibi <BIG>f<BIG>iz<BIG>ik</BIG>se</BIG>l</BIG> tanimlamalar. Asagida her bir fiziksel yazi tipinin açiklamasini mümkün oldugunca o yazi tipiyle yazmaya çalistim... Amaca göre yazi tipleri HTML'de fiziksel font stili elemanlarindan baska, amaca göre yazi tipleri diye belirttigim, örnegin adres yazarken ya da alinti yaparken font stilini bu amaçlara göre degistirmeye yarayan, o arada da bu amaçla adlandirilan anlamli, bir bakima mantiksal tag'ler var. Bu tag'ler, bu amaçlar için kullanilacak yazi tipi seçimini browser'a birakirlar ve göreceginiz gibi yazi tipini degistirmekten öte, doküman tarayan programlara da hitap edebilecek bir anlam da belirtirler. Asagida her bir mantiksal yazi tipinin açiklamasini o yazi tipiyle yazdim, herbirinin anlamini da basligina eklemeye çalistim. Emphasis: ...

28 Vurgu vermek istediginiz yazilar için tanimlanmis olan bu tag'lerin arasindaki metin genelde italik olarak görüntülenir. Citation: <CITE>...</CITE> Kaynak göstermek için... Genelde italik. ... Güçlü vurgu için... Genelde kalin (bold) yazi tipi. <ADDRESS>...</ADDRESS> Adres, imza ya da dokümanin yazari gibi bilgileri belirtmek için kullanilir ve tipik olarak dokümanin basina ya da sonuna yerlestirilir. <CODE>...</CODE> Program kodu örnegi için. Tipik olarak fiks tipte bir fontla görüntülenir (karakterler esit genislikte). PRE ile karistirmayin. <SAMP>...</SAMP> Bir dizi literal karakteri gösterir. Keyboarded: <KBD>...</KBD> KBD, kullanici tarafindan girilen (keyboarded) metni gösterir. Bir kullanim kilavuzunda kullanilabilir. Variable: <VAR>...</VAR> Bir degisken adini (variable name) belirtmeye yarar. Definition: <DFN>...</DFN> Bir terimin tanimini açiklarken. HTML 3.0. Quotation: <Q>...</Q> Kisa alintilar için... HTML 3.0'la ilk kez tanimlanmis, Netscape 3.0b4 desteklemiyor. Tanima göre alintinin basina ve sonuna tirnak isaretlerini ekliyormus. Blockquote: <BLOCKQUOTE>...</BLOCKQUOTE> veya <BQ>...</BQ> HTML 2.0'daki adiyla BLOCKQUOTE, HTML 3.0'daki adiyla ise BQ tag'i, uzun alintilariniz için... Netscape bu uzun alintilari, basina ve sonuna paragraf (P) ekleyerek ve sol kenari daha saga alarak görüntülüyor. <NOTE>...</NOTE> NOTE elemani, teknik dokümanlardaki uyari, ikaz gibi ihtarlari bildirmek için HTML 3.0'da tanimlanmis. Font boyutlarini ayarlama HTML'de artik font boyutlarini ayarlamanin birden fazla yolu var: 1. Basliklar: H1-6

29 2. FONT tag'inin SIZE özelligi 3. BIG ve SMALL tag'leri font color'i fon.html'ye gonder. Kullanim: <> içerebildigi özelliklerin bazilari <> Örnegin: Bu sayfa en son 08/11/ :36:22 tarihinde degistirilmistir. LiSTELER Sirasiz Listeler: UL (Unordered List) Kullanim: <UL> (<LH>..</LH>) <LI>.. </UL> HTML 2.0 Sirasiz bir liste, tipik olarak mermili (bulleted) bir listedir. HTML 3.0, asagida bahsi geçen yeni sirasiz liste özellikleriyle ayrica mermileri tayin etmenize, listenin mermisiz olmasina ve listenin maddelerini yatay/dikey olarak birden çok sütuna dizmenize olanak verir. Listenin baslangiç tag'inin <UL> olmasi gerekir. Bunu, kullanimi istege bagli olan bir liste basligi (LH; List Header; kullanimi: <LH>baslik</LH>) ve listenin ilk elemani LI (List Item) izler. Örnegin:

30 Üç beyaz seker tuz un <UL> <LH>Üç beyaz</lh> <LI>seker <LI>tuz <LI>un </UL> Sirasiz listenin içerebildigi özelliklerin bazilari HTML 2.0 <UL COMPACT> Bu özellik, browser'a listeyi daha kompakt, daha sikisik görüntülemesini bildirir. Pratikte, listenin maddeleri arasindaki bosluklari azaltmanin birkaç yolu vardir: maddeler arasindaki dikey araliklari azaltmak, fontu küçültmek, HTML 3.0 hatta maddeler arasindaki satir kesmelerini (BR) kaldirmak. COMPACT özelliginin kullanimiyla ilgili bir örnegi tanim listelerinde bulabilirsiniz. <UL PLAIN> Bu özelligin varligi, mermilerin görüntülenmemesini saglar. Bunu bir örnekle de göstermek isterdim ama Netscape 3.0b4 henüz desteklemiyor... HTML 3.0'in yukarida bahsi geçen diger özellikleri de henüz desteklenmediginden sadece isimlerini verecegim: SRC, listenin mermisi görevini görecek resmin yerinin tanimlanmasi için, WRAP de, WRAP=vert veya WRAP=horiz seklinde, listenin birden fazla sütuna sahip olmasi ve maddelerin bu sütunlara dikey veya yatay dizilmesini belirlemek için HTML 3.0 standartlarinda duyurulmus özellikler... Sirali Listeler: OL (Ordered List) Kullanim: <OL> (<LH>..</LH>) <LI>.. </OL> HTML 2.0 Sirali bir liste, tipik olarak numaralandirilmis maddelerden olusan bir listedir.

31 Listenin baslangiç tag'inin <OL> olmasi gerekir. Istenirse konabilecek olan bir liste basligindan (LH; List Header; kullanimi: <LH>baslik</LH>) sonra listenin maddeleri LI (List Item) gelir. Örnek: Fransizca dersleri 1. selamlasma, tanisma 2. être ve avoir fiilleri 3. simdiki zamanda birkaç fiil <OL> <LH>Fransizca dersleri</lh> <LI>selamlasma, tanisma <LI>être ve avoir fiilleri <LI>simdiki zamanda birkaç fiil </OL> Sirali listenin içerebildigi özelliklere gelince, sirasiz listede oldugu gibi, HTML 3.0'da <OL> 'ye birtakim özellikler eklenmis (UL'deki COMPACT, ayrica rakamlarin bir önceki sirali listenin son rakamindan devam etmesini saglamasi öngörülen CONTINUE ya da istenen bir baslangiç rakaminin atanmasina olanak veren SEQNUM gibi...), fakat Netscape 3.0b4 desteklemiyor örnegin. Tanim Listeleri: DL (Definition List) Kullanim: <DL> (<LH>..</LH>) <DT>.. <DD>... </DL> HTML 2.0 Tanim listesi, bir dizi terim ve sirayla herbirinin tanimlarini içeren bir listedir. Tanim listeleri tipik olarak terim sola gelecek, tanimi da sagina ya da bir alt satira gelecek sekilde sekillendirilmistir. Tanim, tipik olarak terime göre sagda, yani daha içeride yer alir. Alternatif bir format ise, terimi sola dayar, tanimi da terimin sagina, bir ya da daha fazla satira yerlestirir. Eger terim (DT) kendisine ayrilmis DT sütununa (gösterim alaninin üçte biri) sigmazsa, DD kismi bir alt satira geçilerek terim o satirda pencerenin sonuna dek devam eder, ya da soldaki sütunda alt satirlara geçer. Listenin baslangiç tag'inin <DL> olmasi gerekir. Istenirse konabilecek olan bir liste basligini (LH; List Header; kullanimi: <LH>baslik</LH>) terim adlari <DT> (Definition Term) ve terimlerin tanimlari DD (Definition) takibeder. Örnek: Fransizca-Türkçe sözlük avoir

32 être sahip olmak. Ayni zamanda bilesik zamanlarda geçisli fillerin ek fiili. olmak. Ayni zamanda bilesik zamanlarda geçissiz fillerin ek fiili. <DL> <LH>Fransizca-Türkçe sözlük</lh> <DT>avoir <DD>sahip olmak. Ayni zamanda bilesik zamanlarda geçisli fillerin ek fiili. <DT>être <DD>olmak. Ayni zamanda bilesik zamanlarda geçissiz fillerin ek fiili. </DL> Tanim listelerinin içerebildigi özelliklerin bazilari HTML 2.0 <DL COMPACT> Bu özellik, browser'a listeyi daha kompakt, daha sikisik görüntülemesini bildirir. Pratikte, listenin maddeleri arasindaki bosluklari azaltmanin birkaç yolu vardir: maddeler arasindaki dikey araliklari azaltmak, fontu küçültmek, hatta maddeler arasindaki satir kesmelerini (BR) kaldirmak. Tanim listelerinde ayrica sol tarafta duran DT'nin genisligi azaltilabilir. Örnegin yukaridaki örnek tanim listesine COMPACT özelligini eklersek: Fransizca-Türkçe sözlük avoir sahip olmak. Ayni zamanda bilesik zamanlarda geçisli fillerin ek fiili. être olmak. Ayni zamanda bilesik zamanlarda geçissiz fillerin ek fiili. <DL COMPACT> <LH>Fransizca-Türkçe sözlük</lh> <DT>avoir <DD>sahip olmak. Ayni zamanda bilesik zamanlarda geçisli fillerin ek fiili. <DT>être <DD>olmak. Ayni zamanda bilesik zamanlarda geçissiz fillerin ek fiili. </DL> Bu sayfa en son 08/11/ :39:42 tarihinde degistirilmistir. Tablolar: TABLE Kullanim: <TABLE> <TR> <TD>...</TD>.. </TR>.. </TABLE>

33 HTML 3.0 Bir HTML dokümaninda tablo kullanimi, sayfa düzenini satir ve sütunlu bir yapi ile ayarlamaya ya da önceden formatlanmis tablolari görüntülemeye olanak verir. HTML tablolarinin yaratilmasinda birçok tag kullanildigi için her tag'i ayri ayri görecegiz: <TABLE özellikler>...</table> TABLE elemani, diger tablo tag'lerinin tümünü içine alan elemandir ve diger tag'ler bu tag tarafindan sarilmadigi takdirde ihmal edilirler. Tablolar, kullanimi istege bagli olan bir tablo basligi (CAPTION) ve bunu takibeden bir veya daha fazla satirdan olusur. Her satirda bir veya daha fazla hücre vardir. Hücreler iki tiptir: baslik hücreleri (table header; TH) ve veri hücreleri (table data; TD). Hücrelerin içinde birçok HTML elemanini kullanmak mümkündur: basliklar, listeler, paragraflar, formlar,.. hatta tablolar. Tablolar default olarak içeriklerinin kapladigi yere ve browserin o anki pencere genisligine göre boyutlandirilirlar. Tablonun boyutlarini kendiniz ayarlamak istiyorsaniz asagida, TABLE elemaninin özellikleri kisminda bulabilirsiniz. Diger özelliklerinden de örnegin BORDER özelligi atanmadiginda tablolarin çerçevesi görüntülenmez. Basit bir örnek tablo: Ülke isaretleri Ülke adi Çek Cumhuriyeti CZ Isviçre Yunanistan <TABLE BORDER> Isareti CH GR <CAPTION>Ülke isaretleri</caption> <TR><TH>Ülke adi <TH>Isareti <TR><TD>Çek Cumhuriyeti <TD>CZ <TR><TD>Isviçre <TD>CH <TR><TD>Yunanistan <TD>GR </TABLE> Yukaridaki örnekte TR, TH ve TD elemanlarinin kapanis tag'lerini kullanmamama ragmen tablo beklendigi gibi çalisiyor Netscape 3.0b4'te. Yalniz, daha karisik tablolarda ya da baska browser'larda bu sekilde bir kullanim sorun yaratabilir... <CAPTION>...</CAPTION> Bu eleman, tablonun adini/basligini belirtmeye yarar. CAPTION tag'leri TABLE'in içinde ama satirlarin ve hücrelerin (TR, TH, TD) disinda yer almalidir. Tablo hücreleri gibi, tablo basligi da herhangi BODY HTML tag'lerini içerebilir. Tablo basliklari her zaman tabloya göre yatayda ortalanir ve tablonun genisligine göre satirlara ayrilabilir.

Daha göster