AMATR WEB TASARIMCISININ

HTML
REHBER

NDEKLER
NSZ BLM 1
Internet Nedir? Nasl alr? HTTP ve TCP/IP Web Server Browser (Web Taraycs) WEB'in Dili: HTML

BLM 2
HTML'de Metin HTML'de Grafik ve Multimedya eleri HTML'de Renkler RGB ve Heksadesimal Renk Koduna Yakn Bak Etiketler (Tag) ve Parametreler (Attribute) HTML Sayfasnn Blmleri Metne Satr Ba Verme

BLM 3
Balk Etiketleri: <h1>, <h2>, <h3>, <h4>, <h5> ve <h6> Paragraf Etiketi: <p> Ortalama Etiketi: <center> Koyu, Eik (talik) ve Altizili Yazlar Dier Metin Dzenleme Etiketleri <big> ve <small> Etiketleri <blockquote> Etiketi Yatay izgi zel Karakterler Yorum-Aklama Satr <nobr> Etiketi <s> Etiketi <pre> Etiketi <sup> ve <sub> Etiketleri Yaz Tipi (Font) Metinleri Renklendirme <basefont> Etiketi Listeler Sral Listeler (Ordered List) : <ol> ... </ol> Srasz Listeler (Unordered List) : <ul> ... </ul> Tanmlama Listeleri (Definition List) : <dl>...</dl>

BLM 4
Grafik ve Renkler Grafik Etiketi: <img> Grafik Dosyasnn Ebatlar Resimleri Hizalama hspace - vspace Parametreleri 2

border Parametresi Sayfa Fonunda Resim Kullanmak

BLM 5
Balantlar accesskey Parametresi charset Parametresi title Parametresi target Parametresi Balantlarda Farkl Renkler Kullanmak Resim Haritalar (Image Map)

BLM 6
Tablolar border Parametresi cellpadding ve cellspacing Parametreleri Tabloyu Renklendirme ve Fon Olarak Grafik Kullanma Tablo ve Hcrelerin Ebatlarn Belirlemek Tablolarda Hizalama Hcreleri Birletirme Bilgi Sunma Arac Olarak Tablo bordercolor, bordercolordark, bordercolorlight Parametreleri rules ve frame parametreleri Yap skeleti Olarak Tablolardan Yararlanma

BLM 7
ereveler frameborder Parametresi border Parametresi bordercolor Parametresi framespacing Parametresi frameborder Parametresi noresize Parametresi scrolling Parametresi marginwidth ve marginheight Parametreleri ereve indeki Balantlarla Dier erevelerin eriklerini Deitirmek

EK-A
Web Tasarmclarndan tler

EK-B
HTML Etiketleri

NSZ
Bir sre Internet denen acayip dnyay dardan seyretmekle yetindiniz. Ve birgn geldi zincirleri krarak bu gerekten korkutucu teknoloji dnyasna doru bir adm atmaya karar verdiniz. lk Internet eriim paketinizi heyecan-korku-mutluluk karm duygular ierisinde satn aldnzda elbette banza gelecekleri bilemezdiniz. Internet'e balanp da o site senin bu site benim edlaryla kendi has ifadesi ile srf yaparken, iinizdeki istek de giderek byyordu: "Ben de kendi Internet sitemi yapmak istiyorum, bu dnyada benim de bir yerim olmal". Evet hedef ortaya kmt, imdi yaplmas gereken ey hedefinizdeki Web sitesini yapmanz iin gereken bilgilere ulamakt. Bir sre kaynak arayp durdunuz. Bu sre zarfnda edindiiniz izlenimlerden bir tanesine gre "Frontpage km ve mertlik bozulmutu". yleyse gnmzde bu ilerin yolu Frontpage'den geiyor diyerek bu program edindiniz. Bir iki el altrmadan sonra hayalinizdeki Internet sayfalarn hazrlamaya balamtnz. Fakat bu hep byle devam edemezdi, nk sizin istediiniz aslnda bu deildi. yle ya hep "Usta Webciler sayfa tasarm yaparken kodlar elleriyle yazar" denmiyor muydu? Cazibeye kaplmtnz bir kere. Tpk bahsettikleri usta Webciler gibi siz de kodlar ellerinizle yazmal ve btn dnyaya bu iin nasl yapldn gstermeliydiniz. stikmeti ustalk olan yolculuunuzda aznz kuvvetli azminiz, yoldanz ise Notepad olacakt. "yle beni hedefime hzla gtrecek bir de aracm olsayd" diye dnrken bizi buldunuz. Siz artk eklen olmasa bile rhen amatr bir Web tasarmcssnz ve aramza ho geldiniz. ki seriden oluan bu kitap yukarda "hayatndan ksa bir kesit"ini sunduumuz sizler iin yazld. Fakat kitabn adnda geen "amatr" ifadesine bakarak bu kaynan hafif kalacan dnmeyin. Kitabnz size kodlamada ihtiya duyacanz btn bilgileri ve yer yer tasarm pfleri sunduu gibi, usta bir Webci olup ktnzda elinizin altnda bulundurmak isteyeceiniz bir bavuru kaynadr da. Sz fazla uzatmadan insanlarmzn bilgi aln giderecek, kendi anadillerinde yazlm kaynaklarn daha da artmas dileiyle sizi kitabnzla ba baa brakyoruz.

Teekkr
ncelikle beni yetitiren ve bugnlere gelmem iin her trl fedakrl gsteren Sevgili Aileme teekkr ederim. yi kt birok gnlerimizi, kederlerimizi, mutluluklarmz paylatmz buraya yazamayacam kadar ok dostumu da bu ksa teekkr satrlarnda anmak isterim. zellikle bu kitab birlikte kaleme aldmz, kendisinden ok ey rendiim Sevgili dostum, aabeyim Dr. Hakk CAL'a teekkr ederim. Titizlikle incelenmi olmasna ramen varsa yazm ve kodlama hatalar bana aittir. Bu kitapta yer alan kodlar http://www.pclife.com.tr/.........................../awthr_kodlar1.zip adresinden bilgisayarnza indirebilirsiniz.

BLM 1
Internet Nedir? Nasl alr?
Internet'in ne olduu sorusuna cevap vermek imknsz denecek kadar zor. Bugn Internet'i oluturan balantlar demeti nereden balyor, nereye gidiyor, ka site var, bu gibi problemlerin cevabn bilmek artk imknsz. Hereyden nce "Internet'in yeri" diyebileceimiz bir yer yok. Bu yzden Internet'in ne olduunu bir kenara brakn, bize gerekli olduu lde Internet'in nasl altn anlamaya alalm. Internet'i bir demiryolu ebekesine benzetebiliriz. Yzlerce lokomotif ve binlerce vagondan oluan bir sistemin, sonu itibaryla ayn raylar zerinde, belirli bir sisteme gre hareket etmesi gibi Internet de yzlerce omurga, binlerce omurgalar aras ba, onbinlerce hizmet salaycdan oluan bir sistemle milyonlarca kiiye hizmet sunuyor. Trenle yolculuk etmek iin sistemin nasl altn, hangi trenin ne zaman nerede olmas gerektiini bilmenize hi gerek yok. Sizin iin nemli olan belirli bir trenin, belirli bir istasyondan, belirli bir saatte kalktn bilmekten ibaret. Internet de yle; gnn belirli saatinde Internet'de mevcut alanlar gezen, bilgi edinmeye alan, ya da kimi alanlardan cretsiz program edinmeye alan bir kullanc, Internet'in nasl altn bilmek zorunda deil. Ama bu sistemde yer edinecek ve bakalar iin bireyler sunacak kiinin sistemin nasl altn bilmesi gerekir. Internet alar aras a demektir. ki veya daha fazla bilgisayar arasnda iletiim kurmak, bir baka deyile bamsz bilgisayarlar bir a halinde birbirine balamak iin hereyden nce bu bilgisayarlar birbirleriyle irtibatlandrmamz gerekir. Bu irtibat saladmzda ise karmza bilgisayarlarn birbirlerine bilgi aktarmalarn ve aktarlan bilginin doru anlalmasn salayacak ilkeler-kurallar zerinde anlamalarn salama problemi kar. Aralarnda alveri salayabilmek iin, bilgisayarlar ortak bir dili konuur hale getirmek zorundayz. Bilgisayar a ve Internet uzmanlar, programlama diliyle kartrlmamas iin bilgisayarlar arasndaki ortak iletiim diline "dil" yerine "protokol" derler. Bir protokol sistemdeki btn birimlerin birbirlerine nasl ve hangi srayla hitap edeceklerini gsteren ilkeler-kurallar listesidir diyebiliriz. imdi Internet iin gerekli protokoller hakknda bilgi edinelim.

HTTP ve TCP/IP
Web sayfas tasarlarken dikkat edeceiniz en nemli unsur, sayfalarnzn ieriinin sunulu biiminin nemli lde ziyaretinin bilgisayarnn tr (Mac, PC, Sun), ziyaretinin iletim sistemi (Windows 3.x, NT, 95/98/2000, MacOS, Unix) ve kulland tarayc yazlm (Internet Explorer, Netscape Navigator) tarafndan belirlenecei olmaldr. Bir Web sayfasnn ziyaretinin ekranna kadar katettii yolda eitli protokoller (kurallar) var. Bunlarn banda bir bilgisayar a olan Internet'in ulatrma kurallar HTTP (HyperText Transfer Protocol Hareketli Metin Aktarma Kurallar) geliyor. Hypertext dosyalarn olduu kadar oklu ortam unsurlarn (ses, video ve dier grafik elerden oluan Multimedya dosyalar) ve bilgisayar programlarn Internet'teki bilgisayarlar arasnda alp-vermeye yarayan baka protokoller de vardr: FTP (File Transfer Protokol - Dosya Aktarma Kurallar) bunlardan biridir. 5

Internet balantsn, bir telin iki ucunda bulunan iki bilgisayar arasndaki iliki olarak grebilirsiniz. Web sayfalarn ieren bilgisayar, Web ilikisinde Server (Sunucu) diye adlandrlr. Ziyaretinin bilgisayar ise Client (stemci) olarak adlandrlr. Sunucu bilgisayarla, stemci bilgisayar arasndaki ilikiyi (Server-Client ilikisi) dzenleyen kurallara TCP/IP (Transmission Control Protocol/Internet Protocol - Aktarma Denetim Kurallar/Internet Kurallar) ad verilir. Gerek HTTP gerekse FTP, stemcinin Web Server'dan, yani HTML sayfalarn ve bu sayfalarn iinde yer alan resimlerin, grafiklerin, ses ve video dosyalarnn durduu bilgisayardan bilgi isteme ve bu istediine karlk verildiinde verilen karln doru gelip gelmediini anlamasn salar. ki bilgisayar, zerinde anlatklar bir tr konuma adab diyebileceimiz bu kurallara uygun mesajlarn ktadan ktaya, lkeden lkeye, kentten kente, yeralt ve sualt kablolar ile, uydularla iletirler. stemci bilgisayar ile Web Server arasnda oluan bu balant bazen kesilebilir. Fizik balantnn kesilmesi, aktarma iinin tmyle kesilmesi, sona ermesi anlamna gelmemesi iin, Internet kurallarnn IP blm, iki bilgisayar arasndaki balantnn doru kanallardan kurulmasn, kesildiinde yeniden kurulmasn salar. Bu ilemi yaparken, evrensel bir adres sisteminden yararlanr. Internet'te Web Server'lar kaynak sayld iin IP, arad kayna URL (Universal Resource Locator - Evrensel Kaynak Yolu Belirleyici) denilen adres sistemini kullanarak bulur. Ayn kurallar demetinin TCP blm ise kurulan balant sayesinde gelen bilginin doru anlalmasn salar. Aslnda her bilgisayar, merkez ilem birimi (CPU) ile ekran, klavye, CD-ROM src, vs., arasnda bir a demektir. Bir bro ortamnda bir stemci bilgisayar ile merkezdeki Server, bir an paralardr. Bu alarn Internet denen dev adan fark, sizin bilgisayarn CPU'su ile klavyesi, ekran ve yazcs arasndaki ba, yine bir bro ortamndaki Client ile Server arasndaki iliki "sabit durum" ilikisidir. Yani bu alarda iki taraf birbirinin durumuna her an vakftr; birbirlerinin ne durumda olduklarn her an bilirler. Oysa iki kta arasnda kurulmu bir Internet ilikisinde stemci, Sunucu'nun; Sunucu, stemci'nin durumunu, balantdaki kesilmeler sebebiyle bilemeyebilir. TCP/IP "durumun bilinmedii iliki" esasna dayanr. stemci bilgisayar, Web Server'dan istediini HTTP veya FTP kurallarna gre talep eder. Bunun iin Web Server'n kendisini bulup, bu talebi doruca ona iletmesine gerek yoktur; talebi kendisine Internet balants salayan (ISS) firmann bilgisayarna iletmesi yeterlidir. Bunu yaparken talep ettii eyin adn-sann bildirdii gibi, bulunaca kayna belirlemek iin gerekli adresi de (URL) bildirmek zorundadr. Internet hizmeti salayan firmann bilgisayar, bu talebi ve talebi karlayacak kaynan adresini, Internet'in omurgas olarak adlandrlan ana balanty kuran, bakmn yapan ve ISS'lere hizmet sunan firmann bilgisayarna iletir. Ana omurga firmasnn bilgisayarlarnda dnyadaki tm Internet kaynaklarnn listesi ve onlara ulamak iin hangi omurgadan, kime yol almas gerektiini gsteren bir liste bulunur. Ana omurga firmasnn bilgisayar bu listeye gre, mterinin talebini dier bir ana omurga firmasna, o firma da bunu hedef Web Server'a ev sahiplii yapan (host) bilgisayara iletir. Bu talep Web Server'a talebin konusu ve talep edenin adresi ile birlikte bildirilir. Sizin stemci olarak o srada sadece kendi ISS'inizle balantnz srmektedir; yoksa bilgisayarnzla hedef Web Server arasnda dorudan, birebir iliki yoktur. Hedef Web Server, stemci olarak sizin kim olduunuzu ve size nasl ulaabileceini, ancak kendisine gelen talebin altndaki adresten bilmektedir. Web Server, sizin o anda kendi ISS'inizle aranzdaki balantnn devam edip etmedii ile hi mi hi ilgilenmez. Onun iin nemli olan kendisine iletilen talebin karln, talebin altndaki adrese iletmekten ibarettir. Ayn yol bu kez tersine katedilir, bylece arzu ettiiniz bilgi (sayfa, video, grafik, ses vs.) sizin ekrannza ular. Ksaca ne talep sahibi stemci bilgisayar, ne talebi karlayan Web Server bir 6

dierinin o anda nerede ve ne durumda olduu ile ilgilenmez. Bu "durumdan haberdar olmama" hali zellikle Internet'te ticaret bahsinde ok nem tar. Bu maksatla yazlan programlarda bu halin dikkate alnmas gerekir.

Web Server
Yukarda bahsedildii gibi HTTP ve FTP, stemci bilgisayarla Sunucu bilgisayarn zerinde anlatklar bir dille (HTML) birbirine ilettikleri talep ve talebin karl olan malzemenin alnp verilmesinde TCP/IP denilen kurallardan yararlanlarak yaplan iletiimi dzenleyen ilkelerdir. Bu ilkelere uygun olarak kartlan bir talep, Web Server tarafndan karlanr ve talep edilen bilgi stemci bilgisayara iletilir. Web Server olarak tayin edilmi bilgisayarda, kendisine gelecek HTTP ve FTP taleplerini anlamasna ve bu talepleri yerine getirmesine yarayan programlar (Apache Web Server, Internet Information Server, Netscape Web Server, vs.) srekli alr vaziyette olur. Bu programlarn bilgi alp-vermenin yansra elektronik posta alp-verme ve ynlendirme, veritabanlarna erime ve iinden seme yapma, kendi sabit diskinde duran bir dosyay alp kar tarafa aktarma veya kar tarafn gnderdii dosyay alp kendi sabit diskine kaydetme gibi zellikleri vardr. Windows 95/98'e PWS (Personal Web Server - Kiisel Web Server) ad verilen program kurularak, bu program aracl ile Internet'e 24 saat bal olmadan yukarda bahsettiimiz Web hizmetleri salanabilir. Bir PC ile Web Server hizmeti yapacaksanz, baarnzn bol sabit disk alan ve hafzaya (RAM) bal bulunduunu hatrlamalsnz. PC'lerin Internet'in gerektirdii en nemli zellik olan ayn anda birden fazla ilem yapabilme becerisi iletim sistemi kadar, donanm kaynaklarnn geniliine de baldr.

Browser (Web Taraycs)

Web tasarmcsnn en az HTML kadar bilmesi gereken birey varsa o da Browser'larn HTML'i nasl yorumladdr. Bu yzden bir Web tasarmcsnn bigisayarnda Web Server yazlm bulunmayabilir, sayfalarna baka bir Internet Web Server hizmeti veren kii veya firma evsahiplii (host) yapyor olabilir, ama mutlaka piyasada mevcut Browser'larn en yaygn srmleri bulunmaldr. Netscape Navigator ayn bilgisayarda farkl dizinlerde bulunmak artyla alabilir. Ancak Microsoft Internet Explorer'n farkl srmleri ayn Windows ortamnda alamazlar. Bunun iin iddial bir Web tasarmcsnn, bu Browser'n farkl srmleri iin birden fazla bilgisayar bulundurmas gerekebilir. Neden deiik Browser'larn deiik srmlerine ihtiyacnz var? Bu sorunun cevab, HTML'in Internet'in ortak dili olduu gereine bir lde glge drecektir. nk ortak bir HTML dili bulunmasna ramen Browser'larn ve bazen ayn Browser'n farkl srmlerinin HTML'i yorumlay farkldr. HTML, W3C (WorldWideWeb Consortium Uluslararas Web Konsorsiyomu) adl kuruluun kartt ad "tavsiye" olmakla birlikte kendisi standart saylan drdnc srmne ulam bulunuyor. Byle bir standartlamaya ramen, Netscape ve Microsoft firmalar bilgisayar kullanclarnn rabet

ettii tek tarayc programn kendi programlar olmasn salamak zere giritikleri rekabet erevesinde, programlarn sadece HTML'i ayn ekilde yorumlayan ve dolaysyla birbirinden farksz sonular veren programlar olmaktan kartmak istediler. Bunun sonucu ise Web tasarmcsnn, bazen Netscape'in anlad ama IE'nin anlamad, kimi zaman IE'nin becerebildii buna karlk Netscape'in yapamad HTML zelliklerinden hangisini kullanacana karar veremez duruma dmesi oldu. HTML'i kullanarak ticar amal Web tasarm yapan kii Internet kullanclarnn hepsinin ekrannda ayn ekilde gsterilecek sayfalar yapmaya mecburdur. Buna karlk bir firmann intranet ortam iin Web sayfas yapan kiinin, HTML'in kendi firmasnn kulland Browser'n zelliklerinden yararlanmas mmkndr.

WEB'in Dili: HTML

Farkl bilgisayarlar ve kelime-ilem programlar arasnda, yaz dosyalarnn biimlendirilmesinde ortak bir yntem bulma abas, 1986'da, Dnya Standartlar Enstits tarafndan SGML (Standart Generalized Markup Language - Standart Genelletirilmi aretleme Dili) adyla birletirildi. Burada kullanlan dil, "program yazma dili" teriminde olduundan pek de farkl deil. Fortran, Basic, Cobol gibi bir program yazma dili, bilgisayara, kendisine verilecek talimatlarn nasl bir yntemle verileceini ve bu talimatlar zerine ne yapmas gerektiini belirtir. SGML ile ondan tretilen HTML ve XML "dilleri" kullanlarak oluturulan belgeler, programlama dillerinden farkl olarak dorudan bilgisayarn iletim sistemine deilse bile bir yazlma, rnein kelime-ilemcisine ya da veri-ilemcisine "aadaki veriyi ekranda yle gster, yazcdan da yle kart" anlamna gelen komutlar da ierdiine gre, "dil" saylabilir. Ne var ki, SGML ve ondan tretilen HTML ve XML'in bir uygulama program tarafndan anlalabilmesi iin, bu yntemle kendisine verilecek bilgileri nasl ileyeceine ilikin bilgilerin, nceden programn iine konmu olmas gerekir. Yani bir programn HTML'i anlayabilmesi iin, iinde HTML'i anlama ve yorumlama komutlarnn olmas gerekir. Bu anlamda, iin program taraf baka birisi tarafndan yaplm saylabilir; bizim HTML ile yaptmz sadece veri oluturmak eklinde yorumlanabilir. Bu adan bakarsak, SGML ve trevleri dil saylamazlar. Gerek bilgisayar programclar, HTML gibi, bilgisayara hem bilgileri hem de bu bilgilerin nasl ileneceini gsteren "metinleri" dil saymazlar. ster "dil" saylsn, ister saylmasn, HTML ksaca tanmlarsak Netscape Navigator, Internet Explorer, Mosaic, Spry gibi bilgisayar kullancs, bilgisayar ve Internet arasnda arabirim grevi yapan programlarn anlad bir veri ve komut ulatrma yntemidir; dier bilgisayar programlarndan farkl olarak sabit disk veya disket gibi bilgisayar kayt ortamlarna kaydedilirken, dz yaz olarak kaydedilir; herhangi bir dz yaz program ile oluturulabilir, okunabilir ve deitirilebilir. Dier bilgisayar programlarndan farkl olarak, disk ve disketlere yazlrken Binary-kili sistemle yazlmaz; iinde 16 Tabanl-Heksadesimal komutlar yoktur; her ey standart dz yaz olarak yer alr. Buna karlk herhangi bir dz yaz dosyasndan farkl olarak "metnin" iinde "<" ve ">" iaretleri arasnda yer alan ngilizce baz komut kelimeleri vardr. HTML, nceleri Macintosh, ardndan IBM uyumlu bilgisayarlarn yardm dosyalarnn oluturulmasnda kullanlan bir yntem olarak yaygn bir kullanm alan buldu. Ancak,

HTML ksaltmasnn ak ekli olan Hypertext Markup Language (Hareketli Metin aretleme Dili)'da geen Hypertext terimi, 1950 ylnda Ted Nelson adl bir bilgisayar uzman tarafndan iinde "hot" yani baka bir metinle veya resimle ilikilendirilmi noktalar bulunan metin anlamna kullanlmt. Apple firmas, bu yntemi ekranda gsterilen yardm metinlerinin iinde bir kelimeyi veya simgeyi tklayarak ilgili baka bir metne veya simgeye gitme yntemi olarak kulland. Metinler bylece "hyper" yani hareketli hale geliyordu. 1989 ylnda, Avrupa Parack Fizii Laboratuvar CERN uzmanlarndan Tim Berners-Lee, laboratuvar ynetimini ortak bir yaz biimlendirme sistemine ikna edebilmek iin, "Enformasyon Ynetimi: Bir neri" balkl bir rapor hazrlad. Bu raporda, daha sonra bugnk Internet'in temeli olacak bilgisayar ebekeleri aras ada bilgi alverii iin Hypertext'in ortak yntem olmasn nerdi. stelik bu neri bugn drdnc srmne ulam olan HTML dilinin temeli oldu. Bugnk Internet'i Internet yapan iki unsur var: Birincisi bilgisayarlararas iletiimi gerek zamanl olmaktan kartan balant protokolnn (HTTP) gelitirilmesi; dieri ise HTML dilinin ortak dil olarak benimsenmesini mmkn klacak basitlikte olmasna karn, bir metnin biimlendirilmesine ve resim, ses video gibi dier unsurlarla btnletirilmesini salayabilecek yeterlikte olmas. Bu arada duraan bilgi kmesi alp-verebilen HTML'e, dinamik deiken zellikler kazandrmay ngren ekler ortaya DHTML ilkelerini kartt. Ne var ki DHTML diye adlandrlabilecek ortak bir standart olmamas, bunun hi deilse imdilik, Browser'larn srmne gre deiik anlamlar tamas Web tasarmclarnn ektii sknty artryor. HTML'in belki Internet'teki pabucu tmyle olmasa bile ksmen dama atlabilir. Ama firmalarn kendi yerel a ortamlarnda haberleme ve bilgi alveriinde giderek daha sk uygulamaya baladklar intranet, Web gibi, giderek daha geni kitlelerin ilgisini ekebilmek iin televizyon zelliklerine sahip olmak zorunda deil; HTML'in bugnk haliyle izin verdii multimedya uygulamalar, herhangi bir firmann en ilgi ekici ve en etkili tarzda i-iletiim yapmasna yeter. Baka bir deyile HTML, Internet'te ve intranet'lerde daha uzun sre yaayacaktr.

BLM 2
HTML'de Metin
Bugn bildiimiz, kullanageldiimizin dnda Internet'in ve daha zel olarak ise HTML'in laboratuvarlarda askeri ve bilimsel projeler olarak insanla "merhaba" dediinden nceki sayfalarmzda bahsettik. Yine o zamanki teknik imkanlar da gznne alndnda kullandmz-kullanacamz birok HTML etiketinin metinleri biimlendirmeye ynelik olduu gze arpyor. Zaten ismine de bakacak olursak HTML bir metin iaretleme dili. Bu ynyle de daha ok bir kelime ilem programna, rnein Microsoft Word'e benziyor. HTML'in metin dzenlemeye ait etiketleri ile balklar atyor, metinleri koyu, eik ve altizili olarak yazabiliyor, paragraflar oluturabiliyor, sral ve srasz listeler dzenleyebiliyor, metinleri deiik yaztipleri ile farkl byklklerde yazdrabiliyoruz. Bunlar HTML'in metin dzenlemekte en sk kullanacamz yetenekleri. Bunlardan baka HTML'in neredeyse unutulmaya yz tutmu, ancak baz yabanc referans kitaplarnda rastlayabileceimiz trden metin dzenleme etiketleri de var. Bunlara bu kitapkta yer vermedik, ancak bu etiketlerin byk bir blmn kitapn sonundaki etiket listesinde rnekleri ve ksa aklamalar ile bulabilirsiniz. eriin en nemli unsuru olan metinleri dzenlemekte HTML'in kendi kabiliyetleri dnda zellikle Fontlar konusunda greceimiz birtakm harici etkenlere de dikkat etmemiz gerekebiliyor. Bunlara yer yer bahsi geldiinde deineceiz. CSS (Cascading Style Sheets) adyla bilinen stil ablonlar kullanarak metinleri piksel hassasiyetinde biimlendirmemiz mmkn hale geldi. rnein yaztipi (font) bykln 12 piksel olarak ayarlayabilir, paragraf girintisinin 25 piksel, satr aralarnn 18 piksel, kelime aralarnn 10 piksel ve hatta abartacak olursak harf aralarnn 2 piksel olmasn salayabiliriz. Elbette bunlar CSS teknikleri ile ve Web tarayclar olan Browser'larn bu tekniklere verdii destek lsnde mmkn olabiliyor. Yoksa HTML etiketleri ile bu derece hassas biimlendirme yapma imkanmz yok. imdi metinlerden baka tasarmn, dolaysyla HTML'in dier hammaddeleri olan grafik ve multimedya elerinden bahsedelim.

HTML'de Grafik ve Multimedya eleri

Web sayfalarmzda metinlerin yansra grafik dosyalarndan ve zaman zaman multimedya elerinden faydalanrz. Bu, sevdiimiz sanatya adadmz Web sayfasnn arka plannda alan bir MIDI melodisi de olabilir, film tantmlarn konu alan bir sitenin sayfalarna yerletirilmi hareketli film grntleri de. Fakat yine de sayfamzda multimedya elerini kullanmak ou zaman gerekli olmayabilir, oysa grafik ieren sayfalar hazrlamak neredeyse kanlmazdr. Bu durumda akla yle bir soru geliyor: Web sayfamzda hangi tr grafik dosyalarn kullanabiliriz? Cevap: istediimiz veya aklmza esen her resim veya grafik dosyasn kullanamayz. nk Web sayfas olutururken gzeteceimiz en nemli ilkelerden biri kk boyutta dosyalar 10

oluturmaktr. Sayfaya koyacanz yksek kaliteli ve byk boyutlardaki bir aile fotoraf sizin sabit diskinizden yklendii srece bir sorun tekil etmez, ama ayn eyi sayfay Internet ortamna koyup denediinizde birisinin, kimsenin sizin Web sayfanza kocaman grafiklerin yklenmesini beklemeye gelmediini hatrlatmas gerekebilir. Bu kuraln geerlilii tartlmamakla beraber elbette kuracanz sitenin amac bu tip kat kurallarda bir takm esneklikler yapmanz da gerektirebilir. Ressamsanz ve yaptnz resimler iin bir Web sitesi hazrlyorsanz sayfalara koyacanz kibrit kutusu byklndeki resimleriniz ziyaretiyi tatmin etmeyecektir. nk her zamankinin aksine ziyareti bu sefer sayfaya resim grmek iin gelmitir. Bu nemli kuraldan sonra reneceimiz ikinci kural Web sayfalarnda kullanacamz grafik dosyalarnn hangi biimde olmas gerektii. Klasik olarak kullanabileceimiz ve tm Browser'lar tarafndan desteklenen iki grafik dosya biimi vardr: GIF ve JPEG. Bu iki biimin de ortak zellii kendilerine has yntemlerle kk boyutlarda dosyalar oluturmalardr. Farkl olduklar nokta ise GIF biiminin 256 renk snrlamasna kar JPEG'in milyonlarca renk kullanmna izin vermesidir. Ayrca JPEG, bir dosya sktrma biimi olduundan ortaya kacak dosyann nihai boyutu kullanc tarafndan belirlenebilir. Bir JPEG grafik dosyas ne kadar kke, resmin kalitesi o kadar azdr; bu ilke erevesinde deiik oranlar deneyerek en uygun dosya boyutu-grnt kalitesini elde edebilirsiniz. GIF biimi ise dosya sktrmasna deil orjinal resimdeki milyonlarca rengin 256 renge indirgenmesi esasna dayanr. Bu sayede olduka kk boyutlarda dosyalar oluturulabilir. Resim ne kadar az sayda renkten oluuyorsa dosya boyutu da bununla orantl olarak klr. Baz resimler iin 256 renk snrlamas grnt kalitesi kaybna neden olmaz fakat baz resimlerde nemli derecede kalite kayb oluabilir. Web sayfamz iin hangi dosya biimini kullanmamz gerektiine karar verirken en kestirme yol deneme-yanlma yntemini kullanmaktr. Orjinal resminizi her iki biimde de kaydedip kyaslayn. Grnt kalitesi kabul edilebilir bir dzeyde olmak artyla kk boyutlu dosyay sein. Yenilerde PNG ve SVG biimindeki grafik dosyalar da Web sayfalarnda boy gstermeye balad. Ancak bu yeni dosya biimlerinin pek yaygn olduu sylenemez. Kullandnz grafik ileme program yeni bir srm ise byk ihtimalle dosyalarnz PNG biiminde kaydedip kullanabilirsiniz. Ksaca Web sayfalarmzda kullanabileceimiz multimedya elerinden de bahsedelim. Bu sefer grafik dosyalarnda olduu gibi olduka dar bir snrlama yok, ok eitli biimlerdeki ses ve video dosyasn kullanma seenei var. Ses dosyas olarak MIDI, WAV, ASF, ... biimlerini kullanabiliyoruz. Video olarak da AVI, MPEG, MOV gibi dosya biimlerine Browser'lar destek veriyor. Kimi dosya biimlerini altrabilmek iin Browerlar plug-in denilen ek yazlmlara ihtiya duyuyor. Web sayfalarmzda multimedya elerini nasl kullanacamz ilerki konularmzda ele alacaz. KUTU/////////////////////////////////////////////////////////////

11

Hangi Dosya Biimi

<ekran_001.tif>
Bilgisayarmzdaki yksek kaliteli bir grafik dosyasn srayla BMP, JPG ve GIF biimlerinde kaydedip kyaslayalm. Bizim rneimizdeki 500x330 piksellik orjinal resmi, grafik editrnn farkl kaydet seenei ile 24 Bit BMP biiminde kaydedip incelediimizde, 483 KB boyutundaki dosyann Web sayfalar iin ne kadar elverisiz olduunu grebiliriz. BMP biimi ile resmin kalitesinde gzle grlr bir bozulma olmad ama dosya boyutu olduka rahatsz edici byklkte. imdi de orjinal dosyay JPG olarak kaydedelim, sktrma orann da yzde 50 olarak ayarlayalm. Bu ekilde dosya boyutu 28 KB'a dt ve grnt kalitesi de olduka iyi. Daha yksek sktrma oranlarn deneyerek dosya boyutunu daha da kltebiliriz. Fakat bu esnada grnt kalitesinin de giderek bozulduuna dikkat edin. Son olarak GIF biimini deneyelim. rnek olarak kullandmz dosya milyonlarca renk ierdiinden GIF biimi ile bu renkleri 256'ya indirgemek, grnt kalitesini nemli derecede drd. Dosya boyutu ise 92 KB. Farkl biimlerde kaydettiimiz bu resmi kendi aralarnda kyasladmzda Web iin elverili olan GIF ve JPG biimleri ile dosya boyutunun nemli oranda kldn gryoruz. (Browser'lar BMP biimini desteklemezler. Burada bu biimi denememizin sebebi dosya boyutlarnn ne kadar kld hakknda bir fikir vermektir.) Buradaki rnekte JPG biimini kullanmak daha uygun. nk orjinal resim ok sayda renkten oluuyor; ayrca 256 renk snr olan GIF biimi, JPG biimine gre grnt kalitesini bozmasna ramen, daha byk boyutta dosya oluturdu. Bu tr bir genelleme yapmak mmkn olmadndan dosyalar her iki biimde da kaydedip kendi arasnda bir kyaslama yapmak pratik bir yntemdir. KUTU BTT////////////////////////////////////////////////////////

HTML'de Renkler
Yaptmz bir Web sitesinde uyguladmz grsel ifade tarznn en nemli unsurlarndan biri sayfadaki elerin renkleridir. Balklar, ereveler, izgiler, kutular, bunlarn ardalanlar sahip olduklar renklerle, bir btn halinde bizim ifade tarzmz ortaya kartrlar. Bu ifade tarznn ziyaretinin bilgisayarnda aynen istediimiz gibi olumasn salamak zorundayz. Tasarmc olarak bu bizim grevimizdir. Hazrlayacamz sayfalarda kullanacamz renkleri belirlerken bir noktaya dikkat etmemiz gerekir: her ziyaretinin bilgisayarnn grnt elde etme imkan (grafik kart ve ekran) ayn kalitede deildir. Bu yzden Web tasarmclar "gvenli renk" kavramndan sz ederler ve gvenli renklerin 216 adet olduunu sylerler. Buradaki gvenlikten kast, can ve mal gvenliinden ok Web sayfamza kazandrdmz grsel ifade tarznn gvenliidir. Sayfalarmzn farkl donanm ve iletim sistemlerinde de kendi ekranmzda grnd renklerde grnmesi iin bu kural gz ard etmememiz gerekiyor.

12

HTML'de bir rengi kullanmak istediimiz zaman bunu iki ekilde yapabiliriz: rengin ngilizce adn koda yazmak veya bu rengin heksadesimal (onaltlk say dzeni) kodunu kullanmak. 216 adet rengin herbirinin bir ad olmadna gre (belki vardr, ama ezberlemek kimin iine gelir?) heksadesimal say dzeniyle kysndan kesinden de olsa tanmak gerekiyor. Tam da burada araya matematik giriyor. Matematik dediysek ihtiyacmz olan lmeyecek kadar bir matematik bilgisi. En azndan say dzenlerini bir yerlerden hatrlyor olmalsnz. Hani deiik say dzenleri vard; insanlar hikmeti bilinmeyen bir sebeple bu say dzenlerinden 10'lu say dzenini kullanrd. te bilgisayarc arkadalara 10'lu say sistemi az geldiinden bu tip iler iin onaltlk say sistemini biz tasarmclara layk grmler. imdi bu kadar laftan sonra heksadesimal say sistemini renmek iin yanp tutumaya baladnza gre, bu sistemi daha yakndan tanyabiliriz!

RGB ve Heksadesimal Renk Koduna Yakn Bak

RGB renk sistemini daha nce duymu olmalsnz. Eer duymadysanz korkulacak birey olmadn biraz sonra greceksiniz. RGB ngilizce krmz-yeil-mavi (red-green-blue) renklerinin ba harfleridir. Bu ynteme gre dier btn renkleri bu rengi deiik oranlarda kartrarak elde ederiz ve bu karm oranlarnn deerlerini HTML'de heksadesimal dzende belirtiriz. 10'lu say dzeninde hepimizin bildii gibi 10 adet rakam vardr; ayn ekilde 16'lk dzende de 16 adet saysal simge vardr. Peki elimizde sadece 10 adet rakam olduuna gre fazla 6 sayy nasl ifade ediyoruz? Harflerle. 11'in karl olarak A, 12 olarak B, 13 olarak C, 14 olarak D, 15 olarak E ve 16 olarak F harfini kullanyoruz. Bu duruma gre 3FA 16'lk dzende bir sayya karlk geliyor. DE3, AAAAA, 9DEDE, B6ABA, 99CC99 hepsi bir saynn karl. RGB sistemine dnelim. Krmz, yeil ve mavi olmak zere ana rengimiz var demitik ve bunlarn karmndan bahsetmitik. Bu karmn azam deeri 255, asgar deeri 0 olabilir. rnein krmz elde etmek iin 255 birim krmz 0 birim yeil ve 0 birim mavi deerlerini kullanyoruz. 255'in heksadesimal karl ise FF'dir. RGB deerini herbir rengi ikier basamakla ve toplam 6 basamak olacak ekilde (xxyyzz gibi) ifade edeceimizi de sylersek krmz rengin kodu ortaya kyor: FF0000. Ayn ekilde yeil oluturmak iin 00FF00, mavi oluturmak iin 0000FF deerlerini kullanrz. Krmz ve yeilin karm olan sary elde etmek iin FFFF00, krmz ile mavinin karm olan moru elde etmek iinse FF00FF deerlerini kullanyoruz. 9999FF, 66FF99, CC3366, CCCCCC gibi deiik oranlarla gvenli renklerin tmn elde edebiliriz. Peki size bir ev devi: tm renklerin azam oranda kartn ve hi bir rengin karmda bulunmadn ifade eden FFFFFF ve 000000 deerleri bize hangi renkleri verir?

Etiketler (Tag) ve Parametreler (Attribute)

HTML'in kelime anlam itibariyle bir metin iaretleme dili olduunu rendik. HTML'in bir programlama dili kadar karmak olmasa da kendine has bir kodlama biimi vardr ve bu kodlara/komutlara da etiket (tag) denir.

13

Etiketleri kullanma mant olduka basittir. rnein bir metni koyu grntlemek istediimizde bu metnin bana Browser'a metnin koyu grntleneceini bildiren etiketi yazarz ve metnin sonunda bu etiketi sonlandrrz. Sonlandrlmayan istisnai etiketler de vardr, fakat byk ounluk itibariyle etiketler sonlandrlr. zetle; bir etkinin balamasn istediimiz yerde ilgili etiketi yazyor, bitmesini istediimiz yerde de bu etiketi sonlandryoruz. Etiketleri kktr (<) byktr (>) sembolleri arasnda gsteriyoruz. rnein <html> bir etikettir. Her HTML dosyas bu etiketle balar ve </html> etiketi ile sonlandrlr. Bl iareti o etiketin sonlandrld anlamn tar. Baz etiketlerin kontrol edilebilir bir takm zellikleri vardr. Bunlara o etiketin parametresi (attribute) diyebiliriz. rnein metnin yaz tr ayarlarn deitirmemizi salayan <font> etiketinin yaz tr ailesinin adn belirttiimiz face, rengini belirttiimiz color, bykln belirttiimiz size gibi parametreleri vardr. Bu etiketlerin ounluu en yaygn iki Browser olan Microsoft Internet Explorer ve Netscape Navigator tarafndan desteklenirken, bir ksm bu iki Browser'dan yalnzca birisi tarafndan destekleniyor. Bu konuyla ilgili kitapn sonundaki Browser etiketlerin uyumluluklarn gsteren tabloyu referans olarak kullanabilirsiniz.

KUTU/////////////////////////////////////////////////////////////

Hangi HTML Editrn Kullanmalym?

HTML dosyalar metin ierikli dosyalardr, dolaysyla herhangi bir metin dzenleme veya kelime ilem program HTML sayfa oluturmak iin kullanlabilir. Burada dikkat edilmesi gereken nokta, oluturulan dosyay kaydederken kayt tr olarak "salt metin" trn semektir. Bu ayar, programn kayt penceresindeki zellikler deitirilerek yaplabilir. Bylece kelime ilem programna ait kontrol kodlar dosyaya yazlmaz. Bunun yansra dosyalarn uzantsnn htm veya html eklinde olmasna dikkat etmek gerekiyor. Kelime ilem programlar asl amalarnn biraz darsnda olmakla beraber HTML sayfa yapmnda kullanlabilir, ama karmak Web sayfalar hazrlamak ve bu sayfalar hazrladktan sonra ynetmek, gncellemek gibi ileri derecede kullanm amacna ynelik iler iin hazrlanp piyasaya srlen programlar da vardr. Bu programlara HTML veya Web tasarm editrleri diyebiliriz. Kullanm ekli bakmndan iki tip Web tasarm editr vardr; grsel veya orjinal ifadesi ile WYSIWYG (What You See Is What You Get ya da bundan daha az karmak olmayan Trke ifadesi ile "Ne Grrsen Onu Alrsn") editrler ve kod bazl editrler. Her iki tip editrn de avantajlar ve dezavantajlar bulunuyor. Grsel editrler ile editre has aralar ve yardmc sihirbazlar kullanarak HTML dilini bilmeksizin Web sayfas oluturulabilir. Fakat bu noktada kontrol editr kullanan kiiden ok sayfay oluturan programn elindedir. Kod bazl editrler grsel editrlerin aksine HTML bilgisi gerektirir ve sayfa oluturulurken kodlar kullanc tarafndan yazlr, yine bir takm kolaylk salayc

14

aralar ve sihirbazlar bu tip editrlerde de bulunabilir. Grsel editrlere FrontPage ve Dreamweaver', kod bazl editrlere HomeSite' rnek olarak verebiliriz. HTML dilini renmek isteyen kiiler iin tavsiye edilebilecek tipte editr, kod yazmaya dayal editrdr. Hatta brakn HTML editrn Windows'un NotePad'i Macintosch'un Simple Text'i bile bu i iin biilmi kaftandr. Biz bu kitapktaki rneklerimizde Notepad'i kullanacaz. KUTU BTT////////////////////////////////////////////////////////

KUTU/////////////////////////////////////////////////////////////

HTM mi HTML mi?

Yeni balayan Web tasarmclarnn aklna taklan sorulardan biri, dosya uzantlarnn html mi yoksa htm mi olmas gerektiidir. Ya da bunlar arasnda bir fark var mdr? Aslnda var olduu pek sylenemez. Dosya uzantsnn 3 harften fazla olmasna izin vermeyen bir iletim sistemi kullanyorsanz (hadi canm neymi o?) dosya uzantlarn htm olarak vermelisiniz. Bunun dnda html veya htm dosyann hi bir fark yoktur. KUTU BTT////////////////////////////////////////////////////////

KUTU/////////////////////////////////////////////////////////////

Byk Harf mi, Kk Harf mi?

HTML dosyalarnzda HTML komutlarn (etiketler) byk veya kk harflerle yazabilirsiniz. Browser asndan <html> ile <HTML> arasnda hi bir fark yoktur. Ama olacak! HTML'in yeniden dzenlenmi ve yazm kurallarna kar hassas olan srm XHTML, etiketlerde byk harf-kk harf fark gzetecek; etiketlerin kk harfle yazlmas zorunlu olacak. Benzer kurallar bir baka Web teknolojisi olan XML (eXtensible Markup Language - Geniletilebilir aretleme Dili) iin de geerli. Web tasarmclar iin HTML'in nemi hi bir zaman kaybolacaa benzemiyor; ama yine de XML ve onun HTML'e uyarlanm ekli olan XHTML'i kullanmay reneceiz. Bunun iin HTML'e yeni balayan bir kiinin imdiden elini altrmas iin etiketleri kk harfle yazmas gerekir. Biz de buradaki rneklerimizde etiketleri kk harflerle yazacaz ve parametre deerlerini trnak iine alacaz. KUTU BTT////////////////////////////////////////////////////////

Web sayfalar ve HTML hakknda edindiimiz genel bilgilerden sonra HTML sayfa yapsn tanmaya balayacaz. Yine nmzdeki konudan itibaren HTML kodlamaya geiyoruz. Bu kitapktaki kodlar bilgisayarnzda denemeden nce HTML almalarnz iin zel bir klasr oluturmanz ve dosyalar bu klasre kaydetmenizi tavsiye ederiz. 15

HTML Sayfasnn Blmleri

Web sitelerini oluturan HTML kodunu iki ana blme ayrabiliriz. Her sayfa yaplrken bu iki blm oluturan kodlar sabit bir ekilde yazlr. Bu blmler ba (head) ve gvde (body) blmleridir. Tm kodlar <html> etiketi ile balar ve </html> ile sonlandrlr. Bu konuyu daha iyi anlayabilmek iin HTML editrmz (yani Notepad veya SimpleText'i) ayoruz ve ilk sayfamz oluturmak zere aadaki kodlar yazyoruz. <html> <head> <title>ilk sayfam</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-9"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1254"> </head> <body> Merhaba, Sayfama Hogeldiniz. </body> </html>

<ekran_002.tif>
Bu dosyay HTML almalarnz iin oluturduunuz klasre ilksayfa.htm ad ile kaydedin. Herey yolunda gitti ise sayfay Browser'nzda atnzda buradakine benzer bir grnt ile karlaacaksnz:

<ekran_003.tif> <ekran_004.tif>
imdi yazdmz bu kodlar inceleyelim. Az nce HTML sayfasnn iki blmden olutuunu renmitik. Bu blmleri kodlar iinde aka grebiliyor musunuz? Ba (head) ve gvde (body) blmleri. Browser'da atmz sayfaya dnp kodlarla bir kyaslama yaparsak biraz da ngilizce bilgisi yardmyla aa yukar hangi etiketin ne ilevi olduunu grebiliriz. Kodlar incelemeye ilk satrdan deil 3'nc satrdan balayalm ve bu koda bir gz atp dikkatimizi Browser'n mavi balk ubuuna evirelim. 3'nc satrda verdiimiz balk (title) kodu Browser'a hitap ediyor. Sayfaya verdiimiz balk, Browser'n adyla beraber burada grntlenir. Bir sonraki satrdaki nispeten karmak grnml etiket META etiketi; fonksiyonu ise Browser'a HTML sayfasnn hangi dilde metin ierdiini bildirmek. Eer iletim sisteminiz Trke deilse ve Browser'nzn varsaylan dil ayar Trke olarak ayarlanmamsa , , , gibi harfler bozuk grntlenecektir. Bu yzden iki satrdan oluan dil kodunu oluturacamz btn sayfalarda kullanacaz. imdi 6'nc satra geelim. Buradaki "Merhaba. Sayfama Hogeldiniz." metni Browser'da varsaylan font ve byklkte gsteriliyor. Bunlara bakarak genel bir sonu karabilir

16

miyiz? <head> ile balayp </head> ile biten blm, sayfamzn ba blmn oluturur ve bu blmde bulunan kodlar ziyaretinin grecei ierie deil aslnda Browser'a hitap eder. HTML sayfann hangi dilde (Trke, ngilizce, ince) metin ierdiini, arama motorlarna hitap eden bir takm kodlar ve sayfamza eklemek istediimiz Scriptleri bu blme yerletiririz. Kodlarn gvde (body) blm ise sayfann ieriini oluturur. Kodlamaya <html> etiketi ile balayp </html> ile bitirdiimize dikkat edin. Bu, oluturduumuz sayfann HTML dili ile yazldn ifade eder ve tm HTML kodlar bu iki etiket arasnda yer alr. imdi ikinci denememizi yapalm. HTML editrnde bo bir sayfa ap iine yalnzca ilksayfa.htm dosyasndaki 6'nc satr, "Merhaba, Sayfama Hogeldiniz," metnini yazalm, ve bu dosyay deneme.htm adyla kaydedip Browser'mzda aalm. Tek kelime bile HTML kodu iermeyen deneme.htm dosyas ile usulne uygun bir ekilde yazdmz ilksayfa.htm dosyasnn grnlerinin ayn olmas aklnz kartrmasn. Byle olmasnn sebebi HTML'in metin tabanl dosyalar oluturmasdr. Benzerliin burada sona erip bundan sonraki en kk deiikliin bile HTML kodu gerektirdiini grmek iin unu deneyelim. Tek satrlk metni "Merhaba," kelimesinden sonra enter tuu ile iki satra blelim ve dosyay bu haliyle deneme2.htm adyla kaydedelim. Bu sayfay Browser'da atmzda metnin tek satrda grntlenmeye devam ettiini, editrde Enter ile verilmi satr bann HTML veya Browser iin bir anlam ifade etmediini gryoruz ve bu noktada yeni bir etiketle tanyoruz.

KUTU/////////////////////////////////////////////////////////////

Web Sayfas Hangi Dilde Metin eriyor?

lk HTML sayfamz olutururken sayfann head blmndeki kodlarn Browser'a hitap ettiini, bu blme yazlan kodlardan birinin de sayfa ierisindeki metinlerin dilini belirttiini sylemitik. Browser'a dili belirten bu kod meta etiketiyle yazlr: <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-9"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1254"> Bu iki satrn her biri sayfann Trke ierik tadn belirtir. kisini birden kullanmamzn sebebi Windows dndaki iletim sistemlerine de Trke karakter kodunu bildirmek. Meta etiketleri sonlandrlmaz ve tek grevi de Browser'a dil belirtmek deildir. Meta etiketleriyle arama motorlarnn indeksleme programcklarna ynelik bilgiler de hazrlanabilir. Meta etiketi ile dil belirtmediimiz taktirde dil ayar olarak Browser'n varsaylan (default) ayar geerli olacaktr. Eer Browser'n varsaylan ayar Trke deil de baka bir dilse o

17

zaman Trke karakterler (, , , , , , , , , , , ) doru grntlenemez. Bu yzden dil belirten META etiketini kullanmak Web tasarmcsnn el alkanl olmaldr. KUTU BTT////////////////////////////////////////////////////////

Metne Satr Ba Verme

reneceimiz yeni etiket <br> etiketi. Fonksiyonu; metni satr bana almak. Kullanmn ise bir rnek yaparak renelim. <html> <head> <title>Metne satr ba verme</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-9"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1254"> </head> <body> Ocak<br> ubat<br> Mart<br> Nisan<br> Mays<br> Haziran<br> Temmuz<br>Austos<br>Eyll<br>Ekim<br>Kasm<br>Aralk </body> </html>

<ekran_005.tif>
Kullanm olduka basit. Metni blmek istediimiz yere <br> etiketini yazyoruz. Bylece bu etiketten sonraki metin bir alt satrda grntleniyor. <br> etiketinin istisnai bir durumu var; sonlandrlmyor. Ay adlarnn yarsn farkl satrlarda dier yarsn tek satrda yazmamzn nedeni Browser asndan her iki tip yazm tarznn da ayn eyi ifade ettiini gstermek. Birden fazla <br> etiketini pepee yazarak metinler arasnda daha ok satr boluklar oluturabiliriz. HTML'in metin dzenlemeye ynelik daha onlarca etiketi vardr. Bu etiketlerin tmn bir sonraki blmde reneceiz. Buraya kadar rendiklerimizle HTML'e bir giri yaptk. Belki kafanzdaki sorularn bir ksm aydnland, ama hala nemli bir ksm da cevap bekliyor. Acele yok hepsini srayla reneceiz ama bir oturuta deil. Derse burada ara vererek bir hava almann; bir ay, kahve veya meyve suyu imenin, hatta balkona kp biraz gzlerinizi dinlendirmenin tam zamandr.

18

BLM 3
Bundan nceki blmde HTML dosyalarnn iki ksmdan olutuunu rendik. Bunlar ba (head) ve gvde (body) blmleriydi. Sayfann head blmnde Browser'a hitap eden kodlar olduunu grdk. Sayfalardaki metinlerin doru olarak grntlenebilmesi iin hangi kodu nerede kullanmamz gerektiini rendik. Browser'da grntlemek istediimiz tm ierii <body> ... </body> etiketleri arasna yazacamz biliyoruz. Bu blmden itibaren sayfa ieriini dzenlemeye ynelik etiketleri ele alacaz. Konumuza HTML sayfalarnn temel ta olan metinleri dzenlemeyle balyoruz.

Balk Etiketleri: <h1>, <h2> <h3>, <h4>, <h5> ve <h6>

HTML bize, metinler iin kullanabileceimiz 6 deiik byklkte balk etiketi sunuyor. Bu etiketlerden <h1> en byk bal grntlyor, <h6> ise en kk bal. Hemen bir rnekle bu 6 adet etiketi ve ne byklkte balklar oluturduunu kyaslamal olarak grelim. Bundan nceki blmde rendiimiz ve bundan sonra oluturacamz her dosyada standart olarak kullanacamz etiketleri yazyoruz. Head blmne Trke karakterlerimiz iin META etiketlerini ekliyoruz. Sayfamza bir balk veriyoruz. Body blmne de balk etiketlerini yazp tm kodlar <html> ... </html> etiketleri arasna alyoruz. <html> <head> <title>Balk Etiketleri</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-9"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1254"> </head> <body> <h1>Balk 1</h1> <h2>Balk 2</h2> <h3>Balk 3</h3> <h4>Balk 4</h4> <h5>Balk 5</h5> <h6>Balk 6</h6> Bu normal yaz </body> </html>

<ekran_006.tif>
Kod akn rahat takip edebilmek iin fazladan satr aralar oluturabilirsiniz. Satr balarna klavyede sekme (Tab) veya aralk (Spacebar) tularna basarak boluk vermek de kod yazanlarn el alkanldr. 19

Balk etiketleri ile kullanabileceimiz parametreler de vardr. Parametrenin ne olduuna nceki blmde deinmitik. Ksaca etiketin bir takm zelliklerini kontrol etmeye yaryordu. Balk etiketlerinin kontrol edilebilir zellii yani parametresi align (hizalama)'dr. Bal sayfa ierisinde saa, sola dayayabilir veya ortalayabiliriz. Kullanl: align = left | center | right rnekler: <h1 align="center">Ortalanm Balk</h1> <h3 align="right">Saa Dayal Balk</h3> <h5 align="left">Sola Dayal Balk</h5>

Paragraf Etiketi: <p> ... </p>

Metinleri <body> ... </body> etiketleri arasnda baka hibir etiket kullanmadan grntleyebiliyoruz. Satr ba oluturmak istediimizde <br> etiketi kullanmamz gerektiini de rendik. Bunu yapmann bir dier yolu da metne paragraf zellii kazandrmaktr. <p> ... </p> arasna yazlan metin paragraf zellii kazanm olur. Az nce rendiimiz balk etiketini de kullanarak iki paragraf ieren sayfamz hazrlayalm. Buradan itibaren rneklerde yalnzca <body> ... </body> etiketleri arasnda yer alan kodlar greceksiniz. Her seferinde tekrarlamamak iin <head>, <title> ve <meta> etiketlerini biz yazmyoruz. Fakat sayfalarnz olutururken bu kodlar sizin yazmanz gerekiyor. El alkanl oluturmas iin kopyala-yaptr kolaylndan yararlanmamak iyi bir yntem olabilir. <h2>Sevdiim Yazlar</h2> <p> Sabah beklemeyiniz dostum, geceden yola knz. Olur ki uyuyakalrsnz. Gece serindir, yapraklardan szlen yel gzlerinizdeki yalar kuruturken ruhunuzda kainatn derin sessizliini tayarak sabaha doru yryp fecri balatnz. </p> <p> Cemiyetin vahi, zehirli bitkilerle dolu, her dalnda uursuz baykularn manasz telkinler yapt sk aal ormanlarnda etin yolculuklarn balangc iin sabah beklemeyiniz. Sabah beklemek leni, leni beklemek akam beklemek gibi bir ruh gevekliini dourur. </p> <p> Filozofun d btn hayatmzda takib edeceimiz en esasl metottur: "Uzun yolu seiniz..." </p>

<ekran_007.tif>
Paragraf etiketinin de balk etiketinde olduu gibi align (hizalama) parametresi vardr.

20

Kullanl: align = right | center | left Bu parametrenin yansra CSS (Cascading Style Sheets - Stil ablonlar) teknikleri ile paragraf etiketine daha bir ok zellik atanabilir. Bu zelliklere dier kitapmzn konusu olan stiller konusunda deineceiz. Baz Web tasarmclar <p> etiketini kapatmadan kullanrlar. Bu ekilde bir kullanm Browser'lar destekliyor. Ancak biz bu kitapktaki rneklerimizde doru yazm tekniini esas alarak kapatma etiketini kullanacaz. Ayrca, HTML'den sonra standart olmas dnlen XHTML dili, kapatlmam etiketleri hata sayaca iin, imdiden elimizi altrmamz yerinde olur.

Ortalama Etiketi: <center> ... </center>

Balk ve paragraf etiketlerinde grdmz align="center" parametresinin fonksiyonu ile bu etiketin fonksiyonu ayn. <center> ... </center> etiketleri arasna aldmz metin, grafik, tablo gibi nesneler sayfa ierisinde ortalanr. <center>Uzun yolu seiniz</center> Browser penceresinin ebatlar ile oynadnzda metnin, pencerenin boyutuna gre yer deitirdiini greceksiniz. <center> etiketi kullandmzda metin daima ekrann tam ortasnda grntlenir.

Koyu, Eik (talik) ve Altizili Yazlar

Metinleri koyu (bold), eik (italic) ve altizili (underline) yazdran etiketleri bir rnekle gsterelim. Bu etiketler dikkat ederseniz ngilizce karlklarnn ba harflerinden oluuyor. <p align="center">Filozofun d btn hayatmzda takip edeceimiz en esasl metottur :</p> <center> <b>"Uzun yolu seiniz..."</b> <br> <i>"Uzun yolu seiniz..."</i> <br> <u>"Uzun yolu seiniz..."</u> </center>

<ekran_008.tif>
Bu etkileri tek tek metinlere uygulayabiliyoruz. Peki hem koyu hem italik hem de altizgi etkisini nasl olutururuz? Tabii ki etiketleri i ie kullanarak. u kodlar inceleyin. <i><b>Filozofun</b> d btn hayatmzda takib edeceimiz <b><u>en esasl</u></b> metottur: "<u>Uzun yolu seiniz...</u>"</i>

21

art olmamakla beraber nce atmz etiketi en son kapatmak iyi bir kodlama prensibidir.

Dier Metin Dzenleme Etiketleri

<big> ve <small> Etiketleri
Yaz tipi (font) konusunda karakter byklklerini deitirmeyi greceiz, fakat ksa yoldan bu etkiyi <big> ve <small> etiketleri ile salayabiliyoruz. <big> etiketi metinleri bytmek iin, <small> etiketi de kltmek iin kullanlyor. Bu iki etiket font bykln 1 l deitirir. Etiketleri pe pee kullanmak suretiyle istenene yakn byklkler elde edilebilir. <p>Bu normal metin</p> <big>BIG etiketi ile bytlm metin</big> <br> <small>SMALL etiketi ile kltlm metin</small> <br> <br> <br> <big><big>ki l bytlm metin</big></big> <br> <small><small>ki l kltlm metin</small></small>

<ekran_009.tif>

<blockquote> Etiketi
Satrba girintisini artrmak suretiyle aradaki metni dier metinlerden ayrr. <p>WEB Teknikleri</p> <blockquote> HTML<br> JAVASCRIPT<br> ASP<br> CGI<br> FLASH<br> </blockquote>

<ekran_010.tif>
<blockquote> etiketi eer grafik dosyalar ile birlikte kullanlrsa baz eski Browser'larda sayfa dzgn grntlenemeyebilir. Bu yzden bu tip sayfalar yaygn Browser'larn eski srmleriyle de test etmekte yarar vardr.

Yatay izgi

22

<hr> etiketi sayfaya yatay izgi (horizontal rule) izmekte kullanlr. Bu etiket sonlandrlmaz. <hr> ile kullanabileceimiz parametreler unlardr: align, noshade, size ve width align parametresi artk ezberlediimiz zere hizalamada kullanlyordu. Alabilecei deerler ise yle: align = left | center | right noshade izginin glge efektini kaldrr ve koyu renkte izilmesini salar. Bu parametre tek bana kullanlr, bu parametreye karlk olarak bir deer verilmez. size parametresi izginin piksel cinsinden kalnln belirler. width parametresi ile de izginin geniliini belirleyebiliriz. Bu parametreye karlk olarak say deerleri verebileceimiz gibi, Browser penceresinin boyutuna gre izgi geniliinin deimesini salayan yzde (%) deerleri de verebiliriz. <hr> <center>Yatay izgi rnekleri</center> <hr> <br><br> <hr width="100" align="right"> <hr width="70%" align="left"> <hr width="350" align="center"> <br><br> <hr size="1" noshade> <hr size="5" noshade width="50%">

<ekran_011.tif>

zel Karakterler
HTML kodlar iin ayrlm karakterleri sayfalarmzda kullanmak istediimizde sorunlarla karlarz. rnein kktr (<), byktr (>) karakterleri arasndaki metinler etiket olarak alglanacandan; HTML'de etiketler "<" ve ">" sembolleri arasnda yazlr. rnein <html> bir etikettir. metnini olduu gibi kodlara yazdmzda sayfa bozuk grntlenecektir. Ayrca HTML, pepee oluturulmu boluklar tek bir boluk sayacandan, burada da bir problem szkonusudur. Kelime aralarna fazladan boluklar vererek Browser'da oluan grnty inceleyin. <body> Bugn hava <br> Bugn hava ok gzel

ok

gzel

23

</body>

<ekran_012.tif>
lk satrdaki fazla boluklar bir boluk olarak grntlendi. Bu yzden iki satr da birbirinin ayns. te HTML'deki bu ayrlm karakter problemini zmek iin karakter kodlar kullanyoruz. Aslnda bilgisayarda oluturulabilen toplam 255 ASCII karakterin herbirisinin kodu vardr. Ancak burada Web sayfalarnda en ok kullanlanlarn kk bir listesini verelim. (boluk) " & < > | &nbsp; &quot; &amp; &lt; &gt; &#124; &copy; &#174;

imdi yukarda yaptmz rnekleri karakter kodlarn kullanarak tekrar deneyelim. <body> HTML'de etiketler &quot;&lt;&quot; ve &quot;&gt;&quot; sembolleri arasnda yazlr. rnein &lt;html&gt; bir etikettir. <br><br> <hr> <br> Bugn&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;hava&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ok&nb sp;&nbsp;&nbsp;&nbsp;&nbsp;gzel <br> Bugn hava ok gzel <br><br> <hr> <br> align=left &#124; center &#124; right </body>

<ekran_013.tif>

Yorum-Aklama Satr
Kimi zaman HTML kodlarmz ylesine uzun ve karmak bir hal alr ki bir sre sonra hangi kodun nerede olduunu bulmak zahmetli bir ie dnr. Byle bir durumda tasarmcnn imdadna yetien etiket yorum etiketidir. <!-- ve --> etiketleri arasndaki herey yorum olarak kabul edilir ve sayfada grntlenmez. <body> <!-- Burada yorum yer alyor --> Normal metin </body>

24

Yukardaki rnekte <!-- ve --> etiketleri arasna aldmz metin sayfada grntlenmeyecektir. Yorum etiketlerini kodlar arasna hatrlatc notlar brakmak amacyla da kullanabiliriz.

<nobr> Etiketi
Bu etiket, uzun metinlerde kelimelerin bir alt satra blnmeden tek satrda grntlenmesini salar. rnek: <nobr> Sabah beklemeyiniz dostum, geceden yola knz. Olur ki uyuyakalrsnz. Gece serindir, yapraklardan szlen yel gzlerinizdeki yalar kuruturken ruhunuzda kainatn derin sessizliini tayarak sabaha doru yryp fecri balatnz. </nobr>

<s> Etiketi
Baz kelimelerin altn deil de, stn izmek isteyebiliriz. Tpk evde hazrladmz bir alveri listesindeki malzemeleri aldktan sonra silmemiz gibi. Arkadalarmzn doum gnlerini gsteren bir Web sayfas hazrladmz dnelim ve doum gnleri geenlerin zerini <s> etiketi ile izelim: Mustafa : 6 Austos <br> Kudret : <s>11 Ekim</s> <br> Hakk : 5 Temmuz <br> eyma : <s>23 Kasm</s> <br> Nurdan : <s>22 Ekim</s> <br> Alper : 5 Ocak

<ekran_014.tif>

<pre> Etiketi
Bu etiket kullanlarak yazlan metinler, kodlara yazld ekliyle grntlenir. Bylece satr aralar ve fazladan verilmi kelime aras boluklar baka yntemlere bavurmara gerek kalmadan (<br> etiketi ve bol miktarda &nbsp; kullanmak gibi) korunmu olur. rnek: <pre> 25

HSSE ALI EREGL 14.500 SAHOL 5.900 TUPRS 26.500 </pre>

SATI 14.750 6.000 27.000

SON 14.500 5.900 27.000

<ekran_015.tif>

<sup> ve <sub> Etiketleri

Bu etiketler, metinleri styaz ve altyaz biimlerinde yazmamz salarlar. rnein bilimsel konulu metinlerde rastlanabilecek trden H20 ve 27oC gibi ifadeleri bu etiketleri kullanarak yazabiliriz. H₂O H₂SO₄ 27^oC

Yaz Tipi (Font)

Metin dzenleme etiketlerinden belki de en nemlisi ve en sk kullanlan font etiketidir. imdiye kadar rendiimiz metin dzenleme etiketlerinde hep Browser'n varsaylan (default) ayarlarna hitap ettik. Font etiketiyle ilk defa bu ayarlardan birini deitireceiz. Bu etiketin kullanmnda dikkat etmemiz gereken baz noktalar var. Bunlardan birincisi yaz tipi seimidir. Size gzel grnen, ok beendiiniz bir yaz tipi herkesin bilgisayarnda ykl bulunmayabilir. Bu durum, Browser'n istenen fontu gsterememesine, dolaysyla istediiniz estetiin oluturulamamasna neden olur. Buna kar alnabilecek nlemlerden biri yaz tipine (font) alternatifler vermektir. Bylece eer kullanmak istediimiz font ziyaretinin iletim sisteminde kurulu deilse ikinci, nc fontlar aranr. Bu ekilde ziyareti Browser'a rnein, "Bu metni, tahoma yaz tipiyle grntle, eer tahoma sisteme yklenmemise verdana kullan; ayet o da yoksa arial kullan!" demi oluyoruz. Yaygn font gruplarnn hangileri olduu konusunda fikir vermesi iin Web tasarm editrlerinin font ayarlarn inceleyebilirsiniz. Yine Internet'te en ok ziyareti eken sitelerde hangi fontlarn kullanldn incelemek iyi bir fikir olabilir. Font konusunun pf noktalarna deindik. imdi uygulamamza geelim. nce "Sayfama Hogeldiniz" metnini deiik fontlarda ekrana yazdralm. <p><font <p><font <p><font <p><font <p><font face="verdana">Sayfama Hogeldiniz</font></p> face="tahoma">Sayfama Hogeldiniz</font></p> face="comic sans ms">Sayfama Hogeldiniz</font></p> face="fixedsys">Sayfama Hogeldiniz</font></p> face="courier">Sayfama Hogeldiniz</font></p>

26

<ekran_016.tif>
Control Panel/Denetim Masas'ndaki Fonts/Yaz tipleri simgesini ift tklayarak sisteminizde ykl bulunan fontlar inceleyin ve bu fontlar yukardaki rnee uygulayn. Bu rnekle beraber font etiketini bir parametresiyle birlikte rendik: face. ngilizcede bu kelime yz anlamna geliyor; matbaaclkta ise bir yaz tipi ailesi anlamna kullanlyor. Srayla dier parametreleri de rneklerle grelim. <font face="verdana, arial"> <font size="1">Punto bykl <font size="2">Punto bykl <font size="3">Punto bykl <font size="4">Punto bykl <font size="5">Punto bykl <font size="6">Punto bykl <font size="7">Punto bykl </font>

1</font><br> 2</font><br> 3</font><br> 4</font><br> 5</font><br> 6</font><br> 7</font><br>

<ekran_017.tif>
Font byklkleri 1'den 7'ye kadardr ve size parametresi ile belirlenir. Bu rnekte dikkat ekici baka bir nokta da <font> etiketinin deiik parametreleri ile i ie kullanlabilmesidir. En darda font tipini (face) belirttik. Bylece bu etiket sonlandrlncaya kadar tm metinler verdana ile gsteriliyor. Tedbiri elden brakmamaya almak amacyla, alternatif font olarak arial kullanlacan da belirtiyoruz. ksmda ise font llerini (size) deitirdik. Bu kodlama farkl bir yazm ile de yaplabilir: <font <font <font <font <font <font <font face="verdana, face="verdana, face="verdana, face="verdana, face="verdana, face="verdana, face="verdana, arial" arial" arial" arial" arial" arial" arial" size="1">Punto size="2">Punto size="3">Punto size="4">Punto size="5">Punto size="6">Punto size="7">Punto bykl bykl bykl bykl bykl bykl bykl 1</font><br> 2</font><br> 3</font><br> 4</font><br> 5</font><br> 6</font><br> 7</font><br>

Bu kodlarla Browser'daki grnt deimeyecektir. Fakat her defasnda face="verdana, arial" komutunu tekrar tekrar yazarsak, gereksiz yere kodun imesine yani dosya boyutunun bymesine sebep oluruz. Bu, sayfalarmzn Internet'te ziyaretilerimize aktarlmasnda gecikmelere yol aar. Fonta bal byklkler de verebiliriz. Daha nce rendiimiz <big> ve <small> etiketlerini hatrlayalm. Bu etiketler metnin bykln artrmaya ve azaltmaya yaryordu. Yani bal etiketlerdi. te <big> etiketinin gerekte karl puntoyu bir l artr anlamnda <font size="+1"> dir. +1'den +4'e kadar deerler vererek punto byklklerini artrabiliriz. Puntolar kltmek iin de <small> etiketinin karl olan <font size="-1"> kodunu kullanyoruz. Yalnz burada farkl olarak -1 ve -2 deerlerini kullanabiliriz. u rnee dikkat edin: <font face="tahoma, arial"> <font size="3">Punto bykl 3</font><br> 27

<font size="+1">Punto bykl 4 oldu</font><br> <font size="-2">Punto bykl 2 oldu</font><br> <font size="+4">Punto bykl 6 oldu</font><br> </font> lkokul matematik derslerini hatrlatan bu konuyu da rendikten sonra renkli konulara gemenin artk zaman geldi.

Metinleri Renklendirme
HTML'de renkler konusuna nceki blmlerde deinmitik. Web sayfalarmzda renk kullanmann iki yolu olduunu hatrlyor olmalsnz: renklerin ngilizce adlarn kullanmak veya rengin RGB deerini heksadesimal dzende belirtmek. Heksadesimal konusuna tekrar girmeyeceiz fakat RGB'nin Red (krmz) Green (Yeil) Blue (Mavi) kelimelerinin ba harflerinden olutuunu hatrlatmakta fayda var. imdi renk tablomuzu inceleyelim. Siyah Lacivert Mavi Yeil Koyu yeil Parlak yeil Turkuaz Vine r Mor Zeytuni yeil Gri Gm grisi Krmz Parlak pembe Sar Beyaz black navy blue green teal lime aqua maroon purple olive grey silver red fuchsia yellow white #000000 #000080 #0000FF #008000 #008080 #00FF00 #00FFFF #800000 #800080 #808000 #808080 #C0C0C0 #FF0000 #FF00FF #FFFF00 #FFFFFF

Buradaki RGB deerlerini ezberlemeye gerek yok. Ama hala metinleri renklendirmeyi renemedik diyorsanz sizi <font> etiketinin color parametresiyle tantralm. <font face="comic sans ms, verdana" size="4"> <font color="red">Krmz</font><br> <font color="navy">Lacivert</font><br> <font color="olive">Zeytuni</font><br> <font color="blue">Mavi</font><br> <font color="green">Yeil</font><br> </font> Renkleri bu ekilde adlaryla kullanabileceimiz gibi RGB deerleriyle de ifade edebiliriz: <font face="comic sans ms, verdana" size="4"> <font color="FF0000">Krmz</font><br> <font color="000080">Lacivert</font><br> <font color="808000">Zeytuni</font><br> <font color="0000FF">Mavi</font><br> <font color="008000">Yeil</font><br> </font> 28

<ekran_018.tif>
color parametresinin dnda kullanabileceimiz bir baka yntem <body> etiketinin text parametresidir. Bu parametreye verilen renk tm sayfadaki metinlerin rengini kontrol eder. <body text="#000080">

<basefont> Etiketi
Tm sayfada geerli olacak yaztipi kurallar belirlemek istediimizde <basefont> etiketini kullanyoruz. Bunun iin bu etiketi <body> etiketinden hemen sonra kullanrz. rnekler: <body> <basefont face="verdana"> Kodu, tm sayfadaki metinleri verdana fontu ile grntler. <basefont size="6"> Font bykln 6 yapar. <basefont color="red"> Metinlerin rengi krmz olarak grntlenir. Etiketi ayr ayr parametrelerle kullanmak yerine birlikte de kullanabiliriz: <body> <basefont face="verdana" size="6" color="red"> Bu kodlarla oluturduunuz sayfalar her iki Browser ile inceleyerek sonular karlatrabilirsiniz. <basefont> ile tanmladmz font rengi ve byklkleri, sayfada tablo kullanlmsa (tablolar konusuna sonraki blmlerimizde deineceiz) tablo ierisindeki metinlerde geerli olmayacaktr. Bylece font etiketini ve parametresini renmi bulunuyoruz. Bir sonraki konuya gemeden nce yukardaki 16 renkten oluan tabloyu HTML olarak hazrlamaya ne dersiniz?

Listeler
HTML bize tr liste hazrlama imkan veriyor;

29

1. Sral Listeler 2. Srasz Listeler 3. Tanmlama Listeleri Banda rakam veya harf bulunan ve belli bir dzene gre ilerleyen liste tr sral listedir. Srasz listelerin bana kk daire veya kare gibi ekiller gelir. Tanmlama listeleri ise <blockquote> etiketinde grdmz etkiye benzer yapda listeler oluturur. imdi bu trde de liste hazrlamay renelim.

Sral Listeler (Ordered List) : <ol></ol>

Her bir liste esinin bana <li> etiketi yazlarak tm liste <ol> ... </ol> etiketleri arasna alnr. <li> list item (liste esi), <ol> ordered list (sral liste) anlamna geliyor. <li> etiketi kapatlmadan da kullanlabilir. Ay adlarn sral liste eklinde hazrlayalm, <ol> <li>Ocak <li>ubat <li>Mart <li>Nisan <li>Mays <li>Haziran </ol>

<ekran_019.tif>
Listeleme ilemi ilk liste esine (list item) 1 numara verilerek balatlyor. 1 yerine a, A gibi harf kullanmak istersek veya listeyi 1'den deil de baka bir saydan balatmak istersek <ol> etiketinin parametrelerine bavururuz. <ol> etiketi ile kullanabileceimiz adet parametre vardr; start, type ve compact. Bunlardan start parametresi listenin 1 yerine baka bir say ile balamasn salyor. rnein <ol start="5"> listelemeyi 5 numaradan balatr. type parametresinde listeleme sistemini belirtiyoruz. Kullanl: type=1|A|a|I|i Listeleme sisteminin rakamlardan olumas iin type="1", byk harflerden olumas iin type="A", byk Romen rakamlar iin type="I" ve kk Romen rakamlar iin type="i" kullanyoruz. Listelemenin E harfinden balamas iin nasl bir kod kullanmak gerekir? Bu durumda iki parametreye birden bavuruyoruz.

30

Listede byk harfler kullanlacan bildirmek iin type="A" ve alfabenin 5. eleman olan "E" den balanmas iin start="5" komutlarn kullanmalyz. <ol type="A" start="5"> Son parametre olan compact liste eleri arasndaki satr aralnn asgar olmasn salyor. Bu parametrenin kullanmnda grntnn deimediini grebilirsiniz. Bu parametre daha ok tanmlama listelerinde ie yarayabilecek bir parametredir.

Srasz Listeler (Unordered List) : <ul></ul>

Bu tip listelemede liste elerinin bana rakam veya harf deil de ii bo daire (disc), ii dolu daire (circle) veya kare (square) ekillerinden birisi gelir. Ay adlarndan oluan listemizi srasz liste dzeninde hazrlayalm; <ul> <li>Temmuz <li>Austos <li>Eyll <li>Ekim <li>Kasm <li>Aralk </ul>

<ekran_020.tif>
<ul> etiketinde kullanabileceimiz iki parametre vardr. Bunlar sral listelerdeki gibi compact ve type parametreleridir. type parametresine disc, circle ve square deerlerini verebiliriz. Kullanl: type=disc|circle|square <ul type="square"> <li>lkbahar <li>Yaz <li>Sonabahar <li>K </ul>

<ekran_021.tif>

Tanmlama Listeleri (Definition List) : <dl>...</dl>

Bu liste biimi nceki iki listelemeye gre biraz farkl. Liste elerinin bana rakam, harf veya herhangi bir ekil gelmiyor. Bunun yerine liste eleri sayfada biraz daha ieriden grntleniyor.

31

Sral listeleri <ol>...</ol>, srasz listeleri de <ul>...</ul> etiketleri arasna alyor ve liste eleri iin her ikisinde de <li> etiketini kullanyorduk. Tanmlama listesini <dl>...</dl> arasna alrz. Fakat dier iki liste trnden farkl olarak tanmlama listelerinde iki tip e vardr: Tanmlanan terim (<dt>) ve tanmlama metni (<dd>). En iyisi bir rnekle anlatalm: <dl> <dt>lkbahar <dd>Mart <dd>Nisan <dd>Mays <dt>Yaz <dd>Haziran <dd>Temmuz <dd>Austos <dt>Sonbahar <dd>Eyll <dd>Ekim <dd>Kasm <dt>K <dd>Aralk <dd>Ocak <dd>ubat </dl>

<ekran_022.tif>
Burada tanmlanan terim, rnein Yaz, tanmlama metninden oluuyor: Haziran, Temmuz, Austos. Bu listeyi oluturup, Browser'nzda inceleyerek, dier listelerden farkn grmelisiniz. Yukarda rendiimiz trde listeyi karmak listeler hazrlamakta kullanabiliyoruz. ie dallanm listeler dnn. Bu mesela bir kitabn iindekiler listesi olabilir. <ol type="I"> <li>INTERNET <ol type="A"> <li>Internet'in Tarihesi <li>World Wide Web <li>Browser'lar </ol> <li>HTML <ol type="A"> <li>HTML'e Giri <li>HTML Nedir? <ol type="i"> <li>HTML'in Tarihesi </ol> <li>Metinler <li>Grafikler <li>Renkler <ol type="i"> <li>16 Renk Tablosu <li>Tm Renkler </ol> <li>Balantlar <li>Tablolar

32

<li>ereveler </ol> </ol>

<ekran_023.tif>

33

BLM 4
Grafik ve Renkler
Metin dzenlemekte kullanacamz etiketleri rendik. Ancak Web sayfalarnn metinden ibaret olmadn da biliyoruz. te bu blmde sayfa tasarmnn bir paras olan grsel unsurlarn HTML'deki yerini reneceiz. HTML'de grafik ve renkler konusuna daha nce ksaca deinmitik. Web'de kullanabileceimiz iki (henz yaygn olmayan ama hzla yaygn hale gelen PNG ve SVG'yi de sayarsak drt) grafik biimi olduunu, bunlarn birbirlerinden farkn, nerede hangi biimi kullanacamz az ok biliyoruz. Yine renkler konusundaki bilgilerimiz de hafzamzda canl bir ekilde duruyor olmal. Bu blmde kullanacanz grafik dosyalarn sabit diskinizde bulunan dosyalardan seebileceiniz gibi herhangi bir grafik ileme program ile de hazrlayabilirsiniz. Usta Web tasarmclarnn gzdesi Photoshop' kullanmanz art deil. Bu program sizde bulunmuyorsa Web grafii hazrlamak iin baka birok programdan faydalanabilirsiniz. PaintShop Pro bir dier yaygn kullanlan grafik programdr. Macromedia Fireworks, Adobe ImageReady ve daha bir ok grafik programn kullanabilirsiniz. imdi Web'de renkler konusuna geelim. Cevap arayacamz ilk soru, Web sayfamzda hangi unsurlar renklendirebileceimiz olmaldr. Metinlere <font> etiketinin color parametresini kullanarak renk verebiliyoruz. Fakat renk kullanm elbette metinlerle snrl deil; sayfamzn ardalanna (background) renk verebiliriz; sonraki konularda greceimiz tablolar kullanarak sayfada belli alanlar oluturabilir ve bunlarn herbirine farkl renkler verebiliriz, balantlar (link), metin satrlarnn fonlarn da renklendirmek mmkndr. imdilik sadece sayfamzn arka plannn (ardalan, fon) rengini deitirmeyi renelim; yeri geldike yukarda bahsettiimiz dier unsurlara nasl renk vereceimize deineceiz. Bir sayfann tmnn rengini <body> etiketinin bir parametresi olan bgcolor komutu ile atyoruz. Daha nce <body> etiketini hep yalnz bana kullanmtk. bgcolor, <body> etiketinde kullanlabilecek birok parametreden biri. Yine yeri geldike bu parametrelere deineceiz. imdi bgcolor'n kullanmn grelim: krmz fon zerine beyaz yazlar yazalm. <body bgcolor="#FF0000"> <font color="#FFFFFF" face="garamond" size="5"> <p><b>stiklal Mar</b></p> Dalgalan sen de afaklar gibi ey anl hill! <br> Olsun artk dklen kanlarmn hepsi hell. <br> Ebediyyen sana yok, rkma yok izmihll: <br> Hakkdr, hr yaam, bayramn hrriyet; <br> Hakkdr, Hakk'a tapan, milletimin istikll! <br> </font> </body>

34

<ekran_024.tif>
Renk kodunu daha nce rendiimiz dier yntemle belirleyebiliriz. Son olarak bir ipucu: bgcolor parametresini iyi ezberleyin renklendirme konusunda olduka sk kullanacamz bir komut.

Grafik Etiketi: <img>

te yepyeni bir etiket: <img>. ingilizce image kelimesinden bu etiketi aklnza getirebilirsiniz. Web sayfalarnda kullanacamz grafik dosyalar Web sayfasn oluturan kodlara gmlmez. imdi burada kafanz biraz karyorsa yle bir rnekle konuyu aklayalm. Microsoft Word ile hazrladnz belgelere grafik ekleyip bylece dosyay kaydettiinizde grafikler Word belgesini oluturan dosyann kodlar arasna yazlr. Bunu iki satrlk bir Word dkmanna kocaman boyutlu bir grafik ekleyip sonra da dosyann boyutunu kontrol ettiinizde grebilirsiniz. te HTML'de byle bir durum sz konusu deildir. Web sayfas oluturan kiinin yapmas gereken tek ey grafik dosyasnn diskteki yolunu belirten kodu yazmaktr. Bunu da <img src=...> etiketi ile yapyoruz. Dosya yolunu src (source=kaynak anlamnda) parametresi karlna yazyoruz. te bununla ilgili bir rnek: <img src="c:\belgelerim\aile.jpg"> Herhalde bu rnekle birlikte birok ey aklk kazand. Bu kodun anlam "C: adl sabit diskte, kk dizinde bulunan 'belgelerim' klasr iindeki 'aile.jpg' dosyasn sayfaya yerletir!" demektir. (Bu arada bl iaretinin ynne dikkat ediniz.) Fakaat, iler herzaman byle yrmez. Bedava veya paral Internet alan veren bir firmadan aldmz yerin gerekte Server'n hangi sabit diskinin hangi klasrnde durduunu bilmemiz ok zor hatta neredeyse imkanszdr. Ayrca Internet'te bir eye, bulunduu sabit disk ve bu diskteki yolla gndermede bulunmak gvenlik asndan da yanl olur. Bu sebeplerden dolay <img src=...> etiketini farkl bir ekilde kullanrz. Bu kullanm tarznda dikkat edilmesi gereken nokta o anda alan-grntlenen HTML dosyasnn sabit diskteki yerinin esas alnddr. Bu ne demek? u demek; ayet HTML dosyas ile grafik dosyas ayn dizin ierisindelerse bu grafik dosyasna gnderme u kodla yaplr: <img src="resim.gif"> Gayet kolay deil mi? Sabit disk yok, klasr yok, uzun dosya yollar yok; sadece grafik dosyasnn ad var. Peki ama henz herey bitmedi. Diyelim ki bir otomobil sitesi hazrlyorsunuz ve elinizde sayfanza koymak istediiniz onlarca otomobil resmi var. stiyorsunuz ki bu onlarca resim dosyas dier dosyalara karmadan otomobiller adl dizinde dursun. Bu dizinde bulunan bmw520i.jpg dosyasna erimek iin kullanacamz kod yle olmal: <img src="otomobiller/bmw520i.jpg"> 35

Bu kod, "u anda alan HTML dosyasnn bulunduu klasrde 'otomobiller' diye bir dizin var; onun iinde de idealim olan otomobilin, bmw520i.jpg isimli bir dosyada resmi var; onu sayfaya koy!" anlamna geliyor. (Browser'n sizin ideal otomobilinizle ilgilenmesini beklemiyorsunuz, deil mi?) Bu ekilde iie bulunan klasrlerin herbirine ulamamz mmkndr. u rnekleri inceleyin: <img src="otomobiller/bmw/bmw320i.jpg"> <img src="otomobiller/station/renault/toros.jpg"> stediimiz grafik dosyasna hangi alt klasrde olursa olsun ulaabiliyoruz; peki st klasrlere nasl erieceiz? Bunun iin kullanacamz kod da 3 karakterden ibaret: "../". Kaynak belirtirken kullandmz src parametresindeki her bir "../" ifadesi bizi bir st klasre gtrr. Ayn ekilde istediimiz kadar st klasre bu yolla ulaabiliriz. <img src="../otomobiller/volvo.jpg"> Bunun anlam; "Bir st dizine k, orada 'otomobiller' dizinini bul; iindeki volvo.jpg dosyasn al!" demektir. Ayn ekilde; <img src="../../otomobiller/rover.jpg"> bizi iki dizin ste kartr. Grafiklere, Internet adreslerini kullanarak ulamamz da mmkndr. rnein Web sayfamzda kullanmak istediimiz bir sitenin logosunu o siteden almak istersek src parametresi karlna grafik dosyasnn URL'ini yazarz: <img src="http://www.webteknikleri.com/logo.gif"> Bu konuyla ilgili bir kullanm ekli daha var. O da dorudan bl "/" iaretini kullanmaktr. Bu yntem bizi doruca kk dizine (root) gtrr. Tabi eer dosyalarnz Web Server'da ayrlm bir klasrde durmuyorsa dorudan sabit diskin kk dizinine ularsnz. Web Server'da duran dosyalarda ise bu komut bizi sabit diskin deil, sitenin kk dizinine gtrr. Bu fark yle belirtelim; <img src="/otomobiller/peugeot.jpg"> komutu ayet sizin kendi bilgisayarnzda altrlan bir HTML dosyasnda ise c:\otomobiller\peugeot.jpg dosyasna ularsnz. Fakat bu sayfa, gerek Internet sitesinde ise, Web Server buradaki kk dizini sitenin kk dizini kabul edeceinden ulaacanz dosya sitenize ayrlan dizinde aranr.

36

KUTU/////////////////////////////////////////////////////////////

Kaynak Yazarken
cretli Web Server'larda edindiimiz site alanlar, ounlukla c:\Inetpub\wwwroot\ dizininde bizim admza alan bir alt-dizindir. Byle bir durumda bizim Peugeot resmi, muhtemelen c:\Inetpub\wwwroot\ahmet_in_sitesi\otomobiller\peugeot.jpg gibi bir yere sahip olacaktr. Bedava alan ad veren yerlerde de durum bunun aynsdr. Mesela http://www.websamba.com/benimsayfam/ bizim kk dizinimizdir. Fakat cretli veya cretsiz, gerek bir Web Server'da bize ayrlan yerin tam yolunu hemen hemen hi bir zaman bilemeyiz. Bu sebepten dolay, iyi bir alkanlk, sayfalarmz kendi sabit diskimizde bile alacak olsa, grafik dosyalarna kaynak yazarken gndermeleri greli olarak belirtmektir. KUTU BTT//////////////////////////////////////////////////////// Farkl dizinlerde bulunan grafiklere ulama konusunu daha iyi kavramak iin bilgisayarnzda klasrler oluturup ilerine kendi grafik dosyalarnz yerletirin, sonra farkl klasrler iinde oluturacanz HTML dosyalar ile bu grafiklere ulamaya aln. htiyacnz olan tm bilgi st satrlarda. Yapmanz gereken ey bol bol pratik.

Grafik Dosyasnn Ebatlar

Artk herhangi bir yerdeki herhangi bir Web grafiine HTML ile nasl ulaacamz biliyoruz, ama herey bununla bitmiyor. <img> etiketinin birok parametresi var; src bunlardan sadece biri. Dier iki parametre, grafik dosyasnn piksel cinsinden ebatlarn belirten width (genilik) ve height (ykseklik) lleridir. Biraz nceki rneklerimizde bu iki parametreyi kullanmadk. nk sayfalarmzdaki resimlerin ebadn belirtmemiz art deil. yleyse bu parametreler ne ie yaryor? Web sitelerini dolarken dikkatinizi ekmi olmal. Baz sayfalar yklenme aamasndayken sayfada oynamalar, kaymalar, yer deitirmeler olur. te bunun balca nedeni bu iki parametrenin kullanlmamasdr. Yklenme aamasnda Browser sayfaya yerletirilecek grafiin ebatlarn bilemediinden kendisi varsaylan ykseklik ve genilikte geici bir alan aar. Yklenme ncelii metinlere ait olduundan, grafikler yklendike ve kendileri iin ayrlan geici alana samadklarnda bu yer deitirme ve oynamalar gerekleir. te bahsettiimiz bu iki parametre Browser'a bu alan varsaylan deil, bizim belirttiimiz deerlerle amasn bildirir. Bylece yklenme srasnda bahsettiimiz durum ortaya kmaz. Hepsi bu kadar. rendiklerimizle ilgili rneklere geelim. <img src="manzara/yayla.jpg" width="150" height="80"> Bu kodla, yklenecek resmin 150 piksel geniliinde, 80 piksel yksekliinde olduunu nceden Browser'a belirtmi olduk. Peki bu deerleri nereden renebiliriz? Elbette kullandmz grafik editrnden. Baka bir yol da yle; komutu nce width ve height parametreleri kullanmadan verin. Sonra Browser'da bu dosyay ap Mouse imlecini grafiin zerindeyken sa tklayp zellikler/properties' i sein. Alan pencerede resmin

37

ebatlarn grebilirsiniz. 150 x 80 ifadesi width="150" height="80" anlamna gelir.

<ekran_025.tif>

KUTU/////////////////////////////////////////////////////////////

Resmin Gerek ve Grntlenen Ebad

<img src="manzara/yayla.jpg" width="150" height="80"> komutuyla, gerek ebad szgelimi 300x160 olan bir resmi, sayfamzda yzde 50 kltlm olarak grntleyebiliriz. Baka bir ifade ile <img src="..." width="..." height="..."> komutu Browser'a, gelmekte olan grafie ayraca yeri bildirirken, gelen resmi gerek ebad ne olursa olsun, enini-boyunu bu yere gre deitirmesini de bildirebilir. Bir resmin en/boy orantsn bozacak bir ebada kltlmesinin estetik sakncalarn deneyerek grmek en doru yol olsa gerek. Ancak byk ebadda bir grafii ziyaretinin Browser'na aktardktan sonra, bunu daha kk bir boyutta grntletmenin Web teknii asndan anlam yoktur: byk resmin ziyaretiye aktarlmas, mutlaka grntlenen ebaddaki daha kk resmin aktarlmasndan ok daha uzun zaman alacaktr. Bir baka deyile ziyaretiyi byk resmin bilgisayarna aktarlmas iin bo yere bekletmi olacaz. Bir grafii, kendi boyutlarndan daha byk olarak grntlemeye almann da sakncalar vardr. Bu durumda Browser, elinde mevcut resim bilgisini, bir takm aritmetik hesaplarla deitirecek ve resmi bytmeye alacaktr. Bunun birinci etkisi, resmin dz izgilerinin basamakl hale gelmesi, tonlar arasndaki aamal geilerin kaybolmas ve resmin grsel deerinin azalmas olacaktr. Bunun bir dier sakncas ise Browser'n bu hesab yaparken, sayfay grntleme ilemine son vermesi ve uzunca bir sre, ziyaretinin bilgisayarnn adeta donmasdr. Bu, bir ok ziyaretinin bir daha bizim sitemize gelmemesi sonucunu ortaya kartr. Sonu olarak, iyi bir Web tasarmcs daima grafiklerini, sayfada yer verecei boyutlarda kaydeder. Btn grafik editing programlar, bir resmi istediiniz boyuta indirme imkanna sahiptir. KUTU BTT//////////////////////////////////////////////////////// imdi hazr Mouse imlecini resmin zerine getirmiken yeni bir parametre ile tanalm: alt. Bu parametre grafie alternatif metin vermeye yarar ve etkisi iki ekilde grlr. Grafik, Server tarafndan ziyaretinin bilgisayarna gnderilmeden nce alt ile verdiimiz metin grafie ayrlan alanda grntlenir. Grafik yklendikten sonra ise Mouse imleci grafik zerine getirildiinde kk sar bir pencere iinde bu metni grrz. <img src="deniz.jpg" width="150" height="80" alt="Denizde akam gnei">

<ekran_026.tif>
Milattan nceki devirlerde yani Browser'lar en fazla 16 renk grntleyebilirken, kullanclar sayfann daha hzl yklenmesi iin Browser'nn resim gsterme seeneini 38

kapatrd. Zira ama cvl cvl reklam banner'laryla donatlm bir sayfaya erimek deil, byk olaslkla bir niversitenin sitesindeki aratrma tezini filan incelemekti. ayet Browser ayarlarndan, grafik gsterme seenei kapatlmsa bile verilen alternatif metin ile grafik hakknda kullancnn bir fikri olmas salanabilirdi. Bu kadar tarih bilgisinden sonra dier parametrelerimize geelim.

Resimleri Hizalama
Metinler konusunda grdmz align parametresini hatrladnz, deil mi? Tm hizalamalarda olduu gibi resimlerin hizalanmasnda da bu parametreyi kullanyoruz. align = absbottom | absmiddle | baseline | bottom | center | left | middle | right | texttop | top Grld gibi bu parametrenin <img> etiketi ile kullanmnda alabilecei deerler olduka fazla. Herbirinin ne ie yaradn aadaki rnei inceleyerek renebilirsiniz; burada kullandmz grafik dosyalar yerine siz kendi grafiklerinizden herhangi ikisini kullanabilirsiniz. Yalnz bu grafiklerden biri dierine gre daha byk ebatlarda olmal. <img src="fax.gif"> Metin <img src="disket.gif"> <p>Hizalama parametresi kullanmadan iki grafik ve metin bu ekilde grntlendi.</p> <hr> <img src="fax.gif" align="top"> <img src="disket.gif"> <p><b>align="top"</b> - Grafikler st kenara dayal olarak grntleniyor. (st kenar snr, burada byk resme gre belirleniyor)</p> <hr> <img src="fax.gif" align="middle"> Metin <img src="disket.gif"> <p><b>align="middle"</b> - Dier nesnelerin (ikinci grafik ve metin) alt snr birinci resmin orta noktasna denk decek ekilde ayarland.</p> <hr> <img src="fax.gif" align="bottom"> Metin <img src="disket.gif"> <p><b>align="bottom"</b> - Tm nesneler ayn taban hizasna sahip olacak ekilde grntlendi. Bu ayn zamanda varsaylan (default) deerdir. Hizalama parametresi kullanmadan elde ettiimiz grntyle bu rnei kyaslayn.</p> <hr> <img src="fax.gif" align="absmiddle"> Metin <p><b>align="absmiddle"</b> Resmin orta kenar hizas, metin satr hizasnn (metin satr hizas ile metin hizas farkl eylerdir. Mouse imleci ile metni tarayn oluan seili alan metin satrdr.) orta noktas ile kesiiyor. absmiddle'n middle'dan fark; middle'da metnin orta noktas esas alnrken absmiddle'da metin satrnn orta noktas esas alnr.</p> <hr> <img src="fax.gif" align="absbottom"> Metin <p><b>align="absbottom"</b> Resmin alt kenar ile metin satr alt kenar ayn hizada grntlenir. Bu rnei daha iyi anlayabilmek iin sayfay seili hale getirin (Ctrl+A) metin satr ile resim alt kenar ayn hizadalar, tm sayfa seili iken align="bottom" rneini incelerseniz, burada esas alnann metin satr deil metnin kendisi olduunu grebilirsiniz.</p> <hr> <img src="fax.gif" align="texttop"> Metin <img src="disket.gif"> <p><b>align="texttop"</b> Resim ve metin satrnn st kenarlar ayn hizaya sahip, metinden sonra gelen ikinci resim ise metinle ayn alt kenar hizasna sahip olacak ekilde grntlendi.</p> 39

<hr> <img src="fax.gif" align="baseline"> Metin <img src="disket.gif"> <p><b>align="baseline"</b> Tm nesnelerin taban hizalar ayn seviyede grntleniyor, </p> <hr> <img src="fax.gif" align="center"> Metin <img src="disket.gif"> <p><b>align="center"</b> middle deeri ile ayn neticeyi veriyor, </p> <hr> <img src="fax.gif" align="left"> <p>Metin</p> <br clear="left"> <br> <p><b>align="left"</b> Resmi sola dayad ve paragraf etiketi kullanmamza ramen metin yeni satrda balamad, fakat metnin zerinde bir satrlk boluk olutu. Bylece tablo kullanmadan grafik ve resimleri iki stun halinde kullanmak mmkn olmaktadr.</p> <hr> <img src="fax.gif" align="right"> <p>Metin</p> <br clear="right"> <br> <p><b>align="right"</b> Resmi saa dayad. left parametresi ile oluturulan etkinin aynsn burada da gryoruz. Tek fark left ile resim sola dayanrken right deerinde saa dayanyor.</p>

<ekran_027.tif>
Hizalama parametresinin alabilecei deerlerin okluu aklnz kartrmasn, ou zaman bu deerlerden left, right ve middle gibi ikisini-n kullanrz. Bir Web sayfasna yapsal istikrar kazandrmak iin hizalamalar ok daha etkin biimde tablolar yardmyla yapmay ileri konularda greceiz. Burada nem kazanan bir nemli etiket, kodlarn arasnda grdnz <br clear="..."> etiketi. Left ve right gibi deerlerle resmi hizaladmz zaman oluturduumuz stun etkisini bu etiketle kaldryoruz. Bu parametre deerle kullanlabilir: clear = left | right | all Left ve right, align parametresinde kullandmz deere gre etki gsterirken all deeri her ikisini de kapsar.

hspace - vspace Parametreleri

Bu parametreler resmin sa-sol-st ve altnda belirtilen piksel boyutunda boluklar brakr. zellikle align parametresi ile resim ve metinleri birlikte kullandmzda hspace ve vspace'den yararlanabiliriz. <img src="disket.gif" align="left">Resim ile metin normal aralkta. <br><br><br><br> <img src="disket.gif" align="left" hspace="25">Resmin sanda ve solunda 25'er piksel boluk olutu.

<ekran_028.tif>

40

<img src="disket.gif" valign="top" vspace="30">Resmin stnde ve altnda 30'ar piksel boluk olutu. <br><br><br><br> <img src="disket.gif" valign="top">Resim ile metin normal aralkta.

<ekran_029.tif>

border Parametresi
Balant kurulmu bir resme border deeri verilmedii taktirde resmin etrafnda varsaylan olarak mavi renkte bir ereve oluur. Bu, ou tasarmcnn istemedii bir etkidir ve bu ereveyi yok etmek iin border parametresine "sfr" deeri verilir. Balantlar konusuna ileride deineceiz fakat burada anlatmak istediimiz etkiyi oluturmak iin balant verilmi bir resim kullanalm: <a href="#"><img src="disket.gif"></a> Dosyay Browser'da atnzda mavi ereveyi farketmi olmalsnz. imdi ereveyi yok edelim: <a href="#"><img src=" disket.gif" border="0"></a> border parametresi, aslnda ereveyi yok etmeye deil ereve kalnln belirlemeye yaryor. Tabi sfr deeri verildiinde ereve yok oluyor. Baka deerler vererek de bu parametreyi kullanabiliriz. <a href="#"><img src="disket.gif" border="5"></a>

<ekran_030.tif>

Sayfa Fonunda Resim Kullanmak

En ok merak edilen konulardan bir dieri sayfa fonunda resim kullanmak olsa gerek. Bunun iin gerekli kod <img src="..."> etiketinden daha farkl. <body> etiketinin background parametresini kullanyoruz. <body background="fonresmi.jpg"> Verdiimiz fon resminin sayfa boyunca tekrar ettiini greceksiniz. Bunu engellemek iin tm sayfay kaplayan bir artalan resmi kullanmak da pek akllca deil. Eer fon resminin tekrar etmesini istemiyorsak bunun iin kullanabileceimiz bir kod var: bgproperties="fixed" <body background="fonresmi.jpg" bgproperties="fixed"> Ama bu kodun yalnzca Internet Explorer'da altn belirtelim. Netscape'de fon tekrar devam edecektir. Peki bir dezavantaj gibi grnen bu durumu avantaja eviremez miyiz? Dnn: 2x2 piksellik bir grafikle pekala gzel background'lar hazrlanabilir. 2 piksel'in 41

yars ak tonlu yars daha koyu tonlu bir grafik sayfa boyunca tekrar ettiinde ho bir grnm oluabilir. Veya 1024 piksel genilik ve 2 piksel yksekliinde bir grafik de bu amala kullanlabilir. Soldan ilk 120-150 piksel'i renklendirip geri kalan ksm beyaz brakarak Web'de birok sayfada rneini grdmz trde sayfalar hazrlayabiliriz. stelik bu kk ebatlardaki grafikler dosya boyutu itibariyle de sayfa yklenmesine pek yk getirmez.

<ekran_031.tif> <ekran_032.tif>

42

BLM 5
Balantlar
Web sayfalar bugnk hretini belki de HTML'in balant-kpr-link zelliine borlu. Bir metne-resme-nesneye tklyorsunuz, karnza baka bir metin-resim-nesne geliyor. Internet'te en ok yaptmz ey de bu deil mi? Metinler ve grafikler konusunu bitirdik artk bunlar arasnda nasl balant kuracamz greceiz. Biraz nce <img> etiketinin border parametresini renirken gz ucuyla balant etiketini inceledik. Bu etiket <a> (anchor) etiketidir. Ancak bu etiketi kullanmak iin parametrelere ihtiya duyuyoruz. En genel anlamyla iki trde balant kurabiliriz: sayfa iinde (dahili) ve sayfalar arasnda. Her iki durumda da kullanacamz parametre href parametresidir. Burada resimler.htm dosyasna nasl balant kurulduunu gryorsunuz: <a href="resimler.htm">Resim arivi iin tklaynz</a> <a href="...">...</a> etiketleri arasna alnan metin, resim veya nesneler balant zellii kazanrlar. Balantya tklandnda gidilecek kaynan HTML dosyas olmas da art deildir. Bu rnein bir JPEG grafik de olabilir, midi biiminde bir melodi hatta bir zip arivi de. Browser ayet kaynak dosyay altrabilirse (grafik, mzik, video dosyalar gibi) kullancya herhangi bir ey sormadan dosyay kendisi aar. Fakat .zip, .exe, .mp3 gibi Browser'n altramad dosyalar szkonusu olduunda ne yapmak istediinizi soran bir pencere alr. Bu penceredeki seeneklerle dosyay ilgili program kanalyla aabilir/altrabilir veya diskinize kaydedebilirsiniz. Deiik dosya trlerine balant kurarken de ayn kodu kullanrz: <a href="album.zip">Foto albmn diskinize ekmek iin tklayn</a> <a href="arastirma.doc">Konuyla ilgili son yaplan aratrma sonular</a> <a href="baris.mp3">Sanatnn yeni kan albmnden bir tantm</a> imdi de dahili balantlarn nasl hazrlandn grelim. Dahili balant olutururken de <a href> etiketini kullanyoruz fakat bu defa bir dosyaya balant vermediimiz iin balant kurmak istediimiz metin, grafik, nesneye bir isim veriyoruz ki bu isimle kendisine atfta bulunabilelim. Bu ii de <a> etiketinin name (isim) parametresi ile yapyoruz. Daha sonra <a href> etiketini kullanrken eittir (=) karakterinden hemen sonra # (diyez/atal) semboln kullanrz. Uzun bir sayfa dnelim, bu sayfann en altnda bir kelime tklandnda sayfa bana giden bir balant kuracaz. <a name="sayfabasi">Personel Web Server</a> <p> Microsoft'un yeni teknolojisi olan Active Server Pages (ASP) tekniini kullanan dosyalar hazrlayp altrabilmek iin koca koca serverlara, ate pahas yazlm ve iletim sistemlerine ihtiyacnz yok. Windows 95/98 43

iin gelitirilen ve Windows 95/98 CD-ROM'u iinde yer alan PWS, bu teknolojiyi masast bilgisayarlarmza tayor. PWS, Web sayfalarmz kontrol etmek ve gelitirmek iin kullanabileceimiz bir masast server (sunucu) yazlmdr. </p> ... ... ... <a href="#sayfabasi">Sayfa Bana Dn</a> Burada dikkat edilmesi gereken nokta sayfann yeterince uzun olup olmaddr. Eer Browser penceresinin sandaki kaydrma ubuu olumamsa linke tklandnda hibir ey olmaz nk zaten sayfa bandayz. Ayn ekilde grafiklere de isim verilerek dahili balant kurulabilir. <h2>Fotoraf galerisine hogeldiniz</h2> <p>iekler</p> <a href="#gul">Gller</a> <a href="#karanfil">Karanfiller</a> ... ... ... <a name="gul">&nbsp;</a> <img src="gul01.jpg><br> <img src="gul02.jpg><br> <img src="gul03.jpg><br> ... ... ... <a name="karanfil">&nbsp;</a> <img src=" karanfil01.jpg><br> <img src=" karanfil02.jpg><br> <img src=" karanfil03.jpg><br> lk rneimizin aksine bu sefer anchor'lar kodlarn daha ileri ksmlarnda tanmladk. Gryoruz ki, nerede tanmlanm olursa olsun anchor'la iaretlenmi bir nesneye ulaabiliyoruz. imdi u rnee bir gz atn; <a href="/otomobiller/bmw.htm#320i">... Bu kodla harici bir dosya ierisindeki anchor'a balant verilmi. Harici dosya kk dizinde (root) bulunan otomobiller klasr altndaki bmw.htm, anchor ise "320i". Bu balantya tklandnda nce bmw.htm dosyas alr, ardndan 320i isimli anchor sayfa bana gelene kadar sayfa kaydrlr. Bu rnei bilgisayarnzda denemek iin uzun metin ieren bir sayfa oluturun ve sayfann sonlarna doru bir nesneye anchor verin. Sonra baka bir dosyadan bu anchor'a yukarda rendiimiz metotla balant kurun. <a>...</a> etiketleri arasndaki nesnenin balant m anchor m olacan belirleyen href ve name parametrelerinden sonra tek tek dier parametreleri ele alalm.

44

accesskey Parametresi
<a href="periyodiktablo.htm" accesskey="p">Elementlerin periyodik tablosu iin tklaynz</a> Bu parametre ile Mouse dnda klavye tular ile balantya ulamak mmkndr. Fakat bu rnekte tanmladmz "p" tuuna basmak hibir etkiye sebep olmaz. nk accesskey ile tanmlanan tular tek balarna kullanlmazlar. Alt tuu ile birlikte p tuuna bastmzda Browser'n durum ubuunda (status bar-Browser penceresinin alt ksmndaki ubuk eklinde blm) balantnn verildii dosya grntlenir. Tpk Mouse imlecini bir balantnn zerine getirdiimizde olduu gibi. Ardndan "enter" tuuna basldnda balant tkland demektir. Balant verilen dosya alr veya altrlr.

charset Parametresi
Hedef dosyann karakter setini belirtmekte kullanlr. Sayfa karakter setini meta etiketleri ile belirtmeyi kitapn banda renmitik. Bu kod ayn zamanda sayfadaki Trke karakterlerin dzgn grntlenebilmesi iin her sayfada yer almas gereken bir koddu. Trke karakter setini belirten windows-1254 ve iso 8859-9 deerleri dnda dier dillerin de zgn deerleri vardr. te charset parametresi yaygn olarak kullanlmamakla birlikte kendi sayfalarmz ierisinde deil de rnein yabanc dilde hazrlanm bir sayfaya balant verirken kullanlabilir. <a href="http://msdn.microsoft.com" charset="iso8859-1">Microsoft'un yazlm gelitiriciler iin hazrlad site</a>

title Parametresi
Balant kurulan dosyaya balk vermekte kullanlr. Internet Explorer kullanclar Mouse imlecini balant zerine getirdiklerinde sar bir pencere ierisinde (<img> etiketinde kullandmz alt parametresinde olduu gibi) title'da verilmi metni grebilirler. Netscape ise title parametresine kar herhangi bir tepki gstermez! <a href="http://www.pclife.com.tr" title="Aylk Bilgisayar derginiz">PC Life</a>

<ekran_033.tif>

target Parametresi
Balant verilen dkmann hangi pencere veya erevede alacan belirtir. Bu parametre zellikle ereve yaps ieren sayfalarda kullanlyor. Grntlenen sayfay ereve (frame) kullanarak birka paraya ayrmsak, target parametresi ile erevelerden birindeki balantnn tklanmasyla baka bir erevenin ieriinin deimesini salayabiliriz. Bunun dnda target parametresine verilebilecek

45

dier deerlerle frame yapsnn iptal edilmesini, yine balantnn kendi atmz pencerede grnmesini salayabiliriz. target parametresinin alabilecei deerler unlardr; target = 'pencere veya erevenin ad' | _blank | _self | _parent | _top Buradaki deerlerden 'pencere veya ereve ad'n ereveler konusunda ele alacaz. _blank deeri balantnn isimsiz yeni bir pencerede almasn salar, _self deeri balantnn ayn pencere veya erevede almasn salar, bu deer ayn zamanda varsaylan (default) deerdir. _parent, hiyerarik yapda (rnein ereveyi oluturan dosyalardan birisi yeni bir ereve oluturuyorsa veya ereveler tanmlanrken birden fazla frameset kullanlmsa) ereveler szkonusu olduunda balant, mevcut frameset'i oluturan blgede grntlenir, aksi durumda _self deeri ile ayn sonucu verir. _top, mevcut sayfadaki tm frame yapsn kaldrarak balanty aar. ayet sayfada ereve yaps bulunmuyorsa _self deeri ile ayn sonucu verir. rnekler; <a href="http://www.webteknikleri.com" target="_blank">... <a href="galeri.htm" target="icerikler">... <a href="anasayfa.htm" target="_top">...

Balantlarda Farkl Renkler Kullanmak

Aksi belirtilmedii srece sayfadaki tm balantlar default renk olan mavi ile gsterilir. ayet balant tklanmsa bu balant artk ziyaret edilmitir ve farkl bir renkle, mor ile gsterilir. Bir nc durum da balantnn aktif olma durumudur. Balanty tklayp Mouse sol tuunu basl tuttuumuzda balant aktif vaziyette saylr. Yine bir balanty tklayarak yeni sayfaya gidildiinde ve Browser'n back/geri butonunu kullanarak nceki sayfaya dnldnde aktif balanty farkl rengiyle gzleyebiliriz. imdi balantlarn bu durumuna ayr ayr renk atamay grelim. Bunu <body> etiketinin parametreleri ile yapyoruz. <body link="#ff0000" vlink="#000000" alink="#0000ff"> Bu kod ile sayfada kullanlan tm balantlarn rengi deitirilmi olur. link="#ff0000" deeri balantlarn krmz renkle gsterileceini, vlink="#000000" deeri ziyaret edilmi balantlarn siyah olacan, alink="#0000ff" deeri de aktif linklerin mavi olacan belirtiyor. Renk kullanmdaki genel kurallar burada da geerliini koruyor. Yani heksadecimal deerler kullanlabildii gibi ngilizce renk adlarn da kullanabiliriz. Aslnda balantlarn bir drdnc durumu da vardr. Bu durum Mouse imlecini balantnn zerine getirdiimizde ortaya kar. Bu duruma hover diyoruz. Yalnzca Internet Explorer kullanclar hover durumunu gzleyebilirler. Hover kontroln HTML

46

etiket ve parametreleri ile yapamyoruz, bunun iin CSS (Cascading Style Sheets/Stil ablonu) tekniklerinden yararlanmak gerekiyor.

Resim Haritalar (Image Map)

Bazen bir Web sayfasnda bir resim ya da fotorafn zerinde tklanabilir alanlar oluturulduunu grrsnz; bu noktalardan birini tkladnzda Browser'nz sanki <a> etiketi ile bir balant salanm gibi, hedef sayfa, yer veya nesneye gider. Hatrlarsanz <a href> etiketi ile bir resme tek bir balant verebiliyorduk. te resim haritalar ile resmin farkl blgelerine farkl balantlar vermek mmkn hale geliyor. Resim haritalar kullanm tekniindeki farklla dayanarak iki eittir: 1. stemci tarafl (client-side) 2. Sunucu tarafl (server-side) Resmin zerine Mouse ile tklandnda, tklanan noktann koordinatlar ziyaretinin Browser' tarafndan aranp bulunuyorsa, buna client-side resim haritas denir. Daha etkin alr; daha hzldr. Fakat eski tr Browser'lar tarafndan desteklenmez. Ziyaretinin resimde tklad noktann koordinatlar Sunucu tarafndan aranp bulunup, sadece sonu Browser'a gnderilecekse, buna Sunucu-tarafl resim haritas denir. Yava alr; fakat eski tr Browser'lar sadece bu teknii kullanabilirler. Resim haritas hazrlamak zahmetli bir itir. Bu yzden srf bu i iin retilmi programlar bulunuyor. Ayrca MS Frontpage, Macromedia Dreamweaver, HomeSite gibi HTML editrleri ile resim haritalar kolay bir ekilde hazrlanabiliyor. Bir resim haritas hazrlamak iin, Mouse imlecini resim zerinde dolatrdmz srada imlecin koordinatlarn gsterebilen bir grafik editrne ihtiyacmz var. Kullandnz programn byle bir zellii bulunmuyorsa artk o program yeni srmyle deitirmenin zaman gelmi demektir. rneimizdeki ekran grntleri Photoshop'a ait. Ancak dier grafik editrleri ile koordinatlar benzer ekilde saptayabilirsiniz. imdi aadaki kodlar birlikte binceleyelim: <img src="siteharitasi.gif" usemap="#harita" border="0"> <map name="harita"> <area href="anasayfa.htm" shape="rect" coords="11,16,102,37"> <area href="linkler.htm" shape="rect" coords="11,55,83,75"> ... </map>

<ekran_034.tif>
Haritada kullanacamz resmi <img> etiketi ile sayfaya yerletiriyoruz; ancak burada yeni bir parametre kullanyoruz: usemap. Bu parametrenin deeri olarak, daha sonra hazrlayacamz haritaya vereceimiz ismi, bana # semboln ekleyerek, yazyoruz.

47

Harita hazrlama iini balatan etiket ise, <map> etiketi. <map name="..."> ... </map> etiketleri arasnda resim zerindeki blgeleri ve bu blgelerin her birinin balantlarn tanmlarz. Tklanabilir zellikler kazandrmak istediimiz blgeleri <area> etiketi ile belirtiriz. Bu etiketin coords ve shape parametrelerine dikat edin. shape ngilizce ekil anlamna geliyor. Bu parametreye rnekte verdiimiz rect deeri ise rectangular yani dikdrtgen alan tanmlanacan bildiriyor. Dikdrtgende tanmlanabilecek 4 nokta (keler) bulunduuna gre bu noktalarn koordinatlarn da coords parametresinde belirtiyoruz. (Koordinatlar grafik editrnde nasl bulacamza deineceiz.) shape parametresi ile baka u alanlar tanmlanabilir: shape = circle | rect | poly circle daire biiminde alan oluturur. 3 adet koordinat tanmlamak gerekir. (dairenin merkez koordinat ve piksel olarak yarap uzunluu) rect dikdrtgen alan oluturur. 4 ke iin koordinat deeri verilir. poly okgen biiminde alan oluturur. okgenin ke says kadar koordinat tanmlanr. Oluturulan alann ekline gre koordinat saysna dikkat etmek gerekiyor. imdi de grafik editr ile koordinatlar nasl bulacamz grelim.

<ekran_035.tif>
Mouse imlecini resim zerinde gezdirdiimizde imle koordinatlarn Photoshop'n info penceresinde grebiliriz. Siz de kendi grafik editrnzn pencere ve menlerini kartrarak imle koordinatlarn nasl bulacanz renebilirsiniz. rnein 100x200 piksel ebatlarnda bir resmi ele alalm. Koordinatlar (x,y) biiminde ifade ediyoruz.

<ekran_036.tif>
0,0 noktas resmin sol st kesidir. Sa st ke 0,200 sol alt ke 100,0'dr. imdi rnek haritada kullandmz resmin koordinatlarn nasl bulduumuzu inceleyelim. Photoshop gibi, imlecin resim zerindeki koordinatlarn bildiren bir grafik editing programnda resmi aarak, imleci resim zerindeki "anasayfa" yazsnn sol stne getirip koordinatlar okuyoruz. Bu deer x,y biiminde iki saydan ibarettir. Bizde bu deer 11,16 olarak gzkyor (Ekran grnts zerindeki 1 noktas). imdi de imleci ayn yaznn sa altna getiriyoruz. Okunan deer: 102,37 (Ekran grnts zerindeki 2 noktas). Bylece birinci dikdrtgen alann koordinatlarn rendik. lk ve son okuduumuz 4 deeri srayla coords parametresine yazyoruz:

<ekran_037.tif>
coords="11,16,102,37" Ayn ekilde dier balantlar iin tanmladmz alann koordinatlarn da bulabiliriz.

48

shape="circle" ile tanmladmz daire eklindeki alann koordinatlarn bulurken Mouse imlecini alann merkezi olmasn istediimiz noktaya getiriyoruz ve deerleri okuyoruz. nc koordinat deeri olan yarap uzunluunu belirlerken de Mouse imlecini dikey veya yatay olarak yeterli grdmz miktarda hareket ettirirken oluan fark deerini kullanyoruz. okgen grnml alanlar iin kullandmz shape="poly" parametresinde de imleci tek tek kelere getirip bu deerleri coords parametresine srayla yazyoruz.

49

BLM 6
Tablolar
Ve nihayet geldik HTML sayfasnn ina iskelesi olan tablolara. Bu satrlara gelene kadar hep rendiklerinizi hayallerinizdeki Web sayfalar ile kyasladnz ve hep eksik kalan bir ey vard; stunlu yapda sayfalar nasl oluturuluyor? HTML etiketlerinden birounu rendik: bylece alt alta satrlardan oluan, soldan saa doru doldurulan sayfalar hazrlayabiliyoruz. Fakat bu unsurlarla hazrladmz sayfalarmz tabir yerinde ise bir iskeletten mahrum. Tablo, dier btn grsel tasarmlarda ve sayfa dzenleme ilerinde olduu gibi HTML'de de "bilgi sunma arac" olarak gelitirilmitir. Fakat biz tablolar iin 'ina iskelesi' tabirini kullandk; nk tablolar, HTML'de bizi 'alt alta satrlardan oluan, soldan saa doru doldurulan' sayfa yapsndan kurtaran tek aratr. Dorusu bunun iin tablolar biraz da amalarnn dnda kullanyoruz diyebiliriz. Burada bahsedip durduumuz tablo sizin aklnzdaki satrl-stunlu yapdan daha farkl ve daha fazlas deil. imdi u iki ekran grntsn inceleyin.

<ekran_038.tif> <ekran_039.tif>
Birinci rnekte bildiimiz trde sradan bir tablo gryoruz; ikinci sayfa da tablolar kullanlarak oluturulmu bir sayfa. Ama birinci rnekteki gibi belirgin bir tablo yaps grebiliyor musunuz? Hayr. te tablolar asl amalarnn dnda kullanmak da bu rnekteki gibi oluyor. ki sayfadaki tablolar oluturan kodlar arasnda temelde hibir farkllk yok. Konuyu daha iyi kavramak iin ilk rneimize geelim. <table border="1"> <tr> <td>Hcre1</td> <td>Hcre2</td> <td>Hcre3</td> </tr> <tr> <td>Hcre4</td> <td>Hcre5</td> <td>Hcre6</td> </tr> <tr> <td>Hcre7</td> <td>Hcre8</td> <td>Hcre9</td> </tr> </table>

<ekran_040.tif>

50

Basit bir tablo oluturmak hi de zor deil. Btn tablo yapsn iine alan <table> etiketinden baka burada dikkatimizi eken iki etiket daha var; <tr> ve <td>. Kodlar ve ekran grntsn dikkatle incelersek, her bir tablo hcresinin (table data) <td> ile ve tablo satrlarnn da (table row) <tr> ile oluturulduunu grrz. Hcreler ierisinde metin, resim ve hatta baka tablolar bulunabilir. Tablo olutururken ilknce yeni bir hcre satr aarz; bunu <tr> etiketi ile yapyoruz. Sonra istediimiz kadar tablo hcresini <td> etiketiyle oluturup bu satr </tr> ile bitiriyoruz. Bu ekilde istediimiz kadar satr oluturabiliriz. Yalnz burada dikkat edeceimiz nokta btn satrlardaki hcre saysnn ilk satrdaki hcre saysna eit olmas gerektiidir. Yani belirleyici olan bir anlamda birinci satrdr. Ancak bu sayya bal kalmamak iin hcreleri alt, st ve yanlarnda bulunan komu hcrelerle birletirmemiz de mmkn. te tablolar bir yap iskeleti gibi kullanabilmemizin srr da burada yatyor. imdi nce <table> etiketi ile sonra da <td> ve <tr> etiketleri ile kullanabileceimiz parametreleri inceleyelim.

border Parametresi
Bu parametre tablonun kenar izgileri ile hcre erevelerini kontrol eder. border="1" deeri bu erevelerin grnr durumda ve asgari kalnlkta olmasn salar. border="0" ile erevelerin grnmez olmas salanabilir; 2, 3 gibi daha byk deerler kullanlarak ereve kalnl artrlabilir. border parametresi iin varsaylan deer sfrdr. Dolaysyla bu parametre kullanlmadnda tablo erevesiz olarak grntlenir. <table border="0"> <tr><td>A</td><td>B</td><td>C</td></tr> </table> <br> <table border="1"> <tr><td>A</td><td>B</td><td>C</td></tr> </table> <br> <table border="5"> <tr><td>A</td><td>B</td><td>C</td></tr> </table>

<ekran_041.tif>

cellpadding ve cellspacing Parametreleri

Bu iki parametreden cellspacing hcreleraras marj, cellpadding ise hcre ii marj kontrol etmeye yarar. Her iki parametre iin verilebilecek en kk deer sfrdr. border parametresi de dahil olmak zere 3 parametreye sfr deeri verilmesi halinde hcreler iindeki resim, metin ve nesneler birbirlerine yapk olarak grntlenir.

51

<table border="0" cellpadding="0" cellspacing="0"> <tr> <td><img src="resim1.gif"></td> <td><img src="resim2.gif"></td> <td><img src="resim3.gif"></td> </tr> </table> cellpadding deeri byk verilerek tablo yaps iindeki metinlerin okunabilirlii artrlabilir. cellspacing'e yksek deerler verilerek hcrelerin birbirinden ayrk olmalar salanabilir. Aadaki rnekleri Browser'nzda deneyerek oluturduklar etkileri inceleyebilirsiniz. <table border="1" cellpadding="0"> <tr><td>A</td><td>B</td></tr> </table> <br> <table border="1" cellpadding="4"> <tr><td>A</td><td>B</td></tr> </table> <br> <table border="1" cellpadding="10"> <tr><td>A</td><td>B</td></tr> </table> <br> <table border="1" cellspacing="0"> <tr><td>A</td><td>B</td></tr> </table> <br> <table border="1" cellspacing="4"> <tr><td>A</td><td>B</td></tr> </table> <br> <table border="1" cellspacing="10"> <tr><td>A</td><td>B</td></tr> </table>

<ekran_042.tif>
cellpadding deeri iin varsaylan deer sfrdr. cellspacing ise border deeri "1" verildiinde varsaylan olarak "2" deerini alr, aksi halde sfrdr.

Tabloyu Renklendirme ve Fon Olarak Grafik Kullanma

52

Daha nce sayfamzn fon rengini deitirmekte kulllandmz bgcolor parametresini <table>, <tr> ve <td> etiketlerinde de kullanabiliyoruz. Bu parametrenin <table> ile birlikte kullanlmas durumunda tm tabloyu, <tr> ile kullanlmasnda tm satr renklendirebiliriz. Tek bir hcreye renk vermek iin bgcolor' <td> etiketi ile kullanyoruz. Bu sayede rengarenk tablolar elde etmemiz mmkn oluyor. <table border="0" cellpadding="3" cellspacing="2" bgcolor="#cccccc"> <tr> <td bgcolor="#666666">hcre1</td> <td bgcolor="#666666">hcre2</td> <td bgcolor="#666666">hcre3</td> </tr> <tr bgcolor="#aaaaaa"> <td>hcre4</td> <td>hcre5</td> <td>hcre6</td> </tr> <tr> <td>hcre7</td> <td>hcre8</td> <td>hcre9</td> </tr> </table>

<ekran_043.tif>
Bu rnekte ilk satrda her hcreye ayr ayr renkler verdik, ikinci satrda <tr> etiketine renk vererek tm satr renklendirdik, son satrda ise renk kullanmadk, fakat tablonun tmne <table> etiketinde bgcolor ile renk verdiimiz iin, nc sradaki hcrelerin de zeminleri renklendirilmi oldu. Buradan u sonucu karabiliriz. bgcolor parametresinde <table>, <tr> ve <td> etiketleri arasnda ncelik sras <td> ye aittir. Yani <td> ye renk vererek <tr> ve <table> ile verilen renkleri rtebiliriz. Tablolarda rengin yansra fon (background) olarak grafik dosyalarndan faydalanabiliriz. Internet Explorer <table> ve <td> etiketlerine verilen background grafiklerini grntleyebilirken, Netscape yalnz <td> etiketine verilen grafii grntler: <table border="1" cellpadding="45" cellspacing="15" background="background3.jpg"> <tr> <td background="background1.jpg"><h3>hcre1</h3></td> </tr> <tr> <td background="background2.jpg"><h3>hcre2</h3></td> </tr> </table>

<ekran_044.tif> <ekran_045.tif>

53

Kullandmz fon grafiinin tablo veya hcre alanndan kk olmas durumunda grafik dosyas bo alanlar doldurulana kadar tekrarlanacaktr. Bylece fon amacyla kullanmak iin kk boyutlu grafiklerden faydalanlabilir.

Tablo ve Hcrelerin Ebatlarn Belirlemek

Resimler konusunda grdmz width (genilik) ve height (ykseklik) parametrelerini tablo etiketlerinde de kullanabiliriz. Ayr ayr hcrelerin, satrlarn ve tm tablonun ykseklik ve geniliklerini ya piksel olarak, ya da Browser penceresinin boyutuna gre deien yzde deeri kullanarak belirleyebiliyoruz. Ancak burada baz kstlamalar szkonusu. Bir hcreye genilik deeri vermisek, tablo yaps gerei o satrdaki tm hcreler de en byk ykseklik deerine sahip hcre temel alnarak oluturulur. <table border="1"> <tr height="80"> <td>Hcre1</td> <td>Hcre2</td> </tr> <tr> <td>Hcre1</td> <td>Hcre2</td> </tr> </table> Bu rnekteki iki satrl tablodan birinci satrn ykseklik deeri height parametresi ile 80 piksel olarak belirtilmi, ikinci satr ykseklii ise belirtilmemi yani varsaylan (default) deer sahip. Ykseklik ve genilik deerleri verilmeyen hcrelerin lleri ilerindeki nesnelere gre hesaplanr. Birinci satrdaki tm hcreler height ile verilen ykseklie uymak zorundadr. Bunu daha iyi anlamak iin ilk satr u kodlarla deitirin; <tr> <td height="80">Hcre1</td> <td>Hcre2</td> </tr> parametreyi satr oluturan <tr> etiketinden alp ilk hcreyi oluturan <td> etiketine verdik ve sonu deimedi. O satrdaki tm hcrelerin ykseklikleri de bu hcreye gre ayarland. Ayn ekilde height="80" deerini ilk hcreden silip ikinci hcreye verdiimizde de sonu deimeyecektir. <tr> <td <td <td <td </tr> Bu satrdaki tm hcreler farkl ykseklik deerlerine sahip. Bu durumda en byk ykseklik deerine sahip hcre belirleyici olacaktr. Genilik belirlememizi salayan width parametesinde de ayn durum szkonusudur. Ayn stunda bulunan hcreler en byk genilie sahip hcre esas alnarak izilir. height="50">Hcre1</td> height="60">Hcre2</td> height="70">Hcre3</td> height="80">Hcre4</td>

54

Bu prensipten yola karak ok satrl bir tablo olutururken her satrdaki hcrelere genilik deeri vermeksizin, width parametresini sadece ilk satr hcrelerine vermek hem daha kk boyutlu dosya oluturulmasn, hem de olas bir deiiklik durumunda tasarmcnn daha az zaman kaybetmesini salar. width ve height parametrelerini piksel deeri vererek kullanabildiimiz gibi yzde (%) deerleri vererek de kullanabiliriz. Bu bize, Browser penceresinin ebatlarna gre lleri deien tablolar hazrlama imkan verir. Tm bu anlattklarmz bir rnek zerinde uygulayalm; <table width="80%" height="60%" cellpadding="5" cellspacing="2" border="2" > <tr height="50"> <td width="70" bgcolor="yellow">Hcre1</td> <td bgcolor="red">Hcre2</td> <td width="70" bgcolor="yellow">Hcre3</td> </tr> <tr> <td bgcolor="red">Hcre4</td> <td bgcolor="blue">Hcre5</td> <td bgcolor="red">Hcre6</td> </tr> <tr height="50"> <td bgcolor="yellow">Hcre7</td> <td bgcolor="red">Hcre8</td> <td bgcolor="yellow">Hcre9</td> </tr> </table>

<ekran_046.tif> <ekran_047.tif>
Bu tabloyu Netscape ve Internet Explorer ile incelediinizde farkl grnmlerle karlaacaksnz. imdiye kadar rendiimiz etiketlerle oluturduumuz sayfalarda bu durumu gzlemek pek mmkn deildi. Tablolarla beraber her iki Browser'n HTML'i yorum farkll ortaya km bulunuyor. Bu, biraz Internet Explorer'n kodlama hatalar ve eksikliklerine kar olduka affedici davranmasndan kaynaklanyor. Bu alanda Netscape biraz daha kurallara tam riayet istiyor. Peki nmzde niin iki farkl sayfa duruyor? Herey kurallara uygun deil mi? Hatal olan nedir? Tablonun Browser penceresinin % 80'i genilikte izilmesini istedik. (Yzde iaretinin rakamn sanda veya solunda bulunmas tamamen dil kurallarndan kaynaklanyor. Biz her ne kadar Trke'de bu sembol rakamn soluna yazsak da, kodlamada yzde iaretinin saa yazldn unutmamak gerekir.) Tablonun ykseklii ise Browser penceresinin yzde 60' kadar olacak. Gerekte bir tablonun ykseklii, satrlarnn yksekliklerinin toplamna eittir. Halbuki elimizdeki "toplam % 60" ykseklik deeri ortaya belirsiz bir durum kartyor: ortadaki satrda yer alan hcrelerin ykseklikleri ne olacak? Dier iki satrn yksekliklerinin sabit olarak 50 piksel olmasn istemiiz; fakat ortadaki satr iin herhangi bir deer belirtmemiiz. Internet Explorer, byle belirsiz durumlarda esnek bir yaklamla 1'nci ve 3'nc satrlara sabit 50 piksel ykseklii 55

verirken ortadaki satr yksekliini tablonun o andaki yksekliine gre ayarlar. Halbuki Netscape belirsizlik nedeniyle ortaya kan bu duruma tamamen farkl yaklaarak satrlarn hibirini sabit ykseklikte izmez: sabit genilik deeri verdiimiz halde 1'nci ve 3'nc stunu ve bir ykseklik deeri verilmeyen ortadaki srada yer alan hcrelerin de ykseklikleri eit olarak grntlenir. (imdi bir Web tasarmcsnn zamannn neden byk bir ksmnn her iki Browser' da memnun edecek kodlar ortaya karmakla getiini daha iyi anlyorsunuz!)

Tablolarda Hizalama
Yine resimler konusundan hatrlayacamz align parametresi tablolarn yatay hizalanmasnda (horizontal align) kullanlyor. Bu parametre ile metin, resim veya nesnelerin hcre iindeki yatay hizasn belirleyebiliriz. align parametresini <table> etiketi ile kullandmzda parametrenin alabilecei deerler unlardr; align = center | left | right <td> ve <tr> etiketleri ile kullanldnda ise u deerleri alabilir; align = center | left | right | char Bu deerlerden left, right ve center' daha nceki altrmalarmzdan biliyoruz. char deeri ise HTML 4.0 kurallar iinde yer alan fakat her iki Browser'nda gncel srmleri tarafndan desteklenmeyen bir deer. Bu yzden pratik olarak bir anlam tamyor, zet olarak bahsetmek gerekirse char, hizalamay belirlenen bir karaktere gre yapar. rnein bir bankann kalabalk saylardan oluan bilano tablosunu hazrlyorsunuz ve rakamlarn nokta (.) karakterine gre sralanmasn istiyorsunuz. Bu durumda kullanacanz kod u olmal: <td align="char" char=".">123,456.789</td> <td align="char" char=".">2321,654.987</td> <td align="char" char=".">21,564.897</td> ... ...

Fakat sylediimiz gibi Browser'larn gncel srmleri bu parametreyi desteklemiyor. Tablo hcrelerinde kullanabileceimiz dier hizalama tr de dikey hizalamadr (vertical align). eriindeki nesnenin yksekliinden daha byk ykseklie sahip hcrelerde dikey hizalama yapabiliriz. Kullanacamz parametre, valign ve alabilecei deerler unlar: valign = top | middle | bottom top: nesneyi hcre ierisinde (ve <tr> etiketi ile kullanldnda o satrdaki tm hcrelerde) bulunan nesneleri hcre st kenar izgisine bititirir. bottom: top deerinin tersi olarak nesneleri hcrenin alt kenarna dayar. 56

middle: nesne st ve alt kenarlardan eit mesafe oluacak ekilde hizalanr (yani dikey olarak ortalanr). align parametresi iin varsaylan deer left, valign iin middle'dr. imdi hizalama ile ilgili rendiklerimizi bir rnekle pekitirelim. <table border="1"> <tr> <td align="left" width="200">Hcre1</td> <td align="center" width="200">Hcre2</td> <td align="right" width="200">Hcre3</td> </tr> <tr> <td valign="top" height="150">Hcre4</td> <td valign="middle">Hcre5</td> <td valign="bottom">Hcre6</td> </tr> </table>

<ekran_048.tif>

Hcreleri Birletirme
Tablolar sayfa iskeleti oluturmakta etkin olarak kullanabilmemizin en byk sebebi herhalde HTML'in hcreleri birletirme zellii olsa gerek. u iki ekran grntsn inceleyin:

<ekran_049.tif> <ekran_050.tif>
lk ekrandaki hcreleri birletirerek ikinci ekran elde ettik. Bunun iin kullandmz iki parametre bulunuyor: colspan ve rowspan. Ayn satr ve farkl stunlardaki (column) hcreleri birletirmek iin colspan, ayn stun ve farkl satrlardaki (row) hcreleri birletirmek iinse rowspan' kullanyoruz. ki satrl, 4 stunlu bir tablo dnn: <table border="1" cellpadding="7"> <tr> <td>Hcre1</td> <td>Hcre2</td> <td>Hcre3</td> <td>Hcre4</td> </tr> <tr> <td>Hcre5</td> <td>Hcre6</td> <td>Hcre7</td> <td>Hcre8</td> </tr> </table> 57

Bu tabloda ayn satrda bulunan hcre3 ve hcre4' birletirmek iin colspan parametresini, ayn stunda bulunan hcre2 ve hcre6'y birletirmek iin rowspan' kullanyoruz. Aklnz karmasn; ama buradaki mantn ok iyi anlalmas gerekiyor: farkl satrlarn birletirilmesi iin rowspan, farkl stunlarn birletirilmesi iin colspan. Peki bu iki parametreyi nerede ve nasl kullanacaz? Yukardaki tablo zerinde bunu deneyelim: <table border="1" cellpadding="7"> <tr> <td>Hcre1</td> <td rowspan="2">Hcre2</td> <td colspan="2">Hcre3</td> </tr> <tr> <td>Hcre5</td> <td>Hcre7</td> <td>Hcre8</td> </tr> </table> colspan="2" ayn satrlardaki hcre3 ve hcre4'n birlemesini salyor. Bu parametreyi hcre3' oluturan <td> etiketinin iine yazyoruz. 5 hcreyi birletirmek iin colspan="5" kodunu kullanmamz gerekir. Tabi burada kullandmz say tablonun sahip olduu toplam stun saysndan kk veya buna eit olmaldr. rowspan parametresinde de bu kurallar geerlidir. Ayn zamanda dikkat edilmesi gereken bir baka nokta da u: birletirilen hcreler artk tek hcre olacandan birletirilen bu hcreler iin tek bir <td> etiketi alr. Birleenlerin (yok olanlarn) <td>...</td> kodlarn yazmayz. <table border="1"> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> <tr> <td colspan="5">6</td> </tr> </table> rneinde 5 stunlu bir tablo gryoruz. kinci satrda 5 stundaki tm hcreler birletirildiinden tek bir <td> etiketi kullanyoruz. Farkl satrlardaki hcreleri birletirirken de; <table border="1"> <tr> <td rowspan="2">1</td> <td>2</td> <td rowspan="2">3</td> 58

</tr> <tr> <td rowspan="2">5</td> </tr> <tr> <td>7</td> <td>9</td> </tr> </table> 4 stun ve 2 satrl bu tabloda 1'nci satrn 1'nci hcresi, 2'nci satrn 1'nci hcresi ile birletirilmitir. Bu durumda ikinci satrda alan ilk hcre, bu satrn 2'nci hcresi olarak gsterilecektir. Dolaysyla ilk satra gre bir <td>...</td> etiketini eksik kullanyoruz. Biraz daha karmak iki tablo yaps;

<ekran_051.tif>
<table border="1" cellpadding="7"> <tr> <td>A</td> <td>B</td> <td>C</td> <td>D</td> <td>E</td> </tr> <tr> <td>F</td> <td>G</td> <td>H</td> <td colspan="2">I</td> </tr> <tr> <td>J</td> <td>K</td> <td colspan="3">L</td> </tr> <tr> <td>M</td> <td colspan="4">N</td> </tr> <tr> <td colspan="5">O</td> </tr> </table>

<table border="1" cellpadding="7"> <tr> <td>A</td> <td rowspan="2">B</td> <td rowspan="3">C</td> <td rowspan="4">D</td> <td rowspan="5">E</td> </tr> <tr> <td>F</td> </tr>

59

<tr> <td>G</td> <td>H</td> </tr> <tr> <td>I</td> <td>J</td> <td>K</td> </tr> <tr> <td>L</td> <td>M</td> <td>N</td> <td>O</td> </tr> </table> Bu rnekleri dikketle inceledikten sonra aada ekran grntlerini grdnz tablolar oluturmaya aln.

<ekran_052.tif>

Bilgi Sunma Arac Olarak Tablo

Tablodan Web sayfasna biim kazandrmakta iskelet esi olarak deil de, bilgi sunma arac olarak, yani bilginin tasnif edilmi ekilde ve daha kolay anlalr biimde grntlenmesi amacyla yararlanyorsak, kullanmamz gereken daha bir ok etiket vardr. rnein tablolar, ba (head), gvde (body) ve farkl olarak da ayak (foot) blmlerinden oluabilir; altnda veya stnde aklamas olabilir. Pratik hayatta pek kullanlmamakla beraber biz burada tablonun bu blmlerin nasl oluturulduunu birlikte ele alalm; bylece salad bir takm avantajlar grebilir ve nerede ihtiyacnz olacana kendiniz karar verebilirsiniz. Tablo oluturmak iin u ana kadar 3 etiketten faydalandk: <table>, <tr> ve <td>. Bu etiket istediimiz tablo yapsn kurma imkann bize salyordu. Bu blmde ise yeni olarak u etiketleri greceiz: <thead>, <tbody>, <tfoot>, <th> ve <caption>. Tablonun aklamasn oluturmakta kullandmz <caption> etiketinin ierdii metni, tablonun altnda veya stnde grntleyebiliriz. <caption> etiketini align parametresi ile birlikte kullanabiliriz. Bu parametrenin alabilecei deerler unlardr: caption = bottom | center | left | right | top caption etiketine bu deerleri vererek herbirinin ne ie yaradn deneyebilirsiniz. Yalnz unu sylemekte fayda var: bottom ve top dndaki deerleri Internet Explorer'n desteklemesine karlk, Netscape desteklemiyor. Tablonun head ksmn oluturmakta yararlandmz <thead> etiketinin iinde bu blmn satrlarn <tr> ile olutururuz, fakat hcrelerini <th> etiketiyle kodlarz. <th> etiketinin kullanm <td> etiketinin aynsdr; fakat <th> bir eit biimi nceden tanmlanm <td> etiketidir; ierdii metin koyu (bold) veya eik (italik) olarak grntlenir.

60

<tbody> bir tablonun <tr> ve <td> etiketleri ile oluturulan satr ve hcrelerinin yer ald blmdr. Bu etiketlerin parametrelerini ve kullanm biimlerini yukarda ayrntl olarak ele aldk. <tfoot> etiketi ise tablonun en alt satr olarak yer alacak bilgileri ieren hcrelere yer ayrr; bu blmdeki sralar <tr>, hcreleri ise ister <th> ister <td> ile oluturabiliriz. imdi bu blmleri nasl oluturacamz ve bu etiketlerin kullanm ekillerini grelim: <table border="1" cellpadding="5"> <caption align="top"><b>Boaz Vapur Seferleri</b></caption> <caption align="bottom">yi Yolculuklar</caption> <thead> <tr> <th>Kalk Yeri</th> <th>Kalk Saati</th> <th>Var Yeri</th> <th>Var Saati</th> </tr> </thead> <tfoot> <tr> <td colspan="4" align="center">Not: Pazar gnleri sefer yaplmaz</td> </tr> </tfoot> <tbody> <tr> <td>Kanlca</td> <td>8:30</td> <td>Bebek</td> <td>8:55</td> </tr> <tr> <td>Anadoluhisar</td> <td>8:40</td> <td>Arnavutky</td> <td>9:05</td> </tr> <tr> <td>Kandilli</td> <td>8:45</td> <td>Bebek</td> <td>8:55</td> </tr> </tbody> </table>

<ekran_053.tif>
Tabloyu birlikte inceleyelim; head, body ve foot blmlerini ak ekilde grebiliyoruz. Ayn ekilde <caption> etiketi ile tablonun stne ve altna eklediimiz metinler var. Head blmnde hcre oluturmak iin <th> etiketini kullanyoruz, ve belirttiimiz gibi bu etiketle oluturulan stun balklar koyu renk yaz tryle grntleniyor. Tablonun foot blm iin de ayn eyleri syleyebiliriz. Bu tabloyu yzlerce satrdan oluan bir bilgi sunma arac olarak dndmzde head ve foot blmlerinin yazdrlan her sayfada 61

kmasn isteriz. Bunu da <th> etiketi ile salyoruz. <th> etiketinin metinleri tablodaki dier hcrelerden farkl biimlendirdiine de dikkat ettiniz mi? Body blm daha nce rendiimiz tablo yapsnn ayns. Kodlarn ak ile Browser'da oluan tablonun farkll da dikkatinizi ekmi olmal: ikinci caption'n ve foot blmnn kodlarn stlerde yer almasna karlk deerlerinin tablonun sonunda grntlenmesi gibi. Tablo etiketleri ile kullanabileceimiz parametrelerin byk blmn ele alm olduk. Ancak birka parametre daha var ki bunlarn bazlar Internet Explorer ve Netscape tarafndan farkl yorumlanrken bir ksm da yalnzca Internet Explorer'a hitap ediyor. Tablolarmzda gzel etkiler oluturmay salayan bu parametreleri gelecekte Netscape'in de desteklemesi umuduyla biraz yakndan ele alalm:

bordercolor, bordercolordark, bordercolorlight Parametreleri

Bu parametre tablo erevesine renk vermekte kullanlr. bordercolor, ereve rengini belirler: <table border="1" cellspacing="1" width="100" height="100" bordercolor="#ff0000"> <tr align="center" valign="middle"> <td>A</td> <td>B</td> </tr> <tr align="center" valign="middle"> <td>C</td> <td>D</td> </tr> </table>

Ancak sayfay her iki Browser'da ayr ayr incelediimizde grntde farklar greceiz. Internet Explorer, tablonun d erevesi ve her bir hcrenin kendi snr izgilerinin rengini deitirirken, Netscape adeta tabloya nc bir boyut kazandrd; tablonun en d erevesini renklendirdi; fakat hcrelerin i izgilerine dokunmad! Ancak Netscape'in tabloya ve bize kazandrdklar burada sona eriyor. nk Internet Explorer bordercolordark ve bordercolorlight ile bize istediimiz renklerde boyut (derinlik etkisi) grnmnde tablo hazrlama imkan veriyor. Windows iletim sistemi, pencere ve diyalog kutularnda derinlik hissi verebilmek iin, hemen her ereve izgisinin alt ve sa ksmn koyu, st ve sol ksmn ak renkle grntler. HTML sayfada tablolara 3-D grnm kazandrmak iin bordercolordark parametresi ile erevenin koyu renkli olacak alt ve sa rengini, bordercolorlight ile daha ak renkli olacak sol ve st ereveyi kontrol edebiliriz. Bunu dikkate alarak bordercolordark'a daha koyu tonlarda renk verirken dier parametreye daha ak tonlar verilebilir. Ancak byle bir zorunluluk yok; ters renkler kullanarak, ak renkli taraf altsa'a getirebiliriz: <table border="3" cellspacing="0" width="100" height="100" bordercolordark="#000066" bordercolorlight="#a0a0ff"> <tr align="center" valign="middle"> <td>A</td>

62

<td>B</td> </tr> <tr align="center" valign="middle"> <td>C</td> <td>D</td> </tr> </table> Her parametreyi de border parametresi ile birlikte kullanyoruz. Zira border kullanmadmz zaman varsaylan deer olarak sfr deeri verilir ve ereve izilmez. Yine cellspacing'e eitli deerler vererek (sfr da dahil) deiik grnmlerde tablolar oluturulabilir.

rules ve frame parametreleri

rules ve frame, yalnzca IE tarafndan desteklenen iki parametredir. frame parametresi ile tablo erevelerini kontrol edebiliyoruz. Peki, d erevesi olmayan bir tabloya ne dersiniz? <table border="1" width="200" frame="void"> <tr align="center"> <td>A</td> <td>B</td> <td>C</td> </tr> <tr align="center"> <td>D</td> <td>E</td> <td>F</td> </tr> <tr align="center"> <td>G</td> <td>H</td> <td>I</td> </tr> </table>

<ekran_054.tif>
frame ile tablonun yalnzca d erevesine mdahale edebiliyoruz. Hcreleri evreleyen ereveler sabit kalyor. Daha deiik grnmlerde tablolar oluturmak iin frame parametresine u deerleri verebilirsiniz: frame = above | below | border | box | hsides | lhs | rhs | void | vsides Hcre erevelerini kontrol etmek iin rules parametresinden faydalanyoruz. Bu parametre ile satrlarn, stunlarn ve gruplarn ereveleri kontrol edilebiliriz. (Satr ve stunlar tamam! Peki "grup" nedir ve nereden kt? Tablo blmleri oluturma konusunda bahsettiimiz head, foot ve body blmleri birer gruptur. Bunun dnda kendimiz de gruplar oluturabiliriz. Birazdan grup konusunu ayrntl olarak ele alacaz.) rules parametresi ile kullanlabilecek deerler unlardr: rules = all | cols | rows | groups | none 63

Bu deerlerden cols yalnzca stun erevelerinin, rows yalnzca satr erevelerinin grnmesini salyor. all deeri ayn zamanda border="1" karl ve tm erevelerin grnmesini salarken none, border="0"'n karl olarak ereveleri gizliyor. u rnek zerinde all, cols, rows ve none deerlerini deneyebiliriz. <table border="1" width="200" rules="cols"> <tr align="center"> <td>A</td> <td>B</td> <td>C</td> </tr> <tr align="center"> <td>D</td> <td>E</td> <td>F</td> </tr> <tr align="center"> <td>G</td> <td>H</td> <td>I</td> </tr> </table> rules="groups" iin ise daha farkl bir rnee ihtiyacmz var. Tablo blmleri oluturma konusundaki rnei bu amala kullanabiliriz. Head, body ve foot olarak 3 grup var; bu yzden yalnzca bu gruplara ait ereveler grnr. <table border="1" cellpadding="5" rules="groups"> <caption align="top"><b>Boaz Vapur Seferleri</b></caption> <caption align="bottom">Not: Pazar gnleri sefer yaplmaz</caption> <thead> ... ... ... </table>

<ekran_055.tif>
Kendi gruplarmz oluturmamz da mmkn; ama bunu yapabilmek iin nce iki yeni etiketle tanyoruz: <col> ve <colgroup>. <colgroup> etiketi tablo stunlarn gruplamamz salar. Bylelikle oluturulan bu gruba dorudan gndermede bulunma imkan kazanm oluruz. rnein hcreleri hizalamak iin her bir <tr> veya <td> etiketi ile align parametresi vermek yerine grup oluturarak sadece bir align parametresiyle tm hcrelere hitap etmek gibi. Stun grubuna dahil olacak stunlar iki ekilde belirleyebiliriz. 1. <colgroup> etiketinin span parametresi ile stun saysn vererek, 2. <colgroup> etiketi iinde bir veya daha fazla sayda stun belirtebilen <col> etiketini kullanarak.

64

ncelikle bir stun grubu nasl oluturulur, ona bakalm. Bu arada ilk ynteme gre yani span ile gruplanacak stunlarn saysn belirtmeyi renelim. <table border="1" width="100%"> <colgroup span="4" align="right"></colgroup> <colgroup span="2" align="center"></colgroup> <thead> <tr> <th>Stun 1</th> <th>Stun 2</th> <th>Stun 3</th> <th>Stun 4</th> <th>Stun 5</th> <th>Stun 6</th> </tr> </thead> <tbody> <tr> <td>A</td> <td>B</td> <td>C</td> <td>D</td> <td>E</td> <td>F</td> </tr> <tr> <td>G</td> <td>H</td> <td>I</td> <td>J</td> <td>K</td> <td>L</td> </tr> </tbody> </table> Stun grubunu <table> etiketinin hemen peinden tanmlyoruz. Birden fazla grup tanmlayabiliriz. Bu rnekte iki grup tanmladk. Gruplar olutururken, ka stunun gruba dahil olacan belirlemede yukardaki yntemlerden birincisini kullandk. span="4" tablo yapsnda bulunan toplam 6 stundan ilk 4'nn bir grup olacan belirtiyor. kinci bir <colgroup> etiketiyle de son iki stunu grupladk. Peinden align parametresi ile bu 2 gruptaki tm hcrelere hizalama komutu vermi olduk. span deeri ile oynayarak gruptaki stun saysn deitirebiliriz. imdi oluturduumuz stun grubunu daha somut grelim. Yukardaki rneimizin ilk satrn u kodla deitirelim: <table border="1" width="100%" rules="groups">

<ekran_056.tif>
Buradaki rules="groups" parametresi yalnzca tablodaki grup erevelerinin grntlenmesini salyor.

65

Peki <colgroup> ile baka hangi parametreleri kullanabiliriz? ki parametre daha var. Bunlar; dikey hizalama iin valign ve stun genilikleri iin width. parametre iin kullanabileceimiz deerler yle; align = left | right | center | char valign = top | middle | bottom | baseline width = 'piksel deeri' | 'yzde deeri' | n* width parametresinde imdiye kadar kullanmadmz bir deer kullanabiliyoruz: n*. Bu, bal l vermeye yaryor. n yerine herhangi bir say veriyoruz. rnein 2* deeri o grubun nceki gruptan 2 kez daha geni olmasn salyor. kinci yntemdeki <col> etiketinin nasl kullanldna bakalm. Bu metodu ayn rnek zerinde uygulayalm. Tablodaki head ve body blmlerindeki kodlar ayn kalacak. <colgroup>...</colgroup> etiketleri arasna unlar yazalm: <colgroup> <col span="2" align="left"> <col span="2" align="right"> </colgroup> <colgroup> <col span="2" align="center"> </colgroup> Bu rnekte yine 2 stun grubumuz var. Ancak ilk gruptaki 4 stunu yine kendi arasnda ikier ikier ayrdk. rules="groups" parametresi ile yine gruba ait ereveler grntleniyor. Ancak <col> etiketi ile bir anlamda grup altnda bir alt grup oluturduk.

Yap skeleti Olarak Tablolardan Yararlanma

Tablolar icad edilme sebepleri olan, bilgi sunma arac olarak deil de, saladklar satr ve stunlu yap oluturma ve bu satrlar, stunlar istediimize yakn bir hassasiyetle belirleyebilme zelliinden yararlanarak, Web sayfasnn yapsal unsuru olarak kullanabiliriz. Baka bir deyile, tablo, bize sayfamzn iskeleti olarak hizmet edebilir. Tablodan sayfann yapsal gesi olarak nasl yararlanabileceimizi bir rnek zerinde greceiz. Daha nce rneklerimizde gememi olmasna ramen tablonun bir hcresi iinde baka bir tablo oluturabileceimizi biliyoruz. imdi ekran grntsndeki gibi bir sayfann tablolar ile nasl oluturulabileceini inceleyelim. Background'a bir grafik yerletirmekle ie balyoruz. Bu grafik 800 piksel geniliinde ve 1 piksel yksekliinde. Grafiin her iki utan 160 piksellik ksm sar ve ortas da beyaz renkte. Bu background sayesinde sayfada oluturmak istediimiz 3 stunlu yapnn snrlarn grsel olarak belirledik. <body background="zemin.gif" marginwidth="0" marginheight="0" topmargin="0" leftmargin="0"> <table border="1" cellpadding="7" cellspacing="0" width="100%" height="100%"> <tr> <td width="145" valign="top">1</td> 66

<td align="center" valign="top">2</td> <td width="145" valign="top">3</td> </tr> </table> </body> Burada ilk defa kullandmz marginwidth, marginheight, topmargin ve leftmargin parametreleri sayfann sa-sol-st ve alt kenar boluklarnn salayor. Bu parametreler kullanlmad zaman sayfa ierii ile sayfa kenarlar arasnda bir miktar boluk oluur. Bu drt parametreyi birden kullanmamzn sebebi ise Netscape ve Internet Explorer'n farkl parametrelerden anlamas! marginwidth ve marginheight Netscape'e, leftmargin ve topmargin ise Internet Explorer'a ynelik. Sayfa yapsn kuran tablomuz 3 stun ve tek satrdan oluuyor. width ve height deerlerini yzde 100 vererek tablonun Browser penceresinin tm alann kaplamasn salyoruz. Her bir hcreye ierik olarak verdiimiz 1, 2 ve 3 says yerine daha sonra sayfa ieriini oluturan tablolar yerletireceiz. 1 says yerine site navigasyonunu salayacak, site balantlarn ieren tabloyu, 3 says yerine sitemize ait birka logoyu ieren tabloyu, 2 says yerine de bir banner ve birka cmleden oluan bir metin yerletiriyoruz. Yine orta stundaki tabloda kullandmz spacer.gif 1x1 piksel boyutlarnda saydam bir GIF dosyas. (Bu aslnda bir eit tasarm teknii. Bu grafii burada destek amal kullanyoruz. 1x1 boyutunda olmasna ramen genilik deeri olarak 500 piksel verdik. Bunun sebebi bir noktadan itibaren Browser penceresinin altndaki kaydrma ubuklarnn olumasn salamak ve bylece sayfa estetiinin bozulmasn nlemek. Tablomuz Browser ekrannn tamamn kaplad iin [width="100%"] sabit bir genilie sahip deil. spacer.gif dosyas ile tablonun geniliine bir bakma alt snr koymu oluyoruz.) Ve son olarak sayfamzn ina aamasnda tablolarn nasl olutuunu takip edebilmek iin border deerlerini 1 olarak verelim:

<body background="zemin.gif" marginwidth="0" marginheight="0" topmargin="0" leftmargin="0"> <basefont face="verdana,arial"> <table border="1" cellpadding="7" cellspacing="0" width="100%" height="100%"> <tr> <td width="145" valign="top"> <!-- Tablonun 1.stunu --> <table border="1" width="145"> <tr><td height="25">&nbsp;</td></tr> <tr><td><img src="bullet.gif"><a href="anasayfa.htm">Ana Sayfa</a></td></tr> <tr><td><img src="bullet.gif"><a href="hakkinda.htm">Site Hakknda</a></td></tr> <tr><td><img src="bullet.gif"><a href="linkler.htm">Sevgi hakknda sylenenler</a></td></tr> <tr><td><img src="bullet.gif"><a href="linkler.htm">Linkler</a></td></tr> <tr><td><img src="bullet.gif"><a href="benkimim.htm">Ben kimim?</a></td></tr> </table>

67

<!-- 1.stun bitti--> </td> <td align="center" valign="top"> <!-- Tablonun 2.stunu --> <table border="1" width="100%"> <tr><td><img src="spacer.gif" width="420" height="1"></td></tr> <tr><td align="center"><img src="sitelogo.gif" width="390" height="60"></td></tr> </table> <br><br> <h3>Sayfama Hogeldiniz.</h3> <font size="-1"> <p> Burada kendi setiim linkler ve sevgi hakknda sylenen szleri bulabilirsiniz.... </p> <br><hr><br><br> <p> Sabah beklemeyiniz dostum, geceden yola knz. Olur ki uyuyakalrsnz. Gece serindir, yapraklardan szlen yel gzlerinizdeki yalar kuruturken ruhunuzda kainatn derin sessizliini tayarak sabaha doru yryp fecri balatnz. </p> <p> Cemiyetin vahi, zehirli bitkilerle dolu, her dalnda uursuz baykularn manasz telkinler yapt sk aal ormanlarnda etin yolculuklarn balangc iin sabah beklemeyiniz. Sabah beklemek leni, leni beklemek akam beklemek gibi bir ruh gevekliini dourur. </p> <p> Filozofun d btn hayatmzda takib edeceimiz en esasl metottur: "<b>Uzun yolu seiniz...</b>" </p> </font> <br> <hr> <!-- 2.stun bitti--> </td> <td width="145" valign="top"> <!-- Tablonun 3.stunu --> <table border="1" width="100%">

68

<tr><td align="center"><img src="logo1.gif" width="120" height="100"><br><br></td></tr> <tr><td align="center"><img src="logo2.gif" width="70" height="60"><br><br></td></tr> <tr><td align="center"><img src="logo3.gif" width="100" height="80"><br><br></td></tr> </table> <!-- 3.stun bitti--> </td> </tr> </table> </body>

<ekran_057.tif>
Tm kodlama bittikten ve sayfamzn arzu ettiimiz gibi olutuunu grdkten sonra border deerlerini sfr yapalm. Sayfanzn ieriini dilediiniz ekilde doldurmak size kalm. Tablolar bu ekilde kullanarak ok deiik etkiler elde edebilirsiniz. NOT: Yukarda oluturduumuz sayfay her iki Browser'da incelediinizde kodlarn Netscape ile dzgn almadn greceksiniz. Acaba bu sayfay Netscape ile de dzgn gsterebileceinize inanyor musunuz? Buyrun size etin ceviz bir ev devi.

69

BLM 7
ereveler
Web tasarmnn en tartmal konularndan erevelere hogeldiniz. Hal Web tasarmclnda otorite konumunda bulunan birok kiiden ereve kullanm konusunda olumsuz szler duymaktayz. Burada konuyu iki ynyle de ele alacaz. Bize neler getiriyor? Dezavantajlar neler? nce ereve tekniinin ne olduunu anlamakla ie balayalm. ereveler HTML'e sonradan eklenmitir. ereveyi en ksa olarak, bir Browser penceresinde birden fazla Web sayfasn grntlemek olarak tanmlayabiliriz. u ana kadar rendiimiz etiketlerle bunu baarmak imkanszd. Fakat ereveler yardmyla Browser penceresini farkl blgelere blebilir ve her blgede farkl bir HTML sayfasn grntleyebiliriz. Yalnz bu deil, grntlenen sayfalardan birindeki linkin tklanmas ile baka bir blgedeki (erevedeki) ierii deitirebiliriz. Bu durum site navigasyonu (sayfalar arasndaki gei) asndan bize byk kolaylklar salyor. Bir defa sitenin gezinti mens gibi her sayfada bulunmasn istediimiz blmleri bir frame ierisinde grntleyebiliyor, bylece meny oluturan kodlarn her sayfada tekrar etmesini nleyebiliyoruz. Ayrca farkl erevelerde bulunan sayfalar birbirinden bamsz olduundan kaydrma ubuklar ile sayfay kaydrdmzda dier ereveler bundan etkilenmiyor; nk her erevenin kaydrma ubuu ayr. Bu da bize sitemizin blmlerini ieren site mensn bir frame ierisine alarak bu mennn her zaman gznnde bulunmas avantajn salyor. Ancak erevelerin dezavantajlar da kayda deer nitelikte. Bir defa frame yapsn kuracak dosya ayr, ierii oluturacak dosyalar ayr olduundan sayfann daha ge yklenmesi szkonusu. rnein iki ereveli bir sayfada toplam 3 adet dosya arlr. Ayn ekilde 4 ereveli bir yapda 5 dosyann almas gerekir ki bu neredeyse 5 dosyay ayr ayr altrmak kadar zaman gerektirir. Frame'lerin tek dezantaj ge yklenmeleri deildir. Bir dier problem frame'li bir siteyi 'Sk Kullanlanlar' listenize eklediinizde ortaya kar. Listeye eklenen sayfa aslnda frame'i oluturan sayfa, byk olaslkla anasayfadr. Dolaysyla listenizden bu siteye tkladnzda karnza da sitenin ana sayfas gelir. Frame'li bir sayfaya dardan link vermek de sorunlara neden olur. erevedeki sayfalardan yalnzca birisine link verebileceimizden sayfa frame btnl ierisinde almaz, ve ayet site navigasyonu frame ierisinden salanyorsa bu siteye ait dier sayfalar ziyaret etmemiz pek olas deildir. Yine HTML'e sonradan katlmas neticesinde baz eski Browser'lar frame'li sayfalar gsteremezler. Bir baka problem de sayfalarn yazdrlmasnda ortaya kabilir. Frame'li bir yapy diskimize kaydetmek istediimizde bu giriimimiz baarszlkla sonulanabilir. Bu dezavantajlarn bazlarnda son srm Browser kullananlar sorun yaamayabilirler. Hereye ramen, sayfalarnzda bir oklar gibi frame kullanmaya karar verirseniz. bunun nasl yaplacan bilmeniz gerekir. rnek olarak ekran grntsn grdnz stun yapsnda ve iki ereveden oluan sayfay hazrlayalm. Hazrlamamz gereken toplam 3 dosya bulunuyor. zerinde asl duracamz frame yapsn kuracak olan dosya. Dier iki

70

dosya ierii oluturacak ve imdilik bu iki sayfada frame yaps ile ilgili etiket kullanmayacaz.

<ekran_058.tif>
ereveleri oluturan etiket <frameset> etiketidir. <frame> etiketi ile de her bir frame'in zelliklerini ve frame'de gsterilecek sayfay belirtiyoruz. imdi frame yapmz oluturacak 3 dosyay hazrlayalm. nce iki ierik sayfasn oluturalm. cerceve1.htm dosyas: <html> <head> <title>Sol ereve</title> </head> <body bgcolor="red"> <font size="7">Sol ereve</font> </body> </html> cerceve2.htm dosyas: <html> <head> <title>Sa ereve</title> </head> <body bgcolor="blue"> <font size="7">Sa ereve</font> </body> </html> Ve ereveli sistemi oluturan ana sayfamz, frame.htm dosyasn oluturalm: <html> <head> <title>ereveli Sayfa</title> </head> <frameset cols="30%,70%"> <frame name="solcerceve" src="cerceve1.htm"> <frame name="sagcerceve" src="cerceve2.htm"> <noframes>Browser'nz ereve teknolojisini desteklemiyor. Ltfen yenileyin!</noframes> </frameset> </html> <head> etiketini kapattktan sonra yapy tanmlamak zere <frameset> etiketini ayoruz. cols parametresi erevelerin stun yapsnda olacan bildiriyor; ve bunlarn lsn Browser penceresinin yzde 30'u ve yzde 70'i olarak veriyoruz. Burada ka deer verirsek, Browser, o kadar ereve stunu oluturacaktr; yani bir tala iki ku! Peinden <frame> etiketleri ile iki frame'i oluturacak dosyalar tanmlyoruz.

71

Tanmlama aamasnda erevelerde gsterilecek dosyann yerini src ile belirtiyor ve name parametresi ile de bu ereveye bir isim veriyoruz. Bu isim meselesi nemli; nk daha sonra bir erevede verdiimiz balantnn dier erevede almas iin bu isme atfta bulunacaz. ayet src parametresi ile verdiimiz dosya bulunamazsa Browser hata mesaj verecektir. <noframes> etiketi ile de ereveleri desteklemeyen Browser'lar iin bir not braktk. Browser frame'li yapy aamadnda buradaki kodlar devreye girer. Bu sayfada dikkat ederseniz sayfann 'body' ksmn oluturmadk, onun yerini frameset yaps ald. Fakat 'head' blm frame'li yaplarda kullanlmaya devam ediyor. Dikey stun deil de yatay satr (sra) yaps oluturmak istediimizde ne yapacaz? Yapmamz gereken <frameset> ile kullandmz cols yerine rows yazmaktan ibaret. Konunun ana hatlar bunlardan ibaret. zetlersek, ereve yapsn <frameset> etiketi kuruyor, stunlu yaplar iin cols parametresini, satrl yaplar iin rows parametresini kullanyoruz. Bu parametrelere verdiimiz deerlerin says ayn zamanda ereve saysn da belirtiyor. <frame> etiketi ile ereveleri tanmlyoruz. name parametresi ile ereveye isim veriyor, src ile de dosyann yolunu belirtiyoruz. <noframes> etiketi ereve tekniini tanmayan eski srm Browser'lara hitap ediyor. cols ve rows parametrelerinde % deerleri yansra sabit deerler de kullanabiliriz. u rnekleri inceleyelim: <frame cols="150,*"> Bunun anlam, ilk ereve 150 piksel geniliinde olacak, ikinci ereve kalan alana yerletirilecek. <frame rows="30%,*"> ilk ereve sayfann o anki yksekliinin %30'unu, ikincisi kalan alan alacak. <frame cols="1*,250,3*"> 3 stunlu bu yapda ortadaki frame sabit 250 piksel genilikte, nc frame birincinin 3 kat geniliinde. (Birinci frame kalann %25'ini, 3. frame %75'ini alacak.) <frame rows="25%,350,2*,3*"> Diyelim ki Browser penceresi o an 800 piksel yksekliinde. lk satrdaki ereve 800'n %25'i olan 200 piksel'i alr. kinci satrdaki ereve 350 piksel, nc satrdaki ereve kalan 250 pikselin 100 pikselini, son erevede 150 pikseli alr. Hem satr hem stun yaps ieren ereveler hazrlamak iin cols ve rows parametrelerini birlikte kullanabiliriz. <html> <head> <title>ereveli Sayfa</title> 72

</head> <frameset cols="50%,50%" rows="50%,50%"> <frame name="bir" src="cerceve1.htm"> <frame name="iki" src="cerceve2.htm"> <frame name="uc" src="cerceve3.htm"> <frame name="dort" src="cerceve4.htm"> <noframes>Browser'nz Frame'leri desteklemiyor. Ltfen yenileyin!</noframes> </frameset> </html>

<ekran_059.tif>
Bu kod sayfay 4 eit paraya bler. Peki tablolarda grdmz hcreleri birletirme gibi bir zellik (colspan ve rowspan parametrelerini hatrlayn) erevelerde de var m? maalesef yok, fakat ayn grnm elde etmek mmkn. Bu etkiyi salamak iin <frameset> etiketini atktan sonra kaynak dosyalarn hepsini belirtmeden yeni bir <frameset> ayoruz, iie atmz bu etiketlerin kaynak dosyalarn eksiksiz olarak belirtip, etiketleri sonlandryoruz. rnekleri ve yanlarndaki kodlar inceleyip, farkl ereve trlerini kendi bilgisayarnzda oluturmaya aln.

<ekran_060.tif>
<frameset cols="150,*"> <frame name="a" src="1.htm"> <frameset rows="100,*"> <frame name="b" src="2.htm"> <frame name="c" src="3.htm"> </frameset> </frameset>

<ekran_061.tif>
<frameset rows="50%,50%"> <frameset cols="*,*"> <frame name="a" src="1.htm"> <frame name="b" src="2.htm"> </frameset> <frame name="c" src="3.htm"> </frameset>

<ekran_062.tif>
<frameset rows="*,*,*"> <frame name="a" src="1.htm"> <frameset cols="*,*"> <frame name="b" src="2.htm"> <frame name="c" src="3.htm"> </frameset> <frame name="d" src="4.htm"> </frameset>

73

<ekran_063.tif>
<frameset cols="*,*"> <frameset rows="*,*"> <frame name="a" src="1.htm"> <frame name="b" src="2.htm"> </frameset> <frame name="c" src="3.htm"> </frameset> <frameset> etiketi ile kullanabileceimiz dier parametreler unlar:

frameborder Parametresi
ereveler arasndaki kenarlk izgilerinin olup olmayacan bildirir. ki deer alabilir 1 ve 0. (1 yerine 'yes' 0 yerine 'no' deerleri de kullanlabilir.) 0 deeri kenarlklar kaldrrken 1 deeri grntler.

border Parametresi
ereveler aras kenarlk izgilerinin kalnl belirtir.

bordercolor Parametresi
Kenarlklarn rengini belirler <frameset cols="50%,50%" rows="50%,50%" frameborder="yes" border="5" bordercolor="red"> .. .. .. </frameset>

framespacing Parametresi
Internet Explorer ile kullanabileceimiz bu parametre border benzeri bir etki oluturur. Bunun bir sebebi de border parametresi Internet Explorer 4 ile kullanlmaya balanmasna ramen framespacing, IE3 ile de kullanlabiliyordu. Yeni Browser'larn geriye doru uyumlu olmalar istendiinden bu parametre Internet Explorer'da kaldrlmad. border parametresinden farkl olarak framespacing'e sfr deerinin verilmesi kenarlklar kaldrmaz. Her bir erevenin zelliklerini kontrol edebilmemizi salayan <frame> etiketi ile kullanabileceimiz dier parametreler ise yle:

74

frameborder Parametresi
<frameset> etiketinde olduu gibi kenarlklar kontrol eder, her bir ereveye ait kenarl bu parametre ile kontrol edebiliriz.

noresize Parametresi
ereve llerinin deitirilmesini engeller. Bu parametre kullanlmad taktirde, Mouse ile erevelerin kenarlklaryla oynayarak lleri deitirmek mmkndr. Bu parametreyi tek bir <frame> etiketi iinde kullanmak yeterlidir. Bylece tm ereveler kendi lleri ierisinde kalr. <frameset cols="50%,50%" rows="50%,50%"> <frame name="bir" src="htm1.htm" noresize> <frame name="iki" src="htm2.htm"> <frame name="uc" src="htm3.htm"> <frame name="dort" src="htm4.htm"> </frameset>

scrolling Parametresi
ereve iinde kaydrma ubuklarn kontrol eder. Her bir erevenin kaydrma ubuu ayrdr ve sayfann ieriine gre bu ubuklar oluur. ayet sayfa ierii yeterli uzunlukta deilse bu ubuklar olumaz. Default olarak bu parametrenin deeri auto'dur. Verilebilecek tm deerler unlardr. scrolling = auto | yes | no no deeri verilerek kaydrma ubuklar iptal edilebilir. yes deeri ile bu ubuklarn her halukarda grnmesi salanr. <frameset cols="50%,50%"> <frame name="bir" src="htm1.htm" scrolling="yes"> <frame name="iki" src="htm2.htm" scrolling="auto"> </frameset>

marginwidth ve marginheight Parametreleri

ereve ii marjlar kontrol eder. Sfr deeri vererek ereve ieriinin kenarlara bitiik olmasn salayabiliriz. <frameset cols="50%,50%"> <frame name="bir" src="htm1.htm" marginwidth="0" marginheight="0"> <frame name="iki" src="htm2.htm" marginwidth="50" marginheight="30"> </frameset>

75

ereve indeki Balantlarla Dier erevelerin eriklerini Deitirmek

Balantlar konusunda rendiimiz target parametresini sayfadaki dier ereve ieriklerini kontrol etmekte kullanyoruz. target parametresine deer olarak <frame name="..."> ile verdiimiz ereve adn kullanyoruz. ki ereveden oluan stun yapsnda bir sayfa hazrlayalm. Soldaki erevede sitenin navigasyonunu salayan site mens bulunsun. Bu menden bir balant tklandnda sa erevenin ierii deisin. index.htm dosyas <html> <head></head> <frameset cols="170,* frameborder="0"> <frame name="sitemenusu" src="menu.htm" noresize> <frame name="icerik" src="sayfa1.htm"> </frameset> </html> menu.htm dosyas <html> <body bgcolor="black"> <a href="index.htm" target="_top">Ana Sayfa</a> <br> <a href="sayfa1.htm" target="icerik">Sayfa 1</a> <br> <a href="sayfa2.htm" target="menu">Sayfa 2</a> <br> <a href="http://www.pclife.com.tr" target="_blank">PC Life</a> </body> </html> sayfa1.htm dosyas <html> <body bgcolor="#ffcc00"> <h2>Sayfa 1</h2> </body> </html> sayfa2.htm dosyas <html> <body bgcolor="#ffccff"> <h2>Sayfa 2</h2> </body> </html> sayfa3.htm dosyas <html> <body bgcolor="#ffccaa"> 76

<h2>Sayfa 3</h2> </body> </html> soldaki balantlar tkladmzda neler olduunu birlikte grelim. lk balant iin hedef olarak _top deerini kullandk. Bu dosyann ayn Browser iinde almasn ve ayn zamanda frame yapsnn kaldrlmasn salar. Amak istediimiz dosya, yani index.htm frame ierdiinden bu yap tekrar kurulur. Sayfa 2 balantsna tklandnda bu dosya 'icerik' isimli erevede alr. nk 'target' olarak bu ereveyi gsterdik. 'icerik' ismini ise index.htm dosyasnda frame yapsn kurarken tanmladk. Sayfa 3 balants ayn ereve iinde alr nk hedef yine kendisi. Son link olan PC Life'a tklandnda yeni bir Browser penceresi alacaktr. ayet bir frame ierisindeki tm balantlarn ayn erevede almasn istiyorsak her bir balant etiketine target parametresi ile hedef vermek yerine <base target="..."> etiketini kullanabiliriz. Bu etiket sayfadaki tm balantlarn istenen erevede almasn salar.

<html> <body> <base target="icerik"> <a href="sayfa1.htm"> <br> <a href="sayfa2.htm"> <br> <a href="sayfa3.htm"> <br> <a href="sayfa4.htm" target="sayfaustu"> </body> </html>

Buradaki ilk link 'icerik' adl erevede alr, balantlardan <base target="..."> ile tanmlanan ereve dnda bir ereve ierisinde almasn istediklerimiz varsa, <a href="..." target="..."> ile o balantnn kontroln ayarlayabiliriz. rnekteki drdnc balant da bunu gsteriyor. sayfa4.htm dosyas 'sayfaustu' adndaki erevede alr.

77

EK-A
Web Tasarmclarndan tler
Barbara Kuhr (HotWired Web Alan Batasarmcs): 1. Basitletirin. yi bir tasarmn gc basitliindedir. Web alannn zn tanmlamaya aln. 2. ekil mi, ierik mi tartmasna bile girmeyin. Btn dikkatini ierie veren tasarmc, btn dikkatini ekle veren tasarmcdan daha iyi sonular alr. 3. zmek istediiniz sorunu iyi tanmlayn. Hereyden nce bu gerekten ierii ilgilendiren bir sorun mu, yoksa pastann kremas gibi bir ss unsuru mu? nce pastay yapn; nemli olan asl iiniz o. Sonra kremay dnrsnz. 4. Sizi ilgilendiren birinci estetik unsur, sayfalarn indirme hzdr. Sayfalarnza girmek ok zaman alyorsa, yeniden balayn tasarma. 5. Tasarmn yaptnz sayfayla ilgili btn kiilerle iyi bir iletiim kurun. Teknik servisle, ierii retenlerle, reklamlar salayanlarla. 6. Aaa, evet. Sayfalarnzda bir asit yeiline yer vermeyi unutmayn.

Brady Clark (Web tasarmcs): 1. Sayfalarnzda biraz mizaha yer verin. 2. Acaip fontlar kullanmayn. 3. Zamannz bo yere ss unsurlarna harcamayn; hi bir ss harcadnz zamana demez. 4. i bitirdiiniz zaman sayfanz o kadar zaman harcamay gerektirmeyen bir basitlikte grnyorsa, iinizi baaryla yapmsnz demektir. 5. i iyi tanmlayn; zmek istediiniz sorunu iyi belirleyin. Hi bir sorunu bytmeyin. ubuu biraz daha ykseltmek uruna, bir tek soruna saplanp kalmayn. 6. Daima dier Web alanlarn inceleyin; kimin hangi sayfay nasl yaptna bakn. Beendiiniz bir sayfann kaynak kodunu sabit diskinize kaydetmiyorsanz, iyi bir tasarmc deilsiniz demektir. Bu, hrszlk anlamna gelmez. Sadece ilerde sktnz zaman size fikir verir. 7. Tasarmn yaptnz sayfalara giren metinleri gerekten okuyun. Ama gerekten.. Metin ayrdnz alana smadyla, yazana syleyin, ksaltsn. Dnyada daha ksaltlmayacak metin yazlmad. 8. Renk kullanabiliyorsunuz diye, olur olmaz yerlere renk koymayn. Renk unsuru ate gibidir; dikkat eker. Kimi zaman da baka unsurdan dikkat alar. 9. yi mzik tasarmcnn en byk arkadadr. Sayfa yaparken mzik dinleyin. 10. Haaa. Asla bedava i yapmayn. Bir Dolar da olsa, her sayfa iin mutlaka para isteyin. Bu, sizden bedava i almak isteyene, sizin profesyonel bir tasarmc olduunuzu retir.

Anna McMillan (Web tasarmcs, animatr):

78

1. Macromedia Flash' renin. Ne kadar erken renseniz o kadar iyi. Ama bu, GIF89, dHTML ve QuickTime' bilmeyebileceiniz anlamna gelmez. 2. Animasyon'un bir hikayesi olmas gerekir. Temas olmayan bir animasyon hem sizin iin, hem de ziyaretileriniz iin zaman kayb olur. 3. Cisimlerinizin dz izgi zerinde yrmesi kadar kt bir grnt olamaz. Motion Path'lerini canlandrn biraz! 4. Ya uygun ses kullann, ya da hi kullanmayn. Kt seilmi bir ses, harika bir animasyonu berbat etmeye yeter. 5. Animasyon, gerein abartlmasdr. Dolaysyla mmkn olduu kadar herkesin aina olduu unsurlar kullann; bir filmden bir sahne, ya da herkesin sokakta her an grd trden bir otomobilin hareket etmesi sahnesi gibi. Gerek d grnmlere bavurmaktan kann.

Jeffry Veen (Hotwired Arabirim Ynetmeni) 1. Bir grafiin iine asla, ama asla metin koymayn. Metin, metindir. Grafik, grafiktir. kisini birbirine kartrmayn. Perde tablo gibi, tablo da perde gibi aslamaz. 2. Bir ziyaretiyi, Geri dmesini tklamamaya ikna iin saniyeniz var. Tam saniye. O halde ekrana hemen bir ey getirin. yle bir ey ki, ziyareti devam etsin bakmaya. 3. Hereyin yklenmesi iin tam 30 saniyeniz var. Bu sre iinde sayfanzn tm yklenip bitmezse, kaybettiniz demektir. Emin olmak iin siz bu sreyi 15 saniye olarak hesaplayn. 4. Internet'teki arama alanlar sizin sayfanz bulabiliyor mu? Bilmiyor musunuz? Peki, ya META tag'lerin neye yaradn biliyor musunuz? 5. Ziyaretiyi hi mi hi ilgilendirmeyen tek ey, sizin Web alannzn nasl ilediidir. Onlar ilgilendiren Web alannzn ieriidir. Basit ve hzl: ierii verin. O kadar.

Erik Adigard (Tasarm Ynetmeni): 1. Web'de tek kural var: Basitlik. 2. Web'de bask dnyasndaki gibi "Baslnca iyi durdu" diye bir ey olamaz: Neyin nasl grneceine yzde 100 emin olmalsnz. 3. Web tasarmclarnn Internet'teki tartmalarn izleyin; ama dediklerini asla yapmayn. Sayfalarnz Web tasarmclar iin deil, bir mteri ve onun muhtemel mterileri iin yapyorsunuz. 4. Muhtemel ziyaretileri tanmaya aln. Kimlerdir? neden holanrlar? Hangi filmleri grrler? Hangi mzikleri dinlerler? 5. Bilgisayar avucunuzun ii gibi bilmelisiniz.

Erik Eaton (HotWired Tarmcs) 1. Sayfalarnzda asla "#FF36C6" rengini kullanmayn. 2. Bilgisayarnzdaki btn fontlar silin. Bir arkadanza "Bana adet font ver: biri mono-space, dieri serif, ncs de sans serif olsun," deyin. Ve hayatnzn sonuna kadar bu fontla idare etmeye hazr olun. 3. Kendinizi gerekten Web tasarmcs gibi grmeye balad iseniz, bir sre baka bir i tutun. 79

Jonathan Louie (Tasarm Ynetmeni) 1. Designer (Tasarmc), Flemenkce'de "Vormgeving" demektir. Bunun anlam "ekil veren." Designer/Tasarmc, denildii zaman biraz kendimize fazla pay kartyoruz gibi geliyor. Bizim iimiz belirli bir ierie, zevkli, ileyen, yazanla okuyan arasna girip kafa kartrmayan bir ekil vermekten ibaret. Bunu sk sk unutuyoruz. 2. Bugne kadar grdm en iyi Web sayfasn, amatrlerin yaptn sylemeliyim. Herhangi bir dernein yeleriyle haberleme sayfas, ou szmona tasarmcnn vne vne bir hal olduu harikalarndan daha iyi. 3. Sat anda yayoruz. Yaptnz i satlyor mu? Ona bakn!

Lisa Seaman (HotWired'in ilk tasarmcs) 1. inizden bir ses,"Bu i olmad" diyorsa, o i olmam demektir. 2. Web (hatta btn gazete-dergi) tasarmclar sanatdan ok avukata benzerler. Yaptnz ie ak olmanz gerekmez. Ama sizin greviniz, o ii en iyi ekilde, sanki kendi iinizmi gibi yapmak zorundasnz. 3. Moda olan eylere ok aldrmayn. Mesela, herkes glge verme sevdasna kapld diye, olur olmaz yere glge koymayn. Buna karlk teknolojiyi adm adn izleyin. Browser programlarn beta srmlerini aln ve herkesden nce aina olmaya bakn. 4. Ve unutmayn, her i planladnzdan en az iki kat daha fazla zaman alr.

Doug Bowman (Tasarmc) 1. yi tasarm,"Ay, ne iyi olmu" deil de "Ay, ne gzel yaz" veya "Ay, ne kt yaz" dedirten tasarmdr. 2. Bilgisayarlar, bir ii ne zaman kaydedeceinizi nceden anlar ve siz Kaydet'i tklamadan nce kerler. Dolaysyla, daima Kaydet'i tklayn. Birinden birinde, siz daha erken davranm olabilirsiniz! 3. Tasarm, genel iletiimin bir parasdr. Yaplmak istenen iletiim, sizinle Web ziyaretileri arasnda deil, mterinizle onun Web ziyaretileri arasnda olacak. Siz sadece aracsnz. 4. Sayfay bitirin, herey tamam olduktan sonra renk vermeye balayn. O zaman daha az renk kullanrsnz.

Mike Kuniavsky (Program Arabirim Tasarmcs 1. 2. 3. 4. Herkes beklemekten nefret eder. Herkes aa yukar kaydrmaktan nefret eder. Herkes okumaktan nefret eder. Hi kimse tutarl deildir.

Jim Frew (Webmonkey Tasarm Ynetmeni)

80

1. Tasarm, bir mesajn iletilmesi iin grsel arac bulmaktr. Ne yapmak istediinizi gzel bir cmle halinde kada yazn. Tasarmn yzde 50'si tamam demektir. 2. nce tasarm srecini belirleyin: erik kimden geecek; dzeltmeleri kim yapacak; grafikler iin son karar kim verecek? Siz kime kar sorumlusunuz? Son "Tamam" kimden kacak? Bunlar iyice belirlemeden, sayfaya elinizi srmeyin. 3. Tasarmc olarak siz ne metin yazarsnz, ne fotoraf, ne illstrator. Brakn herkes iini bildii gibi yapsn. Sizin sayfa tasarmnza karlsa, birisi omuzunuzdan srekli ne yaptnza baksa, memnun olur musunuz? 4. Bir ii, nce HTML, sonra CSS ile zmlemeye aln. Bunlar yetersiz kalnca GIF'e bavurun. 5. 12'ye be kala, hala ortada hi bir ey yok ve siz metin yazarlar, fotoraflar ve illstratrler konusunu makinal tfekle halletmeye karar vermek zeresiniz. Unutmayn bu bir hal aresi olamaz; tersine sayfay daha da geciktirir. (Polis, adliye filan zaman alan eylerdir!) Tersine, iyi mzik koyun sete. Herkese ay, kahve, gazoz, filan smarlayn. Herkes sizin ok rahat olduunuzu hissetsin; daha rahat alrlar.

81

EK-B
HTML Etiketleri
Bu tablo, etiketlerin ksa aklamalarn rneklerle gstermektedir. Browser'larn HTML etiketleri ile uyumluluklarn tablodan renebilirsiniz. NN: Netscape Navigator IE: Internet Explorer W3: World Wide Web Consortium (W3C)

Etiket <!-- -->

Aklama/rnek Aklama-Yorum belirtir (comment) <!-- buras yorum satr --> Dkman tipini belirtir (document type) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Anchor-Balant oluturur <a href="www.pclife.com.tr">PCLife</a> Ksaltma belirtir (abbreviation) <abbr title="Trkiye Cumhuriyeti">T.C.</abbr> Ksaltma baharflerini belirtir (acronym) <acronym title="World Wide Web">WWW</acronym> Adres belirtir <address> Kaptan Memo<br> Kaptanlar Cad.<br> No:19 </address> Java applet eklemede kullanlr <applet code="takvim.class">...</applet> Resim haritalarnda alan koordinat belirtmekte kullanlr <area coords="20,10,100,10" href="anasayfa.htm"> Metni koyu yazar <b>Koyu metin</b>

NN 3.0

IE 3.0

W3 3.2

<!doctype>

3.0

3.0

3.2

<a>

3.0

3.0

3.2

<abbr>

4.0

<acronym>

4.0

4.0

<address>

4.0

4.0

4.0

<applet>

3.0

3.0

3.2

<area>

3.0

3.0

3.2

<b>

3.0

3.0

3.2

82

<base>

erevelerle kullanlr. Balant verilen dkman iin varsaylan ereveyi belirler. <base target="frame_adi"> Sayfa metninin yaztipi ayarlarn belirler. <basefont face="arial" size="5"> Metni tersinden yazar <bdo dir = "rtl">Ey edip Adana'da pide ye</bdo> Metni bir l byk yazar <big>bytlm yaz</big> Metnin satrba girintisini artrr <blockquote>Yazlar daha solda</blockquote> Sayfann gvde (body) blmn belirtir. <body> ... </body> Satrba oluturur (line break) <br>Yeni satrba Formlar iin dme oluturur (button) <button>Gnder</button> Tabloya aklama ekler <caption>Tablo Aklamas</caption> Sayfadaki nesneleri ortalar <center>ortalanm yaz</center> Alnt belirtir <cite>Cumulus stratus: </cite> bu ksm ansiklopediden alnmtr Kod belirten metinlerde kullanlr <code>border</code> ereveyi belirler Tablo stun gruplarna uygulanacak zellik belirtir <col align="left"> Tablo stun grubu oluturur <colgroup span="2"></colgroup> Tanmlama listelerinde tanmlama metni oluturur <dd>Tanmlama metni Silinmi metin belirtir

3.0

3.0

3.2

<basefont>

3.0

3.0

3.2

<bdo>

5.0

4.0

<big>

3.0

3.0

3.2

<blockquote>

3.0

3.0

3.2

<body>

3.0

3.0

3.2

<br>

3.0

3.0

3.2

<button>

4.0

4.0

<caption>

3.0

3.0

3.2

<center>

3.0

3.0

3.2

<cite>

3.0

3.0

3.2

<code>

3.0

3.0

3.2

<col>

3.0

4.0

<colgroup>

3.0

4.0

<dd>

3.0

3.0

3.2

<del>

4.0

4.0

83

<dfn>

Bir dzine <del>20</del> 12 adettir Tanm belirtir Yapraklarn altndaki gzeneklere <dfn>stigma</dfn> denir liste oluturur <dir> <li>Liste esi </dir> Blm oluturur (division) bu bir: <div>blm</div> Tanmlama Listesi oluturur (definition list) <dl> <dt>Liste esi </dl> Tanmlama ifadesi oluturur <dl> <dt>Liste esi </dl> Vurgulu metin belirtir <em>Hey!</em> buraya gel Form kutusu oluturur <fieldset> Boy <input type="text" size="3"> Kilo <input type="text" size="3"> </fieldset> Yaztipi ayarlarn belirtir <font face="verdana" size="3" color="red"> Form oluturur <form> Ad <input type="text" size="8"> Soyad <input type="text" size="8"> </form> ereve dosyalarn tanmlar <frame name="solmenu" src="sol.htm"> ereve oluturur (frame) <frameset>...</frameset> 1'den 6'ya kadar deiik ebatlarda balk oluturur

3.0

3.2

<dir>

3.0

3.0

3.2

<div>

3.0

3.0

3.2

<dl>

3.0

3.0

3.2

<dt>

3.0

3.0

3.2

<em>

3.0

3.0

3.2

<fieldset>

4.0

4.0

<font>

3.0

3.0

3.2

<form>

3.0

3.0

3.2

<frame>

3.0

3.0

4.0

<frameset>

3.0

3.0

4.0

<h1> ... <h6>

3.0

3.0

3.2

84

<head>

<h1>Balk</h1> Sayfann ba (head) blmn belirtir <head> ... </head> Yatay izgi oluturur <hr> Sayfann HTML dkman olduunu ifade eder <html> ... </html> Metni eik yazar (italic) <i>Eik metin</i> Yzen ereve oluturur <iframe src ="default.asp"></iframe> Grafik ekler <img src="resim.gif"> Form eleri oluturur <input type="text"> <input type="button"> <input type="radio"> <input type="checkbox"> Eklenmi metin belirtir bir dzine <ins>12</ins> adettir Metin kutusu oluturur <isindex prompt="Adnz "> Klavye metni belirtir Metin kutusuna <kbd>TL</kbd> yaznz Form eleri iin etiket belirtir <label for="kimlikBilgileri"> Adnz: <input type="text"> </label> Form kutusu iin balk oluturur <fieldset> <legend>Kredi Kart Bilgileri</legend> Kart no: <input type="text"> </fieldset> Liste esi belirtir <li>Liste esi Sayfa ile ilgili harici dosyalara balant verir

3.0

3.0

3.2

<hr>

3.0

3.0

3.2

<html>

3.0

3.0

3.2

<i>

3.0

3.0

3.2

<iframe>

3.0

4.0

<img>

3.0

3.0

3.2

<input>

3.0

3.0

3.2

<ins>

4.0

4.0

<isindex>

<kbd>

3.0

3.0

3.2

<label>

4.0

4.0

<legend>

4.0

4.0

<li>

3.0

3.0

3.2

<link>

4.0

3.0

3.2 85

<listing>

<link rel="stylesheet" type="text/css" href="stiller.css"> Metinleri yazld ekliyle grntler <listing> &lt;br&gt; etiketi kullanmadanalt satra getik </listing> Resim haritas oluturur <map name="harita"> ... </map> Liste oluturur <menu> <li>Liste esi </menu> HTTP balk bilgileri ierir <meta http-equiv="content-type" content="text/html" charset="windows-1254"> ereve etiketini tanmayan eski tarayclar iin alternatif kod blm belirtir <noframes>Browser'nz gncelleyin!</noframes> Script altrma zellii kapal tarayclar iin alternatif kod blm belirtir <noscript>gzelim scriptleri karyorsunuz!</script> Applet, video dosyas gibi nesneleri eklemekte kullanlr

3.0

3.0

3.2

<map>

3.0

3.0

3.2

<menu>

3.0

3.0

3.2

<meta>

3.0

3.0

3.2

<noframes>

3.0

3.0

4.0

<noscript>

3.0

3.0

4.0

<object>

3.0

4.0

<ol>

<object classid="clsid:F08DF954-8592-11D1-B16A00C0F0283628" id="ayarla"> <param name="BorderStyle" value="1"> </object> Sral liste oluturur <ol> <li>Liste esi </ol> Formlar iin kullanlabilecek liste kutusu seenekleri oluturur <select> <option>Beni se </select> Paragraf oluturur

3.0

3.0

3.2

<option>

3.0

3.0

3.2

<p>

3.0

3.0

3.2

86

<param>

<p>Bu bir paragraf</p> <object> veya <applet> etiketi ile yerletirilen nesnenin parametrelerini belirtir <object> <param name="Min" value="0"><param name="Max" value="10"> </object> Metni yazld ekliyle grntler Sayfa kodu aada <plaintext> <html> <head> ... Metni yazld ekliyle grntler <pre> &lt;br&gt; etiketi kullanmadanalt satra getik </pre> Metnin zerini izer afak: <s>550</s> Script kodu veya kaynan belirtir <script language="Javascript">...</script> Formlar iin liste kutusu oluturur <select> <option>Beni se </select> Metni 1 l kltr <small>Kltlm metin</small> Blm oluturur <span>Bu bir blm</span> Metni belirgin yazar Enflasyon: <strong>%39</strong> stil grubu oluturur <style> h1 {font-size: 12px} </style> Altyaz oluturur H₂O styaz oluturur

3.0

3.0

3.2

<plaintext>

3.0

3.0

3.2

<pre>

3.0

3.0

3.0

<s>

3.0

3.0

3.0

<script>

3.0

3.0

3.2

<select>

3.0

3.0

3.2

<small>

3.0

3.0

3.2

<span>

4.0

3.0

4.0

<strong>

3.0

3.0

3.2

<style>

4.0

3.0

3.2

<sub>

3.0

3.0

3.2

<sup>

3.0

3.0

3.2 87

<table>

27^o Tablo oluturur <table> ... </table> Tablo gvde (body) blmn oluturur <tbody> ... </tbody> Tablo hcresi oluturur <td>Tablo hcresi</td> Formlar iin metin alan oluturur <textarea cols="30" rows="5">...</textarea> Tablo ayak (foot) blmn oluturur <tfoot> ... </tfoot> Tablo stun bal oluturur <th>Stun bal</th> Tablo ba (head) blmn oluturur <thead> ... </thead> Sayfa baln belirtir <title>Sayfama Hogeldiniz</title> Tablo satr oluturur <tr> <td>Tablo hcresi</td> </tr> Metinleri daktilo harfleri ile yazar <tt>bu daktilo yazs</tt> Metinleri altizili yazar (underline) <u>Bu konunun altn izin</u> Srasz liste oluturur (unordered list) <ul> <li>Liste esi </ul> Metni yazld ekliyle grntler <xmp> <br> etiketi kullanmadan alt satra getik </xmp>

3.0

3.0

3.2

<tbody>

4.0

4.0

<td>

3.0

3.0

3.0

<textarea>

3.0

3.0

3.2

<tfoot>

4.0

4.0

<th>

3.0

3.0

3.2

<thead>

4.0

4.0

<title>

3.0

3.0

3.2

<tr>

3.0

3.0

3.2

<tt>

3.0

3.0

3.2

<u>

3.0

3.0

3.2

<ul>

3.0

3.0

3.2

<xmp>

3.0

3.0

3.2

88

148942

89