HTML Tasarım

.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.

<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:

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;

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.

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:

Ve, son
kimlik bilgisi olarak sayfadan sorumlu kişiyi belirtiriz:

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:

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:

A.html
için:

B.html
için:

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:

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ı:

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.

Hancı Eğitim

HTML Dersleri

Ara

Eğitim

Konular

Tags