Web design

Tekrar bu listeye dönmek için okuduğunuz yazının başlığına tekrar basabilirsiniz...

• Web Tasarımının Temelleri
• Metin Özellikleri
• Stiller
• Resimler
• GIF mi JPG mi ?
• MAP komutu
• Tablolar
• Neden tablo
• Tablo içinde tablolar
• Tablosuzluk
• Table komutu
• Imagemap'ler
• Imagemap'in Tasarlanması
• Hangisini Kullanmalıyım?
• Kullanıcı - Taraflı Imagemap'ler
• İlk Imagemap'imizi Yaratalım
• Frame Kullanmak
• Frame'ler ne zaman kullanılmalıdır?
• Nasıl oluyor da frame oluyor?
• Framelerde nelere dikkat etmeli ?
• Değişik frame stilleri için kaynak kodlar
• İki kişiye birden e-mail yollamak
• Web Sayfasını Enüstte Tutmak
• Arama Motorlarına Yardımcı Olun
• Linkler / Bağlantılar...
• Linklerde Dikkat Etmeniz Gerekenler
• Lokal çalışmada püf noktası
• Alt çizgisiz ve aktif kısayollar
• "Çerezler" ile ziyaretci sayısını öğrenmek
• Hangi tarayıcıyı kullanıyor?

Web Tasarımının Temelleri

Web sayfalarının gerçekte programlama dili gibi bir kaynak kodu bulunur. Web sayfaları bu doğrultuda iki türlü hazırlanmaktadır. Bunlardan ilki WYSIWYG (what you see is what you get - Ne görürsen onu alırsın) denilen yöntemdir. Visual Page, Front Page, PageMill, ve HotDog gibi programlar web sayfalarının ekranda yazıların ve resimlerin istenilen yere görsel olarak yerleştirilmesini sağlayan programlardır. Web sayfası oluşturmak için bu programlar kullanılarak HTML dili bilmeye gerek duymadan bir web sayfası yapılabilir.

Web sayfası hazırlamanın diğer yoluysa Notepad gibi bir metin editörü ya da HomeSite gibi HTML editör programı kullanmaktır. Kaynak kodundan web sayfası hazırlamak her zaman için daha avantajlıdır. WYSIWYG programları web sayfasına gereksiz kodlar ekler ve çoğu zaman sayfayı hazırlayan kişinin kafasını karıştırır. Çoğu zaman sayfaya istenildiği gibi müdahale etme kapasitesine sahip olunamaz. Bu sebepler nedeniyle Web Okulu köşemizde web sayfalarının oluşturulması tamamen web sayfalarının kaynak kodu olan HTML dili ile gerçekleşecektir.

Masaüstünde yeni bir dizin oluşturularak dizine herhangi bir isim verilebilir. Bu dizine girilerek boş bir metin dosyası oluşturulup dosya adı ve uzantısı index.htm olarak değiştirilir. Index.htm her zaman için ilk sayfa olacaktır. Web üzerine yüklendiğinde web server index.htm'yi ilk sayfa olarak görecektir. Bazı sunucularda bu default.htm olarak da kullanılabilmektedir. Index.htm metin editöründe açılarak web sayfası kodu yazılabilir duruma getirilebilir. Web sayfası için varolacak tüm dosyaların oluşturulan dizine koyulması gerekmektedir.

Metin editörü için masaüstüne yapılacak bir kısayolla htm dosyaları bu kısayol'a taşı-bırak yöntemiyle bırakılarak, HTML kodları metin editöründe çok kolay bir biçimde görülebilir. ".htm" ve ".html" dosyalarının çift tıklandıklarında browser'lar tarafından görülmesi gerekmektedir. Düz bir dosya olarak ya da browser dışında bir program tarafından açılmaları bu dosya uzantılarının Internet Explorer ya da Netscape ile ilişkilendirilmemiş olduğunu gösterir.

< title>Bu benim ilk HTML sayfam< /title>

satırı tek satır halinde "head" komutundan sonra girilir ve hemen altına açılan "head tag"ı yazılarak kapatılır. Burada dikkat edilmesi gereken 3 önemli nokta vardır:

1. < head> komutu içinde < title> komutunu içermektedir. "Title" komutu web browser'ların en üstlerinde çubuklarda görülen bilgileri oluşturan satırdır. Title aynı zamanda internet üzerinde sörf yapan bir kullanıcının ekrandaki web sayfasını bookmark'ına ya da sık kullanılanlarına eklediği zaman orada görülecek satırdır. Title komutunun bir avantajı da, oluşturulan bir web sayfasının herhangi bir arama motoruna eklenmesi durumunda o satırın arama motorunda ilk satır olarak görülmesidir.

2. Head komutu altında bulunan hiç birşey web sayfasında görünmeyecektir. < meta> komutu arama motorlarına, sayfa hakkında gerekli bilgileri ve indeksleme bilgilerini verebilecektir.

3.Bu bilgilerden anlaşılacağı üzere bu komutların kullanımıyla HTML sayfalarının nasıl oluştuğu ortaya çıkmaktadır. Komut 1, Komut 2, Komut 3, Komut 3, Komut 2, Komut 1 şeklinde devam etmektedir. Buna göre < head> < title> ..... < /title>< /head> şekli doğru şekildir. < head> < title> ..... < /head>< /title> komut sıralaması tamamıyla hatalı bir sıralamadır ve browser bu sıralamayı anlayamayacaktır.

Bu aşamaya kadar web sayfasında görülebilecek herhangi bir öğe yoktur.

komutu head komutundan sonra komutunda önce kullanılan bir komuttur. Body ingilizce vucüt anlamına gelmektedir ve web sayfasının vücudunu oluşturmaktadır.

< html>
< head>
< title> Bu benim ilk HTML sayfam< /title>
< /head>
< body>
.
.
< /body>
< /html>

Bu kodlar web sayfasının bir browser tarafından görülebilmesi için gerekli olan en düşük seviyedeki kodlardır. Hazırlanan sayfada her hangi bir eklentinin görülebilmesi için şu satırlar yazılabilir:

< center>www.adresim.com.tr< /center>
< h1>Web sayfama hoşgeldiniz< /h1>
< p>Web sayfasının bu bölümüne metin olarak herhangi bir bilgi yazılabilir. Web sayfasında burası sıradan bir metin olarak görülecektir.< /p>

Bütün bu yazılar body açılır ve kapanış komutları arasında bulunan boşluğa yazılacaktır. H1 komutu yazının büyük puntolarla sayfaya yazılmasını sağlayacaktır. P komutu da yazıları paragraf halinde yazdırır. Metin dosyası kaydedilip index.htm'ye çift tıklayarak hazırlanan web sayfası görülebilir. Sayfanın son şekli şu şekilde olacaktır:

< html>
< head>
< title> Bu benim ilk HTML sayfam< /title>
< /head>
< body>
< center>www.adresim.com.tr< /center>
< h1>Web sayfama hoşgeldiniz< /h1>
< p>Web sayfasının bu bölümüne metin olarak herhangi bir şey yazılabilir. Web sayfasında burası sıradan bir metin olarak görülecektir.< /p>
< /body>
< /html>

Metin Özellikleri

Web sayfası oluşturulduktan sonra gerekli öğeler sayfaya yerleştirilerek web sayfasının içeriği oluşturulur. Şimdilik görsel açıdan herhangi bir kaygı bulunmadığı için istenilen öğenin kullanımının öğrenilmesi ön planda tutulmalıdır. Daha sonraki aşamalarda web sayfasını güzelleştirme işlemi, hem teknik hem de görsel yöntemler kullanarak gerçekleşebilecek duruma gelecektir. Kullanılabilecek öğeler arasında yazı, resim, linkler, formlar, sesler ve animasyonlar bulunuyor. Bunların en önemlilerinden olan yazı öğesi, bir web sayfasının ana parçalarını ve en büyük oranını oluşturmaktadır.

Stiller

Web sayfasında herhangi bir metni yazabilmek için, html "tag"ları dışında yazılması yeterlidir. < > işaretleri HTML komutları olduğu için, komut satırı kapandıktan sonra herhangi bir şey yazılması web sayfasında yazı olarak görünecektir. Ancak bu görünecek yazı, herhangi bir yazı stiline ya da renk'e sahip olmayacaktır. Yazılan yazıya web sayfasında bir stil verilmesi gereklidir. Web sayfasında bulunan bir yazıya herhangi bir şekilde stil verilmesi için kullanılması gereken komut satırı şu şekilde olmalıdır:

< font face="Tahoma" size="2" color="Navy">yazı yazı</font>

Anlaşılacağı gibi yazı stilini değiştirmek için < font> komutu kullanılıyor. Web sayfasında kullanılan stil < /font> kapatma komutu verilmediği takdirde, etkisi sayfa sonuna kadar devam edebilmektedir. Örneğin HTML sayfasının sonuna konulacak < /font> komutu, sayfanın başında verilen stilin sonuna kadar devam edeceğini, arada tekrar font stili verilip kapatıldığı takdirde yalnızca o bölümün değişeceğini gösterir. Font komut satırında "face=" bölümü sayfada kullanılması istenilen font stilinin girilmesi içindir.

< face="font adı">

şeklinde kullanılacak olan font belirtilir. Sistemde yüklü olan herhangi bir font kullanılabilir. "Face=" bölümüne yazılan font eğer sistemde yoksa, browser o font'u bulamayacağı için, tanımsız bir "face" kullanarak yazıyı herhangi bir stil olmadan yazar. Bunun için dikkat edilmesi gereken noktalar vardır. Web sayfasında face 'e birden fazla font girilmesi mümkün olabilmektedir.

< face="Tahoma, Arial, Helvetica">

Burada görüldüğü üzere virgüllerle birden fazla font girilmiştir. Web browser ilk olarak Tahoma fontuna bakacaktır, sistemde bulamadığı takdirde Arial'e bakacaktır, onu da bulamazsa Helvetica fontunu kullanacaktır. En yaygın olan fontların kullanılması web sayfasının farklı işletim sistemlerinde farklı farklı görünmemesini sağlayacaktır. Örneğin Macintosh bilgisayarlarından ne Tahoma ne de Arial font'u sistemde yüklüdür. Ancak Helvetica font'u sistemde bulunduğu ve Arial gibi bir font'a benzediği için Helvetica fontu ayrı bir seçenek olarak kullanılabilir.

Sistemde hiçbir şekilde bulunmayan bir font kullanılmak isteniyorsa, yazı metin olarak yazılmaz. Yazı resim formatında çok az yer kaplayacak şekilde grafik olarak web sayfasına yerleştirilir. Resim olarak bir yazı web sayfasına konulduğunda, dikkat edilmesi gereken resmin çok büyük boyutlarda olmamasıdır. Herhangi bir resmin büyük boyutlarda olması sayfanın geç gelmesine neden olmaktadır. Sayfaya eklenecek yazıların resim yani grafik formatında olmasının başka bir avantajı istenilen renklerin istenildiği gibi geçiş yapılarak kullanılabilmesidir. Bu sayfanın çok daha ilgi çekici hale gelmesi, görsel açıdan daha da güzelleşmesi demektir.

Font komutunda kullanılan "Size" parametresi burada kullanılan fontun büyüklüğü anlamına gelir. Bu büyüklüğün fontun punto büyüklüğüyle pek bir ilgisi bulunmuyor. HTML'nin kendine öz bir font büyüklük ölçüsü bulunuyor. Size=2 normal font büyüklüğü olarak 10'a eşit oluyor. Diğer farklılıkları da gözlemlemek için yapılması gereken büyüklüğün değişik değerlerde denenmesi olabilir. Font büyüklüğü farklı farklı değiştirilerek, yapılan sayfadaki font büyüklüğü de kontrol edilebilir.

"Color" yalnızca font komutuna özgü bir komut değildir. "Color" tüm web sayfasında geçerli bir kavram olup, diğer komutlarda da sıkça kullanılan bir parametredir. İngilizce olarak girilebilen renk parametrelerinden başka, HTML'ye özgü RGB renk parametresi de mevcuttur. # ile başlayan bu renk parametresini görsel olarak renk seçeneklerinden seçebilip çevirebilen programlar bulunuyor. Color="White" yazılması ya da Color="Red" yazılması varsayılan tonlamaların kullanılmasını sağlayacaktır. Herhangi bir HTML Editör programı kullandığı takdirde istenilen herhangi bir tondaki renk, HTML COLOR formatına değiştirilebilir.

tucows.marketweb.net.tr/tucows/color95.html adresine girilerek buradan seçilecek herhangi bir "convertor" (dönüştürücü) programıyla renkler HTML renk parametresine çevrilebilir.

Font komutunu kullandıktan sonra mutlaka < /font> kapama komutu kullanılarak kapatılmalıdır. Artık 4. nesil browser'ların kullanmaya başladığı style sheet'ler tüm HTML dokümanı için tek bir font ve renk gibi detayları tek komut halinde yazabilmeye yaramaktadır. Örneğin tüm linklerde üzerine fareyle gelindiğinde renk değiştirme ya da linklerin altında çizgi görünmemesi sağlanabilir. Style Sheet'ler daha sonraki aylarda detaylı olarak incelenecektir.Homesite gibi bir program kullanıldığı takdirde hem renk dönüştürücüsü hem de Sytle Sheet'ler kolay bir biçimde kullanılabilir.

Resimler

Web sayfalarında metinlerin kullanılmasının yanı sıra, resimler de büyük sıklıkta kullanılmaktadır. Web sayfasının görsel olarak tamamlanabilmesi için grafik kullanılması önemli etkenlerdendir. Sayfaya yerleştirilecek basit bir grafik bile sayfanın çok farklı görünmesine sebep olacaktır. Hem görsel hem de sayfanın güzel görünmesi açısından grafik ve resimlerin önemi büyüktür. Web sayfasında resim kullanmak için gerekli olan HTML komutu şudur:

< img src="resim.gif">

HTML'nin diğer komutlarında da olduğu gibi komut < ve > işaretleri içinde girilir. IMG komutu ingilizce "image" olan resim kelimesinden gelmektedir. SRC ise "source" denilen resmin kaynak dosyasını göstermektedir. Bu durumda HTML kodunda resim.gif'in resim olarak HTML sayfasına yüklenmesi istenmektedir. Bu parametreye eklenebilecek başka komutlar da bulunmaktadır. Bunlardan ilki kullanılacak resmin boyutudur.

width=90 height=9

Bu şekilde resmin boyutu yükseklik 9 genişlik de 90 piksel olarak belirlenmiştir. Eğer bu büyüklük girilmezse HTML sayfası resmin boyutlarını otomatik olarak algılayacaktır. Ancak varolan resmin değerleri olduğundan farklı verilirse, resimde bir orantısızlık meydana gelecektir. Bu değerin dışında web sayfasında fareyle resmin üzerine gelindiğinde bir yazı çıkması sağlanabilir. Bu özellik resim komutuna şu satırla girilmektedir:

alt="yazı yazılacak alan"

Web sayfası browser ile görüntülenirken, fare ile resim üzerine gelindiğinde, girilen yazı görülecektir. Bu özellik genellikle resim altı denilen bilgilerin web sayfasına yerleştirilmesi için hazırlanmıştır. Yalnızca Netscape browserlar'ı için kullanılabilen başka bir özellikse, bir resim gelirken daha düşük çözünürlükteki bir resmin anında görüntülenebilmesidir.

lowsrc="resim2.jpg"

Daha düşük boyutlarda olan resim2.jpg, resim.gif'den düşük boyutta olduğu için daha hızlı yüklenecektir. Düşük boyutta olan resim yüklendikten sonra, normal resim yüklenmeye devam edecektir. Kullanılabilecek başka bir parametreyse "border" komutudur. Resmin etrafına istenilen kalınlıkta bir kenarlık konulabilmesi için kullanılır. Bu resmin kendinde herhangi bir değişiklik yapmadan, HTML dosyası üzerinden kolayca bu çerçevenin koyulabilmesidir. Buraya kadar anlatılanlardan yola çıkılarak, tüm parametreler kullanılarak bir resim komutu girilmek istenirse şu şekilde giriş yapılabilir:

< img src="resim.gif" width=90 height=9 border=0 lowsrc="resim2.jpg" alt="buraya resim altı yazılıyor">

GIF mi JPG mi ?

Web sayfalarında kullanılabilecek olan resim formatları arasında GIF, JPG, PNG ve XBM bulunmaktadır. Bunlardan en sıkça kullanılanlar JPG ve GIF resim formatlarıdır. GIF resim formatı hiçbir sıkıştırma formatı kullanmazken, renk kullanım sayısı 256 ile sınırlıdır. JPEG bir sıkıştırma formatı olduğundan resimde kayıplar meydana gelebilmektedir. Bu kayıplar resmin sıkıştırma miktarıyla orantılıdır. GIF'in dikkat çeken önemli yönlerinden biri resimleri "transparan" (saydam) yapabilmesidir. Böylelikle resimde zeminin gözükmesi gereken yerler istenildiği gibi "transparan" olduğundan görülebilir. Örneğin siyah zeminde kullanılacak olan bir obje, etrafı farklı bir renk olacağı için, etrafının "transparan" yapılması gerekmektedir.

MAP komutu

Herhangi bir resmin belirli bölümlerine farklı linkler verebilmek mümkündür. Örneğin yapılan bir mönü resminde, mönünün farklı butonlarına farklı linkler verilebilir. Bu şekilde o bölüme fare ile tıklandığında bir bölüme, başka bir bölüme tıklandığında da başka bir linke gidecektir. Bir resim "map" ediliyorsa kullanılacak olan map'in adı resimde belirtilir. Daha sonra HTML kodunda başka bir yerlerde o map'in tanımı yapılır. Yapılan tanımda, resmin hangi bölümlerinde hangi linklerin olduğudur. Fare ile gelindiğinde linkler hangi şekilde devreye gireceklerinin koordinatları bulunmaktadır.

Tablolar

Web sayfalarını oluşturmanın temel taşlarından biri olan tabloları bu ay ki HTML köşemizde detaylı olarak inceledik. İstenilen öğelerin istenildiği gibi yerleştirilebilmesi için tabloların mutlaka kullanılması gerekir. Tablolar kullanılmadığı takdirde güzel bir web sayfası oluşturulma ihtimali çok düşük olmaktadır.

Web sayfalarında çok açık bir şekilde ön plana çıkmayan, ancak yaptığı iş açısından oldukça önem taşıyan tablolar, profesyonel web tasarımcılar tarafından bir web sayfasının temel taşlarını oluşturacak nitelikte kullanılır. Tablolar web sayfası üzerinde istenilen öğelerin istenilen yere yerleştirilmesi için kullanılan komuttur. Tablolar kullanılarak büyük ölçüde istenilen şekilde bir resmi ya da bir yazıyı web sayfasına yerleştirmek mümkün olabilmektedir. HTML komutları arasında "Table" olarak kullanılan tablo komutunun birçok parametresi bulunur.

Neden tablo ?

Web sayfalarının mantığı bir yazı dokümanı gibidir. Öğeler yerleştirilmeye başlandığında soldan sağa yerleştirilme ilkesi esas alınır. Satır dolduğundaysa bir satır aşağıya geçilerek öğeler yerleştirilmeye devam eder. Bu şekilde bir web sayfası oluşturmak, bir sayfa tasarımı yapmak açısından imkansızdır. Böyle olduğunda herhangi bir öğeyi başka bir öğeyle birleştirmek, üstüste altalta koyabilmek, kısacası istenildiği gibi yerleştirebilmek imkansız hale gelmektedir.

Tablo denildiğinde akla dergilerde gazetelerde kullanılan kutucuklar gelir. Web sayfalarında bu tür kutucuklar tablo komutuyla yapılmaktadır ancak tablo komutunun kullanılmasının ana sebebi sayfa düzenini gerçekleştirebilmek içindir.

Tablo içinde tablo

HTML dili oldukça esnek bir işaretleme dilidir. Bu bağlamda tablolar içinde tablo komutunu kullanabilmek mümkündür. Örneğin bir tablo içinde başka tablolar, bu tabloların içinde başka tablolar ve başka tablolar kullanılabilmektedir. Böylelikle web sayfası için bir stil de oluşturulabilir. Ancak dikkat edilmesi gereken bir nokta vardır ki, bu da her iki popüler browser'ın da bu tabloları görüntülemesinin kontrolüdür. Çok fazla tablo iç içe kullanıldığında, browser problem yaratabilir. "Tablo içinde tablo" kavramı sıkça kullanılan ve resimleri birleştirmek amaçlı da tercih edilen işlemler arasında yeralır.

Tablosuzluk

Tablolar olmasaydı öğelerin yerleştirilmesinde büyük problemler yaşanacaktı. Özellikle resimlerin birleştirilmesinde ve gerektiğinde piksel piksel oynama yapılabilmesi sebebiyle, tablolar büyük önem taşımaktadır. Örneğin tabloların çerçeveleri etrafına belirli pikselde boşluklar verebilmek mümkündür. Bunun dışında tabloların arkalarına resim ya da herhangi bir renk verebilme olanağı da bulunmaktadır. Bu durum tabloların kullanım alanlarını daha da genişletmektedir. Dağınık yazıları ya da resimleri düzenli bir şekilde tasarlayabilmek için de tablolar kullanılmaktadır. Bu özelliklerin dışında tabloların oluşturulmasında yanyana, altalta ya da üstüste yerleşecek şekilde tabloları istenildiği gibi çoğaltabilmek mümkündür.

Table komutu

Table komutu yakından incelenecek olursa birçok parametresi bulunduğu görülebilir. Komutun en basit şekli:

< table>< /table>

olarak gösterilebilir. Bu komuta eklenebilecek parametreler arasında:

width="1"
border="1"
cellspacing="3"
cellpadding="2"
align="CENTER"
valign="TOP"
bgcolor="Red"
bordercolor="Black"

bulunmaktadır. Bu parametrelerin kısaca açıklamasını yapmak gerekirse;

"Width" tablonun genişliğinin piksel olarak belirtilmesidir. Tablo, belirlenecek bu değerden büyük olamayacaktır.
"Border" tabloda kullanılacak olan çerçevenin piksel olarak kalınlığıdır. Border=0 değerinin parametre olarak girilmesi çerçevenin bulunmaması ve dolayısıyla görünmemesini sağlayacaktır. Bu border parametresinin hiç kullanılmamasıyla aynı işlevi görür.
"Cellspacing" parametresi, tablonun içinde bulunan kutuların birbirleri arasındaki mesafeyi piksel olarak belirler. Bu değer boşluk mesafesinin değeridir.
"Cellpadding" parametresi de aynı şekilde tablonun içinde bulunan öğelerin etrafındaki yakınlık mesafesi değeridir.
"bgcolor" parametresi tablonun zeminindeki rengi html kodlarıyla belirlenmesini gerçekleştirir.
"bordercolor" parametresiyse, çerçevelerde kullanılacak renkleri belirler.

< tr>< /tr>
ve
< td>< /td>

komutları tablolarla kullanılan ve tablonun tüm detayını ortaya çıkaran parametrelerdir. < tr> parametresi tabloya dikey olarak kutucuk ekleyebilmek için gerekli olan komuttur. Aynı şekilde < td> komutu, yatay olarak tabloda kutu ekleyebilmek için kullanılan komutlardan biridir. Kullanım şekli şu şekildedir :

< tr>
< td>< /td>
< /tr>

Bu iki parametre birbirine benzer ancak farklı biçimde kullanılmaktadır. < tr> komutu < td> komutundan önce girilmektedir ve sonra bitmektedir. Yanyana iki kutu yapabilmek için:

< tr>
< td>< /td>
< td>< /td>
< /tr>

şeklinde yazılması gerekmektedir. Üstüste altalta 2 kutu oluşturmak için de:

< tr>
< td>< /td>
< /tr>
< tr>
< td>< /td>
< /tr>

şeklinde yazılmalıdır.

Imagemap'ler

Imagemap kavramıyla artık grafik tasarım programlarıyla hazırladığınız resimleri bölümlere ayırabilir, bu bölümleri de ayrı ayrı sayfalara bağlayabilirsiniz. Örneğin kocaman bir dünya haritası çizebilir, bu haritayı da ülke ülke ayırarak hazırladığınız ülkelere ait sayfalarınıza bağlayabilirsiniz. Böylece kullanıcıları uzun liste ve metinlerle sıkmamış olursunuz.

Imagemap'in Tasarlanması

Bir web sayfasındaki imagemap üç ana bölümden oluşur: Resim, resmin daha önceden tasarlanmış bölümleri ve bu bölümlerin bağlantıları. Kullanılan resim, grafik tasarım programlarıyla yarattığımız, genellikle .GIF ya da .JPG formatında saklanan normal bir resimdir. Resmin bölümleri ise kullanıcının tıkladığı noktanın, önceden belirlenmiş bir HTML dokümanına bağlanmasında kullanılır.Imagemap verilerinin nasıl tutulacağını ve uygulanacağını, kullanılan imagemap'in türü belirler. İki tip imagemap vardır: Kullanıcı - taraflı (client - side) ve sunucu-taraflı (server - side).

Kullanıcı - taraflı imagemap'lar HTML dosyalarının içinde saklanır ve web tarayıcıları (browser) tarafından doğrudan yorumlanır. Kullanıcı map'in bir bölümüne tıkladığında, web tarayıcısı sunucuyla herhangi bir bağlantı kurmadan ne yapılacağına kendisi karar verir.

Sunucu - taraflı imagemap'ler ise web sunucuları tarafından yorumlanır. Kullanıcı, sunucu - taraflı bir imagemap'e tıkladığında istemci tıklanan noktanın koordinatlarını sunucuya gönderir ve sunucudaki imagemap programı map'i inceleyerek bağlanılacak olan dosyayı belirler. Bir imagemap'in bölümlerinin üstüste geçme durumunda hangi şeklin kullanılacağı önceden belirlenmelidir. Bir kullanıcı - taraflı map'te, bölümler 'NOHREF' olarak tanımlanabilir. Bu şekilde tanımlanmış bir bölüm diğer bölümlerle çakışırsa, çakışan kısım diğer bölümlerden çıkarılır. Böylece bu bölümün hiçbir etkisi olmaz.

Hangisini Kullanmalıyım?

İkisini de. Eğer bir kullanıcı, kullanıcı - taraflı imagemap'leri desteklemeyen bir web istemcisiyle sayfanıza bağlanırsa, hazırladığınız map'i kullanamayacaktır. Ancak Netscape Navigator ve Internet Explorer gibi en yaygın web tarayıcıları, tarayıcı - taraflı imagemap'leri destekliyorlar. Unutmamamız gereken bir başka faktör de hazırladığınız imagemap'in alternatif metin sürümünün hazırlanması gerektiğidir. Çünkü internet bağlantı hızının düşük olduğu durumlarda, resmin yüklenmesi uzun zaman alabilir ve kullanıcılar resmin yüklenmesini beklemek istemeyebilir.

Kullanıcı - Taraflı Imagemap'ler

Artık grafik tasarım programlarından biriyle hazırladığımız ve bölümlerini kafamızda tasarladığımız resmi, HTML kodunu da ekleyerek bir kullanıcı - taraflı map haline getirmeye hazırız.

 

KOMUT	TANIMI
SHAPE	Map'in bölümleridir (default, rect, circle ve poly değerlerinden birini alabilir).
COORDS	Bir bölümün image üzerindeki konumunu belirtir.
HREF	Bir bölümün hangi sayfayı gösterdiğini belirtir.
NOHREF	Bir bölümün hiçbir etkisi olmadığını gösterir.
ALT	Tanıtım amaçlı kısa metin.
TABINDEX	Tab sıralamasını belirler.
ONFOCUS	O anda odaklanan bölüm
ONBLUR	O anda odaklanmayan bölüm
USEMAP	Hangi map'in kullanılacağını belirtir.

Imagemap'i bölümlere ayırmak için kullandığınız şekiller dikdörtgen, çember ve poligon'dan biri olabilir. Eğer dikdörtgen kullanacaksanız 'COORDS' a vereceğiniz değerler (sol_X, üst_Y, sağ_X, alt_Y); eğer çember ise (merkez_X, merkez_Y, yarıçap) olmalıdır. Poligon ise (BirinciKöşe_X, BirinciKöşe_Y, İkinciKöşe_X, İkinciKöşe_Y,...) şeklinde tanımlanır.

İlk Imagemap'imizi Yaratalım

< html>
< head>
< title>IMAGEMAP DENEME< /title>
< /head>
< body>
< map name='map_deneme'>
< area shape='rect' coords='29,44 158,96' alt='buraya kısa bir açıklama yazınız' href='link1.html'>
< area shape='circle' coords='193,34 263,105' href='link2.html'>
< area shape='poly' coords='75,188 143,132 219,188 75,188 ' href=link3.html'>
< area shape='default' nohref>
< /map>
< img border='0' src='map1.gif' usemap='#map_deneme'>
< /body>
< /html>

HTML dokümanında, map'e verdiğimiz isimle (map_deneme) 'img' kısmında usemap'in aldığı değerin (#map_deneme) aynı olduğuna dikkat edin. Siz de bilgisayarınızda bu ismi değiştirerek ve 'src' kısmında hazırladığınız resmi kullanarak kendi imagemap'inizi yaratabilirsiniz.

Frame Kullanmak

Sayfanızda frame uygulamasına geçmeden önce hemen bu özelliğinin HTML 3.0 standartlarında bulunmadığını fakat en yeni web tarayıcıları tarafından desteklendiğini belirtelim. Netscape Navigator'ın 2.0 ve Microsoft Internet Explorer'ın 3.0 ve daha üstü sürümleri frameleri destekliyor.

Frame'leri destekleyen bir sayfa oluşturuyorsanız mutlaka sayfanın, bu özelliği desteklemeyen web tarayıcıları için bir alternatifini oluşturmalısınız, aksi takdirde sitenize terminal ekranından veya eski bir web tarayıcıyla bağlanan kimseler içerikten faydalanamayacak ve sayfa ziyaret sayınıza katkıda bulunmayacaklardır (!) Frame'lere nasıl alternatif oluşturulduğunu yazımızın ilerki bölümlerinde anlatacağız. Başlamadan önce herkesin yaptığı gibi frame'ler konusunda 1-2 örnek verip sadece TAG'ları açıklamayacağımızı belirtelim, aynı zamanda kendi özgün çerçevelerinizi oluşturmanız için işin mantığına da değineceğiz.

Frame'ler ne zaman kullanılmalıdır?

Hiç gereği olmadığı halde web sayfanızda frame'lerden faydalanmak hem sayfanızın işlevselliğini yok edip kullanıcının kafasını karıştıracak hem de sayfanın yüklenmesini zorlayacaktır, web tarayıcınız bir web sayfasının yüklenmesi için sunucudan komutlar aldığından en az iki sayfadan oluşacak çerçeveli bir sayfayı yüklemek için ana sayfa da içinde olmak üzere üç sayfa için ayrı ayrı sunucudan bilgi alacaktır. Sayfa içerisinde, yüklenmesi uzun süre alacak, büyük bir resim, menü gibi değişmeyen öğeleri her seferinde tekrar yüklememek için bu bölümler ayrı bir pencere olarak tanımlanabilir.

Sayfa içerisinde ilişkilendirmeler oluşturmak, sayfanın değişik alanlarına tıklandığında bağımsız bir yerde bir içerik oluşturmak frame'ler sayesinde çok kolaydır.

Nasıl oluyor da frame oluyor?

Frame'lere sahip bir sayfa oluşturmaya başlamadan önce web tarayıcılarında bu teknolojiyi destekleyen iki rakip firmanın ortak olarak kullandığı komutları açıklayalım.

<FRAMESET>

Bu tag, yatay ve dikey pencerelerin tanımına "başlamak" için kullanılır. Tag ile birlikte kullanılabilecek iki adet takı vardır ki bu takılar oluţturulacak pencerelerin cinsini belirler.

COL takısı dikey nitelikte ROW takısı yatay nitelikte bir pencere oluşturmak için kullanılır.

<FRAMESET COL="100,50,*> komutu bundan sonra üç sayfanın tanımı yapılacağını, bu sayfaların kolon nitelikli olacağını, bunlardan iki tanesinin sabit uzunluklu, üçüncüsünün uzunluğunun ise değişebilir olduğunu gösterir. Tırnak içinde sabit bir sayı ve yıldız kullanabileceğiniz gibi "%30,%70" bir yüzde değer de belirtebilirsiniz, bu durumda frame'in boyutu sayfanın boyutu göz önüne alınarak otomatik olarak ayarlanır. <FRAMESET> takısı </FRAMESET> ile bitirilmeden önce iç içe kullanılarak komplike pencere tanımları yapmanıza izin verir.

<FRAME>

Bu tag ise <frameset> ile başlayacağınızı belirttiğiniz sayfaları oluşturmakta kullanılır ve sayfanın genel yapısını belirler. <frame> takısının iki web tarayıcısının da desteklediği 6 adet takısı vardır.

SRC="URL/DOSYA_ADI" Pencere içerisine yüklenecek dosyayı seçmek için kullanılır. Bu değer sunucu içinde herhangi bir dosya olduğu gibi değişik bir Internet adresi de içerebilir.

NAME="FRAME_ADI" Daha sonra sayfayı çağırmak için referans olarak kullanılacak isim bu değere atanmalıdır.

MARGINWIDTH="DEĞER" Sayfadaki ilk nesnenin soldan ne kadar uzak olacağını belirler.

MARGINHEIGHT="DEĞER " Sayfadaki ilk nesnenin yukardan ne kadar uzak olacağını belirler.

SCROLL=AUTO/YES/NO Kaydırma çubuklarının durumunu belirler.

NORESIZE Pencerenin fare yardımıyla genişletilip daraltılamamasını sağlar.

<NOFRAME>

Bu takı iki çerçeveyi oluşturacak sayfada kullanılır ve frame'leri desteklemeyen web tarayıcısında sayfanın görünümünü oluşturur. Web tasarımcısı <noframe> ve </noframe> takıları arasına <HTML>, <BODY> tag'larını barındıran tam bir HTML sayfası girebilir.

Son olarak frame'leri tanımlayan sayfada bulunmayan fakat frame'in tanımladığı sayfaya koyabileceğiniz bir tag daha vardır. <BASE TARGET="pencere"> tagı o pencere içerisinden bir link'e tıklandığında kaynağın hangi pencerede açılacağını belirler.

Framelerde nelere dikkat etmeli ?

Frame'lerin kullanımını ve komutlarını anlatırken dikkat etmeniz gereken unsurların bir kısmındanbahsettik, ama yine de Internet üzerinde rastladığımız sayfalarda sık yapılan hataları belirtelim. Böylece siz de ilk deneyimlerinizde bu hatalardan kaçınabilirsiniz.

Frame içindeki bir sayfada dışarıya bir referans bulunuyorsa <A HREF="… ile başlattığınız tag içinde mutlaka TARGET="_TOP" veya TARGET="_BLANK" takılarını kullanın. Bunu yapmazsanız frame'li sayfanız içinda başka bir frame'li sayfa açılması veya küçücük pencerenize sığmayacak bir sitenin yüklenmesi kaçınılmaz olur.

Frame'inizi tasarlarken kaydırma çubuklarının otomatik olmasına özen gösterin. Sayfanın içerisinde yeterince içerik olmasa bile sayfa kenarlarında kaydırma çubuklarının bulunması kullanıcıya rahatsızlık verecektir.

Frame'lerin içeriğini her zaman iyi kontrol edin. Çerçevelerden birini menü olarak kullanıyorsanız o çerçeve içerisinde yanlışlıkla başka bir sayfanın açılmasına mahal vermeyin.

Pencerelerden bir tanesini "kaydırılamaz" olarak atıyorsanız ya bu frame'in genişliğini ve yüksekliğini sabit olarak atayın ya da sayfayı 640*480 çözünürlüğe uygun olarak tasarlayın. Bunu uygulamazsanız

640*480 çözünürlükte frame'in içeriğinin bir kısmının görülmesi kullanıcı ne yaparsa yapsın mümkün olmayacaktır.

Değişik frame stilleri için kaynak kodlar

<FRAMESET COLS="100,*"> <FRAME SRC="1.htm" NAME="1"> <FRAME SRC="2.htm" NAME="2"> </FRAMESET>
<FRAMESET ROWS="100,*"> <FRAME SRC="1.htm" NAME="1"> <FRAME SRC="2.htm" NAME="2"> </FRAMESET>
<FRAMESET ROWS="100,*"> <FRAME SRC="1.htm" NAME="1"> <FRAMESET COLS="100,*"> <FRAME SRC="2.htm" NAME="2"> <FRAME SRC="3.htm" NAME="3"> </FRAMESET> </FRAMESET>
<FRAMESET COLS="100,*"> <FRAME SRC="1.htm" NAME="1"> <FRAMESET ROWS="100,*"> <FRAME SRC="2.htm" NAME="2"> <FRAME SRC="3.htm" NAME="3"> </FRAMESET> </FRAMESET>
<FRAMESET COLS="100,*"> <FRAME SRC="1.htm" NAME="1"> <FRAMESET ROWS="100,*"> <FRAME SRC="2.htm" NAME="2"> <FRAME SRC="3.htm" NAME="3"> <FRAME SRC="4.htm" NAME="3"> </FRAMESET> </FRAMESET>

İki kişiye birden e-mail yollamak

Aşağıdaki satırları HTML sayfasına girip sayfaya Web tarayıcınızla baktığınızda ekranda içinde "E-Mail yollamak için tıklayın!" bir buton göreceksiniz. Muhteşem Web sayfanızı ziyaret eden şanslı kullanıcılar bu butona bastığında artık karşılarına gelecek e-mail penceresinin "cc:" bölümünde arkadaşınızın e-mail adresini konu bölümünde ise "deneme" yazısını görecekler.

<FORM>
<INPUT TYPE="button" VALUE="E-Mail yollamak için tıklayın!"
onClick="parent.location='mailto:cenk.tarhan@owenonline.cjb.net? subject=deneme&cc=cenk.tarhan@owenonline.cjb.net'">
</FORM>

Web Sayfasını Enüstte Tutmak

Web sitenizde kolay gezinme sağlamak için bir pencere içerisinde navigasyon menüsü hazırladınız. Fakat bu menü hep arka planda kalarak işlevini yerine getiremiyor. Sizin istediğiniz ise bu menünün her zaman üstte kalması ve kullanıcının kolayca ona erişmesi.

Bir Web sayfasını her zaman üstte tutmak çok kolaydır, tek yapmanız gereken onBlur="self.focus()" ifadesini BODY tag'ının içine yerleştirmektir. Bu ifadenin kullanılmasını aşağıdaki örneğimizde bulacaksınız. Öncelikle navigasyon sayfamızı ateşleyecek bir sayfa oluşturalım:

<HTML>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function topWindow(){
popup = window.open("dirinfo.htm","","height=175,width=300,scrollbars=no");
}
// End -->
</SCRIPT>

<FORM>
<INPUT TYPE="BUTTON" VALUE="Pop-Up" onClick="topWindow()">
</FORM>
</HTML>

Şimdi ise gezinme menüsünü oluşturan kodları hazırlayalım:

<HTML>
<BODY onBlur="self.focus()" bgcolor=ffffff>
Burada gezinme için gerekli olan kodlar bulunacak...

Arama Motorlarına Yardımcı Olun

<META name="description"  content="Sitenizin amacı, kısa açıklaması, sloganı">
<META name="keywords"  content="sitenizdeki bölümler, anahtar kelimeler" >
<META name="copyright"  content="Telif sınırlamaları ve tanımları" >

Linkler / Bağlantılar...

Linklerde Dikkat Etmeniz Gerekenler

• Bir kısayol oluşturduktan sonra mutlaka ' Acaba bir hata yapmış mıyım?' diyerek kısayolu kontrol edin. Bozuk kısayolların sitenizin ziyaret sayısını ve itibarını zedeleyeceğini unutmayın.
• Sonradan doldururum diye kısayolu önceden yerleştirmeyin. Sitenin başına ' inşa aşamasında' yazsanız bile yapmadığınız bölümlerin linklerini koymayın. Bunun yerine hazırladığınız bölümleri kısayol oluşturmaksınız Web sayfasına yerleştirin.
• Sitenize bulunduğunuz makineden FTP programıyla uzunca bir shareware yolluyorsunuz diyelim. Shareware'inizin kısayolunu önceden yollamayın, geçen zaman süresince sitenize bağlanıp o program ile ilgilenenler ' 404 Not Found' hatası ile karşılaşırlar.
• Internet adresi verirken başına http://, mail adresi verirken başına mailto: koymayı unutmayın. Bunu yapmazsanız verdiğiniz www.owenonline.cjb.net veya cenk.tarhan@owenonline.cjb.net gibi bir adres lokal bir dosya olarak görülür ve linkine tıklayınca doğal olarak hata verir.

Internet kısayollarını ve resimlerin kısayollara atanması için nasıl kullanıldığını öğrendik...

Lokal çalışmada püf noktası

Üzerinde çalıştığınız HTML sayfası C:\PROJE\1 klasöründe olsun, sizin de C:\PROJE klasöründeki DENEME.HTM sayfasını çağırmak istediğinizi varsayalım. Bu dosyayı çağırmak için şöyle bir satır kullanmalısınız:

<A HREF=" ../DENEME.HTM" >KISAYOL DENEME.HTM</A>

../ ifadesini istediğiniz kadar kullanabilirsiniz. İki alt klasördeki dosyayı çağırmak için ../../DENEME.HTM gibi bir ifade kullanabilirsiniz. Bir üst klasördeki (C:\PROJE\1\BASKA\SAYFA.HTM gibi) dosyayı çağırmak için ise şöyle bir yol izlemelisiniz:

<A HREF=" BASKA/SAYFA.HTM" >KISAYOL</A>

Eğer bir Web sunucusu üzerinde çalışıyorsanız ve sabit diskinizin tümü veya bir alt dizinini Web sayfalarınız için tanımlanmışsa kök dizine inmek ve buradan başka bir klasöre geçmek için / karakterini kullanabilirsiniz. Örneğin
<a href=" /GIRIS.HTM" >GIRIS</a> satırı sizi web için ayrılan bölümün en dibine kadar indirecek ve GIRIS.HTM dosyasına kısayol oluşturacaktır. Bunun gibi resimler dizinindeki bir resmi çağırmak için
<img src=" /resimler/pcmagazine.gif" > gibi bir ifade kullanmalısınız.

Alt çizgisiz ve aktif kısayollar

Alt çizgisiz bir kısayol oluşturmak için <A HREF… takısının içinde bir stil tanımı kullanmanız yeterli. Bu stil takısını kullandığınızda hem kısayol alt çizgisiz olacak hem de ziyaret edildikten sonra rengi değişecek.

<p>Alt çizgisiz kısayol:<br>
<A HREF="http://www.owenonline.cjb.net" STYLE="text-decoration: none">PC Magazine Online</a><p>

Dilerseniz bir adım daha ileri giderek altı çizili olmasına rağmen üzerine gidince rengi değişen bir link oluşturalım. Bunu yapmak için uzun kodlar kullanmaya gerek yok sadece onmouseover özelliğini kullanmak yeterli.

<p>Aktif ve normal kısayol:<br>
<A HREF="http://www.owenonline.cjb.net" onmouseover="this.style.color='#CC0000'" onmouseout="this.style.color='blue'">PC Magazine Online</a>

Şimdide hem altçizgisiz hem de üzerine gelince renklenen bir link kullanalım. Tahmin edebileceğiniz gibi hem onmouseover hem de STYLE özelliklerini kullanacağız.

<p>Aktif ve alt çizgisiz kısayol:<br>
<A HREF="http://www.owenonline.cjb.net" STYLE="text-decoration: none" onmouseover="this.style.color='#CC0000'" onmouseout="this.style.color='blue'">
PC Magazine Online</a>

"Çerezler" ile ziyaretci sayısını öğrenmek

Sayfanızı ziyaret eden kullanıcının sabit diskinde bilgi tutmak çok kolaydır. Aşağıdaki Javascript, kullanıcının ziyaret sayısını yine kullanıcının sabit diskinde tutar ve kullanıcının her yeni ziyaretinde sayıyı bir arttırır. Çerezler hakkında daha çok bilgiyi ilerki sayılarımızda bulacaksınız, yine de merakınızı gidermek istiyorsanız http://www.netscape.com/newsref/std/cookie_spec.html adresini ziyaret edebilirsiniz.

<html><head>
<script>
cookie_name = "Counter_Cookie";
function doCookie() {
if(document.cookie) {
index = document.cookie.indexOf(cookie_name);
} else {index = -1;}
if (index == -1) {
document.cookie=cookie_name+"=1; expires=Tuesday, 01-Apr-1999 08:00:00 GMT";
} else {
countbegin = (document.cookie.indexOf("=", index) + 1);
countend = document.cookie.indexOf(";", index);
if (countend == -1) {countend = document.cookie.length;}
count = eval(document.cookie.substring(countbegin, countend)) + 1;
document.cookie=cookie_name+"="+count+"; expires=Tuesday, 01-Apr-1999 08:00:00 GMT";}}
function gettimes() {if(document.cookie) {
index = document.cookie.indexOf(cookie_name);
if (index != -1) {
countbegin = (document.cookie.indexOf("=", index) + 1);
countend = document.cookie.indexOf(";", index);
if (countend == -1) {
countend = document.cookie.length;}
count = document.cookie.substring(countbegin, countend);
if (count == 1) {
return (count+" kere");
} else {return (count+" kere");}}}
return ("0 kere");}
</script>
</head>

<body onLoad="doCookie()">
<center><script>
document.write("<b>Merhaba! Bu sayfaya daha önce "+gettimes()+" uğradınız.</b>");
</script></center>

Hangi tarayıcıyı kullanıyor

Internet üzerindeki herhangi bir siteden sayfanıza gelen kullanıcı bu kodlar sayesinde geldiği adresi, Web tarayıcısının tipini ve sürümünü öğrenecektir. Kullanıcının geldiği adresi öğrenmesi için muhakkak bir web sunucusundan bağlanması gerekmektedir.

Sayfanıza lokal bir web sayfasından tıklayarak gelen kullanıcılar 1. Satırı boş göreceklerdir. Verdiğimiz örnek kodları değiştirerek sayfanıza bağlanan kullanıcının geldiği siteye geri dönmesi için bir tuş koyabilir, web tarayıcısının cinsine göre değişik içeriklere ulaşmasını sağlayabilirsiniz.

<HTML>
<HEAD><TITLE>Hangi Tarayıcı?</TITLE></HEAD>

<FONT SIZE=+1 FACE=ARIAL>
<SCRIPT LANGUAGE="JavaScript">
var where = document.referrer
var name = navigator.appName
var vers = navigator.appVersion
document.write("Sizi buraya yollayan adres: "+where+" <P>Kullandığınız tarayıcı: "+name+" <BR>"+vers+" ")
</SCRIPT>
</CENTER>
</HTML>