içindekiler:
1 HTML komutları vekullanımları
1.1 Temel web tasarımı bileşenleri: html, head, title, meta ve body
1.2 Renkler, body, font, ve h1..h6
1.3 Yazıları biçimlendirmek: kalın, yatık, ortalanmış, vs. ...
1.4 Web sitesi sayfalarında resim göstermek
1.5 HTML sayfasına bağ (link) yerleştirmek
1.6 Bağlar yardımıyla etkileşimli kullanım örneği
1.7 Web tasarımı ekran düzenine ilişkin daha çok komut:
1.8 Sayfalarda tablo kullanımıyla website tasarımları yapmak
1.9 Basit bir HTML sayfası için gereken son noktalar
2 İleri düzey web design bilgilerindenseçmeler
2.1 Sayfalara 'meta' komutu ile kimlik vermek
2.2 Resimlerde 'MAP' kullanarak yapılan web tasarımı
2.3 Dinamik HTML ile web tasarımı
1 Web Tasarimi HTML Kodlari ve Kullanimlari:
1.1 Temel bileşenler: html, head,title, meta ve body
Web tasarımı yaparkenbir WEB sayfasının ilk karşılaşacağımız standartbileşenleri şunlardır:
<html> ve </html> :sayfanın başlangıç ve bitişini belirtir.
<head> ve </head> :sayfanın başlık bilgileri 'title', 'meta' vs. burayayerleştirilir.
<title> ve </title> :sayfanın içeriğinin ne olduğunun tanıtılmasında kullanılır. Sayfadagörünmez ama Firefox ya da Internet Explorer bunu sayfayıtanımlamakta kullanır.
<meta> : sayfanın içeriğihakkında www tarayıcılarına bilgi sağlamak,arama motoru ve arama motoruna kayıt için gereklidir.
<body> ve </body> :sayfanın içeriğinin başlangıç ve bitişini belirtmekte ve sayfahakkındaki genel tanımlamaları yapmakta kullanılır.
Yukarıdaki bu komutların, bir websitesi içindeki sıraları aşağidaki gibidir. Bir yazı editörü(joe, pico, xedit, edit, notepad vs.) ile ilk örneğimizi yazarsak:
<html>
<head>
<title>Bir HTML Denemesi</title>
<meta name="description" content="html sayfası için bir kullanımörneği"> </head>
<body bgcolor=white>
'Bu sayfa inşa halindedir', ya da 'this page is under construction'web sitelerinde ille de olması gerektiği düşünülen saçmayazılardır. </body>
</html>
Aslında en basit web sayfası şöyleolabilir:
<html>
Benim neyim eksik?
</html>
sondaki '</html>' yi koymasakdahi www sitesi gosterici programı (Firefox, Opera, IE, ...) bunu bir HTMLsayfası olarak yorumlayacaklardır.
1.2 Renkler, body, font, veh1..h6
Önceki örnekte '<bodycolor=white>' diye, aşağıdakinin basitlestirilmiş biçiminikullanmıştık:
<body font=purplebgcolor=#FFFFFF text=black link=blue vlink=#808090>
Burada font ile kullanilan genelyazıların rengi,
bgcolor ile arkaplan rengi,
text ile tanımsız yazıların rengi,
link ile üzerine gelince el hareketi çekilen yazıların rengi,
vlink ile de seçilmis bağların rengi belirlenir.
renk belirtmek için o renginİngilizce adı ya da RGB değerleri onaltılık sistemde verilir. RGBdeki sıraya göre 00-FF arası üç değer kullanılır. Hepsi sıfır isehiçbir renkten karıştırılmaz. hepsi FF ise her renk maksimum orandakullanılır ve beyaz elde edilir.
Örneğin salt bir kırmızı #FF0000 ile elde edilir.
<font color=...> ve</font> arasındakı yazılar belirtilen renkteyazılır.
<h1> ve </h1> den<h6> ve </h6> ya kadar standard yazı tiplerinden biriseçilerek yazı yazılır. h1 ile belirtilenler h6 iletanımlananlardan daha büyüktür.
örneğin:
<html>
<h1>Sayfa başlığı için uygun büyüklükteharfler</h1>
<h4>Bu harfler sanırım yazı için yeterliler</h4>
<h6> Gözleriniz bozuk değilse, ve her gün A vitaminialıyorsaniz bu yazı sizin için okunabilir olmalı.</h6>
</html>
1.3 Yazıları biçimlendirmek:kalın, yatık, ortalanmış, vs. ...
Önceki web tasarımı örneğinde <h1>,<h2>, ... ile yazıların büyüklüklerini ayarlamanın basit biryolunu görmüştük. HTML web sayfamızın yazılarına biraz daha kişilikkazandırmak için aşağıdaki komutları da kullanabiliriz.
<b> ve </b> arasındakiyazılar koyu görünür.
<i> ve </i> arasındakiyazılar ise italik basılır.
<blink> ve </blink>arasındaki yazılar ise yanıp söner.
<center> ve </center>arasındaki yazılar ortalanır.
<pre> ve </pre> ilesınirlanan yazıların göruntüsünde ayarlama yapılmaz. Yani birdenfazla boşluk varsa bunlar bir tane olacak şekildeazaltılmaz.
<p> paragraf başı yapmak içinkullanılır.
<br> bir satır atlamak içinkullanılır.
<hr> bir çizgi çeker.
1.4 Sayfada resim göstermek
En basit şekliyle, bir sayfayaresim koymak için aşağıdaki komut şu şekilde;
<img src="dosya-adi" alt="..."align=... >
kullanılır.
Burada dosya-adı gösterilecekgrafik dosyasının (png, gif ya da jpg tipinde) bulunduğu yer ve adıdır.Bağlanılan html sayfası ile aynı dizinde bulunan resimler için yeradı belirtmeye gerek yoktur.
Alt ile ise lynx kullanıcılarınıngörebileceği bir açıklama yazmış oluruz.
Align ile de resmin konumunubelirleriz.
Örneğin:
<img src=resim.gifalign=right> ile resmin sağa yanaşık olarak çizilmesinisağlarız. 'right' yerine 'left', 'center', 'middle' gibi konumbildirici bir başka sözcük de kullanılabilir.
Ayrıca yukarıdakilere ek olarak'border', 'width', 'height' belirteçlerini de <img ...... >içinde kullanabiliriz. Bunlardan 'border='i kullanarak resminçerçevesini belirleriz; border=0 dersek hiç çerçeveçizilmez.
Width ve height ile resminboyutlarını belirleyebiliriz. Bunlardan sadace birini verirsek,resmin boyutu orantılı olarak çizilecektir. Yani <imgsrc=resim.gif width=300> demişsek, ve de resmimiz aslında 100nokta genişliğinde 50 nokta yüksekliğinde idiyse, ekrana 300 noktaeninde ve 150 nokta yüksekliğinde çizilecektir. Her iki değeri de(width=... height=...) kullanmışsak, resmin oranını istediğimizgibi değiştirmek mümkün olur.
Bu arada, sayfanın internettenindirilirken hızlı gösterilmesini istiyorsak, her resmin width veheight özelliklerini kullanmalıyız. Bu sayede browser (gösterici)programınız resimlerin yüklenmesini beklemeden çevrelerine yazılarıyerleştirebilecektir.
Sayfanın hızlı geliyor gibigörünmesini sağlamanın bir yolu da 'lowsrc' belirtecini <img.....> içinde kullanmak. Web tasarımı yaparken eğer kullandığımız resimlerin bir debulanık/niteliksiz/siyah-beyaz ama az yer tutan bir benzerini dahayapar, ve bunu <img src="resim.gif" lowsrc="hizliresim.gif"alt="[resim]"> şeklinde tanımlarsak, ilk önce hizliresim.gifyüklenip gösterilecektir. Bu sayede bulanık iken yavaş yavaşnetleşmeye başlayan resimler belirir sayfamızda. Bunun yararı isesayfanıza bakan kişinin çabuk karar vermesini sağlıyorolmasındadır.
1.5 HTML sayfasına bağ (link)yerleştirmek
<a> ve </a> : HTML'nintemeli olan bu komutlarla bağ (link) yapılır.
<a href="hedef bağ"> Açıklama</a> Biçiminde kullanılır.
Açıklama denilen kısım ister yazıister bir grafik ya da herhangi bir nesne olabilir. "hedef bağ"kısmı ise yerel kaynakları gösteren bir dosya adı ya da uzak birmakinedeki bir başka nesneyi (yazı, grafik, video vs.) gösteren birbağ (link) olur.
Bu linkler, mevcut internetaraçlarından biridir.
Örneğin:
http:// ftp:// telnet:// gopher:// news:// bu araçlardanbazılarıdır.
Bunu kullanırken;
<ahref="telnet://orca.cc.metu.edu.tr/> Orca'ya Netscape içindenbağlanmak için buraya tıklayın</a>
yazarak, telnet aracını bir bağ(link) olarak sayfamıza yerleştirmiş oluruz.
Ya da;
<a href="resmim.jpg">NeyeBenzediğimi Görmek İçin Buraya Bas</a>
Yukarıda adı geçen resim bu websayfası ile aynı dizinde (directory) olmalıdır.
Başka şekilde örnekler ise:
<ahref="ftp://ftp.metu.edu.tr/pub/cica-win95/"> Windows95 içinUygulama dosyaları</a>
<ahref="nntp://news.metu.edu.tr/> Netnews 60000 den fazla konudainsanların yazıştığı bölge</a>
<a href="news:comp.sys.cbm">NetNews'in C64 bilgisayarlarına ilişkintartışmaları</a>
Ve, internetin en gözde kullanımı:bir web sayfasından başka bir web sayfasına bağlanma:
<ahref="http://www.physics.metu.edu.tr/~filker/nukleer/">Türkiye'de nükleer enerji tartışmaları</a>
dikkat ettiyseniz yukarıdakiörnekte sayfanın hangi dizinde oldugu (...ilker/nukleer/") belliama hangi dosyada oldugu yazılmamış. Böyle bir durumda web sunucuprogram dosyanın adının 'index.html' olduğunu öngörür.
Kendi dizininizdeki bir sayfaiçin:
<a href="ihd.html"> İnsanHakları Derneği ve pişmiş tavuk için burayatıklayabilirsiniz.</a>
1.6 Bağlar yardımıylaetkileşimli kullanım örneği
Web sitesinde bir bağa (link) ard arda tıklamakyoluyla, slow motion biçiminde ardışık resim gösterebilirsiniz. Bukullanım en basit şekliyle bir Bilgisayar Destekli Eğitimsayfasında kullanılabilir. Amaç, kullanıcıya konuyu belli birsırayla vermek ve konu içindeki ilişkilerin anlaşılmasınıkolaylaştırmak.
Bunu yapmak için, önce tek birresim ve o resmin link olarak tanımlandığı bir web sayfası tasarımı yapmalısınız:
<html>
<title>sayfa1</title>
<body>
<a href="sayfa2.html"><imgsrc="resim1.gif"></a>
</body>
</html>
sonra da ikinci sayfa dahazırlanmalı:
<html>
<title>sayfa2</title>
<body>
<a href="sayfa3.html"><imgsrc="resim2.gif"></a>
</body>
</html>
... bu şekilde devam edilir.
ve ilk sayfa yüklendikten sonraresmin üstüne tıklandığında ikinci sayfa ve içindeki resimyüklenir.
İyi hazırlandığında, bu basit HTMLkullanım şekli ile web-design-programcılığına (Java, cgi-bin, ...)bulaşmadan da etkili 'sunu' ve 'anlatılar' yapılabilir.
1.7 Ekran düzenine ilişkin dahaçok komut:
<multicol cols=2> ...</multicol> : Aradaki yazılar cols= ile belirtilen sütunlaraayrılarak ekrana basılırlar. Sadece Netscape3.0 ve üstünde çalışır.Sütun içindeki yazının sütunun ne kadarını kaplayacağını widthparametresi ile belirtiriz. <multicol cols=3 width=75%> gibi.Burada boşluğu yüzde yerine piksel olarak da verebiliriz. Ayrıcaiki sütun arasındaki boşluğu da gutter parametresi ile veririz:<multicol cols=2 width=500 gutter=25> yazılar...</multicol>
<spacer type=... size=...height=... width=... align=...> : Bununla paragraf başları içinboşluk bırakmak mümkün. Örneğin
<spacer type=block size=48> ile 48x48 piksellik bir boş karealan yaratmis oluruz. Burada block yerine vertical ya da horizontalkullanmak da olası. Ayrica, <spacer type=block width=320height=200 align=right> ile 320x200'luk bir boşluk yaratıp bunuekranda sağa dayatmış oluruz. Gene align komutundan sonra right,left, center, absmiddle gibi diğer konum belirteçlerinikullanabiliriz.
1.8 Sayfalarda tablokullanımı
Genel kullanım:
<table [seçenekler]>
<tr [seçenekler] ><td [seçenekler] > sütun 1 yazıları</td><td [seçenekler] >sütun 2</td><td>sütun 3.....</td> </tr>
<tr><td>2.satirin 1. sütunu</td><td>2.sütunu</td><td>3. sütunu</td></tr></table>
Tablolar satırlar ve sütunlarşeklinde ayrilmış hücrelerden oluşuyor. Her yeni satıra başlamakiçin <tr> etiketini, her yeni sütun için ise <td>etiketini kullanıyoruz.
Bir örnek web tasarımı ile incelersek:
<table border=1 width=200cellspacing=2 cellpadding=2> <tr>
<td align=top width="50%">Bellek tipleri</td> <tdalign=topwidth="50%">FPM<br>EDO<br>SDRAM<br>DDRRAM<br>RAMBus</td> </tr>
<tr>
<td align=top width="50%">Disk tipleri</td> <tdalign=top width="50%">MFM/RLL<br>ATA IDE<br>ULTRAATA<br>SCSI</td> </tr>
<tr>
<td align=top width="50%">İşlemci tipleri</td> <tdalign=top width="50%">RISC<br>CISC<br></td></tr></table>
Burada 2x3'lük bir tablooluşturduk. Tablomuz 1 pixel kalınlığında çerçeveye sahip(border=1), tablo sayfada 200 pixel genişliğinde yer tutacak(width=200), hücreler arası 2 pixel boş ve 2 pixellik bir kalınlıkefektimiz var (cellspacing ile cellpadding).
Örnekte hücre genişliklerin yazıuzunluğuna göre otomatik ayarlanmamsı için genişlikleri kendimizbelirledik (width="50%"). Bunu pixel olarak da belirlememizmümkündü: <td width="100"> ile.
Hücreler içindeki yazıların nasılyerleştirileceğini ise align="yer" ile belirtiyoruz. Burada "yer"yerine "top", "bottom", "left", "right" ve "center"kullanabiliriz.
Ve eğer, bir hücrenin iki hücregenişliğinde veya yüksekliğinde olmasını istiyorsak colspan verowspan seçeneklerini de kullanıyoruz. Önceki örneğe bir başlıkekleyecek olursak:
<tr><td align=centercolspan="2">Bilgisayar AnaBileşenleri</td></tr>
Tabloları içiçe de kullanmamızmümkün. Bu şekilde bir kullanımla bir www sayfasındaki resim veyazıları tam istediğimiz gibi konumlandırmamız mümkün olur.
1.9 Basit bir HTML sayfası içingereken son noktalar
Daha önce kısaca değinildiği gibi,ilk yüklenecek sayfanın adı standart olarak 'index.html' olarakbelirlenmiştir. Dolayısıyla ilk sayfanızı bu şekildeadlandırırsanız;
http://www.physics.metu.edu.tr/~filker/ilksayfa.html
yerine
http://www.physics.metu.edu.tr/~filker/ gibi, daha kısaolan, bir adres kullanabilirsiniz.
2 İleri düzey bilgilerdenseçmeler
2.1 Sayfalara 'meta' komutu ilekimlik vermek
Web sayfamızın Google, MSN Search, Slurp,Gigablast, Didikle vs. gibi tarayıcı programlar tarafındaniçeriğine uygun olarak dizinlerine aktarılmasını istiyorsak,<meta ...> komutunu kullanmak uygun duser. Ayrıca, gene bukomut sayesinde sayfamıza bağlanani bir başka www adresineyönlendirebilir, bu yolla bir takım hareketli sayfalar dahihazırlayabiliriz.
. Sayfanın kimliği:
Sayfayı tanımlamak için üç ayrımeta komutu yeterli. Bunlarla sayfa hakkında kısa bir paragraf,anahtar sözcük listesi, ve sayfayı hazırlayanin adınıverebiliriz.
<meta name="description"
content="Bu sayfada, Tüsiad raporunun üniversitelerde
gerçekleştirdiği değişim sonucunda, üniversitelerin birer
"bilgili-öğretim-işçisi" makinesi durumuna gelmesi
tartışılmaktadır.">
Yukarıda, sayfamızı kısaca tanıtmışolduk. Bu yazı, tarama sonucunda arayan kişiye gösterileceği içinkısa, öz, ve içeriğe uygun olması gerekir.
Tarayıcılar artık sayfanın tümündegeçen sözcüklere ve bu sözcüklerle ilgili diger sözcüklere bakarakarama yapsa da, sayfanızın hangi ölçütlere göre aranmasıgerektiğini sizden iyi kimse bilemez. Onun için, sayfayı tanımlayananahtar sözcukleri de şu şekilde verebiliriz:
<meta name="keywords"
content="üniversite, gelecek, tüsiad, öğrenim, öğretim, eğitim, 21.yüzyıl, Türkiy,e sermaye, yönetim, etki, rektör, özerk">
Ve, son kimlik bilgisi olaraksayfadan sorumlu kişiyi belirtiriz:
<meta name="author"
content="İlker Fıçıcılar">
Hazırladığımız bütün sayfalara butürden kimlik vermeyi alışkanlık haline getirirsek, internetiaraştırmaları için bir kaynak olarak kullananlara epey yardım etmişoluruz.
. Sayfa yönlendirme:
Eğer yakında www adresimiz geçersizolacaksa ve, yeni bir web hosting adresine şimdiden taşınmışsak, bunukullanıcalara önceden duyurmalı ve onları yeni adreseyönlendirmeliyiz. Bunun için eski sayfamızı şu şekildedeğiştirebiliriz.:
<html>
<title>Ilker's CBM Projects</title>
<meta http-equiv="refresh"
content="3;url=http://www.geocities.com/SiliconValley/Vista/5666/">
<body>
<h1><center>This page is moved to a newaddress<br>
<blink>http://www.geocities.com/SiliconValley/Vista/5666/</blink>
<br></center></h1>
<p><p><left>
<h3><font color=blue><br>If your browser does notdirect you to the new address in 3 seconds, then please
<ahref="http://www.geocities.com/SiliconValley/Vista/5666/">
click here</a>.
</font></h3>
</left></body></html>
Bu ornekte <metahttp-equiv="refresh" ...> diyerek, www gösterici programına yenibir sayfa yüklemesini istediğimizi belirtiyoruz.
Bu yüklemeyi kaç saniye sonrayapması gerektiğini '<meta ..' nin devamındaki'content="3;....">' yazısı ile belirliyoruz. Buradaki '3' yerinesaniye cinsinden herhangi bir süre belirtebilirsiniz. '0'yazarsanız, doğal olarak hemen diğer sayfayı yüklemeye başlar.
Yönelinen sayfanın adresi de, ' ...content="saniye; url=http://...">
biçiminde veriliyor.
Yukarıdaki örneğin gerekli kısmınıbir daha yazarsak:
<meta http-equiv="refresh"
content="3;url=http://www.geocities.com/SiliconValley/Vista/5666/">
Evet, burada kendi isteğimize göredeğistirecegimiz, yalnızca iki yer var: 3 sayısı ve url=işaretinden sonraki adres kısmı.
. Basit sayfa canlandırma
Eğer, yukarıdaki gibi bir 'meta'komutu içeren ardışık bir düzen içeren ayrı ayrı sayfalarhazırlarsak, ve 'meta' komutunun adres kısmına sıradaki sayfanınadresini verirsek, hayal gücümüz ölçüsünde hareketli web sayfalarıtasarımı yapabiliriz.
Örneğin birisi sayfamızabağlandığında, ekranda 3 2 1 şeklinde bir gerisayim görmesini veardından asıl sayfanın yüklenmesini istiyorsak, şu şekilde sayfalarhazırlarız:
Diyelim ki,http://www.physics.metu.edu.tr/~filker/
adresine bağlanılmasını istiyoruz. Bu durumda index.html dosyasına'3' sayısını koyup bu sayfayı sıradaki '2' rakamını içeren sayfayayönlendiririz. En sonunda da hiç bir yönlendirme içermeyen asılsayfamıza geliriz. Dolayısıyla, 'index.html' , 'A.html' , ' B.html', ' asil.html' adlarında dört sayfa hazırlamamız yeterliolacaktır:
index.html için:
<html>
<meta http-equiv="refresh"
content="1;url=http://www.physics.metu.edu.tr/~filker/A.html">
<body>
<h1><center> 3 </center></h1>
</body></html>
A.html için:
<html>
<meta http-equiv="refresh"
content="1;url=http://www.physics.metu.edu.tr/~filker/B.html">
<body>
<h1><center> 2 </center></h1>
</body></html>
B.html için:
<html>
<meta http-equiv="refresh"
content="1;url=http://www.physics.metu.edu.tr/~filker/asil.html">
<body>
<h1><center> 1 </center></h1>
</body></html>
ve son olarak asıl sayfamızıhazırlarız:
asil.html :
<html>
<body bgcolor=black text=red>
<h2>
Bu sayfa 'WWW Sayfama Hoş Geldiniz' yazısı içermemektedir
<br>
<p>
...
...
vs.
</h2>
<hr>
<p><h5>
sayfayı en son 28 Şubat 2000 tarihinde web hosting firması ftp'siyle güncelledim.
</h5><br>
</body></html>
Biraz, zor ve yavaş olsa da buşekilde animasyonlar (canlandırma), TV yayıncılığı (bir arkaplanprogramı ile sürekli yeni resimler ve yeni bir index.htmlhazırlayarak), ve anlık bilgi sunumu ( borsa fiyatları )gerçekleştirilebilir. Ama basit resim canlandırmaları için sanırım'animated gif' türü '.gif' dosyaları daha uygun duşer.
2.2 Resimlerde 'MAP' kullanarak yapılan web tasarımı
Map'ler bir resmin değişikyerlerine tıklandığında değişik bağların yüklenmesi veya değişikbir cgi-bin işinin yapılması olarak tanımlanır.
Burada kullanacağımız resmin '.gif'biçiminde olması gereklidir. Sayfanın içinde bu resmitanımladığımız '<img ...' belirtecinin içine bir kaç unsur dahaekleyerek ve bir de 'map' (harita) alanının kısımlarınışekilleriyle birlikte tanımlayarak işimizi bitiririz.
. Resmin betimi:
<img src="filanca.gif" ISMAPusemap="#falanca" width=160 height=100>
ISMAP, resmin bir haritaolduğunu.
usemap="..." hangi usemap html kodu tanımını kullanması gerektiğini, wwwgösterici programına söylüyor.
. Usemap tanımı:
<map name="falanca">
<area shape="rect" coords"1,1,159,50"href="dikdortgen.html">
<area shape="circle" coords="80,100,40"href="daire.html">
<area shape="polyg" coords="10,110,150,110,80,190,9,110"href="ucgen.html">
<area shape="default" nohref>
</map>
name ile belirttiğimiz isim'<img ..' içinde usemap="#..." ile kullandığımızın aynısı.
shape belirteci ile dikdortgen, daire, ya da poligontanımlayabiliyoruz. Dikdörtgenin koordinatlarını:X-sol_ust,Y-sol_ust,X-sag_alt,Y-sag_alt biçiminde 'coords="..." 'kısmında belirtiyoruz. 'href="..." ' bölümü ise bu dikdortgen alanatıklanıldığında neyin yüklenmesi gerektiğini söylüyor.
web sitesi alanında bir çember içinX-merkez,Y-merkez,R-yarıçap biçiminde koordinattanımlıyoruz.
www sayfası poligonu tanımlarken sırayla her bir köşenin X,Y biçiminde koordinatlarını html kodları içine giriyoruz. Dikkat etmemiz gereken husus, poligonun noktalarını saat-yönünde tanımlamamız gerektiğidir. Ayrıca poligonu kapamaya da tarayıcı programlar arasında uyumsuzluk nedeniyle dikkat etmeliyiz. Yukarıdaki üçgen örneğini incelemek aslında poligon tanımı yapabilmek için yeterli. Üçgen için dört nokta kullandık (dördüncü ilkinin dibinde). Aynı zamanda bu üçgenin X,Y betimlemeleri de saat-yönünde girilmiş(noktaları kağıt üzerinde yaklaşık olarak işaretlerseniz bu'saat-yönü' kavramını daha iyi anlayabilirsiniz).
son olarak da '<areashape="default" nohref>' ile resmin diger bölgelerinetıklanıldığında hiç bir sey yapılmaması gerektiğinisöylüyoruz.
Evet bir 'harita' tanımı içingerekenler bu kadar.
2.3 Dinamik HTML ile Web Tasarımı
Aşağıdaki örnekte, mouse yazınınüzerine geldiğinde, tıklamaksızın yazı değişir:
<h2 style="color
urple;"onmouseover="detay.style.display=''"
onmouseout="detay.style.display='none'">FlashHaber</h2>
<div id="detay" style="display:'none';color:red;">
Son gelen haberlere gore,Yunanistan Turkiye'ye savaş açtı...
</div>
<font color=blue>Ayrintilar 19.30 Ana haberbülteninde</font>
1 HTML komutları vekullanımları
1.1 Temel web tasarımı bileşenleri: html, head, title, meta ve body
1.2 Renkler, body, font, ve h1..h6
1.3 Yazıları biçimlendirmek: kalın, yatık, ortalanmış, vs. ...
1.4 Web sitesi sayfalarında resim göstermek
1.5 HTML sayfasına bağ (link) yerleştirmek
1.6 Bağlar yardımıyla etkileşimli kullanım örneği
1.7 Web tasarımı ekran düzenine ilişkin daha çok komut:
1.8 Sayfalarda tablo kullanımıyla website tasarımları yapmak
1.9 Basit bir HTML sayfası için gereken son noktalar
2 İleri düzey web design bilgilerindenseçmeler
2.1 Sayfalara 'meta' komutu ile kimlik vermek
2.2 Resimlerde 'MAP' kullanarak yapılan web tasarımı
2.3 Dinamik HTML ile web tasarımı
1 Web Tasarimi HTML Kodlari ve Kullanimlari:
1.1 Temel bileşenler: html, head,title, meta ve body
Web tasarımı yaparkenbir WEB sayfasının ilk karşılaşacağımız standartbileşenleri şunlardır:
<html> ve </html> :sayfanın başlangıç ve bitişini belirtir.
<head> ve </head> :sayfanın başlık bilgileri 'title', 'meta' vs. burayayerleştirilir.
<title> ve </title> :sayfanın içeriğinin ne olduğunun tanıtılmasında kullanılır. Sayfadagörünmez ama Firefox ya da Internet Explorer bunu sayfayıtanımlamakta kullanır.
<meta> : sayfanın içeriğihakkında www tarayıcılarına bilgi sağlamak,arama motoru ve arama motoruna kayıt için gereklidir.
<body> ve </body> :sayfanın içeriğinin başlangıç ve bitişini belirtmekte ve sayfahakkındaki genel tanımlamaları yapmakta kullanılır.
Yukarıdaki bu komutların, bir websitesi içindeki sıraları aşağidaki gibidir. Bir yazı editörü(joe, pico, xedit, edit, notepad vs.) ile ilk örneğimizi yazarsak:
<html>
<head>
<title>Bir HTML Denemesi</title>
<meta name="description" content="html sayfası için bir kullanımörneği"> </head>
<body bgcolor=white>
'Bu sayfa inşa halindedir', ya da 'this page is under construction'web sitelerinde ille de olması gerektiği düşünülen saçmayazılardır. </body>
</html>
Aslında en basit web sayfası şöyleolabilir:
<html>
Benim neyim eksik?
</html>
sondaki '</html>' yi koymasakdahi www sitesi gosterici programı (Firefox, Opera, IE, ...) bunu bir HTMLsayfası olarak yorumlayacaklardır.
1.2 Renkler, body, font, veh1..h6
Önceki örnekte '<bodycolor=white>' diye, aşağıdakinin basitlestirilmiş biçiminikullanmıştık:
<body font=purplebgcolor=#FFFFFF text=black link=blue vlink=#808090>
Burada font ile kullanilan genelyazıların rengi,
bgcolor ile arkaplan rengi,
text ile tanımsız yazıların rengi,
link ile üzerine gelince el hareketi çekilen yazıların rengi,
vlink ile de seçilmis bağların rengi belirlenir.
renk belirtmek için o renginİngilizce adı ya da RGB değerleri onaltılık sistemde verilir. RGBdeki sıraya göre 00-FF arası üç değer kullanılır. Hepsi sıfır isehiçbir renkten karıştırılmaz. hepsi FF ise her renk maksimum orandakullanılır ve beyaz elde edilir.
Örneğin salt bir kırmızı #FF0000 ile elde edilir.
<font color=...> ve</font> arasındakı yazılar belirtilen renkteyazılır.
<h1> ve </h1> den<h6> ve </h6> ya kadar standard yazı tiplerinden biriseçilerek yazı yazılır. h1 ile belirtilenler h6 iletanımlananlardan daha büyüktür.
örneğin:
<html>
<h1>Sayfa başlığı için uygun büyüklükteharfler</h1>
<h4>Bu harfler sanırım yazı için yeterliler</h4>
<h6> Gözleriniz bozuk değilse, ve her gün A vitaminialıyorsaniz bu yazı sizin için okunabilir olmalı.</h6>
</html>
1.3 Yazıları biçimlendirmek:kalın, yatık, ortalanmış, vs. ...
Önceki web tasarımı örneğinde <h1>,<h2>, ... ile yazıların büyüklüklerini ayarlamanın basit biryolunu görmüştük. HTML web sayfamızın yazılarına biraz daha kişilikkazandırmak için aşağıdaki komutları da kullanabiliriz.
<b> ve </b> arasındakiyazılar koyu görünür.
<i> ve </i> arasındakiyazılar ise italik basılır.
<blink> ve </blink>arasındaki yazılar ise yanıp söner.
<center> ve </center>arasındaki yazılar ortalanır.
<pre> ve </pre> ilesınirlanan yazıların göruntüsünde ayarlama yapılmaz. Yani birdenfazla boşluk varsa bunlar bir tane olacak şekildeazaltılmaz.
<p> paragraf başı yapmak içinkullanılır.
<br> bir satır atlamak içinkullanılır.
<hr> bir çizgi çeker.
1.4 Sayfada resim göstermek
En basit şekliyle, bir sayfayaresim koymak için aşağıdaki komut şu şekilde;
<img src="dosya-adi" alt="..."align=... >
kullanılır.
Burada dosya-adı gösterilecekgrafik dosyasının (png, gif ya da jpg tipinde) bulunduğu yer ve adıdır.Bağlanılan html sayfası ile aynı dizinde bulunan resimler için yeradı belirtmeye gerek yoktur.
Alt ile ise lynx kullanıcılarınıngörebileceği bir açıklama yazmış oluruz.
Align ile de resmin konumunubelirleriz.
Örneğin:
<img src=resim.gifalign=right> ile resmin sağa yanaşık olarak çizilmesinisağlarız. 'right' yerine 'left', 'center', 'middle' gibi konumbildirici bir başka sözcük de kullanılabilir.
Ayrıca yukarıdakilere ek olarak'border', 'width', 'height' belirteçlerini de <img ...... >içinde kullanabiliriz. Bunlardan 'border='i kullanarak resminçerçevesini belirleriz; border=0 dersek hiç çerçeveçizilmez.
Width ve height ile resminboyutlarını belirleyebiliriz. Bunlardan sadace birini verirsek,resmin boyutu orantılı olarak çizilecektir. Yani <imgsrc=resim.gif width=300> demişsek, ve de resmimiz aslında 100nokta genişliğinde 50 nokta yüksekliğinde idiyse, ekrana 300 noktaeninde ve 150 nokta yüksekliğinde çizilecektir. Her iki değeri de(width=... height=...) kullanmışsak, resmin oranını istediğimizgibi değiştirmek mümkün olur.
Bu arada, sayfanın internettenindirilirken hızlı gösterilmesini istiyorsak, her resmin width veheight özelliklerini kullanmalıyız. Bu sayede browser (gösterici)programınız resimlerin yüklenmesini beklemeden çevrelerine yazılarıyerleştirebilecektir.
Sayfanın hızlı geliyor gibigörünmesini sağlamanın bir yolu da 'lowsrc' belirtecini <img.....> içinde kullanmak. Web tasarımı yaparken eğer kullandığımız resimlerin bir debulanık/niteliksiz/siyah-beyaz ama az yer tutan bir benzerini dahayapar, ve bunu <img src="resim.gif" lowsrc="hizliresim.gif"alt="[resim]"> şeklinde tanımlarsak, ilk önce hizliresim.gifyüklenip gösterilecektir. Bu sayede bulanık iken yavaş yavaşnetleşmeye başlayan resimler belirir sayfamızda. Bunun yararı isesayfanıza bakan kişinin çabuk karar vermesini sağlıyorolmasındadır.
1.5 HTML sayfasına bağ (link)yerleştirmek
<a> ve </a> : HTML'nintemeli olan bu komutlarla bağ (link) yapılır.
<a href="hedef bağ"> Açıklama</a> Biçiminde kullanılır.
Açıklama denilen kısım ister yazıister bir grafik ya da herhangi bir nesne olabilir. "hedef bağ"kısmı ise yerel kaynakları gösteren bir dosya adı ya da uzak birmakinedeki bir başka nesneyi (yazı, grafik, video vs.) gösteren birbağ (link) olur.
Bu linkler, mevcut internetaraçlarından biridir.
Örneğin:
http:// ftp:// telnet:// gopher:// news:// bu araçlardanbazılarıdır.
Bunu kullanırken;
<ahref="telnet://orca.cc.metu.edu.tr/> Orca'ya Netscape içindenbağlanmak için buraya tıklayın</a>
yazarak, telnet aracını bir bağ(link) olarak sayfamıza yerleştirmiş oluruz.
Ya da;
<a href="resmim.jpg">NeyeBenzediğimi Görmek İçin Buraya Bas</a>
Yukarıda adı geçen resim bu websayfası ile aynı dizinde (directory) olmalıdır.
Başka şekilde örnekler ise:
<ahref="ftp://ftp.metu.edu.tr/pub/cica-win95/"> Windows95 içinUygulama dosyaları</a>
<ahref="nntp://news.metu.edu.tr/> Netnews 60000 den fazla konudainsanların yazıştığı bölge</a>
<a href="news:comp.sys.cbm">NetNews'in C64 bilgisayarlarına ilişkintartışmaları</a>
Ve, internetin en gözde kullanımı:bir web sayfasından başka bir web sayfasına bağlanma:
<ahref="http://www.physics.metu.edu.tr/~filker/nukleer/">Türkiye'de nükleer enerji tartışmaları</a>
dikkat ettiyseniz yukarıdakiörnekte sayfanın hangi dizinde oldugu (...ilker/nukleer/") belliama hangi dosyada oldugu yazılmamış. Böyle bir durumda web sunucuprogram dosyanın adının 'index.html' olduğunu öngörür.
Kendi dizininizdeki bir sayfaiçin:
<a href="ihd.html"> İnsanHakları Derneği ve pişmiş tavuk için burayatıklayabilirsiniz.</a>
1.6 Bağlar yardımıylaetkileşimli kullanım örneği
Web sitesinde bir bağa (link) ard arda tıklamakyoluyla, slow motion biçiminde ardışık resim gösterebilirsiniz. Bukullanım en basit şekliyle bir Bilgisayar Destekli Eğitimsayfasında kullanılabilir. Amaç, kullanıcıya konuyu belli birsırayla vermek ve konu içindeki ilişkilerin anlaşılmasınıkolaylaştırmak.
Bunu yapmak için, önce tek birresim ve o resmin link olarak tanımlandığı bir web sayfası tasarımı yapmalısınız:
<html>
<title>sayfa1</title>
<body>
<a href="sayfa2.html"><imgsrc="resim1.gif"></a>
</body>
</html>
sonra da ikinci sayfa dahazırlanmalı:
<html>
<title>sayfa2</title>
<body>
<a href="sayfa3.html"><imgsrc="resim2.gif"></a>
</body>
</html>
... bu şekilde devam edilir.
ve ilk sayfa yüklendikten sonraresmin üstüne tıklandığında ikinci sayfa ve içindeki resimyüklenir.
İyi hazırlandığında, bu basit HTMLkullanım şekli ile web-design-programcılığına (Java, cgi-bin, ...)bulaşmadan da etkili 'sunu' ve 'anlatılar' yapılabilir.
1.7 Ekran düzenine ilişkin dahaçok komut:
<multicol cols=2> ...</multicol> : Aradaki yazılar cols= ile belirtilen sütunlaraayrılarak ekrana basılırlar. Sadece Netscape3.0 ve üstünde çalışır.Sütun içindeki yazının sütunun ne kadarını kaplayacağını widthparametresi ile belirtiriz. <multicol cols=3 width=75%> gibi.Burada boşluğu yüzde yerine piksel olarak da verebiliriz. Ayrıcaiki sütun arasındaki boşluğu da gutter parametresi ile veririz:<multicol cols=2 width=500 gutter=25> yazılar...</multicol>
<spacer type=... size=...height=... width=... align=...> : Bununla paragraf başları içinboşluk bırakmak mümkün. Örneğin
<spacer type=block size=48> ile 48x48 piksellik bir boş karealan yaratmis oluruz. Burada block yerine vertical ya da horizontalkullanmak da olası. Ayrica, <spacer type=block width=320height=200 align=right> ile 320x200'luk bir boşluk yaratıp bunuekranda sağa dayatmış oluruz. Gene align komutundan sonra right,left, center, absmiddle gibi diğer konum belirteçlerinikullanabiliriz.
1.8 Sayfalarda tablokullanımı
Genel kullanım:
<table [seçenekler]>
<tr [seçenekler] ><td [seçenekler] > sütun 1 yazıları</td><td [seçenekler] >sütun 2</td><td>sütun 3.....</td> </tr>
<tr><td>2.satirin 1. sütunu</td><td>2.sütunu</td><td>3. sütunu</td></tr></table>
Tablolar satırlar ve sütunlarşeklinde ayrilmış hücrelerden oluşuyor. Her yeni satıra başlamakiçin <tr> etiketini, her yeni sütun için ise <td>etiketini kullanıyoruz.
Bir örnek web tasarımı ile incelersek:
<table border=1 width=200cellspacing=2 cellpadding=2> <tr>
<td align=top width="50%">Bellek tipleri</td> <tdalign=topwidth="50%">FPM<br>EDO<br>SDRAM<br>DDRRAM<br>RAMBus</td> </tr>
<tr>
<td align=top width="50%">Disk tipleri</td> <tdalign=top width="50%">MFM/RLL<br>ATA IDE<br>ULTRAATA<br>SCSI</td> </tr>
<tr>
<td align=top width="50%">İşlemci tipleri</td> <tdalign=top width="50%">RISC<br>CISC<br></td></tr></table>
Burada 2x3'lük bir tablooluşturduk. Tablomuz 1 pixel kalınlığında çerçeveye sahip(border=1), tablo sayfada 200 pixel genişliğinde yer tutacak(width=200), hücreler arası 2 pixel boş ve 2 pixellik bir kalınlıkefektimiz var (cellspacing ile cellpadding).
Örnekte hücre genişliklerin yazıuzunluğuna göre otomatik ayarlanmamsı için genişlikleri kendimizbelirledik (width="50%"). Bunu pixel olarak da belirlememizmümkündü: <td width="100"> ile.
Hücreler içindeki yazıların nasılyerleştirileceğini ise align="yer" ile belirtiyoruz. Burada "yer"yerine "top", "bottom", "left", "right" ve "center"kullanabiliriz.
Ve eğer, bir hücrenin iki hücregenişliğinde veya yüksekliğinde olmasını istiyorsak colspan verowspan seçeneklerini de kullanıyoruz. Önceki örneğe bir başlıkekleyecek olursak:
<tr><td align=centercolspan="2">Bilgisayar AnaBileşenleri</td></tr>
Tabloları içiçe de kullanmamızmümkün. Bu şekilde bir kullanımla bir www sayfasındaki resim veyazıları tam istediğimiz gibi konumlandırmamız mümkün olur.
1.9 Basit bir HTML sayfası içingereken son noktalar
Daha önce kısaca değinildiği gibi,ilk yüklenecek sayfanın adı standart olarak 'index.html' olarakbelirlenmiştir. Dolayısıyla ilk sayfanızı bu şekildeadlandırırsanız;
http://www.physics.metu.edu.tr/~filker/ilksayfa.html
yerine
http://www.physics.metu.edu.tr/~filker/ gibi, daha kısaolan, bir adres kullanabilirsiniz.
2 İleri düzey bilgilerdenseçmeler
2.1 Sayfalara 'meta' komutu ilekimlik vermek
Web sayfamızın Google, MSN Search, Slurp,Gigablast, Didikle vs. gibi tarayıcı programlar tarafındaniçeriğine uygun olarak dizinlerine aktarılmasını istiyorsak,<meta ...> komutunu kullanmak uygun duser. Ayrıca, gene bukomut sayesinde sayfamıza bağlanani bir başka www adresineyönlendirebilir, bu yolla bir takım hareketli sayfalar dahihazırlayabiliriz.
. Sayfanın kimliği:
Sayfayı tanımlamak için üç ayrımeta komutu yeterli. Bunlarla sayfa hakkında kısa bir paragraf,anahtar sözcük listesi, ve sayfayı hazırlayanin adınıverebiliriz.
<meta name="description"
content="Bu sayfada, Tüsiad raporunun üniversitelerde
gerçekleştirdiği değişim sonucunda, üniversitelerin birer
"bilgili-öğretim-işçisi" makinesi durumuna gelmesi
tartışılmaktadır.">
Yukarıda, sayfamızı kısaca tanıtmışolduk. Bu yazı, tarama sonucunda arayan kişiye gösterileceği içinkısa, öz, ve içeriğe uygun olması gerekir.
Tarayıcılar artık sayfanın tümündegeçen sözcüklere ve bu sözcüklerle ilgili diger sözcüklere bakarakarama yapsa da, sayfanızın hangi ölçütlere göre aranmasıgerektiğini sizden iyi kimse bilemez. Onun için, sayfayı tanımlayananahtar sözcukleri de şu şekilde verebiliriz:
<meta name="keywords"
content="üniversite, gelecek, tüsiad, öğrenim, öğretim, eğitim, 21.yüzyıl, Türkiy,e sermaye, yönetim, etki, rektör, özerk">
Ve, son kimlik bilgisi olaraksayfadan sorumlu kişiyi belirtiriz:
<meta name="author"
content="İlker Fıçıcılar">
Hazırladığımız bütün sayfalara butürden kimlik vermeyi alışkanlık haline getirirsek, internetiaraştırmaları için bir kaynak olarak kullananlara epey yardım etmişoluruz.
. Sayfa yönlendirme:
Eğer yakında www adresimiz geçersizolacaksa ve, yeni bir web hosting adresine şimdiden taşınmışsak, bunukullanıcalara önceden duyurmalı ve onları yeni adreseyönlendirmeliyiz. Bunun için eski sayfamızı şu şekildedeğiştirebiliriz.:
<html>
<title>Ilker's CBM Projects</title>
<meta http-equiv="refresh"
content="3;url=http://www.geocities.com/SiliconValley/Vista/5666/">
<body>
<h1><center>This page is moved to a newaddress<br>
<blink>http://www.geocities.com/SiliconValley/Vista/5666/</blink>
<br></center></h1>
<p><p><left>
<h3><font color=blue><br>If your browser does notdirect you to the new address in 3 seconds, then please
<ahref="http://www.geocities.com/SiliconValley/Vista/5666/">
click here</a>.
</font></h3>
</left></body></html>
Bu ornekte <metahttp-equiv="refresh" ...> diyerek, www gösterici programına yenibir sayfa yüklemesini istediğimizi belirtiyoruz.
Bu yüklemeyi kaç saniye sonrayapması gerektiğini '<meta ..' nin devamındaki'content="3;....">' yazısı ile belirliyoruz. Buradaki '3' yerinesaniye cinsinden herhangi bir süre belirtebilirsiniz. '0'yazarsanız, doğal olarak hemen diğer sayfayı yüklemeye başlar.
Yönelinen sayfanın adresi de, ' ...content="saniye; url=http://...">
biçiminde veriliyor.
Yukarıdaki örneğin gerekli kısmınıbir daha yazarsak:
<meta http-equiv="refresh"
content="3;url=http://www.geocities.com/SiliconValley/Vista/5666/">
Evet, burada kendi isteğimize göredeğistirecegimiz, yalnızca iki yer var: 3 sayısı ve url=işaretinden sonraki adres kısmı.
. Basit sayfa canlandırma
Eğer, yukarıdaki gibi bir 'meta'komutu içeren ardışık bir düzen içeren ayrı ayrı sayfalarhazırlarsak, ve 'meta' komutunun adres kısmına sıradaki sayfanınadresini verirsek, hayal gücümüz ölçüsünde hareketli web sayfalarıtasarımı yapabiliriz.
Örneğin birisi sayfamızabağlandığında, ekranda 3 2 1 şeklinde bir gerisayim görmesini veardından asıl sayfanın yüklenmesini istiyorsak, şu şekilde sayfalarhazırlarız:
Diyelim ki,http://www.physics.metu.edu.tr/~filker/
adresine bağlanılmasını istiyoruz. Bu durumda index.html dosyasına'3' sayısını koyup bu sayfayı sıradaki '2' rakamını içeren sayfayayönlendiririz. En sonunda da hiç bir yönlendirme içermeyen asılsayfamıza geliriz. Dolayısıyla, 'index.html' , 'A.html' , ' B.html', ' asil.html' adlarında dört sayfa hazırlamamız yeterliolacaktır:
index.html için:
<html>
<meta http-equiv="refresh"
content="1;url=http://www.physics.metu.edu.tr/~filker/A.html">
<body>
<h1><center> 3 </center></h1>
</body></html>
A.html için:
<html>
<meta http-equiv="refresh"
content="1;url=http://www.physics.metu.edu.tr/~filker/B.html">
<body>
<h1><center> 2 </center></h1>
</body></html>
B.html için:
<html>
<meta http-equiv="refresh"
content="1;url=http://www.physics.metu.edu.tr/~filker/asil.html">
<body>
<h1><center> 1 </center></h1>
</body></html>
ve son olarak asıl sayfamızıhazırlarız:
asil.html :
<html>
<body bgcolor=black text=red>
<h2>
Bu sayfa 'WWW Sayfama Hoş Geldiniz' yazısı içermemektedir
<br><p>
...
...
vs.
</h2>
<hr>
<p><h5>
sayfayı en son 28 Şubat 2000 tarihinde web hosting firması ftp'siyle güncelledim.
</h5><br>
</body></html>
Biraz, zor ve yavaş olsa da buşekilde animasyonlar (canlandırma), TV yayıncılığı (bir arkaplanprogramı ile sürekli yeni resimler ve yeni bir index.htmlhazırlayarak), ve anlık bilgi sunumu ( borsa fiyatları )gerçekleştirilebilir. Ama basit resim canlandırmaları için sanırım'animated gif' türü '.gif' dosyaları daha uygun duşer.
2.2 Resimlerde 'MAP' kullanarak yapılan web tasarımı
Map'ler bir resmin değişikyerlerine tıklandığında değişik bağların yüklenmesi veya değişikbir cgi-bin işinin yapılması olarak tanımlanır.
Burada kullanacağımız resmin '.gif'biçiminde olması gereklidir. Sayfanın içinde bu resmitanımladığımız '<img ...' belirtecinin içine bir kaç unsur dahaekleyerek ve bir de 'map' (harita) alanının kısımlarınışekilleriyle birlikte tanımlayarak işimizi bitiririz.
. Resmin betimi:
<img src="filanca.gif" ISMAPusemap="#falanca" width=160 height=100>
ISMAP, resmin bir haritaolduğunu.
usemap="..." hangi usemap html kodu tanımını kullanması gerektiğini, wwwgösterici programına söylüyor.
. Usemap tanımı:
<map name="falanca">
<area shape="rect" coords"1,1,159,50"href="dikdortgen.html">
<area shape="circle" coords="80,100,40"href="daire.html">
<area shape="polyg" coords="10,110,150,110,80,190,9,110"href="ucgen.html">
<area shape="default" nohref>
</map>
name ile belirttiğimiz isim'<img ..' içinde usemap="#..." ile kullandığımızın aynısı.
shape belirteci ile dikdortgen, daire, ya da poligontanımlayabiliyoruz. Dikdörtgenin koordinatlarını:X-sol_ust,Y-sol_ust,X-sag_alt,Y-sag_alt biçiminde 'coords="..." 'kısmında belirtiyoruz. 'href="..." ' bölümü ise bu dikdortgen alanatıklanıldığında neyin yüklenmesi gerektiğini söylüyor.
web sitesi alanında bir çember içinX-merkez,Y-merkez,R-yarıçap biçiminde koordinattanımlıyoruz.
www sayfası poligonu tanımlarken sırayla her bir köşenin X,Y biçiminde koordinatlarını html kodları içine giriyoruz. Dikkat etmemiz gereken husus, poligonun noktalarını saat-yönünde tanımlamamız gerektiğidir. Ayrıca poligonu kapamaya da tarayıcı programlar arasında uyumsuzluk nedeniyle dikkat etmeliyiz. Yukarıdaki üçgen örneğini incelemek aslında poligon tanımı yapabilmek için yeterli. Üçgen için dört nokta kullandık (dördüncü ilkinin dibinde). Aynı zamanda bu üçgenin X,Y betimlemeleri de saat-yönünde girilmiş(noktaları kağıt üzerinde yaklaşık olarak işaretlerseniz bu'saat-yönü' kavramını daha iyi anlayabilirsiniz).
son olarak da '<areashape="default" nohref>' ile resmin diger bölgelerinetıklanıldığında hiç bir sey yapılmaması gerektiğinisöylüyoruz.
Evet bir 'harita' tanımı içingerekenler bu kadar.
2.3 Dinamik HTML ile Web Tasarımı
Aşağıdaki örnekte, mouse yazınınüzerine geldiğinde, tıklamaksızın yazı değişir:
<h2 style="color
urple;"onmouseover="detay.style.display=''"onmouseout="detay.style.display='none'">FlashHaber</h2>
<div id="detay" style="display:'none';color:red;">
Son gelen haberlere gore,Yunanistan Turkiye'ye savaş açtı...
</div>
<font color=blue>Ayrintilar 19.30 Ana haberbülteninde</font>
