İNSANIN dünyada bir mekanı ve World Wide Web'de
benim diyeceği, küçük de olsa bir alanı olmalı. Bunu sağlamak için iki
seçeneğiniz var. Bunlardan birincisi başka birine (muhtemelen bir ISS'ye ait) Web
sunucusundan belirli bir sabit disk alanı kiralamak. Türkiye'deki servis sağlayıcılar
bu tür hizmetler veriyor. Hatta bazı ISS'lerde Internet hesabı açtırdığınızda
size küçük de olsa ücretsiz bir Web sayfası alanı sağlıyorlar. Ama
hazırlayacağınız Web sayfalarını ticari amaçlarla kullanacaksanız, örneğin
firmanızın ürünlerini Web sayfalarınızda tanıtmak ve pazarlamak istiyorsanız
belirli bir ücret ödemek zorundasınız.İkinci seçenek yine genelde firmalara
yönelik. Yani, Türk Telekom'a başvurup bir kiralık hat (leased line) aracılığı ile
Web sayfalarınızı kendi Web sunucunuz üzerinden yayınlamak veya Web sunucunuzu bir
ISS'ye yerleştirip buradan yayın yapmak. Kuşkusuz bu seçenekler içinde bir ISS'nin
sunucusundan - kiraladığınız yerin MB cinsinden büyüklüğüne göre ücret
ödeyerek - yer kiralamak en ucuzu. Bunun karşılığında Web sayfalarınıza
karşılık gelecek bir Web adresi (URL) ediniyorsunuz. Bu adres ISS'nizin ismi ile
başlayıp kendi sitenizin ismi ile devam edebileceği gibi (örneğin
http://www.iss.com.tr/benimsitem), ISS'nizle yaptığınız anlaşmaya göre tamamen
kendi verdiğiniz isim de olabilir (örneğin http://www.benimsitem.com.tr).
Elbette ISS'ler belirli bir ücret karşılığı Web sayfalarınızı
tasarlayabilirler, ancak burada amacımız kendi Web sayfalarınızı tasarlamayı
öğretmek olduğuna göre sayfalarınızı kendinizin tasarlayacağınızı ve ISS'nizin
sunucusuna yaptığınız anlaşmaya göre belirli zamanlarda modem ile ' upload'
edeceğinizi varsayıyoruz. Buraya kadar ticari anlamda bir Web sitesi kurmak için neler
yapabileceğinizi açıkladık, ancak yazımız daha çok amatörlere yönelik olduğu
için size ücretsiz alternatiflerden haberdar etmek de boynumuzun borcu. Türkiye'de
bazı ISS'lerin Internet erişimi için hesap açtırdığınızda size ücretsiz bir Web
sayfası alanı sağladıklarını söylemiştik. Yurtdışında hesabı olsun olmasın
herkese Web sayfalarını yayınlamak için ücretsiz belirli bir alan açan ISS'ler de
var.
Örneğin ABD'de faaliyet gösteren Geocities (http://www.geocities.com/homestead/)
herkese 2MB'lık bir Web sayfası alanı açıyor. Internet'te sörf yaparken kuşkusuz bu
tür başka promosyonlarla da karşılaşabilirsiniz. Hazırladığınız sayfaları bir
FTP client programı ile (örneğin ws_ftp) bu sitelere ' upload' edebiliyorsunuz. Yine de
bu hizmetin sürekliliği konusunda emin olamazsınız. Bu yüzden Web sunucusunda yer
açan bir ISS bulmanızı öneririz.
WEB SAYFASI TASARIMIN TEMELLERİ
EVET, nihayet bir Web sunucusunda kendinize ait bir alan elde ettiniz ve Web
aracılığı ile başkalarına söyleyecek çok şeyiniz var. Peki bir Web sayfasını
tasarlamaya nereden başlamalı? Öğrenmeniz gereken temel dilin HTML (Hypertext Mark-up
Language) olduğunu belirtmiştik. Bu dil aslında, normal metni, hypertext adı verilen
ve web browser'larla görüntülenmeye uygun metin haline dönüştüren bir kodlar
silsilesi. Diğer bir deyişle HTML, basit bir belgeyi alıp içine bu belgenin sayfa
düzeni ve metin biçimleri ile ilgili bilgiler yerleştirmenin ve bu belgeyi diğer metin
(ve/veya grafik) içerikli belgelerle ilişkilendirmenin yoludur.
Web'de yayınlanmak üzere belgeler hazırlarken, HTML kodları ile metinlerinize
vereceğiniz biçimler belirteç (İngilizce adı ile mark-up veya tag) adını taşır.
Bunlar metnin çeşitli yerlerinde, ' <' ve '>' şeklindeki parantezlerin arasına
yerleştirilen kodlardır. Bunlar arasında diğer Internet sayfalarına (veya URL'lere)
geçişi sağlayan ‘link'ler de bulunabilir.HTML bir dil olarak adlandırılsa da, HTML
belgelerinin (kısaca Web sayfalarının) hazırlanması klasik bilgisayar dilleri ile
programlama yapmaya pek benzemez. Daha çok kelime işlemcilerle çalışmaya benzer.
Ancak burada yazıtipi büyüklüğünü ayarlamak, bir metni kalın veya italik yapmak
için menü komutlarını kullanmaz, bunları metnin başına ve sonuna koyduğunuz
kodlarla belirlersiniz. (WordPerfect ile çalışanlar bunu kolayca anlayacaktır,
çünkü bu kelime işlemcide yazdığınız metinlerin biçim kodlarını da Reveal Codes
komutu ile görüntüleyebilirsiniz.) Metni ve bu kodları nerede yazacağız diyorsanız,
başlangıçta (hatta PC Magazine Online'nın webmaster'larına sorarsanız her zaman)
Windows'un Not Defteri fazlasıyla yeterli olacaktır.
Bu kısa girişten sonra bir örnek ile HTML kodlarını kullanmaya başlayalım.
Diyelim ki elimizde şöyle bir metin var:
Düşünde bile göremez işler,
Düşlerin gördüğü işleri.
Bu metni HTML kodları ile şöyle yazarsak:
<B>Düşünde</B> bile göremez,
<B>işler</B>,<BR><B>Düşlerin</B>
gördüğü <B>işleri</B>.<BR>
Web browser'da aşağıdaki gibi bir görüntü elde ederiz:
Düşünde bile göremez işler,
Düşlerin gördüğü işleri.
Bu örnekte <B> ve </B> belirteçleri Web browser'a aralarındaki metni
kalın (bold) göstermesini söyler. <BR> belirteci ise satır başı verilmesi
gerektiğini. Bunlar gibi başka pek çok belirteç var ama güzel bir Web sayfası
tasarlamak için başlangıçta öğrenmeniz gereken belirteç sayısı 30-40 kadardır.
Profesyonelleştikçe yeni belirteçler kullanmaya başlayabilirsiniz.
Bir de yazdıklarınızın düzgün görünmesi için her html dosyasının
başında:<html> <head> <title> </title>
</head><body>
sonunda:
</body></html>
belirteçlerinin bulunmasına dikkat edin. Bunlar sayfanın başını sonunu belirlemek
için gerekli belirteçlerdir. Koymazsanız, Web browser'ınızda metin belirteçleri ile
birlikte görünebilir.Bu örnekteki belirteçleri kendiniz denemek istiyorsanız, Not
Defteri'ne istediğiniz metni bu belirteçleri kullanarak girin. Belgeye bir isim ve htm
soyadını (Windows 95'te html soyadını da kullanabilirsiniz) vererek kaydedin.
Sisteminize bir Web browser yüklü ise htm soyadlı bu belgenin üzerine çift
tıkladığınızda browser açılacak ve metniniz biçimlendirilmiş haliyle ekrana
geelcek.
HAYDİ BİR WEB SAYFASI YAPALIM
HTML dilini öğrenmenin en kolay yolu, deneme yanılma ile web sayfaları
hazırlayarak bu sayfaları web tarayıcısı ile kontrol etmek, hataları düzelterek
ilerlemektir. Ayrıca bilmediğiniz kodların nasıl kullanıldığını öğrenmek için
Internet bağlantınız varsa varolan HTML sayfalarını web tarayıcınızın kaydetme
seçeneğini kullanarak sabit diske kaydedip herhangi bir metin editörü kullanarak
açıp inceleyebilirsiniz. Şimdi adım adım bir web sayfası hazırlayalım. Adım 1.
Pencere Başlığının, arka planın belirlenmesi ve renkler. Her web sayfasının
bir başlığı olmalıdır. Bu başlık web tarayıcısının başlık çubuğunda
görüntülenecektir. Bu iş için <title> tag'ı kullanılır.
<title> ve </title>
tag'ları arasına yazacağınız metin web sayfasının başlığı olarak
görüntülenecektir. <title> tag'ı aşağıdaki gibi kullanılır.
<title>Bu benim ilk denemem!</title>Web sayfalarının arka planını
da istediğiniz gibi ayarlayabilirsiniz. Bu aşamada iki adet seçeneğiniz var. Birincisi
boş bir arka plan kullanarak bu arka planın rengini ayarlamak, ikincisi ise bir resim
dosyasındaki resmi alıp web sayfasının arka planına ' döşemek'. Bu işlemi aynen
Windows 95'in masaüstündeki duvar kağıdına benzetebiliriz. Önce boş bir arka planı
renklendirmeyi görelim. Web sayfasının arka planının rengi <body> tag'ını
kullanarak değiştirilir. Default arka plan rengi gridir. Arka plan rengini örneğin
beyaz yapmak için body tag'ını
<body bgcolor='white'>veya <body bgcolor='#FFFFFF'>
şeklinde kullanabilirsiniz. Birinci seçenekte rengin İngilizce ismi, ikinci
seçenekte ise aynı rengin RGB cinsinden renk kodu hexadecimal (onaltılı sayı sistemi)
olarak verilmektedir. Eski tarihli browser'lar renk isimlerini algılayamazlar, bu yüzden
sayfalarınızda renklerin onaltılı sayı sistemi kodlarını kullanmak daha
hayırlıdır. Yan tarafta gördüğünüz tabloda, web sayfalarının arka planlarında
kullanılabilecek olan temel renkler isim ve sayı kodu olarak listelenmiştir. Onaltılı
sayıların RGB kombinasyonları ile oynayarak istediğiniz rengi web sayfası arka plan
rengi olarak belirleyebilirsiniz.
Bir Web sayfasının arka planına bir resim döşeyebilirsiniz. Bu işlem için ilk
önce elinizde bir resim dosyası olması gerekir. Web sayfalarında kullanılabilecek
bütün resimler JPG veya GIF formatında olmalıdır. Web okulunu hazırlarken elinizde
bir resim düzenleme programının olduğunu ve JPG veya GIF formatındaki dosyalarla
çalışmayı bildiğinizi varsayıyoruz. Örneğin elimizde arka.gif diye bir resim
olsun. Bu resmi web sayfasının arka planına döşemek için yine <body>
tag'ını kullanacağız. ARKA.GIF adındaki bir resmi web sayfasının arkasına
döşemek için <body> tag'ını aşağıdaki gibi
<body background=' arka.gif'>
kullanmalısınız. Bu aşamada ARKA.GIF dosyasının, HTM dosyası ile aynı klasörde
yer alması gereklidir. Örnek bir resim döşemesi aşağıdaki resimde gösterilmiştir.
Bu aşamada bir web sayfasının arka planında bir resim döşediğinizde, arka plan
rengi kullanmaya gerek kalmadığı gibi bir hisse kapılırsınız, yanılırsınız.
Genelde Internet yavaş bir şey olduğu için, çoğu kullanıcı sörf yaparken
resimleri kapatma yoluna gidiyorlar. Böyle olunca arka plana döşenmiş resimler
görünmeyecek, arka plan rengi de default olarak gri olduğu için sizin hiç
düşünmediğiniz bir web sayfası ortaya çıkabilecektir. Bu yüzden size tavsiyemiz,
arka plan grafiği kullandığınızda arka planda kullandığınız resme uygun bir arka
plan rengini de <body> tag'ının içinde belirtmenizdir. İki belirteç bir tag
içerisinde kullanılabilir. Ve resmiler kapatıldığında web tarayıcısı otomatik
olarak belirtilen arka plan rengini web sayfasına uygulayacaktır. Sarı içerikli bir
arka plan resmi ile kullanılması gereken <body> tag'ı aşağıda
gösterilmiştir.
<body background=' arka.gif' bgcolor='#ffff00'>
Adım 2. Web sayfasının metin içeriği. Web sayfalarında aynen kitap veya
dergi sayfalarında olduğu gibi metinler ve resimler kullanılabilir. 2. Adımda web
sayfalarında metinlerin kullanımına değineceğiz. Web sayfalarında metinler aynen
Word veya benzeri bir kelime işlemci programda olduğu gibi bold, italik vs.. şeklinde
formatlanabilir, font tipi, rengi ve boyutu ayarlanabilir. Web sayfasının içerisine
yazdığınız metin web tarayıcısının genişliği boyunca yazılır, artan kısım
otomatik olarak alt satıra atılır. Örneğin aşağıdaki gibi bir metnimiz olsun.
Merhaba. Bu benim ilk web sayfası denemem. Yazdığım metni bold, italik, veya
altçizgili olarak görüntülemek istiyorum.
Bu metni web sayfasına girdiğinizde aşağıdaki gibi bir ekran görüntüsü ile
karşılaşacaksınız. Şimdi bu metni formatlamaya başlayalım. Öncelikle merhaba
kısmını büyük yapmak lazım. Bunun için de <hx> tag'ını kullanacağız.
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 arasında rakamlar kullanmak en iyisidir.
Şimdi merhaba yazısını büyütmek için onu <h1> tag'ına alalım.
<h1>Merhaba</h1>
Burada, <h1> ile </h1> arasındaki metin, büyültülecektir.
Aşağıdaki resimde merhaba tag'ı değişik <hx> boyutlarında
kullanılmıştır. Böylece merhaba yazısını istediğimiz gibi büyüttük.
<hx> tag'ını kullanırken öğrendiğimiz bir ikinci şey ise metin
formatlamasının nasıl yapıldığı. Demek ki, bir tag'ın formatlaması iki tag
arasına (<h1> ile açılış, </h1> ile kapanış) aldığımız metne
uygulanıyor. Şimdi hızlı bir biçimde diğer metin tag'larını inceleyelelim.
<b> </b> aradaki metni bold (kalın) yapar
<i> </i> aradaki metni italik yapar
<u> </u> aradaki metnin altını çizer
Bu tür metin formatlama tag'ları birbirlerinin içinde kullanılabilirler. Örneğin
bir metin parçasını hem bold hem de italik yapmak için <b><i> .....
</i></b>
formatlamasını kullanmak gerekecektir. Özgün metnimize geri dönelim. Bu metinde
adı geçen formatlamaları uyguladığımızda HTML sayfamızdaki metin aşağıdaki gibi
olacaktır.
<h1>Merhaba. </h1>Bu benim ilk web sayfası denemem. Yazdığım
metni <b>bold</b>, <i>italik</i>, veya
<u>altçizgili</u> olarak görüntülemek istiyorum.
Böyle bir formatlama yapıldığında elde edilecek olan web sayfası görüntüsü
aşağıdaki gibidir. Metin parçalarını web sayfasında görüntülerken paragraf
başı ve satır sonunu da elle işaretlemek zorundasınız yoksa metin otomatik olarak
alta kaydırılacaktır. Burada karşımıza iki adet tag çıkıyor. Bunlardan birincisi
<br>, ikincisi de <p> tag'ı. Birincisi satır sonu, ikincisi ise
paragraf başı anlamına geliyor. Söz konusu metinde ' Bu benim ilk web sayfası
denemem' yazısından sonra bir satır sonu yani <enter> verelim. Ayrıca
paragraf başını denemek için de ' bold, italik, veya altçizgili' metnini yeni bir
paragraftan başlatalım. Bu durumda kullanacağımız formatlama aşağıdaki gibi
olacaktır. <h1>Merhaba. </h1>Bu benim ilk web sayfası denemem.
<br>Yazdığım 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 başı tag'ının kullanıldığı yerlerde <br> yani satır sonu
kullanmıyoruz. Çünkü paragraf başı tag'ı zaten satır sonunu da belirlemektedir.
Yukarıdaki örnekte kullanılan tag'lamanın ekranda göstereceği sonuç aşağıdadır.
Son olarak HTML sayfalarında enter tuşunu kullanmanın web sayfasının görünümüne
bir etkisi olmadığını söyleyelim. Web sayfalarının ekranda görünümünde satır
sonları, satır araları ve paragraf başları tamamen tag'lar ile belirlenir. Bu yüzden
metin dosyasında enter kullanmanın web sayfasına herhangi bir etkisi yoktur. Ancak web
sayfasını düzenlerken her şeyin derli toplu gözükebilmesi için bu tür bir
enter'lama yapabilirsiniz.