Css Yapımı
CSS Nedir? İngilizce açılımı Cascading Style Sheets, yani Türkçe Çağlayan Stil Tabakası gibi bir anlama geliyor. Peki CSS ile neler yapabiliyoruz? Bize faydaları neler? Ve CSS'yi sayfa içinde ne şekillerde kullanabiliriz? Bu yazımızda bunlardan bahsedeceğim.CSS ile Neler Yapılıyor?
CSS kullanarak HTML ile yapamayacağımız birçok şeyi yapabiliriz. Bir sayfadaki tüm ögeleri veya belli bir kısım ögeyi renk, boyut, arkaplan resmi, sayfadaki konumu, sağından solundan olan boşlukları ve daha birçok özelliği yönünden CSS ile tanımlayabiliriz. Bir CSS dosyasıyla bütün sayfalarınızın stilini oluşturabileceğiniz için sayfalarınızın boyutu küçülür, yükü hafifler. CSS ayrıca öğrenmesi en kolay dillerden birisidir.
CSS Öğrenmek için Gerekli Ön Bilgiler;
CSS öğrenmek için gereken en önemli bilgi Temel HTML bilgisidir. HTML bilmeden CSS kodlarını kullanmanız çok zor olacaktır. Bu dökümanda anlatacağım konu CSS olduğu için HTML bildiğinizi varsayıyorum. HTML öğrenmeden CSS'ye başlamamanızı tavsiye ederim.
CSS öğrenmek için diğer gerekli bilgi ise İngilizce'dir. Tabi ki ingilizceyi su gibi bilmek değil bu sadece CSS kodları içinde geçen kelimeler İngilizce'dir ve bu kelimelerin büyük bir çoğunluğunun ifade ettiği şey Türkçe karşılığı olan kelimeyle alakalıdır. Yine de ezberiniz iyiyse İngilizce bilmeniz de şart değil
Bir CSS Kuralı Hangi Parçalardan Oluşur?
CSS kuralları 3 parçadan oluşur. Her CSS kuralı bir seçici ve birtanımlama bölümüne sahiptir. Tanımlama bölümü bir özellik ve birdeğerden meydana gelir. Yani bir CSS kuralı şu şekilde oluşturulur;
seçici {özellik:değer}
Bir CSS kuralında seçici olarak bir html ögesinin ismi(Örneğin; a, p, span, div, body), kimliği(id'si) veya sınıfı(class'ı) kullanılabilir. Bu anlatımdaki örneklerde seçici olarak HTML ögelerinin isimleri kullanılmıştır.
CSS kurallarında özellik olarak ise sadece belirli maddeleri kullanabiliyoruz.(Belirli dediğim yaklaşık 120 tane kadar) değer olarak ise her özelliğin alabileceği kendi değerleri var, bunları kullanabiliyoruz.
Örnek olarak a{font-size:12pt} ve span{font-size:10px; font-color:blue;} verilebilir.
Tanımlama bölümünde birden fazla özellik giriliyorsa aralarına noktalı virgül(;) konulur. Sadece tek değer giriliyorsa konulmayabilir ancak değerin sonuna eklemenin de bir sakıncası yoktur. Ayrıca aynı değerleri vereceğimiz iki seçiciyi aralarına virgül koyarak tek seferde tanımlayabiliriz de;
a, span, p {font-size:12pt; font-color:blue;} gibi...
CSS'yi Sayfa İçine Yerleştirme Metotları
a) HTML Ögesi İçine Yerleştirmek;
Şurada bir html kodumuz olsun: mesela link kodu ekleyelim bir tane;
<a href="Linkimizin Adresi">Linkimizin Adı</a>
Bu şekilde eklenen bir link sayfamızda varsayılan link özelliğiyle, yani mavi renkte ve altı çizili olarak görünecektir. HTML içine yerleştireceğimiz style tagının içine ekleyeceğimiz CSS kurallarıyla bu linkimize farklı özellikler kazandırabiliriz. Örnek olarak kodumuz:
<a href="Linkimizin Adresi" style="color:white; background:blue; font:10pt Comic Sans MS;">Linkimizin Adı</a>
Bu şekilde yazılmış bir kodda style="" içindeki CSS kuralları linkin özelliğini belirler.
color:red; -> linkin renginin kırmızı olmasını,
background:blue; -> Linkin arkaplanının mavi olmasını,
font:10pt Comic Sans MS; -> Linkin 10pt yazı boyutuyla ve Comic Sans MS fontuyla yazılmasını ifade ediyor. Bu linkin görünümü aşağıdaki gibi olacaktır;
Linkimizin Adı
Bu şekilde HTML tagları içine entegre edilmiş CSS kuralları sadece içine eklendiği HTML nesnesini etkiler.
b)Sayfa İçerisine Yerleştirmek;
Sayfanızın içerisine ekleyeceğimiz birkaç CSS kuralı ile o sayfadaki bütün HTML ögelerini etkileyebiliriz. Sayfa içerisine ekleyeceğimiz CSS kuralları, genellikle <head> tagından sonra <style> ve </style> tagları arasına yazılır. Örnek olarak aşağıda basit bir sayfanın CSS kodlarını verdim.
<html>
<head>
<style>
a{color:green;font:15pt;}
p{width:100px; height:25px; background-color:black;}
</style>
</head>
<body>
<p><a href="http://linkin_adresi">Linkin Kelimesi</a></p>
</body>
</html>
Görüldüğü gibi bu şekilde birden fazla CSS kuralını peş peşe dizebiliyoruz ve bu şekilde yazdığımız bir kod bütün sayfaya etki ediyor. Yani a{ diye başlayan kural sayfadaki bütün linkleri, p diye başlayan kural da sayfadaki bütün p HTML taglarını etkiliyor.
c) Bir CSS Dosyasından Sayfamıza Çağırmak;
CSS dosyası, uzantısı .css olan dosyadır. Amacı çağrıldığı bütün sayfaların CSS kurallarını taşımaktır. Sayfa içine yerleştirilen CSS kodlarından tek farkı sadece bir sayfaya değil, çağrıldığı bütün sayfalara etki etmesidir. Bir CSS dosyasının içerisinde sadece CSS kuralları bulunur. Örneğin bir CSS dosyasının içeriği;
a{font-color: blue; margin: 5px;}
p{font:12px;}
div{width:100px; height;100%;}
gibi olabilir. CSS dosyası oluşturmak için içine yerleştireceğiniz bütün CSS kurallarını bir not defterine yazıp uzantısını .css olacak şekilde kaydetmeniz yeterlidir.
Tamam, CSS dosyamızı oluşturduk. Peki bu dosyayı nasıl istediğimiz HTML sayfalarına ekleyeceğiz? Onu da HTML sayfamızdaki <head> tagından sonra ekleyeceğimiz <link> koduyla başaracağız. Bu kod;
<link rel="stylesheet" type="text/css" href="http://dosyanın-bulunduğu-adres/stildosyanızınadı.css">
kodudur. Kodu kendinize göre düzenleyip HTML sayfanıza eklediğinizde CSS dosyanızdaki kurallar sayfanıza etki etmeye başlayacaktır.
HTML Kodlarındaki Sınıf(class) ve Kimlik(id)
HTML kodlarındaki sınıflar ve kimlikler CSS kodları için çok güzelseçici'lerdir. Tabi seçicileri HTML içine entegre CSS kurallarında kullanamıyorduk. Bu nedenle seçicileri .css dosyamızda veya sayfa içindeki CSS kodları arasında kullanıyoruz. Neyse. Bir HTML kodu yazayım da başlayalım;
<img src="http://resimlinki/resimismi.jpg" border="0" class="ali1" id="veli2" />
-Bu kodda class="ali1" sınıfını seçici olarak kullanmak istersek, CSS kurallarını yazdığımız bölüme kuralımızı şu şekilde yazacağız;
.ali1 {width:100px; height:100px;}
Görüldüğü gibi sınıflar(class) seçici olarak kullanılırken başına nokta alıyor.
-Eğer üstteki HTML kodundaki id="veli2" kimliğini seçici olarak kullanmak istersek, CSS kuralını şu şekilde oluşturacağız;
#veli2 {width:100px; height:100px;}
Görüldüğü gibi kimlikler(id) seçici olarak kullanılırken başına kare(#) alıyor.
Eğer aynı id ve class'ları başka HTML ögelerine de verirseniz, bu CSS kuralları onları da etkiler. Örneğin veli2 id'sini bir resime(img) de ekleseniz bir bir div'e bir linke(a) de ekleseniz CSS kuralı çalışır. Ama kuralın seçicisini a veya img gibi herhangi bir HTML tagıyla kısıtlarsanız, yani şunun gibi bir biçimde yazarsanız;
img.ali1 {width:100px; height:100px;}
Seçiciyi bu şekilde kısıtlarsak, CSS kuralımız sadece sınıfı(class) ali1 olan resimleri(img) etkileyecektir. Kural seçicisindeki img yerine a yazarsak da sadece sınıfı(class) ali1 olan linkleri(a) etkileyecektir.
-> ÖNEMLİ NOT; Bir kuralın yazılışında kelimeler arası boşlukların hiçbir anlamı yoktur. Örneğin;
a{color:black; font:12pt;}
kuralı ile
a {
color: black;
font: 12pt;
}
kuralı arasında hiçbir fark yoktur.
HTML komutları ve kullanımları
Bir WEB sayfasının standart bileş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. buraya yerleştirilir.
<title> ve </title> : Sayfanın içeriğinin ne olduğunun tanıtılmasında kullanılır. Sayfada görünmez ama İnternet Explorer bunu sayfayı tanımlamakta kullanır.
<meta> : Sayfanın içeriği hakkında www tarayıcılarına bilgi sağlamak için gereklidir.
<body> ve </body> : Sayfanın içeriğinin başlangıç ve bitişini belirtmekte ve sayfa hakkındaki genel tanımlamaları yapmakta kullanılır.
Yukarıdaki bu komutların, bir web sayfasının içindeki sıraları aşağıdaki gibidir. Bir yazı editoru (Dreamweaver, FrontPage 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 sayfalarında ille de olması gerektiği düşünülen saçma yazılardır.
</body>
</html>
Renkler, body, font, ve h1..h6
Önceki örnekte <body color=white> diye, aşağıdakinin basitleştirilmiş biçimini kullanmıştık:
<body font=purple bgcolor=#FFFFFF text=black link=blue vlink=#808090>
Burada font ile kullanılan genel yazı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çilmiş bağların rengi belirlenir.
Renk belirtmek için o rengin ingilizce adı ya da RGB değerleri onaltılık sistemde verilir. RGB deki sıraya göre 00-FF arası uc değer kullanılır. Hepsi sıfır ise hiçbir renkten karıştırılmaz. Hepsi FF ise her renk maksimum oranda kullanılır ve beyaz elde edilir. Örneğin salt bir kırmızı #FF0000 ile elde edilir.
<font color=...> ve </font> arasındaki yazılar belirtilen renkte yazılır.
<h1> ve </h1> den <h6> ve </h6> ya kadar standart yazı tiplerinden biri seçilerek yazı yazılır. h1 ile belirtilenler h6 ile tanımlananlardan daha büyüktür.
Örneğin:
<html>
<h1>Sayfa başlığı için uygun büyüklükte harfler</h1>
<h4>Bu harfler sanırım yazı için yeterliler</h4>
<h6>Gözleriniz bozuk değilse bu yazıyı okuyorsundur.</h6>
</html>
Yazıları biçimlendirmek: kalın, italik, ortalanmış, vs. ...
Önceki örnekte <h1>, <h2>, ... ile yazıların büyüklüklerini ayarlamanın basit bir yolunu görmüştük.HTML sayfamızın yazılarına biraz daha kişilik kazandırmak için aşağıdaki komutları da kullanabiliriz.
<b> ve </b> arasındaki yazılar koyu görünür.
<i> ve </i> arasındaki yazılar ise italik görünür.
<blink> ve </blink> arasındaki yazılar yanıp söner.
<center> ve </center> arasındaki yazılar ortalanır.
<pre> ve </pre> ile sınırlanan yazıların görüntüsünde ayarlama yapılmaz. Yani birden fazla boşluk varsa bunlar bir tane olacak şekilde azaltılmaz.
<p> paragraf başı yapmak için kullanılır. </p>
<br> bir satır atlamak için kullanılır.
<hr> bir çizgi çeker.
Sayfada resim göstermek
En basit şekliyle, bir sayfaya resim koymak için aşağıdaki komut şu şekilde;
<img src="dosya_adı" alt="..." align=... > kullanılır.
Dosya_adı, gösterilecek grafik dosyasının (gif, jpg, png tipinde) bulundugu yer ve adıdır. Bağlanılan Html sayfası ile aynı dizinde bulunan resimler için yer adı belirtmeye gerek yoktur.
Alt, resim açıklaması yazmış oluruz. Google buna önem verir.
Align, resmin konumunu belirleriz.
Örneğin:
<img src=pirikethtml.gif align=right> ile resmin sağa dayalı olarak çizilmesini sağlarız. 'right' yerine 'left', 'center', 'middle' gibi konum bildirici 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=' resmin çerçevesini belirleriz; border=0 dersek hiç çerçeve çizilmez. Width ve Height ile resmin boyutlarını belirleyebiliriz.Web Sayfamızın hızlı açılmasını istiyorsak, her resmin width ve height özelliklerini kullanmalıyız. Bu sayede browser programınız resimlerin yüklenmesini beklemeden çevrelerine yazıları yerleştirebilecektir.
Sayfanın hizli geliyor gibi görünmesini sağlamanın bir yolu da 'lowsrc' belirtecini <img .....> içinde kullanmak. Eğer kullandığımız resimlerin bir de bulanık/niteliksiz/siyah-beyaz ama az yer tutan bir benzerini daha yapar, ve bunu <img src="resim.gif" lowsrc="hizliresim.gif" alt="[resim]"> şeklinde tanımlarsak, ilk önce hizliresim.gif yüklenip gösterilecektir. Bu sayede bulanık iken yavaş yavaş netleşmeye başlayan resimler belirir sayfamızda. Bunun yararı ise sayfanıza bakan kişinin çabuk karar vermesini sağlıyor olmasındadır.
HTML sayfasına Link yerleştirmek
<a> ve </a> : HTML'nin temeli olan bu komutlarla Link yapılır.
<a href="Hedef Link">Açıklama</a> Biçiminde kullanılır.
Açıklama, ister yazı ister bir grafik ya da herhangi bir nesne olabilir.
"Hedef Link" ise yerel kaynakları gösteren bir dosya adı yada uzak bir makinedaki bir başka nesneyi (yazı, grafik, video vs.) gösteren bir Link olur.
Örnek:
<a href="ftp://ftp.piriketseverler.tr.gg/">PiriketSeverler Sosyalleşme Ağı</a>
Ve, internetin en gözde kullanımı: Bir web sayfasından başka bir web sayfasına bağlanma:
<a href="http://www.piriketseverler.tr.gg/Forum/">Bir Pirikette Sen Koy</a>
Kendi dizininizdeki bir sayfa için:
<a href="Html-Dersleri.html">HTML Dersleri için buraya Tıklayabilirsiniz.</a>
Link yardımıyla etkileşimli kullanım örneği
Bir Linke ard arda tıklamak yoluyla, slow motion biçiminde ardışık resim gösterebilirsiniz. Bu kullanım en basit şekliyle bir Bilgisayar Destekli eğitim sayfasında kullanılabilir. Amaç, kullanıcıya konuyu belli bir sırayla vermek ve konu içindeki ilişkilerin anlaşılmasını kolaylaştırmak.
Bunu yapmak için, önce tek bir resim ve o resmin link olarak tanımlandığı bir web sayfası hazırlamalısınız:
<html>
<title>sayfa1</title>
<body>
<a href="sayfa2.html"><img src="resim1.gif"></a>
</body>
</html>
sonra da ikinci sayfa da hazirlanmali:
<html>
<title>sayfa2</title>
<body>
<a href="sayfa3.html"><img src="resim2.gif"></a>
</body>
</html>
... bu şekilde devam edilir ve ilk sayfa yüklendikten sonra resmin üstüne tıklandığında ikinci sayfa ve içindeki resim yüklenir. İyi hazırlandığında, bu basit HTML kullanım şekliyle Java, cgi-bin, vs. bulaşmadan da etkili 'sunumlar' yapılabilir.
Ekran düzenine ilişkin daha çok komut:
<multicol cols=2> ... </multicol> : Aradaki yazılar cols= ile belirtilen sutunlara ayrılarak ekrana basılırlar. Sutun içindeki yazının sutunun ne kadarını kaplayacağını width parametresi ile belirtiriz. <multicol cols=3 width=75%> gibi. Burada boşluğu yüzde yerine piksel olarak da verebiliriz. Ayrıca iki sutun 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çin boşluk bırakmak mümkün. Örneğin <spacer type=block size=48> ile 48x48 piksellik bir boş kare alan yaratmış oluruz. Burada block yerine vertical ya da horizontal kullanmak da olası. Ayrıca, <spacer type=block width=320 height=200 align=right> ile 320x200'luk bir boşluk yaratıp bunu ekranda sağa dayatmış oluruz. Yine align komutundan sonra right, left, center, absmiddle gibi diğer konum belirteçlerini kullanabiliriz.
Sayfalarda Tablo Kullanımı
Genel kullanım:
<table [seçenekler]>
<tr [seçenekler]><td [seçenekler] > sutun1 yazıları</td><td [seçenekler]>sütun2</td><td>sütun 3.....</td></tr>
<tr><td>2.satırın 1. sütunu</td><td>2. sütunu</td><td>3. sütunu </td></tr></table>
Tablolar satırlar ve sütunlar şeklinde ayrılmış hücrelerden oluşuyor. Her yeni satıra başlamak için <tr> etiketini, her yeni sütun için ise <td> etiketini kullanıyoruz.
Bir örnek ile incelersek:
<table border=1 width=200 cellspacing=2 cellpadding=2><tr>
<td align=top width="50%">Bellek tipleri</td>
<td align=top width="50%">FPM<br>EDO<br>SDRAM<br>DDR RAM<br>RAMBus</td></tr>
<tr><td align=top width="50%">Disk tipleri</td>
<td align=top width="50%">MFM/RLL<br>ATA IDE<br>ULTRA ATA<br>SCSI</td></tr>
<tr><td align=top width="50%">İşlemci tipleri</td>
<td align=top width="50%">RISC<br>CISC<br></td></tr></table>
Burada 2x3'lük bir tablo olusturduk. 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ık efektimiz var (cellspacing ile cellpadding).
Örnekte hücre genişliklerin yazı uzunluğuna göre otomatik ayarlanmaması için genişlikleri kendimiz belirledik (width="50%"). Bunu pixel olarak da belirlememiz mümkündü: <td width="100"> ile.
Hücreler içindeki yazıların nasıl yerleş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ücre genişliğinde veya yüşekliğinde olmasını istiyorsak colspan ve rowspan seçeneklerini de kullanıyoruz. Önceki örneğe bir başlık ekleyecek olursak:
<tr><td align=center colspan="2">Bilgisayar Ana Bileşenleri</td></tr>
Tabloları içice de kullanmamız mümkün. Bu şekilde bir kullanımla bir www sayfasındaki resim ve yazıları tam istediğimiz gibi konumlandırmamız mümkün olur.
Sayfalara 'meta' komutu ile kimlik vermek
Web sayfamızın Google, Yahoo, Altavista vs. gibi tarayıcı programlar tarafından içeriğine uygun olarak dizinlerine aktarılmasını istiyorsak, <meta ...> komutunu kullanmak gerekir. Ayrica, yine bu komut sayesinde sayfamiza baglanani bir baska www adresine yonlendirebilir, bu yolla bir takim hareketli sayfalar dahi hazirlayabiliriz.
Sayfayi tanimlamak icin uc ayri meta komutu yeterli. Bunlarla sayfa hakkinda kisa bir paragraf, anahtar sozcuk listesi ve sayfayi hazirlayanin adini verebiliriz.
<meta name="description"
content="Bu site interneti sosyal bir platform haline getirmek için tasarlanmıştır.">
Yukarida, sayfamizi kisaca tanitmis olduk. Bu yazi, tarama sonucunda arayan kisiye gosterilecegi icin kisa, oz ve icerige uygun olmasi gerekir.
Tarayicilar artik sayfanin tumunde gecen sozcuklere ve bu sozcuklerle ilgili diger sozcuklere bakarak arama yapsa da, sayfanizin hangi olcutlere gore aranmasi gerektigini sizden iyi kimse bilemez. Onun icin, sayfayi tanimlayan anahtar sozcukleri de su sekilde verebiliriz:
<meta name="keywords"
content="tr.gg, piriket, html, forum, galeri, bedavasitem, video, chat, sozluk, form, htmlkod, sohbet odasi, video, resim, turk, bayrak, chat, tr.gg, oyun, geyik, güncel, forum, kampanya, tr.gg, cekilis, anket, magazin, zeka, fikra, spor, sinema, muzik, genelkültür, siir, priket, bedavasite, toplist, siteekle, webmaster, oyun salonu, özlü söz">
Ve, son kimlik bilgisi olarak sayfadan sorumlu kisiyi belirtiriz:
<meta name="author" content="PiriketSeverler">
Hazirladigimiz butun sayfalara bu turden kimlik vermeyi aliskanlik haline getirirsek, interneti arastirmalari icin bir kaynak olarak kullananlara epey yardim etmis oluruz.
Sayfa yonlendirme:
Eger yakında www adresimiz gecersiz olacaksa ve yeni bir www adresine simdiden tasinmissak, bunu kullanicalara onceden duyurmali ve onlari yeni adrese yonledirmeliyiz. Bunun icin eski sayfamizi su sekilde degistirebiliriz.:
<meta http-equiv="refresh"
content="3;url=http://www.piriketseverler.tr.gg">
Bu ornekte <meta http-equiv="refresh" ...> diyerek, www gosterici programina yeni bir sayfa yuklemesini istedigimizi belirtiyoruz.
Bu yuklemeyi kac saniye sonra yapmasi gerektigini '<meta ..' nin devamindaki 'content="3;....">' yazisi ile belirliyoruz. Buradaki '3' yerine saniye cinsinden herhangi bir sure belirtebilirsiniz. '0' yazarsaniz, dogal olarak hemen diger sayfayi yuklemeye baslar.
Yonelinen sayfanin adresi de, ' ... content="saniye; url=http://...">
biciminde veriliyor.
Resimlerde 'MAP' kullanimi
Map'ler bir resmin degisik yerlerine tiklandiginda degisik baglarin yuklenmesi veya degisik bir cgi-bin isinin yapilmasi olarak tanimlanir.
Burada kullanacagimiz resmin '.gif' biciminde olmasi gereklidir. Sayfanin icinde bu resmi tanimladigimiz '<img ...' belirtecinin icine bir kac unsur daha ekleyerek ve bir de 'map' (harita) alaninin kisimlarini sekilleriyle birlikte tanimlayarak isimizi bitiririz.
Resmin betimi:
<img src="filanca.gif" ISMAP usemap="#falanca" width=160 height=100>
ISMAP, resmin bir harita oldugunu.
usemap="..." hangi harita tanimini kullanmasi gerektigini, www gosterici programina soyluyor.
Haritanin tanimi:
<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 belirttigimiz isim '<img ..' icinde usemap="#..." ile kullandigimizin aynisi.
Shape ile dikdortgen, daire yada poligon tanimlayabiliyoruz. Dikdortgenin koordinatlarini: X-sol_ust,Y-sol_ust,X-sag_alt,Y-sag_alt biciminde 'coords="..." ' kisminda belirtiyoruz. 'href="..." ' bolumu ise bu dikdortgen alana tiklanildiginda neyin yuklenmesi gerektigini soyluyor.
Cember icin X-merkez,Y-merkez,R-yaricap biciminde koordinat tanimliyoruz.
Poligonu tanimlarken sirayla her bir kosenin X,Y biciminde koordinatlarini giriyoruz. Dikkat etmemiz gereken husus, poligonun noktalarini saat yonunde tanimlamamiz gerektigidir. Yukaridaki ucgen ornegini incelemek aslinda poligon tanimi yapabilmek icin yeterli. Ucgen icin dort nokta kullandik (dorduncu ilkinin dibinde). Ayni zamanda bu ucgenin X,Y betimlemeleri de saat yonunde girilmis (noktalari kagit uzerinde yaklasik olarak isaretlerseniz bu 'saat-yonu' kavramini daha iyi anlayabilirsiniz).
Son olarak da <area shape="default" nohref> ile resmin diger bolgelerine tiklanildiginda hic bir sey yapilmamasi gerektigini soyluyoruz.
Dinamik HTML
Aşağıdaki örnekte, mouse yazının üzerine geldiğinde, tıklamaksızın yazı değişir:
<h2 style="color:purple;" onmouseover="detay.style.display=''"
onmouseout="detay.style.display='none'">Flash Haber</h2>
<div id="detay" style="display:'none'; color:red;">Son gelen haberlere göre, Türkiye'ye kurulacak olan Nükleer Santralin yeri belli oldu</div>
<font color=blue>Ayrıntılar 19.30 Ana haber bülteninde</font>