NTERNET PROGRAMCILIĞI – I

İNTERNET PROGRAMCILIĞI – I A.UYAR 

İNTERNET PROGRAMCILIĞI – I 

Yazarı 

Yrd. Doç. Dr. Ahmet Uyar 

MERSİN 

2009 

I


İÇİNDEKİLER 

Bölüm 1 ........................................................................................... 1 

TEMEL İNTERNET KAVRAMLARI ....................................... 1 

1.1 Amaç .................................................................................................................... 1 

1.2 İnternet Nedir ....................................................................................................... 1 

1.3 İnternet’in Kısa Tarihçesi..................................................................................... 1 

1.4 İnternet’in Yapısı.................................................................................................. 2 

1.5 Paket anahtarlaması.............................................................................................. 4 

1.6 IP Adresleri .......................................................................................................... 4 

1.7 Routerlar ve Paket İletimi .................................................................................... 5 

1.8 Alan İsimleri ve Alan Sunucuları......................................................................... 6 

1.9 Güvenilir İletişim: TCP protokolü ....................................................................... 8 

1.10 TCP Portları...................................................................................................... 9 

1.11 Telnet ve TCP Uygulaması............................................................................... 9 

1.12 Windows Vista’da Telnet Kurulumu.............................................................. 10 

1.13 İstemci-Sunucu Sistemleri.............................................................................. 11 

1.14 HTTP protokolü.............................................................................................. 11 

1.15 Web Tarayıcısı Çalışma Şekli ........................................................................ 14 

1.16 Referanslar...................................................................................................... 14 

Bölüm 2 ......................................................................................... 16 

WEB TASARIMINA GİRİŞ ...................................................... 16 

2.1 Amaç .................................................................................................................. 16 

2.2 Giriş.................................................................................................................... 16 

2.3 Web Sunucuları.................................................................................................. 17 

2.4 Statik IP Adresleri ve Alan Adları ..................................................................... 18 

2.5 Apache Web Sunucusu....................................................................................... 19 

2.6 Apache Web Sunucusu Kurulum Programı İndirme.......................................... 19 

2.7 Apache Web Sunucusu Kurulumu ..................................................................... 20 

2.8 Apache Web Sunucusu Kurulum Kontrolü........................................................ 24 

2.9 Apache Web Sunucusu Durdurma ve Başlatma ................................................ 25 

2.10 Apache Web Sunucusuna Sayfa Yükleme ..................................................... 25 

2.11 Apache Sunucusu Konfigürasyonu ................................................................ 28 

2.12 MS-IIS (İnternet Information Services) Sunucusu Kurulumu ....................... 28 

2.13 PSPad Editörü................................................................................................. 29 

2.14 Referanslar...................................................................................................... 30 

Bölüm 3 ......................................................................................... 31 

HTML ........................................................................................... 31 

3.1 Amaç .................................................................................................................. 31 

3.2 Giriş.................................................................................................................... 31 

3.3 Web Tarayıcıları................................................................................................. 32 

3.4 HTML ile basit bir web sayfası oluşturma......................................................... 32 

3.5 Web sayfası belgelerinin uzantıları.................................................................... 35 

3.6 Web tarayıcısı ile Web sayfası kaynak kodu görüntüleme ................................ 35 

II


3.7 HTML imleri...................................................................................................... 36 

3.8 HTML Elemanları.............................................................................................. 36 

3.9 HTML Belgesi Baş kısmı................................................................................... 37 

3.10 HTML Metin Biçimlendirme Elemanları....................................................... 37 

3.11 HTML Elemanları Öznitelikleri ..................................................................... 40 

3.12 Web Sayfası Arka Plan Rengi Ayarlama ....................................................... 41 

3.13 HTML Dilinde Renk Gösterimi ..................................................................... 42 

3.14 Özel Karakterler ............................................................................................. 44 

3.15 Bağlantılar ...................................................................................................... 46 

3.16 Bağlantılar Üzerinde Metin Gösterme............................................................ 48 

3.17 Bir web sayfanın alt bölümlerine bağlantı oluşturma..................................... 48 

3.18 Göreli Bağlantılar ........................................................................................... 51 

3.19 Referanslar...................................................................................................... 54 

Bölüm 4 ......................................................................................... 55 

GÖRÜNTÜLER........................................................................... 55 

4.1 Amaç .................................................................................................................. 55 

4.2 Giriş.................................................................................................................... 55 

4.3 Görüntülerin Bilgisayarlarda Kaydedilmeleri.................................................... 56 

4.4 BMP, GIF, PNG ve JPEG Dosya Tipleri........................................................... 57 

4.2.1 BMP Dosya tipi........................................................................................... 57 

4.2.2 GIF Dosya tipi............................................................................................. 57 

4.2.3 PNG Dosya tipi........................................................................................... 57 

4.2.4 JPEG Dosya Tipi......................................................................................... 59 

4.5 HTML ile Görüntü Sunumu............................................................................... 60 

4.6 Resim Boyu ve Resim Etrafında Metin Görüntüleme ....................................... 63 

4.7 Tampon Boşluk: hspace ve vspace ............................................................. 64 

4.8 Görüntülerin Düğme Olarak Kullanılması......................................................... 66 

4.9 Görüntüler Üzerinde Tıklanabilir Bölgeler........................................................ 67 

4.10 Arka Plan Olarak Görüntü Kullanma ............................................................. 70 

4.11 Referanslar...................................................................................................... 72 

Bölüm 5 ......................................................................................... 74 

LİSTELER VE TABLOLAR ..................................................... 74 

5.1 Amaç .................................................................................................................. 74 

5.2 Liste Çeşitleri ..................................................................................................... 74 

5.3 Sıralı Listeler...................................................................................................... 75 

5.4 Sırasız Listeler.................................................................................................... 77 

5.5 Tanım Listeleri ................................................................................................... 79 

5.6 Tablolar .............................................................................................................. 80 

5.5.1 Birleşik Satırlar ve Şutunlar: rowspan ve colspan öznitelikleri.................. 82 

5.5.2 Tablo Arka Plan Rengi Ayarlama: bgcolor özniteliği............................ 85 

5.5.3 Hücreler Arasındaki Mesafeleri Ayarlama: cellspacing ve 

cellpadding ........................................................................................................ 88 

5.5.4 Tablo Boyu ve Metin Pozisyonu Ayarlama: width, height, align 

ve valign.............................................................................................................. 91 

5.5.5 Web Sayfası Tasarımı İçin Tablo Kullanımı .............................................. 94 

III


5.5.6 Tablolarla Başlık, Menü ve Gövde Tipi Web Sayfası Tasarımı................. 96 

5.7 Özetle ................................................................................................................. 99 

5.8 Referanslar ......................................................................................................... 99 

Bölüm 6 ....................................................................................... 100 

BASAMAKLI STİL SAYFALARI (CSS)............................... 100 

6.1 Amaç ................................................................................................................ 100 

6.2 Giriş.................................................................................................................. 100 

6.3 Mantıksal ve Fiziksel Düzenleme .................................................................... 100 

6.4 İlk CSS Örneği ................................................................................................. 101 

6.5 CSS ile Arka Plan Rengi Ayarlama ................................................................. 104 

6.6 CSS ile Metin Fontu Ayarlama ........................................................................ 106 

6.7 HTML Elemanları id özniteliği ...................................................................... 110 

6.8 HTML elemanları class özniteliği................................................................ 112 

6.9 HTML imi......................................................................................... 116 

6.10 HTML elemanları style özniteliği ve imi.................................... 118 

6.11 Harici Stil Sayfaları Kullanarak Bir Sayfaya Stil Eklemek.......................... 120 

6.12 Bir Grup HTML Elemanı İçin Stil kuralı Yazma......................................... 123 

6.13 Bir HTML Elemanını Çok Sınıfa Dâhil Etme.............................................. 123 

6.14 Web Sayfası Tasarımı İçin CSS Kullanımı .................................................. 124 

6.15 CSS Kullanarak Web Sayfasını Farklı Alt Bölgelere Ayırma ..................... 128 

6.16 Özet............................................................................................................... 132 

6.17 CSS ile ilgili Faydalanılabilecek Kaynaklar................................................. 133 

6.18 Referanslar.................................................................................................... 133 

Bölüm 7 ....................................................................................... 135 

JAVASCRİPT ............................................................................ 135 

7.1 Amaç ................................................................................................................ 135 

7.2 Giriş.................................................................................................................. 135 

7.3 Sunucu ve İstemci Tarafı Programlama........................................................... 136 

7.4 JavaScript ve VBScript .................................................................................... 136 

7.5 JavaScript ve Java ............................................................................................ 136 

7.6 Betik Dilleri...................................................................................................... 137 

7.7 İlk JavaScript Örneği: imi............................................................ 137 

7.8 Değişkenler....................................................................................................... 139 

7.9 Stringler............................................................................................................ 141 

7.10 Karar Yapıları: if, else, else if....................................................................... 143 

7.11 JavaScript dilinde Açıklamalar..................................................................... 145 

7.12 Fonksiyonlar ................................................................................................. 145 

7.13 Küçük Pencereler: alert(), confirm(), prompt().......................... 148 

7.14 JavaScript ile Tablo Oluşturma .................................................................... 153 

7.15 Döngüler ....................................................................................................... 155 

7.16 Harici JavaScript Dosyası Kullanma............................................................ 157 

7.17 Diziler ........................................................................................................... 158 

7.18 Özetle............................................................................................................ 161 

7.19 JavaScript ile İlgili Bazı Kaynaklar.............................................................. 162 

7.20 Referanslar.................................................................................................... 162 

IV


Bölüm 8 ....................................................................................... 164 

MULTİMEDYA......................................................................... 164 

8.1 Amaç ................................................................................................................ 164 

8.2 Giriş.................................................................................................................. 164 

8.3 Dijital Sesin Temelleri ..................................................................................... 164 

8.4 Sesin Kaydedilmesi.......................................................................................... 166 

8.5 Sesin Sıkıştırılması........................................................................................... 167 

8.6 Ses Dosyalarının Web Sayfalarına Konulması ................................................ 169 

8.7 Midi Melodi Dosyaları ve Arka Plan Sesi ....................................................... 170 

8.8 Video Kaydetme............................................................................................... 172 

8.9 Video Dosyalarının Web Sayfasında Sunumu................................................. 174 

8.10 Başka Sitelerdeki Videoların Web Sayfasına Yerleştirilmesi ...................... 175 

8.11 Flash Videosu Oluşturma ve Web Sayfasına Yerleştirme............................ 178 

8.12 Referanslar.................................................................................................... 182 

Bölüm 9 ....................................................................................... 183 

WEB SAYFASI TASARIMI VE EDİTÖR KULLANIMI.... 183 

9.1 Amaç ................................................................................................................ 183 

9.2 Giriş.................................................................................................................. 183 

9.3 Web Sayfası Tasarımı Prensipleri.................................................................... 183 

9.4 HTML Editörleri .............................................................................................. 185 

9.2.1 HTML Metin Editörü................................................................................ 185 

9.2.2 WYSIWYG Editörü.................................................................................. 185 

9.5 HTML Editörü Programları ............................................................................. 186 

9.6 Adobe Dreamweaver CS4................................................................................ 186 

9.7 Dreamweaver CS4 ile bir Sayfa Oluşturma ..................................................... 186 

9.8 Dreamweaver ile Sayfaya Başlık, Paragraf ve Liste Ekleme........................... 189 

9.9 Arka Plan Rengi Ayarlama .............................................................................. 191 

9.10 Sayfa Marginini Ayarlama ........................................................................... 192 

9.11 Metin Font Özellikleri Ayarlama ................................................................. 194 

9.12 Bağlantı Oluşturma....................................................................................... 197 

9.13 Sayfaya Görüntü Ekleme.............................................................................. 199 

9.14 Tablo İşlemleri.............................................................................................. 206 

9.15 Site Oluşturma .............................................................................................. 209 

9.16 Şablon Oluşturma ......................................................................................... 211 

9.17 Şablona Göre Sayfa Oluşturma .................................................................... 214 

9.18 Özetle............................................................................................................ 216 

9.19 Referanslar.................................................................................................... 216 

V


DERSİN AMACI 

Bu dersimizde hedefimiz, öğrencilerimizin web sayfası tasarım teknolojilerinin 

temellerini öğrenmesi ve web sayfası tasarımı yapabilmeleridir. Bu amaçla öncelikle 

İnternet ve Web ile ilgili temel kavramlar birimci bölümde işlenmiştir. Bu bölümde 

öğrencilerimizin İnternet’in yapısı ve çalışma prensipleri hakkında temel bilgilerle 

donanmaları hedeflenmiştir. İkinci bölümde, web tarayıcıları ve sunucuları kavramları 

işlenmiş, bu programların kurulum ve çalışma prensipleri açıklanmıştır. 

Üçüncü bölümde HTML diline giriş yapılmış, öğrencilerin bu dilin ana 

özelliklerini ve kullanma şeklini öğrenmeleri hedeflenmiştir. Dördüncü bölümde, görüntü 

dosyalarının temelleri anlatılmış, sıkıştırma algoritmaları işlenmiş ve bu dosyaların web 

sayfaları içinde kullanılmasının öğrenilmesi hedeflenmiştir. Beşinci bölümde web 

sayfalarında liste ve tablo kullanımı anlatılmış, öğrencilerimizin düzenli verileri web 

sayfalarında liste ve tablo halinde sunmayı öğrenmeleri hedeflenmiştir. Ayrıca web 

sayfası tasarımında tablo kullanımı anlatılmış, web sayfası tasarımının temellerinin 

öğrenilmesi hedeflenmiştir. 

Altıncı bölümde CSS metin düzenleme dili anlatılmıştır. Bu dilin ana özellikleri 

işlenmiş, web sayfası içinde HTML ile birlikte nasıl kullanılacağı örneklerle anlatılmıştır. 

Bu dilin sağladığı avantajlar ve kullanım alanları açıklanmıştır. Öğrencilerin bu dilin ana 

özelliklerini öğrenmeleri ve web sayfası içinde bu dili kullanabilmeleri hedeflenmiştir. 

Yedinici bölümde JavaScript dili işlenmiş, bu dilin nasıl çalıştığı ve hangi 

durumlarda kullanılması gerektiği anlatılmıştır. Bu dilin temel kuralları işlenmiş, bu dil 

ile yapılabilecek programlara örnekler verilmiştir. Öğrencilerin bu dil ile yazılan 

kütüphane fonksiyonlarını kullanabilme becerilerinin geliştirilmesi hedeflenmiştir. 

Sekizinci bölümde web sayfalarında multimedya kullanımı işlenmiştir. Dijital 

sesin ve videonun temelleri anlatılmış, web sayfalarına ses ve video koymanın farklı 

metodları gösterilmiştir. 

Dokuzuncu ve son bölümde ise web sayfası geliştirmek için editör kullanımı 

üzerinde durulmuştur. Web sayfası geliştirme editörlerinden Adobe Dreamweaver CS4 

editörünün, web sayfası geliştirmek için nasıl kullanılacağı işlenmiştir. 

VI


Bölüm 1 

TEMEL İNTERNET KAVRAMLARI 

1.1 Amaç 

Bu bölümde amacımız, İnternet’in ve Web’in ne olduğunun ve nasıl çalıştığının 

anlaşılmasıdır. Ayrıca İnternet ile Web arasındaki farkların öğrenilmesidir. Bu amaçla, 

öncelikle İnternet’in ne olduğu ve tarihçesi kısaca açıklanmıştır. Sonra İnternet’in yapısı 

ve çalışma şekli anlatılmıştır. Bu bağlamda paket iletiminin çalışma şekli ve IP protokolü 

işlenmiştir. Router’lar ve DNS sistemi açıklanmıştır. Daha sonra güvenilir paket iletimi 

için TCP protokolü ve TCP portları anlatılmıştır. Son kısımda ise Web sisteminin transfer 

mekanizmasını oluşturan http protokolü işlenmiş, web sunucuları ile web tarayıcılarının 

çalışma şekli anlatılmıştır. 

1.2 İnternet Nedir 

İnternet[1] dünya üzerindeki çok sayıdaki bilgisayar ağının birbirine 

bağlanmasından oluşan küresel bir bilgisayar ağıdır. Bu ağ dünya üzerindeki birçok 

akademik, ticari ve devlet kurumlarının yerel ağlarının birbirine bağlanmasından oluşur. 

Bu küresel ağ vasıtasıyla değişik kurumlardaki ve coğrafyalardaki bilgisayarlar 

birbirleriyle haberleşir ve aralarında bilgi alışverişi yaparlar. Şu anda İnternet birçok 

farklı alanda dünya genelinde birbuçuk milyardan fazla insan [2] tarafından yaygın olarak 

kullanılmaktadır. 

1.3 İnternet’in Kısa Tarihçesi 

Modern anlamdaki ilk bilgisayar 1946 senesinde ABD'de yapımı tamamlanan 

ENIAC[3] olarak kabul edilir. Onu izleyen yıllarda bilgisayar üretimi ve kullanımı arttı. 

O yıllarda bu bilgisayarlar daha çok askeri ve araştırma amaçlı kullanılmaktaydı. 

1


Bilgisayarların sayısı artıp coğrafi olarak uzak yerlerdeki araştırmacıların bilgi paylaşımı 

ihtiyacı doğunca, aradaki iletişimi daha hızlı ve etkin hale getirmek için uzak yerlerdeki 

bilgisayarları birbirine bağlama ihtiyacı doğdu. Bu şekilde farklı coğrafi bölgelerdeki 

bilgisayarları birbirine bağlayarak oluşturulan ilk bilgisayar ağı ARPANET'dir [4]. 

ARPANET İnternet’in atası olarak kabul edilir. ARPANET bilgisayar ağı 1969 yılında 

ABD'deki dört araştırma laboratuarındaki bilgisayarların birbirine bağlanmasıyla 

oluşturuldu. Bu ağ telefon sisteminde kullanılan devre anahtarlaması tekniği yerine paket 

anahtarlaması tekniğini kullanarak şu anki İnternet’in temellerini oluşturdu. ARPANET 

ağı ABD savunma bakanlığı tarafından desteklenen bir oluşumdu. Onun için gelişimi 

daha çok askeri ve araştırma laboratuarlarıyla sınırlı kaldı. Fakat ARPANET'in öncülük 

ettiği yöntemler ve teknolojilerin benzerleri kullanılarak başka ağlar kuruldu. Örneğin 

İngiltere’de 1983 yılında bu ülkedeki akademik kuruluşları birbirine bağlamak amacıyla 

JANET [5] ağı kuruldu. Fakat kurulan ağlardan en önemlisi 1986 yılında ABD'deki 

üniversitelerdeki süper bilgisayarları birbirine bağlamak amacıyla oluşturulan NSFNET 

[6] bilgisayar ağı oldu. Bu ağ üniversiteler arasındaki iletişim için etkin bir ortam 

oluşturdu ve çok kısa zamanda hızla yayıldı. NSFNET sağlamış olduğu etkin ve hızlı 

bilgi paylaşımı dolayısıyla özel sektöre ve dünyanın diğer yerlerindeki kurumlara örnek 

oldu. Böylece ilerleyen yıllarda birçok ülkede bu tür ağlar kurulmaya başlandı. Ayrıca 

büyük ölçekli özel sektör firmaları da kendi ağlarını oluşturdular. İşte dünya geneline 

yayılmış olan bu akademik, devlet ve ticari ağların birbirine bağlanmasıyla da bugünkü 

İnternet dediğimiz global ağ oluşmuş oldu. Bütün bu ağların birbirleriyle bilgi alışverişi 

yapabilmeleri için gereken ortak dil de TCP/IP protokolü oldu. Bu ortak dilin yerleşmesi 

ve bilgisayar fiyatlarının düşüp, kullanımın yaygınlaşmasıyla İnternet hızla büyüdü, 

gelişti ve yaygınlaştı. 

Bilgisayar ağları ilk zamanlar daha çok elektronik dosya paylaşımı (ftp) ve eposta 

için kullanılmaktaydı. 1990'larin başında HTML dilinin ve web tarayıcı ve 

sunucularının geliştirilmesiyle web tabanlı bilgi paylaşımı arttı. Hemen akabinde ise web 

tabanlı e-ticaret uygulamaları gelişti. Bugün artık İnternet çok geniş bir yelpazede hayatın 

her alanında kullanılmaktadır. E-posta ve dosya paylaşımı İnternet’te hala önemli bir yere 

sahiptir. Fakat artık eğlenceden e-ticarete, oradan sesli ve görüntülü haberleşmeye kadar 

çok farklı alanlarda İnternet vazgeçilmez bir ortam olmuş durumdadır. 

1.4 İnternet’in Yapısı 

İnternet, dünya genelindeki çok fazla sayıda ve ölçekteki bilgisayar ağlarının 

birbirine bağlanmasından oluşur. Öncelikle bir kurumdaki bilgisayarlar birbirine 

bağlanarak o kurum içinde yerel bir bilgisayar ağı oluşturur. Daha sonra o kurumun yerel 

ağı bu kurumun da bir parçası olduğu daha büyük bir üst ağa bağlanır. Bu üst ağ da diğer 

global ağlara bağlanır. 

Örneğin Mersin Üniversitesinin bilgisayar ağını düşünelim. Bu üniversitedeki 

bilgisayarlar birbirine bağlanarak üniversite içinde bir yerel ağ oluştururlar. Bu 

bilgisayarlar kendi aralarında dışarıya ihtiyaç duymadan bilgi alışverişi yapabilirler. Yani 

Mersin Üniversitesi yerel ağı kendi içinde bir bütündür. Fakat üniversite bünyesindeki 

2


bilgisayarların diğer üniversitelerdeki bilgisayarlarla haberleşebilmesi için bu üniversite 

yerel ağı Türkiye’deki bütün üniversitelerin bağlı olduğu UlakNET[7] üst ağına bağlanır. 

UlakNET üst ağı Türkiye’deki bütün üniversiteler ve araştırma kurumlarını birbirine 

bağlayan ulusal bir ağdır. Dolayısıyla Türkiye’deki bütün üniversitelerin kendi yerel 

ağları ve bütün bu yerel ağların da bağlı olduğu ULAKNET ulusal ağı vardır. 

Daha sonra UlakNET ağı Türk Telekom’un ülke geneline yayılmış olan TTNET 

ticari ağına bağlanır. Böylece Türk Telekom’dan İnternet hizmeti alan kullanıcılar ile 

üniversitelerin kullanıcıları birbirleriyle haberleşebilir. Diğer yandan Avrupa’daki hemen 

hemen bütün ülkelerde UlakNET ağına benzer akademik ağlar vardır. Avrupa 

ülkelerindeki bu ulusal akademik ağların birbirine bağlanmasından da GEANT[8] adı 

verilen Avrupa çapında bir akademik üst ağ oluşmuştur. UlakNET ağı da bu Avrupa 

genelindeki akademik üst ağa bağlanarak ülkemiz üniversitelerini Avrupa üniversiteleri 

ile bağlar. Öte yandan Türk Telekom’un TTNET ulusal ticari ağı dünyanın diğer 

yerlerindeki ticari global ağlara bağlanarak ülkemiz kullanıcılarının dünya ile iletişimini 

kurar. Sekil 1-1'de görülen resim UlakNET web sayfasından 

(http://www.ulakbim.gov.tr/hakkimizda/tarihce/ulaknet/dunbugun.uhtml) alınmış olup 

UlakNET ağının 2009 Ağustosu itibariyle genel şemasını göstermektedir. 

Şekil 1.1 Türkiye UlakNET ulusal internet ağı 

Benzer şekilde Türkiye’deki İnternet’e bağlı her hangi özel bir şirket, önce 

kurumu içindeki bilgisayarları birbirine bağlayarak yerel bir ağ oluşturur. Daha sonra 

kendi yerel ağını Türkiye’deki İnternet sağlayıcısı olan Türk Telekom TTNET ulusal 

ağına bağlar. Böylece bütün Türkiye’deki TTNET ağına bağlı kişi ve kurumlarla 

haberleşebilir. Daha sonra TTNET ağı da diğer global ağlara bağlanır. Böylece bu şirket 

dünyanın her yerindeki İnternet’e bağlı bilgisayarlarla iletişim kurabilir. 

3


1.5 Paket anahtarlaması 

İnternet’e bağlı bilgisayarlar arasındaki haberleşmeler karşılıklı bilgi paketi 

alışverişi ile olur. Örneğin İnternet’e bağlı iki bilgisayardan A bilgisayarı B bilgisayarına 

bir mesaj göndermek istesin. A bilgisayarı göndereceği bilgiyi bir bilgi paketine koyar ve 

üzerine B bilgisayarının adresini yazar. Daha sonra kendisinin bağlı olduğu yerel ağdaki 

ağ yöneticisi bilgisayarına (router) paketi gönderir. Yerel router'da paketin üzerindeki 

adresi inceleyip gitmesi gereken hedefe doğru yönlendirir. Gönderilmek istenen paket bu 

şekilde üzerindeki adres yardımıyla ağlar arasında adım adım hedefe doğru 

yönlendirilerek B bilgisayarına ulaştırılır. Eğer gönderilecek bilgi tek pakete sığmayacak 

kadar büyükse, bu bilgi birbirinden bağımsız birden çok paket halinde gönderilir. 

İnternet’teki bilgi alışverişi telefon sistemindeki haberleşme sisteminden daha çok 

posta sistemindeki haberleşmeye benzer. Telefon sisteminde iki kişi arasında konuşma 

başlamadan önce, bu iki kişi arasında önce fiziksel bir bağlantı kurulur. Bu tür bir 

bağlantı sekline devre anahtarlaması denilir. Diğer yandan İnternet’te ise iki birimin 

haberleşmesi için arada önce fiziksel bir ağ kurulmasına gerek yoktur. Posta sisteminde 

olduğu gibi, bilgi gönderecek bilgisayar alıcı adresini bildikten sonra adresi yazıp mesajı 

paket halinde gönderir. Bu tür bir haberleşme şekline ise paket anahtarlaması denilir. 

Yalnız İnternette paket iletimi çok hızlı olduğu için bilgiler sanki arada bir bağlantı 

varmış gibi hızlı iletilebilir. Dolayısıyla eş zamanlı chat ve ses transferi (İP-telefonu) gibi 

uygulamalar da İnternet üzerinden çalışabilir. 

1.6 IP Adresleri 

İnternet’e bağlı her bilgisayarın bir adresi vardır. Bu adres vasıtasıyla 

bilgisayarlar arasında iletişim mümkün olmaktadır. Bu adres İnternet protokolü (IP) ile 

tanımlanmış olan 4 byte uzunluktaki bir sayıdır. Buna bir bilgisayarın IP adresi denilir. 

Her bilgisayarın IP adresi kendisine özeldir. Böylece dünyanın farklı yerlerindeki 

bilgisayarlar birbirileriyle haberleşebilirler. Mesela www.mersin.edu.tr adresindeki 

bilgisayarın IP adresi: 193.255.128.4 sayısıdır. IP adresleri yazılırken 4 bölüm halinde 

yazılırlar ve araya nokta konulur. Her IP adresi dünya genelinde tek olması gerektiği için 

dünya genelinde IP adreslerini dağıtan tek bir otorite vardır. Bu da İnternet Assigned 

Numbers Authority (www.iana.org) kurumudur. 

IP adresleri tek tek dağıtılmak yerine bloklar halinde kurumlara verilir. Mesela, 

Türk Telekom’a çok sayıda IP adresi verilmiştir. Türk Telekom bu adresleri kendi ağı 

vasıtasıyla İnternet’e bağlanan ev kullanıcılarına ve şirket kullanıcılarına verir. Bazen bu 

adres dağıtma işlemi dinamik olabilirken, bazen da statik olur. Dinamik olduğu 

durumlarda bir kullanıcıya değişik zamanlarda değişik IP adresleri verilebilir. Mesela, bir 

ADSL kullanıcısının IP adresi dinamikse, bu kullanıcı İnternet’e bağlandığı farklı 

zamanlarda farklı IP adresleri alabilir. Eğer IP adresi statik ise, bu durumda aynı 

kullanıcıya her zaman aynı IP adresi verilir. Diğer yandan üniversiteler gibi büyük 

kurumlara da blok halinde IP adresleri verilir. Bu kurumlar aldıkları IP adres grubunu 

kendi iç ağlarındaki bilgisayarlara istedikleri gibi dağıtırlar. 

4


1.7 Routerlar ve Paket İletimi 

İnternet üzerinde bilgi paketleri bir noktadan diğer noktaya gönderilirken birçok 

ara birimden geçer. Ağlar arasındaki bilgi paketinin iletimini router denen özel üretilmiş 

bilgisayarlar yapar. Routerlar aldıkları paketleri incelerler, gidecekleri adresi kontrol 

edip, o adresin bulunduğu ağa doğru paketi yönlendirirler. Mesela, Mersin 

Üniversitesi’ndeki bir bilgisayardan Çukurova Üniversitesi’ndeki başka bir bilgisayara 

bir paket gönderilsin. Bu paket kabaca şu şekilde bir yol izler. Önce, Mersin 

Üniversitesi’ndeki bilgisayar göndereceği paketi Mersin Üniversitesi’ndeki routera 

gönderir. Bu router aldığı paketi inceler ve sonra Çukurova Üniversitesi’ne gönderilmesi 

için Ankara’daki bir routera gönderir. Çünkü Mersin Üniversitesi ile Çukurova 

Üniversitesi arasında direk bir İnternet hattı yoktur. Ankara’daki router da, bu paketi alır 

ve Çukurova’daki routera gönderir. Çukurova’daki router da, paketi alıp, son hedefine 

gönderir. Özetle İnternet’teki paket iletimini router denen özel üretilmiş bilgisayarlar 

yaparlar. Bu iletimi de paketler üzerindeki IP adreslerine göre yaparlar. 

Örnek Uygulama: 

Bir paketin İnternet üzerinden iletilirken hangi routerlar üzerinden gittiğini 

gösteren bir program vardır. Bu programı MS Windows işletim sistemi olan bir 

bilgisayarınızda şu şekilde kullanabilirsiniz. Önce başlat menüsüne tıklayınız, bütün 

programlar içindeki “Donatılar” kısmından “Komut İstemi” programını çalıştırınız. 

Komut satırında tracert komutunu kullanarak bu işlemi gerçekleştirebilirsiniz. Mesela, 

bağlı olduğunuz bilgisayardan www.mersin.edu.tr adresine göndereceğiniz bir paketin 

izlediği yolu komut satırına şu komutu yazarak görebilirsiniz: 

>tracert www.mersin.edu.tr 

Şekil 1-2’deki pencere resminde Mersin’deki bir ev ADSL kullanıcısının 

bilgisayarından bu komut çalıştığında üzerinden gidilen routerlar gözükmektedir. Evdeki 

bilgisayar ADSL ile İnternet’e bağlı olduğu için, önce paket birçok TTNET routerı 

üzerinden gidiyor. Sonra UlakNET routerlarına geçiyor ve son adımlarda da hedefe 

ulaşıyor. 

5


Şekil 1.2 Windows'ta tracert kullanım örneği 

1.8 Alan İsimleri ve Alan Sunucuları 

Her ne kadar İnternet’e bağlı bütün bilgisayarların kendilerine ait IP adresleri olsa 

da, bu IP adreslerini insanların öğrenip hatırlayabilmeleri zordur. Onun için insanların 

uzaktan erişmesi gereken ve çeşitli sunucuların çalıştığı bilgisayarlara öğrenmesi, 

hatırlaması ve kullanması daha kolay olan alan isimleri (domain name) verilir. Örneğin 

Mersin Üniversitesi web sunucusunun çalışmakta olduğu makinenin alan adı 

www.mersin.edu.tr'dir. Bu isim aynı makinenin IP adresi olan 193.255.128.4 sayısına 

göre öğrenmesi ve hatırlaması çok daha kolaydır. Artık kullanıcılar bu IP adresini hiç 

öğrenmeden alan adıyla bu bilgisayara erişebilirler. 


Şimdi Mersin Üniversitesi web sunucusuna hem IP adresi, hem de alan adıyla 

erişelim. Bunun için önce web tarayıcınızı çalıştırınız. Sonra tarayıcıda gitmek istediğiniz 

web adresi kısmına http://www.mersin.edu.tr adresini yazınız. Enter tuşuna bastığınız 

zaman, tarayıcınız Mersin Üniversitesi web sunucusuna bağlanır ve bu sunucunun 

göndermiş olduğu web sayfasını size gösterir. Şimdi aynı işlemi aynı sunucunun IP 

adresini kullanarak yapalım. Bu defa tarayıcınızın adres kısmına bu makinenin IP 

adresini şu şekilde http://193.255.128.4 yazınız. Enter tuşuna bastığınızda yine aynı web 

sayfasının gelmiş olduğunu göreceksiniz. İşte bu şekilde web sunucusunun çalışmış 

olduğu makineye hem alan ismiyle hem de IP adresiyle bağlanılabilir. 

Yalnız bu artık bilgisayarlar arasındaki paket alışverişinde de IP adresleri yerine 

alan adlarının kullanıldığı anlamına gelmez. Paket alışverişinde yine IP adresleri 

kullanılmaya devam edilir. Alan isimleri sadece bağlanmak istediğimiz makinenin IP 

adresini öğrenmek için kullanılır. Kullanıcı web tarayıcısına bir alan adını yazdığında, 

6


web tarayıcısı önce bu alan adındaki makinenin IP adresini öğrenir. Sonra da bu IP 

adresiyle o makineye bağlanıp paket alışverişini yapar. 

Dünyadaki bütün alan isimlerini yöneten tek bir otorite vardır. Bu da İnternet 

Corporation for Assigned Names and Numbers (www.icann.org) isimli kuruluştur. Bu 

kuruluş alan isimlerinin kişi ve kurumlara verilmesinden ve global alan sunucularının 

çalıştırılmasından sorumludur. Hangi alan isimlerinin hangi IP adreslerine karşılık geldiği 

alan sunucularında kayıtlıdır. Dünya genelinde çalışan birçok alan sunucusu vardır. Bu 

alan sunucularına DNS (Domain Name Server) denilir. Bunlar da kendi aralarında belirli 

bir düzenle çalışır. İnternet’e bağlı her bilgisayar en az bir alan sunucusunun adresini 

bilir. IP adresini bilmediği bir alan ismi ile karşılaşan bir bilgisayar, adresini bildiği alan 

sunucusuna mesaj göndererek bu alan adının hangi IP adresine karşılık geldiğini sorar. 

Alan sunucusu kendisine sorulan alan adının karşılık geldiği IP adresini biliyorsa, yani 

kendi veri tabanında bu bilgi varsa cevabı hemen gönderir. Eğer bilmiyorsa bu alan 

sunucusu diğer alan sunucularına sorar. Bu şekilde istenilen IP adresi bulunana kadar 

alan sunucuları arasındaki mesajlaşma trafiği devam eder. Sonunda cevap bulunur ve ilk 

istek mesajını gönderen bilgisayara o alan adının hangi IP adresine karşılık geldiği bilgisi 

ulaştırılır. Artık bu noktadan sonra bu bilgisayar bu alan adı ile isimlendirilen bilgisayara 

o bilgisayarın IP adresini kullanarak iletişim kurar. Görüldüğü gibi İnternet’e bağlı 

bilgisayarlar arasındaki mesajlaşma, yani bilgi paketi alışverişi için IP adresleri kullanılır. 

Alan isimleri ise ulaşmak istediğimiz bilgisayarların IP adreslerini öğrenmek için 

kullanılır. 

Alan sunucularını büyük bir telefon defterine benzetebiliriz. Nasıl ki bir telefon 

defterinde hangi ismin hangi telefon numarasına karşılık geldiği yazıyorsa, benzer şekilde 

alan sunucularında da hangi alan adının hangi IP adresine karşılık geldiği bilgisi vardır. 

Benzer şekilde nasıl ki bir arkadaşımıza o kişinin ismiyle değil de telefon numarasıyla 

telefon edebiliyorsak, İnternet üzerinden de bir bilgisayara o bilgisayarın alan adıyla değil 

IP numarasıyla erişiriz. 

İnternet’te her alan adı genellikle bir IP adresine karşılık gelir. Fakat bazı 

durumlarda bir alan adı birden fazla IP adresine de karşılık gelebilir. Mesela 

www.google.com alan adı farklı ülkelerde farklı IP adreslerine karşılık gelebilir. Bu 

durumda Google firmasının her ülkede farklı farklı sunucuları vardır. Aynı adresi 

Brezilyada yazan kişi Brezilya’daki Google sunucusuna ulaşırken, Türkiye’de yazan kişi 

Türkiye’deki Google sunucusuna ulaşabilir. Bu da Google için daha esnek bir yapı sağlar. 

Telefon defteri örneğimiz üzerinde düşünmeye devam edersek; nasılki bazen tek bir 

kişinin birden fazla telefon numarası olabilir, benzer şekilde tek alan adına karşılık gelen 

birden fazla IP adresi olabilir. 

Diğer yönden bazı durumlarda birden fazla alan adı aynı IP adresine karşılık 

gelebilir. Örneğin www.birsiteadi.com adresi ile www.birbaskasiteadi.com adresleri aynı 

IP adresine karşılık gelebilir. Bu durumda bu iki sitenin web sunucusu da aynı 

bilgisayarda çalışıyor demektir. Aynı evde oturan iki kişinin aynı telefon numarasına 

sahip olması gibi. 

7


Fakat alan adlarının çoğu tek bir IP adresine karşılık gelir ve dünyanın neresinden 

bir alan adına erişilmek istenirse istensin, aynı IP adresine erişilir. Örneğin 

www.mersin.edu.tr alan adının karşılık geldiği bir tane IP adresi vardır ve bu alan adını 

dünyanın neresinde hangi web tarayıcısına yazarsak yazalım aynı IP adresine ulaşırız. 


Normalde alan adından IP adresi öğrenme web tarayıcısı veya E-posta programı 

tarafından otomatik olarak gerçekleştirilir. Kullanıcı genellikle alan adından IP adresinin 

öğrenilme kısmından haberdar değildir. Alan adını web tarayıcısına yazdığında o sayfaya 

erişir. Ama arka planda web tarayıcısı eğer o alan adının IP adresini bilmiyorsa önce 

DNS sunucularından o alan adına karşılık gelen IP adresini öğrenir. Şimdi alan adından 

IP numarası öğrenme hizmeti veren bir web sayfasından çeşitli alan adları için IP 

adreslerini öğrenelim. Web tarayıcınızla http://www.lookupserver.com isimli web 

sayfasına bağlanınız. Bu web sitesi alan adlarından IP numarası öğrenme ve IP 

adreslerinden de alan adları öğrenme hizmeti vermektedir. Bizim için daha çok gerekli 

olan, alan adlarından IP adresi öğrenmektir. Bu web sayfasında bulunan “Forward DNS 

Lookup” kısmına IP adresini öğrenmek istediğiniz alan adını yazınız ve Lookup 

butonuna basınız. Size bu alan adının hangi IP adresine karşılık geldiğini gösterecektir. 

Örneğin önce www.mersin.edu.tr adresini “Forward DNS Lookup” kısmına 

yazınız ve “Lookup” butonuna tıklayınız. Cevap olarak yukarda vermiş olduğumuz 

193.255.128.4 numaralı IP adresini size verecektir. Merak ettiğiniz başka alan adlarının 

IP adreslerini bu alana yazarak öğreniniz. 

1.9 Güvenilir İletişim: TCP protokolü 

İnternet protokolü (IP) İnternet’e bağlı bilgisayarların adreslerinin nasıl olması 

gerektiğini tanımlar ve paket iletiminin kurallarını belirler. Bu protokol güvenilir 

olmayan bir paket iletim mekanizması öngörür. Yani A noktasından B noktasına bir IP 

paketi gönderildiğinde, bu paketin hedefine varacağı garanti değildir. Bazı durumlarda, 

özellikle de routerlarda paket yoğunluğu olduğu durumlarda, bazı paketler düşürülebilir. 

Dolayısıyla bazı paketler hedeflerine ulaşamayabilirler. Ama birçok uygulama güvenilir 

paket iletimi gerektirir. Örneğin bir dosya bir noktadan diğerine gönderilmek 

istenildiğinde, bu dosyanın tamamının eksiksiz olarak karşı tarafa ulaşması istenir. Bu 

dosya gönderilirken birçok pakete bölündüyse ve bu paketlerden bazıları yolda 

kaybolduysa, karşı tarafta aynı dosya oluşturulamaz. Dolayısıyla bu dosya hiç 

kullanılamayabilir. 

İşte güvenilir iletişim gerektiği uygulamalarda, yani bilginin bir noktadan diğer 

noktaya eksiksiz ve tam olarak ulaştırılması gerektiği uygulamalarda, kullanılmak için IP 

üzerinde çalışan TCP protokolü geliştirilmiştir. TCP protokolü, paketleri yine IP paketi 

olarak gönderir. Fakat her paketin hedefe ulaşıp ulaşmadığını kontrol eder. Hedefe ulaşan 

her paket için onay paketi istenir. Böylelikle her paketin hedefe vardığından emin olunur. 

8


Hedefe varmayan paket olursa, bu paketler tekrar gönderilir. Bu şekilde bazı paketler 

transfer anında düşürülse bile, tekrar gönderilerek bütün paketlerin karşı tarafa ulaşımı 

sağlanmış olur. TCP protokolü IP protokolü üzerinde çalışan bir katmandır. Onun için 

TCP/IP diye anılır. Şu anda güvenilir bilgi transferi gereken uygulamalar için kullanılan 

en yaygın protokol TCP protokolüdür. İnternet’in gelişmesi ve yayılmasında da TCP 

protokolü çok önemli bir rol oynamıştır. Bu protokolü kullanarak değişik ağlar 

birbirlerine bağlanabilmiş ve karşılıklı güvenilir paket alışverişi yapılmıştır. 

1.10 TCP Portları 

Bazen aynı anda bir bilgisayara birden fazla başka bilgisayar farklı uygulamalar 

için bağlanmak isteyebilir. Bu durumda aynı bilgisayara gelen paketlerin farklı 

uygulamalara yönlendirilmesi gerekir. Örneğin aynı anda bir bilgisayara hem dosya 

transferi olabilir hem de e-posta aktarımı olabilir. İşte aynı bilgisayara gelen değişik 

uygulamalara ait paketleri sınıflandırabilmek için port kavramı geliştirilmiştir. Bir 

bilgisayara bir paket gönderilirken gönderilecek bilgisayarın IP numarasının yanında 

hangi porta gönderileceği de belirtilir. Bir bilgisayardaki portlar 1 ile 65535 arasındaki 

bir tamsayıdır. Mesela dosya transferi yapan bir program karşı bilgisayarın IP adresinin 

yanına o uygulamaya ait port numarası olan 21 sayısını da ekler. Böylece alıcı bilgisayar 

bu paketin dosya transferi için geldiğini tespit eder ve gelen paketleri dosya transferi 

yapan uygulamaya yönlendirir. Port numaraları özellikle sunucularda önemlidir. Örneğin 

aynı makinede hem web sunucusu, hem dosya transferi sunucusu, hem de e-posta 

sunucusu çalışabilir. Bütün bu sunucular farklı portlarda çalışarak, gelen paketlerdeki 

port numarasına göre hangi uygulamaya geldiği anlaşılır. Yaygın kullanıma göre web 

sunucuları port 80'de, E-posta (SMTP) sunucuları port 25'te, dosya transferi (FTP) 

sunucuları port 21'de çalışır. Özetle port numarası 1 ile 65535 arasındaki bir tamsayıdır 

ve tek bir bilgisayarda birden fazla uygulamanın İnternet üzerinden paket alabilmesine 

imkân tanır. 

1.11 Telnet ve TCP Uygulaması 

Telnet programı bir bilgisayardan diğer bir bilgisayara TCP bağlantısı 

gerçekleştirmek ve o bilgisayara komutlar göndermek için uzun zamandır kullanılan bir 

uygulamadır. Yalnız son zamanlarda içerdiği bazı güvenlik risklerinden dolayı kullanımı 

azalmış ve yerini daha güvenli olan ssh programlarına bırakmıştır. Fakat Telnet ağ 

programlarını test etmek için hala sıklıkla kullanılmaktadır. Biz de Telneti böyle bir 

amaçla kullanacağız. Telnet kısaca bir bilgisayardan diğerine TCP bağlantısı kurmamıza 

ve karşı tarafa veri göndermemize imkan tanır. Yani bir makinede TCP sunucusu varsa 

ve kullanıcıların bu makineye TCP ile bağlanmaları gerekiyorsa, bu durumda biz Telnet 

programıyla bu sunucuya bağlanıp veri gönderebiliriz. Örneğin dünyanın değişik 

noktalarında o anki zaman bilgisini isteyen kullanıcılara sunan bazı sunucular vardır. 

Bunlardan bir tanesi utcnist.colorado.edu adresindeki makinede, bir diğeri ise timea.timefreq.bldrdoc.gov 

isimli makinede çalışmaktadır. Bu makinelerdeki zaman 

sunucuları 13. portta çalışmaktadır. Bu porta bir TCP bağlantısı gerçekleştirildiğinde, o 

9


anki zaman bilgisi kullanıcıya verilir ve TCP bağlantısı sonlandırılır. Bu uygulamayı şu 

şekilde deneyebiliriz: 

Önce bilgisayarınızdaki telnet uygulamasını çalıştırınız. Bunun için bir önceki 

örnekte olduğu gibi önce Komut İstem penceresini açınız. Komut satırında: 

>telnet 

Yazıp enter tuşuna basınız. Bu durumda telnet programı çalışmaya başlar. Sonra 

bu sunuculardan birine şu şekilde bir TCP bağlantısı gerçekleştiriniz: 

>open utcnist.colorado.edu 13 

Bu komutu yazıp enter tuşuna basınca, adresi verilen makineye bir TCP bağlantısı 

gerçekleştirilir. Adresin yanında yazılan tamsayı bağlanılacak port numarasını gösterir. 

Bu komut çalıştığında siz karşı tarafa her hangi bir veri göndermeden, karşı taraf size o 

anki zaman bilgisini aşağıdaki formatta gönderir ve bağlantıyı keser: 

54218 07-04-28 12:20:04 50 0 0 947.8 UTC(NIST) * 

Connection to host lost. 

Press any key to continue... 

İlk satır gönderilen zaman bilgisini, ikinci satır ise bağlantının kesildiğini gösterir. 

İşte bu uygulamada İnternet üzerinden TCP ile zaman hizmeti veren bir sunucuya 

bağlandınız ve size gönderilen zaman bilgisini aldınız. 

1.12 Windows Vista’da Telnet Kurulumu 

Telnet uygulaması Windows XP işletim sisteminde kurulu olarak gelirken, 

Windows Vista işletim sisteminde kurulu olarak gelmemektedir. Bunun için Windows 

Vista kullanıcılarının önce Telnet servisini kurmaları gerekmektedir. Telnet kurulumu 

gayet basit birkaç adımdan oluşmaktadır. Bunun için: 

1. “Başlat” menüsünden “Denetim Masası”, oradan da “Programlar ve 

Özellikleri” penceresini açınız. 

2. “Programlar ve Özellikleri” penceresindeki sol tarafta bulunan “Windows 

Özelliklerini aç veya kapat” metnine tıklayınız. 

3. Yeni gelecek penceredeki listede “Telnet İstemcisi” seçeneğini seçiniz ve 

Tamam butonuna basınız. 

10


Bu işlemler sonunda Telnet uygulaması Windows Vista bilgisayarlarına 

yüklenmiş olur. Artık Komut İstem programı içinden telnet uygulamasını 

çalıştırabilirsiniz. 

1.13 İstemci-Sunucu Sistemleri 

İnternet’teki birçok uygulama istemci-sunucu (kullanıcı-sunucu) mimarisine göre 

çalışır. Bir üst bölümdeki zaman hizmeti de bu şekilde çalışan bir uygulama idi. Sunucu 

programı yeri ve adresi sabit olan bir bilgisayarda sürekli olarak çalışır. Bu sunucu 

programı çoğunlukla kendine TCP protokolü ile gelen isteklere cevap verir. İstemci 

programı ise dünyanın her yerinde olabilir. Yerinin ve adresinin sunucu tarafından 

bilinmesine ve sürekli olarak çalışmasına gerek yoktur. İstediği zaman sunucuya TCP/IP 

ile bağlanır ve sunulan hizmeti almak için ne gerekiyorsa onu yapar. Çoğunlukla alınmak 

istenen hizmetle ilgili sunucuya bir mesaj gönderir. Daha sonra sunucu da kullanıcının bu 

isteğine olumlu ya da olumsuz bir cevap verir. Dolayısıyla bu sistemde yeri ve adresi 

belirli olan ve sürekli çalışan bir sunucu varken, yeri ve adresi belirli olmayan, istediği 

zaman sunucuya bağlanıp hizmet alan istemciler vardır. Sunucu tek veya az sayıda iken, 

kullanıcı yani istemci çoktur. Diğer yandan aynı anda bir sunucu birden fazla kullanıcıya 

da hizmet verebilir. Hatta bazı durumlarda aynı anda binlerce kullanıcıya bile hizmet 

verilebilir. 

Örneğin bir bakkal sunucu gibi çalışır. Yeri ve adresi sabittir ve en azından 

gündüzleri sürekli olarak çalışır. Müşteriler de istemci gibidir. Müşterinin yerinin ve 

adresinin belirli olması gerekli değildir. Ayrıca müşteri için bir zaman kısıtlaması da söz 

konusu değildir. Müşteri istediği zaman gelip alışverişini yapar. İnternetteki sunucular da 

bakkal gibi sürekli çalışır. Fakat onlar gece gündüz durmadan çalışır. Ayrıca yerleri ve 

adresleri sabittir. İstemciler de yine dünyanın herhangi bir yerinde olabilir ve günün 

herhangi bir anında sunucuya bağlanıp bir hizmet talebinde bulunabilir. 

İnternet üzerinde kullanıcı-sunucu mimarisinde çalışan belki de en yaygın 

uygulama http yani web sunucusu hizmetidir. Web sunucusu adresi belirli bir makinede 

sürekli olarak çalışır ve web tarayıcıları kendisine bağlanarak o adresteki web sayfasını 

isterler. Web sunucusu da, istekte bulunan kullanıcılara web sayfasındaki bilgileri 

gönderir. Tarayıcı da almış olduğu bu bilgileri kullanıcıya gösterir. 

1.14 HTTP protokolü 

HTTP (Hypertext Transfer Protocol) kullanıcı-sunucu tarzında tasarlanmış bir 

transfer protokolüdür. Bu protokol kullanıcı ile sunucu arasındaki mesaj alışverişinin 

hangi formatta olması gerektiğini ve beklenmedik durumlarda nasıl hata yönetimi 

yapılacağını belirler. Güvenilir bilgi iletimi gerektirdiği için mesajlar TCP bağlantısı ile 

iletilir. Dolayısıyla kullanıcı ile sunucu arasında bir bilgi alışverişi olmadan önce, iki 

nokta arasında TCP bağlantısı kurulmalıdır. 

11


Bu protokol istem/cevap (request/response) seklinde tasarlanmış bir protokoldür. 

TCP bağlantısı kurulduktan sonra, önce kullanıcı sunucuya bir istem mesajı gönderir. Bu 

istem mesajına karşılık olarak ise sunucu kullanıcıya bir cevap mesajı gönderir. İki nokta 

arasındaki haberleşme bu şekilde gerçekleştirilir. Haberleşmeyi başlatan her zaman için 

kullanıcıdır. Kullanıcı istem mesajı göndermeden sunucu kullanıcıya her hangi bir mesaj 

göndermez. Önce sunucunun kullanıcıya istem mesajı göndermesi ve kullanıcının buna 

cevap mesajı göndermesi mümkün değildir. Her zaman ilk olarak kullanıcının sunucuya 

bir istem mesajı göndermesi gerekir. 

Kullanıcının sunucuya göndereceği mesaj çoğunlukla birkaç satırlık kısa 

mesajlardır ve hangi web sayfasının istendiğini belirtir. Mesela aşağıdaki iki satırlık http 

istem mesajı bağlanılan sitedeki ana dizinde bulunan web sayfasını ister: 

GET / HTTP/1.1 

Host: www.mersin.edu.tr 

GET kelimesinden sonra gelen taksim işareti ana belgenin istendiğini gösterir. 

Ondan sonra gelen HTTP/1.1 ise, bu istemde http protokolünün 1.1 versiyonunun 

kullanıldığını gösterir. HTTP protokolünde ilk satırın ilk kelimesi istenilen işi tanımlar. 

GET fonksiyonuna ek olarak HEAD, POST gibi birkaç fonksiyon daha tanımlanmıştır. 

İkinci satırda ise istenen web sayfasının hangi siteye ait olduğu belirtilir. 

HTTP Uygulaması 1: 

Şimdi HTTP protokolünün nasıl çalıştığını daha yakından görelim. Bunun için bir 

önceki uygulamada olduğu gibi komut satırını açınız. Sonra telnet uygulamasını 

başlatınız. Daha sonra bir web sunucusuna bağlanınız. Web sunucuları genellikle 80'inci 

portta çalışır. Onun için telnet uygulamasında TCP bağlantısını aşağıdaki gibi kurunuz: 

>open www.mersin.edu.tr 80 

Bu şekilde web sunucusuna TCP bağlantımızı gerçekleştirdikten sonra, web 

sunucusuna bir http istem mesajı gönderiniz. Bu noktada aşağıdaki metni yazınız ve iki 

defa enter tuşuna basınız: 

HEAD / HTTP/1.1 


Bu istem mesajına web sunucusu aşağıdaki gibi bir mesajla cevap verir: 

HTTP/1.1 200 OK 

Date: Sat, 28 Apr 2007 17:09:33 GMT 

Server: Apache/2.0.55 (FreeBSD) PHP/4.4.1 mod_jk2/2.0.4 

12


X-Powered-By: PHP/4.4.1 

Set-Cookie: PHPSESSID=0a88e6f575172ce3105ebe737e026607; path=/ 

Expires: Thu, 19 Nov 1981 08:52:00 GMT 

Cache-Control: no-store, no-cache, must-revalidate, post-check=0, 

pre-check=0 

Pragma: no-cache 

Content-Type: text/html 

HEAD fonksiyonu sunucudan bir web sayfasıyla ilgili özet bilgiler istemek için 

kullanılır. Web sayfasının içeriğini istemez. Buna cevap olarak ta yukarda gözüktüğü gibi 

istenilen web sayfasıyla ilgili özet bir bilgi verilir. Gelen cevabın ilk satırı bu işlemin 

sonucunu gösterir. İlk satırdaki 200 kodu ve OK kelimesi, istemin başarıyla 

cevaplandığını gösterir. 


Şimdi de, GET fonksiyonu ile bu web sayfasına ait bilgileri sunucudan isteyelim. 

Bu durumda web sayfasının içeriği de gönderilecektir. Yukarıdaki gibi yine aynı adrese 

TCP bağlantısı kurunuz. Bağlantı kurulduktan sonra, GET mesajını aşağıdaki gibi 

gönderiniz: 

GET / HTTP/1.1 


Bu durumda alınan cevap çok daha uzun bir mesaj olur. Çünkü 

www.mersin.edu.tr web sayfasındaki bütün bilgiler cevap olarak gönderilir. Yalnız cevap 

mesajının başlangıç kısmı yine yukarıdaki mesaja benzer. İlk satır yine “HTTP/1.1 

200 OK” olur. Bu cevabın başarıyla gönderildiğini gösterir. Ondan sonra mesajın 

gövde kısmına kadar yine yukarıdakine benzer satırlar vardır. Daha sonra da web 

sayfasının içeriği başlar. Bütün mesajı buraya koymak çok yer alacağından, buna 

verilecek cevap mesajı buraya konulmamıştır. 


Şimdi de başarısız bir istem denemesi yapalım. Bu durumda istenilen web sayfası 

sunucuda bulunmasın. Yine aynı sunucuya aynı porttan telnet ile bağlanınız. Daha sonra 

aşağıdaki GET mesajını gönderiniz: 

GET /d1/s2.html HTTP/1.1 


Daha önceki iki istem mesajında web sunucusunun ana sayfalarını istiyorduk. Bu 

durumda ise web sunucusunun ana dizini altındaki d1 dizinindeki s2.html dosyasını 

13


istiyoruz. Böyle bir sayfa şu anda web sunucusunda olmadığı için web sunucumuz 

aşağıdaki gibi bir mesajı cevap olarak gönderir: 

HTTP/1.1 404 Not Found 

Date: Sat, 28 Apr 2007 18:09:21 GMT 

Server: Apache/2.0.55 (FreeBSD) PHP/4.4.1 mod_jk2/2.0.4 

Content-Length: 208 

Content-Type: text/html; charset=iso-8859-1 

 

 

404 Not Found 

 

Not Found 

The requested URL /d1/s2.html was not found on this server. 

 

Diğer cevap mesajlarından farklı olarak bu cevapta ilk satırda durum kodu 404 

olarak verilmiştir. Sonucu ifade etmek için de OK yerine “Not Found” denilmiştir. Bu 

istenilen web sayfasının bulunamadığını ve sonucun başarısız olduğunu gösterir. İlk 5 

satır http cevap mesajının başlık kısmını gösterirken, ondan sonraki satırlar ise 

kullanıcıya gösterilecek web sayfasının içeriğini gösterir. Kullanıcıya gösterilen web 

sayfasında böyle bir dosyanın bulunamadığı yazılıdır. 

1.15 Web Tarayıcısı Çalışma Şekli 

Yukarıdaki yapmış olduğunuz 3 örnekte http protokolünün örnek çalışma 

şekillerini gördük. Bir web tarayıcısıyla, örneğin İnternet Explorer veya Firefox 

tarayıcısıyla bir web sunucusuna bağlanıldığında, az önceki bölümde telnet ile yapılan 

işlemleri web tarayıcısı tarafından arka planda kullanıcı fark etmeden yapılır. Kullanıcı 

sadece web sunucusunun göndermiş olduğu sayfaları uygun bir formatta tarayıcı içinde 

görür. Mesela son örnekteki aynı işlemi web tarayıcınızla yapabilirsiniz. Bunun için web 

tarayıcınızın adres kısmına http://www.mersin.edu.tr/d1/s2.html yazınız. Enter tuşuna 

bastığınızda karşınıza gelecek sayfa yukarıdaki ile aynı sayfa olacaktır. Yalnız bu 

durumda web tarayıcısı http mesajının başlık kısmını gizler. Gövde kısmında ise HTML 

ile belirten bilgiyi gösterir. HTML dilini ilerleyen bölümlerde ayrıntılı olarak ele 

alacağız. 

1.16 Referanslar 

[1] http://tr.wikipedia.org/wiki/İnternet. İnternet. 18 Ağustos 2009. 

14


[2] http://www.İnternetworldstats.com/stats.htm. World İnternet Users and Population 

Stats. 18 Ağustos 2009. 

[3] http://tr.wikipedia.org/wiki/ENIAC. ENIAC (Electronic Numerical Integrator and 

Computer). 18 Ağustos 2009. 

[4] http://en.wikipedia.org/wiki/ARPANET. The Advanced Research Projects Agency 

Network (ARPANET). 18 Ağustos 2009. 

[5] http://en.wikipedia.org/wiki/JANET JANET (Joint Academic NETwork). 

[6] http://www.nsf.gov/news/news_summ.jsp?cntn_id=103050. A Brief History of NSF 

and the İnternet. 

[7] http://www.ulakbim.gov.tr/hakkimizda/tarihce/ulaknet, UlakNET (Ulusal Akademik 

Ağ). 

[8] http://en.wikipedia.org/wiki/GEANT GEANT. 

15


Bölüm 2 

2.1 Amaç 

WEB TASARIMINA GİRİŞ 

Bu bölümde amacımız, web sistemini oluşturan temel bileşenlerden olan web 

sunucusu ve web tarayıcısı programlarının çalışma prensiplerinin anlaşılması, bunların 

kurulumunun ve kullanılmasının kavranmasıdır. Bu amaçla önce web tarayıcıları 

anlatılmış, yaygın olarak kullanılan tarayıcılar açıklanmıştır. Sonra web sunucuları 

açıklanmış ve yaygın kullanılan web sunucuları açıklanmıştır. Bu sunuculardan en 

yaygını olan Apache web sunucusunun kurulumu, çalıştırılması ve sayfa yüklenmesi 

anlatılmıştır. 

2.2 Giriş 

Bir önceki bölümde açıklandığı gibi web tabanlı sistemler istemci-sunucu 

mimarisine göre çalışan sistemlerdir. Bu sistemlerde web sunucusu yeri ve adresi belirli 

olan ve sürekli çalışan bir programdır. Kullanıcılar ise İnternete bağlı her hangi bir 

bilgisayar olabilir. Kullanıcı web sunucularına web tarayıcıları ile bağlanır. Şu anda en 

çok kullanılan web tarayıcılarından iki tanesi Microsoft İnternet Explorer ve Mozilla 

Firefox tarayıcılarıdır[1]. 

Web sunucusu programlar sürekli olarak çalışırlar ve kendilerine İnternet 

üzerinden TCP ile bağlanılıp HTTP protokolüyle bilgi istenmesini beklerler. Bir kullanıcı 

bu şekilde bir istemde bulunduğunda ise, bu isteğe olumlu ya da olumsuz cevap 

gönderirler. Bir önceki bölümde bu mesaj alışverişinden birkaç örnek sunulmuştur. 

Kullanıcılar ise web tarayıcısı kullanarak istedikleri sayfaya sahip olan web sunucusuna 

bağlanırlar. Web tarayıcısı arka planda gerçekleşen haberleşmelerin karmaşıklığını 

kullanıcıdan gizler. Sadece kullanıcıyı ilgilendiren bilgi kısımlarını gösterir. 

16


Örneğin Mersin Üniversitesi web sayfasına bağlanmak isteyen bir kişi, web 

tarayıcısının adres kısmına http://www.mersin.edu.tr adresini yazar ve enter tuşuna basar. 

Bu durumda www.mersin.edu.tr isimli makinede 80’inci portta çalışmakta olan web 

sunucusuna web tarayıcısı önce bir TCP bağlantısı kurar. Sonra ana sayfadaki bilgileri 

kendisine göndermesi için web sunucusuna bir http istem mesajı gönderir. Bu istem 

mesajını alan web sunucusu, istenen sayfanın içeriğini kullanıcıya gönderir. Bu cevabı 

alan web tarayıcısı, kullanıcıya bu sayfanın içeriğini uygun bir formatta gösterir. Bu 

adresteki web sunucusu sürekli olarak o makinede çalışır ve kendisinden bilgi istenmesini 

bekler. Dünyanın değişik yerlerine yayılmış olan İnternet kullanıcıları da istedikleri 

zaman bu sunucuya bağlanırlar ve kendilerine verilen bilgileri tarayıcılarında görürler. 

Bu sunucuya aynı anda birçok kullanıcı bağlanabilir. Bu sunucu aynı anda çok sayıdaki 

kullanıcıya cevap verebilecek şekilde tasarlanmıştır. 

2.3 Web Sunucuları 

Web sunucusu olarak çalışmak için yazılmış programlar vardır. Bunlardan en çok 

kullanılanı Apache HTTP sunucusudur. Bütün dünyada aktif olarak çalışan web 

sunucularının yarıdan fazlası (%51) Temmuz 2009 itibariyle Apache HTTP sunucusudur 

[2]. İkinci en popüler web sunucusu ise Microsoft İnternet Information Services (MS-IIS) 

sunucusudur. O da dünyadaki web sunucularının yaklaşık dörtte birini oluşturmaktadır 

(%24). Geriye kalan kısımda ise çok farklı web sunucuları çalışmaktadır. Dolayısıyla bu 

bölümde bu iki web sunucusunun kurulmasını göstereceğiz. 

Web sunucuları iki çeşit web sayfası hizmeti verirler: statik ve dinamik. Statik 

web sayfaları önceden web sayfası sahibi tarafından hazırlanır ve web sunucusunun 

çalıştığı bilgisayara htm veya html uzantılı metin dosyaları halinde kaydedilir. Web 

sunucusuna bu tür bir sayfa için bir istem geldiğinde, istenilen sayfayı hard disk’inden 

okur ve kullanıcıya gönderir. Web sunucusunun yaptığı hizmet gayet basittir. İstenen 

belgeyi okuyup kullanıcıya göndermektir. 

İkinci tür hizmet olan dinamik sayfa sunumunda ise, web sayfalarının tamamı 

veya web sayfalarının bir kısmı çalışma anında oluşturulur. Cevap olarak oluşturulan 

sayfa kullanıcının isteğine göre hazırlanır. Bu durumda web sunucusu çoğunlukla 

dinamik sayfa oluşturma işlemini kendisi yapmaz. Böyle bir istek geldiğinde, dinamik 

web sayfası oluşturacak başka bir program vardır. Web sunucusu bu programdan sayfayı 

oluşturmasını ve kendisine sonucu vermesini ister. Bu yardımcı program da dinamik 

sayfayı kendisine verilen parametrelere göre oluşturup web sunucusuna verir. Web 

sunucusu da dinamik olarak oluşturulan bu sayfayı kullanıcıya gönderir. Web sunucusu 

tarafında dinamik web sayfası üretmek için kullanılan en yaygın programlar PHP, ASP 

ve JSP gibi programlardır. 

Dinamik web sayfasının oluşturulduğu en yaygın örnek arama motorlarıdır. 

Google web sayfasına bağlanıp bir veya birkaç kelimenin aranmasını istediğimizde, 

aranmasını istediğimiz kelimeye göre bize farklı bir web sayfası oluşturulur. Web 

17


sunucusu tarafında arama yapan ve sonuçları bir web sayfası formatına dönüştüren bir 

program vardır. Bu program isteğe göre farklı web sayfaları oluşturur. 

2.4 Statik IP Adresleri ve Alan Adları 

Web sunucuları bir alan adı ve bir sabit IP adresi olan bilgisayarlarda çalışır. 

Böylece İnternete bağlı kullanıcılar bu makinenin alan adını kullanarak web sunucusu 

tarafından sunulan web sayfalarına erişirler. Web sunucuları kesintisiz hizmet 

verebilmeleri için bu makinede sürekli olarak çalışmaları gerekir. 

İnternete bağlı her bilgisayarın bir IP adresi olsa da, hepsinin bir alan adı yoktur. 

İnternete bağlı bilgisayarların çoğu sunucu olarak çalışmak yerine, kullanıcı olarak 

çalışırlar. Bu makinelere uzaktan erişim gerekmez. Bu makineler başka makinelerde 

sunulan hizmetlere erişirler. ADSL ve telefon ile İnternete bağlanan bütün bilgisayarlar 

bu şekilde kullanıcı makineleridir. Alan adları yoktur. Sadece IP adresleri vardır. 

Dolayısıyla bu makinelerde web sunucusu çalıştırmak isabetli olmaz. Eğer bir web 

sunucusu çalıştırmak istersek, öncelikle web sunucusunun çalışacağı bilgisayarın statik 

bir IP adresinin olması gerekir. İkinci olarak ta bu bilgisayarın bir alan adının olması 

gerekir. 

Statik IP adresi hangi İnternet servis sağlayıcı yardımıyla İnternete bağlanılıyorsa 

ondan alınır. Örneğin Türkiye’deki üniversiteler UlakNET üzerinden İnternete 

bağlandıkları için statik IP adreslerini bu kuruluştan alırlar. Diğer yandan Türk 

Telekom’un TTNET ağı vasıtasıyla İnternete bağlanan özel kişi ve kuruluşlar da, statik 

IP adreslerini bu şirketten alırlar. 

Türkiye’deki alan adlarının tahsisini ise ODTÜ Alan Adı Yönetimi isimli bir 

kuruluş yapmaktadır. Bu kuruluş tr uzantısıyla biten alan adlarının yönetiminden ve 

tahsisinden sorumludur. Türkiye’deki alan adlarına iki örnek olarak www.mersin.edu.tr 

ve www.google.com.tr alan adlarını verebiliriz. Türkiye’deki bütün alan adları tr 

uzantısıyla biter. ODTÜ Alan Adı Yönetimi isimli kuruluş İnternet üzerinden alan adı 

tahsisi için başvuru kabul etmektedir. Bu kurulusun web adresi www.nic.tr ‘dir. Bu web 

sayfasından yeni alan adı almak için başvuru yapılabilir. 

Kendi web sunucusunu çalıştırmak isteyen bir kurum önce statik IP adresini ve 

alan adını alır. Sonra da bu alan adına ve IP adresine sahip bilgisayara web sunucusunu 

kurar. Daha sonra geliştirmiş oldukları web sayfalarını web sunucusuna yükler. Bu 

aşamadan sonra artık web sunucusunu sürekli çalışır halde tutarak İnternet üzerinden 

bütün insanların kendi web sayfalarına erişmelerini sağlarlar. 

Kendi web sunucusunu çalıştırmanın bir alternatifi ise, web sunucusu çalıştırma 

hizmeti veren şirketlerden bu hizmeti satın almaktır. Bu durumda alan adını yine kurum 

sahibi alır. Fakat bu alan adına gelecek web trafiğini web sunucusu hizmeti almış 

oldukları şirketin bilgisayarlarına yönlendirir. Şirketin web sayfasına koyacakları 

18


belgeleri de hizmeti almış oldukları şirketteki bilgisayarlara yüklerler. Böylece belirli bir 

ücret karşılığında web sunucusu başka bir şirketin makinelerinde çalıştırılabilir. Bu 

şekilde web sitesi sunma hizmeti veren çok sayıda firma vardır. Bu işleme İngilizce’de 

“web hosting” denilmektedir. Bu ifade artık Türkçe’de de yaygın olarak kullanılmaktadır. 

Bu tip bir firma ararken anahtar kelime olarak “web hosting” ifadesi kullanılabilir. 

2.5 Apache Web Sunucusu 

Apache web sunucusu açık kaynak kodlu ve bedava bir yazılımdır. Apache 

Foundation tarafından geliştirilmektedir. World Wide Web’in ilk gelişim yıllarından beri 

kullanılmakta olan bir sunucudur. Yaygın olan bütün bilgisayar platformlarında çalışır. 

Microsoft Windows, Linux, Unix, FreeBSD, Mac OS X ve daha birçok işletim 

sisteminde çalışır. Sunucuya bu ismin verilmesi bu projeyi geliştiren kişilerin 

Amerika’daki Apache Kızılderili kabilesine olan saygılarından ve onların isimlerini 

onure etme düşüncesinden kaynaklanmaktadır [3]. 

Apache web sunucusu hem statik hem de dinamik web sayfaları için 

kullanılabilir. Dinamik web sayfası üretilmesi gerektiği durumlarda, dinamik web sayfası 

üretimini yapması gereken PHP, ASP ve JSP gibi programlar için konfigür edilmesi 

gerekir. 

2.6 Apache Web Sunucusu Kurulum Programı İndirme 

Her ne kadar web sunucusu kurmak için öncelikle statik IP adresi ve alan adı 

almak gerekir ise de, kendi bilgisayarımıza deneme kurulumu yapabiliriz. Bu deneme 

kurulumu Apache sunucusunun nasıl kurulduğunu ve çalıştığını öğrenmemiz için güzel 

bir imkân olur. Onun için şu anda bu işlemi kendi bilgisayarınızda yapabilirsiniz. 

Öncelikle Apache web sunucusu yazılımını indirmeniz gerekir. Bunun için şu 

web sayfasına gidiniz: 

http://httpd.apache.org/download.cgi 

Bu web sayfasında Apache yazılımının en son sürümünü bulunuz. Ağustos 2009 

itibariyle en son sürüm 2.2.13’tür. Bu sayfada daha önceki birkaç sürüm daha 

bulunmaktadır. Bunlardan en büyük olanı en son sürümdür. En son sürümü altında ise 

çeşitli platformlar için seçenekler bulunmaktadır. Bunlardan Windows platformu için 

olan binary dosyayı seçiniz ve bu dosyayı indiriniz. Ağustos 2009 itibariyle bu dosya 

5.2MB büyüklüğündedir ve ismi ise şöyledir: 

apache_2.2.13-win32-x86-no_ssl.msi 

19


Bu dosya Windows platformunda çalıştırılabilir bir kurulum dosyasıdır. Yani bu 

dosyayı indirdikten sonra dosya adı üzerine çift tıklarsanız, kurulum programı başlar. Bu 

web sitesi Apache web sunucusunu geliştiren kuruluşun kendi sayfasıdır. Fakat bu 

dosyayı başka sitelerden de indirmeniz ya da bir arkadaşınızdan almanız mümkündür. 

Önemli olan kurulumu yapabilmek için bu dosyaya sahip olmanızdır. 

2.7 Apache Web Sunucusu Kurulumu 

Apache web sunucusu kurulum dosyasını indirildikten sonra, indirilen dosya 

üzerine çift tıklanarak kurulum işlemi başlatılır. Kurulum programı başlayınca Şekil 

2-1’de gözüken pencere gelir. Bu pencere Apache web sunucusunun bilgisayarınıza 

kurulacağını belirtiyor. Kurulumu başlatmak için “Next” butonuna tıklayınız. 

Şekil 2-1 Apache sunucusu kurulumu ilk adımı 

Kurulumun ikinci adımında Şekil 2-2’de gözüken pencere gelir. Bu pencere 

Apache web sunucusu lisans anlaşmasını kabul etmenizi istemektedir. Kurulumun 

yapılabilmesi için “I accept the terms in the license agreement” seçeneği işaretlenmelidir. 

Bu seçenek işaretlendikten sonra “Next” butonuna tıklayınız. 

20


Şekil 2-2 Apache sunucusu kurulumu ikinici adımı 

Bir sonraki adımda Şekil 2-3’teki pencere gelir. Bu pencerede Apache hakkında 

bilgi verilmektedir. Burada Next butonuna tıklayınız. 

Şekil 2-3 Apache web sunucusu kurulumu üçüncü basamağı 

Bir sonraki adımda Şekil 2-4’te görülen pencere gelir. Bu pencerede ilk satır ve 

ikinci satıra şekilde görüldüğü gibi “localhost” yazınız. Çünkü kurmuş olduğunuz 

web sunucusu kendi bilgisayarınızda çalışacaktır. Web sunucusuna dışardan kimse 

erişmeyecektir. Üçüncü satıra bir email adresi vermeniz gerekmektedir. Buraya bir email 

adresi yazınız. Aşağıdaki kurulumda email adresi olarak test@deneme.com adresi 

verilmistir. Bu penceredeki bir diğer önemli nokta ise pencerenin alt kısmında bulunan 

iki seçenektir. Bunlardan varsayılan olarak gelen for All Users diye başlayan 

seçeneği seçmeniz işinizi kolaylaştıracaktır. Daha sonra “Next” tuşuna basınız. 

21


Şekil 2-4 Apache web sunucusu kurulumu dördüncü basamağı 

Bir sonraki aşamada Şekil 2-5’te gözüken pencere gelir. Burada varsayılan olarak 

gelen Typical seçeneği işaretli olarak kalabilir. “Next” butonuna tıklayınız. 

Şekil 2-5 Apache web sunucusu kurulumu beşinci basamağı 

Bir sonraki adımda Şekil 2-6’da gözüken pencere gelir. Burda kurulumun 

yapılacağı dizini size bildirmektedir. Bu kurulumda Apache web sunucusu şu dizine 

C:\Program Files\Apache Software Foundation\Apache2.2\ 

kurulacaktır. Burada bir değişiklik yapmanıza gerek yoktur. “Next” butonuna tıklayınız. 

22


Şekil 2-6 Apache web sunucusu kurulumu altıncı basamağı 

Daha sonraki adımda Şekil 2-7’de gözüken pencere gelir. Bu pencere artık bütün 

seçimlerin yapıldığını ve kurulumun başlayacağını göstermektedir. Bu pencerede 

kurulumu başlatmak için Install butonuna tıklayınız. 

Şekil 2-7 Apache web sunucusu kurulumu yedinci basamağı 

Bir önceki basamakta Install butonuna tıklanınca kurulum işlemi başlar. Kurulum 

yapılırken küçük pencerede kurulum hakkında bilgi verilerek kurulum devam eder. 

Kurulum bitince Şekil 2-8’de gözüken pencere gelir. Bu pencerede Finish butonuna 

basılarak Apache web sunucusu kurulumu tamamlanır. 

23


Şekil 2-8 Apache web sunucusu kurulumu son basamağı 

2.8 Apache Web Sunucusu Kurulum Kontrolü 

Apache kurulumunun en son aşamasında kurulumun başarıyla tamamlanıp 

tamamlanmadığını kontrol etmek kalmıştır. Bunun için bilgisayarınızda bulunan bir web 

tarayıcısını çalıştırırız. Bu Internet Explorer ya da Firefox olabilir. Daha sonra 

tarayıcınızın adres çubuğuna: 

http://localhost/ 

adresini yazıp enter tuşuna basınız. Bunun sonunda tarayıcının Şekil 2-9’da olduğu gibi 

bir sayfa göstermelidir. Eğer bu sayfayı görürseniz web sunucusu bilgisayarınıza 

başarıyla kurulmuş ve çalışıyor demektir. 

Şekil 2-9 Web sunucusu kontrolü 

24


Artık bilgisayarınızda Apache web sunucusu çalışmaktadır. Bundan sonra 

bilgisayarınızı her açtığınızda web sunucusu çalışmaya başlayacaktır. Web sunucusunun 

çalışıp çalışmadığını her zaman bu şekilde kontrol edebilirsiniz. 

Eğer web sunucusunu kurmanızda bir hata oluşmuşsa ve web sunucusu 

bilgisayarınızda çalışmıyorsa bu durumda Şekil 2-9’daki sayfa yerine Şekil 2-10’daki 

gibi bir sayfa ile karşılaşırsınız. Bu sayfada “It Works” yazısı yoktur. Bunun yerine bir 

hata mesajı vardır. Bu hata mesajı kullandığınız tarayıcıya göre değişebilir. 

Eğer web sunucusu bilgisayarınıza başarılı bir şekilde kurulmamışsa web 

sunucusunu Program Ekle/Kaldır kısmından kaldırıp, sonra tekrar kurabilirsiniz. Tekrar 

kurulum yaparken yukarda anlatılan adımları tek tek doğru bir şekilde takip ediniz. 

Şekil 2-10 Web sunucusu çalışmıyor 

2.9 Apache Web Sunucusu Durdurma ve Başlatma 

Apache web sunucusu bilgisayarınıza kurulduktan sonra bilgisayarınızı her 

çalıştırdığınızda kendisi otomatik olarak çalışacaktır. Bu programı durdurmak veya tekrar 

başlatmak için ekranın sağ alt kısmında çalışan “Apache Monitor” programını 

kullanabilirsiniz. Bu programın ikonu üzerinde farenin sağ tuşuna tıkladığınızda size üç 

seçenek gösterecektir. Bunlar start, stop ve restart seçenekleridir. Bu seçenekleri 

kullanarak web sunucusunu durdurabilir, duran sunucuyu başlatabilir veya çalışan 

sunucuyu tekrar başlatabilirsiniz. 

2.10 Apache Web Sunucusuna Sayfa Yükleme 

Bilgisayarınıza kurmuş olduğunuz web sunucusuna yeni sayfalar yükleyebilir ve 

yüklediğiniz bu sayfaları tarayıcınızla görüntüleyebilirsiniz. 

25


Web sunucusu kendisinden bir sayfa istenildiğinde o sayfayı ana belge dizininde 

arar. Eğer istenilen belge varsa kullanıcıya döndürür. Yoksa bir hata mesajı verir. 

Örneğin siz tarayıcınızın adres çubuğuna 

http://localhost/test123.html 

yazarsanız, web sunucunuz tarayıcıya bir hata mesajı gönderir. Bu şekilde bir belge 

bulamadım der. 

Web sunucusunun ana belge dizini, web sunucusunun kurulmuş olduğu dizinin 

altındaki “htdocs” isimli dizindir. Bizim kurulumumuzda bu dizinin tam yolu şu 

şekildedir: 

C:\Program Files\Apache Software 

Foundation\Apache2.2\htdocs 

Web sunucusu kendisinden istenilen belgeleri bu dizin altında arar. Şimdi bu dizine bir 

html belgesi koyalım ve bu belgeyi tarayıcı ile görüntüleyelim. Bunun için bir metin 

editöründe Tablo 2-1’de gözüken basit bir html belgesini yazınız. Notepad programını bu 

iş için kullanabilirsiniz. 

 

 

ilk HTML sayfam 

 

 

Herkese Merhaba 

Web sayfası oluşturmak gercekten çok 

güzel. 

 

 

Tablo 2-1 Örnek bir html sayfası 

Bu belgeyi deneme.html adıyla htdocs dizini altına kaydediniz. Notepad 

programı ile kaydederken uzantının txt yerine html olmasına özen gösteriniz. Bunun 

için Farklı kaydet seçeneğini seçip Farklı Kaydetme Tipi olarak bütün dosya tiplerini 

seçiniz. 

Artık bu html dosyasını tarayıcı ile web sunucusundan alıp görüntüleyebilirsiniz. 

Bunun için web tarayıcısının adres çubuğuna 

http://localhost/deneme.html 

26


adresini yazınız. Bu durumda tarayıcı web sunucusundan deneme.html 

dosyasını alıp görüntüleyecektir. Sonuç Şekil 2-11’de gözüktüğü gibi olacaktır. Eğer 

sonuç Şekil 2-11’deki gibi bir sayfa değilse, ya dosyanızın uzantısı html değildir ya da 

dosyanızı yanlış dizine koymuşsunuz demektir. Diğer bir ihtimal de web sunucunuzun 

çalışmıyor olmasıdır. 

Şekil 2-11 Web suncusuna sayfa yükleme 

Web sunucusunun ana belge dizini altında yeni dizinler de oluşturabilirsiniz. Bu 

durumda tarayıcıya yazdığınız adres kısmında alt dizinlerin adını da belirtmelisiniz. 

Örneğin htdocs dizini altında test isimli bir dizin olusturabilirsiniz. Yukarda 

oluşturmuş olduğunuz deneme.html dosyasını bu dizin içine kopyalayınız. Bu durumda 

test dizini altındaki deneme.html dosyasını tarayıcı ile şu şekilde isteyebilirsiniz: 

http://localhost/test/deneme.html 

Artık web sunucusu deneme.html dosyasını ararkan ana dizini olan htdocs 

dizini altındaki test dizini içine bakacaktır. Bu şekilde htdocs dizini içinde çok farklı 

dizinler oluşturulabilir. Benzer şekilde bu alt dizinler içinde de alt dizinler oluşturulabilir. 

Örnek olarak test dizini içinde ders1 adında bir alt dizin oluşturabilirsiniz. Bu 

ders1 dizini içine mersin.html isimli bir dosya kaydederseniz, bu dosyaya erişmek 

için tarayıcıya artık şu adresi yazmamız gerekir: 

http://localhost/test/ders1/mersin.html 

Eğer bütün bu işlemleri gerçek bir alan adı olan bir bilgisayarda yapsaydınız, artık 

bu dosyalara İnternet üzerinden tarayıcı ile alan adı kullanarak erişebilirdiniz. O durumda 

sadece adresin localhost kısmına gerçek alan adını yazmanız yeterli olurdu. Örneğin alan 

adınız www.sirketdeneme.com.tr ise, mersin.html dosyasına şu şekilde erişebilirdiniz: 

27


http://www.sirketdeneme.com.tr/test/ders1/mersin.html 

Web sunucusuna sadece http://localhost yazıldığında web sunucusu ana 

dizini altındaki index.html isimli belgeyi döndürür. Web sunucusunun htdocs 

dizinine bakıldığında orada index.html isimli bir dosya olduğu görülür. Genel bir kural 

olarak web sunucuları dosya ismi verilmeden sadece dizin ismi verilerek belge istenirse, 

o dizin altındaki index.html isimli dosyayı döndürür. 

2.11 Apache Sunucusu Konfigürasyonu 

Apache web sunucusunun bazı özelliklerini değiştirmek isterseniz, bunu Apache 

sunucunun kurulduğu ana dizin içindeki conf alt dizini içinde bulunan httpd.conf 

dosyasını değiştirerek yapabilirsiniz. Bu dosya bu kurulumda şu adreste bulunmaktadır: 

C:\Program Files\Apache Software 

Foundation\Apache2.2\conf\httpd.conf 

Örneğin Apache sunucusu normalde port 80’de çalışır. Eğer bunu herhangi bir 

sebeple değiştirmek isterseniz, bu dosya içindeki port değerini değiştirerek yapabilirsiniz. 

Ya da web sunucusu belgeleri htdocs dizininden değil de başka bir dizinden servis yapsın 

isterseniz, bunu bu dosya içindeki DocumentRoot değişkeninin değerini değiştirerek 

yapabilirsiniz. 

Bu konfigürasyon dosyasındaki herhangi bir değeri değiştirmeden önce bu 

dosyanın bir kopyasını mutlaka alınız. Daha sonra bir problem olursa, bu kopyayı tekrar 

yerine koyunuz. Böylelikle yaşanabilecek problemleri azaltmış olursunuz. Bir diğer 

önemli nokta ise, mecbur kalmadıkça ve emin olmadıkça bu dosyayı değiştirmemenizdir. 

Bu konfigürasyon dosyasında bir değişiklik yapılınca Apache web sunucusu 

durdurulup tekrar başlatılmalıdır. Aksi takdirde yapılan değişiklikler etki göstermez. 

2.12 MS-IIS (İnternet Information Services) Sunucusu Kurulumu 

Apache web sunucusundan sonra en popüler ikinci web sunucusu MS-IIS web 

sunucusudur. Bu sunucu Windows XP için kurulum dosyasıyla beraber gelir. Ayrıca 

download edilemez. Onun için bu web sunucusunu kurmak için işletim sisteminin 

kurulum dosyasına ihtiyaç vardır. 

MS-IIS web sunucusunu kurmak için Windows XP bilgisayarında 

1. Kontrol panel kısmını açınız 

2. Burada program ekle/kaldır kısmına gidiniz. 

28


3. Bu pencerede Windows komponent ekle/kaldır kısmını seçiniz 

4. Gelen pencerede Internet Information Services kısmını işaretleyiniz ve diğer 

seçeneklere hiç dokunmadan next tuşuna basınız. 

5. Bu noktada Windows XP Pro kurulum dosyasını ister. Onu CD okuyucuya 

koyunuz. 

6. Bu şekilde MS-IIS web sunucusunu kurabilirsiniz. 

Bu web sunucusunu kurduktan sonra artık Apache’de olduğu gibi web 

tarayıcınızla http://localhost adresine giderek web sunucusunun çalışıp çalışmadığını 

görebilirsiniz. Fakat Apache web sunucusu bilgisayarınızda çalışıyorsa, aynı anda MS- 

IIS sunucusunu çalıştıramazsınız. Çünkü 80. portu Apache kullanmaktadır. Aynı portu 

MS-IIS sunucusu da kullanmak isteyecektir. Ama kullanamadığı için başlayamayacaktır. 

Bunun için önce Apache sunucusunu durdurmanız gerekmektedir. 

2.13 PSPad Editörü 

HTML sayfaları her hangi bir metin editörü kullanılarak yazılabilir. Fakat HTML 

kodu yazmak için çok farklı editörler geliştirilmiştir. Bu editörler kod yazma işlemini 

kolaylaştırmak için çeşitli hizmetler sunarlar. Örneğin HTML komutlarını farklı renkte 

gösterirler. Böylece yazılan HTML sayfalarının anlaşılması daha kolay olur. 

HTML editörlerinden ücretle satılanlar vardır. Diğer yönden bedava olan bazı 

editörler de mevcuttur. Bu ders kapsamında göreceğimiz sayfaları bedava bir HTML 

editörü kullanarak ta yazabilirsiniz. Bedava HTML editörlerinden birisi PSPad isimli 

editördür. Bu editör gayet basit olup ücretsizdir. Bu editörün web sitesi www.pspad.com 

adresidir. Bu sitenin donwload bölümünün adresi ise şöyledir: 

http://www.pspad.com/en/download.php 

Bu sayfadaki Installer seçeneği seçilerek bu editörü indirebilirsiniz. Daha sonra da 

indirilen dosyayı çalıştırılarak kurabilirsiniz. 

Bu editör kurulduktan sonra kullanılması gayet kolaydır. Notepad gibi her hangi 

bir metin editörü ile kullanım tecrübesi olan bir kullanıcı kolaylıkla bu editörü 

kullanabilir. 

29



[1] http://en.wikipedia.org/wiki/Usage_share_of_web_browsers, Usage share of web 

browsers, 18 Ağustos 2009. 

[2] http://survey.netcraft.com/Reports/200704/byserver, Netcraft Web Server Survey, 18 

Ağustos 2009. 

[3] http://www.apache.org/foundation/faq.html#name, Frequently Asked Questions, 19 

Ağustos 2009. 

30


Bölüm 3 

3.1 Amaç 

HTML 

Bu bölümde amacımız HTML dilinin temel özelliklerini anlatma, bu dilin çalışma 

şeklini açıklama ve öğrencilerin bu dili kullanabilmesi için gerekli temel bilgileri onlara 

sunmaktır. Bu amaçla önce HTML dilini kullanarak basit bir sayfa oluşturma anlatılmış, 

HTML dilindeki birçok im gösterilmiş, HTML belgelerinin ana yapısı açıklanmıştır. 

Sonra HTML dilinin metin biçimlendirme özellikleri işlenmiş ve HTML elemanlarının 

öznitelikleri anlatılmıştır. HTML dilinde renk gösterimi ve web sayfalarının arka plan 

rengini ayarlama açıklanmıştır. Ayrıca web sayfalarında bağlantı oluşturma ve bağlantı 

kullanımı anlatılmıştır. 

3.2 Giriş 

HTML (Hypertext Markup Language) web sayfası oluşturmak için kullanılan en 

yaygın sayfa düzenleme dilidir. HTML C, C++, C#, Java gibi bir programlama dili 

değildir. HTML bir sayfa düzenleme dilidir. Bir sayfadaki bilgilerin (metin, resim, 

tablolar, video, vb.) kullanıcıya nasıl gözükmesi gerektiğini düzenler. Sayfadaki hangi 

metin başlık olarak gözükecek, hangisi paragraf olacak, hangi bilgiler tablo halinde 

gösterilecek, nereye resim konulacak, vb. Diğer yandan programlama dilleri ise 

bilgisayarlarda çalışmak üzere programlar yazmak için kullanılır. Yazılan programları 

çalıştırarak bir problemi bilgisayar ortamında çözeriz. HTML ile bir program yazmak 

mümkün değildir. HTML dilinin temel amacı bir veriyi kullanıcıya daha okunaklı ve 

düzenli bir şekilde sunmaktır. 

1990’lı yıllara gelindiğinde İnternet hızla yayılma evresindeydi. Özellikle 

araştırmacılar tarafından sıklıkla kullanılmaktaydı. Uzak noktalardaki araştırmacılar bilgi 

paylaşımı için E-posta ve FTP dosya transfer sistemlerini kullanmaktaydılar. Bilgi 

31


paylaşım ihtiyacının ve imkânlarının artması bu sistemlerden daha etkin ve kullanımı 

kolay bilgi paylaşma tekniklerinin geliştirilmesini teşvik etti. Bu dönemde Avrupa 

Nükleer Araştırma Kurumunda (CERN) çalışan Tim Berners-Lee araştırmacılar 

arasındaki bilgi paylaşımını daha etkin hale getirmek için HTML veri düzenleme ve 

HTTP veri transfer protokollerini geliştirdi [1]. HTML dili verinin düzenlemesinde 

kullanılırken, HTTP ise bu verinin bir noktadan diğerine aktarılmasında 

kullanılmaktaydı. HTML dilinin ilk versiyonu 1993 yılında basıldı. Daha sonra HTML 

dilinin gelişimini World Wide Web Consortium (W3C) devraldı. Şu anda en yaygın 

kullanılmakta olan versiyonu HTML 4 olup 1999 yılında basılmıştır [2]. Halen HTML 

dilinin 5. versiyonu üzerindeki çalışmalar W3C koordinasyonu altında devam etmektedir 

[3]. 

3.3 Web Tarayıcıları 

Bir dosya HTML dilinin imleriyle yazıldıktan sonra bu HTML dosyasının uygun 

bir program tarafından kullanıcıya gösterilmesi gerekir. Bu program HTML komutlarını 

yani imlerini okuyup yorumlar ve ona göre kullanıcıya düzenlenmiş bir sayfa sunar. Bu 

tür programlara web tarayıcıları diyoruz. Su anda en yaygın kullanılan web tarayıcıları 

Microsoft İnternet Explorer ve Mozilla Firefox programlarıdır [4]. 

Web tarayıcılarının temelde iki ana görevleri vardır. Bunlardan ilki web sayfası 

transferidir. Bir kullanıcı bir web sayfasını görmek istediği zaman, istenilen dosyayı web 

tarayıcısı önce bu dosyanın bulunduğu web sunucusundan kendi bilgisayarına transfer 

eder. Bu işlemi HTTP dosya transfer protokolünü kullanarak yapar [5]. İkinci işlevi ise, 

indirmiş olduğu bu dosyayı kullanıcıya web sayfası halinde sunmaktır. Web tarayıcısı 

dosya transfer işlevini HTTP protokolünü kullanarak yaparken, kullanıcıya bilgi sunma 

işlevini ise HTML dilini kullanarak yapar [2]. 

3.4 HTML ile basit bir web sayfası oluşturma 

HTML dilini kullanarak basit bir web sayfasını Tablo 3-1’deki gibi yazabiliriz. 

Şimdi bu metni bir web sayfası olarak bilgisayarımıza kaydedelim. Bunun için: 

• PSPad editörünü başlatını. “Dosya” menüsünden “Yeni Dosya” elemanını 

seçeneğini seçiniz. Gelen dosya tipleri arasından “HTML” tipini seçiniz. 

• PSPad editörü içine aşağıdaki tablodaki metni yazınız veya kopyalayıp 

yapıştırınız. 

• PSPad editöründe yukardaki menü elemanlarından “biçim” elemanı altındaki 

“UTF-8” seçeneğini seçiniz. 

• Daha sonra bu dosyayı merhaba.html ismiyle kaydediniz. 

32


Eğer bu dosyayı oluşturmak için PSPad editörü yerine Notepad editörünü 

kullandıysanız, bu isimle dosyayı kaydederken dosya çeşidi kısmında bütün dosya tipleri 

seçeneğini seçmeyi unutmayınız. Yoksa bu dosya merhaba.html.txt olarak 

kaydedilebilir. PSPad editöründe bu şekilde bir problem yoktur. 

 

 

Basit bir HTML sayfası. 

 

 

 

Herkese Merhaba 

Bu benim ilk web sayfam. Web sayfası 

oluşturmak gerçekten çok güzel. 

 

 

Tablo 3-1 Basit bir HTML sayfası kodu 

Bu metinde görmüş olduğunuz küçüktür işaretiyle başlayıp büyüktür işaretiyle 

biten ifadeler HTML imleridir. Bu metindeki html imleri şunlardır: , , 

, , , , , . Bu imler belge içindeki bilgileri 

tanımlarlar ve kullanıcıya bu bilgilerin nasıl gösterileceklerini bildirirler. İmlerin 

kendileri tarayıcı içinde gözükmezler. İmler sadece tarayıcının sayfa düzenlemesini nasıl 

yapması gerektiği ile ilgili komutlardır. 

Şimdi bu basit web sayfasının tarayıcı içinde nasıl gözükeceğini görelim. Bu 

sayfayı tarayıcı içinde görüntülemenin iki farklı metodu vardır. Bunlardan ilki bu sayfayı 

kendi bilgisayarınızda kurmuş olduğunuz web sunucusundan istemektir. Bunun için 

öncelikle merhaba.html dosyasını web sunucusu ana belge dizini içine, yani htdocs 

dizinine kopyalayınız. Sonra web sunucunuzun çalışıyor olduğundan emin olduktan 

sonra, tarayıcınızı çalıştırınız ve tarayıcınızın adres çubuğuna 

http://localhost/merhaba.html yazınız. Enter tuşuna bastığınızda bu sayfa tarayıcı içinde 

Şekil 3-1’deki gibi gözükecektir. 

Bu sayfayı tarayıcı içinde görüntülemenin ikinci yöntemi ise, web sunucusunu hiç 

kullanmadan tarayıcıyla bu sayfayı direk olarak açmaktır. Bunun için bilgisayarınızda 

web sunucusunun kurulu olmasına da gerek yoktur. Öncelikle merhaba.html dosyasını 

bilgisayarınızda her hangi bir kaydedebilirsiniz. Bu dosyanın web sunucusu ana dizini 

altında olmasına ya da başka özel bir dizinde olmasına gerek yoktur. Herhangi bir dizin 

içinde olabilir. Tek yapmamız gereken web tarayıcısını çalıştırmak ve tarayıcınızın dosya 

menüsünden dosya aç seçeneğini seçmek. Sonra da gelen pencerede merhaba.html 

dosyasını seçmek. Bu durumda tarayıcı merhaba.html dosyasını web sunucusundan 

almaz. Direk olarak işletim sisteminden alır. Yine sayfa tarayıcı içinde Şekil 3-1’deki gibi 

gözükür. Tek fark tarayıcı adres çubuğunda http://localhost/merhaba.html yerine 

dosyanın yolu ve adının yazmasıdır. Bu ikinci yöntemin bir kısa yolu Windows 

33


gezgininde merhaba.html dosyası üzerine çift tıklamaktır. Bu şekilde de yine bu sayfayı 

tarayıcı içinde görüntüleyebilirsiniz. 

Bu dersimizde oluşturacağınız sayfaları her iki yöntemle de çalıştırabilirsiniz. 

Hangisi sizin için daha kolay geliyorsa onu kullanabilirsiniz. 

Şekil 3-1 İlk HTML sayfası örneği 

HTML Belgesi başlangıç ve bitiş imleri: ve 

HTML imlerinin kendileri web tarayıcısı içinde gözükmezler. HTML imleri 

tarayıcıya ne yapmaları gerektiğini bildirirler. Bu belgedeki imi bu sayfanın 

başlangıcını, imi ise bu sayfanın bitimini gösterir. Yani imi başlangıç 

imi imi ise bitiş imidir. Dolayısıyla her zaman bir html belgesindeki bütün 

bilgiler bu iki html imi arasında olmalıdır. 

HTML Belgesi Baş ve Gövde İmleri: ve 

Her html belgesi iki ana bölümden oluşur. İlk bölüm baş kısımdır. İkinci bölüm 

ise gövde kısmıdır. Baş kısmı imiyle başlar ve imiyle biter. Dolayısıyla 

baş kısma ait bilgiler bu iki im arasında olmalıdır. Bir belgenin baş kısmına bu belgeyle 

ilgili genel bilgiler konulur. Bu bilgiler tarayıcı içinde gösterilmezler. Belgenin gövde 

kısmı ise imiyle başlar ve imiyle biter. Gövde kısmına tarayıcı içinde 

gösterilecek bilgiler konulur. 

Örnekteki Diğer imler 

Yukarıdaki basit HTML sayfası örneğindeki diğer imlerden imi, bu 

belgenin başlığını gösteren imdir. Başlık imi içindeki metin web tarayıcısının içinde değil 

ama en tepesinde gözükür. Yukarıdaki tarayıcı resminde tarayıcının en üstündeki mavi 

kısımda başlık metnini görebilirsiniz. Dolayısıyla web tarayıcısının en tepesinde görmek 

istediğiniz metni başlık imi arasına koymalısınız. Metin gövdesindeki , ve 

imleri metin biçimlendirme imleridir. sayfa içindeki metnin başlığını gösterir. 

34


Bu durumda imi arasındaki metnin diğer metinlerden çok daha büyük puntolarla 

yazıldığına dikkat ediniz. imi metnin yatay düzlemde merkezde gösterilmesi 

gerektiğini belirtir. Yani metin solda ya da sağda değil de merkezde gösterilmelidir. Bu 

durumda ile arasındaki metnin yatay düzlemde web tarayıcısının 

merkezinde gösterildiğine dikkat ediniz. imi ile im çifti ise bir paragrafı 

tanımlar. Bu iki im arasındaki metnin bir paragraf olduğunu belirtir. 


Yukarıdaki örnekte görmüş olduğunuz; , , , , 

, , imlerini kullanarak çok paragraflı örnek web sayfaları 

yapınız ve bu web sayfalarını tarayıcı içinde görüntüleyiniz? 

3.5 Web sayfası belgelerinin uzantıları 

Web sayfası dosyalarının iki tür uzantısı olabilir. Bunlardan birisi html diğeri ise 

htm uzantılarıdır. Örneğin yukarıdaki merhaba.html dosyasında uzantı tipi html olarak 

seçilmiştir. Aynı dosya merhaba.htm olarak ta isimlendirilebilirdi. 

Diğer yandan bu iki tip isimlendirme statik web sayfaları için geçerlidir. Yani 

web sunucusu tarafından çalışma anında üretilmeyen dosyalar için geçerlidir. Dinamik 

html belgelerinin çok çeşitli uzantıları olabilir. Bu tip belgeler üretildikleri programa göre 

farklı uzantılar alırlar. Mesela PHP programı tarafından dinamik olarak üretilen 

belgelerin uzantıları php seklindedir. 

3.6 Web tarayıcısı ile Web sayfası kaynak kodu görüntüleme 

Web tarayıcısı kullanıcıya web sunucusundan almış olduğu sayfayı düzenlenmiş 

olarak gösterir. Fakat bazı durumlarda web tasarımcısı sayfanın kaynak kodunu HTML 

imleriyle birlikte görmek ister. Bunun için bütün web tarayıcıları web sayfalarının kaynak 

kodlarının görüntülemesine imkan verir. 

Örnek Uygulama 

Firefox web tarayıcısında yukarıdaki sayfayı görüntülerken tarayıcının 

“Görünüm” menüsünden “Sayfa kaynağını göster” seçeneğini seçiniz. Bu durumda o 

anda göstermekte olduğu web sayfasının kaynak kodunu html imleriyle birlikte size 

gösterir. Yeni bir pencerede html kodunu Şekil 3-2’deki gibi gösterilir. Firefox tarayıcısı 

ile sayfa kaynak kodunu görüntülemenin ikinci bir yöntemi de fare tarayıcı içinde bir 

noktayı gösterirken sağ fare tuşuna tıklamak ve açılan menüden “Sayfa kaynağını göster” 

seçeneğini seçmektir. Benzer şekilde Internet Explorer ile de sayfa kaynak kodu fare sağ 

tuşuna tıklayarak ve “Kaynağı görüntüle” seçeneği seçilerek görüntülenebilir. 

35


3.7 HTML imleri 

Şekil 3-2 Web sayfalarının kaynak kodunu görüntüleme 

HTML imleri web tarayıcısında gözükecek bilgileri düzenlemek için kullanılır. 

Kendileri web tarayıcısı içinde gözükmezler. HTML imleri küçüktür ve büyüktür 

işaretleri arasında olur. Örneğin gibi. Bu imler HTML standardında [2] 

tanımlanmışlardır. 

HTML imleri genellikle bir çift halinde kullanılır. Birisi imin başlangıcını, diğeri ise 

imin bitimini gösterir. Örnek: 

Basit bir HTML sayfası. . 

Bitim iminde küçüktür işaretinden sonra bir de taksim işareti vardır. Bu ekstra 

taksim işareti bu imin başlangıç değil de bitim imi olduğunu gösterir. 

İki HTML imi arasında bulunan bilgiye im içeriği denilir. Bir imin içeriği başlangıç 

imi ile başlar ve bitiş imi ile sona erer. 

HTML imleri harf kipine duyarsızdırlar. Yani ile , veya 

aynı imi gösterir. Fakat belgelerimizde her zaman aynı tarzı kullanmak iyi bir 

alışkanlık olur. Yoksa belgelerimizin okunulurluğu azalır. Onun için belgelerinizde 

sürekli olarak ya küçük harflerden oluşa imleri ya da tamamen büyük harflerden oluşan 

imleri kullanınız. Küçük harfleri yazmak büyük harflere göre daha kolay olduğu için 

küçük harflerle yazılmış imleri tercih edilebilir. Diğer yandan büyük harflerle yazılmış 

imler daha kolay okunabilir. Önemli olan her zaman aynı şekilde belgelerinizi yazmaktır. 

3.8 HTML Elemanları 

HTML elemanları HTML imleriyle oluşturulurlar. Bir HTML belgesi HTML 

elemanlarından oluşur. HTML elemanları arasında bir hiyerarşik yapı vardır. 

36


Bir HTML belgesi iki HTML elemanından oluşur: head elemanı yani baş elemanı 

ve body elemanı yani gövde elemanı. Baş ve gövde elemanlarının da kendi içlerinde 

başka elemanları vardır. Mesela yukarıdaki basit web sayfası örneğinde baş elemanı 

içinde bir title yani başlık elemanı vardır. Yine aynı HTML belgesindeki gövde 

elemanı içinde bir h1 elemanı ve bir paragraf elemanı vardır. Dolayısıyla HTML 

elemanları arasında bir hiyerarşik yapı vardır ve tüm elemanlar HTML belgesi içindedir. 

Aynı şekilde metnin gövde kısmındaki tüm elemanlar da gövde elemanı içindedir. 

3.9 HTML Belgesi Baş kısmı 

HTML belgesinin baş kısmında sadece sınırlı sayıdaki imler kullanılabilir. Çünkü 

bu kısımdaki bilgiler tarayıcı içinde gösterilmek için değildir. Bu kısımdaki bilgiler bu 

html belgesiyle ile bilgilerdir. 

HTML standardı baş kısmında kullanılmak için şu imleri tanımlar: , 

, , , , ve . 

imi daha önce belirttiğimiz gibi bir belgenin başlığını tanımlamak için 

kullanılır. Bu imle tanımlanan başlık web tarayıcısı penceresinin en üst kısmında 

gösterilir. 

imi bir web sayfası hakkında anahtar bilgiler içerir. Bu bilgiler daha çok 

arama motorları tarafından kullanılır. Örneğin çiçeklerle ilgili bilgiler içeren bir web 

sayfası olsun. Bu durumda meta imi arasına bu sayfada anlatılan çiçeklerin ismi 

yazılabilir. Böylelikle arama motorları bu sayfayı indekslerken bu bilgiyi dikkate alırlar. 

imi bir sayfadaki bütün bağlantılar için taban olacak bağlantıyı tanımlar. 

Örneğin bir web sayfası içinden http://www.mersin.edu.tr/resimler/kampus.gif ve 

http://www.mersin.edu.tr/resimler/lab.gif resim dosyalarına bağlantılar bulunsun. Hatta 

aynı dizindeki başka resim dosyalarına da bağlantılar bulunsun. Bu durumda bu 

bağlantıların bulunduğu dizini base imi ile tanımladığımız takdirde, artık bu bağlantıların 

tüm adresini bağlantı oluştururken yazmak durumunda kalmayız. İlerleyen bölümlerde 

bunu daha geniş göreceğiz. 

, , ve imlerini de gelecek bölümlerde konusu 

geldikçe göreceğiz. 

3.10 HTML Metin Biçimlendirme Elemanları 

HTML dili belgelerde başlıklar veya paragraflar oluşturmak, metinleri koyu, italik 

veya altı çizili yapmak gibi çeşitli metin biçimlendirme imkânları sunarlar. 

Tablo 3-2’deki HTML belgesini bir metin editörü ile oluşturunuz. 

37


 

 

 

Mersin ili 

 

 

 

Mersin 

Mersin, Türkiye'nin güneyinde Akdeniz'e kıyısı bulunan Antalya 

ve Adana'nın ortasında yer alan bir ildir. Mersin'in tarih 

sahnesine çıkışı 19. yüzyılın ortalarına rastlamaktadır. Bu dönemde 

henüz bir köy olan bölge, göçmen bir Türkmen aşiretine ev sahipliği 

yapar ve adını da bu aşiretten alır. Uzun yıllar İçel adıyla 

bilinen il son yıllarda merkez ilçesi olan Mersin'in adını 

almıştır. 

İlçeleri 

Mersin ilinin 9 tane ilçesi vardır. Bunlar; Anamur, 

Aydıncık, Bozyazı, Çamlıyayla, Erdemli, Gülnar, Mut, Silifke ve 

Tarsus'tur. 

Yöresel Yemekleri 

Kendine özgü yemeği olan tantuni ile tatlıları 

cezerye ve kerebiç çok meşhurdur. Ayrıca, kuş gözü, 

telatür, eğe (kaburga) dolması, bandırma, yüzük çorbası, keşkek, 

övelemeç ve batırık özel yöresel yemeklerindendir. 

 

 

Tablo 3-2 Biçimlendirilmiş metin için örnek web sayfası kodu 

Bu belgeyi bilgisayarınıza kaydedip web tarayıcınızla görüntülerseniz Şekil 

3-3’teki gibi görünür. 

HTML Başlık Elemanları 

Şekil 3-3 HTML İle Metin Biçimlendirme 

38


Bu HTML belgesinde iki tip başlık elemanı vardır. Bunlardan ilki belge 

gövdesinin başında bulunan Mersin metnidir. Mersin 

seklinde yazılmıştır. imi bir başlık elemanı tanımlar. Dolayısıyla im çifti 

içinde kalan metin başlık olarak tanımlanmış olur. Bu im içinde bulunan imi 

ise, bu im çifti içinde kalan elemanın ekranda yatay düzlemde ortada gözükmesini sağlar. 

İkinci tip başlık elemanından iki tane vardır. Bunlar paragrafların başlarında 

bulunan alt başlıklardır. Bunlardan ilki İlceleri olarak tanımlanmıştır. Bu 

başlıkların çeşidi tipidir. başlığının derecesi başlığına göre daha 

düşüktür. Dolayısıyla olarak tanımlanmış bir metin ekranda olarak 

tanımlanmış başlığa göre biraz daha küçük puntolarla gözükür. Bir belgede genel olarak 

belgenin ana başlığı olarak tanımlanır. Sonra bir alt dereceden olan başlıklar 

olarak tanımlanır. Sonra daha alt dereceden olan başlıklar olarak tanımlanır. Bu 

şekilde , , ve tipi başlıklar da tanımlanabilirler. Başlıkların derecesi 

düştükçe gösterilecek metnin puntosu da küçülür. 


7 değişik başlık tipini kendi oluşturacağınız örnek bir HTML belgesi içinde 

kullanarak bunların aralarındaki farkı gözlemleyiniz? 

Metin Biçimlendirmeleri 

Yukardaki belgede bazı metinler tarayıcı içinde koyu, bazıları altı çizili, bazıları 

da italik olarak gösterilmiştir. Örneğin son paragraftaki “tantuni”, “cezerye” ve “kerebiç” 

kelimeleri koyu gözükmektedir. HTML belgesine baktığımızda bu kelimelerin etrafında 

imi olduğunu görürüz. Dolayısıyla imi bir metnin koyu gözükmesi için 

kullanılır. Benzer şekilde imi metinlerin italik, yani öne eğik, imi ise altı çizili 

olarak gözükmesini sağlar. Bu imler birbirleriyle birlikte de kullanılabilirler. Örneğin ilçe 

isimleri hem koyu hem de italik yapılmışlardır. 

Metinleri koyu yapmak için imine ek olarak imi de kullanılabilir. 

Benzer şekilde metinleri italik yapmak için imine ek olarak imi de 

kullanılabilir. Bu imler yaklaşık aynı sonucu üretirler. 

Başlık olmayan bir metnin etrafındaki metinden biraz daha büyük gözükmesini 

istersek bunu imiyle yapabiliriz. Benzer şekilde bir metni etrafındaki metinden 

biraz daha küçük olmasını istersek bunu imiyle yapabiliriz. 

HTML bazı metinleri alt veya üst metin olarak tanımlamamıza da olanak sağlar. 

Üst metin diğer metinlerden biraz daha yukarda ve küçük olan metinlerdir. Örneğin x 2 

ifadesindeki 2 karakteri üst metindir. Alt metin ise diğer metinlerden biraz daha aşağıda 

ve küçük olan metinlerdir. Örneğin x1 ifadesindeki 1 karakteri alt metindir. x 2 ve x1 

39


ifadelerinin web sayfasında bu şekilde gözükmesi için HTML belgesi içinde ve 

imleri kullanılır ve bu işlem şu şekilde yapılır: 

x 2 : x2 

x1: x1 

Paragraflar ve Yeni satırlar 

Bir metni paragraf yapmak için imi kullanılır. im çifti arasında kalan 

metin bir paragraf olur. Yukarıdaki metinde üç tane paragraf vardır. Tarayıcı yeni 

paragraftan önce ve sonra bir satırlık boşluk bırakır. 

Bir belgede yeni paragraf oluşturmadan yeni bir satır oluşturmak istersek, bu 

durumda imini kullanırız. Yukarıdaki HTML belgesinin ilk paragrafında 

iminin örnek kullanımı gözükmektedir. imi bir çift olarak değil de tek bir im olarak 

kullanılmıştır. Fakat çift olarak ta kullanılabilir. Bu durumda içi boş bir eleman olur. 

şeklinde kullanılır. 

İkinci bir yeni satır imi ise imidir. Bu im yeni satır eklemenin yanında 

sayfaya yatay bir çizgi de ekler. Bu im de yine imi gibi tek veya çift olarak 

kullanılabilir. 

HTML Belgelerine Açıklama Eklemek 

HTML belgelerine tarayıcı tarafından hiç işlenmemek üzere, sadece bu belgeyi 

hazırlayan kişiye ekstra bilgi vermek amacıyla açıklama da eklenebilir. Yukarıdaki html 

belgesindeki metni bu 

şekildeki bir açıklama elemanıdır. Bu açıklama kısmı tarayıcı tarafından okunup 

yorumlanmaz. Dolayısıyla açıklama elemanı imi ile biter. 

3.11 HTML Elemanları Öznitelikleri 

HTML elemanlarının içeriklerine ek olarak öznitelikleri de olabilir. Öznitelikler 

HTML elemanlarının içeriğiyle ilgili ekstra bilgi içerirler. Örneğin HTML gövde yani 

elemanının bgcolor isimli bir özniteliği vardır. Bu öznitelik bir HTML 

sayfasının arka plan rengini ayarlamak için kullanılır. Benzer şekilde birçok HTML 

elemanının align isimli bir özniteliği vardır. Bu öznitelik te HTML elemanlarının 

ekranda yatay düzlemde gözükecekleri pozisyonu belirlemek için kullanılır. 

40


3.12 Web Sayfası Arka Plan Rengi Ayarlama 

Şimdi bir HTML belgesinin gövde elemanının bgcolor özniteliğini kullanarak bu 

belgenin tarayıcı içindeki arka plan rengini ayarlayalım. Buna ek olarak HTML 

elemanlarının belge içindeki yatay düzlemdeki pozisyonlarını da align özniteliklerini 

kullanarak ayarlayalım. Bu işlemleri yapan örnek bir web sayfası kodu Tablo 3-3’de 

gözükmektedir. Bu tablodaki HTML belgesini bir metin editörü ile oluşturunuz. 

 

 

Arka Plan Rengi Testi 

 

 

 

Karacaoğlan 

Yaşamı üstüne kesin bilgi yoktur. Bugüne değin 

yapılan inceleme ve araştırmalara göre 17.yy'da yaşamıştır. 

Çukurova bölgesinde yaşadığı sanılmaktadır. 

 

 

Tablo 3-3 Web sayfası arka plan rengi ayarlama için örnek sayfa kodu 

Bu sayfa tarayıcı içinde Şekil 3-4’teki gibi gözükür. 

Şekil 3-4 HTML ile arka plan rengi ayarlama 

HTML belgesinde gözüktüğü gibi gövde elemanının bgcolor özniteliği şu 

şekilde ayarlanır: 

 

Burada aqua kelimesi arka planın alacağı rengi gösterir, bgcolor anahtar kelimesi 

ise arka plan rengi özniteliğinin adını gösterir. Arka plan rengi olarak verebileceğimiz 16 

tane renk ismi vardır. Bu isimler şunlardır: aqua, black, blue, fuchsia, gray, 

green, lime, maroon, navy, olive, purple, red, silver, teal, white, ve 

41


yellow. Bu renk isimlerini yukarıdaki örnekte deneyerek hangi renklere karşılık 

geldiklerini görebilirsiniz. İkinci bir ihtimal olarak ta http://www.w3.org/TR/css3color/#html4 

sayfasına giderek bu renk isimlerinin gösterdikleri renkleri görebilirsiniz. 

align özniteliği 

Bu örnekte kullanılan ikinci öznitelik ise align özniteliğidir. Bu öznitelik bir 

HTML elemanının web sayfasında yatay düzlemde gözükeceği yeri belirler. Alabileceği 

muhtemel değerler; center, right, left ve justify kelimeleridir. Bunlar sırayla şu 

anlamlara gelirler; orta, sağ, sol ve dağıtık. Bu örnekte başlık ortaya ayarlanmışken 

paragraf elemanı sağa ayarlanmıştır. 

3.13 HTML Dilinde Renk Gösterimi 

HTML dilinde renk ayarlarını yukarıdaki örnekte olduğu gibi yapabilsek te bu 

yöntem sadece 16 tane renk seçeneği sunar. Bu da İnternet’te olan çok değişik web 

sayfası tasarımı için yetersiz kalır. Her ne kadar doğadaki ana renkler sınırlı olsa da, bu 

ana renklerin karışımından oluşan milyonlarca çeşit renk vardır. İşte insanlar bu zengin 

renk kombinezonlarını web sayfası tasarımında da kullanmak isterler. Bu çok farklı 

amaçlar için tasarlanmış web sayfalarının oluşturulabilmesi için bir gerekliliktir. İşte bu 

farklı uygulamaların ihtiyacını karşılamak için HTML dilinde ana renkleri karıştırarak 

çok sayıda farklı renk oluşturma imkânı sunulmuştur. 

Doğadaki renklerin çoğu üç ana rengin karışımı olarak tanımlanabilir. Bunlar 

kırmızı, yeşil ve mavi renkleridir. Genel olarak bilgisayarlarda renkler bu üç rengin 

karışımı olarak gösterilir. Dolayısıyla HTML dilinde de aynı şekilde renkler bu üç rengin 

karışımı olarak gösterilirler. 

Her rengin alacağı 256 değişik değer vardır. Eğer bir rengin değeri 0 ise o rengin 

karışımda etkisi hiç yoktur. Değeri 255 ise etkisi maksimum seviyededir. Bu üç rengin 

karışımı 16’lik sistemde gösterilir. Dolayısıyla bir renk çeşidinin alacağı minimum değer 

00 iken, alacağı maksimum değer FF’tir. FF sayısı 255 sayısının 16’lık sistemdeki 

karşılığıdır. 

Bu üç renk şu şekilde karıştırılır. Toplam rengi gösteren ifade 6 karakter 

uzunluğundadır. Bu 6 karakterin ilk iki karakteri kırmızı rengin değerini gösterir. Sonraki 

iki karakter, yani ortadaki iki karakter yeşil rengin karışımdaki değerini gösterir. En son 

iki karakter ise karışımdaki mavi rengin değerini gösterir. 

Şimdi bu üç rengi karıştırarak nasıl kırmızı, yeşil ve mavi renklerini elde 

edeceğimizi görelim. Kırmızı rengi elde edebilmek için kırmızı rengin değeri maximum 

iken diğer yeşil ve mavi renklerden hiç karışım olmamalı. Yani yeşil ve mavi değerleri 

sıfır olmalı. Dolayısıyla kırmızı rengi şu şekilde oluşturabiliriz: 

42


Kırmızı FF0000 

“FF0000” ifadesinde ilk iki karakter yani “FF” kırmızı rengin oluşturulan renkteki 

katkısını gösterir. Bu değer de 255’tir. Dolayısıyla kırmızı renk karışıma maximum değer 

ile katılmıştır. Sonraki iki karakter yani “00” değeri yeşil rengin karışımdaki etkisini 

gösterir. Yeşil renk karışıma sıfır değeriyle katılmıştır. Yani oluşturulan bu renge hiç 

yeşil rengi karıştırılmamıştır. Son iki karakter de mavi rengin değerini gösterir. Onun 

değeri de sıfırdır. Yani oluşturulan bu yeni renge mavi hiç karıştırılmamıştır. Dolayısıyla 

oluşturulan yeni renk sadece kırmızıdan ibaret olmuştur. Dolayısıyla “FF0000” rengi 

kırmızıyı göstermektedir. 

Benzer şekilde yeşil ve mavi renkleri de şu şekilde oluşturulabilir: 

Yeşil 00FF00 

Mavi 0000FF 

Yeşil rengi oluştururken sadece yeşil değeri maximum değerini almış, diğer ikisi 

yani kırmızı ve mavi sıfır değerini almıştır. Benzer şekilde mavi rengi oluşturulmuştur. 

Şimdi diğer birkaç karışımı daha görelim. 

Siyah 000000 

Gri 808080 

Sari FFFF00 

Eğer üç rengin hepsinin de değerleri sıfır ise, bu durumda ortaya çıkan renk siyah 

olur. Eğer bütün renkler yarı değerleriyle karıştırılırlarsa bu durumda ortaya çıkan renk 

gri olur. 16’lik sistemde FF sayısının yarısının 80 olduğuna dikkat ediniz. Eğer tam 

kırmızı ile tam yeşil karıştırılırsa bu durumda oraya çıkan renk sarı olur. 

Bu şekilde üç temel rengi farklı tonlarda karıştırarak çok farklı renkler elde 

ederiz. Her rengin 256 farklı değeri olduğu için toplam elde edebileceğimiz farklı renk 

sayısı: 

Toplam renk çeşidi: 256*256*256 = 16,777,216 

Yani 16 milyondan fazla farklı renk HTML ile gösterilebilir. 

43


Yukarıdaki aqua renginin bu sistemdeki karşılığı 00FFFF sayısıdır. Yani tam yeşil 

ile tam mavinin karışımıdır. Şimdi aynı sayfada aqua kelimesi yerine bu sayıyı 

kullanalım. Bu durumda web sayfası HTML kodu Tablo 3-4’deki gibi olur. 

 

 

Arka Plan Rengi Testi 

 

 

 

Karacaoğlan 

Yaşamı üstüne kesin bilgi yoktur. Bugüne değin 

yapılan inceleme ve araştırmalara göre 17.yy'da yaşamıştır. Çukurova 

bölgesinde yaşadığı sanılmaktadır. 

 

 

Tablo 3-4 Web sayfası arka plan renginde renk kodu kullanma örneği 

Bu durumda bgcolor özniteliğin değeri yazılırken renk sayısının önüne # işareti 

konulur. Bunun amacı rengin değerinin bir renk adı değil, renklerin karışımını gösteren 

16’lık bir sayı olduğunu ifade etmek içindir. 

İnternet’te birçok sayfada hangi karışımın hangi renge karşılık geldiğine dair 

bilgiler vardır. Örneğin http://www.w3schools.com/html/html_colornames.asp sayfasında 

100’den fazla farklı rengin 16’lık sistemdeki karışım karşılığı verilmiştir. Bu sayfalarda 

verilen 16’lık düzlemdeki renk değerini web sayfalarınızda kullanabilirsiniz. 

3.14 Özel Karakterler 

HTML’de bazı karakterlerin özel anlamı vardır. Örneğin < karakteri bir imin 

başlangıcını, > karakteri ise bir imin bitimini gösterir. Bundan dolayı bu tip özel anlamı 

olan karakterlerin tarayıcı içinde gözükmesini istediğimiz zaman, bu karakterleri direk 

olarak yazamayız. Mesela 2 < 4 ifadesinin tarayıcı içinde gözükmesini istersek ve bunu 2 

< 4 şekilde HTML belgesinde yazarsak, tarayıcı bu ifadedeki < karakterini bir imin 

başlangıcı olarak algılar ve hatalı bir gösterim oluşur. Dolayısıyla tarayıcıya bir şekilde 

bu ifadedeki küçüktür karakterinin bir im başlangıcı olmadığını ve tarayıcı içinde 

kullanıcıya küçüktür karakteri olarak gösterilmesi gerektiğini ifade etmemiz gerekir. İşte 

bunu HTML belgesinde yapmanın yolu bu karakterler için özel bir format ve isim veya 

değer kullanmaktır. Örneğin < karakterini tarayıcıda göstermek için < ifadesini veya 

< değerini kullanırız. Tarayıcıda 2 < 4 gözükmesi için HTML belgesinde 2 < 4 

veya 2 < 4 yazarız. Bu şekilde özel gösterim gerektiren karakterler ve bunların 

değerleri Tablo 3-5’de verilmiştir. 

Karakter Açıklama Özel Karakter Adı Değeri 

44


boşluk 

< küçüktür < < 

> büyüktür > > 

& ampersand & & 

Tablo 3-5 HTML dili özel karakter tablosu 

Özel karakterler & işaretiyle başlar ve noktalı virgül karakteriyle biter. Bunların 

bir isimleri vardır, bir de sayısal değerleri vardır. Her ikisi de kullanılabilir. 

Boşluk karakteri özel karakterler arasındaki belki de en önemli karakterdir. Çünkü 

HTML belgeleri içindeki boşluklar tarayıcı tarafından tek boşluğa indirilir ve tek bir 

boşluk olarak kullanıcıya gösterilir. Bundan dolayı birden fazla boşluk gözükmesini 

istediğimiz durumlarda her bir boşluk için bir yazmamız gerekir. 

Şimdi Tablo 3-6’daki gibi bir HTML belgesi oluşturalım. 

 

 

HTML'de özel Karakterler. 

 

 

 

"Özel Karakterler" 

Öğretmen şöyle dedi: 

 "C dilindeki bir if ifadesine şöyle 

bir örnek verebiliriz:" 

 if( x < y){ ... }; 

 

 

Tablo 3-6 Web sayfalarında özel karakter kullanma örneği 

Bu HTML belgesi tarayıcı içinde Şekil 3-5’teki gibi gözükür: 

45


Şekil 3-5 HTML sayfalarında özel karakterlerin kullanımı 

Tarayıcı içinde ikinci ve üçüncü satırlar satır başından daha ilerde başladığı 

gözüküyor. Satır başlarındaki bu boşlukların karakterlerini kullanarak 

koyduğumuza dikkat ediniz. Benzer şekilde if (x < y) ifadesindeki < karakterinin de 

< ifadesiyle yazıldığına dikkat ediniz. 

3.15 Bağlantılar 

HTML dilinin sayfa düzenlemeye ek olarak en önemli özelliği İnternet’te bulunan 

başka belgelere bağlantı verilmesine imkan sağlamasıdır. Bağlantılar sayesinde 

İnternet’teki ayrı ayrı olan belgeler birbirine bağlanır ve dünyayı saran belge ağı meydana 

gelir. Kullanıcılar bu sayede İnternet’te sörf yapabilir. Bir belgeden diğerine geçerek 

başladığı noktadan çok farklı yerlere ve bilgilere ulaşabilir. 

Bir HTML bağlantısı bir HTML sayfasından diğer bir HTML sayfasına işaret 

eden tek yönlü bir işaretçidir [6]. Kullanıcı bir bağlantıya tıklayarak o bağlantının işaret 

ettiği web sayfasına kolayca ulaşır. Tarayıcı işaret edilen web sayfasının adresinin 

yazılmasına gerek kalmadan bir tıklamayla işaret edilen sayfaya gider. Sayfalar 

arasındaki bu kolay geçiş imkânı İnternet’teki sörfün temelini oluşturur. 

HTML belgelerinde bağlantı oluşturmak için imi kullanılır. Bu im bağlantı 

vermek için href özniteliği ile birlikte kullanılır. Bu imin href özniteliğine ek olarak 

bağlantılar için kullanılan diğer bazı öznitelikleri ise target, title ve id isimli 

öznitelikleridir. Şimdi ilk bağlantı örneğimizi görelim. Bunun için Tablo 3-7’deki gibi bir 

HTML belgesi oluşturalım. 

 

 

Akdeniz 

 

 

 

Akdeniz 

46


Akdeniz şu kitalarla çevrelenmiştir: 

doğuda Asya, 

kuzeyde Avrupa ve güneyde 

 

Afrika . 

 

 

Tablo 3-7 Web sayfalarından bağlantı oluşturma örneği 

Bu HTML sayfası web tarayıcısı içinde Şekil 3-6’daki gibi gözükür: 

Şekil 3-6 HTML sayfalarında bağlantı oluşturma 

Tarayıcı resminden gözüktüğü gibi “Asya”, “Avrupa” ve “Afrika” 

kelimelerinden bağlantı oluşturulmuştur. Kendisi için bağlantı oluşturulan metin tarayıcı 

içinde maviye boyanır ve altı çizilir. Böylece kullanıcı bu metinlerden bağlantı olduğunu 

anlar ve gerektiğinde bu bağlantıların üzerine tıklayarak bu bağlantıların gösterdiği 

sayfaya gider. Bağlantıların hangi adresi gösterdiğini bu adreslere gitmeden de öğrenmek 

mümkündür. Bir bağlantı üzerine fare ile gelindiğinde o bağlantının işaret ettiği web 

sayfası adresi, tarayıcının sol alt köşesinde gözükür. Yukarıdaki tarayıcı resminde fare 

“Asya” metni üzerine getirilmiştir ve “Asya” metninin işaret ettiği web sayfasının adresi 

tarayıcının sol at köşesinde gözükmektedir. 

Görüldüğü gibi “Asya” kelimesinden http://tr.wikipedia.org/wiki/Asya 

sayfasına bir bağlantı oluşturmak için imi şu şekilde kullanılır: 

Asya 

Bağlantı başlangıç imi ile bitiş imi arasında kalan metin için oluşturulur. 

Bu örnekte başlangıç ve bitiş imleri arasında kalan metin Asya kelimesidir. Bu 

bağlantının işaret edeceği web sayfası adresi ise iminin href özniteliği değeri olarak 

47


çift tırnak arasında yazılmıştır. başlangıç iminin < işaretiyle başlayıp href özniteliği 

değeri sonundaki > işaretiyle bittiğine dikkat ediniz. 

3.16 Bağlantılar Üzerinde Metin Gösterme 

Bağlantının gösterdiği sayfa hakkında o siteye gitmeden kullanıcıya kısa bir bilgi 

vermek mümkündür. Bunun için iminin title özniteliği kullanılır. Bu örnekte 

Avrupa metni için oluşturulan bağlantıda bu öznitelik kullanılmıştır: 

Avrupa 

Bu durumda iminin iki tane özniteliği vardır. İlki href ve ikincisi ise title. 

Bu iki öznitelik arasında sadece bir boşluk bırakmak yeterli olur. Bu durumda 

başlangıç imi title özniteliği değerinin sonundaki > işaretiyle bittiğine dikkat ediniz. 

title özniteliğine atanan metin bu tarayıcı içinde Avrupa bağlantısı üzerine fare ile 

gelindiğinde fare imlecinin yanında gözükür. 

Bağlantıları Yeni Web Tarayıcı Penceresi İçinde Açma 

Yukarıdaki HTML belgesinde gözüktüğü gibi Afrika kelimesi için oluşturulan 

bağlantıda target isimli ikinci bir öznitelik kullanılmıştır: 

 

Afrika 

Bu örnekteki target özniteliğinin kullanılmasının amacı bu bağlantıya 

tıklanıldığında bu bağlantının işaret ettiği web sayfasının yeni bir tarayıcı penceresi 

içinde açılmasıdır. Bu öznitelik kullanılmadığı durumda tıklanılan web sayfası aynı 

tarayıcı içinde açılır. Bu örnekte Asya ve Avrupa bağlantılarına tıklanıldığında bu 

bağlantıların işaret ettiği sayfalar aynı tarayıcı penceresi içinde açılır. Fakat Afrika 

bağlantısına tıklandığında bu bağlantının işaret ettiği sayfa yeni bir tarayıcı içinde açılır. 

3.17 Bir web sayfanın alt bölümlerine bağlantı oluşturma 

Bazı web sayfaları çok uzun olabilir. Bu durumda web sayfası içindeki bir alt 

bölüme yani sayfa içindeki bir HTML elemanına bağlantı vermek gerekebilir. Bu 

bağlantı hem aynı web sayfası içinden verilebilir, hem de başka web sayfalarından 

verilebilir. 

Bir HTML elemanına bağlantı verebilmek için öncelikle bu HTML elemanına bir 

isim vermemiz gerekir. Daha sonra bu isim kullanılarak bu HTML elemanına gerek aynı 

sayfadan gerekse başka sayfalardan direk bağlantı oluşturulabilir. 

48


Bir HTML elemanına isim vermek için o elemanın id özniteliği kullanılır. Şimdi 

bununla ilgili bir örnek uygulama yapalım. Bunun için Tablo 3-8’deki gibi bir HTML 

belgesi oluşturalım. 

 

 

Kıtalar 

 

 

 

Kıtalar 

Dünyadaki kıtalardan bazıları şunlardır: 

Asya, Avrupa ve Afrika . 

 

Asya 

Avrupanın doğusunda, Büyük Okyanus'un batısında, Okyanusya'nın 

kuzeyinde ve Arktik Okyanus'un güneyinde bulunan kıtadır. 

Avrupa 

Afrikanın kuzeyinde, Asya'nın batısında ve Atlantik Okyanusu'nun 

doğusunda bulunan kıtadır. Üzerinde birçok ülke mevcuttur. 

Afrika 

Avrupa'nın güneyinde, Atlantik Okyanusu'nun doğusunda, Hint 

Okyanusu'nun batısında ve Antarktika'nın kuzeyinde bulunan 

kıtadır. 

Lütfen bu sayfadaki bilgilerle ilgili iletişim için bize yazın. 

 

 

Tablo 3-8 Web sayfası alt bölümlerine bağlantı oluşturma örneği 

Bu HTML belgesi web tarayıcısı içinde Şekil 3-7’deki gibi gözükür. 

Şekil 3-7 Web sayfası içinde yerel bağlantı oluşturma 

49


Tarayıcı penceresini büyütünce tek pencere içinde bu web sayfasının tamamını 

görebiliriz. Ama biz yer darlığından dolayı burada web tarayıcısı penceresini bu şekilde 

küçük tuttuk. Şimdi bu pencerede Afrika bağlantısına tıklarsanız, tarayıcının aynı pencere 

içindeki Afrika alt bölümünü göstermeye başladığını görürüsünüz. Bu durumda 

göreceğiniz tarayıcı sayfası Şekil 3-8’deki gibi olur. 

Şekil 3-8 Yerel bağlantı ile erişim 

Yukarıdaki HTML belgesinde öncelikle üç alt başlık elemanına da id imiyle isim 

verdiğimize dikkat ediniz. Örneğin Afrika alt başlığı şu şekilde tanımlanmıştır: 

Afrika 

Burada id imiyle alt başlık elemanına bir isim veriyoruz. Artık bu elemana 

bu ismiyle erişebiliriz. Burada bu alt başlığın ismi afk olmuş oluyor. Benzer şekilde 

diğer iki alt başlık elemanına da id özniteliğini kullanarak isim veriyoruz. Onlara da asy 

ve avp isimlerini veriyoruz. 

İkinci adımda isimlendirmiş olduğumuz bu alt başlık elemanlarına belgemizin 

başka yerlerinden bağlantı veriyoruz. Şimdi Afrika elemanına vermiş olduğumuz 

bağlantıya daha yakından bakalım: 

Afrika 

Bu durumda href özniteliğinin değeri sadece alt başlık elemanının ismi olarak 

veriliyor. Çünkü hem bağlantıyı veren hem de bağlantı verilen eleman aynı belge içinde 

bulunmaktadır. Ayrıca href özniteliğinin değerini yazarken önce # işaretinin 

kullanıldığına dikkat ediniz. 

Bazı web sayfalarında HTML elemanlarını isimlendirmek için id özniteliği 

yerine name özniteliğinin kullanıldığını görebilirsiniz. Bu, şu anda tavsiye edilmeyen bir 

metoddur. Doğrusu id özniteliğinin kullanılmasıdır. 

50


Alt bağlantılar her türlü HTML elemanına yapılabilir. Örneğin paragraf alt 

elemanlarına da bağlantı yapılabilir. Fakat bu örnekte alt başlığa yapmak daha mantıklı 

olduğu için biz alt başlıklara bağlantı yaptık. 

Başka sayfalardaki bir web sayfası içindeki alt bölümlere bağlantı 

oluşturmak 

Başka sayfalardaki bir web sayfası içindeki alt bölümlere bağlantı oluşturulabilir. 

Örneğin yukarıdaki web sayfası 

http://www.bilgi.com/kitalar.html 

Adresinde bulunsun. Bu durumda bu sayfadaki Afrika alt elemanının web adresi 

şöyle olur: 

http://www.bilgi.com/kitalar.html#afk 

Yani web sayfasının adresinden sonra bir # işareti konulur ve alt bölümün ismi 

yazılır. 

mailto bağlantısı 

Yukarıdaki web sayfasının en altında farklı bir bağlantı şekli gözükmektedir. Bu 

ifade şudur: 

Lutfen bu sayfadaki bilgilerle ilgili iletisim için bize 

yazın. 

Bu durumda href özniteliğin değeri olarak bir web sayfası yerine mailto ile 

başlayan ve bir E-posta adresi ile devam eden bir ifade verilmiştir. Bunun amacı bu 

bağlantıya tıklanıldığında href kısmında belirtilen E-posta adresine E-posta gönderilmesi 

için kullanıcının bilgisayarındaki E-posta programının açılmasıdır. Bu web sayfası 

sahiplerine E-posta göndermeyi kolaylaştırmak için düşünülmüş bir yöntemdir. 

Genellikle web sayfalarının en alt kısmına kullanıcıların görüşlerini almak için konulur. 

3.18 Göreli Bağlantılar 

Bir web sayfasındaki belgeler kendi sunucusundaki belgelere bu belgelerin tüm 

adlarını yazmadan da bağlantı verebilir. Örneğin web sunucusunun kök dizini olan 

htdocs dizininin içeriği Şekil 3-9’da gözüken soldaki pencere gibi olsun. Yani kök 

dizininde diğer dosyaların yanında mersin.html ve merhaba.html isimli iki dosya 

bulunsun. Bunlara ek olarak ilceler isimli bir alt dizin bulunsun. Bu ilceler dizininin 

51


içeriği de Şekil 3-9’da sağ tarafta gözüken pencere gibi olsun. Yani ilceler dizininde 

beş tane ilçe ismiyle HTML dosyaları bulunsun. Bu dizindeki her belgede o ilçeyle ilgili 

bir web sayfası olsun. 

Şekil 3-9 Göreli Bağlantı İçin Dosyalar 

Şimdi mersin.html isimli dosyadan merhaba.html isimli dosyaya ve ilceler 

dizini altındaki bazı dosyalara nasıl bağlantı verildiğini görelim. Bunun için Tablo 

3-9’daki gibi bir HTML belgesi oluşturalım. 

 

 

Mersin 

 

 

 

Mersin 

Mersin Valiliğinin sayfasına hoş geldiniz. Valimizin mesajını 

okumak için tıklayınız. 

Mersinin ilçelerinden bazıları şunlardır: 

Tarsus, 

Silifke, 

Erdemli. 

 

 

Tablo 3-9 Göreli bağlantı oluşturma örnek sayfası 

Bu HTML belgesi web tarayıcısı içinde Şekil 3-10’daki gibi gözükür. 

52


Şekil 3-10 Web sitesi içinde göreli bağlantılar 

Şimdi mersin.html dosyasından aynı dizindeki merhaba.html dosyasına nasıl 

bağlantı verildiğine dikkat edelim: 

tıklayınız 

Aynı dizindeki bir dosyadan diğerine bağlantı vermek için sadece dosya ismini 

yazmak yeterli olur. Bu dosyanın tam URL adresini yazmaya gerek yoktur. Dolayısıyla 

bu örnekte merhaba.html dosyasına bağlantı vermek için sadece href değeri olarak 

sadece merhaba.html denilmiştir. Benzer şekilde bir alt dizindeki bir dosyaya bağlantı 

vermek için de yine bu belgenin tam URL adresine gerek yoktur. Yalnız bu durumda 

dosya ismine ek olarak dizin adını da vermemiz gerekir. Bu da ilceler için verilen 

bağlantı örneğinde görülmektedir: 

Tarsus 

Bu durumda önce alt dizin adı sonra da dosyanın adı yazılmıştır. Eğer dosyamız 

iki alt dizinde olsaydı, bu durumda iki alt dizini de dosya isminden önce belirtmemiz 

gerekirdi. Kısaca eğer sadece dosya adı belirtilmişse, web sunucusu bağlantı verilen 

dosyayı bağlantı veren dosya ile aynı dizinde arar. Eğer alt dizin adı da verilmişse, 

öncelikle belge ile aynı dizinde olan alt dizini arar. Sonra bu alt dizin içinde bağlantı 

verilen belgeyi arar. 

Bir üst dizindeki belgeden alt dizinlerdeki belgelere, belgelerin dizin yolunu da 

yazarak bağlantı veririz. Pekâlâ, alt dizindeki bir belgeden üst dizindeki bir belgeye nasıl 

bağlantı verebiliriz? Örneğin yukarıdaki durumda tarsus.html dosyası içinden 

mersin.html dosyasına nasıl bağlantı verebiliriz? Şimdi bunu görelim. tarsus.html 

dosyası içeriği Tablo 3-10’daki gibi olabilir. 

53


 

 

Tarsus 

 

 

 

Tarsus 

Tarsus Mersin ilinin en büyük 

ilçesidir. 

 

 

Tablo 3-10 Göreli bağlantı oluşturma ikinci örnek sayfası 

Görüldüğü gibi tarsus.html belgesi içinden bir üst dizindeki mersin.html 

dosyasına şu şekilde bağlantı verilmiştir: 

 

Yani bir üst dizini göstermek için iki nokta kullanılır. Eğer iki üst dizini 

göstermek isteseydik bu durumda iki katlı iki nokta (../..) kullanmak durumunda 

kalırdık. Bu şekilde bir web sunucusundaki bütün belgelere tam URL adreslerini 

kullanmadan göreli bağlantılarla bağlantı verebiliriz. Diğer yandan tam adreslerini 

kullanarak bağlantı vermekte her zaman için mümkündür. 


[1] T. Berners-Lee, "Information Management: A Proposal." CERN (March 1989, May 

1990). http://www.w3.org/History/1989/proposal.html. 

[2] D. Raggett, A.L. Hors, ve I. Jacobs (editors), "HTML 4.01 Specification", 

http://www.w3.org/TR/html4, 24 December 1999. 

[3] I. Hickson and D. Hyatt (editors), "HTML 5", http://www.w3.org/TR/html5, W3C 

Working Draft 25 August 2009. 

[4] http://en.wikipedia.org/wiki/Usage_share_of_web_browsers, Usage share of web 

browsers, 18 Ağustos 2009. 

[5] R. Fielding, J. Gettys, J. Mogul, H. Frystyk, L. Masinter, P. Leach, T. Berners-Lee, 

"Hypertext Transfer Protocol -HTTP/1.1", IETF RFC 2616, June 1999, 

http://www.ietf.org/rfc/rfc2616.txt. 

[6] T. Berners-Lee, R. Fielding, and L. Masinter, "Uniform Resource Identifier (URI): 

Generic Syntax", IETF RFC 3986, January 2005, 

http://labs.apache.org/webarch/uri/rfc/rfc3986.html. 

54


Bölüm 4 

4.1 Amaç 

GÖRÜNTÜLER 

Bu bölümde amacımız görüntülerin bilgisayarda nasıl tutulduğunun temellerinin 

öğrenilmesi, görüntüleri sıkıştırma tekniklerinin anlaşılması ve görüntülerin web sayfası 

içinde kullanımının kavranmasıdır. Bu amaçla önce görüntülerin bilgisayarda 

kaydedilmeleri ile ilgili temel konular anlatılmıştır. Sonra görüntüleri sıkıştırma için 

kullanılan yaygın algoritmalardan bazıları ve bunların dosya tipleri işlenmiştir. Daha 

sonra görüntülerin web sayfalarında sunumları anlatılmıştır. Web sayfalarında 

görüntülerin konumlarının ve boylarının ayarlanması, etraflarında tampon boşluk 

bırakılması, görüntülerden bağlantı oluşturulması ve görüntülerin arka planda 

kullanılmaları işlenmiştir. 

4.2 Giriş 

Web ilk başlarda daha çok metin ağırlıklı idi. O zamanlar önemli olan bilginin 

paylaşılabilmesiydi. Çünkü web ağının yaygınlaşmasından önce bu şekilde hızlı ve etkin 

bir bilgi paylaşım mekanizması yoktu. Ama zamanla bilginin paylaşılması yanında 

bilginin sunum şekli de önem kazandı. Artık sadece bilginin başkalarının kullanımına 

açılması yeterli olmamaya başladı. Bilgi kadar önemli diğer bir unsurun da bilginin 

kullanıcıya en güzel ve görsel şekilde sunulması olduğu anlaşıldı. İşte bilginin kullanıcıya 

en güzel şekilde sunulmasında görüntüler önemli bir role sahiptir. Artık web sayfası 

tasarımı sadece teknik bir iş olmaktan çıkmış ve sanatsal bir faaliyet haline de 

dönüşmüştür. Güzel ve etkin bir web sayfası tasarlamak sadece teknik bilgiyle mümkün 

olmamaktadır. Teknolojinin sunmuş olduğu imkânların tasarımcıların hayal gücüyle 

birleşmesi gerekmektedir. Özetle şunu söylemeliyiz ki güzel web sayfası tasarlamak için 

sadece teknik bilgi yeterli olmamaktadır. Onun için programcılar kendi sınırlarının 

farkında olmalılar ve gerçekçi plan ve projeler üzerinde çalışmalıdırlar. 

55


4.3 Görüntülerin Bilgisayarlarda Kaydedilmeleri 

Geçen bölümde belirtildiği gibi bilgisayarda gösterilen bütün renkler üç temel 

rengin karışımı şeklindedir. Bu üç temel renk; kırmızı, yeşil ve mavi renkleridir [1]. Bu 

üç renk karıştırılarak gösterilmek istenen diğer bütün renkler elde edilir. Fakat görüntüler 

bu üç rengin karışımı olarak hiç sıkıştırılmadan bilgisayarda tutulursa çok fazla yer 

kaplamaktadır. Şu anki bilgisayarlar 24 bitlik renk gösterimini kullanmaktadır [2]. 

Ekrandaki her bir noktanın rengini göstermek için 24 bit, yani 3 byte’lık bir yer ihtiyacı 

vardır. Her bir noktanın rengini gösteren bu 24 bitlik verinin 8 biti rengin kırmızı kısmını, 

diğer 8 biti rengin yeşil kısmını ve son 8 biti de mavi kısmını gösterir. Her 8 bitlik kısım 

256 değişik renk tonunu gösterebilir (2 8 = 256). Yani hem kırmızının, hem yeşilin, hem 

de mavini 256 değişik tonu vardır. Dolayısıyla bu üç rengin değişik tonlarda 

karıştırılmasından (256*256*256) 16 milyondan fazla değişik renk elde edilir. Yani 

ekrandaki her bir noktanın rengi 16 milyondan fazla değişik renk değeri alabilir. Özetle 

ekrandaki her bir noktanın renk bilgisi 24 bit yani 3 byte’lık bir yer kaplar. Dolayısıyla 

görüntü dosyaları sıkıştırılmadan tutulurlarsa çok fazla bellek ihtiyacı olur. 

Örneğin 600*800 pixel büyüklüğündeki bir resim dosyasını düşünelim. Bu resim 

dosyası toplam 600*800 = 480,000 tane pixelden yani noktadan oluşmaktadır. Her bir 

nokta 3 byte yer kaplayacağı için bu resim için toplam bellek ihtiyacı 480000*3 = 

1,440,000 byte olur. Yani 1.4 mega byte civarında bir dosya olur. Bu da çok büyük bir 

alandır. Diğer yandan daha büyük resim dosyalarını düşünürsek, bu büyüklük hızla artar. 

Dolayısıyla resim dosyaları bilgisayarda genellikle ham veri olarak tutulmazlar. Ham veri 

ile kastedilen bu örnekte olduğu gibi ekrandaki her bir nokta için 24 bitlik bilgi 

tutulmasıdır. Özellikle de İnternet üzerinden başkalarına göndereceğimizin resim 

dosyalarının mümkün olduğunca küçük boyutlu olmasını isteriz. Çünkü bu dosyaların 

kullanıcılara transferi hem zaman alır hem de web sunucularına bir yük oluşturur. 

Görüntü dosyalarının ham veri olarak tutulmasının alternatifi değişik sıkıştırma 

algoritmalarıyla bu dosyaların sıkıştırılmasıdır [3]. Bu sıkıştırma algoritmaları minimum 

alanda çok bilgi tutmayı hedefler. Yani resim dosyalarının boylarını küçültmeyi hedefler. 

Resim boylarını küçültmek için çok değişik algoritmalar geliştirilmiştir. Bu 

algoritmaların bir kısmı kayıpsız sıkıştırma yaparken bir kısmı kayıplı sıkıştırma yapar. 

Kayıpsız sıkıştırma yapan algoritmalar görüntüde hiçbir bilgi kaybı olmaksızın sıkıştırma 

yaparlar. Yani görüntüdeki bilgileri farklı bir şekilde tutarak yer kazanımı sağlarlar. 

Örneğin resmin arka planı aynı renk ise ve görüntünün çoğu arka plandan oluşuyorsa, 

arka plan rengini gösteren her nokta için aynı bilgi 24 bit olarak tekrar tekrar tutulmaz. 

Sadece bu noktaların aynı olduğunu gösteren çok daha küçük boyutlu bir sayı aynı işlevi 

görür. İşte buna benzer değişik yöntemler kullanılarak sıkıştırma yapılır. 

Kayıpsız sıkıştırma algoritmaları [4] bilgisayarda üretilmiş resimler ve çizimler 

için çok iyi sonuçlar vermesine rağmen, tabiat görüntülerinden oluşan fotoğraflar için 

aynı düzeyde kazanım sağlayamaz. Çünkü bu tür resimlerde aynı rengin tekrarlaması çok 

fazla görülmez. Dolayısıyla bu tür resim dosyaları için kayıplı sıkıştırma algoritmaları [5] 

56


daha çok kullanılır. Bu tür algoritmalar resmin görüntü kalitesini çok az düşürerek ciddi 

manada yer kazanımı hedefler. 

4.4 BMP, GIF, PNG ve JPEG Dosya Tipleri 

4.2.1 BMP Dosya tipi 

Bir görüntü dosyasının isminin uzantısı o dosyada kullanılan sıkıştırma 

algoritmasını gösterir. Bir dosyanın uzantısı bmp ise, bu görüntü dosyasında görüntü 

bilgisi ham veri olarak tutuluyor demektir [6]. Örneğin ev.bmp isimli bir dosya olabilir. 

Bu tür dosyalar İnternet üzerinden gönderilmek için uygun değildir. 

4.2.2 GIF Dosya tipi 

GIF uzantılı dosyalar İnternet’te çok yaygındır. Örnek bir dosya ismi olarak 

ev.gif verilebilir. Bu tür dosyalarda kullanılan sıkıştırma algoritması kayıpsız bir 

algoritmadır [7]. Dolayısıyla bilgisayarda üretilmiş çizimler ve resimler için sıkça 

kullanılır. Üretilen resim dosyalarının boyu genellikle çok küçüktür. En önemli 

dezavantajı sadece 256 değişik rengi destekler. 16 milyon değişik renkten sadece 256 

farklı renk kullanılabilir. Bu algoritma sadece 256 değişik renk kullanıldığında 

kayıpsızdır. Daha fazla rengi olan bir resmi bu algoritmayla sıkıştırmak istediğimizde 

kayıplar oluşur. Çünkü bu durumda renk sayısı 256’ya azaltılır. Kısaca gif dosyaları 

bilgisayarda oluşturulmuş ve az sayıda değişik renk içeren çizimleri göstermek için 

kullanılabilir. Buna ek olarak yine az sayıda renk içeren resimleri içinde gif formatı 

kullanılabilir. Diğer yandan doğa resimlerini gif ile göstermek genellikle isabetli olmaz. 

Çünkü bu durumda çok fazla renk kaybı olur. 

4.2.3 PNG Dosya tipi 

GIF şu anda İnternet’te çok yaygındır, fakat artık resimleri daha kaliteli 

göstermek için ihtiyaç artmıştır. Çünkü bilgisayarların ve ağların kapasitesi hızla 

artmaktadır. PNG sıkıştırma algoritması [8] GIF algoritmasının kısıtlamalarını 

genişletmek ve daha kaliteli görüntüler oluşturmak için geliştirilmiştir. GIF gibi yine 

kayıpsız sıkıştırma yapar. Fakat GIF’ten farklı olarak 256 renk sınırlandırması yoktur. 16 

milyondan fazla rengin hepsini de gösterebilir. Dolayısıyla GIF’e göre PNG ile 

sıkıştırılmış dosyalar daha kaliteli olurlar, fakat dosya boyları da daha büyük olur. Yine 

GIF gibi daha çok bilgisayarda oluşturulmuş çizimler ve resimler için kullanılır. Doğa ve 

tabiat fotoğrafları için kullanılmaz. 

Şimdi bilgisayarda üretilmiş bir grafik görüntüsünün png, gif ve bmp olarak 

kaydedilmesi arasındaki farkı görmeye çalışalım. Bunun için şu adresteki png resim 

dosyasını bilgisayarınıza indiriniz: 

57


http://commons.wikimedia.org/wiki/Image:Dice_Distribution_(bar).png 

Bu dosyayı bilgisayarınıza indirmek için önce tarayıcınızla bu sayfaya gidiniz. 

Sonra fareniz resmin üzerindeyken farenizin sağ tuşuna tıklayıp resmi farklı kaydet 

seçeneğini seçerek bilgisayarınıza bu dosyayı ZarDagilimi.png olarak kaydediniz. Bu 

dosya 800*548 pixel boyunda bir png resim dosyasıdır. Bu resim Şekil 4-1’deki gibi 

gözükmektedir. 

Şekil 4-1 Örnek grafik resmi 

Şimdi bu dosyayı bilgisayarınızdaki Paint programı ile açınız. Sonra bu dosyayı 

farklı kaydediniz. Farklı kaydederken önce gif formatını seçiniz. İkinci olarak yine aynı 

png dosyasını farklı kaydediniz. Bu defa resim dosyası tipini 24-bit bmp olarak seçiniz. 

Şimdi bu üç çeşit resim dosyasının büyüklüğünü kontrol ediniz. 

Dosya adı Büyüklüğü 

ZarDagilimi.png 21 KB 

ZarDagilimi.gif 20 KB 

ZarDagilimi.bmp 1285 KB 

Tablo 4-1 Farklı sıkıştırma algoritmaları için grafik resmi boyu karşılaştırması 

Tablo 4-1’deki değerlerden görüldüğü gibi png ve gif dosyalarının boyları 

birbirine çok yakındır. Gif dosyası boyu biraz daha küçüktür. Ama bmp dosyası boyu 

diğer ikisinden çok fazla büyüktür. Diğer dosyalardan yaklaşık 60 kat daha büyüktür. 

Bunun nedeni bu grafik dosyası çok fazla detay içermiyor. Kullanılan renklerde sınırlı 

sayıdadır. Arka plan hep aynı renktir. Grafikteki sütunlar da aynı renktir. Dolayısıyla 

sıkıştırma algoritması çok başarılı bir sıkıştırma yapabiliyor. 60 kat kazanç sağlıyor. İşte 

bu ve benzeri tipteki bilgisayarda üretilmiş resimler için genellikle png veya gif 

sıkıştırma algoritması kullanılır. 

58



Web’den bulacağınız çeşitli grafik dosyalarını, yani bilgisayar ortamında 

üretilmiş görüntü dosyalarını bilgisayarınıza kaydediniz. Bu görüntüler yukardaki örnekte 

olduğu gibi bir şeyin grafiği olabilir ya da bilgisayarda yapılmış çizim dosyaları olabilir. 

Bu görüntü dosyalarını paint programını kullanarak png, gif ve 24 bit bmp olarak 

kaydediniz ve bu dosyalar arasındaki boy farklarını karşılaştırınız? Bmp ham veri dosyası 

ile png ve gif sıkıştırma algoritmaları arasındaki kazanç oranlarını hesaplayınız? 

4.2.4 JPEG Dosya Tipi 

JPEG sıkıştırma algoritması [9] ise daha çok doğa fotoğrafları gibi çok fazla detay 

içeren resimler için kullanılır. Bu algoritma kayıplı sıkıştırma yapar. Fakat amacı 

kaliteden çok az kaybederek dosya boyundan büyük miktarda tasarruf sağlamaktır. Dijital 

fotoğraf makinelerinde de en çok bu format kullanılır. Bu tip dosyaların uzantıları 

genellikle JPG veya JPEG olur. İkisi de kullanılabilir. 

JPEG sıkıştırma algoritması bilgisayarda üretilmiş ve sınırlı sayıda renk içeren 

resimler için genellikle kullanılmaz. Çünkü bu durumda resimlerin kalitesinde azalma 

olur. Diğer yandan PNG ve GIF kadar küçük boylu dosya da üretemez. Örneğin 

yukarıdaki ZarDagilimi dosyasını JPEG olarak kaydettiğimiz zaman, bu dosyanın boyu 

yaklaşık 54 KB olur. Dolayısıyla png ve gif tipine göre çok daha büyük olur. Buna ek 

olarak görüntüde bazı noktalarda kailte kaybı meydana gelir. 

İnternet’ten bir JPEG dosyası indirelim. Örneğin Şekil 4-2’deki gözüken Rize 

Kalesi resmini şu adresten indirebilirsiniz: 

http://www.rizedeyiz.com/rize/turizm/mutlaka.html 

Şekil 4-2 Örnek manzara resmi 

59


Bu dosyayı RizeKalesi.JPG ismiyle bilgisayarınıza kaydediniz. Sonra bu 

dosyayı Paint programı ile açıp önce PNG formatında kaydediniz. Sonra tekrar 

RizeKalesi.JPG dosyasını Paint programı ile açıp, bu defa aynı dosyayı GIF formatında 

kaydediniz. Daha sonra da 24-bit BMP dosyası olarak kaydediniz. Şimdi bu dosyaların 

boylarını karşılaştırınız. Dosya boylarını Tablo 4-2’de olduğu gibi göreceksiniz. 

Dosya adı Büyüklüğü 

RizeKalesi.JPG 76 KB 

RizeKalesi.gif 77 KB 

RizeKalesi.png 507 KB 

RizeKalesi.BMP 712 KB 

Tablo 4-2 Farklı sıkıştırma algoritmaları için manzara resmi boyu karşılaştırması 

Görüldüğü gibi en küçük dosya boyu JPG sıkıştırma algoritmasıyla elde edilir. 

GIF dosyası boyu da küçüktür ama bu dosyanın resim kalitesi çok düşüktür. PNG 

algoritmasının kalitesi iyidir fakat çok büyük boylu bir dosya üretir. PNG dosyasının 

boyu nerdeyse hiç sıkıştırılma yapılmamış olan BMP dosyasına yakındır. Dolayısıyla bu 

tip fazla detay içeren resimler için JPEG formatını kullanmak en isabetli olanıdır. 

Biz bu örnekte yukarıdaki resim dosyasını kullandık. Eğer bu dosyaya 

erişemezseniz veya kullanmak istemezseniz, aynı işlemi kendi bilgisayarınızdaki bir 

dijital fotoğrafla da yapabilirsiniz. Veya İnternet’teki başka bir manzara resmini de 

kullanabilirsiniz. 


İnternette bulacağınız en az üç tane farklı manzara resmini bilgisayarınıza 

indiriniz? Bu dosyaları dört farklı formatta (JPEG, PNG, GIF ve 24BIT-BMP) Paint 

programı ile kaydediniz. Daha sonra bu dosyaların farklı formatları arasındaki boy farkını 

gözlemleyiniz? Ayrıca bu dosyaların farklı formatları arasındaki kalite farkını 

gözlemleyiniz? İndirmiş olduğunuz 3 farklı manzara dosyasında da değişik formatlar 

arasındaki fark yaklaşık aynımı oldu? Değilse farkın neden kaynaklandığını açıklamaya 

çalışınız? 

4.5 HTML ile Görüntü Sunumu 

HTML dilinde bir görüntünün web sayfasında gösterilmesi için img imi kullanılır. 

Bu imin src özniteliği görüntü dosyasının yerini belirtmek için, align özniteliği ise bu 

resmin ekranda yatay düzlemde gösterileceği pozisyonu belirtmek için kullanılır. Şimdi 

60


bayrak.gif isimli bir resim dosyasını bir web sayfasında görelim. Bunun için Tablo 

4-3’teki gibi bir HTML belgesi yazabiliriz. 

 

 

Türk Bayrağı 

 

 

 


 

 

 

Tablo 4-3 İçinde bir görüntü olan örnek web sayfası kodu 

Bu HTML belgesi web tarayıcısı içinde Şekil 4-3’teki gibi gözükür. 

Şekil 4-3 İçinde sağa yanaşık bir görüntü bulunan web sayfası örneği 

HTML belgesinde görüldüğü gibi img imi şu şekilde kullanılır: 

 

Bu imin src özniteliği bu görüntü dosyasının nerede bulunacağını belirtir. Bu 

örnekte bayrak.gif dosyası bu HTML belgesinin bulunduğu dizinin içindeki images2 

dizinindedir. Eğer bu web sayfası ile resim dosyası aynı dizinde olsaydı, sadece dosya 

ismini vermek yeterli olurdu. Ayrıca src değeri için tam bir URL adresi de verilebilir. 

Eğer gösterilmesini istediğimiz resim dosyası başka bir web sayfasında ise bu durumda 

img imi Tablo 4-4’deki gibi kullanılabilir. 

61


 

 


 

 

 


 

 

 

Tablo 4-4 Başka bir web sitesindeki görüntüyü kendi sayfamızda görüntüleme 

Bu durumda web tarayıcısı bu resim dosyası için belirtilen adrese bağlanır ve 

resim dosyasını o web sayfasından indirip kullanıcıya gösterir. 

Ayrıca bu web sayfasında bayrak resmi tarayıcı içinde sağa yanaşık olarak 

gözükmektedir. Bunun sebebi ise align özniteliğinin değerinin right olarak 

verilmesidir. 

Görüldüğü gibi img başlangıç ve bitiş im çifti arasında herhangi bir şey 

bulunmamaktadır. Dolayısıyla bu örnekteki img imini şu şekilde yazmak ta mümkündür: 

 

Bu durumda bitiş img imi kullanılmaz. Onun yerine başlangıç iminin kapanış 

işaretinden yani büyüktür işaretinden hemen önce taksim işareti kullanılır. Bu yöntem tek 

bir img imini hem başlangıç hem de bitiş imi olarak kullanmamıza imkan verir. 


İnternette bulacağınız bir görüntüyü bilgisayarınıza indiriniz? Bu bölümde olduğu 

gibi indirmiş olduğunuz görüntüyü bir web sayfası içinde görüntüleyiniz? Bunun için 

uygun HTML kodunu yazınız? Görüntüyü sayfanın ortasına, soluna ve sağına 

yerleştirmeyi deneyiniz? 

İlk uygulamanızda görüntü dosyası HTML belgesi ile aynı dizin içinde olsun. 

Sonra görüntü dosyasını bir alt dizin içine kopyalayınız ve o şekilde görüntüyü sayfanız 

içinde kullanınız? Bir sonraki adımda ise görüntüyü bir üst dizin içinde bir yere koyunuz 

ve bu şekilde sayfanız içinde kullanınız? 

62


4.6 Resim Boyu ve Resim Etrafında Metin Görüntüleme 

Bazı durumlarda resmin boyunun ne kadar olduğunu img imi ile belirtmek isabetli 

olur. Bunun nedeni ise bazen resmin web tarayıcısı tarafından indirilmesi zaman alır. 

Özellikle resimler büyük boyutlu olduğunda bu böyledir. Bir sayfadaki resim veya 

resimlerin indirilmesi bitmeden sayfanın kendisinin indirilmesi bitmiş olabilir. Eğer 

resmin boy ve eni img iminde belirtilmişse, tarayıcı resim için gereken boşluğu ayırır ve 

sayfanın diğer kısımlarını kullanıcıya gösterir. Eğer boy ve en verilmemişse ve resmin 

veya resimlerin indirilmesi tamamlanmamışsa bu durumda tarayıcı resimleri indirmeyi 

bekler. Bu da sayfayı görüntülerken zaman kaybına yol açar. Dolayısıyla sayfamızdaki 

resimlerin boylarını img iminde her zaman belirtmek isabetli olur. 

Resimlerin boylarını belirtmek için img iminin height ve witdh öznitelikleri 

kullanılır. Bu özniteliklere normalde resmin boyu ve eni ne ise o yazılır. Fakat eğer 

resmin daha küçük bir boyda gözükmesini istiyorsak boy ve en değerlerini küçük 

değerler olarak ta verebiliriz. Böylece resimlerin gerçek boylarından daha küçük olarak 

gözükmelerini sağlayabiliriz. Fakat bu genellikle yapılmaması gereken bir işlemdir. 

Çünkü resmi büyük olarak kullanıcıya gönderip, sonra da küçük olarak göstermek 

mantıklı olmaz. Eğer kullanıcının resmi küçük görmesini istiyorsak, bu durumda aynı 

resmin bir de küçük olan versiyonunu oluşturup onu kullanıcıya göndermemiz daha 

isabetli olur. Böylelikle daha küçük boyutlu bir resim kullanıcıya transfer edilmiş olur. 

Şimdi img imi ile birlikte height, width ve align özniteliklerinin de kullanıldığı bir 

örnek sayfa görelim. Daha önceki bayrak resmini kullanan bu şekildeki örnek bir sayfa 

Tablo 4-5’te verilmiştir. 

 


 

 

 


Bayrak bir ulkeyi veya kurumu temsil eder. Türk bayragı da 

Turkiye Cumhuriyetini temsil eder 

 







 

 

Tablo 4-5 Görüntülerde en ve boy değerleri kullanma örneği 

Bu HTML belgesi web tarayıcısında Şekil 4-4’teki soldaki pencere gibi gözükür. 

63


Şekil 4-4 Görüntü boyu ayarlama ve görüntü etrafında metin kullanımı 

Bu HTML belgesinde img iminin align özniteliği değeri left olarak verilmiştir. 

Bu da resmin solda, resimden sonra gelen metinlerin de onun yanında olmasını sağlar. 

Sağdaki sayfanın HTML belgesinde ise, align özniteliğine her hangi bir atama 

yapılmamıştır. Yani img imi şu şekildedir: 

 

Bu durumda align özniteliğine atama yapılmadığı için resimden sonra gelen 

metin resmin sağ yanına değil, resmin aşağısına yazılır. Eğer align özniteliği değeri 

right olarak verilseydi, bu durumda resim sağda, metin ise solda olacaktı. Yani left 

değerinde olduğunun tam tersi şeklinde olacaktı. Dolayısıyla eğer resmin etrafında metin 

olmasını istersek, align özniteliğini kullanıyoruz. Eğer resmin etrafında metin olmasını 

istemez isek bu durumda align özniteliğini kullanmıyoruz. 

Bu örnekte ayrıca height ve width değerlerinin de verildiğini görüyorsunuz. Bu 

durumda height ve width değerleri resmin boy ve en değerlerinden daha küçük, 

dolayısıyla resim ilk örneğe göre tarayıcı içinde daha küçük gözüküyor. 


Web’den indirmiş olduğunuz bir görüntü dosyasını bilgisayarınıza kaydediniz? Bu 

dosyayı tasarlayacağınız bir web sayfası içinde görüntüleyiniz? Daha sonra bu dosyayı 

aynı sayfa içinde kendi seçeceğiniz farklı boylarda görüntüleyiniz? Buna ek olarak img 

iminin align özniteliğini kullanarak görüntünün etrafındaki metnin farklı şekillerde 

görünmesini sağlayınız? 

4.7 Tampon Boşluk: hspace ve vspace 

Yukarıdaki örnekte metin resmin yanında olduğu durumda, metin resmin hemen 

yanında gözükmektedir. Resmin etrafındaki boşluğu ayarlamak için img iminin iki tane 

özniteliği vardır: hspace ve vspace. Bu özniteliklere pixel cinsinden değerler vererek 

64


resmin etrafında ne kadar boşluk olması gerektiği ayarlanır. Yatay olarak resmin sağında 

ve solunda olması gereken boşluk miktarı hspace özniteliği ile belirlenir. Dikey olarak 

resmin üstünde ve altında olması gereken boşluk miktarı ise vspace özniteliği ile 

belirlenir. Şimdi bunun bir örneğini görelim. Yukardaki sayfada tampon boşluk Tablo 

4-6’daki gibi kullanılabilir. 

 


 

 

 




 







 

 

Tablo 4-6 Görüntü etrafında tampon boşluk kullanma örneği 

Bu HTML belgesi tarayıcı içinde Şekil 4-5’deki gibi gözükür. 

Şekil 4-5 Görüntü etrafında tampon boşluk bırakma örneği 

Görüldüğü gibi bu durumda bayrak resminin hem sağında hem solunda boşluk 

bulunmaktadır. Sağındaki ve solundaki boşluk eşit olup hspace özniteliği ile 

65


belirlenmiştir ve 50 pixel boyundadır. Benzer şekilde resmin altında ve üstünde de boşluk 

vardır. Bu da vspace özniteliği ile belirlenmiştir ve 10 pixel boyundadır. 


Bu örnekte olduğu gibi içinde bir görüntünün ve metinlerin olduğu bir sayfa 

tasarlayınız? Tasarladığınız sayfa içindeki görüntü sayfanın sol tarafında değilde sağında 

olsun. Görüntünün etrafında da yine metin olsun. Görüntü ile metin arasındaki boşluğu da 

hspace ve vspace öznitelik değerlerine farklı değerler vererek ayarlayınız? 

4.8 Görüntülerin Düğme Olarak Kullanılması 

HTML dilinin önemli bir özelliği de görüntülerden bağlantı oluşturulabilmesidir. 

Böylelikle görüntüler web sayfalarında düğme olarak kullanılabilir. Bu hem web 

sayfaları için farklı görünüşteki düğmeler tasarlamada faydalı olur, hem de özellikle 

kurum sitelerinde kurum logolarına tıklayarak kullanıcıların kurumun bütün web 

sayfalardan ana sayfasına kolayca dönülmesini sağlar. 

Bir görüntüden bağlantı oluşturan örnek bir sayfa Tablo 4-7’de gözükmektedir. 

Bu örnek sayfada Google logosundan Google web sitesine bir bağlantı oluşturulmuştur. 

 

Görüntüleri Düğme olarak Kullanma 

 

 

 

Tıklanabilir Görüntüler 

HTML dilinin önemli bir özelliği de görüntülerden bağlantı 

oluşturulabilmesidir. Böylelikle görüntüler düğme olarak ta 


 

 

Bunun için <a> baslangıç imi ile bitiş imi arasına 

<img> imini yerleştirmek yeterli olur. Yukardaki ikona 

tıklayabilirsiniz. 

 

 

Tablo 4-7 Bir görüntüden bağlantı oluşturma örneği 

Bu HTML belgesi tarayıcı içinde Şekil 4-6’daki gibi gözükür. 

66


Şekil 4-6 Görüntüden bağlantı oluşturma 

Bir görüntünün tıklanabilir olmasını istersek bunu yukarıdaki HTML belgesinde 

olduğu gibi img imini a imi içine koyarak yaparız: 

 

Şu ana kadar oluşturduğumuz bağlantılarda başlangıç imi ile bitiş imi arasına 

bağlantı oluşturulacak metni yazıyorduk, bu durumda metin yerine img imini yazıyoruz. 

Böylece resme tıklandığında tarayıcı imi ile tanımlanmış olan adrese yönleniyor. 


Türkiye’deki üç farklı üniversitenin logolarını web sitelerinden kendi 

bilgisayarınıza indiriniz? Tasarlayacağınız bir web sayfası içinde bu üç logoyu kullanınız 

ve her logodan da o üniversitenin web sitesine bir bağlantı veriniz? Eğer logo boyları 

farklı ise görüntü boylarını daha önceki bölümlerde gördüğümüz gibi ayarlayarak bütün 

logoların aynı boyda görünmesini sağlayınız? 

4.9 Görüntüler Üzerinde Tıklanabilir Bölgeler 

HTML dilinin sağladığı diğer önemli bir özellik de görüntülerin farklı bölgelerine 

farklı bağlantılar verilebilmesine imkân sağlamasıdır. Özellikle harita tipi uygulamalarda 

bu özellik çok faydalı olmaktadır. Haritada hangi mekan üzerine tıklarsanız oraya 

verilmiş bağlantı adresine gidilebilmektedir. 

Bununla ilgili Tablo 4-8’deki örnek tek bir görüntüdeki farklı gezegen 

resimlerinden farklı sayfalara bağlantı yapmayı gösteriyor. 

67


 

 

Görüntülerin alt bölgelerinden bağlantı oluşturma 

 

 

 

Alt Bölgeleri Tıklanabilir Görüntüler 

Resimdeki gezegenlerden Merkür ve Venüsün resimlerine tıklayarak 

o gezegenlerle ilgili wikipedia sayfasına gidebilirsiniz. 

 

 

 

 

 

 

 

 

Tablo 4-8 Görüntülerin alt bölgelerinden bağlantı oluşturma örneği 

Bu web sayfası web tarayıcısı içinde Şekil 4-7’deki gibi gözükür: 

Şekil 4-7 Görüntülerin alt bölgelerinden bağlantı oluşturma 

Bu web sayfası içindeki gezegenleri gösteren resimde hangi gezegen üzerine 

tıklanırsa o gezegenle ilgili bir web sayfasına gidilmesini istiyoruz. Bunun için bu resmin 

farklı alt bölgelerinden farklı adreslere bağlantı vermemiz gerekiyor. Bağlantı verebilmek 

için de öncelikle aynı resim içinde farklı alt bölgeler tanımlamamız gerekir. Alt bölge 

tanımlama için HTML dilinde map imi kullanılır. Bu imle alt bölgelerin sınırları ve bu 

bölgelere tıklanıldığında gidilecek web sayfası adresleri tanımlanır. Daha sonra da img 

elemanından bu map elemanına referans verilir. Bu örnekte map tanımlama şu şekilde 

yapılmıştır: 

68


 

 

 

 

Resimde dört tane gezegen olmasına rağmen biz bu örnekte kolaylık olması 

açışından sadece iki tanesinden bağlantı oluşturduk. Öncelikle map imine bir isim 

veriyoruz. Çünkü daha sonra bu ime img elamanı içinden referans vermemiz gerekiyor. 

Map elemanına id ve name özniteliklerini kullanarak isim veriyoruz. Bunlardan id 

özniteliği şu anda kullanılması tavsiye edilen özniteliktir. Ama eski tarayıcılarda da 

sayfamızın çalışması için ikisini de kullanmamızda bir sakınca yok. Sonra map imi içinde 

istediğimiz kadar alt bölge tanımlayabiliriz. Bu örnekte biz iki tane alt bölge tanımladık. 

İlk alt bölge resimdeki ilk gezegen olan Merkür gezegeni için tanımlanmış bir dikdörtgen 

alan. İkinci alt bölge ise ikinci gezegen olan Venüs için tanımlanmış daire şeklinde bir 

alan. Merkür için olan alanın dikdörtgen olarak tanımlanmasının tek amacı dikdörtgen 

alan tanımlamayı göstermek içindir. 

Dikdörtgen bir alan tanımlanırken dikdörtgenin sol alt köşesinin x ve y 

koordinatları ile birlikte dikdörtgenin eni ve yüksekliği verilir. Bu örnekte 10 pixellik 

mesafe dikdörtgenin sol alt köşesinin resmin başlangıcından olan yatay uzaklığıdır. 

Dikdörtgenin sol alt köşesinin resmin tavanından dikey uzaklığı ise bu durumda 110 

pixeldir. Dikdörtgen alanın eni 50 pixel, yüksekliği ise 60 pixeldir. Fare ile kullanıcı bu 

tanımlanan dikdörtgen bölge üstüne gelip tıkladığında tarayıcı bu area elemanı içinde 

tanımlanmış bağlantıyla gösterilen web sayfasına yönlenir. 

Benzer şekilde dairevi bir alan tanımlarken dairenin merkezinin x ve y 

değerleriyle dairenin yarıçap büyüklüğü pixel cinsinden verilir. Bu örnekte Venüs için 

dairevi bir alan tanımlanmıştır. 

En çok kullanılan alt alan tanımlama şekilerli daire ve dikdörtgen olmasına 

rağmen, çokgen de tanımlanabilir. Çokgenin her köşesinin x ve y koordinatları 

verilmelidir. 


Webden bir Türkiye haritası bulunuz ve bu haritayı kendi bilgisayarınıza indiriniz? 

Bu haritayı tasarlayacağınız bir web sayfası içinde kullanınız? Daha sonra bu haritanın 

içindeki 4 farklı şehirden tıklanabilir bağlantılar oluşturunuz? Her şehrin alt bölgesini 

tanımlarken seçtiğiniz şehrin sınırlarının oluşturduğu geometrik şekli dikkate alınız? Bazı 

şehirlerde yuvarlak tanımlama, bazılarında ise kare tanımlama daha mantıklı olabilir. 

Yapacağınız tanımlamanın şehrin bütün sınırlarını kapsaması gerekmez. Sadece şehir 

69


sınırlarının bir kısmını içerse yeterli olur. Her bir şehir için uygun geometrik şekli ve 

uygun koordinat noktalarını tespit ederek bu uygulamayı yapınız? 

4.10 Arka Plan Olarak Görüntü Kullanma 

Görüntülerin web sayfalarında bir kullanım şekli de arkla plan olarak 

kullanılmalarıdır. Arka plan olarak verilen görüntüler genellikle küçük boyutlu 

görüntülerdir ve bu görüntüler sayfada tekrar edilerek tek bir çeşit görüntü oluşturulur. 

Bunun için body iminin background özniteliği kullanılır. Böylece bir web sayfasının 

tümünün arka plan görüntüsü belirlenmiş olur. 

Şimdi küçük bir gif dosyasını arka plan olarak ayarlayalım. Arka plana 

koyacağımız görüntü Şekil 4-8’deki resimdir. 

Şekil 4-8 Arka planda kullanmak için görüntü örneği 

Bu resmin boyutu 247*100 pixeldir. Dosyanın boyu ise sadece 2 KB’dır. Bu 

resmi arka planda gösterecek HTML sayfa kodu Tablo 4-9’daki gibi olur. 

 

Görüntüleri Arka Plan Olarak Kullanma 

 

 

 

Arka Planda Görüntü Kullanımı 

Bu sayfanın arka planında soluk bir Turkiye resmi bulunmaktadır. 

Bu resimde iki tane küçük Turkiye resmi vardır. Bu iki resim 

sayfada hem yatay düzlemde hem dikey duzlemde tekrar ederek bütün 

sayfayı kaplamaktadır. 

 

 

Tablo 4-9 Sayfa arka planında görüntü kullanma örneği 


70


Şekil 4-9 Arka planda görüntü kullanımı 

Görüldüğü gibi arka plan olarak belirlediğimiz resim arka planda tekrar 

etmektedir. Tarayıcı web sayfasının boyu büyükse bile bu resmi arka planda tekrarlar. 

Arka plan olarak görüntüleri kullanırken en önemli konu web sayfasının 

okunulurluğunun azalmamasıdır. Bu örnekte arka plandaki resimden dolayı metnin 

okunması biraz daha zorlaşmıştır. Dolayısıyla arka plan olarak seçtiğimiz resimlerde çok 

dikkatli olmalıyız. Genellikle arka plan olarak kullanılan resimler çok açık renkli olmalı 

ve metinler de koyu renkli olmalıdır. Böylece metinlerin okunması kolay olmalıdır. Ya da 

arka plana çok koyu renkli resimler konulup metinler açık renkli yapılmalıdır. Her ikisi 

de mümkündür. Önemli olan web sayfasının kolay okunabilir ve kullanılabilir olmasıdır. 

Şimdi biraz daha açık renkli bir resmi arka plana koymayı deneyelim. Bunun için 

kullanacağımız resim Şekil 4-10’da gözükmektedir. 

Şekil 4-10 Arka planda kullanmak için açık renkli bir görüntü 

Bu durumda aynı web sayfası tarayıcı içinde Şekil 4-11’deki gibi görünür. Web 

sayfasının okunulurluğu bu kez çok daha iyidir. 

71


Şekil 4-11 Arka planda açık renkli görüntü kullanımı 

Arka plana konulan resimlerde önemli bir konu da resimlerin tekrar ettiğinin 

anlaşılmamasıdır. Bunun için resimlerin bittiği kenarların renklerinin uyumlu olması 

gerekir. Yukarıdaki her iki örnekte de resimlerin tekrar ettiği anlaşılmamaktadır. Arka 

plana koyacağımız rengi oluştururken buna özellikle dikkat etmemiz gerekir. 


Webde arka planında görüntü kullanılmış olan bazı siteleri tespit ediniz ve o 

görüntüleri bilgisayarınıza indiriniz? Bu görüntüleri kendi tasarladığınız bir sayfada 

kullanınız? 


[1] RGB color space, http://en.wikipedia.org/wiki/RGB_color_space, 7 Ekim 2009. 

[2] RGB color model, http://en.wikipedia.org/wiki/RGB_color_model, 7 Ekim 2009. 

[3] Image compression, http://en.wikipedia.org/wiki/Image_compression, 7 Ekim 2009. 

[4] Lossless data compression, http://en.wikipedia.org/wiki/Lossless_compression, 7 

Ekim 2009. 

[5] Lossy compression, http://en.wikipedia.org/wiki/Lossy_compression, 7 Ekim 2009. 

[6] BMP file format, http://en.wikipedia.org/wiki/BMP_file_format, 7 Ekim 2009. 

[7] Graphics Interchange Format, 

http://en.wikipedia.org/wiki/Graphics_Interchange_Format, 7 Ekim 2009. 

72


[8] Portable Network Graphics, 

http://en.wikipedia.org/wiki/Portable_Network_Graphics, 7 Ekim 2009. 

[9] JPEG, http://en.wikipedia.org/wiki/JPEG, 7 Ekim 2009. 

73


Bölüm 5 

5.1 Amaç 

LİSTELER VE TABLOLAR 

Bu bölümde amacımız düzenli verilerin web sayfalarında liste ve tablo halinde 

sunulmalarının öğrenilmesidir. Bunun için öncelikle liste çeşitleri işlenmiş, her liste 

çeşidinin özellikleri ve kullanım şekli anlatılmıştır. Sonra tablolar gösterilmiş ve gerekli 

HTML imleri anlatılmıştır. Tablo hücrelerinin birleştirilmesi, hücreler arasındaki 

mesafelerin ayarlanması, hücre içindeki içeriklerle hücre duvarı arasında bırakılacak 

boşluğun ayarlanması, hücrelerin arka plan renginin ayarlanması gibi konular işlenmiştir. 

Daha sonra tabloların sayfa tasarımında kullanımları anlatılmıştır. 

5.2 Liste Çeşitleri 

Listeler HTML belgelerinde bulunan bir grup elemanın liste halinde kullanıcıya 

sunulması için kullanılır. Örneğin Türkiye’deki il isimlerini kullanıcılara sunmak istersek 

bunu bir liste halinde sunmak daha anlaşılır olur. İşte bunun gibi birbiriyle ilgili 

elemanları gruplamak için HTML dilinde üç çeşit liste yapma imkanı vardır. Bunlar 

sıralı listeler, sırasız listeler ve tanım listeleridir. Bu liste çeşitleri HTML standardının 

[1] bir alt bölümünde [2] tanımlanmıştır. 

Liste imleri: 

: Sıralı liste oluşturma imi. 

: Sırasız liste oluşturma imi. 

: Tanım listesi oluşturma imi. 

74


Bu imlere ek olarak imi sıralı ve sırasız listelerde her bir liste elemanını 

oluşturmak için kullanılır. Tanım listelerinde ise imi tanım için, imi ise 

tanımlanan elemanı açıklamak için kullanılır. 

5.3 Sıralı Listeler 

Sıralı listeler bir listedeki elemanların sırasının önemli olduğu durumlarda 

kullanılır [3]. Listedeki her bir elemanın listede bir yeri vardır. Buna göre sıralı bir liste 

oluşturulur. Böyle bir listeye örnek olarak alfabetik olarak sıralanmış şehir isimlerini 

düşünebiliriz. Bu listede her şehrin bir yeri vardır. Şimdi bununla ilgili örnek bir HTML 

belgesi oluşturalım. Türkiye’deki şehirlerden alfabetik sıraya göre ilk dördünü üç farklı 

sıralı liste halinde gösteren HTML kodu Tablo 5-1’de verilmiştir. 

 

Sıralı Liste Kullanımı 

 

 

 

Sıralı Liste Kullanımı 

Alfabetik sıraya göre ilk 4 şehrimiz şunlardır: 

 

Adana 

Adıyaman 

Afyon 

Ağrı 

 


 

Adana 

Adıyaman 

Afyon 

Ağrı 

 


 

Adana 

Adıyaman 

Afyon 

Ağrı 

 

 

 

Tablo 5-1 Sıralı liste kullanım örneği 


75


Şekil 5-1 HTML belgesi içinde sıralı liste kullanım örneği 

HTML belgesinde gözüktüğü gibi, ilk sıralı liste bu belge içindeki im çifti 

arasındaki elemanlardan oluşmuştur. İlk im çifti arasında 4 tane im çifti 

vardır. Bunlar listenin her bir elemanını tanımlar. İlk listede başlangıç imi içinde 

listenin tipi verilmemiştir. Bu durumda listedeki elemanlar sayılarla sıralanmıştır. İkinci 

ve üçüncü listelerde ise başlangıç imi içinde type özniteliği ile listenin 

elemanlarının nasıl sıralanacağı belirtilmiştir. İkinci listede type değeri olarak "i", 

üçüncü listede ise "a" olarak verilmiştir. Dolayısıyla ikinci listedeki liste elemanları 

roma rakamlarıyla, üçüncü listedeki liste elemanları ise alfabedeki küçük harflerle 

sıralanmıştır. Üçüncü listede ayrıca sıralamanın hangi elemandan başlaması gerektiğini 

göstermek için start özniteliği kullanılmıştır. Bu özniteliğin değeri 3 olarak verildiği 

için sıralama üçüncü harften yani "c" harfinden başlamıştır. 

Sıralı listelerde type özniteliği değeri a, A, i, I veya 1 olabilir. Yani küçük 

harflerle, büyük harflerle, küçük roma rakamlarıyla, büyük roma rakamlarıyla ve 

sayılarla sıralama yapılabilir. 

Tablo 5-1’deki HTML kodlarında imi içinde bulunan imleri hemen 

satır başından değil de biraz daha içerden başlamıştır. Bu bir zorunluluk değildir. Sadece 

HTML belgelerinin programcı tarafından okunmasını biraz daha kolaylaştırmak içindir. 

Sayfa kodunu bu şekilde yazarsanız HTML belgeniz daha anlaşılır olur ve oluşabilecek 

hataları görme imkanınız da daha fazla olur. 


76


Kendi oluşturacağınız bir sıralı listeyi farklı sıralama karakterleriyle deneyiniz? 

Sıralı liste tipi olarak, yani sıralı liste type özniteliği değeri olarak a, A, i, I veya 1 

değerlerini veriniz? Bu listeler arasındaki farkları gözlemleyiniz? 

5.4 Sırasız Listeler 

Sırasız listeler daha çok listelenecek elemanlar arasında belirli bir sıra söz konusu 

olmadığı durumlarda kullanılır. Sırasız listelerde liste elemanlarının başında numara veya 

harf yerine küçük geometrik işaretler gözükür. Sırasız liste oluşturmak için imi 

kullanılır. Sırasız listeler için Tablo 5-2’deki gibi bazı çiçek isimlerini ve bir 

üniversitenin Mühendislik ve Fen Edebiyat Fakültelerindeki üçer bölümleri gösteren bir 

örnek HTML belgesi oluşturabiliriz. 

 

Sırasız Liste Kullanımı 

 

 

 

Sırasız Liste Kullanımı 

Bazı çiçek çeşitleri: 

 

Lale 

Papatya 

Gelincik 

 

Üniversitemizdeki bölümlerden bazıları şunlardır: 

 

Mühendislik Fakültesi 

 

Bilgisayar Mühendisliği Bölümü 

Gıda Mühendisliği Bölümü 

Çevre Mühendisliği Bölümü 

 

 

Fen Edebiyat Fakültesi 

 

Fizik Bölümü 

Kimya Bölümü 

Biyoloji Bölümü 

 

 

 

 

Tablo 5-2 HTML belgesi içinde sırasız liste kullanım örneği 


77


Şekil 5-2 HTML belgesi içinde sırasız liste kullanım örneği 

Sıralı listelerde olduğu gibi sırasız listelerde de type özniteliği kullanılabilir. Bu 

durumda type özniteliği şu üç değeri alabilir: disc, circle, square. Tablo 5-2’deki 

örnek sayfada çiçek isimlerini gösteren listenin type özniteliği değeri circle olarak 

verilmiştir. Circle kelimesi ingilizcede daire demektir ve tarayıcı içinde ilk listenin 

elemanları, başında küçük ve içi boş daireler olduğu halde Şekil 5-2’de görünmektedir. 

Eğer bu listenin type özniteliği değeri disc olarak verilseydi, bu durumda liste 

elemanları başında içi dolu daire şekli olacaktı. Diğer yönden type özniteliği değeri 

square olarak verilseydi, bu durumda liste elemanları başında içi dolu küçük bir kare 

şekli konulacaktı. 

Bu örnekte çiçek isimlerini gösteren ilk liste basit bir liste iken, ikinci liste iç içe 

iki listenin kullanıldığı birleşik bir listedir. HTML dilindeki üç çeşit liste de iç içe 

kullanılabilir. İç listeler sırasız veya sıralı liste olabilirler. Bu örnekte ilk iç liste sırasız, 

ikinci iç liste ise sıralı liste olarak tanımlanmıştır. İç içe liste oluşturmada bir sınır yoktur. 

Bu örnekte sadece bir liste içinde diğer iki iç liste vardır. Fakat bir iç liste içinde de başka 

iç listeler olabilir. Bu şekilde çok katmanlı listeler oluşturulabilir. 


Bu bölümdeki örnek sayfadaki ikinci listede sırasız bir liste içinde iki tane sıralı 

liste kullanılmıştır. Sırasız listenin her iki elemanı da birer sıralı listedir. Benzer bir 

uygulamayı siz yapınız? Fakat siz uygulamanızda sıralı bir liste içinde yine sıralı listeleri 

78


kullanınız? Örneğin 4 tane şehirden oluşan bir sıralı liste oluşturunuz? Fakat her şehrin 

ilçeleri de ayrıca bu liste içinde sıralı listeler olarak bulunsun. 

5.5 Tanım Listeleri 

Tanım listeleri her liste elemanının bir adının olması gerektiği durumlarda 

kullanılır. Bu durumda her liste elemanının başına bir numara ya da geometrik şekil 

konmaz. Onun yerine her liste elemanının bir adı vardır. Bu durumda her liste elemanı iki 

kısımdan oluşur. Birincisi kısım liste elemanının adı ya da başlığı, ikinci kısım ise bu liste 

elemanının açıklaması. Tanım listeleri kullanmayla ilgili örnek bir HTML sayfası Tablo 

5-3’de verilmiştir. Bu listede bazı çiçek isimleri ve her çiçek için bir açıklama mevcuttur. 

 

Tanım Listesi Kullanımı 

 

 

 

Tanım Listesi Kullanımı 

Bazı çiçek çeşitleri: 

 

Lale 

Lale bahar ayında açan kırmızı bir çiçektir. 

Papatya 

Baharda kırları süsleyen beyaz çiçektir. 

Gelincik 

Baharda açan bir diğer kırmızı çiçektir. 

 

 

 

Tablo 5-3 HTML belgesi içinde tanım listesi kullanım örneği 


79


Şekil 5-3 HTML belgesi içinde tanım listesi kullanım örneği 

HTML belgesinde gözüktüğü gibi tanım listesi oluşturmak için imi 

kullanılır. Her bir liste elemanını oluşturmak içinse diğer iki çeşit listede olduğu gibi 

imi kullanılmaz. Çünkü her liste elemanı iki kısımdan oluşmaktadır. Liste 

elemanının adı imi ile tanımlanır. Liste elemanının açıklaması ise imi ile 

yapılır. 


Bir tanım listesi uygulaması da siz yapınız? Bu listeniz yemekler hakkında veya 

sizin seçeceğiniz başka bir konu hakkında olabilir. Listenizin tanım kısmındaki metni 

koyu ve biraz daha büyük karakterli yapmayı deneyiniz? 

5.6 Tablolar 

Tablolar web sayfalarında birçok farklı amaç için kullanılan çok faydalı bir 

HTML elemanıdır [4]. Bu amaçlardan ilki sunulmak istenen bilginin kullanıcıya bir tablo 

halinde gösterilmesidir. İkinci bir amacı ise web sayfa tasarlarken tablolarla web 

sayfasını farklı bölgelere ayırmaktır. Tablolarla ilgili kurallar HTML standardının bir 

parçası olarak tanımlanmıştır [5]. 

HTML dilinde tablo oluşturmak için imi kullanılır. Her tablo satırlardan 

oluşur. Her bir satır imi ile oluşturulur. Dolayısıyla liste oluşturmada olduğu gibi bir 

imi içinde imi ile oluşturulmuş birçok satır bulunur. Sütunları tanımlamak 

için ayrıca bir im yoktur. Tablolar sadece satırlardan oluşur. Fakat bu durumda ayrıca her 

bir satır içinde birçok hücre elemanı vardır. Bu hücre elemanlarını oluşturmak için ise 

imi kullanılır. Her satırdaki hücre sayısı ise tablonun sütun sayısını belirler. 

80


Tablo 5-4’de vize sonuçlarını öğrencilere duyurmak için yapılmış örnek bir tablo 

sayfası görünmektedir. 

 

Tablo Kulanımı 

 

 

 

Vize Sonuçları 

 

 

Sıra No 

İsim 

Not 

 

 

1 

Ali Ak 

70 

 

 

2 

Veli Aslan 

80 

 

 

3 

İlker Arı 

75 

 

 

 

 

Tablo 5-4 Vize sonuçlarını tablo içinde sunma örneği 

Bu örnekte iminin border isimli bir özniteliği kullanılmıştır. Bu 

öznitelik tablonun çerçevesinin kalınlığını belirler. border özniteliği değeri 1 olarak 

verildiğinde oluşacak tablo Şekil 5-4’deki en soldaki tarayıcı şekli içindeki tablo gibi 

olur. border özniteliği değeri 5 olarak verilirse, bu durumda tablonun etrafındaki çerçeve 

daha kalın olur ve ortadaki tarayıcı şeklindeki gibi gözükür. border özniteliği hiç 

tanımlanmazsa veya sıfır olarak verilirse, bu durumda tablo, en soldaki tarayıcı 

şeklindeki gibi çerçevesiz olarak gözükür. 

81


Şekil 5-4 Vize sonuçlarını tablo içinde sunma örneği 

Tablo imleri: , , , 

Tablo 5-4’deki HTML belgesinde görüldüğü gibi bir HTML tablosu imi 

ile başlar ve imi ile biter. Tablo elemanını başlatan ve bitiren bu iki im çifti 

arasında, her satırı oluşturmak için bir im çifti kullanılır. Ayrıca her satır içindeki 

hücreleri tanımlamak için im çiftleri kullanılır. Genellikle her satırda eşit sayıda 

hücre bulunur. Örneğin bu tabloda her satırda 3 tane hücre vardır. Her bir hücre de 

imi ile tanımlanmıştır. 

Tablonun ilk satırı genellikle başlık satırı olur. Bu durumda başlık satırı içindeki 

hücreleri tanımlamak için imi yerine imi kullanılır. Böylece tarayıcı başlık 

satırındaki metni diğerlerine göre biraz daha koyu renkte gösterir. Fakat sadece ilk 

satırdaki hücreler başlık hücresi olabilir diye bir kural yoktur. Örneğin ilk sütundaki 

hücreler de başlık hücresi olarak tanımlanabilir. 


Bir örnek tablo uygulaması yapınız? Bu tabloda bir öğrencinin ders isimlerini ve 

her dersten aldığı notları tutabilirsiniz. Ya da kendi seçtiğiniz bir konuda tablo 

oluşturabilirsiniz. Ayrıca bu bölümdeki uygulamada başlık satırı olarak tablonun ilk satırı 

seçilmiştir. Siz uygulamanızda başlık kısmı olarak tablonun ilk sütununu seçiniz? 

Tablonuzda ilk sütundaki hücre elemanları biraz daha koyu görünsün. 

5.5.1 Birleşik Satırlar ve Şutunlar: rowspan ve colspan öznitelikleri 

Bazı durumlarda birkaç hücrenin birleştirilmesi gerekir. Bu birleştirme aynı 

satırdaki birkaç hücrenin veya aynı sütundaki birkaç hücrenin birleştirilmesi seklinde 

olur. Hatta bazen birleştirilen hücreler hem birden fazla satır hücresinden hem de birden 

fazla sütun hücresinden oluşabilir. Bu durumda satırları birleştirmek için hücrelerin 

rowspan özniteliği, sütunları birleştirmek için ise hücrelerin colspan özniteliği kullanılır. 

82


Bu öznitelikler ve imlerinin öznitelikleridir. Bir hücrenin kaç satırdan ve 

sütundan oluşacağını belirler. 

Şimdi bir önceki bölümdeki örneği biraz daha genişletelim. Tablonun ilk satırı 

“Final Sonuçları” metnini içersin. Dolayısıyla bu satırda sadece bir hücre olsun. Yani ilk 

satırdaki bütün sütunlar birleştirilmiş olsun. Bu tabloya bir diğer ek olarak ta bir sütun 

ekleyelim. Bu sütunda öğrencileri başarı durumunu gösterilsin. Bu durumda HTML 

belgemizin yeni hali 

Tablo 5-5’deki gibi olur. 

 

Tablo Kulanımı 

 

 

 

 

 

Final Sonuçları 

 

 

Sıra No 

İsim 

Not 

Durum 

 

 

1 

Ali Ak 

70 

Geçti 

 

 

2 

Veli Aslan 

80 

 

 

3 

İlker Arı 

75 

 

 

 

Tablo 5-5 HTML tablosunda birleştirilmiş hücre kullanım örneği 

Bu HTML belgesi tarayıcı içerisinde Şekil 5-5’deki gibi gözükür. 

83


Şekil 5-5 HTML tablosunda birleştirilmiş hücre kullanım örneği 

Görüldüğü gibi bu örnekte tablonun ilk satırında yani ilk im çifti içinde 

diğer satırların aksine sadece tek bir hücre elemanı bulunmaktadır. Bu hüce 

elemanının da colspan özniteliği 4 olarak verilmiştir. Bu ilk satırda tek bir hücre 

olacağını ve bu hücrenin 4 sütun genişliğinde olacağını gösterir. Yani ilk satırda tek bir 

hücre elemanı olacak ve tablonun bütün satırını kaplayacaktır. Şekil 5-5’deki tarayıcı 

şeklinden de görüldüğü gibi, tablonun ilk satırında sadece tek bir hücre elemanı vardır ve 

bu hücre 4 sütuna yayılmıştır. 

Bu tablodaki ikinci farklılık ise üçüncü satırdaki son hücre elemanındadır. 

Üçüncü satırın ilk üç elemanı normal olarak tanımlanmıştır, fakat son hücre elemanı 

tanımlanırken bu hücrenin yani iminin rowspan özniteliği 3 olarak verilmiştir. Bu 

öznitelik değeri üçüncü satırın son elemanının 3 satır boyunda olacağını göstermektedir. 

Fakat bu işlem üçüncü satırın son hücresinin boyunu 3 satır yüksekliğinde yapmak için 

yeterli değildir. Ayrıca yapılması gereken bir işlem daha vardır. Dördüncü ve beşinci 

satırlar tanımlanırken bu satırların son hücreleri tanımlanmamalıdır. Çünkü bu 

satırlardaki son elemanın yerine üçüncü satırın son elemanı genişleyecektir. Dolayısıyla 

çok satıra yayılan bir hücre oluşturabilmek için hem o hücrenin rowspan özniteliği değeri 

verilir, hem de kendisinden sonra gelen satırlar ona göre ayarlanır. 


Oluşturacağınız bir tabloda farklı noktalardaki hücreleri birleştirmeyi deneyiniz? 

Örneğin bu bölümde tablonun son sütunundaki üç tane hücre birleştirilmişti. Siz tablonun 

ortasından bir sütundaki üç tane hücreyi birleştirmeyi deneyiniz? Benzer şekilde bu 

bölümdeki örnekte ilk satırdaki bütün hücreler birleştirilmişti, siz tablonun diğer 

satırlarındaki hücreleri birleştirmeyi deneyiniz? 

84


5.5.2 Tablo Arka Plan Rengi Ayarlama: bgcolor özniteliği 

Tabloların arka plan rengini ayarlamak mümkündür. Tüm tablonun arka planı bir 

renk olarak verilebileceği gibi, her bir satırın arka plan rengi farklı farklı da ayarlanabilir. 

Hatta her bir hücrenin arka plan rengi kendine özgü olarak belirlenebilir. Bu şekilde arka 

plan rengi ayarlanmış üç farklı tablo Şekil 5-6’da gözükmektedir. 

Şekil 5-6 Tablo arka plan rengi ayarlama örneği 

İlk tabloda bütün tablonun arka plan rengi tek bir renk olarak belirlenmiştir. İkinci 

tabloda her satırın arka plan rengi ayrı bir renk olarak ayarlanmıştır. Üçüncü tabloda ise 

her sütunun rengi farklı bir renk olarak verilmiştir. 

Şimdi yukarıdaki ilk tablonun, yani bütün arka plan renginin tek bir renk olduğu 

HTML belgesini görelim. Bu belgenin kodu Tablo 5-6’daki gibi olur. 

 

Tablo Arka Plan Rengi Ayarlama 

 

 

 

 

 

Sıra No 

İsim 

Memleket 

 

 

1 

Ali Ak 

Adana 

 

 

2 

Veli Aslan 

Mersin 

 

 

 

 

85


Tablo 5-6 Tablo arka plan rengi ayarlama örneği 

Bütün tablonun arka plan rengi ayarlanmak istendiğinde table iminin bgcolor 

özniteliği kullanılır. Bu örnekte iminin bgcolor özniteliği değeri aqua olarak 

verilmiştir. Dolayısıyla bütün tablonun arka plan rengi açık mavi olmuştur. 

Şimdi Şekil 5-6’daki ikinci tablonun HTML kodunu görelim. Bu durumda her 

satırın arka plan rengini ayarlamak için her iminin bgcolor özniteliği kullanılır. Bu 

sayfanın HTML kodu 


 


 

 

 

 

 

Sıra No 

İsim 

Memleket 

 

 

1 

Ali Ak 

Adana 

 

 

2 

Veli Aslan 

Mersin 

 

 

 

 

Tablo 5-7 Tablo satırlarının arka plan rengini ayarlama örneği 

İlk HTML belgesinde sadece iminin bgcolor özniteliği kullanılmıştı. Bu 

örnekte ise her satırın arka plan rengini farklı bir renge ayarlamak için, her iminin 

bgcolor özniteliği farklı bir renk olarak verilmiştir. 

Son olarak her sütunun farklı bir arka plan rengine sahip olduğu Şekil 5-6’daki en 

sağdaki tablonun HTML kodunu görelim. Bu sayfanın HTML kodu 


86


 


 

 

 

 

 

Sıra No 

İsim 

Memleket 

 

 

1 

Ali Ak 

Adana 

 

 

2 

Veli Aslan 

Mersin 

 

 

 

 

Tablo 5-8 Tablo sütunlarının arka plan rengini ayarlama örneği 

HTML tablolarında sütunları belirtmek için direk bir yol yoktur. Bunun yerine her 

sütun bütün satırlardaki aynı sırada bulunan hücrelerin toplamı seklinde düşünülür. 

Örneğin ilk sütun bütün satırların ilk hücrelerinin toplamından oluşur. İkinci sütun bütün 

satırların ikinci hücrelerinin toplamından oluşur. Bütün sütunlar bu şekilde belirlenir. 

Dolayısıyla bir sütunun arka plan rengini ayarlamak için, bu sütunu oluşturan bütün 

hücrelerin arka plan rengi ayarlanmalıdır. 

Bu örnekte ilk sütunun rengini açık yeşil yapmak için, bu sütunu oluşturan bütün 

hücrelerin bgcolor özniteliği değeri lime olarak verilmiştir. Yani her satırın ilk 

hücresinin bgcolor özniteliği değeri lime olarak ayarlanmıştır. Benzer şekilde ikinci 

sütunun arka plan rengini gri yapmak için, bütün satırların ikinci hücrelerinin bgcolor 

özniteliği değeri silver olarak verilmiştir. Yine benzer şekilde üçüncü sütunun arka plan 

rengini pembemsi yapmak için, bütün satırların üçüncü hücrelerinin bgcolor özniteliği 

değeri fuchsia olarak verilmiştir. Bu şekilde üç sütunun arka plan rengi de farklı bir 

renk olarak ayarlanmıştır. 


Oluşturacağınız 3x3 bir tabloda sadece ortadaki hücrenin arka plan rengi farklı 

olacak şekilde bir arka plan renk ayarlaması yapmayı deneyiniz? Tablonuzda arka plan 

rengi olarak farklı renk çeşitlerini kullanınız? Ayrıca tablonuzda arka plan olarak renk 

yerine görüntü kullanmayı deneyiniz? 

87


5.5.3 Hücreler Arasındaki Mesafeleri Ayarlama: cellspacing ve 

cellpadding 

HTML dili bir tablo içindeki çeşitli boşluk değerlerini ayarlamak için de birçok 

imkânlar sunar. Bunun için iminin iki tane özniteliği vardır: cellspacing ve 

cellpadding. Bunlardan cellspacing özniteliği hücreler arasındaki boşluk miktarını 

pixel olarak belirlemek için kullanılır. Yani iki hücre duvarı arasındaki boşluk miktarını 

belirler. cellpadding özniteliği ise hücrelerin içindeki metin ile bu hücrelerin duvarı 

arasındaki boşluk miktarını pixel cinsinden belirler. 

Tablolada cellspacing özniteliği kullanımını 

Tabloların cellspacing özniteliği hücreler arasındaki boşluk miktarını pixel 

olarak belirlemek için kullanılır. Şimdi cellspacing ile hücreler arasındaki boşluk 

miktarının nasıl ayarlandığını bir örnek HTML sayfası ile görelim. Tablo 5-9’daki 

HTML sayfasında cellspacing özniteliğinin örnek kullanımı gözükmektedir. 

 

Tablolarda boşluk miktarı ayarlama 

 

 

 


belgesi tarayıcı içinde ortadaki resimde olduğu gibi görünür. Bu durumda hücreler 

arasındaki boşluk miktarının ilk duruma göre çok daha küçük olduğu görülür. En son 

resimdeki tablonun oluşması için ise cellspacing özniteliği değeri 1 pixel olarak 

verilmelidir. Bu durumda hücreler arasındaki boşluk miktarı fark edilmeyecek kadar 

azdır. Özetle söylemek gerekirse cellspacing özniteliği hücreler arasındaki boşluk 

miktarını belirlemek için kullanılır. 

Şekil 5-7 Bir tablodaki hücreler arasındaki mesafeyi ayarlama örneği 

Tablolarda cellpadding özniteliği kullanımını 

Tablonun cellpadding özniteliği hücrelerin içindeki metin ile bu hücrelerin 

duvarları arasındaki boşluk miktarını pixel cinsinden belirler. Şimdi cellpadding 

özniteliği ile hücrelerin içindeki metin ile hücrelerin duvarları arasındaki boşluk 

miktarının nasıl ayarlandığını bir örnek HTML sayfası ile görelim. Bu amaçla yazılmış 

bir HTML sayfası Tablo 5-10’da verilmiştir. 

 

Tablolarda boşluk miktarı ayarlama 

 

 

 

 

 

Sıra No 

Çiçek 

Renk 

 

 

1 

Lale 

Kırmızı 

 

 

2 

Gelincik 

Kırmızı 

 

89


 

 

 

Tablo 5-10 Tabloların cellpadding özniteliği kullanımı 

Bu HTML belgesi tarayıcı içinde Şekil 5-8’deki en soldaki tarayıcı resminde 

olduğu gibi görünür. Bu HTML belgesindeki elemanının cellpadding 

özniteliği tanımlanmış olup değeri 10 pixel olarak verilmiştir. Bu 10 pixel hücrelerin 

içindeki metinler ile hücre duvarları arasındaki boşluk miktarını gösterir. Örneğin bu 

tabloda hücre içindeki metinler daha önceki tablolarda olduğu gibi hemen hücre duvarı 

yanında başlamamıştır. Hücre duvarı ile metin arasında hem solda ve sağda, hem yukarda 

ve aşağıda 10 pixel miktarında boşluk vardır. 

Şekil 5-8’deki ortadaki tarayıcı resmindeki tabloda cellpadding özniteliği değeri 

5 pixel olarak verilmiştir. Bu durumda hücre içindeki metin ile hücre duvarı arasındaki 

boşluk ilk tabloya göre çok daha küçüktür. Benzer şekilde son tabloda ise cellpadding 

özniteliği değeri 1 pixel olarak verilmiştir. Dolayısıyla hücre içindeki metin ile hücre 

duvarı arasındaki mesafe en az en soldaki tablodadır. 

Şekil 5-8 Tablolarda cellpadding özniteliği kullanımı örneği 


Oluşturacağınız bir tabloda hem cellspacing hem de cellpadding 

özniteliklerini birlikte kullanınız? Küçük boyutlu ve büyük boyutlu tablolarda bu 

öznitelik değerlerini nasıl kullanmanız gerektiğini farklı sayısal değerler vererek 

araştırınız? Bu iki öznitelik değerinin görüntüyü nasıl etkilediğini gözlemleyiniz? 

90


5.5.4 Tablo Boyu ve Metin Pozisyonu Ayarlama: width, height, align 

ve valign 

HTML dili web sayfalarındaki tabloların eninin ve yüksekliğinin ayarlanmasına 

imkân verir. Bir tablonun tamamının eni ve yüksekliği ayarlanabileceği gibi, her bir 

satirinin veya her bir hücresinin de en ve yüksekliği ayarlanabilir. Tabloların en ve 

yüksekliğinin ayarlanabilmesi için width ve height öznitelikleri kullanılır. Bu 

öznitelikler , , ve imleriyle kullanılabilir. Yani tüm bir tablonun, 

veya bir satırın, veya bir hücrenin eni ve boyu ayarlanabilir. Eni ayarlamak için width 

özniteliği, yüksekliği ayarlamak için ise height özniteliği kullanılır. 

Bazı durumlarda hücre boyu içindeki metinden çok daha büyük olabilir. Bu 

durumda hücre içindeki metnin nerede gösterileceği önemlidir. Hücrelerin içindeki 

metnin bulunacağı pozisyon align ve valign öznitelikleriyle belirlenir. Metnin yatay 

düzlemdeki pozisyonu align özniteliği ile ayarlanır. Metnin dikey düzlemdeki 

pozisyonunu ise valign özniteliği ile ayarlanır. Metin yatay düzlemde sola yanaşık, 

hücre ortasında veya sağa yanaşık olabilir. Metin dikey düzlemde ise yukarda, ortada 

veya aşağıda olabilir. 

align özniteliği metnin hücre içinde yatay düzlemdeki pozisyonunu belirler ve şu 

değerleri alabilir: 

left = sola yanaşık 

center = ortada 

right = sağa yanaşık 

valign özniteliği metnin hücre içinde dikey düzlemdeki pozisyonunu belirler ve 

şu değerleri alabilir: 

top = yukarda 

middle = ortada 

bottom = aşağıda 

Şimdi tablo boyu ve metin pozisyonu ayarlamasıyla ilgili bir örnek HTML belgesi 

görelim. Bu amaçla yazılmış bir sayfa kodu Tablo 5-11’de verilmiştir. 

 

Tablo Boyu Ayarlama 

 

 

 

 

91


 

Parça 

Açıklama 

 

 

İşlemci 

Merkezi İşlem Birimi yani CPU (Central Processing 

Unit) bir bilgisayarın beynidir. Mantıksal ve Aritmetik 

bütün işlemler burada yapılır. 

 

 

Bellek 

Bellek işlemcinin işlem yapacağı bilgilerin ve 

komutların tutulduğu bir hafıza birimidir. İşlemci ile 

bellek arasinda yuksek hızlı bir veri yolu vardir. 

 

 

 

 

Tablo 5-11 Tablo boyu ve metin pozisyonu ayarlama örneği 

Bu HTML belgesi tarayıcı içerisinde Şekil 5-9’daki gibi gözükür. 

Şekil 5-9 Tablo boyu ve metin pozisyonu ayarlama örneği 

Tablo genişliği ve yüksekliği ayarlama 

Öncelikle tablo boyunun nasıl ayarlandığına bir bakalım. iminde width 

ve height öznitelikleri kullanılmıştır. width özniteliği değeri "100%" olarak verilmiştir. 

Burada 100 değerinden sonra gelen % karakteri tablo genişliğinin yüzde olarak verildiğini 

gösterir. Tablo genişliği tarayıcı penceresi genişliğine göre ayarlanacaktır. Yüzde yüz 

demek bu tablonun genişliğinin tarayıcı genişliği kadar olacağı anlamına gelmektedir. 

Zaten Şekil 5-9’daki görülen tarayıcı penceresinde de tablonun genişliğinin tarayıcı 

genişliği kadar olduğu görülmektedir. 

92


Tablonun yüksekliği ise iminin height özniteliği ile ayarlanmıştır. 

Yükseklik de yine yüzde olarak verilmiş ve bağıl olarak ayarlanmıştır. Bu durumda tablo 

yüksekliği tarayıcı yüksekliğinin yüzde doksanı olarak verilmiştir. Yukarıdaki tarayıcı 

penceresinde alt kısımda bir boşluk gözükmektedir. Bu boşluk yüzde onluk boş kısımdır. 

Bu örnekte tablonun hem eni hem de yüksekliği yüzde olarak verilmiştir. Bunun 

bir avantajı tablo boyunun tarayıcı penceresi boyuyla orantılı olarak değişmesidir. 

Tarayıcı penceresi boyu büyütülürse, tablonun da boyu büyüyecektir. Tarayıcı peceresi 

boyu küçültülürse tablo boyu da küçülecektir. 

Tabloda satır yüksekliği ayarlama 

Bu örnekte ayrıca tablonun ilk satırının yüksekliği 40 pixel olarak verilmiştir. 

Yani ilk satırın height özniteliği değeri 40 olarak atanmıştır. 40 değerinin yanında yüzde 

işareti yoktur. Bu da yüksekliğin 40 pixel olacağı anlamına gelmektedir. Bu şekilde 

yükseklik pixel olarak verildiğinde, tarayıcı boyu büyütülse bile ilk satırın yüksekliği 

değişmez. Çünkü yükseklik izafi olarak verilmemiştir. İlk satır yüksekliği her zaman 40 

pixel olur. 

Tabloda sütun genişliği ayarlama 

Bir sütunun genişliği o sütundaki her hangi bir hücrenin genişliği ayarlanarak 

ayarlanır. Bu örnekte ilk satırın ilk hücresinin genişliği yani width öznitelik değeri yüzde 

20 olarak verilmiştir. Dolayısıyla tablonun ilk sütununun genişliği tablonun toplam 

genişliğinin yüzde 20’si kadar olacaktır. Tablo büyürse ilk sütunun genişliği de izafi 

olarak büyüyecektir. Şekil 5-9’da tablonun ilk sütununun genişliğinin tablonun toplam 

genişiliğinin 100’de 20’si kadar olduğu gözükmektedir. 

Hücre içindeki metin pozisyonu ayarlama 

Bu örnekte ikinci satırın yatay düzlemdeki metin pozisyonu center olarak 

ayarlanmıştır. Bu işlem tablonun ikinci iminin align özniteliği değeri center 

verilerek yapılmıştır. Böylelikle ikinci satırdaki bütün hücrelerin içindeki metinler yatay 

düzlemde hücre ortasında gösterilmektedir. Yine ikinci satırın ilk hücresi içindeki metnin 

pozisyonu dikey düzlemde yukarda olarak ayarlanmıştır. Bu işlemde ikinci satırın ilk 

hücresinin yani ilk iminin valign özniteliği değeri top atanarak yapılmıştır. Onun 

için tarayıcı içinde ikinci satırın ilk hücresi içindeki metin, yatay düzlemde ortada, dikey 

düzlemde ise yukarda gösterilmektedir. Üçüncü satırın ilk hücresinin pozisyonu hem 

yatay için hem dikey için ayarlanmıştır. Yatay pozisyonu orta, dikey pozisyonu ise aşağı 

olarak ayarlanmıştır. Bu işlem de üçüncü satırın ilk iminin align özniteliği değeri 

center, valign özniteliği değeri bottom atanarak yapılmıştır. 


93


Üç satırlık bir tablo oluşturunuz? Bu tablonun ilk ve son satırlarının boyu sabit 

iken, ortadaki satırının boyu değişken olsun. Tarayıcı pencere boyu büyütüldükçe ilk ve 

son satır boyları sabit kalsın ama ortadaki satırın boyu pencere boyuna bağlı olarak 

değişsin. Bu tablonun iki tane de sütunu bulunsun. İlk sütunun genişliği sabit iken ikinci 

sütunun genişliği değişken olsun. 

Oluşturmuş olduğunuz bu tablonun ortadaki hücresi içine birçok paragraftan 

oluşan bir metin yerleştiriniz. Bu hücrenin cellpadding özniteliğini kullanarak metnin 

hücre duvarına olan mesafesini ayarlayınız? Ayrıca tablonun diğer hücre elemanlarının 

align ve valign özniteliklerini kullanarak metin pozisyonu ayarlaması yapınız? Bu 

öznitelik değerinin farklı değerlerinin nasıl bir etki yaptığını gözlemleyiniz? 

5.5.5 Web Sayfası Tasarımı İçin Tablo Kullanımı 

Web sayfasını farklı bölgelere ayırmak için tablolar sıkça kullanılır [6]. Böylelikle 

web sayfası tarayıcı içinde daha düzenli görünür. Bu durumda tabloların kenarlıkları 

genellikle görünmez yapılır. Yani table elemanının border özniteliği değeri sıfır olur. 

Web farklı sayfası bölgelere ayrılırken her bölge bir hücreden oluşur. Bu 

hücrelerin arka plan renkleri farklı farklı ayarlanabilir. Böylelikle sayfanın kullanım 

kolaylığı artar. Tablolarda arka planda renk kullanma yerine görüntü de kullanılabilir. 

Aşağıdaki örnek sayfada bir hücrenin arka plan rengi bir görüntü ile ayarlanmıştır. 

Web sayfalarını bölgelere ayırırken kullanılan bir diğer teknik de, bir tablo içinde 

başka tabloların kullanılmasıdır. Bir tablo içindeki bir hücreye başka bir tablo 

yerleştirilebilir. Aşağıdaki örnek sayfada ikinci satırda böyle bir kullanım görülmektedir. 

Şimdi bir web sayfasını bir tablo yardımıyla üç ana bölgeye ayıran bir örnek sayfa 

tasarımı görelim. Bu bölgelerden birisi sayfanın başlık kısmı, ikincisi menü kısmı ve 

üçüncüsü de gövde kısmı olsun. Bu üç farklı bölge sayfa içinde yukardan aşağıya doğru 

tek bir sütunda bulunsun. Bu şekilde tasarlanmış bir web sayfası Tablo 5-12’de 

verilmiştir. 

 

Sayfa Tasarımı İçin Tablo Kullanımı 

 

 

 

 

 

 

Bilgisayar 

 

 

 

 

94


 

İşlemci 

Bellek 

Ön Bellek 

Hard Disk 

 

 

 

 

 

 

 Bilgisayar hem veri işleyen yani 

hesaplamalar yapan, hem de veri depolayan bir makinadır. 

Modern anlamda ilk gelistirilen bilgisayar 1946 yılında 

yapımı tamamlanan ENIAC'tır. 

Merkezi İşlem Birimi (CPU) 

 Merkezi İşlem Birimi yani CPU 

(Central Processing Unit) bir bilgisayarın beynidir. 

Mantıksal ve Aritmetik bütün işlemler burada yapılır. 

 

 

 

Tablo 5-12 Tablo kullanarak web sayfasını farklı bölgelere ayırma örneği 

Bu HTML belgesi tarayıcı içerisinde Şekil 5-10’daki gibi gözükür. 

Şekil 5-10 Tablo kullanarak web sayfasını farklı bölgelere ayırma örneği 

Bu örnekteki bütün bir sayfanın arka plan rengi body elemanının bgcolor 

özniteliği kullanılarak olive olarak ayarlanmıştır. Dolayısıyla bu sayfanın arka plan 

rengi tarayıcı içinde gözüken zeytin yeşili rengidir. Fakat bu sayfanın gövdesinde bir tane 

tablo bulunmaktadır. Bu tablo im çifti içindedir. Böylelikle tablo yatay 

düzlemde web sayfasının merkezine yerleştirilir. Sola ya da sağa yanaşık olmaz. Bu 

95


tablonun kenar çizgileri gözükmesin diye border özniteliği değeri de sıfır olarak 

atanmıştır. 

Sayfada bulunan ana tablonun üç tane satırı vardır. Her bir satır web sayfasının bir 

bölgesini oluşturmak için kullanılır. Her satırda bir tane hücre bulunmaktadır. Bu 

tablonun genişliği 500 pixel olarak verilmiştir. Dolayısıyla tarayıcı penceresi büyüklüğü 

ne olursa olsun, bu tablonun genişliği değişmeyecektir. 

Tablonun ilk satırı web sayfasının başlık kısmını oluşturmaktadır. Bu satırın arka 

plan rengi fuchsia olarak verilmiştir ve ilk satırın yüksekliği 60 pixel olarak 

ayarlanmıştır. Dolayısıyla bu sayfanın başlık kısmı tarayıcı büyüklüğü ne olursa olsun 

sabit kalacaktır. Tablonun bu ilk satırında sadece bir tane hücre vardır ve bu hücre içinde 

de bir im çifti içinde “Bilgisayar” metni vardır. Bu da sayfanın başlık kısmını 

oluşturmaktadır. 

Tablonun ikinci satırında da yine bir tane hücre bulunmaktadır. Bu satırın arka 

plan rengi silver olarak ayarlanmıştır. Bu satırın tek hücresi içinde ise bir başka tablo 

vardır. Bu tablo içinde ise bir tane satır bulunmaktadır. Bu satırda 4 tane hücre 

bulunmaktadır. Her bir hücrede bir bağlantı vardır. Böylece bu satırda bir menü 

oluşturulmuştur. Bu satır web sayfasının ikinci bölgesini, yani menü kısmını oluşturur. 

Bu satır bir tablo hücresi içinde yeni bir tablo oluşturmaya da bir örnektir. 

Tablonun üçüncü satırı ise web sayfasının ana gövdesini oluşturmaktadır. Bu 

satırda bir tane hücre vardır. Bu hücrenin arka planı bir gif dosyası olarak ayarlanmıştır. 

Görüldüğü gibi bu hücrede web sayfasının gövdesindeki her türlü eleman olabilir. Bu 

örnekte gövdede iki tane paragraf ve bir tane de ara başlık bulunmaktadır. Fakat daha 

fazla metin, görüntü, veya tablolar da bu gövde de bulunabilirdi. 


Bu bölümde üç satırlık bir tablo web sayfasını farklı bölgelere ayırmak için 

kullanıldı. Siz tasarlayacağınız bir sayfada dört satırlık bir tablo kullanınız? Bu tablonun 

ilk üç satırı yine bu bölümdeki tablo gibi başlık, menü ve gövde kısımlarını oluştursun. 

Dördüncü satır ise sayfanın alt kısmını oluştursun. Bu alt kısımda genellike ya küçük bir 

menü ya da sayfa sahibi kurum hakkında kısa bilgiler bulunur. Siz de oluşturacağınız 

sayfanın bu alt kısmına ya bir menü ya da sayfa hakkında kısa bilgiler koyunuz? Ayrıca 

web’de bildiğiniz bazı sitelere bakıp sayfaların alt bölgelerini hangi amaçla 

kullandıklarını araştırınız? 

5.5.6 Tablolarla Başlık, Menü ve Gövde Tipi Web Sayfası Tasarımı 

Bir önceki bölümde web sayfası bir tablo yardımıyla üç ana bölgeye ayrıldı. Bu 

bölgeler başlık, menü ve gövde kısımlarıydı. Bu üç kısımda bir tablonun tek bir 

sütununda yukardan aşağıya doğru dizildiler. Bu örnekte yine aynı sayfayı farklı bir 

96


şekilde tasarlayalım. Bu tasarımda sayfa yine aynı şekilde üç farklı gölgeye ayrılsın. 

Fakat bu durumda menü kısmı sayfanın sol tarafında bulunsun. Yine syfa içeriği aynı 

şekilde kalsın. 

Bu durumda web sayfasında yine bir tane tablo olacak. Bir önceki belgede ana 

tabloda üç satır vardı, bu durumda ise iki satır olacak. İlk satır başlık kısmını oluşturacak. 

İkinci satırda ise iki tane hücre olacak. İlk hücre menü kısmı içerirken, ikinci hücre web 

sayfasının ana gövdesini içerecek. 

Bu şekildeki tasarlanmış bir HTML belgesi Tablo 5-13’de verilmiştir. 

 

Sayfa Tasarımı İçin Tablo Kullanımı 

 

 

 

 

 

 

Bilgisayar 

 

 

 

 

İşlemci 

Bellek 

Ön Bellek 

Hard Disk 

 

 

 

 Bilgisayar hem veri işleyen yani 

hesaplamalar yapan, hem de veri depolayan bir makinadır. 

Modern anlamda ilk gelistirilen bilgisayar 1946 yılında 

yapımı tamamlanan ENIAC'tır. 





 

 

 

 

 

 

Tablo 5-13 Tablo kullanarak web sayfasını farklı bölgelere ayırma ikinci örneği 

Bu HTML belgesi tarayıcı içerisinde Şekil 5-11’deki gibi gözükür. 

97


Şekil 5-11 Tablo kullanarak web sayfasını farklı bölgelere ayırma ikinci örneği 

Bu HTML belgesinde sayfanın menü kısmını oluşturabilmek için tablonun ikinci 

satırının ilk hücresinde bir tablo oluşturulmuştur. Daha önceki örnekte bu iç tabloda tek 

bir satır vardı ve bu satırda da dört tane hücre bulunmaktaydı. Bu örnek sayfada ise, 

menü elemanları yukardan aşağı doğru görüneceği için, bu iç tabloda 4 tane satır 

oluşturuldu ve her bir satırda da bir tane hücre oluşturuldu. Bu iç tablonun her hücresine 

de bir tane bağlantı yerleştirildi. Ayrıca ana tablonun ilk satırı iki hücre genişliğinde 

yapılmıştır. Bu işlem de ilk satırda bulunan tek hücrenin colspan özniteliği değeri 2 

olarak verilerek yapılmıştır. 


Bu bölümde tasarlamış olduğumuz web sayfasınının aynısını içi içe iki tablo 

kullanarak yapınız? İlk tablo iki satırdan oluşsun ve her iki satırında da sadece birer hücre 

bulunsun. Fakat ikinci satırdaki hücre içinde yeni bir tablo oluşturunuz? Bu tabloda tek 

bir satır olsun. Bu satırda da iki tane hücre bulunsun. Bu şekilde iki tablo kullanarak bu 

bölümdeki web sayfasının aynısını elde ediniz? 

İkinci bir uygulama olarak ta dört bölgeden oluşan bir sayfa tasarımı yapınız? Bu 

bölgelerin ilk üçü bu bölümdeki örnekte olduğu gibi olsun. Dördüncü bölge ise sayfanın 

alt kısımda bulunsun. Başlık bölgesi gibi genişliği bütün sayfa genişliği kadar olsun. 

Fakat başlık bölgesinden daha küçük ve sayfanın en alt kısmında olsun. Bu sayfa 

tasarımını da iki farklı şekilde yapınız? Birinci yöntemde tek bir tabloda dört farklı 

bölgeyi oluşturunuz? İkinci yöntemde ise iki farklı tablo kullanarak sayfayı dört farklı 

bölgeye ayrınız? Bu durumda ilk tablonun üç satırı olsun. İkinici tablo ise ilk tablonun 

ikinci satırında bulunsun ve bir satırında iki hücresi olsun. 

98


5.7 Özetle 

Tablolar web sayfalarında çok farklı amaçlarla kullanılmaktadır. Hem verileri 

düzenli bir şekilde kullanıcıya sunmak, hem de web sayfası tasarımı yapmak için 

kullanılırlar. Tablolar web tasarımında en sık kullanılan HTML elemanlarından biridir. 

Kaliteli sayfa tasarımı yapabilmek için tablo kullanımını programcılar çok iyi 

bilmelidirler. 

Tablolar tek başlarına kullanılabilecekleri gibi iç içe de kullanılabilirler. Gerek 

kullanıcıya veri sunarken, gerek de web sayfası tasarımı yaparken tablolar bazen içi içe 

kullanılabilir. Tabloları iç içe kullanmaka bir sınır yoktur. Yani bir tablo içinde başka bir 

tablo olabilir. Onun de içinde başka bir tablo olabilir. Bu böylece devam edebilir. Fakat iç 

içe tablo kullanımı arttıkça sayfa tasarımı karmaşıklaşacağından çok fazla katmanlı 

olarak tabloların kullanılmaması tavsiye edilir. 


[1] D. Raggett, A.L. Hors, ve I. Jacobs (editors), "HTML 4.01 Specification", 

http://www.w3.org/TR/html4, 24 December 1999. 

[2] Lists, http://www.w3.org/TR/html401/struct/lists.html, 7 Ekim 2009. 

[3] HTML Lists, http://www.w3schools.com/html/html_lists.asp, 7 Ekim 2009. 

[4] HTML Tables, http://www.w3schools.com/html/html_tables.asp, 7 Ekim 2009. 

[5] Tables, http://www.w3.org/TR/html401/struct/tables.html, 7 Ekim 2009. 

[6] HTML Layout, http://www.w3schools.com/html/html_layout.asp, 7 Ekim 2009. 

99


Bölüm 6 

BASAMAKLI STİL SAYFALARI (CSS) 

6.1 Amaç 

Bu bölümde amacımız, CSS stil sayfalarının ne olduğunun, temel özelliklerinin ve 

web sayfalarında kullanım şeklinin öğrenilmesidir. Bu amaçla öncelikle HTML ile CSS 

bağlantısı anlatılmış, mantıksal ve fiziksel düzenleme kavramları açıklanmıştır. 

Böylelikle hangi durumda HTML kullanılması gerektiği, hangi durumlarda ise CSS 

kullanılması gerektiği açıklanmıştır. Daha sonra CSS ile renk ayarlama ve metin 

özellikleri ayarlama anlatılmıştır. Tek bir HTML elemanı veya bir grup HTML elemanı 

için CSS kuralı yazma gösterilmiştir. Ayrıca fiziksel görüntüsü olmayan iki HTML 

elemanı tanıtılmıştır: ve . En son kısımda ise CSS ile web sayfası tasarımı 

yapma işlenmiştir. 

6.2 Giriş 

HTML dilinin temel amaçlarından biri bilgi paylaşımını kolaylaştırmaktır. Bunun 

için de HTML dilinin mümkün olduğunca basit olması amaçlanmıştır. HTML dilinin 

basit olması bir yandan çok önemli bir avantaj sağlamış ve bu dilin hızla yayılmasında 

önemli bir etken olmuştur. Diğer yandan bu dilin basitliği bazı dezavantajları da 

beraberinde getirmiştir. Örneğin, HTML dili web sayfaların görünümünü daha detaylı bir 

şekilde kontrol etmek isteyen programcılara yeterli imkânları sunamamıştır. Bunun için 

web sayfalarını daha detaylı kontrol ekmek amacıyla Basamaklı Stil Sayfaları (CSS) 

geliştirilmiştir [1, 2]. 

6.3 Mantıksal ve Fiziksel Düzenleme 

Bir HTML belgesinde HTML imleriyle CSS beraber kullanıldığında, genel olarak 

HTML imleri bu belgeyi mantıksal olarak düzenlemek için, CSS ise bu belgedeki 

100


elemanları fiziksel olarak düzenlemek için yani görünümlerini ayarlamak için kullanılır. 

Mantıksal düzenlemeden amaç HTML belgesindeki elemanları tanımlamaktır [3]. 

Örneğin bu belgedeki hangi metinler başlık olacak, hangileri paragraf olacak, hangileri 

liste olacak gibi. Bu tanımlamalar HTML ile yapılır. CSS ise tanımlanmış olan bu 

elemanların görünümlerini ayarlar. Başlık elemanları nasıl gözükmeli, paragraflar nasıl 

olmalı gibi. 

6.4 İlk CSS Örneği 

CSS stillerinin nasıl kullanıldığını görmek için bir örnekle başlayalım. Bu örnekte 

bir web sayfasındaki başlıkların ve paragrafların bazı özelliklerini CSS stili kullanarak 

ayarlayalım. Bu amaçla yazılmış bir HTML belgesi Tablo 6-1’de verilmiştir. 

 

İlk CSS kullanım Örneği 

 

 

h1 {color: green; text-align: center} 

h3 {color: brown} 

p {color: blue} 

 

 

 

Bilgisayar 

Bilgisayar hem veri işleyen yani hesaplamalar yapan, 

hem de veri depolayan bir makinadir. Modern anlamda ilk 

geliştirilen bilgisayar 1946 yılında yapımı tamamlanan 

ENIAC'tır. 





 

 

Tablo 6-1 İlk CSS örneği 


101


Şekil 6-1 İlk CSS örneği 

CSS Stil Kurallarının Belge İçindeki Yeri 

Bu HTML belgesinde CSS stil kuralları imi içerisinde yazılmıştır. CSS 

stil kuralları HTML belgesi içinde iki farklı şekilde daha yazılabilir. Bunları daha sonra 

göstereceğiz. Şimdilik yazacağımız bütün CSS stil kuralları imi içinde olacak. 

imi 

CSS stil kuralları im çifti içerisinde yazılır. Ayrıca her zaman bu imin 

type özniteliği yukarda olduğu gibi "text/css" olarak verilir. Böylece tarayıcı bu stil 

kuralının bir CSS stil kuralı olduğunu anlar. 

 




 

CSS Stil kuralları 

CSS Stil kuralları HTML belgesinde mantıksal olarak tanımlanmış olan elemanlar 

için yazılır. Bu örnekte HTML belgesinde tanımlanmış olan üç tane eleman (h1, h3, p) 

için stil kuralı yazılmıştır. 

CSS Stil kuralı Formatı 

CSS Stil kuralları şu formatta yazılır: 

102


secici {ozellik1: deger1; ozellik2:deger2; ... ozellikN:degerN;} 

İlk önce bu kuralın hangi elemana uygulanacağı belirtilmelidir. secici kuralın 

uygulanacağı elemanı belirtir. Daha sonra küme parantezi içinde bu elemana uygulanacak 

kurallar sıralanır. Her kural bir özellik adı ve bu özelliğin alması istenen değerden oluşur. 

özellik adı ile değeri arasında iki nokta konulur. Her iki kural arasına ise noktalı virgül 

konulur. Bizim örneğimizde ilk başlık için şu şekilde bir kural yazılmıştır: 


İlk önce kuralın uygulanacağı eleman olarak h1 verilmiştir. Satırın başındaki bu 

h1 ifadesi, küme parantezi içindeki kuralların web sayfası içindeki h1 elemanlarına 

uygulanacağını gösterir. Sonra h1 elemanının uyması gereken iki tane kural küme 

paramtezi içinde yazılmıştır. Bunlardak ilk kural h1 elemanının rengini yeşil yapmak 

içindir. Bu kuraldaki color ifadesi özellik adıdır ve renk demektir. Bu özelliğin değeri 

green (yeşil) olarak verilmiştir. Yani h1 elemanının tarayıcı içindeki rengi yeşil olarak 

ayarlanmıştır. İkinci kural ise h1 elemanının yatay düzlemde sayfanın ortasında 

gözükmesini sağlamak için yazılmıştır. Bu kuralın özelliğinin adı text-align’dır. Bu 

ifade metnin pazisyonu manasınadır ve değeri center, yani ortada olarak verilmiştir. 

Dolayısıyla h1 elemanı tarayıcı içinde yatay düzlemde ortada görünecektir. 



Diğer iki stil kuralı ise h3 ve p elemanlarının metin rengini ayarlamaktadır. h3 

elemanının rengi kahverengiye, p elemanlarının metin rengi ise maviye ayarlanmıştır. 

Tekrar eden Elemanlar 

Bu HTML belgesinde bir tane h1 ve bir tane de h3 elemanı vardır. Fakat p 

paragraf elemanından iki tane mevcuttur. Görüldüğü gibi paragraf elemanı için yazılan 

stil kuralı her iki paragrafa da uygulanmıştır. Her iki paragrafın da rengi mavi olarak 

gözükmektedir. Dolayısıyla stil içinde yazılan kurallar bir sayfadaki bütün aynı tip 

elemanlara uygulanmaktadır. Örneğin bu sayfada 10 farklı paragraf olsaydı, bu paragraf 

kuralı bu 10 paragrafın hepsine de uygulanacaktı. Benzer şekilde eğer bu sayfada 3 adet 

h3 elemanı olsaydı, h3 için yazılan kural bu sayfadaki bütün h3 elemanlarına 

uygulanacaktı. 

Mantıksal ve Fiziksel Düzenleme 

Bu örnekte de görüldüğü gibi HTML kodları bir belgedeki elemanları mantıksal 

olarak tanımlar. Yani hangi bölümlerin başlık, hangi bölümlerin paragraf olacağını 

belirler. CSS stil kuralları ise tanımlanmış olan bu HTML elemanlarının görünmesi 

gereken şekli belirler. HTML dili elemanların görünümü için bazı imkânlar sunmaktadır. 

103


Fakat bunlar birçok durumda yeterli olmamaktadır. Onun için daha detaylı görünüm 

ayarlaması yapabilmek için CSS stil sayfaları kullanmak gerekmektedir. 

CSS Stil kuralı Kullanmanın Bir Avantajı 

CSS stil kuralları kullanmanın bir avantajı, bu kuralların sadece bir defa sayfa 

başında yazılmasıdır. Örneğin bir sayfadaki bütün paragrafların özellikleri bir stil kuralı 

ile belirlenebilir. Daha sonra HTML belgesi içinde ayrıca her paragraf için bu kuralları 

tekrar etmeye gerek yoktur. Böylece sayfa düzenlemesi yapmak çok daha kolay olur. 

Diğer yandan sayfamızdaki paragrafların bir özelliğini değiştirmek istersek, bu durumda 

sadece sayfa başında yazılmış tek bir CSS stil kuralını değiştirmek yeterli olur. Eğer her 

paragrafta bu özellikler ayrı ayrı yazılsaydı, bu durumda bütün paragrafların bir özelliğini 

değiştirmek çok daha zahmetli ve hataya açık olurdu. 


İçinde en az üç tane başlık ve üç tane paragraf bulunan bir sayfa tasarlayınız? Bu 

sayfanın başlıklarının reklerini ve pozisyonlarını CSS stil kuralları yazarak ayarlayınız? 

Benzer şekilde paragraf metinlerinin renklerini ve pozisyonlarını da CSS stil kuralı 

yazarak belirleyiniz? 

6.5 CSS ile Arka Plan Rengi Ayarlama 

CSS ile bir web sayfasının tamamının arka plan rengi ayarlanabileceği gibi, her 

bir elemanın arka plan rengi de ayarlanabilir [4]. Şimdi bu işlemin nasıl yapıldığını 

gösteren bir sayfa görelim. Bu amaçla yazılmış bir HTML belgesi Tablo 6-2’de 

verilmiştir. 

 

İlk CSS Kullanım Örneği 

 

 

body {background-image: url("images2/arkaplan.gif")} 

h1 {background-color: #C0C0C0; color: #800000; text-align: center} 

h3 {background-color: yellow; color: brown} 

p {background-color: white; color: blue} 

 

 

 

Bilgisayar 

Bilgisayar hem veri işleyen yani hesaplamalar yapan, hem de veri 

depolayan bir makinadir. Modern anlamda ilk geliştirilen bilgisayar 

1946 yılında yapımı tamamlanan ENIAC'tır. 


Merkezi İşlem Birimi yani CPU (Central Processing Unit) bir 

bilgisayarın beynidir. Mantıksal ve Aritmetik bütün işlemler burada 

yapılır. 

 

104


 

Tablo 6-2 CSS ile arka plan rengi ayarlama örneği 


Şekil 6-2 CSS ile arka plan rengi ayarlama örneği 

Web tarayıcı görüntüsünde olduğu gibi, bu örnekte önce bütün belgenin arka planı 

bir görüntü olarak ayarlanmıştır. Sonra her bir HTML elemanının arka plan rengi ayrı 

ayrı ayarlanmıştır. 

İlk HTML belgesindeki CSS kurallarına bu örnekte birkaç ekleme yapılmıştır. Bu 

belgenin CSS kuralları şu şekildedir: 

 

body {background-image: url("images2/arkaplan.gif")} 

h1 {background-color: #C0C0C0; color: #800000; text-align: center} 

h3 {background-color: yellow; color: brown} 

p {background-color: white; color: blue} 

 

Öncelikle bütün sayfanın arka plan rengini ayarlamak için HTML belgesinin body 

elemanı kullanılır. 

Arka Plan özellikleri: background-color ve background-image 

105


Bu örnekte h1, h3 ve p elemanlarının arka plan rengi background-color 

özellikleri kullanılarak belirlenmiştir. Body elemanının arka planı ise background-image 

özelliği kullanılarak belirlenmiştir. background-color özelliği arka plan rengini bir renk 

olarak ayarlamak için kullanılır. Background-image özelliği ise arka plana bir görüntü 

yerleştirmek için kullanılır. Arka plan görüntüsünün adı verilirken, görüntü adı yukarda 

olduğu gibi url anahtar kelimesiyle birlikte parantez ve tırnak içinde verilir. 

CSS’te Renkler 

Bu örnekte h3 ve p elemanlarının arka plan rengi renk isimleri verilerek 

ayarlanmıştır. CSS’te de HTML’de kullanılan 16 farklı renk isimleri kullanılabilir. Bu 

renk isimleri şunlardır: 

Black, Green, Silver, Lime, Gray, Olive, White, Yellow, 

Maroon, Navy, Red, Blue, Purple, Teal, Fuchsia, Aqua. 

Bu örnekte ayrıca h1 elemanının arka planı ve metin rengi 24 bitlik sayısal RGB 

gösterim formatı kullanılarak ayarlanmıştır. CSS ayrıca renklerin bu şekilde 

tanımlanmasını da destekler. Bu gösterim şekli HTML’de olduğunun aynısıdır. Bu 

konuda daha geniş bilgi Görüntülerin anlatıldığı 3. bölümde mevcuttur. 


En az üç farklı başlığın ve üç paragrafın olduğu bir HTML sayfası oluşturunuz? 

Bu sayfanın arka plan rengini ayrı, başlıkların arka plan rengini ayrı ve paragrafların arka 

plan rengini ayrı bir renge ayarlayınız? 

6.6 CSS ile Metin Fontu Ayarlama 

CSS ile HTML belgesindeki fontların birçok özelliği ayarlanabilir [5]. Bunlardan 

en önemlileri fontların büyüklüğü, fontun çeşidi, eğik veya koyu olması gibi özelliklerdir. 

Şimdi bununla ilgili bir örnek sayfa görelim. Bu amaçla tasarlanmış bir sayfa Tablo 

6-3’de verilmiştir. 

 

CSS Kullanım Örneği 

 

 

h1 {color: #800000; 

font-size: 20pt; 

font-family: arial; 

font-style: italic; 

font-weight: bold; 

text-align: center; 

} 

106


h3 {color: brown; 


font-family: sans-serif; 

font-style: normal; 

font-weight: 400; 

margin-left: 0.5cm; 

} 

/* Butun paragraflar bu ozellige sahip olacak*/ 

p {color: blue; 

font-size: 120%; 

font-family: times, courier; 

text-indent: 1cm; 


} 

 

 

 

Bilgisayar 




ENIAC'tır. 





 

 

Tablo 6-3 CSS ile metin fontu ayarlama örneği 


Şekil 6-3 CSS ile metin fontu ayarlama örneği 

107


CSS Stil Sayfalarında Boşluklar 

Bu HTML belgesinde ilk dikkati çeken özellik, CSS stil kurallarının birden çok 

satıra yayılmış olmasıdır. Daha önceki örneklerde bütün bir CSS kuralı tek bir satıra 

yazılmıştı. Bu durumda ise bir CSS kuralı içindeki her bir özellik ayrı bir satıra 

yazılmıştır. CSS kuralları yazılırken boşluklar ve boş satırlar ihmal edilir. Dolayısıyla 

kuralların bu şekilde çok satıra yazılmasında bir sakınca yoktur. 

CSS Stil Sayfalarına Açıklama Eklemek 

CSS stil sayfalarına açıklamalar eklenebilir. Açıklamanın başlangıcını taksim ve 

yıldız, yani /* karakter çifti gösterir. Açıklamanın bitimini ise yıldız ve taksim yani */ 

karakter çifti gösterir. Bu örnek belgede paragraf için yazılan stil kuralından hemen önce 

bir açıklama eklenmiştir. Açıklamalar programlama dillerinde olduğu gibi tarayıcı 

tarafından ihmal edilirler. Açıklamalar tarayıcı için değil bu kodu okuyacak insanları için 

yazılırlar. Kodun anlaşılmasını kolaylaştırmayı hedeflerler. 

Font boyu: font-size 

CSS stil sayfalarında bir fontun boyunun ayarlanması için font-size anahtar 

kelimesi kullanılır. Yukarıdaki örnekte h1 elemanının boyu 20 punto, h3 elemanının boyu 

ise 16 punto olarak ayarlanmıştır. Paragraflardaki metinlerin boyu ise göreli olarak yüzde 

120 olarak verilmiştir. Yani bu fontun büyüklüğü tarayıcının varsayılan font boyundan 

biraz daha büyük olacaktır. Görüldüğü gibi font boyu çeşitli sekilerde verilebilir. Bu iki 

örneğe ek olarak cm veya in (inch) ölçu birimleri de font boyunu belirtmek için 


Bunlara ek olarak ayrıca font boyunu belirtmek için şu anahtar kelimeler de 

vardır: xx-small, x-small, small, medium, large, x-large, xx-large. Yüzde ile veya 

bu anahtar kelimelerle yapılan göreli boy ayarlaması daha esnektir. Farklı ortamlarda 

daha iyi sonuçlar vermesi ihtimali yüksektir. 

Font çeşidi: font-family 

Fontların çeşidi ise font-family anahtar kelimesiyle ayarlanır. Bu belgede h1 

başlığının çeşidi arial, h3 baslığının çeşidi sans-serif ve paragraf metinlerinin çeşidi 

ise times olarak ayarlanmıştır. Paragraf font çeşidi olarak iki değer verilmiştir. Bu 

durumda tarayıcı verilen ilk font çeşidini destekliyorsa onu kullanır. Eğer ilk font çeşidi 

desteklenmiyorsa, ikinci verilen font çeşidi kullanılır. 

Font stili: font-style 

108


Fontların ne kadar dik veya yatık olacaklarını font-style özellikleri gösterir. Bu 

özelliğin alabileceği değerler: italic, normal ve oblique kelimeleridir. Bu özelliğin 

değeri normal olursa, font normal halinde olur. Eğer italic veya oblique olursa, bu 

durumda fontlar sağa doğru biraz yatırılır. 

Font Ağırlığı: font-weight 

Fontların ağırlığını yani ne kadar koyu veya açık olacaklarını font-weight 

özellikleri gösterir. Bu özellik 100, 200, 300, 400, 500, 600, 700, 800 ve 900 değerlerini 

alabilir. 100 değeri fontun en ince halini gösterir. 900 değeri ise fontun en kalın halini 

gösterir. 400 değeri normal kullanılan font ağırlığına karşılık gelir. Örneğin bu HTML 

belgesindeki h3 elemanının font ağırlığı 400 olarak verilmiştir. Font ağırlığı ayrıca 

normal, bold, lighter, bolder gibi kelime değerleri de alabilir. 

Solda veya Sağda Boşluk: margin-left ve margin-right 

Bir HTML elemanının tarayıcının sol veya sağ tarafına tamamen bitişik olmasını 

istemez isek, bu durumda bu eleman ile tarayıcının sol veya sağ tarafı arasında 

bırakılması gereken mesafeyi ayarlayabiliriz. Sol taraftaki bırakılması gereken boşluk 

mesafesini magrin-left özelliği ile ayarlarız. Bu örnekte h3 elemanı ve paragraflar için 

magrin-left özelliği 0.5cm olarak verilmiştir. Tarayıcı penceresinde görüldüğü gibi bu 

elemanlar tarayıcının en solu yerine biraz daha içerden başlamıştır. Sağ taraftaki 

bırakılması gereken boşluk mesafesini ise magrin-right özelliği ile ayarlarız. Bu 

örnekte margin-right özelliği kullanılmamıştır. Fakat benzer şekilde o da tarayıcının 

sağında boşluk bırakmak için kullanılabilirdi. 

Paragrafın ilk satırı başında boşluk: text-indent 

Birden çok satırdan oluşan elemanlarda ilk satırın başlangıcının biraz içerde 

olması istenebilir. İlk satırın başında olması gereken boşluk miktarını text-indent 

özelliği belirler. Bu örnekte paragrafın text-indent özelliği kullanılmıştır ve boşluk 

miktarı 1cm olarak verilmiştir. Tarayıcı penceresinde görüldüğü gibi paragrafların ilk 

satırları diğer satırlara göre daha içerden başlamıştır. 


Bu bölümde HTML belgesi içindeki metinlerin birçok özelliğinin CSS kuralları 

ile nasıl belirleneceğini gördük. Her bir kuralın alabileceği farklı değerler bu bölümde 

açıklanmıştır. Fakat uygulama olarak bu değerlerden sadece bir kısmı gösterilebilmiştir. 

Hazırlayacağınız bir sayfa içinde bulunan başlıklar ve paragraflar için bu bölümde 

gösterilen font özelliklerini değişik değerlere atayarak sayfa içindeki fontların nasıl 

değiştiklerini gözlemleyiniz? Her bir özelliğin metin üzerinde nasıl bir fark 

oluşturduğunu anlamaya çalışınız? 

109


6.7 HTML Elemanları id özniteliği 

Bütün HTML elemanlarının id isimli bir özniteliği vardır. Bu öznitelik ile bir 

HTML elemanına bir isim verilir. Daha sonra isim vermiş olduğumuz bu HTML elemanı 

için CSS stil kuralı yazabiliriz. Şu ana kadar yazmış olduğumuz stil kuralları aynı tip olan 

bütün HTML elemanları için geçerli idi. Örneğin h3 için yazılan bir stil kuralı o belge 

içindeki bütün h3 elemanları için geçerli idi. Bu bölümde ise her bir HTML elemanına bir 

isim vererek tek bir elemana özel stil kuralı yazmayı göreceğiz. 

Şimdi id özniteliğinin nasıl kullanıldığını gösteren bir örnek HTML belgesi 

görelim. Bu amaçla yazılmış bir sayfa kodu Tablo 6-4’de verilmiştir. 

 


 

 

/* butun paragraflarin ozellikleri*/ 

p {font-size: 110%; 


text-indent: 1cm; 

text-align: justify; 

} 

/* ikinci paragrafin ozellikleri*/ 

#p2 {color: maroon; 

font-family: arial, courier; 

margin-left: 2cm; 

margin-right: 2cm; 

} 

 

 

 

Bilgisayar 

Bilgisayar hem veri işleyen yani hesaplamalar yapan, hem 

de veri depolayan bir makinadir. Modern anlamda ilk 


ENIAC'tır. 

Merkezi İşlem Birimi yani CPU (Central 

Processing Unit) bir bilgisayarın beynidir. Mantıksal ve 

Aritmetik bütün işlemler burada yapılır. 

Bellek işlemcinin işlem yapacağı bilgilerin ve 

komutların tutulduğu bir hafıza birimidir. İşlemci ile 

bellek arasında yüksek hızlı bir veri yolu vardır. 

 

 

Tablo 6-4 HTML elemanları id özniteliği kullanımı örneği 


110


Şekil 6-4 HTML elemanları id özniteliği kullanımı örneği 

Bu HTML belgesinin gövde kısmına baktığımızda, ikinci paragraf için id 

özniteliğinin tanımlandığını görürüz. İkinci paragraf için id özniteliği şu şekilde 

tanımlanmıştır: 

 

Artık ikinci paragrafın kendine özgü bir ismi vardır. Benzer şekilde diğer iki 

paragraf içinde bir id özniteliği tanımlanabilirdi. Fakat bu örnekte buna gerek olmadığı 

için sadece ikinci paragraf için tanımlanmıştır. Genel olarak bir HTML belgesindeki 

bütün elemanların: başlıkların, paragrafların, listelerin, tabloların, görüntülerin, 

bağlantıların, yani her türlü elemanın id özniteliği olabilir. Bir HTML elemanına id 

özniteliği kullanılarak bir isim verdikten sonra, bu elemana direk olarak ismiyle 

erişmemiz ve sadece ona özgü stil kuralları yazmamız mümkündür. 

Bu sayfanın stil kısmında iki tane stil kuralı yazılmıştır. İlk yazılan stil kuralı bu 

belgedeki bütün paragraflar içindir. İkinci stil kuralı ise özel ismi p2 olan ikinci paragraf 

içindir. İkinci paragrafın kendisi de bir paragraf olduğu için, p için yazılan stil kuralı bu 

paragrafa da uygulanır. Bu durumda ikinci paragrafa hem p için yazılan kurallar, hem de 

kendisi için yani p2 için yazılan kurallar uygulanır. İkinci paragrafın kendisi için yazılan 

kurallar bu paragrafın solunda ve sağında ikişer cm miktarında boşluk bırakılmasını 

gerektiriyor. Buna ek olarak font rengini maron olarak ayarlıyor. Dolayısıyla bu paragraf 

tarayıcı resminde de görüldüğü gibi daha içerde ve farklı renkte gözükmektedir. 

Yalnız dikkat edilirse font-family özelliğinin hem p için hem de p2 için 

tanımlandığını görürüz. Bu durumda ikinci paragrafın font ailesi ne olacaktır? Bu 

durumda p2 için yazılan kural p için yazılan kuraldan daha baskındır. Çünkü p2 için 

111


yazılan kural daha özeldir. Genel bir kural olarak, özel olan kurallar daha genel olan 

kurallara göre baskın olur. Dolayısıyla bu durumda ikinci paragrafın font ailesi p2 ile 

tanımlanan değer olur. 

Metin Hizalama: text-align 

HTML metin elemanlarının sayfanın yatay düzlemde neresinde bulunacağı 

CSS’te text-align özelliği ile belirlenir. Bu HTML belgesinde p için yazılan kuralda 

text-align özelliği kullanılmıştır. Bu özelliğin alabileceği değerler: left, right, 

center ve justify değerleridir. İsimlerinden anlaşılacağı gibi, left ve right değerleri 

metin elemanlarını sola veya sağa yanaşık yapar. Metin elemanlarını ortalamak için 

center kullanılır. Dağıtık hizalama için ise justify kullanılır. 


Paragraflardan ve başlıklardan oluşan bir HTML belgesi hazırlayınız? Bu 

başlıklardan ve paragraflardan birer tanesinin id özniteliği değerini atayarak onlara özel 

ad veriniz? Daha sonra bu özel isimlendirdiğiniz elemanlar için CSS stil kuralı yazınız? 

Bu elemanların diğer elemanlardan farkını gözlemleyiniz? 

6.8 HTML elemanları class özniteliği 

HTML elemanlarının bir diğer önemli özniteliği ise class özniteliğidir. Bu 

öznitelik birçok HTML elemanının aynı isim altında gruplanmasını sağlar. Aynı sınıf 

ismi altında gruplanan bütün HTML elemanlarına bu sınıf ismiyle tanımlanan CSS 

kuralları uygulanabilir. Bir önceki bölümde gösterilen id özniteliği her bir elemanın 

kendine özgü bir isminin olmasına imkân tanıyordu. Böylece her bir elemanın ismi 

kullanılarak o elemana özgü stil kuralları yazılabiliyordu. Sınıf, yani class özniteliği ise 

bir HTML elemanı yerine, bir grup HTML elemanına aynı isimle stil kuralı yazmamıza 

imkân tanır. Örneğin bir HTML belgesinde yazacağımız bir stil kuralının bütün 

paragraflar veya tek bir paragraf yerine bazı paragraflara uygulanmasını isteyebiliriz. Bu 

durumda bu kuralın uygulanmasını istediğimiz paragrafları aynı sınıfa dâhil edip bu sınıf 

için bir stil kuralı yazarız. Böylece bu stil kuralı bu sınıfa dâhil olan bütün paragraflara 

uygulanır. 

Şimdi class özniteliği kullanımı ile ilgili bir örnek HTML belgesi görelim. Bu 

amaçla yazılmış bir sayfa Tablo 6-5’de verilmiştir. 

 


 

 

/* butun paragraflarin ozellikleri*/ 

p {font-size: 110%; 

112



} 

/* ikinci paragrafin ozellikleri*/ 

#p2 {margin-left: 2cm; 


} 

/* kelimeleri arasinda cok bosluk olacak*/ 

.aralıklı {text-indent: 1cm; 

word-spacing: 0.5cm; 


} 

 

 

 

Bilgisayar 

Bilgisayar hem veri işleyen yani hesaplamalar yapan, hem 

de veri depolayan bir makinadir. Modern anlamda ilk 


ENIAC'tır. 




Bellek işlemcinin işlem yapacağı bilgilerin ve komutların 

tutulduğu bir hafıza birimidir. İşlemci ile bellek arasında 

yüksek hızlı bir veri yolu vardır. 

Hard disk ise bilgisayarda sürekli olarak 

depolanacak bilgileri kaydetmek için kullanılır. Hard 

diskteki bilgiler bilgisayar kapatıldıktan sonra da muhafaza 

edilir. 

 

 

Tablo 6-5 HTML elemanları class özniteliği kullanimi örneği 


113


Şekil 6-5 HTML elemanları class özniteliği kullanimi örneği 

Bu HTML belgesinde üç farklı CSS kuralı tanımlanmıştır. İlk kural bütün 

paragraflara uygulanmak için tanımlanmıştır. İkinci kural sadece p2 paragrafına 

uygulanmak için tanımlanmıştır. Üçüncü kural ise aralıklı sınıfına dâhil olan bütün 

HTML elemanlarına uygulanmak için tanımlanmıştır. Bu belgede class özniteliği 

tanımlanmış olan ve bu öznitelik değeri aralıklı olan iki tane paragraf vardır. Bu 

paragraflar ikinci ve dördüncü paragraflardır. Dolayısıyla bu belgede aralıklı sınıfına 

ait olan paragraflar ikinci ve dördüncü paragraflardır. 

Bütün paragraflara uygulanmak için tanımlanmış olan kural sadece p diye 

başlamıştır. Diğer yandan sadece ikinci paragraf için, yani özel ismi p2 olan paragraf için 

yazılan kural #p2 diye başlamıştır. p2 değerinin başına konulan # karakteri bu kuralın 

sadece özel ismi yani id değeri p2 olan eleman için yazıldığını gösterir. Diğer yandan 

aralıklı sınıfı için yazılan kural .aralıklı diye başlamıştır. Buradaki nokta ise bu 

kuralın bir sınıf için yazıldığını gösterir. Dolayısıyla özel isimler için yazılan CSS 

kuralları # karakteri ile başlarken, sınıflar için yazılan CSS kuralları . karakteri ile 

başlamaktadır. 

Üç farklı CSS stil kuralı yazma şeklini şöyle özetleyebiliriz: 

p {...} Bu stil kuralı bu HTML belgesindeki bütün 

paragraflara uygulanacaktır. 

#p2 {...} Bu stil kuralı sadece id numarası p2 olan HTML 

114


elemanına uygulanacaktır. 

.aralıklı {...} Bu stil kuralı sadece class özniteliği değeri 

aralıklı olan, yani aralıklı sınıfına dahil olan 

HTML elemanlarına uygulanacaktır. 

Bu belgede aralıklı sınıfı için yazılan kural, bu sınıfa ait paragrafların ilk 

satırlarının içerden başlamasını, metin hizalamasının dağıtık olmasını ve bu 

paragraflardaki kelimeler arasında 0.5cm boşluk olmasını gerektiriyor. Dolayısıyla bu 

örnekte aralıklı sınıfına ait olan ikinci ve son paragrafın bu şekilde gösterildiği tarayıcı 

görüntüsünden gözükmektedir. 

Önce ikinci paragrafın başlangıç iminin nasıl tanımlandığını görelim: 

 

Görüldüğü gibi bu paragrafın hem id özniteliği hem de class özniteliği 

tanımlanmıştır. Dolayısıyla bu paragrafa bu örnekteki üç çeşit stil kuralı da 

uygulanmaktadır. Bu eleman bir paragraf olduğu için, p için yazılan stil kuralı uygulanır. 

Sonra bu elemanın id değeri p2 olduğu için, p2 için yazılan stil kuralı da uygulanır. En 

son olarak bu paragrafın class özniteliği değeri aralıklı olduğu için, aralıklı sınıfı 

için yazılan kural da uygulanır. 

Son paragrafın ise id özniteliği tanımlanmamış olup sadece class özniteliği 

vardır: 

 

Bu durumda bu paragrafa p ve aralıklı için yazılan iki çeşit stil kuralı 

uygulanır. Diğer iki paragrafa ise sadece p için yazılan stil kuralı uygulanır. 

Kelimeler arası boşluk miktarı ayarlama: word-spacing 

Bir metindeki kelimeler arasındaki boşluk miktarını ayarlamak için wordspacing 

özelliği kullanılır. Bu boşluk miktarı birimi cm, in (inch), px (pixel), pc (pica), 

em (em ölçu birimi) ve ex (x-yüksekliği) olarak verilebilir. Bu örnekte kelimeler 

arasındaki boşluk miktarı 0,5 cm olarak verilmiştir. Yani büyüklük ölçü birimi olarak cm 

kullanılmıştır. Dolayısıyla bütün kelimeler arasında 0.5 cm boşluk bırakılmıştır. 


Oluşturacağınız bir HTML belgesinde 4 tane paragraf ve 4 tane de başlık 

bulunsun. Bu başlıklardan iki tanesini aynı sınıfa dahil ediniz ve bu elemanlar için bir 

115


CSS stil kuralı yazınız? Benzer şekilde oluşturmuş olduğunuz paragraflardan iki tanesini 

bir sınıfa dahil ediniz ve bunlar için de bir CSS stil kuralı yazınız? Yazmış olduğunuz stil 

kuralında word-spacing özelliğini kullanınız? Bu özelliğin ölçü birimi olarak yukarda 

anlatılan farklı ölçü birimlerini (cm, in, px, pc, em, ex) kullanınız? Bu ölçü birimlerinin 

sonuç üzerinde nasıl bir etki yaptığını gözlemleyiniz? 

6.9 HTML imi 

HTML span elemanı [6] HTML belgesi içindeki her hangi bir bölgeyi bir HTML 

elemanı olarak tanımlamamıza imkân verir. Bu şekilde tanımlanmış bir span elemanının 

fiziksel bir görünüm değeri yoktur. Bu eleman sadece mantıksal bir tanımlama yapar. Bu 

mantıksal tanımlama yapıldıktan sonra fiziksel görünüm tanımlaması stil kuralları 

kullanılarak yapılır. 

Örneğin bir paragraf içindeki bir metin parçasını ayrı bir HTML elemanı olarak 

tanımlayıp, bu HTML elemanına bazı stil kuralları uygulamak isteyelim. Bu durumda 

imini kullanarak bu metin parçasını içinde bulunduğu paragraftan bağımsız bir 

HTML elemanı olarak tanımlayabiliriz. Böylece tanımlanmış olan bu elemana 

istediğimiz stil kurallarını uygulanabiliriz. 

Şimdi span iminin örnek kullanımını gösteren bir örnek bir sayfa görelim. Bu 

amaçla yazılmış bir HTML belgesi Tablo 6-6’de verilmiştir. 

 

CSS Kullanim Örneği 

 

 

.altbaşlık {font-weight: bold; 

font-size: large; 


} 

 

 

 

Bilgisayar 




ENIAC'tır. 

CPU: Merkezi İşlem 

Birimi yani CPU (Central Processing Unit) bir 

bilgisayarın beynidir. Mantıksal ve Aritmetik bütün 

işlemler burada yapılır. 

Bellek: Bellek 

işlemcinin işlem yapacağı bilgilerin ve komutların 

tutulduğu bir hafıza birimidir. İşlemci ile bellek 

arasında yüksek hızlı bir veri yolu vardır. 

Hard Disk: Hard 

disk ise bilgisayarda sürekli olarak depolanacak 

116


bilgileri kaydetmek için kullanılır. Hard diskteki 

bilgiler bilgisayar kapatıldıktan sonra da muhafaza 

edilir. 

 

 

Tablo 6-6 HTML belgesi içinde span imi kullanımı örneği 


Şekil 6-6 HTML belgesi içinde span imi kullanımı örneği 

Bu HTML belgesinde 3 tane elemanı tanımlanmıştır. Her span elemanı 

bir paragrafın baş kısmındaki bir metin için oluşturulmuştur. Şimdi bunlardan ikinci 

paragrafın başında bulunan span elemanının nasıl tanımlandığını görelim: 

CPU: Merkezi ... 

Bu paragraftaki “CPU:”alt metninin paragrafın diğer kısmından biraz farklı 

görünmesini istiyoruz. Yani bu metnin paragraf için bir alt başlık olmasını istiyoruz. 

Bunun için metin fontunun biraz büyük ve koyu olmasını istiyoruz. Benzer şekilde diğer 

iki paragraf başındaki alt başlık metinlerinin de farklı görünmelerini istiyoruz. Bu alt 

metinlerin farklı gözükebilmeleri için, font özelliklerini farklı ayarlamamız gerekiyor. 

Font özelliklerini farklı ayarlayabilmemiz için ise öncelikle bu alt metinlerin 

paragrafların diğer kısımlarından bağımsız birer HTML elemanı olarak tanımlanmaları 

gerekiyor. İşte span imi ile bu alt metinleri farklı birer HTML elemanları olarak 

tanımlıyoruz. Farklı birer HTML elemanı olarak tanımladığımız bu 3 elemanın class 

özniteliklerini kullanarak hepsini aynı sınıfa dahil ediyoruz. Hepsinin class özniteliği 

değeri de altbaşlık olarak verilmiştir. Böylelikle CSS stil kuralını artık altbaşlık 

117


sınıfı için yazabiliyoruz. CSS stil kuralı altbaşlık sınıfına ait olan HTML elemanlarının 

metinlerinin koyu renkte, diğer metinlere göre biraz daha büyük ve fontunun da arial 

olmasını sağlıyor. Böylelikle bu sınıfa ait olan üç HTML elemanı da tarayıcı şekilinde 

göründüğü gibi diğer metinlerden daha belirgin olarak gözüküyor. 


İçinde en az üç tane paragraf bulunan bir HTML belgesi oluşturunuz? Bu belge 

içinde diğer metinlere ek olarak bazı şehir ve ilçe isimleri de bulunsun. Sonra belge 

içindeki şehir isimlerini span imi kullanarak ayrı birer HTML elemanı olarak 

tanımlayınız ve hepsini aynı sınıfa dahil ediniz? Benzer şekilde belge içindeki ilçe 

isimlerini de span imi kullanarak ayrı birer HTML elemanı olarak tanımlayınız ve bunları 

da ayrı bir sınıf olarak gruplayınız? Sonra şehir ve ilçe isimlerinin diğer metinlerden biraz 

daha farklı gözükmesi için iki farklı CSS stil kuralı yazınız? 

6.10 HTML elemanları style özniteliği ve imi 

Şu ana kadar görmüş olduğumuz örneklerde, CSS stil kurallarını HTML 

belgelerine, sayfanın head kısımlarında tanımladığımız style imi ile ekledik. CSS stil 

kurallarını HTML belgelerine eklemenin ikinci bir yolu ise HTML elemanlarının style 

özniteliklerini kullanmaktır. Bütün HTML elemanları için style öznitelikleri 

tanımlanabilir. style özniteliği değeri olarak ta stil kuralları yazılabilir. Fakat bu şekilde 

yazılan stil kuralları sadece o HTML elemanı için geçerli olur. 

Bir önceki bölümde görmüş olduğumuz imine benzeyen bir diğer im de 

imidir. imi imi gibi mantıksal bir tanımlama yapar. Tek farkı 

imi bir blok elemanıdır ve daha çok birden fazla blok elemanını gruplamak için kullanılır. 

Örneğin birden fazla paragrafı bir eleman adı altında toplamak için kullanılabilir. Ayrıca 

iminin başladığı noktaya tarayıcı yeni satır ekler. Dolayısıyla imi paragraf 

içindeki bir alt metni tanımlamak için kullanılamaz. Bunun için bir öenceki bölümde 

gösterilen imi kullanılmalıdır. 

Şimdi hem style özniteliğinin kullanıldığı hem de div iminin kullanıldığı bir 

örnek sayfa görelim. Bu amaçla yazılmış bir sayfa Tablo 6-7’de verilmiştir. 

 


 

 

.altbaşlık {font-weight: bold; 



} 

 

 

118


 

Bilgisayar 




ENIAC'tır. 

 

CPU: Merkezi İşlem 

Birimi yani CPU (Central Processing Unit) bir bilgisayarın 

beynidir. Mantıksal ve Aritmetik bütün işlemler burada 

yapılır. 


işlemcinin işlem yapacağı bilgilerin ve komutların 

tutulduğu bir hafıza birimidir. İşlemci ile bellek 

arasında yüksek hızlı bir veri yolu vardır. 

 

Hard disk ise bilgisayarda sürekli olarak depolanacak 

bilgileri kaydetmek için kullanılır. Hard diskteki 

bilgiler bilgisayar kapatıldıktan sonra da muhafaza 

edilir. 

 

 

Tablo 6-7 HTML belgelerinde div imi kullanım örneği 


Şekil 6-7 HTML belgelerinde div imi kullanım örneği 

Bu örnekte div imi iki paragrafı aynı eleman adı altında gruplamak için 

kullanılmıştır. İlk div imi ikinci paragraftan hemen önce, kapanış div imi ise üçüncü 

119


paragraftan hemen sonraya konulmuştur. Dolayısıyla bu div imi ile oluşturulan HTML 

elemanı ikinci ve üçüncü paragrafları kapsamaktadır. Artık bu div elemanına 

uygulanacak stil kuralları ikinci ve üçüncü paragrafa uygulanacaktır. Böylece div imi 

kullanılarak ikinci ve üçüncü paragraf tek bir HTML elemanı altında toplanmıştır. 

Bu belgede div imi kullanılarak oluşturulan yeni elemana uygulanacak stil kurali 

div elemanının style özniteliği kullanılarak yazılmıştır. Bu kural şöyle ifade edilmiştir: 

 

Bu stil kuralı yazım şeklinde dikkatimizi çeken ilk farklı nokta, stil kuralının bir 

isimle başlamıyor olmasıdır. Daha nönceki yazdığımız stil kurallarında ilk başta stilin 

uygulanacağı HTML elemanının adı geliyordu. Örneğin h1, ya da p gibi. Fakat bu yazım 

şeklinde stil kuralının uygulanacağı eleman zaten içinde tanımlı olduğu HTML elemanı 

olduğu için bu kısım yazılmamıştır. Direk olarak stil kuralları yazılmıştır. 

Görüldüğü gibi style özniteliğiyle tanımlanan stil kuralları div iminin içerdiği iki 

paragrafa da uygulanmıştır. Daha önce de belirtildiği gibi, style özniteliği bu şekilde 

bütün HTML elemanları için tanımlanabilir. Fakat sayfa düzeni açısından bütün stil 

kurallarının bir yerde toplanması daha iyi olabilir. Dolayısıyla daha önce gösterildiği gibi 

bütün stil kurallarının sayfanın baş kısmında bulunması daha isabetli olur. Bu şekilde bir 

stil kuralı yazım şekli kısmen daha az tercih edilmelidir. 


En az 3 tane başlık ve 3 tane de paragrafı olan bir HTML belgesi oluşturunuz? Bu 

belge içindeki bir başlıkla bir paragrafı div imi ile gruplayınız? Sonra bu div iminin 

style özniteliğini kullanarak bu elemanlara bir stil kuralı yazınız? 

6.11 Harici Stil Sayfaları Kullanarak Bir Sayfaya Stil Eklemek 

Daha önceki bölümlerde bir HTML belgesine stil kuralları eklemenin iki farklı 

yöntemini gördük. Bunlardan ilk yöntemde, stil kuralları HTML belgesisin head 

kısmında tanımlanan style im çifti kullanılarak eklendi. İkinci yöntemde ise stil kuralları 

her HTML elemanının style özniteliği kullanılarak eklendi. Bunlardan ikinci yöntem 

birincisine göre daha dar anlamlıdır. Yani bir HTML elemanının style özniteliği 

kullanılarak yazılan bir stil kuralı sadece o eleman için geçerlidir. Başka elemanlara aynı 

stil kuralı uygulanamaz. Ama head kısmında yazılan stil kuralları bu HTML belgesindeki 

bütün HTML elemanlarına uygulanabilir. 

Stil kuralları eklemenin üçüncü bir yöntemi ise harici stil sayfaları kullanmaktır 

[7]. Bu yöntemde ise stil kuralları HTML belgesi dışında ayrı bir dosyada yazılır. Bu 

120


dosya .css uzantısıyla kaydedilir. Daha sonra HTML belgesi içinden bu dosyaya 

imi kullanılarak bağlantı verilir. Yani tarayıcıya kullanması gereken stil sayfası adresi 

söylenir. Böylece tarayıcı bu HTML belgesi için kullanacağı css dosyasını bulur. Bu 

yöntemle eklenen stil kuralları da belge içindeki bütün HTML elemanlarına 

uygulanabilir. 

Stil kuralları eklemek için harici stil sayfaları kullanmak çok sayfalı site 

tasarımında diğer iki yönteme göre daha avantajlıdır. Çünkü yazacağımız stil kuralları 

sadece bir HTML belgesinde değil, istediğimiz bütün HTML belgelerinde kullanılabilir. 

Örneğin bir kurumun web sitesinde birçok sayfanın aynı formatta olması istenir. Bu 

durumda stil kurallarını harici bir css dosyasına yazıp, bütün sayfalarda aynı stil 

kurallarını uygulamak işimizi çok kolaylaştırır. Aksi halde bu kuralları her sayfanın 

başına eklememiz gerekir. Bu da yeni stil kuralları yazmamızı ve stil kuralları üzerinde 

değişiklik yapmamızı zorlaştırır. Çünkü yeni yazılan bir stil kuralı bütün HTML 

belgelerine eklenmelidir. Aynı şekilde yapılmak istenen bir değişiklik bütün HTML 

belgelerinde yapılmalıdır. Ama harici tek bir stil dosyası kullanırsak bu durumda sadece 

bu dosyaya ekleme yapmak veya sadece bu dosyada değişiklik yapmak yeterli olur. 

Şimdi bir önceki örnek sayfanın aynısını harici stil sayfası kullanarak yapalım. Bu 

durumda önce bir metin editöründe stil sayfası yazılır. Stil sayfasının içeriği Tablo 

6-8’deki gibi olsun. Bu dosyayı par.css ismiyle kaydedediniz? HTML belgelerinin head 

kısmında stil kuralı yazarken style imi kullanılıyordu. Fakat bu dosya içinde style im 

çiftinin kullanılmadığına dikkat ediniz. Çünkü style im çifti bir HTML imidir. Oysa bu 

dosya bir HTML dosyası olmayıp, bir css dosyasıdır. 

.altbaslik { 

font-weight: bold; 



} 

.icparagraf { 

background-color:aqua; 

margin-left:2cm; 

margin-right:2cm 

} 

Tablo 6-8 Harici stil sayfası içeriği 

Daha sonra HTML belgesini Tablo 6-9’deki gibi yazarız. 

 


 

 

 

Bilgisayar 

121


Bilgisayar hem veri isleyen yani hesaplamalar yapan, 


gelistirilen bilgisayar 1946 yilinda yapimi tamamlanan 

ENIAC'tir. 

 

CPU: Merkezi Islem 

Birimi yani CPU (Central Processing Unit) bir 

bilgisayarin beynidir. Mantiksal ve Aritmetik butun 

islemler burada yapilir. 


islemcinin islem yapacagi bilgilerin ve komutlarin 

tutuldugu bir hafiza birimidir. Islemci ile bellek 

arasinda yuksek hizli bir veri yolu vardir. 

 

Hard disk ise bilgisayarda surekli olarak 

depolanacak bilgileri kaydetmek icin kullanilir. Hard 

diskteki bilgiler bilgisayar kapatildiktan sonra da 

muhafaza edilir. 

 

 

Tablo 6-9 HTML belgesi içinden harici stil sayfasına bağlantı verme 

Bu HTML belgesi içerisinden css dosyasına bağlantı vermek için sayfanın head 

kısmında bağlantı imi yani imi kullanılır. Bu örnekte harici stil sayfasına bağlantı 

şu şekilde yapılmıştır: 

 

Bu örnekte par.css dosyası ile HTML belgesinin aynı dizinde olduğu 

varsayılıyor. Onun için sadece dosya ismi par.css olarak verilmiştir. Dizin yolu veya 

web adresi verilmemiştir. Görüntülerde olduğu gibi harici stil dosyamız da başka bir 

dizindeyse veya başka bir web sitesindeyse, dosya ismi ona göre ayarlanmalıdır. 

Bu HTML belgesi tarayıcı içinde Şekil 6-7’deki gibi gözükür. Bu sayfanın diğer 

sayfadan tek farkı, daha önce div imi içerisinde yazılan stil kuralının da harici stil sayfası 

içinde yazılmasıdır. 


Sizde bir önceki bölümün örnek uygulaması için yazmış olduğunuz stil kurallarını 

harici bir css sayfası içinde toplayınız? Web sayfanız içinden bu harici css sayfasına 

bağlantı vererek bu kuralları sayfanız içinde kullanınız? Oluşturacağınız yeni bir web 

sayfasında yine aynı harici stil sayfasındaki kurallardan en az bir tanesini kullanınız? 

122


6.12 Bir Grup HTML Elemanı İçin Stil kuralı Yazma 

Stil kuralları bir grup eleman için de yazılabilir. Bu durumda stil kuralının 

uygulanacağı HTML elemanı ismi yazılırken, bir HTML elemanı ismi yerine birden fazla 

HTML elemanı ismi yazılır. Bu eleman isimleri virgülle birbirinden ayrılır. Örneğin bir 

sayfadaki bütün h1, h2 ve h3 tipi başlıkların font ailesini ve font rengini ayarlayan bir stil 

kuralı yazalım. Bu stil kuralı Tablo 6-10’da görüldüğü gibi yazılabilir. 

h1, h2, h3 { 

color: blue; 


} 

Tablo 6-10 Bir grup HTML elemanı için stil kuralı yazma örneği 

Görüldüğü gibi stil kuralının uygulanacağı 3 tane başlık ismi stil kuralından 

hemen önce yazılmıştır. Daha sonra küme parantezi ile stil kuralı başlamıştır. Artık bu 

kural bu HTML belgesindeki bütün h1, h2 ve h3 elemanlarına uygulanır. Yani bu 

sayfadaki bütün h1, h2 ve h3 tipi başlıkların font ailesi ve font rengi aynı olur. 

Aynı işlem tabiî ki bu elemanların class özniteliği kullanılarak ta yapılabilirdi. 

CSS aynı işlemi yapmanın birçok farklı yöntemini sunar. Web tasarımcısı bu 

yöntemlerden birisini seçerek istediği sonuca ulaşır. 

6.13 Bir HTML Elemanını Çok Sınıfa Dâhil Etme 

Bir HTML elemanı tek bir sınıfa dâhil olmakla kısıtlanmamıştır. Bir HTML 

elemanı birden fazla sınıfa dâhil olabilir. Bunun için şu şekilde bir örnek düşünelim. 

Önce css kurallarını Tablo 6-11’de olduğu gibi yazalım. 

.maviArial { 

color: blue; 


} 

.içerde { 


word-spacing: 3px; 

} 

Tablo 6-11 İki farklı sınıf için stil kuralı 

Burada yazılan her iki kural da bir HTML elemanına uygulanabilir. Bu kurallar 

bir başlık ve bir paragraf elemanlarına uygulansın. Bu işlem HTML belgesi içerisinde 

123


Tablo 6-12’de olduğu gibi yapılabilir. 

... 

... 

Tablo 6-12 Bir HTML elemanını birden fazla sınıfa dahil etme örneği 

Bu durumda h3 ve p elemanlarına iki farklı sınıftan stil kuralı uygulanır. Bu 

şekilde HTML elemanları birden fazla sınıfa dâhil olabilirler. Dâhil olabilecekleri sınıf 

sayısı konusunda bir sınırlama yoktur. 

6.14 Web Sayfası Tasarımı İçin CSS Kullanımı 

Bir önceki bölümde HTML tabloları kullanarak bir web sayfasını nasıl alt bölgelere 

ayrılabileceğimizi görmüştük. HTML tabloları ile bir web sayfasında başlık bölgesi, 

menü bölgesi, içerik bölgesi gibi kısımlar oluşturmuştuk. Alt bölgelere ayırma web 

sayfası tasarımının önemli bir aşamasıdır. Bu tasarım web sayfamızın ana yapısını 

belirler. Web sayfamızın görselliğinde ve kolay kullanılabilir olmasında önemli bir rol 

oynar. Web sayfasını alt bölgelere ayırmanın ikinci bir yöntemi de CSS kullanmaktır [8]. 

Bu bölümde daha önce tablo kullanarak yaptığımız basit tasarımları CSS kullanarak 

yapacağız. 

CSS ile web sayfası içinde alt bölgeler tanımlamanın yolu div imini kullanmaktır. 

Bu im sayfa içinde fiziksel görüntüsü olmayan bir alt bölge tanımlar. Daha sonra tanımlı 

olan bu bölgenin özellikleri CSS kuralları ile ayarlanır. Bu şekilde bir sayfa alt bölgelere 

ayrılmış olur. Her alt bölgenin de kendine ait CSS ile tanımlanmış özellikleri vardır. Bu 

alt bölgelerin büyüklükleri, sayfa içindeki pozisyonları, arka plan rekleri gibi özellikler 

CSS ile belirlenir. 

Şimdi 5. bölümün sonunda tablolar kullanılarak oluşturulan sayfa tasarımını div 

imi ve CSS kurallarını kullanarak yapalım. Bunun için 4 adet div imi kullanacağız. Bu 

sayfa tasarımında 3 adet alt bölge bulunmaktadır: başlık bölgesi, menü bölgesi ve içerik 

bölgesi. Her bir bölge için bir div elemanı oluşturacağız. Buna ek olarak bir tane div 

elemanı da bu üç div elemanını kendi içinde barındıran ana eleman olacak. Böylece 4 

adet div elemanı kullanarak sayfayı üç ana bölgeye ayıracağız. 

Sayfayı üç ana bölgeye ayıran HTML ve CSS kodu Tablo 6-13’te verilmiştir. 

 

CSS İle Sayfayı Alt Bölgelere Ayırma 

 

 

124


 

#büyükKutu { 

width: 500px; 

} 

#başlıkKutusu { 

background: fuchsia; 

height: 50px; 


} 

#bağlantıKutusu { 

background: silver; 

height: 30px; 

} 

#içerikKutusu { 

background-image:url('images2/arkaplan.gif'); 

text-indent: 0.5cm; 


padding: 10px 15px 15px 20px; 

} 

 

 

 

 

 

 

Bilgisayar 

 

 

 

 

İşlemci 

Bellek 

Ön Bellek 

Hard Disk 

 

 

 

 


hem de veri depolayan bir makinadır. Modern anlamda ilk 

gelistirilen bilgisayar 1946 yılında yapımı tamamlanan 

ENIAC'tır. 


Merkezi İşlem Birimi yani CPU (Central Processing Unit) 

bir bilgisayarın beynidir. Mantıksal ve Aritmetik bütün 


 

 

 

 

 

Tablo 6-13 Web sayfasını CSS ile alt bölgelere ayırma örneği 

125



Şekil 6-8 CSS ile alt bölgelere ayrılmış bir sayfa örneği 

Bu örnekte her div elemanına bir isim verilmiştir. Bunun amacı her bir div 

elemanı için farklı bir CSS kuralı yazmaktır. İlk div elemanı diğer bütün div 

elemanlarını kendi içinde barındıran ve ismi büyükKutu olan elemandır. Bu elemanın 

başlangıç imi HTML belgesinin gövde kısmının hemen başındadır, bitiş elemanı ise 

gövdenin bitişinden hemen öncedir. 

İkinci div elemanı başlık kısmı için tanımlanmış olan elemandır. Bu div 

elemanının adı başlıkKutusu olarak verilmiştir. Bu elemanın içinde sadece bir başlık 

bulunmaktdır. Daha sonra bu elemanın bitiş imi vardır. 

Üçüncü div elemanı menü kısmı için tanımlanmıştır ve adı bağlantıKutusu 

olarak verilmiştir. Bu elemanın içinde bir tablo vardır ve bu tabloda bağlantılar 

mevcuttur. Daha sonra hem tablo elemanı, hem de bu div elemanı bitmektedir. 

Dördüncü div elemanı ise sayfa içeriğini barındırmak için tanımlanmıştır ve adı 

içerikKutusu olarak verilmiştir. Bu div elemanının içinde sayfada gösterilen metinler 

vardır. İki tane paragraf ile bir tane alt başlık vardır. Daha sonra bu div elemanı 

bitmektedir. İlk div elemanı, yani bu üç div elemanını içeren div elemanı bu üçüncü div 

elemanından sonra bitmektedir. 

büyükKutu div elemanı için CSS Kuralı 

126


İlk div elemanı için yani adı büyükKutu olan div elemanı için bir tane CSS kuralı 

yazılmıştır. Bu kural sayfa içinde şu şekilde yazılmıştır: 


width: 500px; 

} 

Bu kural bu div elemanının genişliğini belirlemektedir. Bu div elemanının 

genişliği 500 pixel olarak verilmiştir. Bu elemanın yüksekliği ile ilgili bir değer 

verilmemiştir. Bu elemanın yüksekliği kendi içindeki elemanların yüksekliğine göre 

ayarlanacaktır. Dolayısıyla bu dış kısımdaki div elemanı tarayıcı içinde büyük bir kutu 

tanımlamaktadır. Bu kutunun içinde diğer div elemanları bulunacaktır. Bu kutunun 

genişliği 500 pixel miktarında olacaktır. Yüksekliği ise içindeki diğer elemanların 

yüksekliğinin toplamı kadar olacaktır. 

başlıkKutusu div elemanı için CSS Kuralı 

İkinci div elemanı, yani adı başlıkKutusu olan div elemanı için CSS kuralları 

sayfa içinde şu şekilde yazılmıştır: 



height: 50px; 


} 

Bu kural başlık bölgesi için bir kutu tanımlamaktadır. Bu kutunun genişliği içinde 

bulunduğu büyükKutu kadardır. Bir div elemanının genişliği tanımlanmaz ise, onun 

genişliği içinde bulunduğu elemanın genişliği kadar olur. Bu durumda da başlık 

kutusunun genişliği büyük kutunun genişliği kadar yani 500 pixel olmaktadır. Bu 

kutunun yüksekliği height özniteliği ile ayarlanmıştır ve değeri 50 pixel olarak 

verilmiştir. Ayrıca bu kutunun arka plan rengi background özniteliği kullanılarak 

ayarlanmıştır. Bu kutu içindeki başlık metnin ortada gözükmesi için de text-align 

özniteliği değeri center olarak verilmiştir. 

Şekil 6-8’deki tarayıcı şekli içinde her alt kutunun arka plan rengi farklı olarak 

verildiği için her birisi kolayca diğerlerinden ayrılabilmektedir. Başlık kutusu en üstte 

bulunan, genişliği büyük kutu kadar olan, arka plan rengi de pembe olan kutudur. 

bağlantıKutusu div elemanı için CSS Kuralı 

Üçüncü div elemanı, yani adı bağlantıKutusu olan div elemanı için CSS 

kuralları sayfa içinde şu şekilde yazılmıştır: 


127


} 


height: 30px; 

Bu div elemanının da genişliği verilmemiş, sadece yükseklik miktarı veilmiştir. 

Dolayısıyla bağlantı kutusunun genişliği büyük kutunun genişliği kadar olacaktır ve 

yüksekliği de 30 pixel olacaktır. Bu kutunun ayrıca arka plan rengi ayarlanmıştır. Şekil 

6-8’deki tarayıcı şekli içinde bağlantı menüsünü içeren ikinci kutu bağlantı kutusudur. 

Görüldüğü gibi genişliği büyük kutu genişliği kadardır ve yüksekliği de başlık 

kutusundan biraz daha küçüktür. 

içerikKutusu div elemanı için CSS Kuralı 

Dördüncü div elemanı, yani adı içerikKutusu olan div elemanı için CSS 







} 

Bu div elemanının ne genişliği ne de yüksekliği verilmiştir. Dolayısıyla içerik 

kutusunun genişliği büyük kutunun genişliği kadar olacaktır, yüksekliği ise kendi 

içindeki bulunan metinlerin yüksekliği kadar olacaktır. Bu kutunun arka planı olarak bir 

renk yerine bir gif dosyası verilmiştir. Dolayısıyla arka planda bu gif dosyası 

gösterilmektedir. Bu içerik kutusu içindeki metinlerin text-indent özniteliği 0.5cm 

olarak verilmiştir. Dolayısıyla paragrafların ilk satırları 0.5cm içerden başlamaktadır. 

Ayrıca yine metinlerin text-align özniteliği justify olarak verilmiştir. Dolayısıyla 

metinler kutu içinde tüm satıra yayılmıştır. Son öznitelik değeri ise padding özniteliğidir. 

Bu öznitelik kutu içindeki metinlerin kutu duvarına olan mesafelerini ayarlamak için 

kullanılmıştır. Burdaki dört değer sırasıyla metinlerin kutunun üst, sağ, alt ve sol 

duvarlarına olan uzaklıklarını belirtmektedir. Dolayısıyla metinler ile kutu duvarları 

arasında bir miktar mesafe bırakılmıştır. 


Hazırlayacağınız bir sayfayı CSS ve div elemanları kullanarak 4 alt bölgeye 

ayırınız? Bu bölgeler sırasıyla başlık bölgesi, menü bölgesi, içerik bölgesi ve alt bölge 

olsun. Alt bölge sayfa sahibine ait bazı bilgileri içersin. Diğer bölgeler bu bölümdeki 

bölgelere benzesin. Ayrıca tanımlayacağınız bu bölgelerin padding değerine farklı 

değerler atayarak, bu özniteliğin bölgeler üzerindeki etkisini gözlemleyiniz. 

128


6.15 CSS Kullanarak Web Sayfasını Farklı Alt Bölgelere Ayırma 

Bir önceki bölümde CSS kullanarak bir web sayfasını üç alt bölgeye ayırdık. Bu alt 

bölgeler yukardan aşağıya doğru başlık bölgesi, menü beölgesi ve içerik bölgesiydi. 

Şimdi aynı web sayfasını tablolarla yaptığımız gibi yine üç bölgeye ayıralım. Fakat bu 

durumda menü yukardan aşağıya ikinci bölge olmasın. Onun yerine menü bölgesi 

sayfanın solunda olsun. 

Sayfayı bu şekilde üç ana bölgeye ayırmak için yine div imi ile CSS kurallarını 

kullanacağız. Fakat bu durumda div elemanlarının boyutlarını ve pozisyonlarını yeni 

sayfa özelliklerine göre ayarlayacağız. Bu sayfadaki kodlar büyük ordan bir önceki 

sayfadaki kodlara benzemektedir. Fakat bazı önemli farklar da vardır. 

Yeni sayfa için HTML ve CSS kodları Tablo 6-14’te verilmiştir. 

 

CSS İle Sayfayı Alt Bölgelere Ayırma 

 

 

 


width: 500px; 

} 



height: 50px; 


} 


float: left; 


width: 100px; 

height: 80%; 


} 


margin: 0 0 0 100px; 





height: 80%; 

} 

 

 

 

 

 

 

Bilgisayar 

129


 

 

 

İşlemci 

Bellek 

Ön Bellek 

Hard Disk 

 

 

 


hem de veri depolayan bir makinadır. Modern anlamda ilk 

gelistirilen bilgisayar 1946 yılında yapımı tamamlanan 

ENIAC'tır. 


Merkezi İşlem Birimi yani CPU (Central Processing Unit) 

bir bilgisayarın beynidir. Mantıksal ve Aritmetik bütün 


 

 

 

 

 

Tablo 6-14 Web sayfasını CSS ile alt bölgelere ayırma ikinci örneği 


Şekil 6-9 CSS ile alt bölgelere ayrılmış ikinci sayfa örneği 

130


Bu örnekte yine bir önceki bölümde olduğu gibi dört adet div imi kullanılmıştır. 

Her div iminin fonksiyonu ve ismi aynıdır. Yine bir tane div imi diğer üçünü 

içermektedir ve bunun genişliği 500 pixel olarak ayarlanmıştır. İkinci div elemanı da 

tamamen bir önceki örnekteki div elemanıyla aynıdır. Sayfanın üst kısmında başlık 

bölgesini oluşturmuştur. Farklı olan div elemanları üçüncü ve dördüncü div 

elemanlarıdır. Şimdi bunların detaylarını inceleyelim. 

bağlantıKutusu div elemanı için CSS Kuralı 

Üçüncü div elemanı, yani adı bağlantıKutusu olan div elemanı için CSS 

kuralları bu sayfa içinde şu şekilde yazılmıştır: 


float: left; 


width: 100px; 

height: 80%; 


} 

Öncelikle bu div elemanının genişliği 100 pixel olarak verilmiştir. Çünkü bu 

bağlantı kutusu sadece sayfanın sol tarafında olmalıdır. Bunun için genişlik 100 pixel 

verilmiştir. Diğer önemli öznitelik ise float özniteliğidir. Bu öznitelik, bağlantı 

kutusundan sonra gelecek olan içerik kutusunun, bu kutunun hemen yanına 

yerleştirilmesini sağlar. Ayrıca bağlantı kutusunun da sayfanın sol tarafına 

yerleştirilmesini sağlar. Eğer float öznitelik değeri kullanılmamış olsaydı, bu kutudan 

sonra gelecek olan içerik kutusu, bağlantı kutusunun sağ yanına değil de altına 

yerleştirilirdi. 

Bağlantı kutusunun ayrıca gibi arka plan rengi bir önceki bölümde olduğu 

background özniteliği kullanılarak ayarlanmıştır. Buna ek olarak bu kutunun boyu, içinde 

bulunduğu tarayıcı penceresinin boyunun yüzde yirmisi olarak ayarlanmıştır. Ayrıca yine 

padding özniteliği kullanılmış üst tarafta 10 pixel büyüklüğünde bir boşluk bırakılmıştır. 

içerikKutusu div elemanı için CSS Kuralı 

Dördüncü div elemanı, yani adı içerikKutusu olan div elemanı için CSS 



margin: 0 0 0 100px; 





height: 80%; 

} 

131


Bu div elemanının genişliği verilmemiştir. Yüksekliği ise tarayıcı boyunun yüzde 

sekseni olarak verilmiştir. Dolayısıyla bu bölgenin yüksekliği bağlantı bölgesinin 

yüksekliği ile eşittir. Bu bölge diğer div elemanlarından farklı olarak sayfanın en 

sonunda başlamamaktadır. Bu bölgenin başlama konumu margin özniteliği kullanılarak 

verilmiştir. margin özniteliğinin son değeri bu div elemanının sol taraftan uzaklığını 

belirler. Dolayısıyla bu durumda bu değer 100 pixel olarak verilmiştir. Yani bu div 

elemanı ya da içerik kutusu sayfanın solundan 100 pixel içerde başlayacaktır. Bu nokta 

tam olarak bağlantı kutusunun bittiği yerdir. Dolayısıyla bağlantı kutusu ve içerik kutusu 

yan yana görünür. margin özniteliğinin diğer değerleri bu div elemanın yukardan, sağdan 

ve alttan uzaklıklarını tanımlar. Bu durumda bu üç değer de sıfır olarak verilmiştir. 

Web Sayfası Tasarımı için Tablomu Yoksa CSS’mi Kullanılmalı? 

Web sayfalarını alt bölgelere ayırmak için tablolar sıkça kullanılmaktadır. Fakat 

tabloların asıl amacı web sayfası tasarımı değildir. Tablolar verileri kullanıcılara düzenli 

bir şekilde bir tablo içinde sunmak için geliştirilmiştir. Fakat sonra web tasarımcıları 

sayfa tasatımında da sıkça kullanmışlardır. 

Şu anda tavsiye edilen esas metod sayfa tasarımı için CSS kullanılmasıdır. CSS 

tablolara göre biraz daha fazla detaya sahip sayfa tasarımı yapma imkanı sunmaktadır. 

Ayrıca CSS ile tasarlanan sayfaların tarayıcılar tarafından daha hızlı görüntülenmesi 

mümkündür. Fakat ilk başta CSS kullanımı öğrenilme tablo kullanımını öğrenmeye göre 

biraz daha zor olabilir. 


Bir sayfayı dört alt bölgeye ayıran bir tasarım yapınız? Bu sayfada başlık bölgesi, 

menü bölgesi, içerik bölgesi ve ikinci menü bölgesi olsun. Başlık bölgesi yine bu 

bölümde olduğu gibi sayfanın üst kısmında olsun. İlk menü bölgesi de yine sayfanın 

solunda olsun. İçerik bölgesi sayfanın ortasında olsun. İkinci menü bölgesi ise sayfanın 

sağında olsun. 

6.16 Özet 

Bu bölümde CSS stil kurallarının ne olduklarını ve HTML belgelerinde hangi 

amaçla, nasıl kullanıldıklarını gördük. CSS stil kurallarına neden ihtiyaç duyulduğunu ve 

avantajlarını açıkladık. CSS stil kurallarının HTML belgeleri içinde üç farklı şekilde nasıl 

kullanıldıklarını örneklerle gösterdik. CSS stil kurallarının temel özelliklerini ve kullanım 

alanlarını anlattık. Ayrıca HTML span ve div imlerini gösterdik. Buna ek olarak CSS stil 

kurallarının ve div imlerinin web sayfası tasarımında nasıl kullanıldıklarını inceledik. 

Ama bu bölümde anlatılanlar CSS stil özelliklerinin az bir kısmını oluşturmaktadır. 

CSS burada anlatılanlardan çok daha zengin özelliklere sahiptir. Fakat bu bölümde 

anlatılanlar CSS ile ilgili bir temel oluşturmayı amaçlamıştır. Bu bölümü anlayarak 

132


uygulayan web tasarımcıları, CSS’in sunmuş olduğu diğer özellikleri farklı online 

kaynaklardan yararlanarak rahatça öğrenebilirler. 

6.17 CSS ile ilgili Faydalanılabilecek Kaynaklar 

İnternet’te CSS ile ilgili birçok kaynak bulunmaktadır. Bu kaynakların en 

güzellerinden birisi şu adrestedir: 

http://www.w3schools.com/css/css_examples.asp 

Bu sayfada CSS ile ilgili birçok örnek mevcuttur. Kullanıcılar bu sayfadaki CSS 

kodlarını değiştirerek CSS özelliklerinin nasıl çalıştığını daha yakından görme imkânına 

sahiptirler. 

Ayrıca aynı web sitesinde CSS ile ilgili açıklamalar da vardır. Bunlar da şu 

adrestedir: 

http://www.w3schools.com/css/default.asp 

Türkçe kaynak kitap olarak ise şu kitabı önerebiliriz: 

Kitap ismi: HTML ve XHTML: The Complete Reference 

Yazarı: Thomas A. Powell 

Yayınevi: Alfa Yayınevi 


[1] “Cascading Style Sheets”, http://en.wikipedia.org/wiki/Cascading_Style_Sheets, 2 

Ekim 2009. 

[2] H. Lie, ve B. Bos, "Cascading Style Sheets, level 1", W3C Recommendation REC- 

CSS1-961217, http://www.w3.org/TR/REC-CSS1-961217, December 1996. 

[3] Thomas A. Powell, "HTML ve XHTML: The Complete Reference", Alfa Yayınevi, 

Mart 2004. 

[4] CSS Background, http://www.w3schools.com/Css/css_background.asp, 7 Ekim 

2009. 

133


[5] CSS Font, http://www.w3schools.com/Css/css_font.asp, 7 Ekim 2009. 

[6] HTML Tag, http://www.w3schools.com/TAGS/tag_span.asp, 7 Ekim 2009. 

[7] Ades Tynyshev, "Creating and Linking External CSS files", 

http://www.developertutorials.com/tutorials/css/creating-linking-external-css-files- 

050531/page1.html, 7 Ekim 2009. 

[8] Adrian Senior, "Designing with CSS – Part 3: Using CSS for site layout", 

http://www.adobe.com/devnet/dreamweaver/articles/css_concepts_pt3_cs3.html, 7 

Ekim 2009. 

134


Bölüm 7 

7.1 Amaç 

JAVASCRİPT 

Bu bölümde amacımız, JavaScript betik dilinin temel özelliklerinin öğrenilmesi ve 

hangi durumlarda kullanılacağının anlaşılmasıdır. Bu amaçla öncelikle basit bir 

JavaScript uygulaması ile başladık. Sonra adım adım bu dilin özelliklerini örneklerle 

işledik. Bu dilde değişkenler, stringler, karar yapıları, döngüler, diziler, fonksiyonlar gibi 

özellikler işlendi. Ayrıca kullanıcıya mesaj vermek, kullanıcıdan veri almak gibi 

amaçlarla küçük pencere kullanımı anlatılmıştır. 

7.2 Giriş 

Şu ana kadar görmüş olduğumuz web sayfaları statik web sayfaları idi [1]. Bu tip 

sayfalarda kullanıcıya gösterilen bilgiler sabittir. Tarayıcı HTML belgelerini sunucudan 

indirip kullanıcıya gösterdikten sonra bu bilgiler bir daha değişmez. Tarayıcı içinde 

gösterilen sayfa aynı kalır. Kullanıcı ile bu sayfanın etkileşime geçmesi söz konusu 

değildir. 

İkinci tip web sayfaları ise dinamik web sayfalarıdır [2]. Bu tür web sayfaları 

kullanıcı ile etkileşebilir. Örneğin bir arama motorunun web sayfasında aranmasını 

istediğimiz kelimeleri yazar ve bir butona tıklarız. Arama motoru da bize bu kelimelerle 

ilgili sayfaların listesini verir. İşte bu bir etkileşimdir. Bu tür bir web sayfası dinamik bir 

web sayfasıdır. Şu ana kadar görmüş olduğumuz statik web sayfalarında böyle bir 

etkileşim mümkün değildi. 

135


7.3 Sunucu ve İstemci Tarafı Programlama 

Dinamik web sayfaları iki şekilde oluşturulabilir: sunucu tarafı programlama 

[3] ve istemci tarafı programlama [4]. Yukarda vermiş olduğumuz arama motoru 

örneği sunucu tarafı programlamaya bir örnektir. Bu metotta kullanıcının girdiği bilgiler 

web sunucusuna gönderilir. Web sunucusu yanında çalışan bir program da aranan 

kelimelerle ilgili web sayfalarını bulur ve sonucu kullanıcıya yeni bir web sayfası halinde 

verir. Dolayısıyla bu etkileşimin gerçekleşebilmesi için sunucu tarafında çalışan bir 

program olması gerekir. Bundan dolayı bu metoda sunucu tarafı programlama denilir. 

İstemci tarafı programlamaya bir örnek olarak fare üzerine gelince açılan 

menüleri gösterebiliriz. Bu durumda fare bir menü elemanı üzerine gelince yeni bir menü 

gösterilir. Bu işlemin yapılması için sunucu ile iletişime geçilmez. Bunun yerine tarayıcı 

içinde çalışabilen betik yani script programları kullanılır. Bu betik programları yazılırken 

fare menü elemanları üzerine gelince kullanıcıya ne gösterileceği yazılır. Böylece web 

sayfası ile kullanıcı, sunucu tarafına hiç bağlanmadan etkileşimde bulunabilir. İşte bu tür 

programlamaya istemci tarafı programlama denilir. İstemci tarafındaki bu programlar 

tarayıcı içinde çalışır. 

İstemci tarafı dinamik programlama sunucu tarafı dinamik programlamaya göre 

daha hızlıdır. Fakat istemci tarafında yapılabilecek programlama sınırlıdır. Bundan dolayı 

istemci tarafı dinamik programlama daha çok basit ve hızlı işlemler için kullanılır. 

Karmaşık ve büyük işlemler için sunucu tarafı programlama yapmak gerekir. Sunucu 

tarafı programlama yapmak için daha çok PHP, ASP, JSP gibi diller kullanılır. 

7.4 JavaScript ve VBScript 

İstemci tarafı dinamik programlama için en çok JavaScript [5] ve VBScript [6] 

betik dilleri kullanılır. JavaScript programları hemen hemen bütün tarayıcılarda 

çalışırken, VBScript programları sadece İnternet Explorer tarayıcısında çalışır. Bu 

yüzden JavaScript kullanmak daha avantajlıdır. 

7.5 JavaScript ve Java 

VBScript Microsoft firması tarafından geliştirilmiştir. Yazım kuralları daha çok 

Visual Basic dilini andırır. JavaScript ise Netscape firması tarafından geliştirilmiştir. 

Yazım kuralları daha çok C dilini andırır. JavaScript dilinin ilk ismi LiveScript idi. Fakat 

o zaman çok popüler bir dil olan Java’nın popülaritesinden istifade etmek amacıyla adı 

JavaScript olarak değiştirilmiştir. Yoksa Java dili ile JavaScript dili arasında isim 

benzerliğinden öte bir bağ yoktur. Java genel bir programlama dili iken, JavaScript ise 

tarayıcı içinde çalışan bir betik dilidir. 

136


7.6 Betik Dilleri 

JavaScript ve VBScript dilleri betik yani script dilleridir. Betik dillerinin özelliği 

derlenmeden çalıştırılmalarıdır. C, Pascal, FORTRAN, C++, Java gibi diller önce 

derlenir, sonra çalıştırılır. Betik dilleri ise derlenmeden çalıştırılırlar. Bu dilleri 

çalıştırmak için betik motorları kullanılır. JavaScript ve VBScript programlarını çalıştıran 

betik motorları tarayıcı içine gömülüdür. Tarayıcı ne zaman bir web sayfasında betik 

koduyla karşılaşırsa, betik motorundan bu kodu işlemesini ister. Bu şekilde betik kodları 

derlenmeden tarayıcı içerisinde betik motorları tarafından çalıştırılırlar. 

7.7 İlk JavaScript Örneği: imi 

JavaScript program komutları HTML belgesi içinde yazılır. JavaScript program 

parçalarını yazmak için imi kullanılır. Böylece tarayıcı bu komutların normal 

bir HTML metni olmadığını, çalıştırılması gereken JavaScript komutları olduğunu anlar. 

Bu komutları çalıştırması için tarayıcı içindeki JavaScript motorunu çağırır. 

Şimdi içinde basit bir JavaScript kodu olan bir HTML belgesi görelim. Bu amaçla 

yazılmış bir sayfa Tablo 7-1’de verilmiştir. 

 

İlk JavaScript Örneği 

 

 

 

 

document.write(" Herkese Merhaba"); 

 

Bu sayfanın başlığı JavaScript ile yazılıyor. İlk 

JavaScript örneğim. 

 

 

Tablo 7-1 ilk JavaScript örnegi 


137


Şekil 7-1 ilk JavaScript örnegi 

Bu HTML belgesinin gövde kısmında im çifti arasında JavaScript kodu 

bulunmaktadır: 

 

document.write(" Herkese Merhaba"); 

 

Bu kod tarayıcı içinde gösterilmez. Bunun yerine bu kod JavaScript motoru 

tarafından çalıştırılır ve bu kodun sonucu web sayfasının bu kısmında gösterilir. Bu 

örnekte bu JavaScript kodunda tek bir komut vardır. O da document.write komutudur. 

Bu komut parantez içinde verilen metnin web sayfasına yazılmasını sağlar. 

Bu örnekte web sayfasına başlık metninin JavaScript kodu ile yazılmasının bir 

avantajı yoktur. Aynı işlem JavaScript kullanılmadan daha kolay yapılabilirdir. Bu 

örneğin amacı sadece JavaScript ile web sayfası içine nasıl yazı yazılabileceğini 

göstermektir. 

İfade Sonunda Noktalı Virgül 

Bu örnekte document.write komutu sonuna noktalı virgül konmuştur. Bir satırda 

tek bir komut olduğu durumda komut sonunda noktalı virgül kullanmak zorunlu değildir. 

Dolayısıyla bu örnekte noktalı virgül olmasaydı da sonuç aynı olurdu. Noktalı virgül 

daha çok aynı satırda birden fazla komut olduğu durumlarda, komutlar arasında 

kullanılır. 


Siz de bu örnekte olduğu gibi basit bir JavaScript örneği yapınız? HTML belgesi 

içine JavaScript komutu ile farklı değerler yazdırınız? Hem bir başlık hem bir paragraf 

yazdırmayı deneyiniz? 

138


7.8 Değişkenler 

Bütün programlama dillerinde olduğu gibi JavaScript dilinde de değişken 

tanımlamak mümkündür [7]. JavaScript dilinde değişken tanımlanırken değişkenin tipi 

belirtilmek zorunda değildir. Değişken atandığı değerin tipini alır. 

Şimdi iki sayının toplamını bulan ve bunu web sayfasına yazdıran basit bir 

program görelim. Bu amaçla yazılmış bir sayfa Tablo 7-2’de verilmiştir. 

 

JavaScript'te Degiskenler 

 

 

JavaScript'te Degisken Kullanimi 

 

var sayi1 = 20; 

sayi2 = 30.5; 

var sonuc = sayi1 + sayi2; 

document.write(" Iki sayi toplami. "+sayi1+" + 

"+sayi2+" = "+sonuc); 

 

 

 

Tablo 7-2 JavaScript'te değişken tanımlama 


Şekil 7-2 JavaScript'te değişken tanımlama 

Görüldüğü gibi bu sayfadaki JavaScript kodunda üç tane değişken tanımlanmıştır: 

var sayi1 = 20; 

sayi2 = 30.5; 

var sonuç = sayi1 + sayi2; 

139


Bu değişkenlerden iki tanesi var anahtar kelimesi kullanılarak tanımlanmıştır. Bir 

tanesi ise var anahtar kelimesi kullanılmadan tanımlanmıştır. Dolayısıyla değişkenler var 

anahtar kelimesi kullanılarak veya kullanılmadan tanımlanabilirler. 

Aritmetik İşlem Operatörleri 

Tanımlanmış olan iki sayı değişkeni artı işaretiyle toplanmıştır. Diğer birçok 

programlama dilinde olduğu gibi JavaScript dilinde de temel aritmetik işlemler için Tablo 

7-3’deki karakterler kullanılır. 

Değişken İsim kuralları 

Operatör Anlamı 

+ Toplama 

- Çıkarma 

* Çarpma 

/ Bölme 

% Mod alma 

++ Bir artırma 

-- Bir azaltma 

Tablo 7-3 JavaScript aritmetik operator tablosu 

JavaScript dilinde değişken isimleri harf kipine duyarlıdır. Dolayısıyla sayi1, 

Sayi1, veya SAYI1 farklı değişken isimleridir. 

Değişken isimleriyle ilgili ikinci bir konu ise, değişken isimleri sadece harflerle 

veya alt tire işaretiyle başlayabilirler. 


Yazacağınız bir HTML belgesi içindeki JavaScript kodunda çeşitli aritmetik 

işlemler yapınız? Tablo 7-3’deki bütün aritmetik operatörleri kullanmayı deneyiniz? Bazı 

işlemlerde aynı komut içinde birden fazla aritmetik işlem komutu kullanınız? Her bir 

operatörün nasıl çalıştığını farklı örnekler yaparak inceleyiniz? 

140


7.9 Stringler 

Stringler karakterlerden oluşur. JavaScript dilinde string değişkenleri tanımlamak 

sayı değişkenleri tanımlamaya benzer. Fakat string değişkeni oluştururken verilen değer 

çift tırnak veya tek tırnak içinde olmalıdır. Birkaç string tanımlaması örneği şu şekilde 

yapılabilir: 

ad = "Ali"; 

var soyad = "Ak"; 

var sehir = 'Mersin'; 

bosluk = " "; 

Diğer değişkenlerde olduğu gibi string değişkenleri de var anahtar kelimesiyle 

veya sadece değişken ismiyle tanımlanabilirler. Görüldüğü gibi string değerleri tek tırnak 

veya çift tırnak ile tanımlanabilir. Ama her zaman ya tek tırnak, ya da çift tırnak 

kullanmak programımızın düzeni açısından isabetli olur. 

String Ekleme 

JavaScript dilinde bir string’e diğer bir string artı operatörü kullanılarak 

eklenilebilir. String eklemeye örnek olarak şunları gösterebiliriz: 

ad = "Ali"; 

var soyad = "Ak"; 

bosluk = " "; 

tumAd = ad + bosluk + soyad; 

tumAd2 = ad + " " + soyad; 

document.write(tumAd+": "); 

Bu örnekte tumAd değişkeni ad değişkenine bosluk ve soyad değişkenlerinin 

eklenmesinden oluşur. Dolayısıyla tumAd değişkeni değeri “Ali Ak” olur. Benzer şekilde 

aynı ekleme tumAd2 değişkeninde olduğu gibi de yapılabilir. String ekleme özellikle 

document.write() gibi kullanıcıya bilgi veren fonksiyonlar çağırılırken, yukarıdaki gibi 

kullanılır. Bu durumda bu fonksiyon çağırılırken tumAd ve ": " stringleri toplanmış 

ve sonuç bu fonksiyona gönderilmiştir. 

İçinde Tırnak İşareti Olan Stringler 

Stringler etrafına tırnak işareti konularak tanımlanırlar. Pekâlâ, tanımladığımız bir 

string içinde tek tırnak veya çift tırnak işareti varsa bunu nasıl yapabiliriz. Şimdi bunun 

örneğini görelim: 

141


var str1 = "'Bugun çok mutluyum' dedi."; 

var str2 = '"Bugun çok mutluyum" dedi.'; 

Burada tanımlanan stringlerin birinin içinde iki tane tek tırnak var. Diğerinin 

içinde ise iki tane çift tırnak var. İçinde tek tırnak bulunan bir string tanımlanırken, bu 

stringi tanımlamak için çift tırnak kullanılır. İçinde çift tırnak olan bir string 

tanımlanırken ise, etrafında tek tırnak kullanılır. 

String Örneği 

Şimdi string değişkenlerinin olduğu basit bir örnek sayfa görelim. Bu amaçla 


 

JavaScript'te Stringler 

 

 

 

JavaScript'te String Kullanımı 

 

ad = "Ali"; 

soyad = 'Ak'; 

bosluk = " "; 

var tumAd = ad + bosluk + soyad; 

var str2 = '"Bugün çok mutluyum" dedi.'; 

document.write(tumAd+": "); 

document.write(str2); 

 

 

 

Tablo 7-4 JavaScript'te string kullanımı örneği 


Şekil 7-3 JavaScript'te string kullanımı örneği 

142


Buradaki string tanımlama ve ekleme işlemleri yukarda açıklanmıştır. Burada 

ayrıca yeni satır koymak için HTML imini kullanıldığına dikkat ediniz. 


Oluşturacağınız bir HTML belgesi içindeki JavaScript kodu ile string tanımlama 

ve string ekleme örnekleri yapınız? Tarayıcı içinde üç satır halinde gözükecek bir string 

tanımlayınız? Bu string içinde satır sonunu göstermek için imleri kullanınız? 

7.10 Karar Yapıları: if, else, else if 

Bütün diğer dillerde olduğu gibi JavaScript dilinde de karar yapıları vardır [8]. if 

karar yapısı bir koşula göre bir kod bloğunu işleme koyar veya koymaz. Eğer iki ihtimal 

varsa if ile else birlikte kullanılır. Bu durumda if ifadesinde verilen koşul doğruysa if 

bloğu işlem görür, yoksa else bloğu işlem görür. Eğer aynı yerde birden fazla kontrol 

edilmesi gereken koşul varsa, bu durumda if ve birden fazla else if ifadeleri 


Şimdi bununla ilgili bir örnek uygulama görelim. Bu amaçla yazılmış bir sayfa 

Tablo 7-5’te verilmiştir. 

 

JavaScript'te Stringler 

 

 

 

Bugün günlerden: 

 

var t = new Date(); 

var gün = t.getDay(); 

if(gün == 0){ 

document.write("Pazar"); 

}else if(gün == 1){ 

document.write("Pazartesi"); 


document.write("Salı"); 


document.write("Çarşamba"); 


document.write("Perşembe"); 


document.write("Cuma"); 


document.write("Cumartesi"); 

} 

document.write(""); 

document.write("Bu günün JavaScript'teki sayısal 

143


karşılığı: "+gün+""); 

 

 

 

Tablo 7-5 JavaScript'te karar yapıları kullanım örneği 


Şekil 7-4 JavaScript'te karar yapıları kullanım örneği 

JavaScript dilinde o anki tarihi göstermek için Date() nesnesi kullanılır. Bu tarih 

nesnesinin birçok özelliği vardır. Örneğin yıl, ay, gün, saat gibi bilgileri içerir. Bu Date 

nesnesinden bir tane su şekilde oluşturulur: 

var t = new Date(); 

Burada t artık bir Date nesnesidir ve o anki tarihi gösterir. Bu değişkenin tutmuş 

olduğu değişik değerlere ulamsak için Date sınıfı bazı fonksiyonlar sunar. Bunlardan 

bazıları şunlardır. 

var y = t.getYear(); // yıl değerini döndürür 

var ay = t.getMonth(); // ay değerini döndürür. 0-11 arası 

var g = t.getDate(); // gün değerini döndürür. 1-31 arası. 

var gg = t.getDay(); // haftanın günü değerini döndürür. 0-6 arası. 

Yukarıdaki örnekte bu fonksiyonlardan getDay() fonksiyonu kullanılmıştır. Bu 

fonksiyon 0 ile 6 arasında bir tamsayı değer döndürür. Sıfır değeri Pazar gününü 

gösterir. Altı değeri ise Cumartesi gününü gösterir. Bu örnekte döndürülen değer her 

ihtimal için test edilmiştir. Eğer bu değer sıfır ise tarayıcıya Pazar yazılacaktır. Eğer 1 ise 

tarayıcıya Pazartesi yazılacaktır. Bu programı biz çalıştırdığımızda Cuma günüydü. Onun 

için yukarıdaki tarayıcı penceresinde Cuma gözükmektedir. 

144



Bu örnekte olduğu gibi haftanın günleri ile ilgili bir uygulama yapınız? Sizin 

yazdığınız JavaScript programı tarayıcı içine iki gün öncesinin gününü yazsın. Örneğin 

sayfa Pazar günü görüntülenirse, tarayıcı içine Cuma yazılsın. Eğer sayfa Çarşamba günü 

görüntülenirse, tarayıcı içine Pazartesi yazılsın. 

İkinci bir uygulama olarak ta çalıştırılan ayın ismini Türkçe olarak tarayıcı içine 

yazan bir JavaScript kodu yazınız? Bu örnekteki uygulamaya benzer bir uygulama 

olacak. Ama bu uygulamada haftanın günü yerine o ayın ismi yazılacak. Örneğin sayfa 

Ocak ayında görüntülenirse, tarayıcı içine Ocak yazılacak. Eğer Nisan ayında 

görüntülenirse, tarayıcı içine Nisan yazılacak. Bu şekide sayfa hangi ayda görüntülenirse 

o ayın ismi Türkçe olarak tarayıcı içine yazılacak. 

7.11 JavaScript dilinde Açıklamalar 

JavaScript dilinde programa açıklama metinleri eklemenin iki yolu vardır. Eğer 

tek satırlık bir açıklama eklemek istiyorsak, bu durumda çift taksim yani // karakter çifti 

kullanılır. 

var y = t.getYear(); // yıl değerini döndürür 

// Şimdi yıl değerini ekrana yazdıralım 

document.write(y); 

Görüldüğü gibi çift taksim açıklama karakteri hem satır başında hem satır 

ortasında kullanılabilir. Bu karakterden sonra gelen metin açıklama olarak algılanır. 

Eğer ekleyeceğimiz açıklama bir satırdan daha çok veya daha az ise, bu durumda 

açıklama metninin başlangıcı için taksim ve yıldız karakter çiftini, açıklama metninin 

bitimi için ise yıldız ve taksim karakter çiftini kullanırız. 

/* JavaScript’te program yazmak çok kolay. 

O anki tarihi kolayca ogrenebiliriz. 

Bunun için Date sinifinin bir nesnesi kullanılır. */ 

var y = t.getYear(); /* yıl değerini döndürür*/ 

document.write(y); 

7.12 Fonksiyonlar 

Fonksiyonlar bütün programlama dilleri için en temel yapıtaşlarıdır. 

Programlarımızı hem alt parçalara bölmemize, hem de her iş için farklı program parçaları 

yazmamıza olanak sağlarlar. Fonksiyonlar çağırıldıkları zaman işlem görürler. 

145


JavaScript dilinde fonksiyonlar [9] hem gövde içinde hem de head yani baş 

kısmında olabilir. Fakat çoğunlukla sayfanın baş kısmına konulurlar. Bu durumda baş 

kısmındaki bir fonksiyon çağırılmadan işlem görmez. Ne zaman çağırılırsa o zaman 

kendi içinde tanımlanan işlemleri yapar. 

Şimdi çağırıldığı zaman kullanıcıya küçük bir pencerede mesaj veren bir 

fonksiyonun nasıl yazıldığını ve çağırıldığını görelim. Bu amaçla yazılmış bir sayfa 

Tablo 7-6’da verilmiştir. 

 

İlk Fonksiyon ve İlk Buton 

 

 

function göster(){ 

alert("İlk fonksiyonumdan Merhaba!!!!!!! "); 

} 

 

 

 

İlk Fonksiyon ve Buton Örneği 

 

İlk fonksiyonumu çağirmak için: 

 

 

 

 

Tablo 7-6 Buton ile fonksiyon çağırma örneği 


Şekil 7-5 Buton ile fonksiyon çağırma örneği 

Bu tarayıcı penceresindeki Tıklayınız yazan butona tıklanınca Şekil 7-6’daki 

gibi küçük bir pencere gelir. 

146


Şekil 7-6 alert fonksiyonu ile oluşturulan küçük pencere 

Bu küçük penceredeki OK veya Tamam butonuna basınca da bu küçük pencere 

kaybolur. 

Bu sayfada öncelikle bir fonksiyonun nasıl tanımlandığına bakalım. Baş 

kısımdaki fonksiyon şu şekilde yazılmıştır: 

function göster(){ 

alert("İlk fonksiyonumdan Merhaba!!!!!!! "); 

} 

JavaScript dilinde bir fonksiyon yazmak için öncelikle function anahtar kelimesi 

kullanılır. Bu anahtar kelimeden sonra fonksiyona verilen isim gelir. Bu örnekte 

fonksiyonumuzun adı göster() olarak verilmiştir. Her fonksiyonun bir adı vardır. Daha 

sonra istenilen her noktadan bu fonksiyon adıyla çağırılır. 

Fonksiyon isminden sonra parantez açma ve kapama karakterleri gelir. Bu 

fonksiyon eğer parametre alacaksa, alınacak değerler bu parantezler içinde yazılır. Bu 

örnekte fonksiyonumuz dışardan parametre almamaktadır. Daha sonra küme açma 

parantezi gelir. Fonksiyonun gövdesi küme açma ve küme kapama parantezleri 

arasındadır. Bu örnekte fonksiyon gövdesinde sadece bir tane JavaScript komutu vardır. 

O da alert fonksiyonunu çağıran ifadedir. 

alert fonksiyonu 

alert fonksiyonu küçük pencere kutusu oluşturmak için kullanılır. Bu fonksiyona 

gönderilen metin oluşturulan pencere içinde kullanıcıya gösterilir. Kullanıcı kendisine 

gösterilen küçük penceredeki OK butonuna tıklayınca işlem biter. 

HTML Form Elemanı 

Bu örnekte HTML sayfasının gövde kısmında im çifti gözükmektedir. Bu 

im çifti HTML sayfasında buton ve metin alanları gibi çeşitli grafik arayüzü elemanları 

oluşturmak için kullanılır. Bu örnekte form elemanı içinde imi kullanılmıştır. 

Bu imin type değeri button olarak verilmiştir. İnput elemanının type değeri button 

olarak verildiğinde, web sayfasında bir buton oluşturulur. Bu buton tıklanabilen bir buton 

olur. Bu butonun üzerinde gösterilecek metin de value özniteliği değeri olarak verilen 

147


metindir. Bu durumda üzerinde gösterilmesi için “Tıklayınız” metni verilmiştir. Bu 

butona tıklandığında ne yapılacağı ise onclick özniteliği ile belirtilir. Bu örnekte bu 

butona tıklandığında göster fonksiyonunun çağırılması istenmiştir. 

Fonksiyon Çağırma 

Fonksiyonları kullanmanın iki aşaması vardır. İlk aşaması fonksiyonları 

yazmaktır. İkinci aşaması ise fonksiyonları gerekli oldukları yerlerden çağırmaktır. Bu 

örnekte göster fonksiyonu HTML belgesinin baş kısmında yazılmıştır. Eğer bu 

fonksiyon HTML belgesi içinden hiç çağırılmaz ise, hiç işlem görmez. Dolayısıyla 

HTML belgesi içinden bu fonksiyonun çağırılması gerekir. Bu örnekte göster 

fonksiyonu butona tıklanınca çağırılmaktadır. Butonun onclick özniteliği, butona 

tıklanıldığında yapılacak işlemi belirtir. Bu durumda butona tıklanıldığında göster 

fonksiyonunun çağırılması istenmiştir. 

HTML belgelerinde genellikle fonksiyonlar baş kısımda yazılır ve bir olaya bağlı 

olarak çağırılırlar. Örneğin bu belgede kullanıcı butona tıklayınca bu fonksiyon 

çağırılmaktadır. Web sayfalarında butona tıklama gibi daha birçok farklı olay olur. İşte 

genellikle bu olaylar olduğunda bir fonksiyon çağırılır. 


Bu örnektekine benzer bir web sayfası yazınız? Bu sayfada üç adet buton ve üç 

adet JavaScript fonksiyonu bulunsun. Her fonksiyona farklı bir isim veriniz ve her 

fonksiyon kullanıcıya farklı bir mesaj versin. Her butona tıklanınca farklı bir fonksiyon 

çağırılsın. İlk butona tıklayınca birinci fonksiyon, ikinci butona tıklayınca ikinci 

fonksiyon, üçüncü butona tıklayınca üçüncü fonksiyon çağırılsın. 

7.13 Küçük Pencereler: alert(), confirm(), prompt() 

Bir önceki bölümde görmüş olduğumuz gibi alert() fonksiyonu küçük bir 

pencere oluşturmak için kullanılır. Bu küçük pencerenin amacı kullanıcıya bilgi 

vermektir. Kullanıcı bu pencere üzerindeki Tamam butonuna basıncaya kadar, bu pencere 

ekranda bekler. Bu fonksiyonun örnek kullanımı bir önceki bölümde gösterilmiştir. 

Kullanıcının bir konuda onayını almak için ise confirm() fonksiyonu kullanılır. 

Bu fonksiyon kullanıcıya Tamam ve İptal seçeneklerini sunar. Kullanıcı bu 

seçeneklerden birini seçer. Buna göre program devam eder. 

Üçüncü bir küçük pencere çeşidi ise prompt() fonksiyonu ile oluşturulan bilgi 

alma penceresidir. Bu pencere ile kullanıcıdan bir bilgi girmesi istenir. Kullanıcının 

girmiş olduğu bilgi JavaScript programı içerisinde kullanılır. 

148


Şimdi bu üç fonksiyonun da kullanıldığı bir örnek program görelim. Bu amaçla 


 

Arka Plan Rengi Değiştirme Uygulaması 

 

 

function onay(gelen){ 

var seçim = confirm("Arka plan rengini değiştirmek 

istediğinizden emin misiniz?"); 

if(seçim == false){ 

return; 

} 

if(gelen == "SEÇ"){ 

renk = prompt("İngilizce Renk ismi giriniz:", "BLUE"); 

document.bgColor = renk; 

alert("Arka plan renginiz değiştirildi !!!!!!! "); 

}else{ 

document.bgColor = gelen; 

alert("Arka plan renginiz değiştirildi !!!!!!! "); 

} 

} 

 

 

 

Arka Plan Rengi Değiştirme: 

 

 

 

 

 

 

 

 

 

Tablo 7-7 Arka plan rengi değiştirme uygulaması kodu 

Bu HTML belgesi tarayıcı içinde görüntülendiğinde ve SARI butonuna 

tıklandığında Şekil 7-7’deki gibi gözükür. 

149


Şekil 7-7 Arka plan rengi değiştirme uygulaması tarayıcı görüntüsü 

Bu sayfada herhangi bir butona tıklanırsa, Şekil 7-8’deki gibi bir pencere 

gözükür. 

Şekil 7-8 Örnek onay penceresi 

Bu pencerede eğer kullanıcı Vazgeç butonuna tıklarsa, her hangi bir işlem 

yapılmaz. Kullanıcı eğer Tamam butonuna tıklarsa, bu durumda ya arka plan rengi 

istenilen renge boyanır veya rengi kullanıcının girmesi istenir. Kullanıcının rengi girmesi 

için ise Şekil 7-9’daki gibi bir pencere gelir. 

Şekil 7-9 Bilgi giriş penceresi 

Bu pencerede kullanıcı arka plan rengini girer ve Tamam butonuna tıklar. Bundan 

sonra arka plan istenilen renge boyanır. Bu pencerede varsayılan değer olarak blue 

gösterilmiştir. Bu JavaScript kodu içinde belirtilmiştir. 

confirm() fonksiyonu 

150


Bu örnekteki confirm fonksiyonu onay fonksiyonu içinde şu şekilde 

kullanılmıştır: 

var seçim = confirm("Arka plan rengini değiştirmek 

istediğinizden emin misiniz?"); 

if(seçim == false){ 

} 

return; 

Bu fonksiyon true (doğru) ya da false (yanlış) değeri döndürür. Kullanıcı 

gösterilen penceredeki Tamam butonuna basarsa true, İptal butonuna basarsa false 

değeri döndürülür. Bu programda dönen bu değeri seçim değişkenine atadık. Daha sonra 

if karar yapısı içinde seçim değişkeninin değerini kontrol ediyoruz. Eğer seçim 

değişkeni değeri false ise, yani kullanıcı İptal butonuna tıklamış ise, bu durumda 

fonksiyon biter. Fonksiyonun bitmesi return komutuyla sağlanır. Eğer seçim 

değişkeninin değeri false değil ise, yani true ise, bu durumda fonksiyonun diğer kısmı 

işlem görmeye devam eder. 

Bir fonksiyona değer gönderme 

Bir fonksiyon çağırılırken o fonksiyona bir değer gönderilebilir. Bu durumda 

öncelikle fonksiyonun bu değeri alabilecek şekilde yazılmış olması gerekir. Bu örnekteki 

onay fonksiyonu kendisine gönderilen bir değeri alabilecek şekilde tanımlanmıştır. 

Fonksiyonun tanım kısmı şu şekildedir: 

function onay(gelen){ 

Görüldüğü gibi fonksiyon isminden sonra parantez içinde gelen isimli bir 

değişken vardır. Bu değişken fonksiyon çağırılırken gönderilen değeri almak için 

kullanılır. Fonksiyona gönderilen değer bu değişkende tutulur. Daha sonra fonksiyon 

içinde gelen değişkeni ile fonksiyona gönderilen değer istenildiği gibi kullanılır. 

Bu durumda fonksiyon çağırılırken de bir değer gönderilmelidir. Bu örnekte onay 

fonksiyonu aşağıdaki gibi değer gönderilerek çağırılmıştır: 

onclick="onay('RED')" 

onclick="onay('BLUE')" 

Daha önceki bölümdeki örnekte göster fonksiyonu çağırılırken sadece fonksiyon 

ismi yazılıyordu. Bu örnekte ise fonksiyon çağırılırken aynı zamanda bir değer de 

gönderilmektedir. Her buton bu fonksiyona farklı bir değer göndermektedir. Böylelikle 

aynı fonksiyon farklı butonlar tarafından çağırıldığında web sayfası arka plan rengini 

farklı renklere boyayabilmektedir. 

151


JavaScript ile Arka Plan Rengini Değiştirme 

JavaScript ile bir web sayfasının birçok özelliği değiştirilebilir. Bu özelliklerden 

biri de arka plan rengidir. Arka plan renk değişimi document.bgColor değerine bir renk 

atayarak yapılır. Örneğin arka plan rengi kırmızı yapılmak istenirse bu şu şekilde yapılır: 

document.bgColor = 'RED'; 

Yukarıdaki örnek sayfada da arka plan rengi benzer şekilde değiştirilmiştir. 

prompt fonksiyonu 

Üçüncü tip küçük pencere prompt fonksiyonu ile oluşturulur. Bu küçük 

pencerenin diğer iki küçük pencere tipinden farkı, bu pencerenin kullanıcının bir değer 

girmesine imkân vermesidir. Bu örnekte prompt fonksiyonu şu şekilde kullanılmıştır: 

renk = prompt("İngilizce Renk ismi giriniz:", "BLUE"); 

document.bgColor = renk; 

Bu şekilde prompt fonksiyonu çağırılarak oluşturulan küçük pencere Şekil 7-9’da 

gözükmektedir. prompt fonksiyonuna iki string değeri gönderilir. Bunlardan ilki pencere 

içinde kullanıcıya gösterilir. İkinci string ise kullanıcının değer gireceği alanda varsayılan 

değer olarak gösterilir. Bu örnekte kullanıcıya sürekli varsayılan değer olarak BLUE 

gösterilmektedir. Bu fonksiyondan dönen değer kullanıcının girdiği değerdir. 

Kullanıcının girdiği bu değer bu örnekte renk değişkenine atanmıştır. Daha sonra da bu 

renk değişkeni sayfanın arka plan rengini değiştirmek için kullanılmıştır. 


Bir sayfanın arka plan rengini 5 renk arasından rasgele bir renge değiştiren bir 

uygulama yapınız? Sayfanızda bir tane buton bulunsun. Bu butona tıklanınca sayfa arka 

plan rengi sizin seçeceğiniz 5 renkten birine boyansın. Her tıklamada arka planın 

boyanacağı renk 5 renk arasından rasgele seçilsin. Bu işlem için bu örnekte olduğu gibi 

yine bir fonksiyon yazınız? Butona tıklanınca bu fonksiyonu çağırınız? 

Rasgele renk seçimi yapabilmeniz için her butona tıklanıldığında 0 ile 4 arasında 

rasgele bir sayı üretmeniz gerekir. JavaScript şu şekilde rasgele 0 ile 4 arasında bir sayı 

üretebilirsiniz: 

var rasgeleSayı = Math.floor(Math.random()*5); 

Bu şekilde rasgele sayı ürettikten sonra, eğer üretilen sayı 0 ise bir renge, 1 ise 

farklı bir renge, 2 ise daha farklı bir renge, vb. boyayabilirsiniz. 

152


7.14 JavaScript ile Tablo Oluşturma 

JavaScript web sayfalarında tablo oluşturmak için birçok durumda kullanılır. 

Özellikle tablodaki bazı değerler hesaplanarak oluşturulacaksa, JavaScript çok kolaylık 

sağlar. 

Şimdi bir derse ait vize, final ve ders ortalama notunu öğrencilere duyurmak için 

yazılmış bir web sayfası görelim. Bu sayfadaki tablonun her satırı bir JavaScript 

fonksiyonu tarafından oluşturulsun. Tabloya bir satır eklemek için yazılmış olan 

JavaScript fonksiyonu çağırılsın. Bu örnek sayfanın kodunu içeriği Tablo 7-8’deki gibi 

olabilir. 

 

JavaScript ile Tablo Oluşturma 

 

 

function satırEkle(isim, vize, final){ 


document.write(""+isim+""); 

document.write(""+vize+""); 

document.write(""+final+""); 

dersNotu = vize*0.4 + final*0.6; 

document.write(""+dersNotu+""); 


} 

 

 

 

Vize ve Final Notları Tablosu: 

 

İsim Vize Notu Final Notu 

Ders Notu 

 

satırEkle("Ali Ak", 70, 80); 

satırEkle("Veli Kara", 80, 90); 

satırEkle("Mehmet Uzun", 70, 100); 

satırEkle("Tahir Kısa", 50, 90); 

 

 

 

 

Tablo 7-8 Dinamik tablo oluşturma örneği 


153


Şekil 7-10 Dinamik tablo oluşturma örneği 

Öncelikle bu sayfadaki kodunu HTML gövde kısmını incelersek, ilk önce bir 

başlık oluşturuluyor. Sonra bir tablo oluşturuluyor ve bu tablonun ilk satırı HTML 

imleriyle oluşturuluyor. Sonra tablonun bilgi içeren diğer satırlarını oluşturmak için head 

kısmında yazılan satırEkle fonksiyonu çağırılıyor. 

satirEkle("Ali Ak", 70, 80); 

satirEkle("Veli Kara", 80, 90); 

satirEkle("Mehmet Uzun", 70, 100); 

satirEkle("Tahir Kısa", 50, 90); 

Dikkat edilirse bu fonksiyona sadece öğrenci ismi, vize ve final notları 

gönderiliyor. Ders notu değeri gönderilmiyor. Ders notu vize notu ile final notundan 

hesaplanabildiği için satırEkle fonksiyonuna gönderilmiyor. Bu fonksiyon içinde ders 

notu vize ve final notlarından hesaplanıp tabloya yazdırılıyor. 

Şimdi de satırEkle fonksiyonunu inceleyelim. Bu fonksiyonun amacı tabloya 

bir satır eklemektir. Tabloda da dört tane hücre bulunmaktadır. Öncelikle fonksiyon üç 

farklı parametre almaktadır. İlk parametre isim, ikinci parametre vize notu ve üçüncü 

parametre final notudur. Bu parametreler fonksiyonun her çağırılışında farklı değerler 

almaktadır. Fonksiyon içinde önce tablonun bir satırını oluşturmak için başlangıç 

imi yazılıyor, sonra da hücreler sırasıyla oluşturuluyor. En sonunda da satır sonu kapanış 

imi yani yazılıyor. Ayrıca ders notu vize ve final notu kullanılarak hesaplanılıyor. 


Her satırı bir JavaScript fonksiyonu tarafından üretilen bir tablonun içinde olduğu 

örnek bir sayfa hazırlayınız? Tabloda futbol takımlarıyla ilgili bilgiler olsun. Tablonun 

her satırında 6 hücre bulunsun. Bu hücreler sırasıyla, takım ismi, toplam maç sayısı, 

galibiyet sayısı, beraberlik sayısı, mağlubiyet sayısı ve toplam puanı göstersin. Bu 

154


değerlerden ilk beşi fonksiyona parametre olarak gönderilsin. En son değer yani takımın 

toplam puanı fonksiyon içinde hesaplanarak tabloya yazılsın. Bu tabloya sayfanın gövde 

kısmında 5 takıma ait değerler giriniz? Yani bu fonksiyonu 5 defa farklı takımlar için 

çağırınız? 

7.15 Döngüler 

Diğer bütün dillerde olduğu gibi JavaScript dilinde de birçok döngü çeşidi vardır. 

JavaScript dilinde iki tip for döngüsü ve iki tip de while döngüsü mevcuttur. JavaScript 

dilindeki bu döngüler C ve Java dillerindeki döngülere benzerler. 

Şimdi bir for döngüsünün kullanıldığı örnek bir sayfa görelim. Bu sayfadaki for 

döngüsü bir çarpım tablosu oluşturmak için kullanılıyor. Bu döngü 1’den başlayarak 10’a 

kadar sayıları çarpım tablosuna yazıyor. Döngünün her dönmesinde tabloda bir satır 

oluşturuluyor. 

Çarpım tablosunu oluşturan fonksiyon yine head kısmında yazılmış olup, gövde 

kısmında istenilen değer için çağırılmıştır. Bu şekilde hangi değer gönderilirse o sayı için 

çarpım tablosu oluşturulmaktadır. Bu sayfanın HTML kodu Tablo 7-9’da verilmiştir. 

 

JavaScript ile Çarpım Tablosu Oluşturma 

 

 

function çarpımTablosuOluştur(sayı){ 


for(i = 1; i


Tablo 7-9 Döngülerle tablo oluşturma 


Şekil 7-11 Döngülerle tablo oluşturma 

Bu örnekte tablonun tamamı çarpımTablosuOluştur fonksiyonu içinde 

oluşturulmuştur. Dolayısıyla bu örnekteki fonksiyon başında önce tablo oluşturmak için 

imi yazılmıştır. Fonksiyonun sonunda ise tablonun kapanış imi yazılmıştır. 

Tablonun her bir satırı ise for döngüsünün bir dönmesinde oluşturulmuştur. Daha önceki 

örnekte fonksiyonun tamamında tablonun bir satırı oluşturuluyordu, bu örnekte ise for 

döngüsünün her dönmesinde tablonun bir satırı oluşturulmaktadır. 

JavaScript’te for döngüsü şu şekilde yazılır: 

for(i = 1; i


içinde yani döngünün gövde kısmında tablonun bir satırını oluşturmak için komutlar 

bulunmaktadır. 


Kullanıcının gireceği bir tamsayıdan küçük bütün pozitif sayıları ve karelerini bir 

tabloda gösteren bir sayfa yazınız? JavaScript kodu başında önce kullanıcının bir sayı 

girmesini isteyiniz? Bunun için prompt() fonksiyonunu kullanınız? Daha sonra bir tablo 

oluşturunuz? Tablonun her satırında iki tane hücre olsun. İlk hücre sayıyı, ikinci hücre bu 

sayının karesini göstersin. for döngüsünün her dönmesinde tabloda bir tane satır 

oluşturunuz? Örneğin kullanıcı 5 sayısını girerse, tablonun ilk satırında 5 ve 25 olmalı. 

İkinci satırında 4 ve 16 olmalı. Bu şekilde devam etmeli ve en son satırda 1 ve 1 olmalı. 

Bu uygulamada fonksiyon kullanmanıza gerek yok. 

7.16 Harici JavaScript Dosyası Kullanma 

Bir HTML belgesi içinde kullanacağımız JavaScript fonksiyonlarını head kısmı 

yerine harici dosyalarda da yazabiliriz. Bu durumda head kısmında kullanacağımız 

JavaScript dosyasına bağlantı veririz. Harici JavaScript dosyalarının kullanımı harici CSS 

dosyalarının kullanımına benzer. 

Şimdi bir önceki örnekte yazmış olduğumuz JavaScript fonksiyonunu harici bir 

JavaScript dosyasında yazalım. Daha sonrada bu fonksiyonun web sayfası içinden nasıl 

kullanıldığını görelim. 

Tablo 7-10’daki JavaScript kodu carpimtablosu.js isimli bir dosyaya 

kaydediniz. Bu dosyanın uzantısının .js olduğuna dikkat ediniz. Ayrıca bu dosya içinde 

script iminin kullanılmadığına dikkat ediniz. Çünkü script imi bir HTML imidir. 

Oysa bu dosya bir HTML dosyası olmayıp, bir JavaScript dosyasıdır. 

function çarpımTablosuOluştur(sayı){ 


for(i = 1; i


Daha sonra bu dosya Tablo 7-11’deki gibi bir HTML belgesi içinde bağlantı 

verilerek kullanılabilir. 

 

Harici JavaScript Dosyası kullanımı 

 

 

 

Carpim Tablosu: 

 

carpimTablosuOlustur(5); 

 

 

 

 

Tablo 7-11 Harici JavaScript dosyası kullanan bir HTML belgesi 

Bu HTML belgesinin head kısmında kullanılan script imine dikkat ediniz. Bu 

durumda script imi içerisinde JavaScript kodu yerine, bu imin src özniteliği 

kullanılmıştır. Bu öznitelik değeri olarak JavaScript kodunun bulunduğu dosya adı 

verilmiştir. Bu örnekte HTML belgesi ile JavaScript dosyasının aynı dizinde olduğu 

varsayılmıştır. Eğer JavaScript dosyası farklı bir dizindeyse, bu dosyanın yolu uygun bir 

şekilde belirtilmelidir. Diğer yandan başka bir web sayfasında bulunan JavaScript 

dosyasına bağlantı verilerbilir. Bu durumda src özniteliği değeri olarak bu JavaScript 

dosyasının tam URL adresi verilmelidir. 

7.17 Diziler 

Diğer bütün dillerde olduğu gibi JavaScript dilinde de dizi desteği vardır. Diziler 

aynı türden bir çok veriyi gruplamaya imkan verir. Bir değişken tek bir değer tutarken, 

bir dizi değişkeni aynı tipten birden fazla veri tutar. JavaScript dilinde dizi bir nesnedir 

[10]. Bir dizi değişkeni Array anahtar kelimesi kullanılarak oluşturulur. 

Şimdi bir dizinin JavaScript içinde nasıl kullanıldığını örnek bir sayfa ile görelim. 

Bu sayfa basit bir oyun sayfasıdır. Kullanıcının rasgele 10 sayıdan birisini tahmin etmesi 

istenmektedir. Sonuca göre kullanıcıya eğer bildiyse bir tebrik mesajı, eğer bilemediyse 

de farklı bir mesaj verilmektedir. 

Bu sayfada bir JavaScript fonksiyonu yazılmıştır. Bu fonksiyon sayfanın head 

kısmında bulunmaktadır. Bu fonksiyon sayfa gövdesinde bulunan bir buton tarafından 

çağırılmaktadır. Bu sayfanın HTML kodu Tablo 7-12’de verilmiştir. 

158


 

Sayı Tahmin Oyunu 

 

 

function tahminEt(){ 

// bir dizi oluştur 

var sayılar = new Array(); 

// diziye rasgele oluşturulmuş 5 sayı koyalım 

for(i = 0; i


Şekil 7-12 Sayı tahmin oyunu penceresi 

Bu penceredeki OYNA butonuna kullanıcı tıkladığında, kullanıcının 1 ile 20 

arasında bir sayı girmesi için küçük bir pencere gelir. Sonra girdiği sayı eğer rasgele 

sayılardan bir tanesiyle aynıysa, kendisine rasgele bir sayıyı bulduğunu belirten yeni bir 

mesaj penceresi daha gelir. Eğer girdiği sayı rasgele sayılardan bir tanesiyle aynı değilse, 

bu durumda da yine kendisine bu yönde bir mesaj veren küçük bir pencere gelir. Bu 

şekilde kullanıcı oyunu istediği kadar oynayabilir. 

Şimdi programın içeriğini inceleyelim. Öncelikle tahminEt fonksiyonu içinde bir 

dizi oluşturuluyor. Bu dizi şu şekilde oluşturuluyor: 

var sayılar = new Array(); 

Diğer değişkenlerden farklı olarak dizi değişkenlerinin kullanılmadan önce bu 

şekilde Array kelimesi ile açıkça oluşturulmaları gerekir. Dizi değişkeni olan sayılar 

oluşturulduktan sonra, for döngüsü içinde bu diziye 10 tane rasgele sayı atanıyor. Bu 

sayılar 1 ile 20 arasında rasgele üretilen sayılardır. Daha sonra kullanıcıdan bir sayı 

girmesi isteniyor ve kullanıcının girmiş olduğu sayı, sayı değişkeninde tutuluyor. Sonra 

da yine başka bir for döngüsünde kullanıcının girmiş olduğu sayı değerinin dizideki 

sayılardan her hangi birine eşit olup olmadığı kontrol ediliyor. Eğer herhangi birisine 

eşitse, kullanıcıya bir mesaj veriliyor ve fonksiyon bitiriliyor. Kullanıcıya mesaj 

verildikten sonra gelen return anahtar kelimesi fonksiyonun o noktada biteceğini 

gösteriyor. Eğer dizideki bütün elemanlar kontrol edildikten sonra hala eşit bir sayı 

yoksa, bu durumda for döngüsü bitince kullanıcıya başka bir mesaj veriliyor ve 

fonksiyon bu şekilde bitiyor. 

Fonksiyon içindeki str değişkeni programımızdaki önemli bir ayrıntıyı 

oluşturuyor. Eğer kullanıcı sayılardan birisini tahmin edemezse bütün sayıları kullanıcıya 

göstermek istiyoruz. Bunun için bir string değişkeninde sayıları art arda ekliyoruz. 

Döngünün her dönmesinde dizinin bir elemanını str değişkenine ekliyoruz. Böylece for 

döngüsü bittiğinde bütün sayılar str değişkenine eklenmiş oluyor. Fonksiyon sonunda 

kullanıcıya bilemediğine dair mesajı verirken bütün sayıları da str değişkeninden 

yazdırıyoruz. 

160


Dizi Olusturma 

Dizi oluşturmanın diğer bir metodu da bütün dizi elemanlarına dizi oluştururken 

değer atamaktır. Bu şu şekilde yapılır: 

var sayılar = new Array(2, 30, 45, 30, 60); 

var isimler = new Array(“Ahmet”, “Mehmet”, “Ali”, “Ayşe”, 

“Fatma”); 

Bu durumda tek komutla hem sayılar ve isimler dizisi oluşturulur hem de bu 

dizilere değerler atanır. sayılar dizisinin ilk elemanının değeri 2, ikinci elemanı değeri 

30, vb. olur. Benzer şekilde isimler dizisinde stringler tutulur. Bu dizinin de ilk elemanı 

“Ahmet”, ikinci elemanı “Mehmet”, vb. olur. 

Rasgele Sayı Üretme 

JavaScript dilinde rasgele sayı üretmek için Math.random() fonksiyonu 

kullanılır. Bu fonksiyon 0 ile 1 arasında rasgele bir ondalıklı sayı üretir (sıfır üretilebilir 

ama 1 üretilemez, yani üretilen sayılara sıfır dahil, 1 ise hariçtir.) Eğer bizim üretmek 

istediğimiz sayı daha büyük bir rasgele sayıysa, bu durumda üretilen sayıyı başka bir 

sayıyla çarparız. Örneğin bu uygulamada biz 1 ile 20 arasında (ikisi de dahil) rasgele bir 

sayı üretmek istiyoruz. Bunun için Math.random() fonksiyonu ile üretilen sayıyı 20 ile 

çarpıyoruz. Bu durumda üretilen sayı 0 ile 20 arasında olmuş oluyor (sıfır dahil 20 hariç). 

Daha sonra Math.floor() fonksiyonu ile üretilen bu sayıyı tamsayıya çeviriyoruz. Bu 

fonksiyon üretilen sayının ondalıklı kısmını atıyor. Eğer üretilen sayı 15.7 ise, bunun 

ondalıklı kısmını atıyor ve sonuç 15 oluyor. En son adımda ise, üretine bu ondalıklı 

sayıya 1 ekliyoruz. Çünkü bu haliyle üretilen sayı 0 ile 20 arasında oluyor ( sıfır dahil, 20 

hariç). Biz ise üretilen sayının 1 ile 20 arasında (ikisi de dahil) olmasını istiyoruz. Bunu 

elde edebilmek için de üretilen sayıya 1 ekliyoruz. 


Siz de yazacağınız bir sayfada isim tahmin etme oyunu geliştiriniz? Bir dizide 10 

tane kişi ismi tutunuz? Kullanıcının gireceği bir isim listede varsa, kullanıcıya bir tebrik 

mesajı veriniz? Eğer girdiği isim listede yoksa, tekrar oynaması için bir teşvik mesajı 

veriniz? 

7.18 Özetle 

Bu bölümde JavaScript dilinin temel özellikleri örneklerle anlatılmıştır. Bu 

bölümün amacı JavaScript dilini bütün incelikleriyle anlatmak olmayıp, genel bir temel 

oluşturmaktır. Burada oluşturulan temel üzerine isteyen kişiler kendi gayretleriyle 

eklemeler yapabilirler. 

161


Ayrıca bu bölümde programlamanın temelleri anlatılmamıştır. Bu bölümü çalışan 

kişilerin daha önceden programlamanın temellerini bildikleri varsayılmıştır. Özellikle 

değişkenler, karar yapıları, döngü yapıları ve fonksiyonlar gibi konularda okuyucuların 

her hangi bir programlama dilinden bilgilerinin olduğu varsayılmıştır. 

JavaScript dilinde olaylar önemli bir yere sahiptir. Biz bu bölümde kolaylık 

olması açısından sadece butona basılma olayıyla ilgili örnekler yaptık. Ama benzer 

şekilde daha birçok olay çeşidi vardır. Bu bölümdeki anlatılan kısımları iyi anlayan bir 

kişi diğer çeşit olayları da öğrenmekte çok güçlük çekmeyecektir. 

7.19 JavaScript ile İlgili Bazı Kaynaklar 

JavaScript ile ilgili daha geniş bilgi için Türkçe kitap olarak şu kıtabı önerebiliriz: 

Kitap Adı: JavaScript Temel Başvuru Kılavuzu 

Yazarı: Steven HOLZNER 

Yayınevi: Alfa Yayınları 

ISBN: 9752973310 

Ayrıca İnternet’te JavaScript ile ilgili çok fazla kaynak mevcuttur. Bunlardan 

bazıları şunlardır: 

http://www.w3schools.com/js/default.asp 

http://www.w3schools.com/js/js_examples.asp 

http://www-k12.atmos.washington.edu/~ovens/javascript/jsindex.html 


[1] Static web page, http://en.wikipedia.org/wiki/Static_web_page, 7 Ekim 2009. 

[2] Dynamic web page, http://en.wikipedia.org/wiki/Dynamic_web_page, 7 Ekim 2009. 

[3] Server-side scripting, http://en.wikipedia.org/wiki/Server-side_scripting, 7 Ekim 

2009. 

[4] Client-side scripting, http://en.wikipedia.org/wiki/Client-side_scripting, 7 Ekim 

2009. 

[5] JavaScript, http://en.wikipedia.org/wiki/JavaScript, 7 Ekim 2009. 

162


[6] VBScript, http://en.wikipedia.org/wiki/VBScript, 7 Ekim 2009. 

[7] JavaScript Variables, http://www.w3schools.com/js/js_variables.asp, 7 Ekim 2009. 

[8] JavaScript If...Else Statements, http://www.w3schools.com/js/js_if_else.asp, 7 Ekim 

2009. 

[9] JavaScript Functions, http://www.w3schools.com/js/js_functions.asp, 7 Ekim 2009. 

[10] JavaScript Array Object, http://www.w3schools.com/js/js_obj_array.asp, 7 Ekim 

2009. 

163


Bölüm 8 

8.1 Amaç 

MULTİMEDYA 

Bu bölümde amacımız, dijital ses ve videonun temellerinin anlaşılması ve bunların 

web sayfaları içinde sunulmasının öğrenilmesidir. Bu amaçla öncelikle dijital sesin 

bilgisayarda kaydedilmesinin temelleri anlatılmıştır. Sonra bu sesin sıkıştırılması 

teknikleri anlatılmış ve örnek uygulaması yapılmıştır. Bu ses dosyalarının web sayfaları 

içinde sunulması anlatılmıştır. Daha sonra dijital videonun temelleri, bilgisayarda 

kaydedilmesi ve web sayfası içinde sunulması gösterilmiştir. Ayrıca Flash video 

oluşturma ve web sayfası içinde sunulması işlenmiştir. 

8.2 Giriş 

Web sayfalarına metin ve görüntüye ek olarak ses ve video eklemek te 

mümkündür. Web sayfalarına sadece ses dosyaları eklenebileceği gibi sesli video 

dosyaları da eklenebilir. Son yıllarda özellikle video içeriğe sahip web siteleri hızla 

artmıştır. Youtube.com gibi sitelerin video kliplerini kolayca ve bedava paylaşma imkanı 

sunmasıyla web’de video kullanımı yaygınlaşmıştır. Bu sitelerdeki videoların çoğu 

eğlence amaçlı olmakla birlikte eğitim amaçlı, reklam ve tanıtım amaçlı video siteleri de 

yaygındır. 

8.3 Dijital Sesin Temelleri 

Sesler havada titreşimler yardımıyla analog olarak yayılır. Bir kişinin ağzından 

çıkan bir ses hava zerreciklerini titreştirerek etrafa yayılır. Dinleyicinin kulağına çarpan 

bu hava zerrecikleri sesin duyulmasını sağlar. Ses bilgisayar ortamında ise dijital olarak 

saklanır. Analog ses önce microfondan alınır ve dijital hale getirilir [1]. Bu şekilde 

bilgisayar ortamında tutulur veya İnternet üzerinden paylaşılır. Bilgisayardaki ses 

164


dosyaları çalındığında ise ses bilgileri hoporlörlerde dijital halden analog hale çevrilir ve 

insanların duyabilmesi için etrafa yayılır. 

Seslerin dijital hale getirilmeleri belirli bir periyotla seslerin anlık değerlerinin 

kaydedilmeleri ile olur. Örneğin normal bir insan konuşması bilgisayara kaydedilecekse, 

bunun için sesin saniyede 8000 tane farklı anlık değeri alınır. Bu şekilde bilgisayar 

ortamına aktarılır. Her bir anlık değerin büyüklüğü ise 8 bit olabilir. Bu şekilde bir sesin 

bir saniyelik kısmının bilgisayarda kaplayacağı alan şu kadar olur: 

8000*8= 64,000 bit. Yani 8,000 byte. 

Aynı sesin bir dakikalık kısmının bilgisayarda kaplayacağı alan ise 

60*8,000byte = 480,000 byte olur. 

Yani bir dakikalık bir ses kaydının bilgisayardaki büyüklüğü 480 KB civarında 

olur. Dolayısıyla dijital ses bilgisyarda çok fazla miktarda yer kaplar. Diğer yandan eğer 

kaydetmek istediğimiz ses bir kişinin konuşması değil de eğer bir müzik olsaydı, bu 

durumda sesi dijital hale getirirken sesin anlık değerinin daha sıklıkla alınması gerekirdi. 

Yoksa müzik kalitesinde ciddi orada düşüş meydana gelirdi. CD kalitesinde bir müzik 

dijital hale getirilmek istendiğinde saniyede 44,100 örnek alınır ve her bir örnek 16 bit 

büyüklüğünde olur. Buna ek olarak streo ses için aynı işlem iki kanal olarak yapılır. 

Bunun sonucunda 1 saniyelik dijital ses için gerekli olan alan miktarı: 

44,100*16*2= 1,411,200 bit olur. Yani 176,400 Byte olur. 

Aynı müziğin bir dakikalık kısmının bilgisayarda kaplayacağı alan ise 

60*176,400 = 10,584,000 Byte olur. 

Dolayısıyla 1 dakikalık bir müzik dijital halde bilgisayar belleğinde 10MB 

civarında yer kaplar. Bu da çok büyük bir miktardır. Özellikle İnternet üzerinden bu tür 

dosyaların bu halleriyle paylaşılması uygun değildir. Bunun için görüntülerde olduğu gibi 

seste de birçok sıkıştırma algoritması kullanılır. Bu algoritmalar yine görüntülerde olduğu 

gibi kayıplı ve kayıpsız olarak iki çeşittir. 

Ses ham veri olarak sıkıştırılmadan Windows bilgisayarlarda genellikle wav 

dosyalarında tutulur [2]. Wav dosyalarının kullanımı yaygındır. Özellikle üzerinde 

değişiklik yapılacak sesler ilk önce wav formatında ham veri olarak kaydedilir. Değişik 

programlarla ses dosyası üzerinde işlemler yapıldıktan sonra genellikle ses bir sıkıştırma 

algoritmasıyla [3] sıkıştırılır ve bu halleriyle kullanılır. Ses üzerinde değişiklikler yapan 

ve başka formatlara dönüştüren programlar çoğunlukla wav dosyaları üzerinde yani ham 

ses verisi üzerinde işlem yaparlar. 

165


Şu anda ses için en yaygın kullanılan sıkıştırma tekniği kayıplı sıkıştırma 

algoritmalarıdır. Bunlar sesin kalitesinden çok az kaybederek büyük ordan yer kazancı 

sağlamayı hedeflerler. Bu algoritmalardan en yaygın olanlarından birisi de mp3 

algoritmasıdır. Bu algoritma ham veri haldeki sesin boyunu yaklaşık 10’da 1 oranında 

azaltır. Fakat ses kalitesinde fark edilir bir düşüş gözlenmez. Çoğunlukla kaybedilen ses 

bilgisi insanların duyma sınırının dışında kalan verilerdir. Mp3 [4] gibi daha birçok 

kayıplı sıkıştırma algoritmaları vardır. Bunlar kullanım alanlarına ve istenilen ses 

kalitesine göre farklılık gösterirler. Diğer yandan kayıpsız sıkıştırma yapan algoritmalar 

da geliştirilmiştir. Fakat bunlar kayıplı sıkıştırma yapan algoritmalar kadar yaygın 

kullanılmamaktadır. 

8.4 Sesin Kaydedilmesi 

Bir Windows bilgisayarında ses kaydetmek nispeten kolaydır. Bunun için 

öncelikle bilgisayara bağlı bir mikrofon gereklidir. Daha sonra ses kaydetmek için 

Windows ile birlikte gelen “Ses Kaydedicisi” programı kullanılabilir. Bu program 

Donatılar altındaki Eğlence menüsü içindedir. 

Şimdi mikrofondan ses kaydı yapmanın bir örneğini görelim. Bunun için 

öncelikle Donatılar altında bulunan Eğlence menüsündeki “Ses Kaydedicisi” programını 

başlatınız. Bu programın görüntüsü Şekil 8-1’deki gibidir. 

Şekil 8-1 Ses Kaydedicisi programı pencere görüntüsü 

Bu program üzerinde bulunan en sağdaki kırmızı yuvarlaklı buton kayıt 

butonudur. Bu butona tıklayınca ses kaydı başlar. Bu butona tıklayınız ve mikrofona 

konuşmaya başlayınız. Ses kaydı yapılırken bu pencerenin ortasındaki yeşil çizginin sesin 

şiddetine göre değiştiğini gözlemleyiniz. Daha sonra bu pencerede bulunan kayıt 

butonunun hemen yanındaki stop butonuna basarak kaydı durdurunuz. Artık kaydetmiş 

olduğunuz bu sesi tekrar çalabilirsiniz. Bu sesi çalmak için aynı penceredeki oynatma 

butonuna tıklayınız. Bu durumda kaydetmiş olduğunuz sesi bilgisayar hopörlöründen 

dinlersiniz. 

Kaydetmiş olduğunuz sesi bir dosyaya kaydedebilirsiniz. Bunun için Ses 

Kaydedicisi penceresindeki Dosya menüsünde bulunan Kaydet seçeneğini seçiniz. 

Gelen pencerede dosyanın kaydedileceği dizini seçiniz ve dosyaya bir isim veriniz. 

Dosyanızın uzantısı wav şeklinde olacaktır. Çünkü kaydetmiş olduğunuz ses dosyası 

sıkıştırılmamış ham veri içeren bir ses dosyasıdır. 

166


Bu notların yazıldığı zamanda bir Windows XP bilgisayarında bulunan Ses 

Kaydedicisi programı, sesi saniyede 22,050 defa örnekleyerek ve her bir örneğin boyu 

da 16 bit olarak kaydetmektedir. Bu bilgiyi de Ses Kaydedicisi programının Dosya 

menüsünde bulunan Özellikler seçeneğinden kontrol edebilirsiniz. Bu değerler kaydı 

yapan mikrofonun özelliklerine göre değişebilir. 

Kaydedilen ses dosyası artık herhangi bir medya oynatıcısı ile çalınabilir. Örneğin 

Windows Media Player ile kaydetmiş olduğunuz dosyayı çalabilirsiniz. 


Ses Kaydedicisi programını kullanarak değişik sürelerde konuşma kaydediniz? 

Üretilen ses dosyalarının boyunun konuşma süresine göre nasıl değiştiğini 

gözlemleyiniz? Ses kayıt süresi iki katına çıkınca, dosya boyu da iki katına 

çıkmaktamıdır? İnceleyiniz? 

8.5 Sesin Sıkıştırılması 

Ses dosyaları ham veri olarak yani wav dosyası halinde çok yer kapladığından 

web sayfalarına bu halleriyle konulmaları uygun olmaz. Bu dosyaların önce 

sıkıştırılmaları gerekir. Daha önceki bölümlerde vurguladığımız gibi sesi sıkıştırmak için 

çok farklı algoritmalar geliştirilmiştir. Bu bölümde biz Microsoftun bir sıkıştırma 

programı olan Windows Media Encoder programını kullanarak ses dosyasını önce 

sıkıştıracağız, sonra da web sayfası içine yerleştireceğiz. 

İlk adım olarak Windows Media Encoder programını indirip bilgisayarınıza 

kurunuz. Bu program bedava bir program olup Eylül 2009 tarihi itibariyle 

http://www.microsoft.com/windows/windowsmedia/forpros/encoder/default.mspx 

adresinden indirilmektedir. Daha sonra eğer bu adres değişirse, bir arama motorundan bu 

programın ismini aratarak indirilecek adresi bulabilirsiniz. 

Şimdi adım adım bir wav dosyasını Windows Media Encoder programını 

kullanarak nasıl sıkıştırılmış bir dosya haline getireceğimizi görelim. 

1. Windows Media Encoder programını başlatınız? Bu programı başlattığınızda 

bu oturumda ne yapmak istediğinizle ilgili bir küçük pencerede seçim 

yapmanız istenir. Bu pencerede dosya formatı değiştirme seçeneğini, yani 

“Convert a file” seçeneğini seçiniz. Sonra Next butonuna tıklayınız. 

2. Gelen ikinci küçük pencerede kaynak dosya ve hedef dosyaların belirtilmesi 

istenir. Bu penceredeki ilk seçenek kaynak dosyadır ve İngilizce olarak 

“source file” olarak tanımlanır. Kaynak dosyayı daha önceki kaydetmiş 

olduğumuz wav dosyası olarak seçiniz. İkinci seçenek oluşturulacak dosyadır. 

167


O da İngilizce olarak “Output File” olarak geçmektedir. Bu dosyaya kendisi 

otamatik olarak bir değer verir. Siz isterseniz bunun yolunu ve ismini 

değiştirebilirsiniz. Sonuçta üretilecek dosya bu olacaktır. Üretilecek dosyanın 

uzantısının wma olduğuna dikkat ediniz. Next butonuna tıklayınız. 

3. Üçüncü adımda bu dosyanın nasıl kullanılacağı sorulmaktadır. Kullanım 

amacına göre farklı sıkıştırma algoritması kullanılacaktır. Biz üretilen ses 

dosyasını bir web sunucusundan bir web sayfası ile kullanıcılara sunacağımız 

için, bu seçeneklerden web sunucusu seçeneğini seçiniz. Bu seçenek İngilizce 

olarak “web server (progressive download)” olarak verilmiştir. Next butonuna 

tıklayınız. 

4. Dördüncü adımda ise üretilecek ses dosyasının özellikleri sorulmaktadır. Bu 

pencerede Audio başlığı yanında bulunan aşağı açılan menüye tıklayınız. 

Burada sunulan seçeneklerden “Voice Quality Audio” seçeneğini seçiniz. 

Eğer dosyanız bir müzik dosyası olsaydı bu durumda “CD Quality Audio” 

seçeneğini seçebilirdiniz. Bu adım sonunda Finish butonuna tıklayınız ve yeni 

ses dosyasını üretiniz. Ses dosyası üretildikten sonra encoder programı 

penceresinin görüntüsü Şekil 8-2’deki gibidir. 

Üretilen ses dosyasının boyutunun ilk wav dosyası boyundan çok küçük olduğunu 

göreceksiniz. Bu sıkıştırma sonucu elde edilen yer kazancıdır. Üretilen dosyayı Windows 

Media Player veya başka bir medya oynatıcısı ile çalınız ve ses kalitesine dikkat ediniz. 

Ses kalitesinde çok açık bir fark olmadığını göreceksiniz. 


Şekil 8-2 Windows Media Encoder görüntüsü 

168


Aynı wav dosyasını Windows Media Encoder programını kullanarak farklı 

formatlara dönüştürmeyi deneyiniz? CD Kalitesinde ses için üretilen dosya ile Voice 

Quality Audio için üretilen dosyalar arasındaki boy ve kalite farkını karşılaştırınız? 

Ayrıca konuşma ve şarkı dosyalarını farklı formatlara dönüştürmeyi deneyiniz? Sonuçta 

üretilen dosyalar arasındaki kalite farkını gözlemlemeye çalışınız? 

8.6 Ses Dosyalarının Web Sayfalarına Konulması 

Bu bölümde bir önceki bölümde oluşturmuş olduğumuz sıkıştırılmış ses dosyasını 

web sayfasına nasıl koyacağımızı görelim. Bu amaçla hazırlanmış bir örnek web sayfası 

kodu Tablo 8-1’de verilmiştir. 

 

Web Sayfasına Ses Dosyası Ekleme 

 

 

 

Web Sayfasına Ses Dosyası Ekleme 

Aşağıdaki medya oynatıcısını kullanarak sesi çalabilirsiniz: 

 

 

 

 

Tablo 8-1 Web sayfasına ses yerleştirme örneği 


Şekil 8-3 Web sayfasına ses yerleştirme örneği 

Görüldüğü gibi tarayıcı penceresi içinde bir Windows Media Player 

görünmektedir. Bu oynatıcı üzerindeki butonlara tıklanarak web sayfasındaki ses dosyası 

çalınabilir veya durdurulabilir. 

169


Bu sayfa içine ses dosyasının yerleştirilmesi için imi kullanılmıştır. Bu 

imin birçok özniteliği vardır. Bunlardan src özniteliği çalınacak ses dosyasının adını ve 

yolunu gösterir. Bu örnekte ses dosyası adı deneme1.wma olarak verilmiştir ve bu ses 

dosyası bu web sayfasının bulunduğu dizinde bulunan kayit dizini içindedir. Width ve 

height öznitelikleri medya oynatıcısının eninin ve boyunun büyüklüğünü gösterir. 

Autostart özniteliği ise sesin sayfa yüklenince hemen çalınmaya başlanıp 

başlanmayacağını gösterir. Bu örnekte bu özniteliğin değeri false olarak verildiği için 

sayfa yüklenince ses hemen çalınmaya başlamaz. Ancak kullanıcı play butonuna tıklarsa 

o zaman ses çalınmaya başlar. Eğer sesin hemen çalınmaya başlaması istenseydi, bu 

durumda autostart özniteliği değeri true olarak verilmeliydi. Bu örnekte kullanılan 

diğer bir öznitelik ise loop özniteliğidir. Bu öznitelik sesin çalınması bittikten sonra 

tekrar çalınmaya başlanıp başlanmayacağını belirler. Bu örnekte loop değeri false 

olduğu için ses tekrar çalınmaya başlamaz. Eğer değeri true olsaydı, bu durumda ses 

tekrar tekrar çalınırdı. 

HTML dili standardı bu örnekte kullanılan embed imi yerine object iminin 

kullanılmasını tavsiye etmektedir. Fakat şu anda object imi standardı bütün tarayıcılar 

tarafından aynı şekilde desteklenmemektedir. Bu yüzden örneğimizde embed imi 

kullanılmıştır. 


Hazırlayacağınız bir web sayfasına oluşturmuş olduğunuz bir ses dosyasını 

koyunuz ve tarayıcı ile bu sesi çalınız? Web sayfanız içindeki embed imi boy değerlerine 

(width ve heigth) farklı değerler vererek oynatıcının tarayıcı içinde nasıl göründüğünü 

gözlemleyiniz? Ayrıca autostart ve loop öznitelik değerlerine true değeri atayarak bu 

özniteliklerin oynatıcı üzerindeki etkisini gözlemleyiniz? 

8.7 Midi Melodi Dosyaları ve Arka Plan Sesi 

Midi melodi dosyalarının [5] diğer ses dosyalarından farklı bir özelliği vardır. Bu 

melodi dosyalarında ses kaydedilemez. Sadece melodiler kaydedilir. Bunun sebebi bu 

dosyalarda melodilerin ses değeri olarak değil sadece tanım olarak kaydedilmeleridir. 

Diğer ses dosylarında sesler belirli aralıklarla örneklenir ve bu değerler ses dosyalarında 

tutulur. Fakat midi dosyalarında ses örnekleri yoktur. Sadece nota bilgisi, sesin şiddeti 

gibi bilgiler kayıtlıdır. Bu bilgilerden melodi her defasında tekrar üretilir. Dolayısıyla bu 

tip dosyalarda sadece melodiler saklanabilir. Bu dosyaların en önemli avantajları 

boylarının çok küçük olmasıdır. Bu tip dosyalar daha çok web sayfalarında arka planda 

çalınmak için kullanılır. 

Bu bölümdeki örnek sayfamızda kullanmak için öncelikle bir midi dosyasına 

ihtiyacımız vardır. Hazır bir midi dosyasını web’den bir siteden indirebilirsiniz. Web’de 

bedava midi dosyası bulunduran birçok site vardır. Bu siteleri bir arama motorunda 

170


“free midi files” diye aratarak bulabiliriz. Örneğin http://www.free-midi.org veya 

http://www.mididb.com sitelerinden bedava bir midi dosyası indirebilirsiniz. 

Şimdi indirmiş olduğunuz bir midi dosyasını bir web sayfası arka planında 

çalacak şekilde ayarlayalım. Bu amaçla hazırlanmış bir örnek web sayfası kodu Tablo 

8-2’de verilmiştir. 

 

Arka planda melodi çalma 

 

 

 

Arka planda melodi çalan bir web sayfası 

 

 

 

Tablo 8-2 Arka planda melodi çalan bir web sayfası örneği 

Bu HTML belgesi tarayıcı içindeŞekil 8-4’deki gibi gözükür. 

Şekil 8-4 Arka planda melodi çalan bir web sayfası örneği 

Bu örnekteki sayfa herhangi bir tarayıcı ile görüntülendiğinde arka planda 

nolove.mid melodi dosyası çalmaya başlar. Bu melodi tarayıcı içinde bu sayfayı 

görüntülendiği sürece de çalmaya devam eder. Bunun nedeni embed imi içindeki 

autostart ve loop öznitelik değerlerinin true olmasıdır. 

Bu örnekteki tarayıcı içinde oynatıcı görünmemektedir. Daha önceki örnekte 

tarayıcı içinde bir oynatıcı vardı ve bunun üzerindeki butonlar kullanılarak çalınan ses 

kontrol edilebiliyordu. Bu durumda ise tarayıcı içinde herhangi bir oynatıcı görüntüsü 

yoktur. Bunun nedeni embed iminin hidden özniteliğinin kullanılmış olması ve değerinin 

de true olarak verilmiş olması. Bu öznitelik tarayıcının web sayfası içinde görünmez 

olmasını sağlamaktadır. 

171


Bu şekilde arka planda melodi dosyası çalınabileceği gibi diğer muzik dosyaları 

da çalınabilir. Fakat arka planda müzik ya da melodi çalmak birçok kişi için rahatsızlık 

verici olabilir. Onun için arka plana müzik koymadan önce bu konu bütün yönleriyle ele 

alınıp o şekilde karar verilmelidir. Çünkü arka planda çalan müziği kullanıcının tarayıcı 

içinden kapatma imkanı yoktur. Ancak kullanıcı kendi hopörlörünü kapatabilir. Bu da 

kullanıcılara rahatsızlık verebilir. 


Bir web sitesinden indireceğiniz midi dosyalarını hazırlayacağınız bir web 

sayfasının arka planında çalınız? Ayrıca arka planda diğer müzik dosyalarını çalmayı 

deneyiniz? 

8.8 Video Kaydetme 

Video bilgisayar ortamında art arda gelen görüntüler şeklinde kaydedilir [6]. Her 

saniyede duruma göre 15, 20 veya 30 civarında görüntü kaydedilir. Saniyedeki görüntü 

miktarı azaldıkça video kalitesi de düşer. Saniyede 30 civarında görüntü olursa insanlar 

videoyu sürekli bir görüntü şeklinde algılar. Televizyonda da saniyede 24 görüntü 

geçmektedir. Video kalitesinin ikinci bir önemli parametresi de videonun boyutudur. 

Video art arda gelen görüntüler şeklinde olduğu için her görüntünün genişlik ve 

yüksekliğindeki pixel miktarı çok öenmlidir. Pixel miktarı arttıkça görüntü kalitesi artar. 

Fakat dosya boyu da pixel miktarı ile birlikte hızla artar. 

Video bilgisayarda genellikle sesle birlikte aynı dosya içinde saklanır. Çünkü ses 

dosyaları videosuz olabilirken, video dosyaları genellikle sessiz olmaz. Dolayısyla video 

dosyaları görüntü bilgisiyle birlikte ses bilgisini de içerecek şekilde tasarlanmıştır. 

Video dosyaları ham veri halde çok fazla miktarda yer kaplar. Görüntüler bile 

ham veri olarak çok yüksek miktarda yer kaplıyordu. Videoda çok fazla miktarda görüntü 

art arda geldiği için videonun yer ihtiyacı çok daha fazladır. Dolayısıyla videolar 

bilgisayarda genellikle ham veri olarak tutulmaz. Kaydedilen videolar bir sıkıştırma 

algoritmasıyla sıkıştırılır. 

Şimdi Windows Media Encoder programını kullanarak bir videonun nasıl 

kaydedildiğini adım adım görelim. Bunun için öncelikle bilgisayarınızda bir kamera ve 

mikrofon olması gerekmektedir: 

1. Windows Media Encoder programını çalıştırınız? Bu program çalışınca gelen 

küçük pencerede yeni oturum için bir seçim yapmamızı ister. Bu pencerede 

“Capture Audio or Video” seçeneğini seçiniz? Bu ifade “ses veya görüntü 

kaydet” anlamına gelmektedir. 

172


2. Bir sonraki pencerede hem video hem de audio seçeneği seçili olarak Next 

butonuna tıklayınız. 

3. Gelen üçüncü pencerede oluşturulacak dosyanın yerini ve adını veriniz. Dosya 

uzantısı otomatik olarak wmv olarak verilecektir. Next butonuna tıklayınız. 

4. Dördüncü pencerede “Web server (progressive download)” seçeneğini seçiniz. 

Çünkü oluşturulacak olan videoyu daha sonra bir web sayfasına koyacağız. 

Next butonuna tıklayınız. 

5. Beşinci pencerede videonun ve sesin detayına ait bilgiler istenmektedir. Video 

için “VHS Quality Video” seçeneğini, audio için ise “FM Quality Audio” 

seçeneğini seçiniz. Finish butonuna tıklayınız. 

6. Bu aşamada pencere içinde kameradan gelen videoyu görmelisiniz. Windows 

Media Encoder programı Şekil 8-5’te olduğu gibi görünmelidir. Bu noktada 

bütün ayarlar yapılmıştır, fakat henüz kayıt başlamamıştır. Kaydı başlatmak 

için pencerenin yukarısında bulunan ve yeşil renkte olan “Start Encoding” 

yazan butona tıklayınız. Bu andan itibaren kayıt başlamıştır. Mikrofona 

konuşunuz ve bir süre kayıt yapınız? 

7. Kaydı bitirmek için yine pencerenin yukarı tarafında bulunan Stop butonuna 

tıklayınız. Kaydınız başarıyla yapılmıştır. Oluşturulan video dosyasını seçmiş 

olduğunuz dizin içinde kontrol ediniz ve bu dosyayı bir medya oynatıcısı ile 

çalınız? 

Kaydetmiş olduğunuz video dosyasının uzantısı wmv şeklindedir ve sıkıştırılmış 

haldedir. Bu dosya web sayfası içine yerleştirilebilecek durumdadır. Ses kaydında olduğu 

gibi ayrıca sıkıştırılmasına gerek yoktur. Bir sonraki bölümde bu video dosyasını bir web 

sayfası içine yerleştirmeyi göreceğiz. 

173



Şekil 8-5 Windows Media Encoder görüntüsü 

Siz de kendi bilgisayarınızda bir video görüntüsü kaydediniz? Aynı formatta ve 

değişik sürelerde video kaydederek zamana bağlı olarak dosya boylarının nasıl değiştiğini 

gözlemleyiniz? Buna ek olarak video kayıt formatını değiştiriniz? Yukardaki 5. adımda 

yapılan video formatı seçimini değiştirerek hem kaydedilen videonun kalitesini ve 

boyunu, hem de oluşturulan dosya boyunu karşılaştırınız? 

8.9 Video Dosyalarının Web Sayfasında Sunumu 

Videonun web sayfasında sunumu sesin sunumundan farklı değildir. Seste olduğu 

gibi yine imi kullanılır. Şimdi bu işlemin nasıl yapıldığını örnek bir sayfa ile 

görelim. Bu amaçla hazırlanmış bir örnek web sayfası kodu Tablo 8-3’te verilmiştir. 

 

Web Sayfasında Video Sunumu 

 

 

 

Web Sayfası İçinde Video Sunumu 

 

 

 

174


Tablo 8-3 Web sayfasına video yerleştirme örneği 


Şekil 8-6 Web sayfasına video yerleştirme örneği 

Görüldüğü gibi videonun web sayfası içine yerleştirilmesi sesin yerleştirilmesi 

gibidir. Yine imi kullanılmıştır. Tek fark oynatıcı için verilen genişlik ve 

yükseklik değerlerinin video boyuna göre ayarlanmış olmasıdır. Bu örnekte oynatıcı 

genişliği 300, oynatıcı boyu da 300 olarak verilmiştir. Ses sunumu yapılan sayfada 

oynatıcı boyu daha küçüktü. Çünkü o sayfadaki oynatıcı içinde gösterilecek bir görüntü 

yoktu. 


Sizde oluşturmuş olduğunuz video dosyalarını web sayfası içine yerleştiriniz ve 

tarayıcı içinde bu videoları oynatınız? Medya oynatıcısı boyuna farklı değerler vererek 

videoda meydana gelen değişimleri gözlemleyiniz? 

8.10 Başka Sitelerdeki Videoların Web Sayfasına Yerleştirilmesi 

İnternette bulunan video paylaşım sitelerinin bir kısmı, sitelerindeki videoların 

başka web sayfalarında kullanıcıya gösterilmelerine imkan vermektedir. Örneğin Google 

video sitesi video.google.com ve youtube.com siteleri bu şekilde kendi sitelerinde 

bulunan videoların başka sayfalar içinde gösterilmesine imkan vermektedirler. Bu imkanı 

175


kullanan kişiler çektikleri videoları önce bu sitelerden birisine yüklemekte, sonra da 

kendi sitelerindeki sayfalar içinde bu videoları kullanıcılarına göstermektedirler. Bu 

yöntem sitesinde video sunma imkanı sınırlı olan küçük ölçekli firmalar ve kişisel web 

siteleri için uygun bir çözüm olmaktadır. Çünkü videoların boyu genellikle büyük 

olduğundan web sitesinde videolar çok fazla ağ kapasitesi gerektirmektedir. Bu da küçük 

ölçekli kurumlar için extra maliyet oluşturmaktadır. 

Şimdi Google video sitesi video.google.com adresinde bulunan bir videoyu kendi 

sayfamız içine nasıl yerleştirebileceğimizi görelim. Önce bu siteden bir video seçelim. 

Biz örnek olarak bu sitede bulunan “Winning The DARPA Grand Challenge” isimli 

videoyu seçtik. Bu video 

http://video.google.com/videoplay?docid=8594517128412883394&ei=_NOfSsy4O4Ss2wL3ypSaBw&hl=en# 

adresindedir. 

Videoyu seçtikten sonra ikinci olarak yapmamız gereken şey, bu videoyu web 

sayfamıza yerleştirmek için gerekli olan HTML kodunu bu sayfada bulmaktır. Google 

video sayfalarında videonun alt kısmında “Embed Video” diye bir bağlantı 

bulunmaktadır. Bu bağlantıya tıklayınca bir metin alanında sayfamız içine 

yerleştireceğimiz HTML kodu görünür. Bu örnek için bu bağlantıya tıkladığımızda Tablo 

8-4’te görülen kod verilir. Bu kodu kendi sayfamız içine yerleştirerek bu videonun 

sayfamızda görünmesini sağlayabiliriz. 

 

Tablo 8-4 Bir Google videosunu web sayfasına ekleme kodu 

Bu videoyu içinde barındıran bir örnek web sayfası kodu Tablo 8-5’te verilmiştir. 

 

Web Sayfasına Başka Siteden Video 

Ekleme 

 

 

 

Video Ekleme - Google Video 

Bu sayfada Google video paylaşım sitesi video.google.com 

adresindeki "Winning The DARPA Grand Challenge" isimli video 

bulunmaktadır. Bu video Google sunucularında olmasına rağmen 

bizim web sayfamız içinde gösterilmektedir. 

 

176


 

 

 

Tablo 8-5 Bir Google videosunu içinde bulunduran örnek bir web sayfası 


Şekil 8-7 Bir Google videosunu içinde bulunduran örnek bir web sayfası 

Görüldüğü gibi hazırladığımız sayfa içinde Google video sitesinde bulunan video 

görünmektedir. Bu video Google sunucularında bulunmasına rağmen bizim sayfamız 

içinde izlenebilmektedir. Bu şekilde youtube.com gibi bu imkanı veren diğer sitelerdeki 

videolar da başka sayfalar içine yerleştirilebilir. 

Şimdi web sayfamız içine video yerleştirmenin nasıl yapıldığını inceleyelim. 

Öncelikle bizim yaptığımız tek şey Google’ın kendi sitesinde vermiş olduğu HTML 

kodunu kendi sayfamız içine kopyalayıp yapıştırmaktır ve sayfamızın diğer elemanlarını 

ayarlamaktır. Google’ın sağlamış olduğu ve Tablo 8-4’te görülen kod bizim daha önceki 

bölümlerde gördüğümüz imini kullanmaktadır. Bu imin kullanımı bizim önceki 

bölümlerde kullanımımıza benzer fakat bizim daha önce kullanmadığımız bazı yeni 

öznitelikler içermektedir. Ayrıca src özniteliği değeri olarak bu videonun Google 

sunucularındaki tam adresi verilmiştir. Bu özniteliklerden önemli birisi type 

özniteliğidir. Bu öznitelik değeri ”application/x-shockwave-flash” olarak 

verilmiştir. Bu çalınacak videonun flash videosu olduğunu belirtmektedir. 

177



Sizde Google video sitesinden ya da youtube.com gibi bu imkanı veren başka bir 

siteden seçeceğiniz bir videoyu kendi sayfanız içine yerleştiriniz? Aynı sayfaya birden 

fazla videoyu yerleştirmeyi deneyiniz? 

8.11 Flash Videosu Oluşturma ve Web Sayfasına Yerleştirme 

Şu anda web sayfalarında video sunumu için kullanılan en yaygın format flash 

video formatıdır [7]. Bu format özellikle youtube.com ve video.google.com sitelerinin bu 

formatı kullanmasıyla yaygınlaşmıştır. Flash oynatıcısının yaygın olan bütün işletim 

sistemlerinde ve tarayıcılarda çalışması bunda önemli bir etken olmuştur. Ayrıca flash 

oynatıcının performansı ve video sunma kalitesi bu seçimde önemli bir etkendir. 

Bu bölümde flash videosu oluşturmayı ve bu videoyu web sayfası içine 

yerleştirmeyi göreceğiz. Flash teknolojisi Adobe firmasının bir ürünüdür. Bu firmanın 

flash animasyonları ve flash videosu oluşturmak için olan programı “Adobe Flash CS4 

Professional” ürünüdür. Bu program kapsamlı animasyonlar ve video geliştirmek için 

tasarlanmıştır ve kullanımı çok basit değildir. Bundan dolayı biz bu bölümde flash 

videosu oluşturmak için kullanımı daha basit olan ve sadece video amaçlı geliştirilmiş 

olan bir ürünü kullanacağız. Bu ürün “Sothink Video Encoder for Adobe Flash” isimli 

programdır. Bu ürün bedava değildir fakat 30 günlük deneme süresi vardır. Ürünü bu 

deneme süresince bedava kullanabilirsiniz. Bu ürünü 

http://www.sothinkmedia.com/flash-video-encoder/ adresinden indirip bilgisayarınıza 

kurunuz. 

Şimdi Sothink Video Encoder for Adobe Flash programı ile flash videosu 

oluşturmayı adım adım görelim. 

1. Sothink Video Encoder for Adobe Flash programını çalıştırınız? Bu program 

çalışınca ilk gelen pencerede deneme kullanımına devam edip etmeyeceğimizi 

soruyor. Deneme kullanımına devam edeceğimiz için “Continue” butonuna 

tıklayarak bir sonraki adıma geçiniz? 

2. İkinci pencerede flash video dosyasına dönüştürmek için bir video dosyası 

seçmemizi istiyor. Daha önce kaydetmiş olduğunuz bir video dosyasını seçiniz. 

Bu fotoğraf makinanızla çektiğiniz bir video klibi de olabilir. Bu video üzerinde 

değişiklik yapmak isterseniz bu penceredeki “Crop & Trim” butonuna tıklayınız. 

Gelen pencerede video üzerinde değişiklik yapınız. Sonra Next butonuna 

tıklayarak bir sonraki adıma geçiniz. 

3. Üçüncü pencerede üretilecek videonuzun sahip olacağı özellikler 

gösterilmektedir. Bunlardan Profiles kısmında bulunan aşağı açılan menüden hızı 

178


512Kbps olarak seçebilirsiniz. Diğer seçenekler üzerinde bir değişiklik yapmanıza 

gerek yoktur. Sonra Next butonuna tıklayarak bir sonraki adıma geçiniz. 

4. Dördüncü pencerede oluşturulacak olan video ve diğer dosyalarla ilgili bilgiler 

sorulmaktadır. Bu adım sonunda gerekli seçimler yapıldığında program penceresi 

Şekil 8-8’deki gibi gözükür. 

a. Öncelikle Output Directory kısmında üretilecek dosyaların konulacağı 

dizini seçiniz. 

b. Sonra “Generate FLV” seçeneği başındaki radyo düğmesinin seçili 

durumda olduğunu kontrol ediniz. Seçili değilse radyo düğmesini seçili 

hale getiriniz. 

c. “Generate SWF” seçeneği başındaki radyo düğmesinin de seçili olduğunu 

kontrol ediniz. Seçili değilse radyo düğmesini seçili hale getiriniz. Bu 

seçeneğin altında bulunan “Play the created external FLV file 

progressivly” seçeneğini seçiniz. 

d. “Generate HTML” seçeneği başındaki radyo düğmesini seçili hale 

getiriniz. 

e. “Create Thumbnail” seçeneği başındaki radyo düğmesini seçili hale 

getiriniz. 

5. Beşinci adımda gelen pencerede üretilecek oynatıcı penceresinin şeklinin 

seçilmesi istenmektedir. Bunlardan her hangi birisini seçip Next butonuna 

tıklayınız. Bu adım sonunda seçtiğimiz dizinde dört farklı dosyanın üretildiğini 

göreceksiniz. 

Üretilen dört farklı dosyanın hepsinin de ismi aynı olmasına rağmen uzantıları 

farklı olacaktır. Bunlardan flv uzantılı dosya video dosyasıdır. Boyu en büyük olan 

dosya da budur. İkinci önemli dosya swf uzantılı dosyadır. Bu dosya flash oynatıcısının 

görüntü dosyasıdır. Flash oynatıcısının tarayıcı içinde nasıl görünmesi gerektiğini 

tanımlar. Üretilen üçüncü dosya htm uzantılıdır ve örnek web sayfası kodu içerir. Bu web 

sayfası içine üretilen video yerleştirilmiştir. Üretilen dördüncü dosya ise videonun bir jpg 

görüntüsüdür. 

179


Şekil 8-8 Sothink Video Encoder for Adobe Flash programı görüntüsü 

Şimdi üretilen HTML dosyasını inceleyelim ve bu videoyu tarayıcı içinde 

görüntüleyelim. Üretilen HTML belgesi Tablo 8-6’daki gibidir. Bu HTML belgesinde 

sadece video vardır. Başka bir metin yoktur. 

 

 

 

 

 

 

 

 

 

 

Tablo 8-6 İçinde Flash videosu bulunan ve otomatik üretilen web sayfası kodu 


180


Şekil 8-9 Web sayfası içine flash videosu yerleştirme örneği 

Sothink Video Encoder for Adobe Flash programı hem videoyu flash formatına 

çevirir hem de gerekli oynatıcı dosyasını (swf) ve HTML dosyasını oluşturur. Bu yönüyle 

kullanımı gayet kolaydır. Diğer bazı flash videosu üreten programlar sadece flash videosu 

ürtmektedirler ve oynatıcı dosyası üretmemektedirler. Bu da programcının işini 

zorlaştırmaktadır. Ayrıca bir de oynatıcı dosyası oluşturmak için uğraşması 

gerekmektedir. 

Bu tarayıcı şekli içinde gözüken oynatıcı şekli bizim seçimimizin bir sonucudur. 

Flash Video oluşturma adımlarının 5. adımında eğer farklı bir oynatıcı şekli seçseydik, o 

durumda ona göre bir swf dosyası üretilecekti ve tarayıcı içinde de farklı bir oynatıcı 

şekli gözükecekti. 

Flash videosunun web sayfası içine yerleştirilmesini bir önceki bölümde Google 

videosunu yerleştirirken görmüştük. Orada web sayfasına video yerleştirmek için embed 

imi kullanılmıştı. Burada ise önce object imi kullanılmıştır. Object imi içinde ayrıca 

embed imi kullanılmıştır. Sadece embed imi de kulanılabilirdi. Fakat burada üretilen kod 

daha fazla tarayıcı tarafından çalıştırılmaktadır. Dolayısıyla bu web sayfası hem object 

imini destekleyen hem de embed imini destekleyen tarayıcılar tarafından çalıştırılır. 

Sonuç olarak flash videolarını bu şekilde web sayfasına eklemek daha genel bir 

çözümdür. 


Sizde kaydetmiş olduğunuz bir videoyu veya fotoğraf makinanızla çekmiş 

olduğunuz bir video klibini bu bölümde anlatıldığı şekliyle flash videosuna 

dönüştürünüz? Bu videonun web sayfasında görüntülenmesini sağlayınız? 

181


Video dönüştürme işlemini yaparken 5. adımda farklı oynatıcı şekilleri seçerek 

oluşturulan oynatıcının farkını gözlemleyiniz. Web sayfası içinde videonuzunun etrafına 

başka metinler ve başlıklar yerleştiriniz? 

Video dönüştürme işlemini yaparken 3. adımda farklı hızlar seçerek oluşturulan 

video dosyasının boyunu kontrol ediniz? Hangi hızlar için dosya boyutunun nasıl 

değiştiğini gözlemleyiniz? Ayrıca oluşturulan videolar arasındaki kalite farkını 

gözlemlemeye çalışınız? 


[1] Priscilla Oppenheimer, Digitizing Human Vocal Communication, 

http://www.troubleshootingnetworks.com/language.html, 7 Ekim 2009. 

[2] WAV, http://en.wikipedia.org/wiki/WAV, 7 Ekim 2009. 

[3] Audio compression (data), http://en.wikipedia.org/wiki/Audio_compression_(data), 

7 Ekim 2009. 

[4] MP3, http://en.wikipedia.org/wiki/MP3, 7 Ekim 2009. 

[5] Musical Instrument Digital Interface, 

http://en.wikipedia.org/wiki/Musical_Instrument_Digital_Interface, 7 Ekim 2009. 

[6] Digital video, http://en.wikipedia.org/wiki/Digital_video, 7 Ekşm 2009. 

[7] Flash Video, http://en.wikipedia.org/wiki/Flash_Video, 7 Ekim 2009. 

182


Bölüm 9 

9.1 Amaç 

WEB SAYFASI TASARIMI VE 

EDİTÖR KULLANIMI 

Bu bölümde amacımız öncelikle web sayfası tasarımının temel prensiplerinin 

öğrenilmesi ve web sayfası geliştirme için HTML editörü kullanımının kavranmasıdır. 

HTML editörü olarak sık kullanılan editörlerden birisi olan Adobe Dreamweaver CS4 

seçilmiştir. Bu editörü kullanarak önce basit sayfalar oluşturulmuştur. Sonra sayfaya 

başlık ve liste ekleme, arka plan rengi ayarlama, bağlantı oluşturma, görüntü kullanımı, 

tablo kullanımı gibi özellikler işlenmiştir. Daha sonra site oluşturma, şablon oluşturma ve 

şablondan sayfa oluşturma anlatılmıştır. 

9.2 Giriş 

Kaliteli bir web sayfası tasarlamak ve geliştirmek emek ve tecrübe gerektirir. 

Teknik bilginin yanında sanatsal kabiliyet de önemlidir. Fakat bu konuda dikkat edilmesi 

gereken temel konular bilindiği takdirde ciddi hatalar yapılması engellenebilir. Bu 

bölümde önce kaliteli web sayfası tasarımı için dikkat edilmesi gereken konular 

anlatılacak. Daha sonra ise web sayfası editörleri kullanımı gösterilecektir. Birçok farklı 

kaynakta web sayfası tasarımı için farklı prensipler tavsiye edilmiştir[1, 2, 3]. Biz bu 

prensiplerden 6 tanesini aşağıdkai gibi seçtik. 

9.3 Web Sayfası Tasarımı Prensipleri 

Amaç 

183


Bir web sayfası tasarlanırken öncelikle bu web sayfasının amacı iyi 

belirlenmelidir. Bu web sayfasının hedef kitlesi iyi tespit edilmelidir. Bu web sayfası 

kimler tarafından kullanılacaktır ve kullanıcılar web sayfasından nasıl faydalanacaktır. 

Genellikle amaç çok ziyaret edilen ve hatta ziyaret edenlerin başkalarına da tavsiye ettiği 

bir web sayfası tasarlamaktır. Çünkü böyle bir web sayfası, birçok maddi ve manevi 

kazanç sağlar. 

İçerik 

Web sayfalarının çok insan tarafından ziyaret edilmesi öncelikle web sayfalarının 

içeriğiyle ilgilidir. Bir web sayfasındaki bilgiler kullanıcıların ihtiyaçlarını görüyorsa, 

onları bilgilendiriyor veya eğlendiriyorsa, bu durumda kullanıcılar hem bu sayfayı tekrar 

ziyaret edecek hem de başkalarına tavsiye edecektir. Dolayısıyla web sayfalarındaki 

içerik mümkün olduğunca anlaşılır, doğru ve doyurucu olmalıdır. Gereksiz ve yanlış 

bilgiden kaçınılmalıdır. 

Sadelik 

Web sayfası tasarımında lüzumsuz karmaşıklıktan kaçınılmalıdır. Web sayfaları 

kullanıcılara bilgileri en sade ve öz olarak vermelidir. Web sayfası içeriği hazırlanırken 

hedef kullanıcı kitlesinin anlayabilme kapasitesi sürekli göz önünde bulundurulmalıdır. 

Kolay Kullanılırlık 

Web sayfalarının kullanımı mümkün olduğunca kolay olmalıdır. Bunun için 

öncelikle iyi bir menü tasarımı ile web sayfası mantıklı alt bölmelere ayrılmalıdır. 

Menülerin isimleri açıklayıcı ve net olmalıdır. Buna ek olarak web sayfasında istenilen 

bir bilginin bulunabilmesi için arama hizmeti sağlanmalıdır. 

Hız 

Web sayfaları hızlı olmalıdır. Bir web sayfası mümkün olan en kısa surede 

açılmalıdır. Bu hem web sunucusunun hızı ile hem de web sayfasının içeriği ile ilgilidir. 

Web sayfasında gereksiz bilgiler ve özellikle de gereksiz resimler olmamalıdır. Aynı 

sayfadan çok fazla resim bulundurmaktan kaçınılmalıdır. Çünkü her bir resim dosyası 

ayrı bir http istemiyle sunucudan indirildiği için, aynı sayfadaki fazla sayıdaki resim web 

sayfasının performansını ciddi manada azaltabilir. 

Fontlar 

Web sayfalarında kullanılan fontlar kolay okunabilen türde olmalıdır. Web 

sayfasında çok farklı türden fontlar kullanılmamalıdır. Kullanıcı web sayfasını okurken 

dikkati dağılmamalıdır. Diğer yandan fontların rengi ile sayfanın arka plan rengi birbirine 

184


yakın olmamalıdır. Yazının kolay okunabilmesi için yazı arka plan üzerinde net bir 

şekilde görülmelidir. Bu da yazının renginin arka plan renginden çok açık veya çok koyu 

olmasıyla sağlanabilir. 

Hatasız Çalışma 

Web sayfalarında hata olmamalıdır. Bir web sayfası içindeki HTML elemanları 

HTML kurallarına uygun bir şekilde kullanılmadır. Web sayfaları bütün tarayıcılarda 

aynı şekilde çalışmalıdır. Bunu garantilemenin en kolay yolu ise HTML kurallarına 

uymaktır. Bir web sayfasının HTML kurallarına uygunluğu bir HTML doğrulayıcı 

(validator) ile kontrol edilebilir. W3C kurumu HTML belgelerinin doğruluğunu kontrol 

için http://validator.w3.org/ adresinde bir HTML doğrulayıcı sağlamaktadır. Yazılan web 

sayfaları web sitelerinde yayınlanmadan önce doğrulanmalıdır. 

9.4 HTML Editörleri 

HTML belgeleri herhangi bir metin editörüyle yazılabilir. Örneğin en basit metin 

editörlerinden biri olan Notepad programı kullanılarak HTML sayfaları oluşturulabilir. 

Fakat HTML sayfası oluşturmayı kolaylaştırmak için birçok HTML editörü 

geliştirilmiştir. Bu editörler HTML sayfası oluşturmayı kolaylaştırmak için birçok özellik 

sunarlar. 

9.2.1 HTML Metin Editörü 

HTML editörlerinin sunmuş oldukları özelliklerden ilki HTML imleri yazmayı 

kolaylaştırmaktır. Bu tip editörlere HTML metin editörü denir. Örneğin bu editörler bir 

sayfa içindeki HTML imlerini diğer metinlerden farklı bir renge boyarlar. Böylelikle 

sayfadaki HTML imlerinin programcı tarafından kolayca görülmesi sağlanır. Buna ek 

olarak birçok HTML metin editöründe kod tamamlama özelliği vardır. Örneğin bir 

programcı imini yazınca, daha sonra bu imi kapama noktasına gelinip < işaretçi 

yazılınca, HTML metin editörü bu kodu tamamlamak için kullanıcıya yardım eder. 

Bunlara ek olarak yazılan bir HTML belgesinin tarayıcıda nasıl gözüktüğünü anlamak 

için de sayfamızı ayrı bir tarayıcı penceresinde açmamıza gerek yoktur. HTML editörleri 

sayfayı tarayıcı içinde bir tuşa basarak gösterebilir. 

9.2.2 WYSIWYG Editörü 

HTML editörlerinin sunmuş oldukları ikinci önemli bir özellik ise HTML kodu 

üretmektir. Bu durumda kullanıcı web sayfasını tarayıcı içinde nasıl gözükecekse o 

şekilde yazar. HTML imlerini yazmaz. Arka planda HTML editörü bu sayfa için HTML 

imlerini üretir. Bu şekilde web sayfası geliştirmek çok daha kolaydır. Hatta HTML 

imlerini hiç bilmeyen kişiler bile bir web sayfası oluşturabilir. Bu tip editörlere 

İngilizcede WYSIWYG editörü denilmiştir [4]. Bu kısaltma İngilizce bir cümlenin 

kelimelerin ilk harflerinden oluşmaktadır. Bu cümle şudur: What You See Is What You 

185


Get. Bunun anlamı “ne görüyorsan, onu elde ediyorsun” şeklinde verilebilir. Yani yazım 

ekranında gördüğün şey, tarayıcı içinde göreceğin sayfa oluyor. Yazım ekranında HTML 

imleri görünmüyor. Sadece sayfanın son hali görünüyor. 

Bu iki tip özelliğe ek olarak HTML editörleri web sayfalarının web sunucularına 

yüklenmesi için de bazı kolaylıklar sağlarlar. Kullanıcı her bir web sayfasını web 

sunucusuna tek tek aktarmak zorunda değildir. Editörler bir sitedeki bütün dosyaları veya 

üzerinde değişiklik yapılmış olan dosyaları web sunucusuna aktarırlar. 

9.5 HTML Editörü Programları 

Şu anda piyasada birçok HTML editörü bulunmaktadır. Bunların farklı özellikleri 

ve ücretleri vardır. Bunlardan bedava olan bazıları şunlardır: SeaMonkey, Nvu ve 

Amaya. Ücretli olup yaygın olarak kullanılan HTML editörlerinden birisi Adobe 

Dreamweaver CS4 editörüdür [5]. Bu bölümde örnek olması acısından bu editörünün 

kullanım şeklini ve özelliklerini inceleyeceğiz. Benzer özellikler diğer editörler 

tarafından da sunulmaktadır. Fakat, her editörün kendisine göre bazı farkları da vardır. 

9.6 Adobe Dreamweaver CS4 

Adobe Dreamweaver CS4 editörü Adobe firmasının bir ürünüdür. Şu anda en sık 

kullanılar HTML editörlerinden biridir. HTML editörlerinin sağlamış olduğu bütün temel 

özellikleri desteklemektedir. HTML kodu yazmanın yanında PHP, ASP, JSP, CSS, 

JavaScript, XML gibi web sayfası içinde kullanılabilecek birçok teknolojisi 

desteklemektedir. Şu anda bu ürünün en son versiyonu Dreamweaver CS4 versiyonudur. 

Bu ürün ücretlidir. Fakat bir aylık deneme süresince bedava kullanılabilir. Bu ürünün web 

sayfası http://www.adobe.com/products/dreamweaver/ adresidir. Bu sayfadan ürünün 

deneme versiyonu indirilebilir ve bir ay süresince bedava kullanılabilir. 

9.7 Dreamweaver CS4 ile bir Sayfa Oluşturma 

edilir: 

Dreamweaver CS4 ile yeni bir site ve sayfa oluşturmak için şu adımlar takip 

1. Dreamweaver CS4 programını çalıştırınız? 

2. File (Dosya) menüsünden New (Yeni) seçeneğini seçiniz. Bu durumda Şekil 

9-1’deki pencere gelir. Bu pencerenin en solundaki seçeneklerden “Blank page” 

yani boş sayfa seçeneğini seçiniz? Ortadaki “Page Type” kısmından en üstteki 

“HTML” seçeneğini seçiniz? Layout kısmından ise seçeneğini seçiniz? 

Create butonuna tıkladığınızda boş bir HTML sayfası oluşturulur. 

186


Şekil 9-1 Dreamweaver CS4 ile boş bir sayfa oluşturma penceresi 

3. Bu noktada bir sayfa oluşturuldu. Ama henüz bu sayfada hiçbir şey yoktur. Bu 

durumda Dreamweaver CS4 editörü Şekil 9-2’deki gibi gözükür. 

Şekil 9-2 Dreamweaver CS4 ile oluşturulmuş boş bir sayfa 

Dreamweaver CS4 Editörü Modları: Design, Split, Code 

Dreamweaver CS4 editörünün 3 farklı modu vardır. Bu modların isimleri editör 

penceresinin sol üst köşesinde gözükmektedir. Bunlar sırasıyla: Code (HTML Kodu), 

Split (Bölmeli) ve Design (Tasarım). Yukarıdaki görünen pencerede editör bölmeli yani 

187


split modundadır. Bu modlar arasında gidiş geliş yapmak için editör penceresideki mod 

isimleri üzerine tıklamak yeterli olur. 

HTML Kod (Code) Modu 

Bu modda editör HTML kodu yazma modundadır. Sayfadaki bütün HTML imleri 

gösterilir. Programcı sayfaya ekleyeceği şeyleri HTML imileriyle birlikte ekler veya 

sileceği bilgileri HTML imleriyle birlikte siler. Bu modda iken Dreamweaver editörü 

HTML imlerini farklı renkte, sayfadaki metinleri ise farklı bir renkte gösterir. Bu HTML 

kodu yazmayı kısmen kolaylaştırır. Ayrıca editörün HTML kodlarını tamamlama özelliği 

vardır. Örneğin açılış imini programcı yazdığında, kapanış imini yazarken editör 

gerisini tamamlar. Dolayısıyla Dreamweaver editörü HTML kodları yazmak için bu iki 

şekilde kolaylıklar sağlar. 

Tasarım (Design) Modu 

Bu mod Dreamweaver editörünün WYSIWYG modudur. Yani bu modda HTML 

imleri yazılmaz. Sadece web sayfası kullanıcıya nasıl gözükmesi gerekiyorsa o şekilde 

bir sayfa oluşturulur. Dreamweaver editörünü bu modda kullanmak Microsoft Word ile 

tecrübesi olanlar için zor olmaz. Sayfanın alt bölmesindeki menüden fontların tipleri, 

büyüklükleri, yatay düzlemdeki pozisyonları, vb. Microsoft Word’de olduğuna benzer 

şekilde ayarlanır. Dreamweaver editörü yapılan her işlem için eğer gerekiyorsa arka 

planda HTML kodu üretir. 

Bölmeli (Split) Modu 

Dreamweaver editörü bu modda sayfayı ikiye böler. Üst kısımda sayfanın HTML 

kodunu gösterir. Alt kısımda ise sayfayı tasarım modunda gösterir. Programcı her iki 

bölmeyi de kullanarak sayfaya ekleme veya çıkarma yapabilir. Şekil 9-2’deki editör bu 

moda görünmektedir. Üst tarafta bazı HTML kodları gözükmektedir. Bu kodlar sayfanın 

genel yapısıyla ilgili kodlardır. Sayfada henüz hiçbir içerik yoktur. Onun için alt kısımda, 

yani tasarım kısmında herhangi bir şey gözükmemektedir. Bu modda programcı alt 

kısımda yaptığı değişiklikler için üst tarafta HTML kodu üretildiğini her işlem için görür. 

Live View (Canlı Görüntü) Modu 

Editör içinde üç tane mod butonunun sağında “Live View” butonu 

bulunmaktadır. Bu butona tıklanıldığında editör tasarım modundan görüntü moduna 

geçer. Yani sayfa tarayıcı içinde nasıl gözükecekse, tasarım modunda da o şekilde 

gösterilir. Bu modda tasarım kısmında sayfa üzerinde değişiklik yapılamaz. Bu mod 

sayfayı görüntülemek içindir. Fakat HTML kod kısmında sayfada değişiklik yapılabilir. 

Live View butonunun yanında bir de “Live Code” butonu vardır. Bu buton sadece Live 

View moduna geçildiğinde aktif olur. Bu butona tıklanıldığında sayfa tamamen 

188


değişikliklere kapanır. Artık sayfa üzerinde HTML kod kısmında da değişiklik 

yapılamaz. Değişiklik yapmak için bu moddan çıkmak gerekir. 

9.8 Dreamweaver ile Sayfaya Başlık, Paragraf ve Liste Ekleme 

Şimdi bu sayfaya bir başlık ve bir de paragraf ekleyelim. Ekleme işlemini bölmeli 

modda yapalım. Bölmeli modda eklemeyi tasarım kısmında yapalım. Böylece bizim 

yaptığımız her bir değişiklik için nasıl HTML kodu üretildiğini görelim. 

Bunun için şu adımları takip ederiz: 

Sayfanın ilk satırına “Mersin” kelimesini yazınız ve enter tuşuna basarak ikinci 

satıra geçiniz. 

1. İkinci adımda Mersin kelimesini seçiniz. Bu kelime seçili iken editörün alt 

kısmında bulunan PROPERTIES bölgesinden Format özelliğinin değerini 

“paragraph” yerine “Heading 1” olarak seçiniz. Bu işlemi yaptığınızda Mersin 

metninin büyüdüğünü ve HTML kod kısmında Mersin metninin imi içine 

konulduğunu göreceksiniz. 

2. Bu adımda ise Mersin başlığı altına bir metin ekleyelim. Bu metin şöyle bir metin 

olabilir: “Mersin Türkiye’nin güneyinde, Akdeniz sahilinde güzel bir şehirdir.” 

Eklediğiniz bu metnin bir paragraf yapıldığını HTML kod kısmında 

gözlemleyiniz. 

3. Bu adımda alt satıra geçiniz ve “Mersinin İlçeleri” ifadesini yazınız? 

4. Sonra her birisi yeni bir satırda olacak şekilde “Silifke”, “Anamur” ve “Tarsus” 

yazınız? Bu üç satırı yani Silifke, Anamur ve Tarsus kelimelerinin olduğu satırları 

seçiniz ve aşağıdaki PROPERTIES bölgesinde bulunan maddeleme butonuna 

basınız. Bu butona basınca her bir ilçe adının bir madde olarak görüntülendiğini 

göreceksiniz. Aynı zamanda HTML kod bölümünde bir sırasız liste 

oluşturulduğunu göreceksiniz. Bir tane imi ve bu im içinde her bir liste 

elemanı için de imleri oluşturulacaktır. 

5. “Mersinin İlçeleri” metnini seçiniz ve bu metnin tipini Heading 3 yapınız? Bu 

durumda da yine HTML kod kısmında bu metin etrafındaki paragraf imleri gider 

ve yerine imleri gelir. 

Bu haliye sayfamız Dreamweaver editörü içinde Şekil 9-3’teki gibi gözükür. 

189


Şekil 9-3 Dreamweaver editörü içinde bölmeli modda içerik geliştirme 

Web Sayfasını Kaydetme 

Artık bu web sayfası kaydedilebilir durumdadır. Dreamweaver editörünün File 

(Dosya) kısmından Save (Kaydet) seçeneği seçilerek bu dosya istenilen dizine istenilen 

bir isimle kaydedilir. 

Sayfa Başlığı 

Bu sayfaya henüz bir başlık vermedik. Bunun için editör içinde yukarı menü 

kısmında Title özelliğinin yanında “Untitled Document” görünmektedir. Bu kısma 

istediğimiz bir metni yazarak sayfa başlığını ayarlayabiliriz. Ayrıca HTML kod kısmında 

bulunan imi arasındaki metni değiştirerek sayfa başlığı ayarlanabilir. 


Bu örnekte olduğu gibi bir sayfa geliştiriniz? Sayfanızın içinde başlıklar, 

paragraflar ve listeler olsun. Sayfayı geliştiriken değişiklikleri hem tasarım penceresinde 

hem de HTML kod penceresinde yaparak deneyiniz? Örneğin bir başlık ekleyecekseniz, 

önce HTML kod kısmında HTML imlerini kullanarak ekleyiniz. Sonucu görünüz. Daha 

sonra tasarım penceresinde aynı işlemi yapınız. Bu iki kısmı birlikte kullanma konusunda 

örnekler yapınız? Ayrıca sıralı liste uygulamaları yapınız? Buna ek olarak iç içe liste 

uygulaması yapınız? Eğer editör ekranında bazı seçenekleri bulamazsanız, fareyle sağ 

tıklayıp, bu özellikleri bulmayı deneyebilirsiniz. Ayrıca editör penceresinin üst 

kısmındaki menü elemanlarını da kullanabilirsiniz. 

190


9.9 Arka Plan Rengi Ayarlama 

Şimdi aynı web sayfasının arka plan rengini ayarlayalım. Bunun için bölmeli 

modda devam edelim. Tasarım penceresi kısmından arka plan rengi ayarlamak için şu 

adımlar takip edilir: 

1. Bu sayfanın alt kısmında bulunan PROPERTIES panelinde Page Properties 

(Sayfa Özellikleri) diye bir buton bulunmaktadır. Bu butona tıklayınız? 

2. Bu durumda ekrana Şekil 9-4’teki küçük pencere gelir. Bu pencerede sayfa ile 

ilgili birçok özellik vardır. Bunlardan birisi de arka plan rengidir. Arka plan rengi 

ayarlamanın da iki farklı metodu vardır. Birisi CSS kullanmak, diğeri de HTML 

kullanmaktır. 

3. CSS kullanarak arka plan rengini ayarlamak için önce pencerenin sol tarafında 

bulunan “Category” listesinden “Appearance (CSS)” seçeneği seçilir. Daha 

sonra pencerenin orta kısmında bulunan Background color seçeneği yanındaki 

küçük ok işaretine tıklanır. Bu durumda kullanıcının seçmesi için Şekil 9-4’teki 

gibi bir renk seçme kısmı gelir. Bu alandan istenilen renk seçilir ve OK butonuna 

tıklanır. Bu işlem sonunda sayfa kaynak kodunda bir CSS kuralı yazıldığı görülür. 

Bu kural sayfanın arka plan rengini ayarlar. 

4. Aynı işlem HTML kodu kullanılarak ta yapılabilir. Bu durumda önce Category 

listesinden “Appearance (HTML)” seçeneği seçilir. Daha sonra yine benzer 

şekilde Background color seçeneği ile arka plan rengi ayarlanır. Bu durumda 

sayfanın HTML kodunda CSS kuralı yazılmaz. Sadece body iminin bgcolor 

öznitelik değeri ayarlanır. 

Şekil 9-4 Arka plan rengi ayarlama penceresi 

191


Diğer bir ihtimal de arka planda bir görüntü dosyası kullanmaktır. Bunun için 

yine Page Properties penceresi kullanılır. Görüntü de arka plana hem CSS ile hem de 

HTML ile eklenebilir. Bu durumda arka plana eklenilecek dosya Bakground image 

seçeneği kısmından seçilerek eklenir. 

Arka plan rengi ayarlandıktan sonra web sayfası, editör içinde Şekil 9-5’deki gibi 

gözükür. Bu sayfanın HTML kod kısmında body iminin bgcolor özniteliği değerinin 

#00CC99 olarak verildiğine dikkat ediniz. 

Şekil 9-5 Arka plan rengi ayarlanmış bir sayfa 

Page Properties penceresi kullanılarak sayfanın arka plan rengine ek olarak, 

CSS veya HTML ile sayfada kullanılan metnin varsayılan font çeşidi, boyu ve rengi 

ayarlanabilir. Ayrıca sayfanın etrafında yani solunda, yukarısında, sağında ve aşağısında 

bırakılacak boşluk miktarı ayarlanabilir. Bu özellikleri kullanmayı sonraki bölümlerde 

inceleyeceğiz. 


Hazrılamış olduğunuz bir sayfanın arka plan rengini hem CSS hem de HTML 

kullanarak ayarlayınız? Her iki durumda da üretilen kodu inceleyiniz? Buna ek olarak 

arka plan rengini bir görüntü kullanarak ayarlayınız? Görüntüyü de hem HTML hem de 

CSS kullanarak arka plana ekleyiniz? Her iki durumda da üretilen kodu inceleyiniz? 

9.10 Sayfa Marginini Ayarlama 

Şimdi Dreamweaver editörü ile bir sayfanın marginini yani HTML belgesi içindeki 

elemanlar ile tarayıcı penceresi duvarları arasındaki boşluk miktarını ayarlamayı görelim. 

192


Öncelikle bir ana başlık, iki paragraf ve bir alt başlıktan oluşan bir sayfa oluşturalım. Bu 

sayfa ilk haliyle Şekil 9-6’daki gibi olsun. 

Şekil 9-6 Font ayarı yapılmamış örnek sayfa 

Bu örnekte sayfa içindeki elemanların sadece sol ve sağ pencere duvarına olan 

uzaklıklarını ayarlayalım. Bu düzenleme bütün sayfa için geçerli olacağı için bu işlem 

sayfa özellikleri (Page Properties) kısmından yapılır. 

Editör tasarım modunda iken Page Properties butonuna tıklayınız. Gelen 

pencerede Categories bölümünde Appearance (CSS) seçeneğini seçiniz. Sonra bu 

pencerenin sağ tarafında bulunan “Left margin” özelliği değeri olarak “1” yazınız ve 

birimi olarak ta “cm” seçeneğini seçiniz. Benzer şekilde “Right margin” özelliği değeri 

olarak “1” yazınız ve birimi olarak ta “cm” seçeneğini seçiniz. Böylece bu iki seçenek ile 

sayfanın sol ve sağ tarafında bırakılacak boşluk miktarı 1cm olarak belirlenmiş oldu. Bu 

ayarlamalardan sonra sayfamız Şekil 9-7’deki gibi gözükür. Artık bu sayfada metinler bir 

önceki pencerede olduğu gibi tamamen pencere duvarına soldan ve sağdan yanaşık 

değildir. Artık metinler ile pencerenin sol ve sağ duvarları arasında yaklaşık 1cm 

miktarında boşluk vardır. 

193


Şekil 9-7 Margin değerleri ayarlanmış bir sayfa 

Şimdi bu işlemin kaynak kodunda nasıl gerçekleştirildiğini inceleyelim. Kaynak 

kodunu kontrol ettiğimizde şu şeklide bir CSS kodu üretildiğini görürüz: 

body { 

margin-left: 1cm; 


} 

Bu kod HTML belgesinin gövde kısmının pencerenin solundan ve sağından olan 

uzaklığını 1cm olarak ayarlamıştır. 


Hazırlayacağınız bir sayfanın marginlerini ayarlayınız? Sayfanın bütün 

marginlerini (sol, sağ, üst ve alt) ayarlamayı deneyiniz? Bu marginleri ayarlarken farklı 

büyüklük birimlerini kullanınız? Pixel, inch, cm, mm, pico gibi uzaklık birimlerini 

deneyiniz? 

9.11 Metin Font Özellikleri Ayarlama 

Şimdi Dreamweaver editörü ile bir sayfadaki normal metinlerin varsayılan fontunu, 

bazı paragrafların ve başlıkların font özelliklerini ayarlamayı görelim. Bu işlemleri bir 

önceki bölümde hazırlamış olduğumuz sayfa üzerinde yapmaya devam edelim. 

Bir sayfadaki normal metinlerin font düzenlemesi sayfa özellikleri penceresinden 

yapılır. Bunun için Page Properties butonuna tıklayınız. Gelen küçük pencerede CSS 

kategorisi seçiniz. Bu pencerenin sağ tarafında bulunan özellik değerlerini ayarlayarak 

font ayarı yapılır. Page font özelliği değeri olarak “Tahoma, Geneva, sans-serif” 

194


seçiniz. Font büyüklüğü için “Size” özelliği değerini “12pt” yapınız? Bu seçimlerden 

sonra sayfa Şekil 9-8’deki gibi olur. Görüldüğü gibi artık sayfa içindeki metinlerin fontu 

değişmiştir. 

Şekil 9-8 Font ayarı yapılmış örnek sayfa 

Bu işlem kaynak kodunda yine bir CSS kuralı yazılarak gerçekleştirilmiştir. Bu 

kural aşağıdaki gibi üretilmiştir: 

body,td,th { 

font-family: Tahoma, Geneva, sans-serif; 


color: #000; 

} 

Bu kod HTML belgesinin gövdesindeki metinlerin ve ayrıca varsa tabloların 

içindeki metinlerin fontunu istenilen şekilde ayarlamıştır. 

Bir Başlığın Fontunu Değiştirme 

Şimdi bu belgedeki alt başlığın fontunu değiştirelim. Bunun için editör tasarım 

modunda iken alt başlığı yani “Omurgasızlar” metnini seçiniz. Fare seçili metni 

gösterirken sağ tıklayınız ve gelen listeden “Font” seçeneği üzerine geliniz. Bu durumda 

yeni bir liste daha gelir. Bu listeden de “Arial, Halvetica, sans-serif” seçeneğini 

seçiniz. Bu seçimden sonra yeni bir pencere gelir. Bu pencere yeni CSS kuralı yazma 

penceresidir ve Şekil 9-9’daki gibidir. 

195


Şekil 9-9 Yeni CSS kuralı yazma penceresi 

CSS kuralı yazma bölümünden de hatırlanacağı gibi CSS kuralı HTML imleri için, 

bir sınıfa ait olan HTML elemanları veya id özniteliği olan bir HTML elemanı için 

yazılabiliyordu. İşte bu pencerede öncelikle CSS kuralınının ne için yazılacağı 

sorulmaktadır. Bu da “Selector Type” olarak ifade edilmiştir. Bu kısımda biz “Tag” 

yani im seçeneğini seçebiliriz. Bu seçimi yaptığımız takdirde “Selector Name” olarak 

h3 gelir. Çünkü bu alt başlığın imi h3 imidir. Sonra OK butonuna tıklayarak CSS kuralını 

oluştururuz. Oluşturulan CSS kuralı kaynak kodunda şu şekilde gözükür: 

h3 { 

font-family: Arial, Helvetica, sans-serif; 

} 

Görüldüğü gibi bütün h3 tipi başlıkların fontu ayarlanmıştır. Şimdi aynı font 

ayarlama işlemini sadece bu başlık için yapalım. Yani belge içinde başka h3 tipi başlıklar 

varsa, onların fontunu değiştirmeyelim. Bu işlem için yine Omurgasızlar metnini seçiniz. 

Sonra fare ile sağ tıklayınız ve font seçeneği üzerine geliniz. Daha sonra da açılan 

menüden “Georgia, Times New Roman, Times, serif” seçeneğini seçiniz. Bu 

durumda yine yeni CSS kuralı yazma penceresi gelecektir. Bu defa “Selector Type” 

olarak “ID” seçeneğini seçiniz. Sonra “Selector Name” olarak bu HTML elemanını 

tanımlayan bir isim vermemiz gerekir. Bu HTML elemanının ismi olarak “b2” 

verebiliriz. Sonra OK butonuna basarak CSS kuralını oluşturunuz. Oluşturulan CSS 

kuralı kaynak kodunda şu şekilde gözükür: 

#b2 { 

font-family: Georgia, Times New Roman, Times, serif; 

} 

196


Öncelikle kaynak kodunda bu alt başlığın “Omurgasızlar” 

şeklinde tanımlandığını görürüz. Yani bu alt başlığa b2 ismi verilmiştir. Daha sonra da bu 

alt başlığa özel CSS kuralı yazılmıştır. 


Hazırlayacağınız bir sayfanın içindeki bir alt başlığın rengini ayarlayınız? Bu işlemi 

bir CSS kuralı yazarak gerçekleştiriniz? Renk ayarlamak için önce editör penceresinin en 

üstündeki Format menüsüne gidiniz. Bu menüde bulunan Color seçeneğini seçiniz? 

Sonra gelen pencerede bir renk seçimi yapınız? Bir sonraki adımda yeni CSS kuralı 

yazma penceresi gelecektir. O pencerede gerekli seçimleri yaparak CSS kuarlını 

oluşturunuz? 

Bu örnekte olduğu gibi renk ayarlama işlemi için CSS oluşturmayı, hem html imi 

kullanarak hem de id kullanarak iki farklı şekilde yapınız? 

9.12 Bağlantı Oluşturma 

Dreamweaver editörü ile bağlantı oluşturmak için editör penceresinin sağ tarafında 

bulunan “insert” panelindeki “hyperlink” butonu kullanılır. Bu panel Şekil 9-10’daki 

gibidir. Bu panelde web sayfasına eklemek için birçok eklenti vardır. Bunlardan birisi de 

Hyperlink nesnesidir. Bu panelde ayrıca sayfaya resim eklemek için image butonu, 

video veya flash animasyonu eklemek için media butonu, tablo eklemek için table 

butonu, div elemanı eklemek için div butonu, ve diğer bazı eklenti seçenekleri vardır. 

İlerleyen bölümlerde bunlardan bazılarının kullanımlarını göreceğiz. 

Şekil 9-10 Dreamweaver editorü insert paneli 

197


Şimdi bağlantı oluşturmayı görelim. Bağlantı oluşturmak için önce bağlantının 

oluşturulacağı metin seçilir. Sonra insert panelinden hyperlink butonuna tıklanır. Biz bu 

sayfadaki işlemleri yapmak için de bir önceki bölümde kullanmış olduğumuz sayfayı 

kullanmaya devam edelim. Önce ilk paragraftaki nöron kelimesini seçiyoruz. Sonra 

hyperlink butonuna tıklıyoruz. Hyperlink butonuna tıklanınca Şekil 9-11’deki küçük 

pencere gelir. Bu penceredeki Text elemanı bağlantının yapılacağı metindir. Bu örnekte 

bu metin nöron metnidir. İkinci eleman Link elemanıdır. Bu da bağlantının yapılacağı 

adresi gösterir. Bu örnekte bağlantıyı 

http://tr.wikipedia.org/wiki/Sinir_hücresi adresine yaptık. Target seçeneği 

eğer bağlantı yeni bir tarayıcı penceresinde açılacaksa _blank olarak verilir. Bu örnekte 

biz bu değeri boş bırakıyoruz. Title elemanı ise bağlantının üzerine fare ile gelindiğinde 

gözükecek metni ayarlar. Bu durumda bir bu metni Sinir Hücresi olarak verdik. Sonra 

OK butonuna tılayarak bağlantı oluşturulur. 

Şekil 9-11 Bağlantı oluşturma 

Bağlantı oluşturulunca sayfa kodunda bu bağlantı için kod üretilir. Sayfa kodunu 

incelediğimizde bu bağlantı için şu şekilde bir imi oluşturulduğunu görürüz: 

nöron 

Bağlantı Kaldırma 

Bir bağlantı oluşturulduktan sonra eğer o metinden bağlantı kaldırılmak istenirse, 

fare bağlantıyı gösterirken sağ tıklanır. Gelen menüden Remove Link seçeneği seçilir. 

Bu işlem o metinden bağlantıyı kaldırır. 

Göreli Bağlantı Oluşturma 

Bağlantılarla ilgili bir diğer konu da aynı site içindeki sayfalara bağlantı 

oluşturmaktır. Bu işlem için bağlantı pencereseinde Link değeri olarak tam bir URL 

adresi yazılmaz. Bunun yerine bu özelliğin sağında bulunan dosya işaretine tıklanarak, 

dosya sisteminden bağlantı yapılacak dosya seçilir. Bu şekilde site içindeki başka bir 

belgeye göreli bir bağlantı oluşturulur. 

198


Properties Paneli 

Dreamweaver editöründeki önemli bir diğer paneli Properties panelidir. Bu 

panel editörün alt tarafında bulunmaktadır. Bu panel aktif olan HTML elemanının 

özelliklerini gösterir ve bu özelliklerin değiştirilmesine imkan verir. Eğer bizim 

sayfamızda yeni oluşturmuş olduğumuz bağlantı için nöron kelimesinin üzerine fare ile 

gelir ve tıklarsak, bu durumda Properties paneli Şekil 9-12’deki gibi olur. Bu panelde 

oluşturmuş olduğumuz bağlantının bütün özellikleri görülmektedir. Bu özellikler bu 

panel kullanılarak değiştirilebilir. 

Benzer şekilde Properties panel hangi HTML elemanı aktif olursa o elemanın 

özelliklerini gösterir ve o elemanın özelliklerinin değiştirilmesine imkan verir. Örneğin 

bir başlık elemanı aktif olursa o başlığın özelliklerini gösterir. Ya da bir görüntü aktif 

olursa, o görüntünün özelliklerini gösterir. 


Şekil 9-12 Bağlantı hedef adresi ayarlama penceresi 

Oluşturmuş olduğunuz web sayfasında iki farklı bağlantı yapınız? Bu 

bağlantılardan birisi bir web sitesindeki bir sayfaya olsun. Diğeri ise siteb içindeki başka 

bir belgeye göreli bağlantı olsun. Ayrıca bağlantılardan birisine tıklanıldığında hedef 

sayfa yeni bir pencerede açılsın. Buna ek olarak bağlantı oluşturduktan sonra bir 

bağlantıyı tekrar kaldırmayı deneyiniz. Bu işlemleri yaparken HTML kodunda meydana 

gelen değişiklikleri gözlemleyiniz. 

9.13 Sayfaya Görüntü Ekleme 

Dreamweaver editörü ile bir sayfaya görüntü eklemek için editör penceresinin 

sağında bulunan insert panelindeki image butonu kullanılır. Görüntü eklemeye ek 

olarak görüntünün boyunu ayarlamak, görüntü etrafındaki tampon bölge büyüklüğüne 

belirlemek ve görüntüden bağlantı oluşturmak için de Dreamweaver editörü programcıya 

birçok kolaylık sunar. 

Şimdi adım adım görüntü eklemenin detaylarını inceleyelim. Bu bölümde de bir 

önceki bölümde üzerinde çalışmış olduğumuz sayfayı kullanmaya devam edelim. 

Öncelikle eklenecek olan görüntüyü tespit etmemiz gerekmektedir. Sayfaya 

199


ekleyeceğimiz görüntüyü http://tr.wikipedia.org/wiki/Sinir_hücresi adresinden aldık. Bu 

görüntü Şekil 9-13’teki gibidir. Bu bir png dosyasıdır ve boyutları 400 x 215 pixeldir. 

Şekil 9-13 Web sayfasına eklemek için örnek görüntü (Sinir hücresi görüntüsü) 

Bu görüntüyü web sayfamıza eklemek için önce fare imlecini görüntünün 

konulacağı noktaya getiriyoruz. Bizim sayfamızda görüntüyü birinci paragrafın altına, ara 

başlığın hemen üstüne koyalım. Bunun için birinci paragrafın sonunda enter tuşuna 

basıyoruz ve orada yeni bir paragraf başlatıyoruz. Fare imleci bu noktada dururken 

insert panelindeki image butonuna tıklıyoruz. O butona tıklanınca açılan küçük 

menüden yine image seçeneğini seçiyoruz. Bu işlem sonunda görüntü kaynağını 

seçmemiz için bir pencere geliyor. Bu pencere Şekil 9-14’teki gibidir. Bu pencere 

yardımıyla görüntümüzü dosya sisteminden bulup seçiyoruz ve OK butonuna tıklıyoruz. 

Şekil 9-14 Dreamweaver editorü insert paneli 

Sonra yeni bir pencere daha gelir. Bu pencerede alternatif metin girmemizi ister. 

Alternatif metin, eğer görüntü tarayıcı içinde gösterilemezse, kullanıcıya gösterilecek 

metindir. Genellikle resmi tanımlayan kısa bir açıklamadır. Bu örnekte biz “Sinir Hücresi 

Resmi” metnini alternatif metin olarak koyduk. Bu pencere Şekil 9-15’deki gibidir. Bu 

pencerede OK butonuna basılınca görüntü sayfaya yerleştirilir. 

200


Şekil 9-15 Görüntü için alternatif metin ayarlama penceresi 

Görüntü sayfaya yerleştirildiğinde sayfa tasarım modunda Şekil 9-16’daki gibi 

görünür. Görüntü sayfaya kendi orijinal boyutunda yerleştirilir. Şekil 9-16’daki editör 

penceresinde eklenen görüntü seçili durumdadır. Bu yüzden görüntünün etrafında bir 

çerçeve gözükmektedir. Ayrıca editörün altındaki Properties panelinde de bu görüntünün 

özellikleri gösterilmektedir. Bu özelliklerden birisi W özelliğidir. Bu özellik görüntünün 

genişliğini gösterir. Bu örnekte bu özelliğin değeri 400 pixeldir. Benzer şekilde H özelliği 

görüntünün yüksekliğini gösterir. Bu özelliğin değeri de 225 pixeldir. Her ikisi de 

görüntünün orijinal boyutlarıdır. 

Şekil 9-16 Görüntü konulmuş bir sayfa 

Şimdi bu görüntü eklenirken kaynak koda nasıl bir ekleme yapıldığını inceleyelim. 

Editörün kod kısmına geçip, kaynak kodu incelediğimizde görüntü için şu imin 

eklendiğini görürüz: 

 

201


Daha önce görüntü ekleme bölümünde gördüğümüz gibi sayfaya görüntü eklemek 

için img imi kullanılmıştır. Bu örnekte bu imin src, width, height ve alt öznitelik 

değerleri verilmiştir. Biz bu görüntünün üzerinde değişiklikler yaptıkça bu im özellikleri 

de uygun şekilde değiştirilecektir. 

Görüntü Boyu Değiştirme 

Şimdi eklemiş olduğumuz görüntünün boyutunu değiştirelim. Görüntünün 

boyutunu değiştirmenin bir yolu Properties panelindeki W ve H özellik değerlerini 

değiştirmektdir. Diğer bir yolu ise fare ile görüntüyü büyütüp, küçültmektir. Bu ikinci 

metod birçok yönden daha avantajlıdır. Bu yöntemle görüntünün boyunun kaç pixel 

olduğundan daha ziyade sayfada nasıl göründüğü üzerinde durulabilir. Bu da sayfa 

tasarımını kolaylaştırır. Fare ile görüntü boyunu küçültmenin diğer bir avantajı da hem 

genişliğin hem de yüksekliğin aynı oranda kolayca değiştirilmesidir. Görüntünün sağ alt 

köşesinden fare ile tutarak genişlik ve yükseklik aynı ordan küçültülebilir veya 

büyültülebilir. 

Şimdi fare ile görüntünün boyutunu biraz küçültelim. Görüntünün sağ alt 

köşesinden tutarak görüntünün boyutunu biraz küçülttük. Bu işlem sounda görüntü sayfa 

içinde daha küçük görünür. Sayfa kodunu incelediğimizde img iminin width ve height 

öznitelik değerlerinin değiştirilmiş olduğunu görürüz. Bizim yaptığımız değişiklik sonucu 

img imi şu şekilde değişmiştir. 

 

Görüntüler çoğunlukla hem boyundan hem de genişliğinden aynı oranda 

küçültülür. Bu görüntünün bozulmaması için en güzel küçültme şeklidir. Fakat bazı 

durumlarda küçültme ya da büyütme sadece genişlikten ya da yükseklikten yapılmak 

istenebilir. Bu durumda da yine görüntünün sağ tarafından ya da alt tarafından tutularak 

görüntü boyu sadece eninden ya da yüksekliğinden değiştirilebilir. 

Eğer bir görüntünün boyu değiştirildikten sonra görüntü boyu tekrar ilk haline 

getirilmek istenirse, bunun için görüntü seçili iken fare ile sağ tıklanır. Gelen menüden 

Reset Size seçeneği seçilir. Bu işlem görüntüyü ilk boyutuna geri döndürür. 

Görüntüden Bağlantı Oluşturma 

Bir görüntüden bağlantı oluşturmak Dreamweaver editörü ile çok kolaydır. 

Görüntü seçili durumda iken Properties panelinde Link özelliği vardır. Bunun değeri 

olarak görüntüden bağlantı verilecek web sayfasının adresi yazılır. Böylelikle bu 

görüntüden bir bağlantı oluşturulmuş olur. Editör bu işlem sonunda bağlantı için uygun 

HTML kodunu kendisi üretir. Eğer biz sayfaya eklediğimiz görüntüden 

202


http://tr.wikipedia.org/wiki/Sinir_hücresi adresine bir bağlantı oluşturursak. 

Bu durumda img imi bir imi içine yerleştirilir ve kaynak kodunda şu şekilde olur: 

 

Eğer bu görüntüden oluşturulan bağlantı kaldırılmak istenirse, bu durumda görüntü 

seçili durumda iken, fare ile sağ tıklanır. Gelen menüden Remove Link seçeneği seçilir. 

Böylelikle görüntüden oluşturulan bağlantı kaldırılır. 


Hazırlamış olduğunuz sayfaya iki adet görüntü ekleyiniz? Bunların boylarını fare 

ile ayarlayınız? Bir görüntüden site içindeki bir sayfaya, diğerinden ise webdeki bir 

sayfaya bağlantı oluşturunuz? Editör tarafından oluşturulan HTML kodunu inceleyiniz? 

Görüntünün Etrafında Tampon Boşluk Bırakma 

Görüntünün etrafında tampon boşluk bırakmak için img iminin hspace ve vspace 

öznitelik değerleri kullanılıyordu. Hspace öznitelik değeri görüntünün sağındaki ve 

solundaki boşluk miktarını ayarlıyordu. Vspace öznitelik değeri ise görüntünün üstündeki 

ve altındaki boşluk miktarını ayarlıyordu. Şimdi öncelikle bu tampon boşluk miktarını 

ayarlamadan önce görüntünün sağ tarafına metin yerleştirelim. Yani görüntüden sonra 

gelen ara başlık ve paragraf, hemen görüntünün sağından devam etsin. Bunun için img 

iminin align özniteliği kullanılıyordu. Dreamweaver editörünü kullanarak bunu şu 

şekilde yapabiliriz. Görüntü seçili durumda iken, Properties panelinde bulunan align 

özelliği değerini Left olarak seçeriz. Bu durumda görüntü pencerenin soluna yerleştirilir. 

Sağ tarafta da daha önceki altta olan ara başlık ve paragraf devam eder. 

align özelliği Left olarak seçildikten sonra şimdi de hspace ve vspace 

özelliklerini ayarlayalım. Bu özelliklerin değerleri yine görüntü seçili durumda iken 

Properties panelinden ayarlanır. Properties panelinde aynı isimde iki özellik vardır. 

Bunlardan hspace değerini 30, vspace değerini de 40 olarak verelim. Bu işlem sonunda 

sayfamız Şekil 9-17’deki gibi gözükür. Hem sonraki paragraf görüntünün sağında devam 

etmekte hem de paragraf ile görüntü arasında ayarladığımız kadar tampon boşluk 

bulunmaktadır. 

Bu işlem sonunda HTML kodunda img imine align, hspace ve vspace öznitelik 

değerleri eklenmiştir ve son hali şu şekilde olmuştur: 

 

203


Şekil 9-17 Tampon boşlukları ayarlanmış ve etrafına metin konulmuş görüntü 


Sayfanıza eklediğiniz görüntülerden birisini pencerenin soluna, diğerini de 

pencerenin sağına yerleştiriniz? Bu görüntülerin etrafındaki boşluk miktarını hspace ve 

vspace özniteliklerini kullanarak ayarlayınız? 

Görüntü Üzerinde Alt Bölgeler Tanımlama 

Görüntü üzerindeki alt bölgelerden bağlantı oluşturabilmek için görüntü üzerinde 

önce alt bölgeler tanımlanır. Görüntü üzerinde çoğunlukla dairesel veya dikdörgensel alt 

bölgeler tanımlanmaktadır. Buna ek olarak çokgen şeklindeki alt bölgeler de 

tanımlanabilir. Şimdi Dreamweaver editörünü kullanarak görüntü üzerinde nasıl alt 

bölgeler tanımlayabileceğimizi, ve bu alt bölgelerden nasıl bağlantı oluşturabileceğimizi 

adım adım görelim. Bu kısımdaki uygulama için de yine aynı görüntüyü ve sayfayı 

kullanmaya devam edelim. 

Görüntü üzerinde alt bölge tanımlamanın ilk adımı oluşturulacak map elemanına bir 

isim vermektir. Bu işlem görüntü seçili durumda iken Properties panelindeki map 

özelliği kullanılarak yapılır. Bu özelliğin yanında bulunan metin alanına atanmak istenen 

id değeri yazılır. Bu örnekte map elemanının id değerini map1 olarak verelim. 

İkinci adımda görüntü seçili iken Properties panelindeki map özelliği yanında 

bulunan şekillerden birisi seçilir. Örneğin önce daire şeklini seçelim. Sonra fare ile 

görüntü üzerinde bir daire çizilir. Bu çizim tamamlanınca editör penceresi Şekil 

9-18’deki gibidir. Görüldüğü gibi görüntünün sol tarafında dairesel bir alt bölge 

tanımlanmıştır. 

204


Şekil 9-18 Görüntü üzerinde tanımlanmış bir alt bölge 

Daha sonra bu alt bölgeden bağlantı oluşturulur. Bu işlem için önce görüntü 

üzerindeki tanımlanmış olan alt bölge fare ile seçilir. Bu seçim yapıldığında Properties 

paneli Şekil 9-19’daki gibi görünür. Bu panelde Link değeri olarak bu alt bölgeden 

oluşturulacak bağlantının hedef adresi verilir. Alt özelliği olarak ta alternatif metin 

verilir. Biz bu örnekte hedef adres olarak 

http://tr.wikipedia.org/wiki/Hücre_biyolojisi adresini, alternatif metin olarak ta 

Hücre Biyolojisi metnini kullandık. 

Şekil 9-19 Görüntü alt bölgesi Properties paneli 

Bu işlemler sonunda görüntünün üzerinde dairesel bir alt bölge tanımlanmış oldu 

ve bu bölgeden de bir bağlatı oluşturuldu. Oluşturulan map imi kaynak kodunda şu 

şekildedir: 

 

 

 

Görüldüğü gibi tanımlanan alt bölgenin koordinatları editör tarafından otomatik 

olarak tespit edilmiştir. Bizim her bir alt alanın koordinatlarını tespit etmemize gerek 

yoktur. Bu yönüyle alt bölge tanımlamada editör kullanmak işimizi epey kolaylaştırır. 

205



Bulacağınız bir Türkiye ya da dünya haritası üzerinde alt bölgeler tanımlayınız? Bu 

alt bölgelerden bağlantılar oluşturunuz? 

9.14 Tablo İşlemleri 

Dreamweaver editörü web sayfasına tablo koymak ve bu tablo üzerinde 

değişiklikler yapmak için birçok kolaylık sunar. İlk olarak web sayfasına tablo ekleme ile 

başlayalım. Bu uygulama için yeni bir sayfa oluşturalım ve bu sayfaya tabloyu ekleyelim. 

Bir sayfaya tablo eklemek için Dreamweaver editörünün sağ tarafında bulunan 

insert panelindeki Table butonu kullanılır. Önce fare imleci sayfa içinde tablonun 

konulacağı noktaya getirilir. Sonra insert panelindeki table butonuna tıklanır. Bu 

butona tıklanınca Şekil 9-20’deki pencere gelir. Bu pencerede tablonun satır ve sütun 

sayısı, genişliği, kenarlıklarının değeri, cell padding ve cell spacing değerlerinden 

istenilenler ayarlanır. 

Bu penceredeki ilk özellik olan Row, tablodaki satır sayısını belirler. Bu örnekte 4 

olarak verilmiştir. Onun hemen yanındaki Columns özelliği tablodaki sütun sayısını 

belirler. Bu örnekte 3 olarak verilmiştir. Table width tablo genişliğini belirler. Bu 

örnekte 200 pixel olarak verilmiştir. Fakat bu değerler daha sonra editör içinden 

değiştirilebilir. Bu pencerenin ortasındaki Header bölümünde, tablonun başlık satırı için 

dört farklı seçenek verilmiştir. Bu seçeneklerden bu örnek için başlık satırının yukarda 

olanı seçilmiştir. 

Şekil 9-20 Tablo oluşturma penceresi 

Tablo bu özelliklerle oluşturulduğunda editör içinde boş bir tablo görünür. Bu 

tablonun hücrelerine yazı yazılabilir ve boyutları değiştirilebilir. Tablonun boyutu 

köşesinden fare ile tutularak büyütülebilir. Veya tablonun sağ duvarından fare ile 

206


tutularak genişliği değiştirilebilir. Ya da alt duvarından tutularak yüksekliği 

değiştirilebilir. Bunlara ek olarak her bir satırın veya sütunun genişlik veya yüksekliği de 

ayarlanabilir. 

Bu noktada tabloya sıra no, kitap ismi ve yazar adı ekleyelim. Tablonun boyunu 

da ihtiyacımıza göre büyütelim. Bu işlemleri yaptığımızda tablomuz editör penceresi 

içinde Şekil 9-21’deki gibi görünür. 

Şekil 9-21 Editör içinde tablo eklenmiş bir sayfa 

Bu tablonun HTML kodu ise Tablo 9-1’deki gibi üretilmiştir. Bu kodda 

gözümüze çarpan önemli noktalar, öncelikle tablonun genişlik ve yükseklik değerleridir. 

Buna ek olarak ta tablonun ilk satırındaki her bir hücrenin genişlik değerinin ayarlanmış 

olmasıdır. 

 

 

Sıra No 

Kitap Adı 

Yazarı 

 

 

1 

C++ ile Nesnel Programlama 

Robert Lafore 

 

 

2 

Java 2 

Herbert Schildt 

 

 

3 

207


Visual Studio.Net 

Richard Grimes 

 

 


Tablo 9-1 Tablo için üretilen HTML kodu 

Sizde hazrılayacağınız bir sayfaya bir tablo ekleyiniz? Bu tabloyu verilerinizle 

doldurunuz? Tablonuzun büyüklüğünü, her bir sütunun genişliğini verilerinizin 

büyüklüğüne göre ayarlayınız? 

Tabloya Satır ve Sütun Ekleme/Silme 

Bir tablo oluşturulduktan sonra bu tabloya satır veya sütun eklenebilir. Bunun için 

önce imleçle satırın veya sütunun ekleneceği pozisyona gelinir. Sonra Şekil 9-22’deki 

gibi farenin sağ tuşuna basılır. Gelen menüden Table seçilir. Daha sonra alt menüden 

satır eklemek için Insert Row, sütun eklemek için ise Insert Column seçilir. Yeni satır 

imlecin bulunduğu hücrenin üst satırına, yeni sütun ise imlecin bulunduğu hücrenin sol 

sütununa eklenir. Bu şekilde tabloya istenildiği kadar satır veya sütun eklenebilir. 

Şekil 9-22 Tabloya fare ile satır veya sütun ekleme 

Tablolara satır veya sütun eklemek mümkün olduğu gibi satır veya sütun silmek 

te mümkündür. Bunun için yine fare kullanılır. Bu defa sağ tıklayınca gelen Table 

menüsünden Delete Row seçeneği satır silmek için, Delete Column seçeneği ise sütun 

silmek için kullanılır. Satır ve sütün silmede imlecin olduğu hücrenin bulunduğu satır 

veya sütun silinir. 

208


Hücre Birleştirme ve Ayrıştırma 

Tablolarla ilgili yapılan bir diğer işlem hücre birleştirmek veya birleştirilen 

hücreleri sonra tekrar ayrıştırmak işlemidir. Birden fazla hücreyi birleştirmek için önce 

hücreler seçilir. Sonra fare ile sağ tıklanır ve Şekil 9-22’deki menü gelir. Bu menüden 

Table seçilir ve onun alt menüsünden Merge Cells (Hücre Birleştir) seçeneği seçilir. Bu 

işlem seçili hücreleri birleştirir ve tek bir hücre haline getirir. 

Birleştirilen hücreler daha sonra istenilirse tekrar ayrıştırılabilir. Birleştirilmiş bir 

hücre seçilir ve bu hücre üzerinde sağ tıklanır. Bu durumda yine Şekil 9-22’deki menü 

gelir. Bu menüden Table seçilir ve onun alt menüsünden Split Cell (Hücre Ayrıştır) 

seçeneği seçilir. Bu işlem daha önce birleştirilmiş olan hücreleri tekrar ayrıştırır. 


Hazırladığınız sayfadakli tablonun ilk satırına bir satır ekleyiniz. Bu satırdaki 

bütün hücreleri birleştiriniz? Bu hücre tablonun başlığı olsun. Bu işlemi yaptığınızda 

üretilen HTML kodunu kontrol ediniz? 

9.15 Site Oluşturma 

Şimdi Dreamweaver editörü ile bir site oluşturmayı görelim. Dreamweaver editörü 

ile bir kurum için web sitesi geliştirilirken öncelikle bir site oluşturulur. Burdaki site 

kavramı proje kavramı gibidir. Nasıl birçok programlama dilinde program geliştiriken 

önce editör ile bir proje oluşturulur. Bu proje o probleme ait bütün dosyaları içerir. Onun 

gibi buradaki site kavramında da bir kurumun web sitesi için gerekli olan bütün dosyalar, 

bir site içinde tutulur. 

Site oluşturmanın ilk adımı bir dizin oluşturmaktdır. Oluşturacağınız web sitesine 

ait bütün dosyaları içinde tutacağınız bir dizini bilgisayarınızda oluşturunuz. 

Sonra Dreamweaver editörü üst menüsünden Site | New Site seçeneğini seçiniz. 

Bu seçim sonunda Şekil 9-23’deki pencere gelir. Bu pencerede oluşturacağınız siteye bir 

isim veriniz. Bu örnekte site ismi olarak site2 verilmiştir. Bu penceredeki ikinci seçenek 

web sitesinin adresini sormaktadır. Eğer gerçekten Web’de yayınlayacağınız bir site 

yapıyorsanız, bu alana sitenizin adresini yazınız? Bu adres www.google.com gibi tam bir 

adres olmalıdır. Oluşturulacak sayfalar webde yayınlanmayacaksa, sadece 

bilgisayarınızda deneme çalışması yapıyorsanız, bu durumda ikinci seçeneği boş 

bırakabilirsiniz. Next butonuna tıklayınız. 

209


Şekil 9-23 Yeni site oluşturma için ilk adım penceresi 

Bir sonraki adımda sunucu tarafı teknolojilerden birisini kullanıp, 

kullanmayacağımız soruluyor. Bu pencere Şekil 9-24’deki gibidir. Burada No seçeneğini 

seçiniz. 

Şekil 9-24 Yeni site oluşturma için ikinci adım penceresi 

Üçüncü adımda bu siteye ait dosyaların yerel bilgisayarda mı yoksa sirek olarak 

web sunucusunda mı kaydedileceği soruluyor. Bu pencere Şekil 9-25’teki gibidir. Bizim 

dosyalarımız yerel bilgisayarımızda tutulacağı için, burada “Edit local copies” diye 

başlayan seçeneği seçiniz. Alt tarafta ise daha önce oluşturmuş olduğunuz dizini seçiniz. 

210


Şekil 9-25 Yeni site oluşturma için üçüncü adım penceresi 

Dördüncü adımda web sunucusuna nasıl bağlanacağımızı soruyor. Bu pencere 

Şekil 9-25’teki gibidir. Burada “None” seçeneğini seçiniz. Eğer sitenizin dosyaları web 

sunucusuna gönderilecekse, burada bağlantı şeklinizi seçmelisiniz. Bizim uygulamada 

sayfalar sadece kendi bilgisayarımızda olacağı için None seçilmiştir. 

Şekil 9-26 Yeni site oluşturma için dördüncü adım penceresi 

Bu işlemlerle birlikte site oluşturmak için gerekli bütün seçimler yapılmış olur. En 

son bir pencere daha gelir. Bu pencerede oluşturulan siteye dair bilgiler vardır. O 

penceredeki Done butonuna tıklanarak site oluşturma işlemi bitirilir. 

9.16 Şablon Oluşturma 

Web siteleri hazırlanırken her web sitesi için öncelikle bir şablon oluşturulur [6]. 

Bu şablon sayfada, sitedeki bütün sayfaların sahip olacağı ortak özellikler bulunur. 

211


Sitedeki sayfaların arka plan rengi, sayfaların sahip olacağı ana bölgeler, ortak menüler 

ve bağlantılar, kullanılacak ortak fontlar gibi birçok sayfa özelliği bu şablonda belirtilir. 

Daha sonra bu siteye bir sayfa ekleneceği zaman, yeni sayfa bu şablona göre oluşturulur. 

Bu bölümde, hazırlayacağımız bir site için nasıl şablon oluşturabileceğimizi 

görelim. Oluşturacağımız bu şablonu, Dreamweaver editörü ile gelen başka bir şablondan 

türeteceğiz. Dreamweaver editörü ile birçok basit sayfa şablonu gelir. Programcılar bu 

şablonları kendi ihtiyaçlarına göre değiştirerek yeni şablonlar oluşturur. Şimdi bu 

şablonlardan bir tanesini kullanarak yeni bir şablon oluşturalım. 

Dreamweaver editörü ile gelen şablonları kullanarak bir şablon oluşturmanın ilk 

adımı File menüsünden New seçneğini seçmektir. Bu seçim yapılınca Şekil 9-27’deki 

pencere gelir. Bu pencerede en soldaki menüden Blank Template seçeneğini seçiniz. 

Ortadaki Template Type listesinden ise HTML Template seçeneğiniz seçiniz. Onun 

yanındaki Layout listesinden her hangi bir seçeneği seçebilirsiniz. Her bir seçeneğin 

üzerine fare ile tıkladığınızda, şablonun yapısı sağda görünür. Biz bu uygulamada “2 

column elestic, left sidebar, header and footer” seçeneğini seçtik. Bu 

şablonda sayfada bir üst bölge, bir sol sütun bir de alt bölge vardır. Buna ek olarak bir de 

sayfa içeriği için gövde kısmı mevcuttur. 

Şekil 9-27 Dreamweaver şablonundan sayfa oluşturma penceresi 

Bu seçimler yapıldığında bu şablona göre bir şablon sayfası oluşturulur. Bu sayfa 

Şekil 9-28’deki gibidir. Oluşturulan sayfa içinde örnek metinler ve başlıklar vardır. Bu 

sayfanın arka plan rengi, ana bölgeleri ve kullanılan fontların özellikleri şablon tarafından 

belirlenmiştir. Bu sayfanın HTML kodu kontrol edildiğinde, şablonun CSS kullanılarak 

hazırlandığı görülecektir. Her bir bölge bir div elemanı ile tanımlanmıştır. Ayrıca 

sayfadaki kullanılacak fontun özellikleri de CSS ile belirlenmiştir. 

212


Şekil 9-28 Şablona göre oluşturulmuş örnek sayfa 

Şimdi bu sayfadaki başlığı değiştirelim. Sol taraftaki bölüme ise tek sütunlu bir 

tablo ekleyelim. Bu tabloya sayfamızın ana menüsünü ekleyelim. Tablonun her satırında 

bir bağlantı olsun. Tablomuzun çizgilerinin kullanıcıya gözükmemesi için border 

özniteliği değerini sıfır yapalım. Benzer şekilde sayfanın alt bölgesindeki kısma, sayfa ile 

ilgili genel bir bilgi ekleyebilirsiniz. 

Gövde kısmı diğer üç bölgeden farklı olacaktır. Çünkü diğer üç bölge, sitemizdeki 

bütün sayfalar için aynı olacaktır. Fakat gövde kısmındaki bilgiler her sayfa için farklı 

olacaktır. Dolayısıyla gövde kısmı şablonda boş bırakılacaktır. Ayrıca gövde kısmına her 

sayfada yazı yazılabilmesi için bir Editable Region nesnesi eklenecektir. 

Editable Region (Yazılabilir Bölge) 

Bir şablona göre bir sayfa oluşturulduğunda, o sayfanın sadece Editable Region 

nesnesi eklenmiş kısımları değiştirilebilir. Diğer bölgeler üzerinde değişiklik yapılamaz. 

Bunun amacı şablon ile bir sitenin genel özelliklerini kontrol etme isteğidir. Bir sitenin 

şablonu, o sitenin sayfalarının ortak özelliklerini belirler. Bu ortak özelliklerle ilgili bir 

değişiklik yapılacaksa, bu değişiklik şablon üzerinde yapılır. Her sayfaya ait değişiklik 

ise ancak o sayfanın yazılabilir bölgesinde yapılır. Bir şablonda değişiklik yapıldığında, 

editör bu değişikliği otomatik olarak o şablona göre üretilmiş bütün sayfalara yansıtır. Bu 

da site geliştirme işlemini ciddi manada kolaylaştırmaktdır. 

Şimdi şablonumuzun gövde bölgesine bir Editable Region nesnesi ekleyelim. 

Bunun için öncelikle imleci Editable Region nesnesinin konulacağı gövde kısmına 

getiriniz. Sonra insert panelindeki Templates | Editable Region butonuna 

tıklayınız. Bu işlem yapılınca şablon sayfamız Şekil 9-29’daki gibi olur. Sonra bu 

şablonu dwt uzantılı olarak site içine kaydediniz. Şablonlar site dizini altında Templates 

dizini içine kaydedilir. 

213



Şekil 9-29 Editör ile oluşturulmuş örnek şablon 

Bu bölümde olduğu gibi düşündüğünüz bir site için bir şablon geliştiriniz? 

Şablonu Dreamweaver ile gelen şablonlardan birisine göre yapınız? Oluşturduğunuz 

şablona en az bir menü bir de yazılabilir bölge ekleyiniz? 

9.17 Şablona Göre Sayfa Oluşturma 

Şimdi bir önceki bölümde oluşturmuş olduğumuz şablona göre sitemiz içinde örnek 

bir sayfa oluşturalım. Bu sitedeki bütün sayfalar artık bu şablona göre oluşturulmalıdır. 

Eğer sitenin genel yapısında bir değişiklik yapmak istersek, bu değişiklik te şablon 

üzerinde yapılmalıdır. 

Şablona göre bir sayfa oluşturmak için File menüsünden New seçilir. Bu durumda 

Şekil 9-30’da görülen yeni belge oluşturma penceresi gelir. Bu pencerede en soldaki 

seçeneklerden Page from Template seçilir. Ortadaki Site menüsünden de 

şablonumuzun içinde bulunduğu site ismi seçilir. Bizim durumumuzda site ismi 

site2‘dir. Onun yanındaki liste, seçilen sitedeki şablonları göstermektedir. Bu sitede 

henüz bir tane şablon olduğu için, o şablon seçilir. Create butonuna tıklanarak yeni sayfa 

oluşturulur. 

214


Şekil 9-30 Şablona gore sayfa oluşturma penceresi 

Oluşturulan sayfanın sadece gövde kısmında görülen Editable Region kısmı 

yazılabilir durumdadır. Diğer kısımlar üzerinde bir değişiklik yapılamaz. Eğer diğer 

kısımlar üzerinde bir değişiklik yapılmak istenirse, bu değişiklik şablon üzerinde 

yapılmalıdır. Gövde kısmında görülen Editable Region kısmına eklemeler yapınız. 

Editable Region kısmı gövde içinde istediğiniz kadar büyüyebilir. Bu eklemeler 

yapıldıktan sonra sayfa Şekil 9-31’deki gibi olur. Bu sayfa sitemizdeki sayfalardan bir 

tanesi olacaktır. Bu sayfayı html uzantısıyla site dizini içine kaydediniz. Bu şekilde 

sitedeki diğer sayfalar da bu şablondan üretilir. Gerek olursa site için başka şablonlar da 

üretilebilir. 


Şekil 9-31 Şablondan üretilmiş örnek sayfa 

215


Bir önceki bölümde geliştirmiş olduğunuz şablona göre iki farklı sayfa 

oluşturunuz? Bu sayfaların yazılabilir bölgelerine o sayfalara ait bilgileri ekleyiniz. 

Sayfaların diğer kısımları üzerinde herhangi bir değişiklik yapılamadığını gözlemleyiniz. 

Oluşturmuş olduğunuz bu iki sayfaya şablondaki menüden bağlantı veriniz? Daha sonra 

şablon ile yaptığınız değişikliğin, oluşturduğunuz sayfalar üzerinde de olduğunu 

gözlemleyiniz? 

9.18 Özetle 

Bu bölümde Adobe Dreamweaver CS4 editörünü kullanarak web sitesi 

hazırlamanın temellerini gördük. Web sayfasında metinlerinin tanımlanmasını ve 

özelliklerinin değiştirilmesini, listeler oluşturulmasını, bağlantı kullanımını, görüntü 

eklemeyi ve özelliklerini değiştirmeyi, tablolarla ilgili işlemler yapmayı gördük. Ayrıca 

site oluşturmayı, sayfalar için şablon üretmeyi ve şablonlara göre sayfa oluşturmayı 

gördük. Bu bölümde gördüğümüz konular Dreamweaver CS4 editörünün temel 

özelliklerini kapsamaktadır. Bu editörün daha biçok özelliği bulunmaktadır. Bu özellikler 

buradaki oluşan temel üzerine programcılar tarafından kolayca öğrenilebilir. 


[1] Bonnie Skaalid, "Multimedia and Web Page Design Principles", 

http://www.usask.ca/education/coursework/skaalid/page/design/webdsgn.htm, 7 

Ekim 2009. 

[2] James R. Grunwald, "Six Basic Principles of Web Page Design", http://www2.mlcwels.edu/jgrunwald/page.html, 

7 Ekim 2009. 

[3] Smashing Editorial, "10 Principles Of Effective Web Design", 

http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-webdesign, 

January 31st, 2008, Accessed 7 Ekim 2009. 

[4] WYSIWYG, http://en.wikipedia.org/wiki/WYSIWYG, 7 Ekim 2009. 

[5] Adobe Dreamweaver CS4, http://www.adobe.com/products/dreamweaver, 7 Ekim 

2009. 

[6] Christopher Heng, How to Use Dreamweaver CS4's Templates to Manage and Auto- 

Update Multiple Pages on Your Website, 

http://www.thesitewizard.com/gettingstarted/dreamweaver-cs4-tutorial-7.shtml, 7 

Ekim 2009. 

216

NTERNET PROGRAMCILIĞI – I

Create successful ePaper yourself

Delete template?

Save as template?