htlm dersleri

[Tilki_Andre]

HTML nedir?

HTML (HyperText Markup Language / Hareketli-Metin İşaretleme Dili) basitçe, browserlarla görebileceğimiz, internet dökümanları oluşturmaya yarayan bir çeşit dildir. Örneğin okuduğunuz bu sayfa HTML dili kullanılarak hazırlandı. Siz de browser'ınızı (Internet Explorer, Netscape Navigator,..) kullanarak bu sayfayı ekranınızda görüntülüyorsunuz. Tanımda geçen "internet dökümanı" ifadesinin yanısıra HTML ile oluşturduğunuz belgeleri harddiskinize kaydedebilir ve internet bağlantınız olmasa bile bu belgeleri görüntüleyebilirsiniz.

HTML, programlama dilleri (c, pascal, basic,..) gibi bir programlama mantığı taşımadığından öğrenilmesi gayet kolay bir dildir. Dilden ziyade kabaca metinleri ya da verileri biçimlendirmek, düzenlemek için kullandığımız komutlar dizisi bile diyebiliriz HTML için.

HTML Dersleri yazı dizimizi okuyarak bu dil hakkında hiçbir bilginiz olmasa bile yazı dizisinin sonunda öğrendiklerinizle siz de kendi sayfalarınızı hazırlayabileceksiniz.


2.NE GEREKİR?

Bir web sayfası yapmak için ne gerekir?Bu noktada iki seçeneğiniz var.Eğer web sayfanızı hiçbir kod kullanmadan yazmak istiyorsanız,Homepage veya Dreamweaver gibi,sizi bu işten kurtaracak yazılımlar kullanabilirsiniz.Kendi içlerinde başarılı sayılabilecek bu yazılımların dezavantajı ise,yapabileceklerinizin programın size sunduklarıyla sınırlı olmasıdır.Veya oturup kendiniz kod yazmak/üretmek isteyebilirsiniz.Zaten bu siteye geldiğiniz için ikinci gruba girdiğinizi varsayıyoruz,yani bu işi geçekten öğrenmek istiyorsunuz... O zaman iyi haber şu: İhtiyacınız olan şey sadece bir düzyazı programı,mesala (Windows için) Notepad .Tabi yazdıklarınızı test etmek için bir browser da fena olmaz,ama onu zaten her yerde bulabilirsiniz.

Opsiyonel olarak kod yazma işini kolaylaştıran, size zaman kazandıran text tabanlı bazı yazılımlar kullanabilirsiniz,mesela 'allaire Homesite'.Bu tip programlar sadece kod yazma işlemini kolaylaştırır,ancak yazma işlemini yine siz yaparsınız,dolayısıyla yapabileceklerinizi sınırlayan tek şey bilginizdir.Yine de işlerin nasıl yürüdüğünü öğrenmek için önce Notepad ile başlamanız faydalı olacaktır.

Notepad kullanırken, konulara ilişkin verilen örnekleri ve/veya kendi yazdığınız kodları '.htm' veya '.html' uzantılı kaydedin.Aksi takdirde browser'ınız bu dosyaları görüntülemez.Homesite yazdıklarınızı zaten standart olarak bu uzantılarla kaydeder.

Üzücü bir durum,iki yaygın browser olan 'Microsoft Internet Explorer' ve 'Netscape Navigator''ün html kodlarını yorumlamada farklılık göstermesidir.Piyasanın bu iki browser arasında neredeyse eşit olarak bölünmüş olmasından dolayı,yazdığınız kodları her iki browser'ın da aynı/benzer şekilde yorumlayacağı şekilde yazmaya özen göstermelisiniz.Sayfayı tasarlarken belli aralıklarla Explorer ve Netscape ile görüntüleyip sonucu karşılaştırmak,bu sorunu çözmek için iyi bir yöntemdir.

Son olarak;Browser'ınızın 4. veya daha ileriki bir sürüm olması tavsiye edilir,çünkü eski sürüm browser'lar bazı özellikleri desteklememektedir.


3.TEMEL KAVRAMLAR

HTML'i kısaca tanıdık ve gerekli araçları öğrendik,artık gerçekten HTML öğrenmeye başlayalım...

3/1.BAZI TEMEL KAVRAMLAR

· Tag(Etiket): HTML belgelerine bir şey yerleştirmek ve/veya bir biçim belirtmek için 'Etiket' denen ifadeler kullanırız.Etiketler '<Etiketin Adı>' şeklinde yazılırlar.Bazı istisnalar hariç açılan etiketlerin yeri gelince kapatılması gerekir; bu da '</Etiketin adı>' ifadesiyle yapılır.

<center> : Metnin ortalanmasını sağlar ; <textarea> : Metin alanı oluşturur.



· Parameter(Parametre): Parametreler etiketlerin değiştirilebilen özelliklerinin isimleridir.

<textarea rows="50">

Burada 'rows' ifadesi metin alanının yükseklik özelliğinin adıdır,bu özelliğin değeri değiştirilebilir.



· Value(Değer): Parametre tanımından da kolayca anlayabileceğiniz gibi,parametreler ile değiştirdiğimiz sayılara(veya bazen keywordlere)değer adı verilir.

<textarea rows="50">

Burada '50' ifadesi metin alanının yüksekliğinin değeridir.

NOT:Kursun devamında parantez içinde verilen Türkçe terimler kullanılacaktır.Fakat bu terimlerin orjinallerini de aklınızın bir kenarında tutun.

3/2.TEMEL ETİKETLER

<html>...</html>





Bu etiket browser'a HTML belgesinin basladığı ve bittiği yeri bildirir.Bütun HTML kodları bu etiketin içinde yeralmadır.

<head>...</head>





HTML belgesinin ilk bölümüdür.Title bölümü ile ileride göreceğimiz CSS ve JavaScript kodları buraya yazılır.Bu bölume yazılanlar metin olarak ekranda görünmez.

<title>...</title>





Head bölümü içine yazılan Title bölümüne sayfanın başlığı yazılır,bu başlık browser'ın sol üst bölümünde görüntülenir.

<body>...</body>





HTML belgesinin bütün içeriği burada yeralır.Buraya metinler,resimler,listeler... vb. her türlü HTML nesnesi yerleştirilebilir.


4.İLK SAYFAM VE HTML BELGESİNİN YAPISI

4/1.İLK SAYFAM

İlk web sayfamızı yapacak kadar HTML öğrendik bile! İşte adet olduduğu üzere Merhaba dünya...

<html>
<head>
<title>Merhaba!</title><br>***************text/html;CHARSET=iso-8859-9 http-equiv=Content-Type>
</head>
<body>
Merhaba Dünya!
</body>
</html>

Yukarıda görgüğünüz kodu düzyazı programınızda yazıp merhaba.htm adıyla kaydedip çalıştırırsanız ilk HTML sayfanızı yapmış olursunuz. Burada 4. satırda gördüğünüz meta etiketi,sayfanızda Türkçe karakterlerin görüntülenmesini sağlar.Diğerlerini zaten biliyorsunuz...

4/2.HTML BELGELERİNİN GENEL YAPISI

HTML belgeleri,ilk sayfamızdan da anlaşılabileceği gibi aşağıdaki şablon üzerine yazılır:


<html>
<head>
<title>Başlık</title>
</head>
<body>
...
</body>
</html>




Eğer isterseniz bu şablonu istediğiniz bir adla .txt uzantılı olarak kaydedip, bundan sonra yazacağınız örnekleri kaydettiğiniz bu dosyanın uzerine yazabilirsiniz; böylelikle her seferinde fazladan birkaç kod yazmaktan kurtulmuş olursunuz.Eğer sitenizde Türkçe karakter kullanacaksanız lütfen bu şablonun head bölümüne, 'Merhaba Dünya' örneğinin kodlarında 4. satırda yer alan

****** *********text/html;CHARSET=iso-8859-9 http-equiv=Content-Type>< /td>


satırını da ekleyin...


HTML'in temel unsurlarını öğrendikten sonra,artık işin inceliklerine geçebiliriz. İlk olarak yazdığımız metinleri şekillendirmeyi öğreneceğiz.Aşağıdaki tablodaki etiketler,size bu konuda geniş olanaklar sağlayacak. Önce Başlık etiketleri:


5/1.BAŞLIK ETİKETLERİ

<h1>...</h1>




Başlık

<h2>...</h2>




Başlık

<h3>...</h3>




Başlık

<h4>...</h4>




Başlık

<h5>...</h5>




Başlık

<h6>...</h6>




Başlık



5/2.VE DİĞERLERİ...

<b>...</b>





Yazılarınızı 'bold' yapar.





Örnek Yazı

<i>...</i>





Yazınızı italik karakterlerle yazar





Örnek Yazı

<u>...</u>





Altı çizgili yazar





Örnek Yazı

<p>...</p>





Paragraf etiketi,paragrafınızın altına ve üstüne boşluk koyar





...

Paragraf

...

<br>





satırbaşı yapar,bu etiketi kapatımak gerekmez





...
Satırbaşı

Şimdi bir örnek ile öğrendiklerimizi uygulayalım:
<html>< br><head><br><title>MetinBiçimlendirmeörneği</title><br>***************text/html;CHARSET=iso-8859-9 http-equiv=Content-Type>
</head>
<body>

HTML size metin biçimlendirme konusunda geniş olanaklar sağlar; Metinlerinizi ister <h1>kocaman</h1>,
ister <h6>küçücük</h6>,isterseniz <b>koyu</b>,<u>altyazılı</u>,veya <i>eğik</i> yazabilirsiniz.
Yada satırbaşı yapabilir,<br>Veya<p>Paragraf oluşturabilirsiniz</p>

</body>
</head>
</html>

Metin biçimlendirmek için yukarıda gördüğümüz etiketlerin dışında <font>...</font> etiketi de kullanılır.Bu etiketi ve parametrelerini bir sonraki bölümde bulabilirsiniz...


6. <FONT> ETİKETİ

Font etiketi sahip olduğu parametreler sayesinde metinlerin renk,yazı tipi, boyut gibi özelliklerini değiştirmemize olanak sağlar.Bu etikete geçmeden önce HTML'de renklerden kısaca bahsetmek yerinde olur.

6/1.RENKLER

HTML'de renkler hexdecimal formunda ifade edilir.Bir renk 16'lık sayı düzeninde 6 rakamdan oluşur ve Bu düzende 9'dan sonraki say1ıarı göstermek için 'A'dan 'F'ye kadar olan harfler kullanılır. Bununla birlikte HTML bazı renklerin ingilizce isimlerini anlar; aşağıdaki örnekte bu renkleri görmektesiniz.

AQUA


BLACK


BLUE


FUCHSIA


GRAY


GREEN


LIME

MAROON


NAVY


OLIVE


PURPLE


RED


SILVER


WHITE


YELLOW

Burada görülen renkler hexdecimal cinsinden de ifade edilebilir: Örneğin #FFFFFF beyaz ,#000000 siyah ,#C0C0C0 gri(tabloda 'silver') renklerini verir.



6/2.<FONT> ETİKETİ VE PARAMETRELERİ

Renkleri kısaca tanıdıktan sonra artık asıl konumuza geçebiliriz.HTML belgesinin body bölümüne yazdığımız metni <font></font> etiketleri arasına alarak bu metne etiketin aşağıdada listelenen parametreleri doğrultusunda bazı özellikler kazandırabiliriz:

color





hexdecimal veya 'rengin ingilizce ismi' değerini al1ır





#000000,black

face





Yaz1. türünün ismi değerini al1ır





Times new roman,Arial

size





1 ile 7 arasında istenilen değeri alır





+1,+5

Şimdi bu parametreleri bir örnekte kullanalım:

<html>
<head>< BR> <title>Fontkullan1.m1.</title><BR> ***************text/html;CHARSET=iso-8859-9 http-equiv=Content-Type>

</head>

<body>
Font etiketinin color parametresini kullanarak <font color="#FF0000">renkli</font>
<font color="Blue">yaz1ılar</font> <font color="#00FF00">yazabilir</font>;<p>
değişik yazı karakterleri kullanabilirsiniz:<font face="Verdana">Mesela böyle!</font><p>
Hatta yazılarınızı <font size="+6"> büyütüp</font><font size="-1"> Küçültebilirsiniz</font>

</body>
</html>

Font etiketinin face parametresinin yazı tipi belirttiğini biliyoruz.Bu parametre ile belirlediğiniz yazı tipi,ancak ziyaretçinin bilgisayarında da yüklü olması halinde görüntülenebilir. Bu nedenle bu parametreye birkaç değer atamak,son değer olarak da windows'un standart font'lar1ından birini atamak, sayfalarınızın hiç istemediğiniz bir font'la görüntülenmesini büyük ölçüde engeller.

<font face="impact,verdana,arial">...</font>

Bu kod browser'a önce impact, yoksa verdana, o da yoksa arial fontunu kullanmasını bildirir.


Arka Plan
7.ARKAPLAN

5. ve 6. bölümlerde öğrendiklerimizle artık metinler üzerinde biçim anlamında her türlü değişikliği yapabiliriz. Sayfa tasarımında en az metinler kadar önemli bir unsur olan arkaplan üzerinde ne gibi değişiklikler yapabileceğimizi bu bölümde öğreneceğiz. Ayrıca <body> etiketinin parametrelerini göreceğiz.


7/1. ARKAPLAN VE <body> ETİKETİ

HTML belgesinin ekranda görüntülenen bölümü olan body bölümünün başladığını browser'a <body> etiketiyle bildirdiğimizi biliyoruz. Bir etiketin herhangi bir parametresine atadığımız değer, o etiketin oluşturduğu alan içerisinde geçerlidir.Mesela:

<font color="blue">...</font>

ifadesi, sadece '...' ile gösterilen alan içerisine yazılanları 'mavi' yapar. Bu durumda tahmin edebileceğiniz gibi <body> etiketinin parametrelerine verilen değerler, bütün sayfa için geçerlidir.Aşağıda bu parametreleri ve kullanılışlarını görüyorsunuz.

bgcolor


Sayfanımın arkaplanının rengini belirler


<body bgcolor="blue">

background


Arkaplana .gif,.jpg gibi HTML'in yorumlayabildiği bir resim dosyası koymanızı sağlar


<body background="c:\sayfam\resim.gif">

text


Sayfanızdaki metinlerin rengini belirler


<body text="#2354FF">

link


Sayfanızdaki bağlantıların tıklanmamış durumdaki rengini belirler.


<body link="yellow">

alink


Sayfanızdaki bağlantıların tıklama işlemi süresince alacağı rengi belirler


<body >

vlink


Sayfanızdaki bağlantıların tıklama işleminden sonra alacağı rengi belirler


<body >

Burada tabloda bütünlüğü bozmamak amacıyla verilen son üç parametre, ileride deyineceğimiz link(bağlantı)larla ilgilidir, bu yüzden şimdilik bunları unutabiliriz.

NOT: 'Background' parametresini kullanırken, resminizin yerini tam olarak yazmayı ve sonuna uzantısını(.gif; .jpg vs.) koymayı ihmal etmeyin!



7/2. YATAY ÇİZGİ

Başlığın hemen üzerinde bir örneğini gördüğünüz yatay çizgileri kullanarak sayfalarınızın okunmasını kolaylaştırabilirsiniz.İşte buna olanak sağlayan <hr> etiketive parametreleri:

align


Konum belirler;left,center,right değerlerini alabilir.


<hr align="right">



size


Çizginin piksel cinsinden kalınlığı


<hr size="20" >



width


Piksel cinsinden uzunluk


<hr width="400">



color


Çizginin rengini belirler


<hr color="blue">





Üç bölümün sonunda artık metinlere ve arkaplanlara iyice hakim olduk.Aşağıdaki örnek ile bilgilerimizi tekrar edelim:

<html>
<head>
<title>Metin ve arkaplan uygulalaması</title>
</head>
***************text/html;CHARSET=iso-8859-9 http-equiv=Content-Type>
<body bgcolor="green" link="red" vlink="yellow" alink="black">
<h1>Modern Futbol</h1><br><hr>
<p><font face="Verdana,hevletica" color="#FFFFFF">Günümüz modern futbolunun gereği olan <b>3-5-2</b> sistemi, oynanması bir hayli zor bir sistemdir. Bu sistemde <i>orta alanın iki ucundaki</i> oyunculara büyük iş düşer.</p>
<p>Modern futbolun başka bir gereği de alan savunması yapmaktır. Ancak tehlikeli santraforlar için
önlem alma gereği, savunmaları bazen güç duruma düşürebilir.</p>
<a href="http://www.uefa.com">İşte size faydalı bir link!</a>
</font>
</body>
</html>


Bağlantılar ve Resimler
8.BAĞLANTILAR VE RESİMLER

8/1. BAĞLANTILAR(LINK)

Web sayfalarında en çok kullanılan unsurlardan biri bağlantılardır.Bağlantılar ziyaretçinin bir tıklama ile, sitenizin içinde veya dışında, belirlediğiniz herhangi bir adrese gitmesini sağlar.Bağlantılar browser'a <a> etiketi ile bildirilir.İşte bu etiketin parametreleri:

href


Bağlantının adresi bu parametreyle bildirilir


<a href="http://www.sayfaAdı.com>Sayfa Adı</a>

Sayfa Adı

target


Sayfanın açılacağı yeri belirler.Target parametresi,açılacak sayfa yeni bir sayfa olarak açılacaksa'_blank',aynı pencere içinde açılacaksa '_self',aynı pencerere içerisinde üstten itibaren açılacaksa '_top' değerini alır. '_parent' ve 'ÇerçeveAdi' değerlerine çerçeveler konusunda değineceğiz


<a href="http://www.sayfaAdı.com target="_blank">Sayfa adı></a>

Sayfa Adı

'Href' parametresinin değeri sayfaadi.com gibi bir adres olabileceği gibi, örneğin deneme.zip gibi bir dosya adı da olabilir. Böyle bir bağlantıya tıklandığında browser kullanıcıya bu dosyayı indirmek isteyip istemediğini sorar. Bu özelliği kullanarak ziyaretçilerin sayfamızdan dosya indirmelerini sağlayabiliriz.



<a href="http://www.SayfaAdi.com/dosyalar/deneme.zip">Burarya tıklayıp dosyayı indirin!</a>

Burarya tıklayıp dosyayı indirin!



8/2. RESİMLER

Resimler doğru ve yerinde kullanıldığında HTML belgelerine estetik açıdan çok şeyler katabilirler;fakat büyük boyutları nedeniyle yavaş yüklenirler.Bu da ziyaretçinin sıkılmasına,hatta sayfayı terketmesine neden olabilir.Bu nedenle, en azından internet bağlantıları daha hızlı oluncaya kadar, resimleri 'az ve öz' kullanmanız doğru olacaktır.Resimler <img> etiketi aracılığıyla kullanılırlar.Aşağıda bu etiketin parametrelerini görüyorsunuz.



src


Resmin bulunduğu dizini bu parametre ile bildiririz


<img src="deneme.gif">

width


Resmin genişliğini piksel cinsinden bildirir


<img src="deneme.gif" width="100">

height


Aynı şekilde resmin yüksekliğini bildirir.


<img src="deneme.gif" height="100">

border


Resmin etrafındaki çizginin kalınlığını belirtir.


<img src="deneme.gif" border="6">

align


Yatay konum belirler;left,right,center değerlerini alır.


<img src="deneme.gif" align="left">



alt


Mouse resmin üzerindeyken yazacağınız meni gösterir


<img src="deneme.gif alt="Buraya açıklama yazın!">

Buraya açıklama yazın!



9.LİSTELER


Buraya kadar metinler ile ilgili öğrendiklerimiz biçimlendirme üzerineydi. Fakat HTML'in olanakları bununla sınırlı değil: İstenildiği takdirde HTML listeler ve tablolar aracılığıyla metinleri 'düzenlemenize' de olanak verir. Bu araçlardan ilki olan listelerin sıralanmış liste, sıralanmamış liste ve açıklama listesi olarak tercüme edilebilecek üç çeşidi bulunur.Bu listelerin kullanılışını ve farklarını aşağıdaki örneklere bakarak kolayca anlayabilirsiniz.



9/1. SIRALANMIŞ LİSTE(ORDERED LIST)

Sıralanmış listeler <ol>...</ol> etiketleri arasına yazılır,HTML bu etiketlerin arasına yazdıklarımızı isteğinize bağlı olarak rakam veya harfler kullanarak sıralar. Bu isteğimizi <ol> etiketinin type parametresiyle belirleriz. Bu prametre sıralanmış listelerde 'a', 'A', 'i', '1' değerlerini alabilir. <Ol> etiketi ile oluşturduğumuz listenin her elemanının başına <li> etiketini koyarız. Bu etiket ingilizce 'liste elemanı' anlamına gelen 'list item' kelimesinin kısaltılmışıdır.

1.

CD ROM
1.

30X
2.

40X
3.

50X
2.

DVD

a. 4X

b. 8X

c. 12X





<ol>
<li>CD ROM
<ol type="i">
<li>30X
<li>40X
<li>50X
</ol>
<li> DVD
<ol type="a">
<li>4X
<li>8X
<li>12X
</ol>
</ol>



9/2. SIRALANMAMIŞ LİSTE(UNORDERED LIST)


Sıralanmamış listeler <ul>...</ul> etiketleri arasına yerleştirilir.Liste elemanları çember(circle),daire(disc) veya kare(square)'ler ile sıralanır.

*

CD ROM
o

Read only
+

30X
+

40X
+

50X
o

Writer
+

8X
+

10x
+

12X






<ul>
<li>CD ROM
<ul type="square">
<li>Read only
<ul type="circle">
<li>30X
<li>40X
<li>50X</li>
</ul>
<li>Writer
<ul type="circle">
<li>8X
<li>10x
<li>12X</li>
</ul>
</li>
</ul>
</li>
</ul>



3/3. AÇIKLAMA LİSTESİ(DEFINITION LIST)



Açıklama listeleri <dl>...</dl> etiketleri içinde yer alır.Bu çeşit listelerde <li> etiketinin yerini <dd> ve <dt> etiketleri alır.Aşağıdaki örneğe bakarak bu etiketlerin kullanımını kolaylıkla anlayabilirsiniz.

CD ROM

Her ne kadar yerini yavaş yavaş DVD rom'lara bıraksa da, halen birçok kişi tarafından kullanılıyor.

DVD ROM

Bu yeni teknoloji CD'lere göre çok daha fazla boş alan sunuyor.

<dl>
<dt>CD ROM
<dd>Her ne kadar yerini yavaş yavaş DVD rom'lara bıraksa da, halen birçok
kişi tarafından kullanılıyor.
<dt>DVD ROM
<dd>Bu yeni teknoloji CD'lere göre çok daha fazla
boş alan sunuyor.</dd>
</dl>


10.TABLOLAR(TABLE)

Metinleri listelerin yanısıra tablolar yardımıyla da düzenleyebiliriz. Sörf yaparken rastladığınız sayfalar çoğunlukla iç içe geçmiş tablolardan oluşur. Bu nedenle iyi bir sayfa tasarlamak için tablolara hakim olmak gereklidir.

Tablolar <table>...</table> etiketleri arasına yazılır.<tr> etiketi bir yatay sıra oluşturulur, bu yatay sıra istenilen sayıda <td> etiketiyle hücrelere bölünür.Aşağıdaki örneğe bakarak tablo mantığını anlayabilirsiniz.

< table> Hücre1


Hücre2


Hücre3

Hücre4


Hücre5


Hücre6

<TD< td>





<table border="1">

<tr>

<td >Hücre1</td>
<td >Hücre2</td>
<td >Hücre3</td>

</tr>
<tr>
<td>Hücre4</td>
<td>Hücre5</td>
<td>Hücre6</td>
</tr>

</table>



10/1. <TABLE> ETİKETİ VE PARAMETRELERİ

Burada width ve height parametrelerini aynen daha önce kullandığınız gibi kullanabilirsiniz...

bgcolor


Hücrenin içinin rengini belirler.


<table>
<tr>
<td>Hücre</td>
</tr>
</table>


Hücre



background


Hücre içine resim koyar.


<table background="deneme.gif">
<tr>
<td>Hücre</td>
</tr>
</table>


Hücre



border


Hücre etrafına yerleştireceğiniz çerçevenin kalınlığını belirler


<table border="5">
<tr>
<td>Hücre</td>
</tr>
</table>


Hücre



bordercolor


Çerçeve rengini belirler


<table border="5" bordercolor="teal">
<tr>
<td>Hücre</td>
</tr>
</table>


Hücre



bordercolorlight


Çerçevenin sol ve üst kenarlarının rengini belirler


<table border="5" bordercolorlight="aqua">
<tr>
<td>Hücre</td>
</tr>
</table>


Hücre



bordercolordark


Çerçevenin sağ ve alt kenarlarının rengini belirler.


<table border="5" bordercolordark="blue">
<tr>
<td>Hücre</td>
</tr>
</table>


Hücre



align


Hücrenin yatay konumu belirler


<table align="right">
<tr>
<td>Hücre</td>
</tr>
</table>


Hücre



cellspacing


Hücre etrafındaki çerçevenin kalınlığını belirler.


<table border="1" cellspacing="10">
<tr>
<td>Hücre</td>
</tr>
</table>


Hücre



cellpadding


Hücre içindeki elemanların (metin, resim, vs.) çerçeveden uzaklığını belirler.


<table border="1" cellpadding="10">
<tr>
<td>Hücre</td>
</tr>
</table>


Hücre



10/2. <TR> ve <TD> ETİKETLERİ

<TR> etiketi, üzerine <td> etiketiyle hücreler döşenmesi için yatay bir sıra,bir platform oluşturur.Dolayısıyla bu etiketin parametreleri herhangi bir işimize yaramaz. Tablo içindeki bütün düzenlemeleri aşağıda parametreleri verilen <td> etiketiyle yapabiliriz.

bgcolor


<table>
<tr>
<td bgcolor="teal">
Hücre</td>
</tr>
</table>


Hücre



background


<table>
<tr>
<td background="deneme.gif">
Hücre</td>
</tr>
</table>


Hücre



align


<table border="1" width="100" height= "100">
<tr>
<td align="right">
Hücre</td>
</tr>
</table>


Hücre



valign


<table border="1" width="100" height="100">
<tr>
<td valign="bottom">
Hücre</td>
</tr>
</table>


Hücre



bordercolor


<table border="1">
<tr>
<td bordercolor="blue">
Hücre</td>
</tr>
</table>


Hücre



colspan


<table border="1">
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr><td colspan="2">4</td><td>5</td>
</tr>
<tr><td>6</td><td>7</td><td>8</td>
</tr>
</table>


1


2


3

4


5

6


7


8



rowspan


<table border= "1">
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr><td >4</td><td> rowspan="2">5</td><td>6</td>
</tr>
<tr><td>7</td><td>8</td>
</tr>
</table>


1


2


3

4


5


6

7


8



Yukarıdaki parametrelerden colspan yatay eksen üzerindeki iki hücreyi birleştirmek için kullanılır. Bu parametreye değer olarak birleşecek hücre sayısı verilir. Rowspan ise bu işi dikey eksen üzerindeki iki hücre için yapar. diğer parametrelerin kullanımlarını zaten başka etiketler üzerinde gördük.

10/3. TABLO UYGULAMALARI

Bu uygulamaları önce kendiniz yapmaya çalışın, eğer takılırsanız kodlarından faydalanın.

Uygulama

Küçük bir tablo uygulaması



<table>
<tr>
<td width="300" bgcolor="teal" align="center">Uygulama</td>
</tr>
<tr>
<td height="200" bgcolor="silver" align="center">Küçük bir tablo uygulaması</td>
</tr>
</table>



Hosting

1.seçenek


20 Mb


100$/yıl

2.seçenek


50 Mb


150$/yıl



<table cellpadding="10" border=1>
<tr>
<td colspan="3" align="middle" bgcolor="red" >Hosting</td>

</tr>
<tr>
<td bgcolor="teal">1.seçenek</td>
<td align="middle">20 Mb</td>
<td align="middle">100$/yıl </td>
</tr>
<tr>
<td bgcolor="teal">2.seçenek</td>
<td align="middle">50 Mb</td>
<td align="middle"> 150$/yıl</td>
</tr>
</table>

SÜRÜCÜ CİNSİ


HIZ


Cd-Dvd rom'lar

CD-ROM


30X


40X


50X


60X

DVD


10X


12X




















<table BORDER="1" bgcolor="silver" bordercolor="black">
<tr>
<td bgcolor="red">SÜRÜCÜ CİNSİ</td>
<td bgcolor="red" colspan="4" align="center">HIZ</td>
<td bgcolor="teal" color="white" rowspan="3"> Cd-Dvd rom'lar</td>
</tr>
<tr>
<td>CD-ROM</td>
<td>30X</td>
<td>40X</td>
<td>50X</td>
<td>60X</td>
</tr>
<tr>
<td>DVD</td>

<td colspan="2">10X</td>
<td colspan="2">12X</td>

</tr>
</table>


Çerçeveler

11. ÇERÇEVELER (FRAME)


Çerçeve tekniği, bir web sayfasını istenilen miktarda parçaya bölüp, bu sayfa üzerinde birkaç sayfa birden görüntülenmesine olanak verir. Bu tekniğin en çok kullanılan varyasyonu, sayfanın sol veya üst kısmından küçük bir alanı bölmek (yani sayfayı ikiye bölmek), bu küçük alana menü bilgilerini, diğer büyük alana ise sayfanın asıl içeriğini yerleştirmektir.

Fakat şunu da belirtmekte fayda var, birçok tasarımcı estetik açısından çerçevelere pek sıcak bakmaz; genelde üst üste tablolar kullanmayı tercih eder. Yine de pek sık kullanılmayan bu tekniği aklınızın bir yerinde tutun, belki faydalı olabilir...

Bir uyarı: Netscape 2.0 ve Explorer 3.0 altı browser'lar, çerçeveleri tanımazlar!



ÇERÇEVE TEKNİĞİNİN GENEL MANTIĞI

Çerçeve tekniğinde, ilk önce parent(ana) frame denilen bir sayfa oluşturmak gerekir. <Frameset>... </frameset> etiketlerinin parametreleri olan cols ve rows ifadeleri ile sayfayı dikey ve yatay olarak ne oranda bölmek istediğimizi browser'a bildiririz. Src parametresi ile ana çerçevenin bölümlerinde görüntülenecek sayfaların adreslerini bildirdikten sonra, geriye biraz önce adreslerini bildirdiğimiz sayfaları uygun bir şekilde hazırlamak kalır. Şimdi bu biraz karışık ifadeyi bir örnekle daha iyi anlayalım, sonra da <frameset> etiketini inceleyelim.

Önce ana pencereyi hazırlayalım:

<html>< BR><head>
<title>Çerçeveörneği</title>
***************text/html;CHARSET=iso-8859-9 http-equiv=Content-Type
</head>
<frameset cols="150,*">
<frame name="menu" src="menu.html">
<frame name="esas" src="esas.html">
</frameset>
<noframes>
<body>
<h1>Browser'ınızın sürümü sayfamızı görüntülemeye uygun degil, lütfen daha yeni bir sürüm
yükleyip tekrar deneyin!</h1>
</body>
</noframes>
</html>



Burada yaptığımız şey ana sayfayı soldan 150 piksel genişliğinde bölüp iki sayfa elde etmekten ibaret. Ayrıca browser'a soldan ilk bölüme (150 px olan bölüm) 'menu.html', ikinci bölüme ise 'esas.html' sayfalarını yerleştirmesini bildirdik. Burada dikkat edilmesi gereken nokta <frameset> etiketinin </head> ile <body> etiketleri arasına yerleştirilmesidir. <Noframes>...</noframes> etiketleri içinde yer alan bölüm ise çerçeveden anlamayan eski sürüm browser'lar içindir. Şimdi aşağıdaki kodlardan ilkini 'menu.html', ikincisini ise 'esas.html' adıyla ana pencereyi kaydettiğiniz dizine kaydedin.



<html>
<head>
<title>menu</title>
***************text/html;CHARSET=iso-8859-9 http-equiv=Content-Type>


</head>
<body bgcolor="teal">
</body>
</html>



<html>
<head>
<title>esas</title>
***************text/html;CHARSET=iso-8859-9 http-equiv=Content-Type>

</head>


<body bgcolor="Red"></body>

</body>
</html>

Son olarak tekrar ana sayfayı açtığınızda (ismi önemli değil, yeter ki diğer iki sayfa ile aynı dizinde bulunsun!) sonuç böyle olacaktır:

Artık çerçevelerin mantığını anladığımıza göre bu tekniğin detaylarını inceleyelim...





11/2. <FRAMESET> ve <FRAME> ETİKETLERİ



Aşağıda <frameset> etiketinin parametrelerini görüyorsunuz :

rows


Safayı enine bölmenizi sağlar


<frameset rows="150,*">
<frame name="menu" src="menu.html">
<frame name="esas" src="esas.html">
</frameset>


cols


Sayfayı boyuna bölmenizi sağlar


<frameset cols="150,*">
<frame name="menu" src="menu.html">
<frame name="esas" src="esas.html">
</frameset>


cols ve rows parametreleri piksel değeri alabilecekleri gibi '%' cinsinden de değer alabilirler, örneğin:
<frameset cols="%20,%80">
Daha önce kullandığımız '*' ifadesi ile bölünecek alanın genişliğini browser'a bırakabiliriz:
<frameset cols="%20,*">
Son olarak sayfayı üçe veya daha fazlaya da böşebiliriz:
<frameset rows="150,200,100,*"> ifadesi ile ana pencereyi dörde böleriz.

frameborder


Ana sayfanın bölümleri arasında sınır çizgisi olup olmamasısını belirler.('yes', 'no'; veya '1', '0' değerlerini alır)


<frameset cols="150,*" frameborder="1">
<frame name="menu" src="menu.html">
<frame name="esas" src="esas.html">
</frameset>


border


Çerçeveler arasındaki sınırın kalınlığını piksel cinsinden belirler.


<frameset cols="150,*" border="10">
<frame name="menu" src="menu.html">
<frame name="esas" src="esas.html">
</frameset>




Şimdi de <frame>; etiketinin parametreleri:



src


Bunu zaten biliyorsunuz, çerçeve içinde görüntülenecek sayfanın yeri

marginwidth


Sayfanın solundaki kenar boşluğunu belirtir

marginheight


Sayfanın üstündeki kenar boşluğunu belirtir

noresize


'1' veya '0' değerlerini alır, '1' verilirse pencere boyutları sabitlenir.

scrolling


'yes', 'no', 'auto' değerlerini alır, kaydırma çubuklarının durumunu belirler.



11/3. FRAME UYGULAMALARI

Aşağıda bazı çerçeve örnekleri ve bu örneklerin kodları verilmiştir:





<frameset rows="150,*" cols="150,*" >
<frame name="kirmizi" src="kirmizi.html">
<frame name="yesil" src="yesil.html">
<frame name="sari" src="sari.html">
<frame name="siyah" src="siyah.html">
</frameset>



<frameset rows="150,*">
<frame name="kirmizi" src="kirmizi.html">
<frameset cols="30%,*">
<frame name="yesil" src="yesil.html">
<frame name="sari" src="sari.html">
</frameset>



<frameset rows="150,*">
<frameset cols="*,*">
<frame name="kirmizi" src="kirmizi.html">
<frame name="yesil" src="yesil.html">
</frameset>
<frame name="sari" src="sari.html">
</frameset>



<frameset cols="150,*">
<frameset rows="*,*,*">
<frame name="yesil" src="yesil.html">
<frame name="kirmizi" src="kirmizi.html">
<frame name="sari" src="sari.html">
</frameset>
<frame name="siyah" src="siyah.html">
</frameset>

Çerçevelerle çalışmaya başlamadan önce bilmeniz gereken önemli bir nokta:
Hatırlarsanız bağlantılar konusunda <a> etiketinin target isimli bir parametresi olduğundan ve bu parametrenin 'Çerçeveadı' değerini alabileceğinden bahsetmiştik. Bu parametre bize bağlantının belirttiği adresdeki sayfanın adını verdiğimiz çerçeve içinde açılmasını sağlar. Örneğin bu sayfadaki ikinci örneği ele alalım:
'İstiyoruz ki sayfanın yeşil bölümü sayfamızın menüsü olsun. Ziyaretçi buradaki bağlantılara tıklayarak sitenin diğer sayfalarına ulaşsın, ama bu diğer sayfalar sarı bölümde görüntülensin.'
İşte aşağıdaki kod bunu sağlar:

<a href="www.sayfaAdi.com\secenek1.html target="sari">Bu link saril bölümde görüntülenecek!</a>

Gördüğünüz gibi çerçevelere verdiğimiz isimler (name) bu noktada önem kazanıyorlar

Formlar
12. FORMLAR


HTML'in bir metin şekillendirme aracı olduğunu söylemiştik. Form'lar bu tanımın istisnasıdır, HTML kullanarak sayfanızı ziyaret edenlerle temas kurmanızı sağlarlar. Formlar yoluyla ziyaretçilerin herhangi bir konuda görüşlerini alabiliriz; veya hazırlayacağımız bir formla ziyaretçilerden kişisel bilgilerini isteyebiliriz. Formlar <form>...</form> etiketleri arasına yazılırlar. Bu etiketin parametrelerini öğrenmeden önce form türlerine bir göz atalım.


12/1. FORM TÜRLERİ



Aşağıda form türlerini ve kullanılışlarını görüyoruz.:

text


maxlength: Yazılabilecek maksimum text uzunluğu
value: varsayılan değer
size: Px cinsinden alanın uzunluğu


<form>
<input type="text" maxlength="10" size="12" value="İsminiz?"
</form>


<>

<input type="text">
Ziyaretçinin ismi, telefonu gibi kısa bilgilerini almak için kullanılır.

password


Tüm parametrleri text ile aynıdır.


<form>
Lütfen şifre girin:<br>
<input type="password" maxlength="10" size="12">
</form>


Lütfen şifre girin:

<input type="password">
Şifre almak için kullanılır, yazılan karakterler ekranda '*' şeklinde görüntülenir

textaraea


rows : Alanın karakter cinsinden yüksekliği
cols : Alanın genişliği


<form>
<textarea cols="12" rows="4">Burası bir textarea!</textarea>
</form>


Burası bir textarea!

<textarea >...</textarea>
Text kutusuna sığmayacak uzun bilgileri, mesela ziyaretçinin sayfa ile ilgili düşüncelerini almak için kullanılır.

checkbox


checked: sayfa açıldığında 'checked' ibaresi bulunan kutu işaretli olur.


<form>
<input type="checkbox" checked>seçenek 1
<input type="checkbox">seçenek 2
</form>


seçenek1
seçenek2

<input type="checkbox>
Ziyaretçiye, verilen seçeneklerden birini, birkaçını veya hepsini seçme imkanı verir.

radio


checked: sayfa açıldığında 'checked' ibaresi bulunan daire seçilmiş olur.


<form>
<input type="radio" name=sec">seçenek1<br>
<input type="radio" name= "sec"checked>seçenek2<br>
<input type="radio" name="sec">seçenek2
</form>


seçenek1
seçenek2
seçenek2

<input type="radio">
Ziyaretçiye, verilen seçeneklerden sadece birini seçme imkanı verir.

select


size: Select etiketinin karakter cinsinden boyutu
selected: Görevi checked ifadesinin aynıdır.
multiple: Ziyaretçinin birden çok seçim yapmasına olanak verir


<form>
<select size= "1">
<option selected>seçenek1
<option>seçenek2
<option>seçenek3
</select>


<select><option>...<option>...</select>
Ziyaretçiye seçeneklerden birini veya (multiple ifadesi ile) birkaçını seçme imkanı verir.

submit


value: Butonun üzerine yazılacak metin buraya yazılır


<form>
<input type="submit" value="Gönder">
</form>


<input type="submit>
Ziyaretçi doldurduğu formu bu düğmeye basarak gönderir

reset


value: Butonun üzerindeki metin


<form>
<input type="reset" value="Sil">
</form>


<input type="reset" >
Ziyaretçinin doldurduğu formda, ziyaretçinin yazdığı her şeyi siler.

button


value: Butonun üzerindeki metin


<form>
<input type="button" value="Düğme">
</form>


<input type="button>
Düğmelere JavaScript ile bazı işlevler kazandırılabilir.



Tabloda belirtmedik ama form elemanlarında daha önceden bildiğimiz name parametresi de kullanılabilir.



12/2. <FORM> ETİKETİ

İşte <form> etiketinin parametreleri ve bunların işlevleri:



method


'Get' veya 'post' değerlerini alabilir. Method parametresinin değeri formu göndereceğiniz CGI programı açısından önemlidir. Eğer CGI kodları yazmayı bilmiyorsanız, birçok servis sağlayıcı size form'larınızın sonuçlarını e-mail'inize gönderme imkanı verir. Eğer böyle bir hizmetten yararlanacaksanız 'post' metodunu seçmelisiniz.

<form method= "post>

action


Formu göndereceğiniz CGI programının adresini action parametresiyle bildirirsiniz. Eğer yukarıda bahsedilen hizmetten yararlanmak istiyorsanız, servis sağlayıcınızdan bu programın adresini öğrenmelisiniz. Örneğin bu adres 'freeservers' için '/cgi-bin/cgiemail' 'dir.

<form method="post" action= "/cgi-bin/cgiemail">




12/3. FORM UYGULAMASI

Aşağıdaki örnekte bütün form unsurlarının kullanımını göreceksiniz. Bu örneği önce parça parça kendiniz yapmaya çalışın, gerektiğinde aşağıda verilen kodlardan yararlanın...
Bu siteye not verin!

Kullanıcı ismi

Parola

Cinsiyet EK

Bildiğiniz Uygulamalar



Sitenin içeriği

5, Çok zengin!
4, Fazlasıyla yeterli
3, Yeterli
2, Yetersiz
1, Çok kısıtlı

Sitenin tasarımı

<>


<form name="anket">
<p><h3>Bu siteye not verin!</h3></p>

<p><b>Kullanıcı ismi</b> <input value="Buraya yazın!"></p>
<p><b>Parola</b> <input type="password" maxlength="10"></p>
<p><b>Cinsiyet</b> E<input type="Checkbox">K<input type="Checkbox">

<p>Bildiğiniz Uygulamalar</p>
<p><select size="4" multiple>
<option>HTML
<option>JavaScript
<option>Css
<option>Asp
</select></p><br><br>

<p><b>Sitenin içeriği</b></p>
<p><input type="radio" name="not" value="5">5, Çok zengin!<br>
<input type="radio" name="not" value="4">4, Fazlasıyla yeterli<br>
<input type="radio" name="not" value="3" checked>3, Yeterli<br>
<input type="radio" name="not" value="2">2, Yetersiz<br>
<input type="radio" name="not" value="1">1, Çok kısıtlı <br></p>

<p><b>Sitenin tasarımı</b></p>
<p><select>
<option selected>Harika!
<option>Oldukça iyi
<option>İyi
<option>İdare eder
<option>Berbat</option>
</select></p>

<p><input type="submit" value="gönder"><input type="reset" value="sil"
</form>

HTML bölümünün burada sonuna geldik. Fakat tek başına HTML, çoğu zaman istediğimiz gibi sayfalar yapabilmek için yeterli olmaz. Artık internet'te yeralan sayfaların hemen hepsinde JavaScript kullanılmaktadır. Aşağıdaki link size daha dinamik sayfalar yapma olanağı sunan JavaScript bölümüne götürecektir.


not:htlm dersleri kitabından alıntı yapılmıştır!