İçerik olarak yapılacak her türlü öneri için: gorkem@compclup.ceng.metu.edu.tr adresine mail atmanız yeterlidir.
Temel bir döküman aşağıdaki gibi yazılabilir:
< title> Burası konunun yazılacağı yer </title> < h1> Bu, 1 numaralı başlık </h1> HTML dünyasına hoşgeldiniz. <br> Birinci paragrafımız. <p> Bu da ikinci.. <p>
HTML yazarken, metnin Web programının anlayacağı şekilde gösterilebilmesi
için belirteçler kullanır. Yukarıdaki örnekte:
Not1: HTML belirteçleri "case sensitive"dir..? < title > ,
< tITLE> veya < tiTlE> belirteçleri aynı görevi
yaparlar.
<title> Sayfamın konusu </title>
<Hy> Sayfamın başlığı </Hy>
olarak tanımlanmış bir belirteçte y, 1 ile 6 arası bir değer alabilir. Y
sayısı arttıkça fontun büyüklüğü azalır.
Pek çok uygulamada, sayfanın konusu ile başlığını aynı tutabilirsiniz.
HTML'ye hoşgeldiniz <br> Bu ilk paragraf <p>
Buna göre aşağıdaki örnek, okuduğunuz dosyanın başındaki örnekle aynı çıktıyı verir.
<title> Burası konunun yazılacağı yer </title> <h1> Bu, 1 numaralı başlık </h1> HTML dünyasına hoşgeldiniz. Birinci paragrafımız. <p> Bu da ikinci.. <p>
HTML dosyalarının okunurluğunu artırmak için başlıklar ile karşılık gelen belirteçleri aynı satirda, paragraf düzenleyen komutlar ise satır sonunda olmalıdır.
Bu ilk satır. <br> İkinci satır daha uzun. <br> Ama bu bir paragraf sonu..<p>
<center> In practical terms, HTML is a collection of styles. </center>
<a href="internet.html"> İnternet nedir? </a>
Ekranda "İnternet Nedir?" yazısı belirecek ve kullanıcıdan burayı seçmeyi bekleyecektir. Kullanıcı fare ile bu yazı üzerine tıkladığında ise program kontrolü yine bir HTML dosya olan internet.html dosyasına bırakacaktır. Bu durumda bulunduğunuz dizinden farklı bir dizindeki dosyaya bağlantı yapmak isterseniz, o dosyanın ait olduğu dizini yazmak zorundasınız.Buna göre "languages/Fortran/introduction.html" dosyasını kullanabilmek için
<a href="languages/Fortran/introduction.html" > Fortran diline giriş </a>
şeklinde bir belirteç yazmak gerekir.
URL-ismi://makina-ismi[:port]/dizinler/dosya-ismi
Burada URL,
file : Kendi sisteminizde bir dosyaya,
http : Bir WWW sunucusu üzerindeki dosyaya,
gopher : Gopher sunucusu üzerindeki dosyaya,
news : Bir UseNet newsgroup'taki dosyaya,
WAIS : WAIS sunucusu üzerindeki dosyaya
erişmek için kullanılır.
Port numarası, genellikle yazılmaz. Size aksi durum belirtilmedikçe,
kullanmanıza gerek yoktur.
Siz de okuduğunuz dosyaya ulaşmak için,
<a href=http://compclup.ceng.metu.edu.tr/web.lat5.html>
yazdınız.
<a href="bu_dökümanın#1.parça"> Buradan ilk bölüme gidin </a> <a href="bu_dökümanın#2.parça"> Buradan ikinci bölüme </a> <a name="1.parça"> İşte ilk bölüm> İlk bölüm ile ilgili metinler burada... </br> <a name="2.parça"> İşte ikinci bölüm> İkinci bölüm ile ilgili metiner burada.. </bt>
<a href= ile başladığınız belirteçte önce döküman ismini, sonra da dökümanın içindeki parça ismini girmelisiniz. <a name= belirtecinde ise o belirteçten itibaren parçanın başladığını anlıyoruz.
Kullanıcı ilk bölüme gitmek için fareyi kullandığında ekranda ,
İlk bölüm ile ilgili bilgiler buradaifadesini görecektir.
<a href="diğer_döküman_ismi#parça_ismi"> başka dökümana geçiş</a> <a name=parça_ismi>
<ul> <li> Elma <li> Armut </ul>Örnek, ekranda şu şekilde görülür :
<ol> <li> Linux İşletim Sistemi <li> Unix İşletim Sistemi </ol>ekrana şunları yazar:
<DL> <DT> NCSA <DD> NCSA, the National Center for Supercomputing Applications, is located on the campus of the University of Illinois at Urbana-Champaign. NCSA is one of the participants in the National MetaCenter for Computational Science and Engineering. <DT> Cornell Theory Center <DD> CTC is located on the campus of Cornell University in Ithaca, New York. CTC is another participant in the National MetaCenter for Computational Science and Engineering. </DL>Ekrandaki çıktı şu şekilde görünür:
<ul> <li> İstanbul'un büyük semtleri <lu> <li> Beyoğlu <li> Taksim <li> Bakırköy </lu> <li> Ankara'nın belli başlı yerleşim birimleri <lu> <li> Kızılay <li> Ulus </lu> </lu>Ekrandaki görüntüsü,
<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 şu şekilde 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
<!-- karakterler.. karakterler... -->veya
<!-- karakterler... -- -- karakterler.. -- >
<
>
&
"
Ekranda resim görüntülemek için,
<img src="resmin bulunduğu dizin">demeniz yeterlidir. Burada, nasıl HTML dökümanların hepsi .html ile bitiyorsa, tüm resim dosyalarının sonu da .xbm , .gif veya .jpg ile bitmelidir. Özel bir durum olmadıkça görüntülenen resmin alt kısmı ile metin yanyana gelirler.
<img src="../images/G.GIF"> Metin resmin altında ..Örneği, ekranda şu şekilde gösterilir:
Metin resmin altında ..
Sözkonusu metni resmin yanına veya üstüne koymak için ALIGN=TOP opsiyonunu yerleştirin.
<img src="/artwork/spot.GIF" align=top> Metin resmin üstünde ..Metin resmin üstünde ..
Veya ortaya almak için ALIGN=MIDDLE kullanın.
<img src="/artwork/spot.GIF" align=bottom> Metin resmin yanında ..Metin resmin yanında ..
Görüntünün orijinal formatında değişiklik yapmadan ekranda enini ve boyunu ayarlamak mümkündür. Bunun için height=sayı ve width=sayı ara belirteçleri kullanılır. "Sayı" değişkeni piksel olarak verilir.
<img src="/artwork/spot.GIF" height=30>
Ekranda tablo gösterirken, o an kullanılan pencerenin büyüklüğüne ve tablo içindeki metinin genişliğine göre tablonun en ve boyu değişebilir.
Tablo, satır ve sütunlardan oluştuğu için her hücre ayrı ayrı tanımlanır. Her satır ve sütun, kendi içinde başka satır ve sütunları ihtiva edebilir.
Tablolara başlık, liste, paragraf, form, figür ve her formatta metin konabilir.
Örneğin,
<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>
Yukarıdaki örnek, aşağıdaki 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:
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>
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>
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>
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>
Başlık1 | 1. hücre | 2. hücre | 3. hücre |
---|---|---|---|
Başlık2 | 4. hücre | 5. hücre | 6. hücre |
Başlık3 | 7. hücre | 8. hücre | 9. hücre |
<table border> <tr><th>Başlık1</th> <td>1. hücre</td> <td>2. hücre</td> <td>3. hücre</td></tr> <tr><th>Başlık2</th> <td>4. hücre</td> <td>5. hücre</td> <td>6.hücre</td></tr> <tr><th>Başlık3</th> <td>7. hücre</td> <td>8. hücre</td> <td>9. hücre</td></tr> </table>
Başlık1 | 1. hücre | 2. hücre | 3. hücre | 4. hücre |
---|---|---|---|---|
5. hücre | 6. hücre | 7. hücre | 8. hücre | |
Başlık2 | 9. hücre | 10. hücre | 11. hücre | 12. hücre |
<table border> <tr><th rowspan=2>Başlık1</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>Başlık2</th> <td>9. hücre</td> <td>10. hücre</td> <td>11. hücre</td> <td>12. hücre</td> </tr> </table>
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>
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>
Ocak | Şubat | Mart |
---|---|---|
Bu 1. Hücre | 2. Hücre | Diğer hücre, 3. hücre |
4. Hücre | ve işte bu 5. hücre |
6. hücre |
<table border> <tr> <th>Ocak</th> <th>Şubat</th> <th>Mart</th> </tr> <tr> <td>Bu 1. hücre</td> <td>2. hücre</td> <td>Diğer hücre,<br>3. hücre</td> </tr> <tr> <td>Cell 4</td> <td>ve işte bu<br>5. hücre</td> <td>6. hücre</td> </tr> </table>
Ocak | Şubat | Mart |
---|---|---|
Hepsi ortada | 2. hücre | Diğer hücre, 3. hücre |
sağa yanaşık | merkezde | default, sola yanaşık |
<table border> <tr> <th>Ocak</th> <th>Şubat</th> <th>Mart</th> </tr> <tr align=center> <td>Hepsi ortada</td> <td>2. Hücre</td> <td>Diğer hücre,<br>3. hücre</td> </tr> <tr> <td align=right>sağa yanaşık</td> <td align=center>merkezde</td> <td>default,<br>sola yanaşık</td> </tr> </table>
Form konusunu anlayabilmek için, HTML programlamayı bilmek ve en azından bir programlama diline ( tercihan shell, PERL veya C ) hakim olmak gereklidir.
Form hazırlanırken aşağıdaki adımlar izlenir :
Örnek bir form başlangıcı şöyle olabilir:
<form method="POST" action="http://compclup.ceng.metu.edu.tr/cgi-bin/postala" >
Örnek bir girdiyi oluşturmak için şu tür bir program yazılabilir.
<INPUT NAME="isim" SIZE=36>Birden fazla satır kullanma durumunda, farklı bir opsiyonu, <TEXTAREA ...> </TEXTAREA> opsiyonunu seçmelisiniz :
<TEXTAREA NAME="body" rows=10 cols=60></TEXTAREA>Yukarıdaki alana küçük bir metin de yerleştirebilirsiniz.
<TEXTAREA name="body rows=10 cols=60> Bu metin, kullanıcının yazacağı alanda görüntülenir. </TEXTAREA>
Neredeyse bitti. Kullanıcının tüm bilgileri girdikten sonra formu ister yollaması, isterse tekrar silmesi için ikon yaratan bir <input .. belirtecine gerek vardır. Bu belirtecin aldığı opsiyonlar,
Tipik bir örnek:
<input type="submit" value="Bu formu gönder" > <input type="reset" value="Temizle" >
Tamamlanmış form ekranda şu halde görünür.
<hr> <p> <form method="POST" action="http://compclup.ceng.metu.edu.tr/cgi-bin/deneme"><P> E-mail adresiniz : <INPUT NAME="email" SIZE=38>>/P><P> İsminiz : <INPUT NAME="name" SIZE=42><P> Buraya birşeyler yazabilirsiniz: <P> <TEXTAREA name="body" rows=10 cols=50>Something>/TEXTAREA> <P> <input type="submit" value="Gönder"> <input type="reset" value="Temizle"></P> </FORM> <p> <hr>
Şimdi aşağıdaki bilgilerin girilmesini isteyen bir form hazırlayalım ve .html formatında yazalım.
<html> <title> Form hazırlama </title> <h3> Bir gün, iki insan ismi, bir sıfat ve bir fiil giriniz..</h3> <hr> <form method="POST" action="http://www.catt.ncsu.edu/cgi-bin/madlib.pl"> <UL> <LI> Haftanın bir günü <input name="gun"> <LI> Bir sifat <input name="sifat"> <LI> Bir fiil <input name="fiil"> </UL> <input type="submit" value="Formu postala"> <input type="reset" value="Ekranı temizle"> </form> </html>Yukarıda sadece çalıştırılmayı bekleyen bir form hazırladık. Aslında bu haliyle program çalışmayacaktır, çünkü henüz cgi-bin altına yerleştirmemiz gereken shell programımızı (kodu) yazmadık. Yazacağımız kodun amacı, kullanıcının girdiği bilgileri ekranda aynen göstermek.
Kod, programcının isteği doğrultusunda kolayca değiştirilebilir.
## # ayraç.sh # Bu program, çağırıldığı zaman, ekrana $STRING_QUERY değişkeni # içindeki değerleri basar. Program, $QUERY_STRING içindeki değişken # sayısını 3 olarak kabul eder. ## #!/bin/bash echo "Content-type: text/plain" echo deger=`echo "$QUERY_STRING" | awk -F"&" '{ print $1 " " $2 " " $3 }'` echo $deger deger1=`echo "$deger" | awk '{ print $1 }'` deger2=`echo "$deger" | awk '{ print $2 }'` deger3=`echo "$deger" | awk '{ print $3 }'` sabit1=`echo "$deger1" | awk -F"=" '{print $2}'` sabit2=`echo "$deger2" | awk -F"=" '{print $2}'` sabit3=`echo "$deger3" | awk -F"=" '{print $2}'` echo $sabit1 $sabit2 $sabit3
HTML hazırlama teknikleri: