CHIP Online - Arşiv: Şubat 1998 DOWNLOAD "Style Sheet"lerle Metin Formatlamak

!'-;mr.w II HîMLfi)îî!NFORWATtAMAK Internet Kelime İşlem Öğreniyor HTML yıllar önce bilim adamlarının rahatça bilgi alışverişi yapabilmesi için düşünülmüş. Metin formatlama imkanları da elbet buna göre tasarlanmış. Şimdilerde "Style Sheets" denilen yöntemle sayfalar daha güzel gözükmeye başladı. WWW,nin bu kadar popüler olacağım, seksenlerde CERM Lausan-ne'de çalışan mudili Tini Bcrners-tee bile tahmin etmemiştir. O aslında sadece basit metinler, çoğunlukla bi limsel verileri taşıyacak bir dil tasarlamak islemişıi. Bunun '.cm gerekli şeyler de çok la2İa delildi: Birkaç yazı tipi, birkaç baslık ve maddelcuıc elemaru, kalın, yalık. alu çbâli metin imkanı, çok kullanılacağım sanma- makta birlikle gıf gösterme imkanı. Eh bu kadatı yeter de arlardı bile. Ama arlık yetmiyor. Bilim adamları bugün Net'ıe azınlıklar arasında. Onun yerine yayınevleri, ajanslar, yazılını ve donanım firmaları, siyasi partiler, otomobil sancılan var. GÖM, r-DVyu yendi beri arlık Internet. para ile ilgili bir sev. Bir Ortamda satış yapma imkanı varsa, pazarlama ve reklamcılık da var demektir, bu da prezentasyon ihtiyaçlarım onaya çı- karıyor ve HTVII.'nm eksikleri artık fena halde göze batıyor. Ûıe yandan bu eksiler giderilmeye çalışılmıyor değil. Ancak o kadar çeşitli ortam, işletim sistemi, bilgisayar ve Browser var ki ll'l Mİ.yi bunların hepsine uyumlu şekilde geliştirmek çok meşakkatli bir İŞ. W3C ÎWorld-Widc-Web Consorti-ımı) isimli organizasyon bu işlerle uğraşıyor. Ve yeni HTML standardı teklifi içerisinde metin formatlama işlemlerini zenginleştirecek olan "siyle sheers" isimli madde var. Bunları geçen savlarda stil şablonları olarak çevirmiştik. Siil şablonları sayfa tasarımcısına sayfanın her köşesindeki metin özelliklerini baltan tanımlama ve istediği gibi değiştirme imkanı tanıyor. Böylece sayfaların tipografisi hayat kazanıyor. Style sheet'lerden nasıl yararlanılacağına dair örnek olarak bu yazının > Alt Oisipm Bastığı Yazıl if'iVcnhıiıi Iİ\tyüklûğü;10 Rengi; 51.5X153 Spot Yazitipi:'!'ahuma Büyüklüğü: 10 Satır atalığı: %8 Türü: Yalıh Külmlıfc: IQ0 Ua$hl; YazıliphVrrdana Büyüklüğüyle *alır aralığı; % 110 Normu/ Metin Yazıtipi: lahoma Büyüklüğü: 12 Arkapîaıu Beyaz û Û Slyle Üheet'ledc HTML M. t,,, ¦=,.,,.. .11.,,,,.,:. naray itamı. t--------------5 uı. Internet Kelime şlem Öğreniyor HTML -,-'"ı¦ önec bilin *OMnUwm rth*t>t büfiishtfethir*p*b*ııett um tfcfyunufrmıp. Metin Aeumatfm* MfaMfeCT da rjtn>tturna 9&* tasarlan***. ŞJm&UrOr Sfjtr Sheett" denilir, yöntemle tayf altı ı)*h*giuet HvtuİJiter' batla*. WWWMl bu LıAw popute olacağıı, seksenlede CSÎN Lıuaınncoc çalışan mucidi Tim Bemers-Lee bile tahmin ecnıentijtif. O aslında sadece basit '¦İ.ı.;nlı.ı çoğunlukla bitonsel vefâeı i '.,y,ı ...if j). bir di tasarlamak istemişti. Bunun için gereUİ şeyler de çok fada değ**: birkaç yazı Üpl. butun; u*>M #e 3n~ ¦ jt>*c*v*- ŞU8AI1998 CHkP ¦ 167 nternet yi i.:: .:..".: ¦¦¦>¦¦¦'¦ '¦*¦'" kendisini kullanacağız. Dergide kul-lanünıası muhtemel font ve grafikleri kullanarak aynı layout'u web'de misil elde edebileceğimizi aşağıdaki resimde görüyorsunuz. • Siyle Sheeılcr hakkındaki W3C teklifini "CascacHng Sryle Sheere Le-vel 1" adı alimde http37w3.org/ TR/RTîC-OiSl adresinde bulabilirsiniz. Yazarları, HakOD i-"; ve Beti BOS. Şu anda geçerli ofen HTMI 3 2 standardında daha siyle shecı'ler yok. Ama "Cougar" adı allında geliştirilen ve neredeyse kabul edilmek Özere olan HTML 4.0a dahil edilmiş. Microsoft ve Netscape de birbirleriyle tam uyumlu olmasa da Ksnlıırer 4.0 ve Communicalor 4.0 sürümlerinde Brosvser'larına siyle sheeı tekniğini katmışlar. Şu anda her şey tam oturmamış olsa da, 5.0 sıin'ımlerindc iki Sayma da style. sheei'lere güveniyor olacaklar. \V3Cnin teklifindeki CSS1, yem bir programlama dilinden çok şu anda geçerli olan HPML'ye eklerden oluşuyor. Ana mantığı, stil tanımlamalarını sayfanın içeriğinden ayır mak. Sayfanın başında tanımladığını?. siillen III. H2, H3. EM. P, BR gibi HTML Tag!larına auyorsunuz, sayfanın geriye kalanında dn bir daha yem fom lammlaması görmüyorsunuz, İşlemin seması söyle: HTML Elemanı ÖzelliklıDeğer; Ö/ellik2; Değer; Bu CHIP makalesinin başlığını style sheetlcr yardımıyla \veb!e taşı mak için Verdana fontunu 40 punto büyüklüğünde kullanmamız gerelti yor. Buna en uygun HTML Tag'ı 111. Deminki semanın yardımıyla sayfanın basma şu eklemeyi yaparsak bun dan SOnia Hl Tag'ı içinde, oları bul ün yazılar 40 pi Vcrdana olacaktır. fon(-Size:4>lpi: Une-heigih:110%l Temel Bilgiler Style Sheeller İçin Metin Özellikleri Font-family: Yazıripini belirliyor Font-stylc: Yatık olup olmayacağını belirliyor Font-vananv ruııı'u büyük harte çeviriyor Font-weight: Değişik derecelerde kalın yazı sağlıyor Fonl-size: Yazıtını buyuklugunu seçiyor Color: Metnin arkasına İstenen bir renk alıyor Word-spacİag: iki kelime arasındaki bos alanın büyüklüğünü I ayarlıyor Lelter-spcaing: \kı har! arasındaki % bos akının büyüklüğünü ayarlıyor Bückgrouad-cohr: Belirlenen alanın arkasına renk alıyor Backgrouad-image: Belirlenen alanın arkasına bir nsslro yerleştiriyor Background-posirion: Aı kaplar. resminin kesin pozisyonunu ta-muılıyor Burada lcxl iaınıly lont Lürûuû. fonı-size font huyüklügTtiu:. line he-igrh da satırların aralığım bildiriyor. Satir aralığı lanımlamasaydık başlığın iki sanrı arasında az boşluk olacaktı. farkı yüzde ile belirleyerek ayrıca değişik çözün urlukla de düzgün gözükmesini garantiliyoruz. Verdana fontunu sörfçülerin görebilmesi için maki unlarında kurulu olması gerek, lîıı yüzden burada sadece dcmnrıslrasyun amacıyla bu fontu seçtik. Aynı başlık Windows'un standart fontları Anal ve Times N'ew Roman ile de fena duırmayacaknr. Ancak Mae kullanıcıları bambaşka fontlarla çalıştıkları için onları da düşünmek gerekir. Hl Tag'ımıza aşaftıdakı salın eklersek Mac'eilerî de gözaıdı eıme-rmş oluruz. İli {foni-farmly-Verdana.Arial. Helvetical lîoylecp sayfa soldan sağa bulduğu ilk fontla göMcrilecektir. Verdana yoksa, Anal bulduğu makinada Arial ılc bulamadığında Helveiıca ile Hl'i gosiereeek. Ucunu de bulamazsa ıııa-kiııanın varsayılan yazıtipini kullanacak. III başlığı lanımınm vvc.h sayfasına nasıl eklendiğim bir sonraki kutudan takip edebilirsiniz. >ırmj >HLAD> >S'I'Y!.r> HI i /'Başlık*/ texl-faıııİly:Vc!dana; İönr~size:40pı; !ine-hcigıb:ll0%) >/STYT.h> >/HEAD> >BOD¥> >HI> Internet Kelime İşlem Ogrcniyor>/H I > >/BODY> >/HTMIj> Bu örnekle. aynı zamanda /* 7 işa-ii'.tleri sayesinde sayla koduna yorumların nasıl eklendiğini de görmüş oldunuz \Veb tasarımcısı olarak sayfanızı iyi organize ermeniz şayiayı sonradan güııcelleyecck olanlara da kolaylık olması açısından sryle sheet-lerınızi mümkün olduğunca açık bir dille ianımlamah ve /' V işaretlerini kullanarak her eleman hakkında bilgi vermenizi tavsiye ediyoruz. Aynı şekilde spot satırları için 113. Ah disiplin başlığı için de 114'ü tanımlıyoruz. "nf I ,'/%[>or*/ lonl-famiiyTalıoıııa fonl-sızeılOpE; lonl-slyle Haliç. fonl-weıgib:100: line-heıgth:80%î H41 î*Ali disiplin başlığı"/ fon ı - fam i ly Verdana; fonl-sİze:10pl; eölor:rgbC51,53,1535) 168* CHLF' ŞUBAT 1998 I nternet 'Ct'İİ'L^İJ^JJJiA^A .1*11. 1 .' Normal metnin formanın tanımlamak için yine bir 11 tag'ı kullanmamıza gfirek yok. Sayfanın çoğu hu fonı si fi inde yazılacağı İçin BODY l'ag'ını tanımlamak yeterli. nODY !/*Nomıal MetİnV fon ı-fam i ly: Tabuma; font -size:12pt; backgroundıvhice! Yazılipi olarak 12 puruo Tahoma kullanıyoruz. Burada değeri beyaz olarak girilmiş olan "background" yeni bir tamın, yazının arka plan rengini bildiriyor. Bütün web şayiasının ar-kaplanı beyaz olduğundan siyle tanımı sırasında bunu aradan Çıkartmanın. daha hızlı ve sağlıklı olduğu söyleniyor. Şu anda hala tanışılan HTML 4.0'a göre artık arkaplan grafikleri ya da rengini eskisi gibi BODY 1 ağından SOllza degil STYLE Tag'ıudaıı sonra girmciiviz, I'cki ya arka plan grafikleri irin ne yapacağız? Yeni Attrihıu'u-mıi7. url imdada yetişiyor. tt'fıire! Bu şablon elemanında arkaplaııa beyaz rengin yanılıra grafik.gif isimli görüntü dosyası da df'şenmis. oluyor. http:Av~ww.chip.com.tr/logo.jiU İİbı lam bir \veb adresini de, parantezin içine yazmak suretiyle kullanabilirsiniz. Stil şablonları HTML I'ag'lanna hi-yerarşik bir .sırayla muamele yapıyorlar. Örneğin bu siyle Tanımında H İrilirini kullanmamış olsaydınız. IVODVdc tanımladığınız Tahoma ya-zıtipi, ufaltılarak II Tag'lennde. kulla-nılacaklardı. Yani I ti ve H3 tanımlarımı- bu hiyerarşiyi kırıyorlar. Kırmızı, Sarı ve Mavi Merin renkleri "color" Anribute'uy-la değiştiriliyor. Örneğin Hİziııı H4 la-nınnmızda verilen 51,53,153 sayılan, R(.B tablosunda mavirnsi bir lonun B şHın) rtX'ı Sim.- Zuıl. ] 5HJH. m HTMt y/m* *ıe* biam aaımüı*>*ı raturtt* />•& muararm yifymıımnl K*> >: ;-v' •-¦¦: *J -. '-:.'¦¦ ıiv m s! ¦'.:.-.: ? Hakanları da t Sja (.-:-¦_".- göre Uı ¦'.¦.'.'.¦ tuil I. $lmdUr*de "$ljle Sht>*tj" detrtbn fOııhımh %*ftMm lÂmf-a ıj,iıtl uüjiıkmejc MşİKfe VW/W'mn bu kadar popüler olacağını, sekseklerde CET* UjUMoneMe çalışan mucidi Tim Semers-Ue bile tahmin rtmemlsBr. O aslında sadece basit metinler, çoğunlukla bfrmsc' vcn'lcri tapyacak bir dil tasarlamak istemisb. Bunun İçin gerekl- şeyler de çok farla dağıldı: Cîrkaç yazı tipi, birkaç baslık ve maddelerle eleman, kal n yatık alb 1 çizili mebn imkanı, çok kullanılacağını sanmamakla birlikte gif , gösterme inkarı, (hah haa),... Sı bu kadar: yeter de artardı bile. Neiscape Communİcatar'tfa "background" ile arkasına renk (burada kırmızı) atılmış satırlar üstüste biniyor. *mıns-(£ı V"-->"^"''";"ıV(.-.-.-n^/."inv>.hlB. .... Explorer'da İse satırlar konusunda sorun yok, ancak o da bütün metin parçasını kutu içerisine alıyor. HTMI ytHaro'nea inlim adamlartnın rahatta bilgi .tktvcift yapihltoyrıi iffn ,'r.s¦:t.'.'.-".'.'y MfHrı foTjtalImnt kııimıUıı da elbet buna pere laıarlsnmn. ŞtndH>ıot 'Style Shetts' daraları yonttmlt tayf alı daha gürel Oâıûlorıaye batlâdı. WWWWn b-J kadar popüler olacağını, seksenlerde CERN Lauıanr^de çalışan njcid Tim BemerS'Jje bi!e tahmin etmcpı^tir O ntınöa sadece basit metinler, çoğunlukla bilimsel w*n leri taçıyacak bir dil tasarlamak fsttml$3. Bunun IdngeRifcll şeyler de çok özadeğıkli: birkaç yazı Dpi, birkaç ca$lı> *e maddelere elemanı, kalın yatık alb çizili meDn imnanı, çok kullanılacağını sanmamakla birlikte gif __ tam değeri. Birinci savı kırmızı, ikin cisi sarı, üçüncüsü mavi bileşenlerin değerim veriyor 256 özen üç iane İhtimal olduğuna göre bu şekilde 16777216 adet değişik rengi tanımlayabiliyoruz. CSSTin yazarları 1 ie ve Bos. paragrafın ilk harfinin kocaman ve süslü olması geleneği icîn bile bir Aııribııie düşünmüşler: first-lcllcr. Aynı şekilde bu ilk harfi özel olarak tasarlamakta serbestsiniz. Ancak ne Explorer ne de Comnuınieator bu özelliği daha desteklemediler. Şu anda Browser*lar hangi 0?S elemanlarını destekleyip hangilerini deste kleuıcycceklcri konusunda çok secici davranıyorlar. Örneğin harşer arası uzaklığı tanımlayan "Icllcr-spa-cing' ve kelimeler arası uzaklıj*ı ta mmlayan 'Vord-spadng' kelimeleri Navigator 4.0 tarafından ianmmıyor. l:xplorer ise "Ietler-spacing"i anlıyor takat "vvord-spacing1'! anlamıyor. Ü.srelik ikisi de bir tanımı anlasalar bile başka başka peyler arılayabiliyorlar. Örneğin bir metin parçasının arkasına "backgıouud" tanımı yardımıyla bir renk atadığınızda Netscape o parçanın arkasını dolduruyor, ancak alttaki sanılan pek dikkate almıyor. Yani ^line-hı-iglıt" sayesinde satırları biraz yaklaşıınrsanız usı satırlar alt salınn rengiyle örtülüyor... Buna karşılık Internet ExplorerTn bu konuda bir problemi yok. İsteneni gösteriyor. Ancak o da buiüıı incini bir tablo hücre-smdeymiş gibi gorûp* hepsim- aynı muameleyi yapıyor. Bu metodun zararı aynı parça içinde de-gi$ık arkaplan renklen kullanılırsa ortaya çıkıyor. S Joachım Pich'clen çeviren Hasan Yalçmkaya 170 • CHkP SUBAI 199!

Arşiv Listesi