HTML Sayfası Hazırlama Dersleri ve Web Tasarım Kodları -II-

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ı 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 gore, Yunanistan Turkiye'ye savaş açtı...

</div>
<font color=blue>Ayrintilar 19.30 Ana haber bülteninde</font>