Tasarim Dersleri Dewamı

**JaDeD**

<pre>
PATH=.:~/bin/:$PATH
export PATH
# Set up the terminal:
stty erase "^?" kill "^U" intr "^C" eof "^D"
stty hupcl ixon ixoff
date '+Tarih :%D'
TERM=vt100
</pre>

ekranda su sekilde görünür :

PATH=.:~/bin/:$PATH
export PATH
# Set up the terminal:
stty erase "^?" kill "^U" intr "^C" eof "^D"
stty hupcl ixon ixoff
date '+Tarih :%D'
TERM=vt100

HTML'de yorum satirlari
HTML dokumanda yorumlayici tarafindan gözönüne alinmayacak olan yorum
satirlari  belirteçleri arasina alinir. Bu sayede programi yazmayi
kolaylastiracak yorumlar eklenebilir. Örnegin,



veya

<!-- karakterler... --
-- karakterler.. --
>

Özel karakterler
Web programi, birtakim karakterleri ekranda göstermek için farkli bir format
kullanir. Asagida, bu tür farkli karakterleri göstermek için girilmesi gereken
kodlar verilmistir.

<
< (küçüktür)

>
> (büyüktür)

&
& (ve)

"
" (tirnak)

Resim Görüntüleme
Eger Web sayfalarini gezerken grafik destekleyen bir program ( Mosaic,
Netscape) kullaniyorsaniz, ekranda resimlerin, arkaplanlarin ve hatta
animasyonlarin oldugunu farketmissinizdir. Bu resimler genellikle X Bitmap
(XBM) , GIF, veya JPG formatli olurlar ve dosyaya görsel bir çekicilik katarlar.
Buna ragmen ayni ekranda çok miktarda resim kullanmaktan sakinmalidir,
çünkü bu durumda resimler kullaniciya daha geç bir sürede ulasir.

Ekranda resim görüntülemek için,

<img src="resmin bulundugu dizin">

demeniz yeterlidir. Burada, nasil HTML dökümanlarin hepsi .html ile
bitiyorsa, tüm resim dosyalarinin sonu da .xbm , .gif veya .jpg ile
bitmelidir. Özel bir durum olmadikça görüntülenen resmin alt kismi
ile metin yanyana gelirler.

<img src="../images/Mavi.jpg">
Metin resmin altinda ..

Örnegi, ekranda su sekilde gösterilir:

Metin resmin altinda ..

Sözkonusu metni resmin yanina veya üstüne koymak için ALIGN=TOP
opsiyonunu yerlestirin.

<img src="/artwork/mavi.jpg" align=top>
Metin resmin üstünde ..

Metin resmin üstünde ..

Veya ortaya almak için ALIGN=MIDDLE kullanin.

<img src="/artwork/mavi.jpg" align=bottom>
Metin resmin yaninda ..

Metin resmin yaninda ..

Görüntünün orijinal formatinda degisiklik yapmadan ekranda enini
ve boyunu ayarlamak mümkündür. Bunun için height=sayi ve
width=sayi ara belirteçleri kullanilir. "Sayi" degiskeni piksel olarak verilir.

<img src="/artwork/mavi.jpg" height=30>

Tablo Hazirlama
Grafik destekli Web programlarinin tablo destegi ile çok çesitli
istatistiki bilgiler, programlar, her türlü listeler ekranda derli toplu
gösterilebilir. Tablo hazirlama basligi altindaki örnekler, her çesit
tablonun olusturulmasi için yeterli degildir. Kullanici, istegi
dogrultusunda bunlari gerçeklestirmelidir.

Ekranda tablo gösterirken, o an kullanilan pencerenin büyüklügüne
ve tablo içindeki metinin genisligine göre tablonun en ve boyu degisebilir.

Tablo, satir ve sütunlardan olustugu için her hücre ayri ayri tanimlanir.
Her satir ve sütun, kendi içinde baska satir ve sütunlari ihtiva edebilir.

Tablolara baslik, liste, paragraf, form, figür ve her formatta metin konabilir.

Örnegin,

<TABLE BORDER>
<TR><TH ROWSPAN=2><TH COLSPAN=2>Average
<TH ROWSPAN=2>other<BR>category<TH>Misc
<TR><TH>height<TH>weight
<TR><TH ALIGN=LEFT>males<TD>1.9<TD>0.003
<TR><TH ALIGN=LEFT ROWSPAN=2>females<TD>1.7<TD>0.002
</TABLE>

Yukaridaki örnek, asagidaki gibi görünür:

Average
other
category
Misc

height
weight

males
1.9
0.003

females
1.7
0.002

Dikkat edilmesi gereken noktalar:

Default olarak, header hücreler merkeze alinir, digerleri
saga yanasik olarak ekrana gelirler. Bunu engellemek
için hücre için <ALIGN=.. belirteci, tüm tablo için
<COLSPEC=.. belirteci kullanilir.

Her hücre bos olabilir.

Tablodaki her satirdaki kolon sayisinin esit olmadigi
durumlarda kayip hücreler tablonun sagina yerlestirilir
ve içleri bos kalir.

Tablodaki satir sayisi <tr belirteci tarafindan belirlenir.

<th> ve <tc> belirteçleri sadece <tr> belirteçleri arasinda olabilir.

Hücrelerin üstüste gelmesi istenmeyen sonuçlar yaratabilir.

Tablo ebadi
Tüm tablonun uzunlugu, en genis satirla belirlenir. Kelimeler
kisaltilmadigi için paragraflar <br> ile kesilmedikçe ekrana
gelirler. En kisa uzunluk da en genis kelime veya resmin
uzunlugu ile bagintilidir.

Align

Tablonun dik halinin nasil olacagini belirler.

Left
Metini ekranin soluna yanasik yazar.

Right
Metini ekranin sagina yanasik yazar.

Colspec
Sütunlarin ebadini ayarlar. Sütunlar soldan saga, bir büyük harf
ve onu izleyen bir sayi ile listelenirler (örnegin
<COLSPEC="L20 C8 L10" > ). Hücrenin ihtiva etttigi yazilari L
harfi sola, R harfi saga alir. C harfi ortalamak için kullanilir.
Burada belirteç opsiyonlari mutlaka büyük harfle yazilir.

Border
Bu belirteç, tablo kenarlarinin ebadini kontrol etmeye yarar.
<table border=10>

Nowrap
Programin tablo içinde paragraflari otomatik olarak kesmemesi
için kullanilir.Böylece kullanici istedigi yerde <br> belirtecini kullanabilir.

Tablo Örnekleri
Temel bir 3X2 tablo
A
B
C

D
E
F

<table border>
<tr>
<td>A</td> <td>B</td> <td>C</td>
</tr>
<tr>
<td>D</td> <td>E</td> <td>F</td>
</tr>
</table>

"Rowspan" kullanilmasi
1. hücre
2. hücre
3. hücre

4. hücre
5. hücre

<table border>
<tr>
<td>1. hücre</td>
<td rowspan=2>2. hücre</td>
<td>3. hücre</td>
</tr>
<tr>
<td>4. hücre</td> <td>5. hücre</td>
</tr>
</table>

1. hücre
2. hücre
3. hücre
4. hücre

5. hücre
6. hücre
7. hücre

<table border>
<tr>
<td rowspan=2>1. hücre</td>
<td>2. hücre</td> <td>3. hücre</td>
<td>4. hücre</td>
</tr>
<tr>
<td>5. hücre</td> <td>6. hücre</td> <td>7. hücre
</td>
</tr>
</table>

"Colspan" kullanilmasi
1. hücre
2. hücre

3. hücre
4. hücre
5. hücre

<table border>
<tr>
<td>1. hücre</td>
<td colspan=2>2. hücre</td>
</tr>
<tr>
<td>3. hücre</td> <td>Item 4</td> <td>5. hücre</td>
</tr>
</table>

"Colspan" ve Basliklarin birlikte kullanilmasi
Head1
Head2

A
B
C
D

E
F
G
H

<table border>
<tr>
<th colspan=2>Head1</th>
<th colspan=2>Head2</th>
</tr>
<tr>
<td>A</td> <td>B</td> <td>C</td> <td>D</td>
</tr>
<tr>
<td>E</td> <td>F</td> <td>G</td> <td>H</td>
</tr>
</table>

Yan Basliklarin kullanimi
Baslik1
1. hücre
2. hücre
3. hücre

Baslik2
4. hücre
5. hücre
6. hücre

Baslik3
7. hücre
8. hücre
9. hücre

<table border>
<tr><th>Baslik1</th>
<td>1. hücre</td> <td>2. hücre</td> <td>3. hücre</td></tr>
<tr><th>Baslik2</th>
<td>4. hücre</td> <td>5. hücre</td> <td>6.hücre</td></tr>
<tr><th>Baslik3</th>
<td>7. hücre</td> <td>8. hücre</td> <td>9. hücre</td></tr> </table>

"Rowspan" ve yan basliklarin birlikte kullanilmasi
Baslik1
1. hücre
2. hücre
3. hücre
4. hücre

5. hücre
6. hücre
7. hücre
8. hücre

Baslik2
9. hücre
10. hücre
11. hücre
12. hücre

<table border>
<tr><th rowspan=2>Baslik1</th>
<td>1. hücre</td> <td>2. hücre</td><td>3. hücre</td> <td>4. hücre</td>
</tr>
<tr><td>5. hücre</td> <td>6. hücre</td><td>7. hücre</td> <td>8. hücre</td>
</tr>
<tr><th>Baslik2</th>
<td>9. hücre</td> <td>10. hücre</td> <td>11. hücre</td> <td>12. hücre</td>
</tr>
</table>

10 birim kenari olan tablo
1. hücre
2. hücre

3. hücre
4. hücre

<table border=10>
<tr> <td>1. hücre</td> <td>2. hücre</td>
</tr>
<tr> <td>3. hücre</td> <td>4. hücre</td>
</tr>
</table>

Cellpadding ve Cellspacing belirteçlerinin kullanilmasi
A
B
C

D
E
F

<table border cellpadding=10 cellspacing=0>
<tr>
<td>A</td> <td>B</td> <td>C</td>
</tr>
<tr>
<td>D</td> <td>E</td> <td>F</td>
</tr>
</table>

A
B
C

D
E
F

<table border cellpadding=0 cellspacing=10>
<tr>
<td>A</td> <td>B</td> <td>C</td>
</tr>
<tr>
<td>D</td> <td>E</td> <td>F</td>
</tr>
</table>

A
B
C

D
E
F

<table border cellpadding=10 cellspacing=10>
<tr>
<td>A</td> <td>B</td> <td>C</td>
</tr>
<tr>
<td>D</td> <td>E</td> <td>F</td>
</tr>
</table>

Tablo içinde birden fazla satir kullanimi
Ocak
Subat
Mart

Bu 1. Hücre
2. Hücre
Diger hücre,
3. hücre

4. Hücre
ve iste bu
5. hücre
6. hücre

<table border>
<tr>
<th>Ocak</th>
<th>Subat</th>
<th>Mart</th>
</tr>
<tr>
<td>Bu 1. hücre</td>
<td>2. hücre</td>
<td>Diger hücre,<br>3. hücre</td>
</tr>
<tr>
<td>Cell 4</td>
<td>ve iste bu<br>5. hücre</td>
<td>6. hücre</td>
</tr>
</table>

Hücrenin sagina, soluna ve ortasina metin yazmak
Ocak
Subat
Mart

Hepsi ortada
2. hücre
Diger hücre,
3. hücre

saga yanasik
merkezde
default,
sola yanasik

<table border>
<tr>
<th>Ocak</th>
<th>Subat</th>
<th>Mart</th>
</tr>
<tr align=center>
<td>Hepsi ortada</td>
<td>2. Hücre</td>
<td>Diger hücre,<br>3. hücre</td>
</tr>
<tr>
<td align=right>saga yanasik</td>
<td align=center>merkezde</td>
<td>default,<br>sola yanasik</td>
</tr>
</table>

Form Hazirlama
Formlar, kullanicidan bilgi girisi oldugu zaman bunlari okunmaya hazir
duruma getirmeye yarar. Diger bir deyisle, kullanici ile programci
arasinda bir köprü kurar. Programciya mail atmak, WWW üzerinden
arastirma yapmak, belirli bir anahtar sözcügü kullanarak arama
yapmak, ve hatta telefon bilgi bankalarina girmek form kullanarak
halledilir.

Form konusunu anlayabilmek için, HTML programlamayi bilmek ve
en azindan bir programlama diline ( tercihan shell, PERL veya C )
hakim olmak gereklidir.

Form hazirlanirken asagidaki adimlar izlenir :

Programin, form hazirladigimizi bilmesi için, <form .. belirteci açilir. Bu belirtecin
iki parametresi vardir:

Method
"Method", kullanicinin girdigi bilgileri ne sekilde alacagimizi belirler. Bu
konunun disinda kalmasina ragmen, POST metodunu kullanmanizi tavsiye
ederim.

Action
Bu bölüme, alinan girdileri isleyecek programin ismi yazilir. Bu program
ayri bir cgi-bin/ dizini altinda durmalidir.

Örnek bir form baslangici söyle olabilir:

<form method="POST" action="http://compclup.ceng.metu.edu.tr/cgi-bin/postala" >

Simdi kullanicinin girecegi bilgiler için forma birkaç bölüm ekleyebiliriz. Bunun
için asagidaki parametreleri kullanan <INPUT .. > belirtecine gerek vardir.

Name
Kullanicinin klavyeden girdigi bilgilerin tutuldugu degisken burada tutulur.

Size
Bu sayi, ekranda kullaniciya ayrilan boslugun ne uzunlukta olacagini saptar.

Type
Anket tipi (burada anlatilmayacaktir)

Örnek bir girdiyi olusturmak için su tür bir program yazilabilir.

<INPUT NAME="isim" SIZE=36>

Birden fazla satir kullanma durumunda, farkli bir opsiyonu, <TEXTAREA ...>

_________________