1 web tasarımı html kodları ve kullanımlaryilmaz.coolpage.biz/pdfler/kb.pdf · yukarıdaki bu...
TRANSCRIPT
1 Web Tasarımı HTML Kodları ve Kullanımları:
1.1 Temel bileşenler: html, head, title, meta ve body
Web tasarımı yaparken bir WEB sayfasının ilk karşılaşacağımız 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 Firefox ya da Internet Explorer bunu sayfayı tanımlamakta kullanır.
<meta> : sayfanın içeriği hakkı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 sayfa hakkındaki genel tanımlamaları yapmakta kullanılır.
Yukarıdaki bu komutların, bir web sitesi 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çma yazılardır. </body> </html>
Aslında en basit web sayfası şöyle olabilir:
<html> Benim neyim eksik? </html>
sondaki '</html>' yi koymasak dahi www sitesi gosterici programı (Firefox, Opera, IE, ...) bunu bir HTML sayfası olarak yorumlayacaklardır.
1.2 Renkler, body, font, ve h1..h6
Önceki örnekte '<body color=white>' diye, aşağıdakinin basitlestirilmiş biçimini kullanmıştık:
<body font=purple bgcolor=#FFFFFF text=black link=blue vlink=#808090>
Burada font ile kullanilan 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çilmis bağların rengi belirlenir.
renk belirtmek için o rengin İngilizce adı ya da RGB değerleri onaltılık sistemde verilir. RGB deki sıraya göre 00-FF arası üç 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ındakı yazılar belirtilen renkte yazılır.
<h1> ve </h1> den <h6> ve </h6> ya kadar standard 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, ve her gün A vitamini alı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 bir yolunu görmüştük. HTML web 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 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> ile sınirlanan yazıların göruntü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.
<br> bir satır atlamak için kullanılır.
<hr> bir çizgi çeker.
1.4 Sayfada resim göstermek
En basit şekliyle, bir sayfaya resim koymak için aşağıdaki komut şu şekilde;
<img src="dosya-adi" alt="..." align=... >
kullanılır.
Burada dosya-adı gösterilecek grafik 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 yer adı belirtmeye gerek yoktur.
Alt ile ise lynx kullanıcılarının görebileceği bir açıklama yazmış oluruz.
Align ile de resmin konumunu belirleriz.
Örneğin:
<img src=resim.gif align=right> ile resmin sağa yanaşık 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='i kullanarak resmin çerçevesini belirleriz; border=0 dersek hiç çerçeve çizilmez.
Width ve height ile resmin boyutlarını belirleyebiliriz. Bunlardan sadace birini verirsek, resmin boyutu orantılı olarak çizilecektir. Yani <img src=resim.gif width=300> demişsek, ve de resmimiz aslında 100 nokta genişliğinde 50 nokta yüksekliğinde idiyse, ekrana 300 nokta eninde ve 150 nokta yüksekliğinde çizilecektir. Her iki değeri de (width=... height=...) kullanmışsak, resmin oranını istediğimiz gibi değiştirmek mümkün olur.
Bu arada, sayfanın internetten indirilirken hızlı gösterilmesini istiyorsak, her resmin width ve height ö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 gibi gö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 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.
1.5 HTML sayfasına bağ (link) yerleştirmek
<a> ve </a> : HTML'nin temeli 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 bir makinedeki bir başka nesneyi (yazı, grafik, video vs.) gösteren bir bağ (link) olur.
Bu linkler, mevcut internet araçlarından biridir. Örneğin: http:// ftp:// telnet:// gopher:// news:// bu araçlardan bazılarıdır.
Bunu kullanırken;
<a href="telnet://orca.cc.metu.edu.tr/> Orca'ya Netscape içinden bağ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">Neye Benzediğimi Görmek İçin Buraya Bas</a>
Yukarıda adı geçen resim bu web sayfası ile aynı dizinde (directory) olmalıdır.
Başka şekilde örnekler ise:
<a href="ftp://ftp.metu.edu.tr/pub/cica-win95/"> Windows95 için Uygulama dosyaları</a>
<a href="nntp://news.metu.edu.tr/> Netnews 60000 den fazla konuda insanların yazıştığı bölge</a>
<a href="news:comp.sys.cbm"> NetNews'in C64 bilgisayarlarına ilişkin tartışmaları</a>
Ve, internetin en gözde kullanımı: bir web sayfasından başka bir web sayfasına bağlanma:
<a href="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/") belli ama hangi dosyada oldugu yazılmamış. Böyle bir durumda web sunucu program dosyanın adının 'index.html' olduğunu öngörür.
Kendi dizininizdeki bir sayfa için:
<a href="ihd.html"> İnsan Hakları Derneği ve pişmiş tavuk için buraya tıklayabilirsiniz.</a>
1.6 Bağlar yardımıyla etkileşimli kullanım örneği
Web sitesinde bir bağa (link) 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ı tasarımı yapmalısınız:
<html> <title>sayfa1</title> <body> <a href="sayfa2.html"><img src="resim1.gif"></a> </body> </html>
sonra da ikinci sayfa da hazırlanmalı:
<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 ş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ütunlara ayrı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ı width parametresi ile belirtiriz. <multicol cols=3 width=75%> gibi. Burada boşluğu yüzde yerine piksel olarak da verebiliriz. Ayrıca iki 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çin boşluk bırakmak mümkün. Örneğin <spacer type=block size=48> ile 48x48 piksellik bir boş kare alan yaratmis oluruz. Burada block yerine vertical ya da horizontal kullanmak da olası. Ayrica, <spacer type=block width=320 height=200 align=right> ile 320x200'luk bir boşluk yaratıp bunu ekranda sağa dayatmış oluruz. Gene align komutundan sonra right, left, center, absmiddle gibi diğer konum belirteçlerini kullanabiliriz.
: 1 karakterlik boşluk bırakmak için kullanılır. Basit tablolar yapmak için kullanılabilir. Örneğin, aşağıdaki boşluklar yerine kullanırsak hizalı görünür: <h3><br> yıl ay gün <br> --- -- --- <br></h3>
1.8 Sayfalarda tablo kullanı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şlamak iç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=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 oluş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ık efektimiz var (cellspacing ile cellpadding).
Örnekte hücre genişliklerin yazı uzunluğuna göre otomatik ayarlanmamsı 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üksekliğ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çiçe 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.
1.9 Basit bir HTML sayfası için gereken son noktalar
Daha önce kısaca değinildiği gibi, ilk yüklenecek sayfanın adı standart olarak 'index.html' olarak belirlenmiştir. Dolayısıyla ilk sayfanızı bu şekilde adlandırırsanız;
http://www.physics.metu.edu.tr/~filker/ilksayfa.html
yerine
http://www.physics.metu.edu.tr/~filker/ gibi, daha kısa olan, bir adres kullanabilirsiniz.
2 İleri düzey bilgilerden seçmeler
2.1 Sayfalara 'meta' komutu ile kimlik vermek
Web sayfamızın Google, MSN Search, Slurp, Gigablast, Didikle vs. gibi tarayıcı programlar tarafından içeriğine uygun olarak dizinlerine aktarılmasını istiyorsak, <meta ...> komutunu kullanmak uygun duser. Ayrıca, gene bu komut sayesinde sayfamıza bağlanani bir başka www adresine yönlendirebilir, bu yolla bir takım hareketli sayfalar dahi hazı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çin kısa, öz, ve içeriğe uygun olması gerekir.
Tarayıcılar artık sayfanın tümünde geçen sözcüklere ve bu sözcüklerle ilgili diger sözcüklere bakarak arama yapsa da, sayfanızın hangi ölçütlere göre aranması gerektiğini sizden iyi kimse bilemez. Onun için, sayfayı tanımlayan anahtar 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 olarak sayfadan sorumlu kişiyi belirtiriz:
<meta name="author" content="İlker Fıçıcılar">
Hazırladığımız bütün sayfalara bu türden kimlik vermeyi alışkanlık haline getirirsek, interneti araştırmaları için bir kaynak olarak kullananlara epey yardım etmiş oluruz.
. Sayfa yönlendirme:
Eğer yakında www adresimiz geçersiz olacaksa ve, yeni bir web hosting adresine şimdiden taşınmışsak, bunu kullanıcalara önceden duyurmalı ve onları yeni adrese yönlendirmeliyiz. Bunun için eski sayfamızı şu şekilde değ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 new address<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 not direct you to the new address in 3 seconds, then please <a href="http://www.geocities.com/SiliconValley/Vista/5666/"> click here</a>. </font></h3> </left></body></html>
Bu ornekte <meta http-equiv="refresh" ...> diyerek, www gösterici programına yeni bir sayfa yüklemesini istediğimizi belirtiyoruz.
Bu yüklemeyi kaç saniye sonra yapması gerektiğini '<meta ..' nin devamındaki 'content="3;....">' yazısı ile belirliyoruz. Buradaki '3' yerine saniye 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öre değ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ı sayfalar hazırlarsak, ve 'meta' komutunun adres kısmına sıradaki sayfanın adresini verirsek, hayal gücümüz ölçüsünde hareketli web sayfaları tasarımı yapabiliriz.
Örneğin birisi sayfamıza bağlandığında, ekranda 3 2 1 şeklinde bir gerisayim görmesini ve ardından asıl sayfanın yüklenmesini istiyorsak, şu şekilde sayfalar hazı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 sayfaya yönlendiririz. En sonunda da hiç bir yönlendirme içermeyen asıl sayfamıza geliriz. Dolayısıyla, 'index.html' , 'A.html' , ' B.html' , ' asil.html' adlarında dört sayfa hazırlamamız yeterli olacaktı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 arkaplan programı ile sürekli yeni resimler ve yeni bir index.html hazı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şik yerlerine tıklandığında değişik bağların yüklenmesi veya değişik bir 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 resmi tanımladığımız '<img ...' belirtecinin içine bir kaç unsur daha ekleyerek 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" ISMAP usemap="#falanca" width=160 height=100>
ISMAP, resmin bir harita olduğunu. usemap="..." hangi usemap html kodu tanımını kullanması gerektiğini, www gö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 poligon tanı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 alana tıklanıldığında neyin yüklenmesi gerektiğini söylüyor.
web sitesi alanında bir çember için X-merkez,Y-merkez,R-yarıçap biçiminde koordinat tanı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 '<area shape="default" nohref>' ile resmin diger bölgelerine tıklanıldığında hiç bir sey yapılmaması gerektiğini söylüyoruz.
Evet bir 'harita' tanımı için gerekenler bu kadar.
Şip Şak Çeviri www.SipSakCeviri.com Ticari Web Sayfası Çevirisi ve İhracata Uygun Broşür Hazırlama Dosyanızın fiyatını otomatik hesaplatabilir, çevirinin ilerleme durumunu cep telefonunuzdan WAP ile izleyebilirsiniz!...
2.3 Dinamik HTML ile Web Tasarımı
Aşağıdaki örnekte, mouse yazının üzerine geldiğinde, tıklamaksızın yazı
<h2 style="color:purple;" onmouseover="detay.style.display=''" onmouseout="detay.style.display='none'">Flash Haber</h2> <div id="detay" style="display:'none'; color:red;">
değişir:
Son gelen haberlere gore, Yunanistan Turkiye'ye savaş açtı...
</div> <font color=blue>Ayrintilar 19.30 Ana haber bülteninde</font>
onu 3: Script Nedir? TML dosyasõ içine gömülmüş kodlara script denir. Yorumlanmasõ için Internet rayõcõsõna ihtiyaç vardõr. HTML dilinin karşõlayamadõğõ bazõ ihtiyaçlara çözüm
retmek için script’ler kullanõlõr. Giriş 279
õr. Amaç olarak HTML.in yetmediği yerlere ünülmüştür. Web programcõlõğõna dinamik bir
dõran JavaScript, istemci tarafõnda çalõşõr. Kullanõmõ giderek
õcõlarõn
içinde yorum satõrlarõ için // ve /* ... */ ifadeleri kullanõlabilir. m satõrõ yapõlacaksa // ifadesi kullanõlõr.
õn başladõğõ yere /*, bittiği
sayfalarõ içine <head> etiketlerine gömülü olarak veya tõlõ dosyalara referans gönderilerek HTML içinden çağrõlabilir.
Modül 9: aScript dilinde nesneler, nesnelere uygulanan olaylar ve olaylara ilişkin gö-
ler,
nõ bir programlama dilinde olduğu gibi değişkenlere, klavyeden n,
KHtaüWeb ProgramlamayaJavaScript JavaScript dili, Netscape firmasõ tarafõndan oluşturulmuştur. Yazõm biçimi olarak C dili esas alõnarak tasarlanmõştscript.ler ile destek vermesi düşyapõ kazanyaygõnlaşan JavaScript, daha sonra Microsoft firmasõnõn Internet Explorer Web tarayõcõsõnda da kullanõlabilir hale gelmiştir. Günümüzde tüm taraydesteklediği bir script dilidir. JavaScript kodlarõ yazmak için Notepad gibi bir metin editörü yeterlidir. Kodlar <script>...</script> etiketleri arasõnda yazõlmalõdõr. Bu kod alanõSadece bir satõr yoru// bu satõr yorum satõrõdõr. Birden fazla satõr yorum satõrõ yapõlacaksa, satõrlaryere */ ifadeleri yerleştirilir. /* yoruma alõnan 1. satõr 2. satõr ... */ JavaScript kodlarõ HTML.js uzan280Javrevler vardõr. Bir nesneyi tõklamak, üzerine gelmek, üzerinde dolaşmak gibi işlemsayfa ile kullanõcõnõn etkileşimli olarak çalõşmasõnõ sağlar. JavaScript, aybilgi alma, ekrana çõktõ verme işlemlerine, koşul ve döngü yapõlarõna, fonksiyonesne ve olay kavramlarõna sahiptir. Kod 9.8: Örnek JavaScript <html> <head><title>onClick</title> <script language="javascript"> function merhaba()
{ alert ("beni tikladiniz"); } </script> </head>
put type="button" name="tikla" value="tikla" erhaba()>
llanõlacak script dili belirtilir. asõ için burada language=.javascript. bildirimi yapõlõr.
Örnek JavaScript
yazõ html ile yazõldõ.
nguage="JavaScript"> t.write("İşte bu ise JavaScript ile yazõldõ!")
aki script ifadesi head etiketleri arasõnda bir fonksiyon olarak değil, alinde kullanõlmõştõr.
gramlamaya Giriş 281 ler
. sahip olurlar. Çift tõrnak
tin ifadesi olarak anlaşõlõr. esi gereken nokta değişkenlerin küçük . büyük harf duyarlõ
de ilir.
urularak
s.; .;
=deger2+deger3; ; a sonlandõrma karakteri olarak ; kullanõlõr. degerToplam isimli
ve 30 değerleri toplanarak elde edilen 50 değeri tutulurken, değişkenlerinden gelen metin ifadeleri
yõs2005. değeri oluşturulur.
<body> <inonClick=m</body> </html> script etiketinin language attribute değeri ile kuJavaScript kullanõlmKod 9.9: <html> <head> <title>JavaScript Örneği</title> </head> <body> <br> Bu <br> <script ladocumen</script> <br> Bu yazõ yine HTML ile yazõldõ.</body> </html> Buradbody etiketleri arasõnda satõr hWeb ProDeğişkenvar anahtar sözcüğü ile yeni bir değişken oluşturulur. Tür bilgisi saklanmazSayõsal değerler verildiğinde işlem yapma yeteneğineiçinde değer verildiğinde ise meDikkat edilmolmasõdõr. Bazõ tarayõcõlar için değişken isimlerinde bu duyarlõlõk göz önünbulundurulmazken, çoğu tarayõcõda küçük . büyük harf duyarlõlõğõna dikkat edBu nedenle her değişken adõ bu durum göz önünde bulundverilmelidir. var deger1; var deger2=20; var deger3=30; var ay=.Mayõvar yil=.2005var degerToplamvar tarih=ay+yilSatõrõn sonunddeğişkende 20tarih isimli değişkende, ay ve yilbirleştirilir ve .Ma
Koşul Operatörü [koşul ifadesi] ? koşul_doğru_ise : koşul_yanlõş_ise Değişken tanõmlarken aritmetik, karşõlaştõrma ve mantõksal operatörler
n koşul operatörleri kullanõlabilir. k satõrda yazõlmõş haline benzeyen bu operatörün kullanõmõ
< c) ? d : a+b ; l 9: (a + b < c ) ifadesi ile elde edilen sonuca göre, e değerine d değerleri atanõr.
lan 12 değeri c değerinden küçük olduğu için ifade onuçlanõr. Bu durumda d değeri, e değişkenine atanõr ve e
bilir.
cript operatörleri, Visual Basic .NET dilinde kullanõlan operatörlerden biraz dõr. Örneğin mod almak için Mod anahtar sözcüğü yerine % mod alma
kullanõlõr. törü ( = )
aritmetik işlemler yapmak için tanõmlanmõş operatörlerdir. peratörler
leri toplar. String değişkenlerini birbirine ekler.
a işlemi yapar. lerde bölme işlemi yapar.
.
olan ++ ve -- operatörleri, C tma yeteneğine
ğişken isminin arkas
kullanõlabilir. Bunlara ek olarak C dilinden geleBir if deyiminin teKod 9.10.da gösterilmiştir. Genel kullanõm biçimi ise şöyledir: [koşul ifadesi] ? koşul_doğru_ise : koşul_yanlõş_ise Kod 9.10: Koşul Operatörünün Kullanõmõ var a=5; var b=7; var c=14; var d=23; var e; e = (a + b282 ModüBu kodda,veya a + b a + b işleminin sonucu odoğru olarak sdeğişkeni 23 değerini taşõr. Bu koşulu if deyimi ile yazõlaif (a + b < c) e = d; else e = a+ b; Operatörler JavaSfarklõoperatörüAtama OperaDeğişkenlere değer atamak için = karakteri kullanõlõr. Aritmetik Operatörler Değişkenler üzerinde Tablo 9.1: Aritmetik OOperatör Açõklama + Sayõsal değişken- Sayõsal değişkenlerde çõkarma işlemi yapar. * Sayõsal değişkenlerde çarpm/ Sayõsal değişken% Sayõsal değişkenlerde mod alma işlemini yapar. ++ Sayõsal değişkenlerde artma işlemini yapar.-- Sayõsal değişkenlerde azalma işlemini yaparVisual Basic .NET aritmetik operatörlerinden farklõdili operatörlerindendir. Değişkeni bir artõrma veya bir azalsahiptir. Prefix (değişken isminin önünde) ve subfix (deõnda) olmak üzere iki kullanõm şekli vardõr. Değişkenin prefix kullanõmõ Kod 9.11.de gösterilmektedir. Kod 9.11: Prefix ++ operatörü var x = 5;
// x değişkeni bir artõrõlõr ve ekrana 6 değeri yazõlõr
n subfix kullanõmõnda ise önce değer alõnõr, akõş bir sonraki satõra
değeri yazõlõr.
ri de de karşõlaştõrma işlemleri yapõlabilir. Ancak bu
NET karşõlaştõrma operatörlerinden biraz farklõdõr. ştõrma Operatörleri
verir. cunu
. Sol taraf değeri, sağ taraf değerinden küçükse true
ucunu verir.
peratörü.
eşit.)
ğildir.)
peratörler ise Visual Basic .NET mantõksal operatörlerinden tamamen
4 Modül 9: peratörler
ve) operatörü. İki tarafta belirtilen ifadeler true ise, sonuç olarak döndürür.
fta verilen ifadelerden en az birinin doğru true değerini döndürür.
lamada And operatörünün karşõlõğõ && operatörüdür.
Web Programlamaya Giriş 283 document.write(++x); Değişkenigeçtikten sonra değişkenin değeri bir artõrõlõr. Kod 9.12: Subfix ++ operatörü var x = 5; /* x değişkeni önce yazõlõr, sonra bir artõrõlõr. Yani ekrana 5 yazõlõr. */ document.write( x++); // Ekrana 6document.write(x); Karşõlaştõrma OperatörleJavaScript kodlarõ içinoperatörler Visual Basic .Tablo 9.2: KarşõlaOperatör Açõklama == Eşit midir? operatörü. İki değer de birbirine eşit ise true sonucu!= Eşit değil midir? operatörü. İki değer birbirine eşit değilse true sonuverir. < Küçük operatörüsonucunu verir. > Büyüktür operatörü. Sol taraf değeri, sağ taraf değerinden büyük ise true son<= Küçük eşittir operatörü. >= Büyük eşittir oİki değerin eşitliğinin karşõlaştõrõlmasõ için == operatörü kullanõlõr. if (a == b) { document.write(.a ile b değişkeni } İki değerin eşitsizliğinin karşõlaştõrõlmasõ için != operatörü kullanõlõr. if (a != b) { document.write(.a ile b değişkeni eşit de} Mantõksal Operatörler Mantõksal ofarklõdõr. 28Tablo 9.3: Mantõksal OOperatör Açõklama && And (true değerini|| Or (veya) operatörü. İki taraolmasõ durumunda! Not operatörü: Koşulun yanlõş olmasõ durumunda true değerini verir. Visual Basic .NET programOr operatörünün karşõlõğõ ise || operatörüdür. Bir değerin değili anlamõna gelen Not operatörünü karşõlõğõ ise ! operatörüdür. Klavyeden Bilgi Almak ve Ekrana Çõktõ Vermek
JavaScript dilinde kullanõcõdan bilgi almak için formlarõn dõşõnda promt komutu kullanõlõr. promt komutu ile kullanõcõdan bilgi alõrken ayrõ bir pencere açõlõr. prompt(.soru., .cevap için rehber ifade.); Kod 9.13: Prompt ile kullanõcõdan değer almak
write komutu kullanõlõr. write(.Yazõlmak istenen değişkene ilişkin
ent fonksiyonuyla birlikte kullanõlõr.
larõ ve döngülerdir. Döngüler ştirilecek işlemlerin blok halinde yazõlmasõnõ sağlar.
põlacak işlemler bir satõrdan fazla yer tutuyorsa, {} parantezleri ile gruplanõr. Visual Basic .NET dilindeki gibi
ş ise
krarlanan belirli bir işlemi yaptõrmak için kullanõlan döngülerin JavaScript ki kullanõmõ tamamen C dilinin yapõsõna göre tasarlanmõştõr.
enel kullanõm biçimi aşağõdaki gibidir: (başlangõç_değeri; döngü_ifadesi; değişecek_değişken_adõ)
r a;
(a = 1; a <= b; a++) {
sünün yapõsõ: si )
art doğruysa yapõlacak işlemler
işlemler sual Basic .NET dilindeki Select Case döngüsüne karşõlõk olarak JavaScript
õmõ: itch (parametre)
var sehir; sehir=prompt(.Yaşadõğõnõz şehrin trafik kodunu giriniz., .İstanbul için 34, Ankara için 6 gibi.); JavaScript dilinde HTML sayfasõna yazõ yazdõrmak için document.açõklama., degisken); Görüldüğü gibi write komutu documKoşul ve Döngü Yapõlarõ Programlamanõn akõşõnõ yönlendiren koşul yapõbirden fazla gerçekleif koşul ifadesinin genel yapõsõ: if ( koşul ) // koşul doğru ise çalõşacak ifade // koşul yanlõş ise akõşõn devam edeceği alan Koşulun doğru olmasõ halinde yabu satõrlar End if ifadesi kullanõlmaz. Web Programlamaya Giriş 285 if (koşul) { //koşul doğru ise } else { //koşul yanlõ} Tedilindefor döngüsünün gfor{ //yapõlacak işlemler } Kod 9.14: For Döngüsünün Kullanõmõ vavar b = 10; fordocument.write( a , .. sayõ., .<br>.); } while döngüwhile ( döngü_koşul_ifade{ //ş} //şart doğru değilse yapõlacak Vidilinde switch-case ifadesi vardõr. Genel kullansw
{ case .ifade1.: // ifade1 koşulu doğru ise yapõlmasõ istenenler break; //break ile diğer koşullarõn da çalõşmasõ
ngellenir ve döngüden çõkõlõr.
ript dilinde, kodlarõn yeniden kullanõlabilmesi için kullanõlõr. Genel kullan õ:
yon_ismi(parametre1, parametre2)
desi ile geri döndürülür. d 9.15: JavaScript ile Toplama
, deger2)
la fonksiyonuna gönderilen deger1 ve deger2 değişkenleri toplanarak n sonuc değişkenine atanõr. return sonuc; ifadesi
iyonunda elde edilen sonuç geri döndürülür. aScript Nesneleri
yapõlõr. nu
llanõmõ: .,.pencere_ismi.,.pencere_ozellikleri.);
encere açõlõrken, close komutu ile pencere kapatõlõr. çmak için open komutuna ilk parametrenin girilmesi zorunludur.
õ durumlarda ncereye ait özellikler Tablo 9.4.te belirtilmiştir.
Özellikleri
. üntülenmesini sağlar.
//ecase .ifade2:. //ifade2 koşulu doğru ise yapõlmasõ istenenler break; } 286 Modül 9: Fonksiyonlar JavaScõmfunction fonksi{ //yapõlacak işlemler } Fonksiyon içinde hesaplanan değer, return ifaKofunction topla(deger1{ var sonuc= deger1+deger2; return sonuc; } topfonksiyon içinde oluşturulaile topla fonksJavJavaScript içinde bazõ işlemler, bazõ nesnelerin fonksiyonlarõ çağrõlarakÖrneğin document.write komutu, aslõnda document nesnesinin write metoduçağõrõr. Window Nesnesi Genel pencere özelliklerini tutan nesnedir. Pencere açma ve kapama işlemleri için bu nesne kullanõlõr. Genel kuwindow.open(. urlwindow.close(); open komutu ile yeni bir pYeni bir pencere aPencere_ismi, birden fazla pencere ile işlem yapõldõğkullanõlabilir. PeTablo 9.4: Pencere Özellikleri Özellik Açõklama Menubar Menü çubuğunun görüntülenmesini sağlar. Toolbar Araç çubuğunun görüntülenmesini sağlar. Web Programlamaya Giriş 287Tablo 9.4: Pencere Özellik Açõklama Location Adres çubuğunun görüntülenmesini sağlarStatus Durum çubuğunun gör
Scrollbars Kaydõrma çubuklarõnõn görüntülenmesini sağlar. sinin boyutlandõrõlmasõnõ sağlar.
ir. klõğõ verir.
iyaret edilmiş sayfalara tekrar ulaşabilmek için e bir önceki sayfaya
ilebilir. en alt kõsmõnda bulunan status penceresine erişmek için
lo 9.5.te belirtilen değişkenler kullanõlabilir. in Değişkenleri
sunucuya kendini tanõtõrken verdiği isim. si ile bilgi almak
9-9 httpequiv= Type> ül 9:
" "; ator.appName +"\r. ;
mu:"+navigator.appVersion +"\r. ; wseradi +="Kodadi:"+navigator.appCodeName+"\r. ;
gent:"+navigator.userAgent+"\r. ;
rayici()"></body> tml>
sayfasõ üzerinde kullanõcõnõn her türlü hareketi kontrol edilebilir. Bir sõ ve üzerinden ayrõlmasõ gibi hareketlere
olay denir. Bu olaylar ise onClick, onMuoseOver, onMouseOut, onSubmit,
Resizable PencereWidth Açõlan pencerenin pixel genişliğini belirtir. Height Açõlan pencerenin pixel yüksekliğini belirtir. Left Ekranõn sol noktasõ ile pencere arasõndaki uzaklõğõ verTop Ekranõn üst noktasõ ile pencere arasõndaki uzaKod 9.16: Yeni bir pencere açmak window.open("http://www.bilgeadam.com", "bilgeadam" , "menubar=no, toolbar=no, scrollbars=yes, location=yes, width=300, heigt=300";) Internet tarayõcõsõ ile daha önce zwindow.history.go(-1) komutu kullanõlabilir. -1 ifadesi ilgidilir. Sayõ artõrõlarak daha önceki sayfalara da gidInternet tarayõcõsõnõn window.status komutu kullanõlõr. window.status =.JavaScript öğreniyoruz!.; Navigator (Tarayõcõ) Nesnesi JavaScript, tarayõcõlarõ da bir nesne olarak değerlendirir. Kullanõcõnõn tarayõcõ- sõna ilişkin bilgileri almak için TabTablo 9.5: Navigator (Tarayõcõ) NesnesinDeğişken İsmi Açõklama Appname Tarayõcõ adõ Appversion Tarayõcõ versiyonu AppCodeName Tarayõcõnõn kod adõ UserAgent Tarayõcõnõn Kod 9.17: Tarayõcõ nesne<html> <head> <title>Browser’õmõzõ tanõyalõm</title> <METAcontent=text/html;CHARSET=iso-885Content-288 Mod<script language="Javascript"> function Tarayici() { var browseradi=browseradi +="Browser:"+navigbrowseradi +="Surubrobrowseradi +="Useraalert(browseradi); } </script> </head> <body onLoad="Ta</hOlaylar Bir Web kontrolün üzerine gelmesi, dolaşma
onReset, onChange, onLoad, onUnLoad, onError, onAbort, onFocus, onBlur elirtilebilir.
e
inde ise onClick olaylarõnõ tetikleyen fonksiyonlarõn ismi lidir.
="tikla" value="tikla"
ğme tõklanõp bõrakõldõğõnda, onClick olayõ tetiklenir ve bu olayla reye girer. alert komutu ile ekrana bir mesaj
tusu çõkar. r.
aya Giriş 289
laylarõ devreye girer.
ndow.status="nesnenin dõşõna çõktõnõz." ;
href="http://www.google.com"
MouseOut = nesneDisinda()> Google
Submit rma bilgi girip sunucuya göndermesi durumlar
önderilecek forma girilen verilerin uygunluğunun lara yaptõrõlabilir.
.20: onSubmit Olayõ grula()
d="post" onSubmit="dogrula()"> ullanõcõya Ok ve Cancel düğmelerinden oluşan bir diyalog
nceresi açar.
rm içinde kullanõlan tüm metin alanlarõnõn temizlenmesini sağlar. Doldurulan
olarak bonClick Internet sitelerinin çoğunda en sõk kullanõlan JavaScript olayõdõr. Sayfa üzerindbir nesnenin fare ile tõklanõp bõrakõlmasõ sonucunda gerçekleşen olaydõr. Link, button ve resim nesneleri tõklanarak onClick olayõ tetiklenebilir. Nesnelerin etiketlerbildirilmeKod 9.18: onClick Olayõ function tikla() { alert(.Tõklama işlemi gerçekleşti..); } <input type="button" nameonClick=tikla()>Düilişkilendirilen tikla fonksiyonu devkuAyrõca onDblClick, çift tõklama olayõnõ tetikleWeb ProgramlamonMouseOver, onMouseOut Fare nesnenin üzerindeyken onMouseOver, fare nesne üzerinden ayrõlõnca onMouseOut oKod 9.19: onMouseOver ve onMouseOut Olayõ function nesneUzerinde() { window.status="Şu anda nesne üzerindesiniz."; } function nesneDisinda() { wi} <aonMouseOver = nesneUzerinde() on</a> onWeb sayfalarõnda ziyaretçinin foõnda onSubmit devreye girer. Gkontrolü bu olayõn tetiklediği fonksiyonKod 9function do{ confirm (.Formu doldurduysanõz OK’i tõklayõnõz’); } <form action="mail.pl" methoconfirm komutu, kpeonReset Fo
formda yanlõşlõk olduğunda bu olay tetiklenir. Kullanõcõya onay penceresi çõkartmak
t Olayõ il()
t="return sil()"> put type="text" name="mail">
Change değişikliğin gerçekleştiği bilgisi onChange olayõ ile
egisti()
elect name="degistir" size="1" onChange="degisti()">
ption>Ankara
ct>
lerden herhangi biri işaretlendiğinde uyarõ penceresi çõkar. d faya giriş yapõldõğõnda gerçekleşir. onUnLoad olayõ sayfadan
nda gerçekleşir. : onLoad ve onUnLoad Olayõ
rt("Sayfadan çõktõnõz..");
ody onLoad="giris()" onUnload="cikis()">
eb Programlamaya Giriş 291
aret edilen sayfadaki nesneler, çeşitli nedenlerden dolayõ tam olarak nelerinin yüklenmesinde problem
Bu tür durumlarõ ziyaretçiye bildirmek için onError veya onAbort
r ve onAbort Olayõ
için de kullanõlabilir. Kod 9.21: onResefunction s{ return confirm(’Silmek istediginize emin misiniz?’); 290 Modül 9: } <form onRese<in<input type="reset" value="sil"> </form> onBilgi girişi yapõlan alanlarda,tetiklenir. Kod 9.22: onChange Olayõ function d{ alert(.Seçimi değiştirdiniz.); } <form method="post"> <p> <s<option>Istanbul <o<option>Antalya </sele</form> Sunulan seçenekonLoad, onUnLoaonLoad olayõ sayçõkõldõğõKod 9.23function giris() { alert(.Sayfaya Giriş Yaptõnõz!"); } function cikis() { ale} <b</body> WonError, onAbort Ziyyüklenememiş olabilir. Genellikle resim nesçõkabilir.olaylarõ kullanõlõr. Kod 9.24: onErro
<img src="resim.gif" onError="alert(.Resim dosyasõ yüklenemedi’)"> onFocus, onBlur onFocus olayõ kullanõcõ kontrollerine giriş yapõlõrken gerçekleşir. onBlur olayõ
yapõlõrken gerçekleşir.
cument.form1.mesaj.value="isminiz alõndõ";
orm name="form1" method="post"> n isminizi yazõnõz!</h3></p>
put type="text" size="20" name="isim"
>
ise ve kullanõcõ kontrollerinden çõkõşKod 9.25: onFocus ve onBlur Olayõ function dogru() { document.form1.mesaj.value="Lütfen hata yapmayõn!"; } function sor() { do} <f<p><h3>Lütfe<inonfocus="dogru()" onblur="sor()"> <p<input type="text" name="mesaj"></p></form>