DERS 17

Resimlerinizin Haritasını Çıkartın

IMAGE map'ler kullanıcının belirli bir resmin değişik alanlarına tıkladığında farklı adreslere gidebilmesine olanak tanır. İki şekilde hazırlanabilecek Image Map'ler isteğe göre HTML sayfasına veya sunucu üzerindeki başka bir dosyaya yerleştirilebilir. Biz bu konumuzda HTML sayfalarına yerleştirilen Image Map'leri inceleyecek Paint Shop Pro yardımıyla bir resmin haritasının nasıl çıkarılacağını göstereceğiz.

<MAP NAME="map1"><!-- Örnek resmin HTML kodları -->
<AREA SHAPE="RECT" COORDS=' 7, 7, 119, 74' HREF="http://www.forumay.com">
<AREA SHAPE="CIRCLE" COORDS=' 178, 41, 35' href="http://forumay.com">
</MAP>
Öncelikle HTML sayfasında yukarıdaki gibi kodlar kullanır ve istediğimiz resimde hangi noktalara tıklandığında hangi adreslere bağlanılacağını belirtiriz. Daha sonra <IMG SRC=' map1.gif' USEMAP=' #map1' > gibi bir ifade kullanılarak haritasının çıkarılmasını istediğimiz resmi sayfaya yerleştirir ve bu resim için ' map1' isimli haritanın kullanılacağını belirtiriz.
MAP:TAG'I <MAP NAME='deneme' > AREA takılarıyla tanımlanan haritaya başlangıç yapar ve bir isim verir.
AREA TAG'I ;
<AREA COORDS=koordinatlar SHAPE=tip HREF=url TARGET=pencere>
COORDS ;
Tanımlanan şekle göre değişik koordinatlar girebilmenizi sağlar
SHAPE=tip ;
Tip RECTANGLE, CIRCLE, POLYGON seçeneklerinden biri olabilir. RECTANGLE Bir kare tanımlar ve ' x1, y1, x2, y2' değerleri kullanılır. CIRCLE Bir çember tanımlar ve ' OrtaX, OrtaY, Yarıçap' değerleri kullanılır. POLYGON Bir poligon tanımlar. Birçok noktadan oluşabilir.
HREF ;
Şekle tıklandığında hangi adrese gidileceğini belirler.
TARGET ;
Gidilecek adresin hangi pencerede açılacağını belirler Peki tanımladığımız şekillerin koordinatlarını nasıl bulacağız? Bu da çok basit, en büyük yardımcımız olan Paint Shop Pro'yu kullanarak istediğimiz bir noktadaki koordinatları bulabiliriz. Örneğin bir karenin sınırlarını öğrenmek istiyorsunuz, hemen resmi açın ve tanımlamak istediğiniz karenin üst sol noktasına gidin. X1 ve Y1 noktalarını durum çubuğundan öğrenip bir kenara not ettikten sonra sol alt sınıra gidin ve X2, Y2 noktalarını öğrenin. İşte bu kadar basit.


_-_-_-_-_-_-_-_-_-_-_-_-_-__-_-_-_-_-_-_-_-_-_-_-_-_-__-_-_-_-_-_-_-_-_-_-_-_-_-


DERS 19

SAYFA NE ZAMAN DEĞİŞTİRİLMİŞ?

BİR siteyi cazip kılan özelliklerden biride güncellemedir. Sayfanıza bağlanan kullanıcıların ilgili sayfanın en son ne zaman güncellendiğini bilmesini istiyorsanız aşağıdaki Java Script'i, kullanabilirsiniz. Bu script'i sayfanıza bir kez ekleyip varlığını unutabilirsiniz, çünkü aşağıdaki akıllı kodlar HTML sayfasının tarihine bakarak bunu sayfa açıldığında otomatik olarak görüntülüyorlar. Böylece küçük değişiklikler yapsanız bile sayfadaki tarihi her defasında tekrar girmek zorunda kalmıyorsunuz. <SCRIPT LANGUAGE=JavaScript>
<!--
var mod=document.lastModified.split("");
***************ln("Bu sayfanın son güncellenme tarihi:" + mod[0]);
-->
</SCRIPT>


_-_-_-_-_-_-_-_-_-_-_-_-_-__-_-_-_-_-_-_-_-_-_-_-_-_-__-_-_-_-_-_-_-_-_-_-_-_-_-


DERS 20

SAYFANIZDA BAŞKA BİR SAYFA

BAZI Web sitelerinde görürsünüz, güncel olaylar bir pencere içerisinde yukarıdan aşağıya veya tersi yönde sayfanın bir köşesinde kaydırılır ve bu işlem genellikle bir Java programcığıyla yapılır. İşte size bunu hiç zahmet harcamadan yapmanın yolunu gösteriyoruz. Aşağıdaki kodları sayfa içerisinde kullandığınızda deneme.htm dosyası bir pencere içerisinde açılacak ve devamlı olarak yukarı doğru kaydırılacak. <OBJECT ALIGN=CENTER CLASSID="clsid:1a4da620-6217-11cf-be62-0080c72edd2d"
WIDTH=200 HEIGHT=200 BORDER=1 HSPACE=5 ID=marquee>
<PARAM NAME="ScrollStyleX" VALUE="Circular">
<PARAM NAME="ScrollStyleY" VALUE="Circular">
<PARAM NAME="szURL" VALUE="deneme.htm">
<PARAM NAME="ScrollDelay" VALUE=60>
<PARAM NAME="LoopsX" VALUE=-1>
<PARAM NAME="LoopsY" VALUE=-1>
<PARAM NAME="ScrollPixelsX" VALUE=0>
<PARAM NAME="ScrollPixelsY" VALUE=-3>
<PARAM NAME="DrawImmediately" VALUE=0>
<PARAM NAME="Whitespace" VALUE=0>
<PARAM NAME="PageFlippingOn" VALUE=0>
<PARAM NAME="Zoom" VALUE=100>
<PARAM NAME="WidthOfPage" VALUE=400>
</OBJECT>


_-_-_-_-_-_-_-_-_-_-_-_-_-__-_-_-_-_-_-_-_-_-_-_-_-_-__-_-_-_-_-_-_-_-_-_-_-_-_-


DERS 21

STYLE SHEET KULLANIMI

WEB tarayıcı geliştiren firmalar bir yandan yeni teknolojileri tarayıcılarına adapte ederken diğer bir yandan HTML dilinin getirdiği sınırlamaları ortadan kaldırmak için kendilerine göre yollar buluyorlar. İşte ilk olarak Microsoft'un ortaya attığı, günümüzde pek yaygın olarak kullanılmasa da Active HTML'ye dahil edilen Style Sheet'ler. Ne işe mi yarıyor? Yaptığı iş çok basit: Sayfa içerisinde kullanılan paragraf, başlık, kısayol gibi nesneleri önceden tanımlayarak sizi, bunları her defasında tekrar tanımlama zahmetinden kurtarıyor. Şu anda W3C'nin de (World Wide Web Consortium) kabul ettiği bu HTML 3.2 standardını bir nevi ' şablon' olarak niteleyebiliriz. Öyle ki bir defa şablonunuzu tanımladığınızda bu şablonu diğer sayfalarınızdan da kolayca çağırabiliyorsunuz. Örnek için aşağıdaki kodları inceleyip nasıl bir görüntü oluşturduğunu resimden görebilirsiniz.



Kod:
HTML> <title>Style Sheet Kullanımı</title> <STYLE> BODY {background: white;} H1 {font: 24pt Arial bold} P {background: yellow;} A {text-decoration: none; color: blue} </STYLE> <BODY> <H1>Bu bir başlık! 24 punto, Arial ve Kalın.</H1> <p>Üzeri sarı işaretleyici ile çizilmiş alelade bir yazı.</p> <a href="deneme.htm">Link'lerin altının çizilmemesini bu yolla sağlayabilirsiniz.</a> </BODY> </HTML>
---------------------------------------------------------------------------------------------

---------------------------------------------------------------------------------------------


DERS 22

ARAMA MOTORLARINA YARDIMCI OLUN

GECENİZİ gündüzünüze kattınız ve bir site hazırladınız. Şimdi insanların sitenizin varlığından haberdar olmasını istiyorsunuz. Ne yapacaksınız? Tabii ki sitenizi bilinen arama motorlarına kayıt edeceksiniz. İşte bu noktada bir püf noktasına ihtiyacınız var. Arama motorlarının kullandığı ' ajan' programlar sitenize geldiklerinde ilk baktıkları şey bir takım tanımlardır. Aşağıda bu tanımları oluşturmak için gereken satırları göreceksiniz. Bu satırları <HEAD>...</HEAD> ifadeleri arasına girerseniz hedef kullanıcıya ulaşmanız daha kolay olacaktır.
<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ı" >


_-_-_-_-_-_-_-_-_-_-_-_-_-__-_-_-_-_-_-_-_-_-_-_-_-_-__-_-_-_-_-_-_-_-_-_-_-_-_-



DERS 23

Animasyonlu "gif" oluşturalım

Web sayfalarının vazgeçilmez unsurlarından biri tabii ki animasyonlu GIF dosyaları. Bir seri GIF dosyasının üst üste getirilerek oynatılmasından oluşan animasyonlu GIF'ler web sayfasında aktif içeriği sağlamak için kullanılabilecek ilgi çekici ve basit bir teknik. Peki Animasyonlu GIF yapmak için neye ihtiyacınız var? Kullanabileceğiniz programlar neler?
Animasyonlu GIF yapmak için önünüzde bir çok seçenek var. Animagic, GIF Constructor, Animator Pro, Microsoft GIF Animator gibi programlar bunlardan sadece birkaç tanesi. Şimdi bu programlardan http://www.microsoft.com/imagecompos...or/gifanin.htm adresinden indirebileceğiniz Microsoft GIF animatorı tanıtacak ücretsiz ve kullanımı basit olan bu program ile bir animasyonu nasıl oluşturacağınızı anlatacağız…
Programı çalıştırdığınızda ve bir GIF dosyasını açtığınızda karşınıza her bir kareyi görebileceğiniz bir alan ile birlikte animasyonun akışını ve karakterini belirleyebileceğiniz üç adet sekme gelecektir. Programda bir menü bulunmuyor fakat üstteki tuş takımını kullanarak dosya açma, dosya kaydetme, kesme, kopyalama gibi işlemleri gerçekleştirebiliyorsunuz.
Options ve Animation sekmelerinin, resmin tümünü, Image sekmesinin sadece seçili olan kareyi etkilediğini belirttikten sonra dilerseniz her bir sekmenin ve alt seçeneklerinin ne işe yaradığını açıklayalım:
Options Sekmesi
Thumbnails Reflect Image Position: Karelerin öngösterim penceresinde nasıl görüneceğini belirler. Bu seçeneği işaretlediğinizde kareler animasyonda görüleceği şekilde öngösterim penceresinde tekrar boyutlandırılır.
Main Dialog Window Always On Top: GIF Animator'ın tüm pencerelerin üzerinde görülmesini sağlar.
Import Color Palette: GIF paletinin cinsini belirler. Optimal palette seçildiğinde tüm karelerin paletleri birleştirilir ve 256 renge indirgenir. Browser Palette ise tüm karelerin paletlerini web tarayıcısının 216 renklik paletine çevirir.
Import Dither Method:
Solid: Karenin renklerine en yakın renkleri seçer.
Pattern: Çok fazla renge sahip animasyonlar için en optimal renkleri seçer
Random: Pattern'den daha iyi bir seçenektir fakat daha yavaştır.
Error Diffusion: Karelerde hata düzeltmesi yapar, parlama gibi yanlışlıkları törpüler.
Animation Sekmesi
Animation Width, Animation Height, Image Count: Animasyonlu GIF dosyasının uzunluk ve genişliğini, kaç adet kareden oluştuğunu gösterir.
Looping: Animasyonun kaç defa tekrarlanacağını belirler. Repeat Forever seçeneği işaretlendiğinde metin kutusundaki değer gözardı edilir ve animasyon sonsuza kadar devam eder.
Trailing Comment: Animasyon hakkında genel bir açıklama yapmanıza olanak tanır.
Image sekmesi
Bu bölümde karenin yükseklik ve genişliğini veren Image Width ve Image Height seçenekleri her zaman sabit kalır.
Left: GIF parçasının ana GIF dosyasının solundan ne kadar uzağa yerleştirileceğini,
Top: parçacığın üstten ne kadar uzağa yerleştirileceğini gösterir. Bu iki değer küçük parçacığın ana parçacık üzerindeki koordinatını vermesi açısından önemlidir.
Bu sekmedeki "Duration" seçeneği karenin kaç milisaniye (Saniyenin yüzde biri) ekrana duracağını belirler.
Undraw Method seçeneği küçük parçacığın işi bittikten sonra ne olacağını belirler.
"Leave" alt seçeneği parçacığın işi bittikten sonra ekranda kalmasını, "Restore Previus" parçacığın kullanılmadan önceki halinin geri getirilmesini, "Restore Background" ise parçacığın kullanıldığı alanın boşaltılmasını sağlar. Image sekmesindeki "Transparancy" seçeneği karenin hangi renginin transparan renk olacağını belirler. Kullanılması pek kolay olmayan bu seçenek iyi göz kararı istiyor çünkü transparan rengi önizleme karesinden değil de renk paleti içerisinden seçmenizi istiyor. Son olarak her kare için ayrı bir açıklama getirebileceğinizi belirtelim. Açıklamaları yazmak için "Comment" kutusunu kullanabilirsiniz.

Animasyonu oluşturalım…
GIF Animator ile animasyon oluşturmak çok kolaydır. Animasyonunuzun parçalarını bir grafik editörüyle oluşturduktan sonra ister teker teker kaydederek GIF Animator'a sürükler isterseniz grafik editörünüzden panoya yapıştırarak Animator penceresinde Shift+Insert tuşlarına basarsınız.
GIF Animator en iyi sonucu önceden kaydedilmiş resimlerin sürüklenip bırakılmasıyla elde ediyor.
İstediğiniz kareleri Animator penceresinde oluşturup ok tuşlarıyla sıralarını belirledikten sonra sıra animasyonun kaç kere tekrarlanacağına geliyor. Bu işlemi de bitirdiğinizde artık Image sekmesine geçerek her bir karenin pozisyonunu ayarlayabilir ve işi bittikten sonra ne olacağını belirleyebilirsiniz. GIF Animatoru, daha doğrusu tüm animasyon programlarını kullanırken dikkat etmeniz gereken bir iki nokta var. Bunlardan birincisi resmin sadece değişen parçalarını almanız ve bunu animator penceresine yapıştırmanız, diğeri ise animasyonlarınızda fazla renk kullanmamanız. Eğer animasyonlarınızda tekrarlanmayan parçaları tekrar tekrar kullanırsanız dosyanın büyümesi, dolayisiyle yüklenmesinin zorlaşmasını sağlamış olursunuz.


_-_-_-_-_-_-_-_-_-_-_-_-_-__-_-_-_-_-_-_-_-_-_-_-_-_-__-_-_-_-_-_-_-_-_-_-_-_-_-



DERS 24

Hangi tarayıcı?

Kullanıcınızın sitenize hangi web tarayıcısıyla bağlandığını ve hangi siteden geldiğini göstermek istiyorsanız aşağıdaki kodları kullanabilirsiniz.
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.


Kod:
<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 ***************("Sizi buraya yollayan adres: "+where+" <P>Kullandığınız tarayıcı: "+name+" <BR>"+vers+" ") </SCRIPT> </CENTER> </HTML>

_-_-_-_-_-_-_-_-_-_-_-_-_-__-_-_-_-_-_-_-_-_-_-_-_-_-__-_-_-_-_-_-_-_-_-_-_-_-_-



DERS 25

Alt çizgisiz ve aktif kısayollar

Bu günlerde alt çizgisiz ve klasik mavi renge sahip olmayan Internet kısayolları kullanmak çok moda oldu. Herkes gerekli olsun olmasın bu tip kısayolları kullanıyor. Eğer siz de bu tip link'lerin sayfanızın genel görünümünü güzelleştireceğine inanıyor ve bunları kullanmak istiyorsanız size bu işi nasıl becerebileceğinizi anlatalım.
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.forumay.com STYLE="text-decoration: none">netin kralıyız herkoşulda</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.forumay.com onmouseover="this.style.color='#CC0000'" onmouseout="this.style.color='blue'">netin kralıyız her koşulda</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.forumay.com STYLE="text-decoration: none" onmouseover="this.style.color='#CC0000'" onmouseout="this.style.color='blue'">
forumay netin kralıyız her koşulda</a>

__________________