Tuesday, October 31, 2000

Tasarimin Temelleri

INTERNET açilali beri, PC World Online'a koydugumuz Misafir Defteri'ne biraktiginiz mesajlar, kendi Web sitenizi tasarlamaya ne kadar hevesli oldugunuzu açikça gösteriyor. Bizi aradiniz, mesajlar biraktiniz, deneyimlerimizden yararlanarak kendi Web sayfalarinizi tasarlamakta yardimci olacak bilgiler istediniz.

Iste biz de isteklerinizi kirmiyor ve bu sayidan itibaren bir Internet gezgininin kendi sayfalarini tasarlayarak Web'de nasil aktif rol alabilecegini açiklayan yazilarimiza basliyoruz.

Bir Web sayfasi tasarlamanin yolu HTML dilini bilmekten geçiyor. Elbette Microsoft'un Ofis programlari için gelistirdigi Internet Asistanlari, Web sayfasi tasarlamak için onlarca pratik program var, ancak HTML kodlarini bilmiyorsaniz, herhangi bir tasarim problemi ile karsilasinca takilip kalabilirsiniz. Tabii, Java, Java Script, ActiveX, PERL gibi ileri seviye Web programciligina yönelik araçlar da var.

Bu sayfalarda temelden baslayarak hepsi hakkinda bilgiler verecegiz. Bunlarin arasinda grafik tasarimlarinizi verimli ve etkin bir biçimde yapmanizi, sayfalariniza erisim hizinizi yükseltmek için grafikleri küçültmenizi saglayacak püf noktalari da olacak. HTML kodlarina ve diger teknik detaylara girmeden önce, Internet üzerinde bir Web sayfasi nasil edineceginizi anlatarak yazimiza baslamak istiyoruz.

Daha sonra HTML dilinin nasil kullanilacagina iliskin bir giris yapacagiz. Ilerki aylarda ise PC World Online'in webmaster'lari Cenk Tarhan ve Deyvi Levitas size isin teknik detaylarini anlatmaya devam edecekler.

WEB'DE NASIL YER ALIRIM?

INSANIN dünyada bir mekani ve World Wide Web'de benim diyecegi, küçük de olsa bir alani olmali. Bunu saglamak için iki seçeneginiz var. Bunlardan birincisi baska birine (muhtemelen bir ISS'ye ait) Web sunucusundan belirli bir sabit disk alani kiralamak. Türkiye'deki servis saglayicilar bu tür hizmetler veriyor. Hatta bazi ISS'lerde Internet hesabi açtirdiginizda size küçük de olsa ücretsiz bir Web sayfasi alani sagliyorlar. Ama hazirlayacaginiz Web sayfalarini ticari amaçlarla kullanacaksaniz, örnegin firmanizin ürünlerini Web sayfalarinizda tanitmak ve pazarlamak istiyorsaniz belirli bir ücret ödemek zorundasiniz.

Ikinci seçenek yine genelde firmalara yönelik. Yani, Türk Telekom'a basvurup bir kiralik hat (leased line) araciligi ile Web sayfalarinizi kendi Web sunucunuz üzerinden yayinlamak veya Web sunucunuzu bir ISS'ye yerlestirip buradan yayin yapmak. Kuskusuz bu seçenekler içinde bir ISS'nin sunucusundan - kiraladiginiz yerin MB cinsinden büyüklügüne göre ücret ödeyerek - yer kiralamak en ucuzu. Bunun karsiliginda Web sayfalariniza karsilik gelecek bir Web adresi (URL) ediniyorsunuz. Bu adres ISS'nizin ismi ile baslayip kendi sitenizin ismi ile devam edebilecegi gibi (örnegin http://www.iss.com.tr/benimsitem), ISS'nizle yaptiginiz anlasmaya göre tamamen kendi verdiginiz isim de olabilir (örnegin http://www.benimsitem.com.tr).

Elbette ISS'ler belirli bir ücret karsiligi Web sayfalarinizi tasarlayabilirler, ancak burada amacimiz kendi Web sayfalarinizi tasarlamayi ögretmek olduguna göre sayfalarinizi kendinizin tasarlayacaginizi ve ISS'nizin sunucusuna yaptiginiz anlasmaya göre belirli zamanlarda modem ile ' upload' edeceginizi varsayiyoruz. Buraya kadar ticari anlamda bir Web sitesi kurmak için neler yapabileceginizi açikladik, ancak yazimiz daha çok amatörlere yönelik oldugu için size ücretsiz alternatiflerden haberdar etmek de boynumuzun borcu. Türkiye'de bazi ISS'lerin Internet erisimi için hesap açtirdiginizda size ücretsiz bir Web sayfasi alani sagladiklarini söylemistik. Yurtdisinda hesabi olsun olmasin herkese Web sayfalarini yayinlamak için ücretsiz belirli bir alan açan ISS'ler de var.

Örnegin ABD'de faaliyet gösteren Geocities (http://www.geocities.com/homestead/) herkese 2MB'lik bir Web sayfasi alani açiyor. Internet'te sörf yaparken kuskusuz bu tür baska promosyonlarla da karsilasabilirsiniz. Hazirladiginiz sayfalari bir FTP client programi ile (örnegin ws_ftp) bu sitelere ' upload' edebiliyorsunuz. Yine de bu hizmetin sürekliligi konusunda emin olamazsiniz. Bu yüzden Web sunucusunda yer açan bir ISS bulmanizi öneririz.

WEB SAYFASI TASARIMIN TEMELLERI

EVET, nihayet bir Web sunucusunda kendinize ait bir alan elde ettiniz ve Web araciligi ile baskalarina söyleyecek çok seyiniz var. Peki bir Web sayfasini tasarlamaya nereden baslamali? Ögrenmeniz gereken temel dilin HTML (Hypertext Mark-up Language) oldugunu belirtmistik. Bu dil aslinda, normal metni, hypertext adi verilen ve web browser'larla görüntülenmeye uygun metin haline dönüstüren bir kodlar silsilesi. Diger bir deyisle HTML, basit bir belgeyi alip içine bu belgenin sayfa düzeni ve metin biçimleri ile ilgili bilgiler yerlestirmenin ve bu belgeyi diger metin (ve/veya grafik) içerikli belgelerle iliskilendirmenin yoludur.

Web'de yayinlanmak üzere belgeler hazirlarken, HTML kodlari ile metinlerinize vereceginiz biçimler belirteç (Ingilizce adi ile mark-up veya tag) adini tasir. Bunlar metnin çesitli yerlerinde, ' <' ve ' >' seklindeki parantezlerin arasina yerlestirilen kodlardir. Bunlar arasinda diger Internet sayfalarina (veya URL'lere) geçisi saglayan "link'ler" de bulunabilir.HTML bir dil olarak adlandirilsa da, HTML belgelerinin (kisaca Web sayfalarinin) hazirlanmasi klasik bilgisayar dilleri ile programlama yapmaya pek benzemez. Daha çok kelime islemcilerle çalismaya benzer. Ancak burada yazitipi büyüklügünü ayarlamak, bir metni kalin veya italik yapmak için menü komutlarini kullanmaz, bunlari metnin basina ve sonuna koydugunuz kodlarla belirlersiniz. (WordPerfect ile çalisanlar bunu kolayca anlayacaktir, çünkü bu kelime islemcide yazdiginiz metinlerin biçim kodlarini da Reveal Codes komutu ile görüntüleyebilirsiniz.) Metni ve bu kodlari nerede yazacagiz diyorsaniz, baslangiçta (hatta PC World Online'nin webmaster'larina sorarsaniz her zaman) Windows'un Not Defteri fazlasiyla yeterli olacaktir.

Bu kisa giristen sonra bir örnek ile HTML kodlarini kullanmaya baslayalim. Diyelim ki elimizde söyle bir metin var: Düsünde bile göremez isler, Düslerin gördügü isleri. Bu metni HTML kodlari ile söyle yazarsak: <B>Düsünde</B> bile göremez, <B>isler</B>,<BR><B>Düslerin</B> gördügü <B>isleri</B>.<BR>

Web browser'da asagidaki gibi bir görüntü elde ederiz:

Düsünde bile göremez isler,

Düslerin gördügü isleri.

Bu örnekte <B> ve </B> belirteçleri Web browser'a aralarindaki metni kalin (bold) göstermesini söyler. <BR> belirteci ise satir basi verilmesi gerektigini. Bunlar gibi baska pek çok belirteç var ama güzel bir Web sayfasi tasarlamak için baslangiçta ögrenmeniz gereken belirteç sayisi 30-40 kadardir. Profesyonellestikçe yeni belirteçler kullanmaya baslayabilirsiniz.

Bir de yazdiklarinizin düzgün görünmesi için her html dosyasinin basinda:<html> <head> <baslik> </baslik> </head><body> sonunda: </body></html>

belirteçlerinin bulunmasina dikkat edin. Bunlar sayfanin basini sonunu belirlemek için gerekli belirteçlerdir. Koymazsaniz, Web browser'inizda metin belirteçleri ile birlikte görünebilir.Bu örnekteki belirteçleri kendiniz denemek istiyorsaniz, Not Defteri'ne istediginiz metni bu belirteçleri kullanarak girin. Belgeye bir isim ve htm soyadini (Windows 95'te html soyadini da kullanabilirsiniz) vererek kaydedin. Sisteminize bir Web browser yüklü ise htm soyadli bu belgenin üzerine çift tikladiginizda browser açilacak ve metniniz biçimlendirilmis haliyle ekrana geelcek.

HAYDI BIR WEB SAYFASI YAPALIM

HTML dilini ögrenmenin en kolay yolu, deneme yanilma ile web sayfalari hazirlayarak bu sayfalari web tarayicisi ile kontrol etmek, hatalari düzelterek ilerlemektir. Ayrica bilmediginiz kodlarin nasil kullanildigini ögrenmek için Internet baglantiniz varsa varolan HTML sayfalarini web tarayicinizin kaydetme seçenegini kullanarak sabit diske kaydedip herhangi bir metin editörü kullanarak açip inceleyebilirsiniz. Simdi adim adim bir web sayfasi hazirlayalim. Adim 1. Pencere Basliginin, arka planin belirlenmesi ve renkler. Her web sayfasinin bir basligi olmalidir. Bu baslik web tarayicisinin baslik çubugunda görüntülenecektir. Bu is için <baslik> tag'i kullanilir.

<baslik> ve </baslik>

tag'lari arasina yazacaginiz metin web sayfasinin basligi olarak görüntülenecektir. <baslik> tag'i asagidaki gibi kullanilir. <baslik>Bu benim ilk denemem!</baslik>Web sayfalarinin arka planini da istediginiz gibi ayarlayabilirsiniz. Bu asamada iki adet seçeneginiz var. Birincisi bos bir arka plan kullanarak bu arka planin rengini ayarlamak, ikincisi ise bir resim dosyasindaki resmi alip web sayfasinin arka planina ' dösemek'. Bu islemi aynen Windows 95'in masaüstündeki duvar kagidina benzetebiliriz. Önce bos bir arka plani renklendirmeyi görelim. Web sayfasinin arka planinin rengi <body> tag'ini kullanarak degistirilir. Default arka plan rengi gridir. Arka plan rengini örnegin beyaz yapmak için body tag'ini

<body bgcolor='white'> veya <body bgcolor='#FFFFFF'>

seklinde kullanabilirsiniz. Birinci seçenekte rengin Ingilizce ismi, ikinci seçenekte ise ayni rengin RGB cinsinden renk kodu hexadecimal (onaltili sayi sistemi) olarak verilmektedir. Eski tarihli browser'lar renk isimlerini algilayamazlar, bu yüzden sayfalarinizda renklerin onaltili sayi sistemi kodlarini kullanmak daha hayirlidir. Yan tarafta gördügünüz tabloda, web sayfalarinin arka planlarinda kullanilabilecek olan temel renkler isim ve sayi kodu olarak listelenmistir. Onaltili sayilarin RGB kombinasyonlari ile oynayarak istediginiz rengi web sayfasi arka plan rengi olarak belirleyebilirsiniz.

Bir Web sayfasinin arka planina bir resim döseyebilirsiniz. Bu islem için ilk önce elinizde bir resim dosyasi olmasi gerekir. Web sayfalarinda kullanilabilecek bütün resimler JPG veya GIF formatinda olmalidir. Web okulunu hazirlarken elinizde bir resim düzenleme programinin oldugunu ve JPG veya GIF formatindaki dosyalarla çalismayi bildiginizi varsayiyoruz. Örnegin elimizde arka.gif diye bir resim olsun. Bu resmi web sayfasinin arka planina dösemek için yine <body> tag'ini kullanacagiz. ARKA.GIF adindaki bir resmi web sayfasinin arkasina dösemek için tag'ini asagidaki gibi

<body background=' arka.gif'>

kullanmalisiniz. Bu asamada ARKA.GIF dosyasinin, HTM dosyasi ile ayni klasörde yer almasi gereklidir. Örnek bir resim dösemesi asagidaki resimde gösterilmistir. Bu asamada bir web sayfasinin arka planinda bir resim dösediginizde, arka plan rengi kullanmaya gerek kalmadigi gibi bir hisse kapilirsiniz, yanilirsiniz. Genelde Internet yavas bir sey oldugu için, çogu kullanici sörf yaparken resimleri kapatma yoluna gidiyorlar. Böyle olunca arka plana dösenmis resimler görünmeyecek, arka plan rengi de default olarak gri oldugu için sizin hiç düsünmediginiz bir web sayfasi ortaya çikabilecektir. Bu yüzden size tavsiyemiz, arka plan grafigi kullandiginizda arka planda kullandiginiz resme uygun bir arka plan rengini de <body> tag'inin içinde belirtmenizdir. Iki belirteç bir tag içerisinde kullanilabilir. Ve resmiler kapatildiginda web tarayicisi otomatik olarak belirtilen arka plan rengini web sayfasina uygulayacaktir. Sari içerikli bir arka plan resmi ile kullanilmasi gereken<body> tag'i asagida gösterilmistir.

<body background=' arka.gif' bgcolor='#ffff00'>

Adim 2. Web sayfasinin metin içerigi. Web sayfalarinda aynen kitap veya dergi sayfalarinda oldugu gibi metinler ve resimler kullanilabilir. 2. Adimda web sayfalarinda metinlerin kullanimina deginecegiz. Web sayfalarinda metinler aynen Word veya benzeri bir kelime islemci programda oldugu gibi bold, italik vs.. seklinde formatlanabilir, font tipi, rengi ve boyutu ayarlanabilir. Web sayfasinin içerisine yazdiginiz metin web tarayicisinin genisligi boyunca yazilir, artan kisim otomatik olarak alt satira atilir. Örnegin asagidaki gibi bir metnimiz olsun.

Merhaba. Bu benim ilk web sayfasi denemem. Yazdigim metni bold, italik, veya altçizgili olarak görüntülemek istiyorum.

Bu metni web sayfasina girdiginizde asagidaki gibi bir ekran görüntüsü ile karsilasacaksiniz. Simdi bu metni formatlamaya baslayalim. Öncelikle merhaba kismini büyük yapmak lazim. Bunun için de <hx> tag'ini kullanacagiz. Bu tag'da x yerine birden 6'ya kadar numara verebilirsiniz. 1 en büyük boyut, 6 en küçük boyuttur. Denemeyle sabittir, 1 ile 4 arasinda rakamlar kullanmak en iyisidir. Simdi merhaba yazisini büyütmek için onu <h1> tag'ina alalim.

<h1>Merhaba</h1> Burada, <h1> ile </h1> arasindaki metin, büyültülecektir. Asagidaki resimde merhaba tag'i degisik <hx> boyutlarinda kullanilmistir. Böylece merhaba yazisini istedigimiz gibi büyüttük. <hx> tag'ini kullanirken ögrendigimiz bir ikinci sey ise metin formatlamasinin nasil yapildigi. Demek ki, bir tag'in formatlamasi iki tag arasina (<h1> ile açilis, </h1> ile kapanis) aldigimiz metne uygulaniyor. Simdi hizli bir biçimde diger metin tag'larini inceleyelelim. <b> </b> aradaki metni bold (kalin) yapar <i> </i> aradaki metni italik yapar <u> </u> aradaki metnin altini çizer

Bu tür metin formatlama tag'lari birbirlerinin içinde kullanilabilirler. Örnegin bir metin parçasini hem bold hem de italik yapmak için <b><i> ..... </i></b> formatlamasini kullanmak gerekecektir. Ã�zgün metnimize geri dönelim. Bu metinde adi geçen formatlamalari uyguladigimizda HTML sayfamizdaki metin asagidaki gibi olacaktir. <h1>Merhaba. </h1>Bu benim ilk web sayfasi denemem. Yazdigim metni <b>bold</b>, <i>italik</i>, veya <u>altçizgili</u> olarak görüntülemek istiyorum. Böyle bir formatlama yapildiginda elde edilecek olan web sayfasi görüntüsü asagidaki gibidir. Metin parçalarini web sayfasinda görüntülerken paragraf basi ve satir sonunu da elle isaretlemek zorundasiniz yoksa metin otomatik olarak alta kaydirilacaktir. Burada karsimiza iki adet tag çikiyor. Bunlardan birincisi <br>, ikincisi de <p> tag'i. Birincisi satir sonu, ikincisi ise paragraf basi anlamina geliyor. Söz konusu metinde ' Bu benim ilk web sayfasi denemem' yazisindan sonra bir satir sonu yani <enter> verelim. Ayrica paragraf basini denemek için de ' bold, italik, veya altçizgili' metnini yeni bir paragraftan baslatalim. Bu durumda kullanacagimiz formatlama asagidaki gibi olacaktir. <h1>Merhaba. </h1>Bu benim ilk web sayfasi denemem. <br>Yazdigim metni <p><b>bold</b>, <i>italik</i>, veya <u>altçizgili</u> <p>olarak görüntülemek istiyorum.Dikkat ederseniz, <p> yani paragraf basi tag'inin kullanildigi yerlerde <br> yani satir sonu kullanmiyoruz. Çünkü paragraf basi tag'i zaten satir sonunu da belirlemektedir. Yukaridaki örnekte kullanilan tag'lamanin ekranda gösterecegi sonuç asagidadir. Son olarak HTML sayfalarinda enter tusunu kullanmanin web sayfasinin görünümüne bir etkisi olmadigini söyleyelim. Web sayfalarinin ekranda görünümünde satir sonlari, satir aralari ve paragraf baslari tamamen tag'lar ile belirlenir. Bu yüzden metin dosyasinda enter kullanmanin web sayfasina herhangi bir etkisi yoktur. Ancak web sayfasini düzenlerken her seyin derli toplu gözükebilmesi için bu tür bir enter'lama yapabilirsiniz. Gelecek sayimizda metin formatlarken renk ve font kullanmayi, <pre> tag'inin ne ise yaradigini, metinlerin bir liste halinde nasil alt alta siralanacagini görecek ve web sayfalarinda resim kullanimina giris yapacagiz.

Yazarin izni ile http://draskin.150m.com sitesinden alinmistir

No comments: