Html Dersi

meto22 · 21 Kas 2009

Bu Konuyu Açmadan Önce Araştırma Yaptım.Sonuç Bulamadım.
Fakat Böyle Bir Konu Varsada Özürdilerim.
Html Giriş
HTML dosyası nedir?

HTML'in açılımı Hyper Text Markup Language (Bunun tam Türkçe'si bulunmamakla beraber "çok yere açılan metin" denebilir.
Bir HTML dosyası bir text dosyası olmakla beraber markup tags (işaretlenmiş etiketler) içerir
Markup tag'ler web tarayıcınıza sayfanın nasıl gösterileceğini gösterir.
Bir HTML dosyasının uzantısı htm veya html olmak zorundadır.
Bir HTML dosyası basit bir text editör ile oluşturulabilir.
Denemek İster misiniz?

Eğer Windows kullanıyorsanız not defterini açın.

Eğer MAC kullanıyorsanız SimpleText programını açın.

Eğer OSX kullanıyorsanız, TextEdit'i açın ve aşağıdakileri yapın: "Format" menüsünü açın ve "Rich Text" yerine "Plain Text" seçeneğini seçin. Sonra "Text Edit" menüsünün altında bulunan "Preferences" penceresini açın ve "Ignore rich text commands in HTML files" seçeneğini seçin. Eğer bu değişiklikleri yapmazsanız HTML dosyasınız büyük ihtimalle çalışmayacaktır!

Aşağıdaki metini açtığınız editör içerisine yazın:

<html>
<head>
<title>Sayfa Başlığı</title>
</head>
<body>
Bu benim ilk sayfam <b>Bu metin koyu</b>
</body>
</html>
Dosyayı "sayfam.htm" olarak kaydedin.

Oluşturduğunuz dosyaya çift tıklayın. Dosya tarayıcınızda açılacaktır.

Örneğin Açıklaması

HTML dökümanınızdaki ilk tag (etiket) <html>'dir. Bu etiket tarayıcınıza bir HTML dosyasının koşturulacağını söyler. HTML dökümanınızdaki son tag (etiket) </html>'dir. Bu da tarayıcınıza HTML dosyasının sonunun geldiğini söyler.

<head> ve </head> etiketleri arasında kalan kısım başlık bilgilerini içerir. Başlık bilgileri tarayıcı penceresinde görüntülenmez.

<title> ve </title> etiketleri arasında kalan kısım dökümanınızın başlık bilgilerini içerir. Başlık tarayıcı penceresinin en üstünde görüntülenir.

<body> ve </body> etiketleri arasında kalan kısım, tarayıcı penceresinde görüntülenecek olan kısımı içerir.

<b> ve </b> etiketleri arasında kalan kısım ise koyu (bold) biçimde gösterilir.

HTML Editörleri Hakkında Not:

HTML dosyalarınızı kolay bir şekilde WYSIWYG (what you see is what you get), FrontPage veya Dreamweaver ile de hazırlayabilirsiniz.

Bununla beraber, eğer profesyonel anlamda HTML çalışmak istşyorsanız mutlaka not defteri (notepad) kullanmanızı tavsiye ederiz.
---Alıntıdır---

meto22 · 21 Kas 2009

---> Html Dersi

HTML Öğeleri
HTML dökümanları, HTML öğeleri kullanılarak oluşturulan metin dosyalarıdır.

HTML öğeleri, HTML etiketleri kullanılarak tanımlanır.

HTML Etiketleri

HTML etiketleri, HTML öğelerini belirtmek için kullanılır.
HTML etiketleri 2 karakter ile sınırlanır. < ve >
Bu karakterlere grup parantezleri (angle brackets) denir.
HTML etiketleri çift olarak kullanılır. Örn: <b> Bu metin koyu fonttadır. </b>
Bu çiftlerden birincisine başlama etiketi, ikincisine ise bitiş etiketi denir.
Başlama ve bitiş etiketleri arasında kalan herşeye ise öğe içeriği (element contents) denir.
HTML etiketleri büyük/küçük harfe duyarlı değildir, yani <b> ve <B> aynı görevi görür. (Türkçe karakter olan "İ" ve "ı" harflerinin bu durumun dışında kaldığını unutmayınız.)
HTML Öğeleri

Önceki sayfadaki örneğimizi hatırlayalım:

<html>
<head>
<title>Sayfa Başlığı</title>
</head>
<body>
Bu benim ilk sayfam <b>Bu metin koyu</b>
</body>
</html>
Bu bir HTML öğesidir:

<b>Bu metin koyu</b>
HTML öğesi başlangıç etiketi olan <b> ile başladı.
HTML öğesinin içeriği: Bu metin koyu
HTML öğesi bitiş etiketi olan </b> ile sonlandırıldı.

<b> etiketinin amacı, görüntülenecek olan metinin koyu gösterilmesi gerektiğini bildirmektir.

Etiketleri neden küçük harflerle belirtiriz?

HTML etiketlerinin büyük/küçük harfe duyarlı olmadığını söylemiştik: <B> ve <b> aynıdır. Eğer Web'de gezintiye çıkarsanız bir çok sitenin kaynak kodunun bütük harflerle yapılmış olduğunu göreceksiniz..Fakat biz her zaman küçük harf kullanırız. Neden?

Eğer Web standartlarını kontrol etmek istiyorsanız küçük harf kullanmalısınız. World Wide Web Consortium (W3C) HTML 4 versiyonu ile beraber küçük harf kullanımını önerir. Ayrıca XHTML (yeni nesil HTML) dili de bunu kullanmanızı şiddetle önerir.

meto22 · 21 Kas 2009

---> Html Dersi

Temel HTML Etiketleri
HTML dilindeki en önemli etiketler, başlıklar, paragraflar ve satır atlama etiketleridir.

HTML'i öğrenmenin en iyi yolu örneklerle çalışmaktır. Sizin için çok kullanışlı bir HTML deneme editörü hazırladık. Bu editör ile kendi kaynak kodlarınızı girip anında test edebilirsiniz.

Kendin Dene - Örnekler

Çok basit bir HTML dökümanı
Bu örnek en az HTML etiketleri kullanılarak oluşturulmuş çok basit bir HTML dökümanıdır.

Basit paragraflar
Bu örnekle paragrafların nasıl oluşturulduğunu görebilirsiniz.

Başlıklar

Başlıklar <h1> ve <h6> dahil olmak üzere aradaki tüm rakamlar kullanılarak tanımlanabilir. <h1> en büyük puntoyu belirtirken, <h6> ise en küçük puntoyu belirtir.

<h1>Bu bir başlık</h1>
<h2>Bu bir başlık</h2>
<h3>Bu bir başlık</h3>
<h4>Bu bir başlık</h4>
<h5>Bu bir başlık</h5>
<h6>Bu bir başlık</h6>
HTML dili otomatik olarak başlık etiketlerinin öncesinde ve sonrasında bir satır atlar.

Paragraflar

Paragraflar <p> etiketi ile belirtilir.

<p>Bu bir paragraf</p>
<p>Bu da başka bir paragraf</p>
HTML dili otomatik olarak paragraf etiketlerinin öncesinde ve sonrasında bir satır atlar.

Etiketleri kapatmayı unutmayın!

Bir önceki örnekte paragrafın </b> etiketi ile bittiğini gördünüz:

<p>Bu bir paragraf
<p>Bu da başka bir paragraf
Çoğu browser büyük ihtimalle yukardaki gibi yazsanız bile çalıştıracaktır ama buna pek fazla güvenmeyin çünkü gelecek versiyon HTML dili hiçbir etiketi atlamanıza izin vermeyecektir.

Satır atlama

Satır atlamak için <br> etiketi kullanılır. Ancak bu etiketin yeni bir paragraf açmadığını da unutmayınız.

<p>Bu <br>bir <br>çok satırlı paragraftır.</p>
Kendin dene!

<br> etiketi boş bir etikettir. </br> gibi bir bitiş etiketi yoktur.

<br> mi <br /> mi?

Bir çok yerde <br> etiketinin <br /> olarak kullanıldığını göreceksiniz.

Çünkü <br> etiketi bir bitiş etiketi bulundurmaz ve bu özellik gelecek nesil HTML (XML ve XHTML) dilinin ilk kuralını bozmaktadır. Bu yüzden <br /> etiketini kullanmanızı tavsiye ederiz.

HTML içinde açıklama (yorum) satırları yaratmak

Yorum satırları HTML kaynak kodu içerisine programcıların hangi satırın ne iş gördüğünü anlatmak için kullanılır. Bu satırlar, sayfa browser'da görüntülenirken dikkate alınmazlar.


Temel Notlar - Yararlı İpuçları

HTML kodlarınızın başka browser'larda nasıl görüntüneceğini asla bilemezsiniz. Ayrıca bazı kullanıcılar geniş ekran monitörlere sahipken bazıları küçük ekranlara sahiptir. Bu sebeple metinler, kullanıcı penceresini her yeniden boyutlandırmasında değişecektir. Asla metinlerinizi fazladan boşluk bırakmak gibi tekniklerle biçimlendirmeye çalışmayın.

HTML koyduğunuz boşlukları sürekli teke indirecektir.

Boş bir satır bırakmak için <p> kullanmak kötü bir tekniktir, bunun yerine <br /> etiketini kullanınız. (Ama asla <br /> ile sıralı liste oluşturmayınız. HTML ile listeleme konusuna kadar bekleyiniz.)

Temel HTML Etiketleri

Etiket (Tag) Açıklama
<html> Bir HTML dökümanını belirtir
<body> Dökümanın görüntülenecek kısmını berlitir.
<h1> to <h6> Başlıkları belirtir.
<p> Bir paragraf belirtir
<br> Boş bir satır bırakır.
<hr> Sayfada yatay bir çizgi çizer
<!--> Yorum satırı olduğunu belirtir.

meto22 · 21 Kas 2009

---> Html Dersi

HTML Parametreler (Nitelikler)
Parametreler, HTML öğelerine, ek özellikler eklenmesini sağlar.

HTML Etiket Nitelikleri

HTML etiketleri parametrelere sahip olabilir. Parametreler, HTML öğelerine, ek özellikler eklenmesini sağlar.
Parametreler daima isim/değer çiftleri arasında gelir: name="value".

Parametreler daima başlangıç etiketi içerisinde belirtilir.

Parametre Örneği 1:

<h1> başlık belirtir.

<h1 align="center"> başlık belirtmesinin yanında, metinin ortalanacağını da belirtir.

Kendin dene: Ortaya hizalanmış metin

Parametre Örneği 2:

<body> HTML'in body kısmını belirtir.

<body bgcolor="yellow"> Body kısmını belirtmekle beraber, arkaplan renginin de sarı olacağını belirtir.

Kendin dene: Arkaplan rengi

Değerleri (Value) Daima Tırnak İçerisine Alın

Parametrelerin değerli her zaman tırnak içerisinde olmalıdır.

Bazen değerin kendisinin içinde de çift tırnak kullanılması gerektiği zamanlarda ise, değerin tamamını tek tırnak içerisine de alabilirsiniz:

name='Cem "GORA" Yilmaz'

meto22 · 21 Kas 2009

---> Html Dersi

HTML Metin Biçimlendirme
HTML, metini koyu veya itelik yapmak için bir çok tanımlama biçimi barındırır.

Aşağıda bu konu ile ilgili bir çok örneği görebilir ve kendiniz deneyebilirsiniz.

Örnekler

Metin Biçimlendirme

Biçimlendirilmemiş Metin

"Programlama dili biçimlendirmeli" etiketler

Adres

Kısaltmalar

Metin Yönlendirme

Alıntılar

Üstü ve Altı Çizili Metinler

HTML Kaynak Kodları Nasıl Görüntülenir?

Tarayıcınızın araç çubuğunda "Görünüm" menüsüne geldikten sonra "Kaynağı Görüntüle" seçeneğini tıklayınız.

Metin Biçimlendirme Etiketleri

Tag Açıklama
<b> Koyu metin
<big> Büyük metin
<em> Vurgulanmış metin
<i> İtalik metin
<small> Küçük metin
<strong> Güçlü metin
<sub> Alt indis metini
<sup> Üst indis metini
<ins> Altı çizili metin
<del> Üstü çizili metin
<s> Önemsiz etiket, bunun yerine <del> kullanınız.
<strike> Önemsiz etiket, bunun yerine <del> kullanınız.
<u> Önemsiz etiket, bunun yerine styles kullanınız.
"Programlama Dilleri" Etiketleri

Tag Açıklama
<code> Programlama dili metini
<kbd> Klavye metini
<samp> Örnek bilgisayar kodu metini
<tt> Tele tip metin
<var> Değişken
<pre> Biçimlendirilmemiş metin.
<listing> Önemsiz etiket, bunun yerine <pre> kullanınız.
<plaintext> Önemsiz etiket, bunun yerine <pre> kullanınız.
<xmp> Önemsiz etiket, bunun yerine <pre> kullanınız.
Alıntılar ve Açıklamalar İle İlgili Etiketler

Tag Description
<abbr> Kısaltma
<acronym> Baş harfleri ile kısaltma
<address> Adres öğesi
<bdo> Metin yönü
<blockquote> Uzun alıntı
<q> Kısa alıntı
<cite> Alıntı
<dfn> Tanımlama terimi

meto22 · 21 Kas 2009

---> Html Dersi

HTML Özel Karakterler
HTML içinde bazı karakterler ("<" gibi) kaynak kodlarda yazılarak ekranda görüntülenmesi sağlanamaz.

Bu tip karakterleri görüntüleyebilmek için bazı özel karakterler kullanılır.

Özel Karakterler

A character entity has three parts: an ampersand (&), an entity name or a # and an entity number, and finally a semicolon (

.

HTML dökümanı içinde bu tip karakterleri görüntülemek için < veya < yazmalıyız.

Bir numara yerine isim kullanılmasının avantajı, isimlerin daha rahat hatırlanabilmesidir. Dezavantajı ise piyasadaki tüm tarayıcılarda tam desteklenmemesidir.

Özel karakterlerin büyük/küçük harfe duyarlı olduğuna dikkat ediniz

Örnek: Özel Karakterler

Birden Fazla Boşluk Bırakabilmek

Normalde HTML kodları içindeki 2 kelime arasında 10 tane de boşluk bıraksanız bunlardan sadece 1 tanesi dikkate alınır. Eğer birden fazla boşluk bırakmak istiyorsanız özel karaktlerini kullanınız.

En Çok Kullanılan Özel Karakterler

Sonuç Açıklama Özel karakterleri Numaralı Hali
Fazladan boşluk
< Küçüktür < <
> Büyüktür > >
& Ve & &
" Alıntı " "
' apostorof ' (IE'de çalışmaz) '
Bazı Başka Özel Karakterler

Result Description Özel karakterleri Numaralı Hali
¢ Cent ¢ ¢
£ Pound £ £
¥ Yen ¥ ¥
€ Euro € €
§ Section § §
© Copyright © ©
® Kayıtlı marka ® ®
× Çarpma × ×
÷ Bölme ÷ ÷

meto22 · 21 Kas 2009

---> Html Dersi

HTML Bağlantılar (Links)
HTML başka sayfalara kendi üzerinden bağlantı (link) kurmak için hyperlink (çoklu bağlantı) özelliğini kullanılır.

Örnekler

Link oluşturma

Bir resime link vermek

<a> Etiketi ve href parametresi

HTML başka bir dökümana link oluşturmak için <a> etiketini kullanır.

Kullanım biçimi:

<a href="url">Görüntülenecek Metin</a>
Bir örnek:

<a href="http://www.htmldersleri.org/">Kodlayın, Tıklayın, Görün...</a>
Bu örnek tarayıcınızda aşağıdaki gibi görünecektir:

Kodlayın, Tıklayın, Görün...

Hedef (target) Parametresi

Target parametresi ile dökümanın nerde açılacağını belirtebilirsiniz.

Aşağıdaki bağlantıya tıklanırsa, döküman yeni bir pencerede açılacaktır.

<a href="http://www.htmldersleri.org/"
target="_blank">Kodlayın, Tıklayın, Görün...</a>

<a> Etiketi ve Name Parametresi

Bu parametre ile aynı döküman içinde belirlenmiş başka bir satıra direkt geçiş yapılabilir.

Kullanım Biçimi:

<a name="label">Görüntülenecek Metin</a>
The name attribute is used to create a named anchor. The name of the anchor can be any text you care to use.

Bir Örnek:

<a name="ipucu">Yararlı Bilgiler</a>
İpucu kısmına direkt link vermek için, URL'nin sonuna #ipucu yazınız:

<a href="http://www.htmldersleri.org/ornekler/html_links.htm#ipucu">
Yararlı İpuçları</a>
Dosya ismi kullanmadan o dosya içerisinde bir yere geçmek:

<a href="#ipucu">Yararlı İpuçları</a>

meto22 · 21 Kas 2009

---> Html Dersi

HTML Çerçeveler (Frames)
Çerçeveler sayesinde aynı tarayıcı penceresinde birden fazla HTML dökümanı görüntüleyebilirsiniz.

Örnekler

Dikey Çerçeveler

Yatay Çerçeveler

Çerçeveler

Çerçeveler sayesinde aynı tarayıcı penceresinde birden fazla HTML dökümanı görüntüleyebilirsiniz. Her HTML dökümanı bir çerçeve (frame) ve her çerçeve birbirinden bağımsız olur.

Çerçeve kullanmanın dezavantajları:

Web geliştiricilerin birden fazla HTML dökümanını takip etmesi zordur.
İstenilen sayfanın yazıcıya gönderilmesi zordur.
Frameset Etiketleri

<frameset> pencerenin hangi biçimde çerçevelere ayrılacağını belirler.
Her frameset satır (rows) veya sütun (cols) olarak belirlenir
Frame Etiketi

<frame> etiketi, her bir çerçevede hangi HTML dökümanının görüntüleneceğini belirtir.
Aşağıdaki örnekte 2 sütun çerçeveli bir döküman bulunmaktadır. İlk çerçeve için tarayıcı penceresinin genişliğinin %25'i ayrılmıştır. İkincisine ise %75'i ayrılmıştır. "frame_a.htm" birinci sütuna, "frame_b.htm" ise ikinci sütuna yerleştirilmiştir:

<frameset cols="25%,75%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset>
Not: frameset sütun değerleri ayrıca piksel olarak ta belirtilebilir: (cols="200,500"), ayrıca geri kalanının da kendi kendini 100 değerine tamamlamasına olanak verilebilir: (cols="25%,*").

Temel Notlar - Yararlı İpuçları

Çerçevelerde görünebilir kenarlıklar vardır. Kullanıcı bunları sürükleyerek yeniden boyutlandırabilir.Bunu önlemek için noresize="noresize" parametrelerini <frame> etiketi içine yazabilirsiniz.

<noframes> etiketini döküman içerisine eklerseniz, tarayıcınız çerçeve özelliğini desteklemez hale gelir.

Önemli: <body></body> etiketlerini <frameset></frameset> etiketleri ile beraber kullanamazsınız!

Frame Etiketleri

Etiket Açıklama
<frameset> Frame ayarlarını belirtir.
<frame> Alt pencere (çerçeve) belirtir.
<noframes> Frame desteğinin kullanılmamasını sağlar.
<iframe> İç frame belirtir.

meto22 · 21 Kas 2009

---> Html Dersi

HTML Tablolar (Tables)
HTML ile tablolar oluşturabilirsiniz.

Örnekler

Tablolar

Tablo Kenarlıkları

Tablolar

Tablolar <table> etiketi ile belirtilir. Bir tablo <tr> etiketi satırlara bölünür ve her satır da <td> etiketi ile sütunlara bölünür. <td> etiketinin anlamı "table data"dır. Bir veri hücresi (data cell) metinler, resimler, listeler, paragraflar, formlar, yatay çizgiler, tablolar vs. içerebilir.

<table border="1">
<tr>
<td>satır 1, hücre 1</td>
<td>satır 1, hücre 2</td>
</tr>
<tr>
<td>satır 2, hücre 1</td>
<td>satır 2, hücre 2</td>
</tr>
</table>
Çıktısı aşağıdaki gibi olacaktır:

satır 1, hücre 1 satır 1, hücre 2
satır 2, hücre 1 satır 2, hücre 2

Tablolar ve Kenarlık (border) Parametresi

Eğer bir border parametresi belirtmezseniz, tablonuz kenarlık olmadan görüntülenir. Bu bazen yararlı olabilir ama çoğu zaman kenarlıkları göstermek daha çok işinize yarayacaktır.

Kenarlıkları göstermek için aşağıdaki parametreyi kullanmalısınız:

<table border="1">
<tr>
<td>Satır 1, Hücre 1</td>
<td>Satır 1, Hücre 2</td>
</tr>
</table>

Tablolarda Başlıklar

Başlıklar <th> etiketi ile belirtilir.

<table border="1">
<tr>
<th>Başlık</th>
<th>Başka Başlık</th>
</tr>
<tr>
<td>Satır 1, Hücre 1</td>
<td>Satır 1, Hücre 2</td>
</tr>
<tr>
<td>Satır 2, Hücre 1</td>
<td>Satır 2, Hücre 2</td>
</tr>
</table>
Çıktısı:

Başlık Başka Başlık
Satır 1, Hücre 1 Satır 1, Hücre 2
Satır 2, Hücre 1 Satır 2, Hücre 2

Bir Tabloda Boş Hücreler

Veri içermeyen hücreler bir çok tarayıcıda görüntülenmezler.

<table border="1">
<tr>
<td>Satır 1, Hücre 1</td>
<td>Satır 1, Hücre 2</td>
</tr>
<tr>
<td>Satır 2, Hücre 1</td>
<td></td>
</tr>
</table>
Çıktısı:

Satır 1, Hücre 1 Satır 1, Hücre 2
Satır 2, Hücre 1
Boş hücre etrafındaki iç kenarlıkların görünmediğine dikkat edin. (Mozilla Firefox bunu görüntüler).

Bundan kurtulmak için, ( ) özel karakterlerini boş hücre içine ekleyerek kenarlıkların görüntülenmesini sağlayabilirsiniz.

<table border="1">
<tr>
<td>Satır 1, Hücre 1</td>
<td>Satır 1, Hücre 2</td>
</tr>
<tr>
<td>Satır 2, Hücre 1</td>
<td> </td>
</tr>
</table>
Çıktısı:

Satır 1, Hücre 1 Satır 1, Hücre 2
Satır 2, Hücre 1

Tablo Etiketleri

Etiketi Açıklama
<table> Tablo
<th> Tablo başlığı
<tr> Satır
<td> Hücre
<caption> Manşet
<colgroup> Hücre grupları
<col> Sütun genişliği
<thead> Tablo başı
<tbody> Tablo body özelliği
<tfoot> Tablonun en alt kısmı

meto22 · 21 Kas 2009

---> Html Dersi

HTML Listeleme (Lists)
HTML, sıralı, sırasız ve tanımlama listelerini destekler.

Örnekler

Sırasız Liste

Sıralı Liste

Sırasız Liste

Sırasız bir liste maddelerden oluşur. Liste içeriği madde imleri ile işaretlenir.

Sırasız listeleme <ul> etiketi ile başlar. Her madde de <li> etiketi ile başlar.

<ul>
<li>Kahve</li>
<li>Süt</li>
</ul>
Çıktısı:

Kahve
Süt
Bir liste madde içerisine paragraflar, resimler, linkler, başka listeler ve satır boşlukları koyabilirsiniz.

Sıralı Listeler

Maddeler rakamlar ile listelenir. Sıralı listeleme <ol> etiketi ile başlar. Her madde de <li> etiketi ile başlar.

<ol>
<li>Kahve</li>
<li>Süt</li>
</ol>
Çıktısı:

Kahve
Süt
Tanımlama Listeleri

Bir tanımlama listesi maddelerin sıralanması demek değildir. Bu, terimlerin açıklanması demektir.

Bir tanımlama listesi <dl> etiketi ile başlar. Her terim <dt> etiketi ile başlar. Each terimin tanımlaması da <dd> etiketi ile başlar.

<dl>
<dt>Kahve</dt>
<dd>Koyu sıcak içecek</dd>
<dt>Süt</dt>
<dd>Beyaz soğuk içecek</dd>
</dl>
Çıktısı:

Kahve
Koyu sıcak içecek
Süt
Beyaz soğuk içecek
Bir tanımlama listesi içerisine paragraflar, resimler, linkler, başka listeler ve satır boşlukları vs. koyabilirsiniz.

Listeleme Etiketleri

Etiket Açıklama
<ol> Sıralı liste
<ul> Sırasız liste
<li> Liste maddesi
<dl> Tanımlama listesi
<dt> Terim tanımı
<dd> Tanım açıklaması
<dir> Önemsiz etiketi. Yerine <ul> kullanınız.
<menu> Önemsiz etiketi. Yerine <ul> kullanınız.

meto22 · 21 Kas 2009

---> Html Dersi

HTML Form Oluşturma
HTML Formları kullanıcının klavye ile girdiği bilgileri işlemek için kullanılır.

Örnekler

Metin Alanları

Şifreli Giriş Alanları

Formlar

Bir form, form elemanlarını içinde bulunduran alandır.

Form elemanları kullanıcıların bilgi girmesini sağlayan elemanlardır. (metin alanları, açılabilir listeler, seçenek kutuları, kontrol kutuları)

Kullanım biçimi:

<form>
<input>
<input>
</form>

Giriş (Input)

En çok kullanılan form etiketi <input> etiketidir.

Metin Alanları

Kullanıcının rakam veya harf girmesini istediğiniz yerlerde bunu kullabilirsiniz.

<form>
Adınız:
<input type="text" name="isim">
<br>
Soyadınız:
<input type="text" name="soyad">
</form>
Çıktısı:

Adınız:
Soyadınız:
Formun kendisinin görünmediğine dikkat ediniz. Ayrıca bir çok tarayıcının metin giriş alanı için varsayılan olarak 20 karakterlik alan bıraktığına dikkat ediniz.

Seçenek Butonları (Radio Buttons)

Kullanıcının bir çok seçenek içinden sadece bir tanesini seçebilmesini istediğiniz zaman bunu kullanırsınız.

<form>
<input type="radio" name="Cinsiyet" value="Erkek"> Erkek
<br>
<input type="radio" name="Cinsiyet" value="Kadın"> Kadın
</form>
Çıktısı:

Erkek
Kadın
Kontrol kutuları (Checkboxes)

Kullanıcının, sunulan seçenekler içinden istediği kadar seçmesini sağlamak için bunu kullanabilirsiniz.

<form>
Bir bisikletim var:
<input type="checkbox" name="Tasit" value="Bisiklet">
<br>
Bir arabam var:
<input type="checkbox" name="Tasit" value="Araba">
<br>
Bir uçağım var:
<input type="checkbox" name="Tasit" value="Uçak">
</form>
Çıktısı:

Bir bisikletim var:
Bir arabam var:
Bir uçağım var:
Formlarda "Action" Parametresi ve "Submit" Butonu

Kullanıcı submit (gönder) butonuna tıkladığında girilen bilgiler başka bir sayfaya gönderilir. Action parametresinde ise bilgilerin hangi dosyaya gönderileceği belirtilir. Bilgilerin gönderildiği dosya, genellikle gelen bilgilerle ilgili ne tür işlem yapılacağı hakkında bilgiler içerir.

<form name="input" action="ornekler/html_form_action.php"
method="get" target="_blank">
Kullanıcı Adı:
<input type="text" name="kullanici">
<input type="submit" value="Gönder">
</form>
Çıktısı:

Kullanıcı Adı:
Eğer yukarıdaki kutuya birşeyler yazıp butona tıklarsanız, girdiğiniz bilgileri "html_form_action.php" dosyasına gönderirsiniz. Yeni pencerede açılacak olan bu sayfada girmiş olduğunuz bilgileri görebilirsiniz.

Form Etiketleri

Etiket Açıklama
<form> Form
<input> Giriş alanı
<textarea> Çok satırlı metin giriş alanı
<label> Etiket
<fieldset> Alanların ayarlarının nasıl olacağını belirtir.
<legend> Manşet
<select> Açılabilir liste (combobox)
<optgroup> Seçenek kutusu grubu
<option> Açılabilir liste içindeki maddeleri belirtir.
<button> Buton
<isindex> Önemsiz. Bunun yerine <input> etiketini kullanınız.

meto22 · 21 Kas 2009

---> Html Dersi

HTML Resimler
Resim "<img>" Etiketi ve "src" Parametresi

HTML dökümanlarda resimler <img> etiketi ile belirtilir.

<img> etiketi kapalıdır, yani bu etiket mutlaka parametreler ile kullanılır ve bir kapatma etiketi bulundurmaz.

Sayfanızda bir resim görüntüleyebilmek için "src" parametresini kullanmak zorundasınız. Src, "source" (kaynak) anlamına gelir. Buraya görüntülemek istediğiniz resim dosyasının yolunu yazarsınız.

Kullanım biçimi

<img src="resim yolu">
<img src="dosyalar/banner.jpg">
<img src="http://www.htmldersleri.org/dosyalar/banner.jpg">

"Alt" Parametresi

Bu parametre alternatif metin (alternate text) anlamına gelir. Bu metin, resimin üzerine mouse gelip bir süre beklendiği zaman görünen metindir.

<img src="home.gif" alt="Ana Sayfa">
Bu özellik sayesinde bazen sayfa yüklenirken resimlerin görüntülenememesi gibi problemlerde oradaki resimin ne olduğunu anlarız. Bu parametre yeni nesil HTML'de WWC tarafından zorunlu hale gelmiştir.

Temel Notlar - Yararlı İpuçları

Bir HTML dosyasına 10-15 resim koymak sayfanın yüklenişi sırasında yavaşlamaya neden olur. Bu yüzden sayfa tasarlarken bu notu dikkati alınız. Unutmayın ki kullanıcıların bir web sayfasında aradığı ilk özellik, hızdır!

Image Etiketleri

Etiket Açıklama
<img> Resim
<map> Bir resimden alınacak belirli bir bölge.
<area> Bir resimde belirlenmiş olan bir bölgenin tıklanabilir bölge ölçüsü.

meto22 · 21 Kas 2009

---> Html Dersi

HTML Arka Plan
Arka Plan

<body> etiketi arka plan belirlemek için iki tane parametre bulundurur. Bunlar "bgcolor" ve "background" parametreleridir. bgcolor ile arka plan rengi, background ile de bir arka plan resimi belirtebilirsiniz.

Bgcolor

<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">
Background

<body background="ornekler/background.jpg">
<body background="http://www.fikrin.net/grafik/logo.jpg">
Not: Eğer bir arka plan resimi kullanmak isterseniz aşağıdaki soruları aklınıza getirmeyi unutmayınız.

Yüklenmesi uzun sürer mi?
Sayfadaki diğer resimler ile uygun bir görüntü sağlar mı?
Sayfadaki metinlerin rengi ile uygun bir görüntü sağlar mı?
Sayfaya döşendiği zaman farkedilmemesi sağlanacak mı?
Sayfadaki metinlerden daha az dikkat çekecek mi?

meto22 · 21 Kas 2009

---> Html Dersi

HTML Temel Dökümanlar

<html>
<head>
<title>Buraya başlık</title>
</head>

<body>
Görünecek metinler buraya
</body>
</html>

Başlık Öğeleri

<h1>En büyük başlık</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>

<h6>En küçük başlık</h6>

Metin Öğeleri

<p>Bu bir paragraf</p>
<br> (satır atlama)
<hr> (yatay çizgi)
<pre>Biçimlendirilmemiş yazılar buraya</pre>
Mantıksal Stiller

<em>Vurgulu metin/em>
<strong>Güçlü metin</strong>
<code>Bilgisayar programlama kodu</code>
Fiziksel Stiller

<b>Koyu</b>
<i>İtalik</i>
Linkler ve Image Öğeleri

<a href="http://www.fikrin.net">Bu bir link</a>
<a href="http://www.fikrin.net"><img src="resim dosyasının yolu" alt="Alternatif metin></a>
<a href="mailto:[email protected]">E-mail gönder </a>
Sırasız Liste

<ul>
<li>İlk madde</li>
<li>İkinci Madde</li>
</ul>
Sıralı Liste

<ol>
<li>İlk madde</li>
<li>İkinci Madde</li>
</ol>
Tanımlama Listesi

<dl>
<dt>İlk terim</dt>
<dd>Açıklaması</dd>
<dt>İkinci terim</dt>
<dd>Açıklaması</dd>
</dl>
Tablolar (Tables)

<table border="1">
<tr>
<th>Bir başlık</th>
<th>Bir başlık daha</th>
</tr>
<tr>
<td>metin</td>
<td>metin</td>
</tr>
</table>

Çerçeveler (Frames)

<frameset cols="25%,75%">
<frame src="sayfa1.htm">
<frame src="sayfa22.htm">
</frameset>

Formlar (Forms)

<form action="http://www.htmldersleri.org/html_form_action.php" method="post/get">
<input type="metin" name="soyisim" value="GZO" size="30" maxlength="50">
<input type="şifre">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit">
<input type="reset">
<input type="hidden">

<select>
<option>Elmalar
<option selected>Muzlar
<option>Kirazlar
</select>

<textarea name="Yorum" rows="60" cols="20"></textarea>

</form>

Özel Karakterler

< ifadesi, bununla aynı çıktıyı verir: <
> ifadesi, bununla aynı çıktıyı verir: >
© ifadesi, bununla aynı çıktıyı verir: ©
Diğer Öğeler



<blockquote>
Bu metin başka bir metinden alıntılanmış bir parçadır.
</blockquote>

<address>
Adres 1<br>
Adres 2<br>
Şehir<br>
</address>

meto22 · 21 Kas 2009

---> Html Dersi

HTML Tasarım
Girdiğiniz çoğu sitede, sayfaların gazeteler gibi tasarlandığını görürsünüz.

HTML Tasarım - Tabloları Kullanma

En çok kullanılan tasarım yöntemi tabloların kullanılmasıdır.
Sayfanın bu kısmı gazete gibi iki sütuna ayrılmıştır.

Gördüğünüz üzere burada sol ve sağ sütunlar bulunmaktadır.

Bu metin, sol sütunda görüntülenmektedir.

HTML <table> komutu ile bir sayfayı iki ayrı sütuna bölebiliriz.
Tabloları kullanmanın asıl önemini border özelliğini sıfır yapınca görürsünüz. Kullanıcı kenarlık görmez ama sayfa istediğiniz şekilde oturtulmuştur.

Buraya ne kadar metin eklediğiniz önemi yoktur. Ne kadar yazarsanız yazın, hepsi bu hücre içerisinde kalacaktır.

Aynı Tasarım - Renklendirilmiş

En çok kullanılan tasarım yöntemi tabloların kullanılmasıdır.
Sayfanın bu kısmı gazete gibi iki sütuna ayrılmıştır.

Gördüğünüz üzere burada sol ve sağ sütunlar bulunmaktadır.

Bu metin, sol sütunda görüntülenmektedir.

HTML <table> komutu ile bir sayfayı iki ayrı sütuna bölebiliriz.
Tabloları kullanmanın asıl önemini border özelliğini sıfır yapınca görürsünüz. Kullanıcı kenarlık görmez ama sayfa istediğiniz şekilde oturtulmuştur.

Buraya ne kadar metin eklediğiniz önemi yoktur. Ne kadar yazarsanız yazın, hepsi bu hücre içerisinde kalacaktır.

Örnekler

Bir HTML dökümanını tablolarla bölmek çok basittir. Bunu görmek için örneğimize bakalım

meto22 · 21 Kas 2009

---> Html Dersi

HTML Fontlar (Fonts)
<font> artık önemsiz bir etiket olmuştur. Gelecek nesil HTML dillerinde bunun kullanılması söz konusu olmayacaktır.

Bir çok kişinin halen bunu kullanmasına karşın, bu komutu artık unutmanızı ve yerine stilleri kullanmanızı öneririz.

HTML <font> Etiketi

<p>
<font size="2" face="Verdana">
Bu bir paragraf.
</font>
</p>
<p>
<font size="3" face="Times">
Bu da başka bir paragraf
</font>
</p>
Kendiniz Deneyin.

Font Parametreleri

Parametre Örnek Açıklama
size="number" size="2" Punto büyüklüğü
size="+number" size="+1" Puntoyu 1 arttır
size="-number" size="-1" Puntoyu 1 düşür
face="face-name" face="Times" Yazı tipi belirle
color="color-value" color="#eeff00" Yazı rengi belirle
color="color-name" color="red" Yazı rengi belirle

<font> Artık Kullanılmamalıdır!

<font> etiketi HTML 4 ve XHTML dillerinde artık geçersiz olmuştur.

World Wide Web Consortium (W3C) bunun yerine style sheets (CSS) kullanılmasını önerir.

Stiller İle Doğru Şekilde Font Ayarları

Yazı tipi ayarlama

Punto ayarlama

Yazı rengi ayarlama

Yazı tipi, punto, renk ayarlama

meto22 · 21 Kas 2009

---> Html Dersi

HTML Stiller (Styles)
Stiller Nasıl Kullanılır?

Bir tarayıcı bir stil dosyasını okumaya başladığı zaman HTML dökümanını ona göre biçimlendirir. Stil dosyalarını eklemenin üç yolu vardır.

Harici Stil Dosyası

Harici bir stil dosyası her zaman daha iyidir. Çünkü sadece .css dosyasının içerisinde değişiklik yaparak tüm sitenin görünümünü değiştirebilirsiniz. Her sayfa stil dosyasına <link> etiketi ile bağlanmalıdır. <link> etiketi <head>..</head> içerisinde tanımlanmalıdır.

<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css">
</head>
Dahili Stil Dosyası

Eğer sadece bir HTML dökümanı içerisinde stil uygulanacaksa bu yöntem kullanılabilir.

<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
Satır İçi Stiller

Tek bir öğeye uygulanacağı zaman kullanılır.

<p style="color: red; margin-left: 20px">
Bu bir paragraf.
</p>

meto22 · 21 Kas 2009

---> Html Dersi

HTML Başlık (Head)
Başlık (Head) Öğesi

Head öğesi genel bilgiler ve ayrıca meta-bilgilerini içerir.

Head Öğesi İçinde Bilgi

Buraya yazılan bilgiler tarayıcıda görüntülenmez.

HTML standartlarına göre sadece bir kaç etiket head etiketi içerisinde kullanılabilir, Bunlar: <base>, <link>, ******>, <title>, <style> ve **********.

Aşağıdaki kullanım biçimi yasaktır, kullanılamaz.

<head>
<p>Metin</p>
</head>
Bu noktada tarayıcının iki seçeneği vardır:

Metini gösterir, çünkü bir paragraf öğesi içindedir.
Metini gizler, çünkü bir head öğesi başındadır.
Head Etiketleri

Etiket Açıklama
<head> Başlık
<title> Sayfa başlığı
<base> Temel URL hedef çerçevelerini belirlemek için kullanılır.
<link> Kaynak dosyası belirtilir
******> META bilgileri girilir.

meto22 · 21 Kas 2009

---> Html Dersi

HTML Meta
Meta Öğesi

Bir çok meta öğesi daha çok arama motorlarının site içerisinde neler bulunduğuna dair bilgi edinmesi için koyulur. Arama motorlarının bot programları sitenizi ziyaret ettiğinde Meta keywords içine bakar ve ona göre sitenizi kendi veritabanında indeksler.

Arama Motorları İçin Keywords

Bu meta öğesi sayfanız hakkında açıklama içerir.
****** name="description" **********HTML hakkında bedava web tabanlı interaktif eğitim">

Bu meta öğesi siteniz hakkında keywords içerir.
****** name="keywords" **********HTML, ders, online, dene">

Bilinmeyen Meta Parametreleri

Bazen aşağıdaki gibi bilinmeyen parametreler görebilirsiniz.

****** name="security" **********low">
Bunu gördüğünüz anda bunun sizinle alakalı olmadığı kabul edin.

meto22 · 21 Kas 2009

---> Html Dersi

HTML Uniform Resource Locators (URL)
Uniform Resource Locators (Düzenli Kaynak Konumlandırıcı)

Bu terimin Türkçe olarak tam bir karşılığı bulunmamaktadır.

URL aşağıdaki dizilime göre kullanılır:

scheme://host.domain

ort/path/filename

scheme internet servisinin tipidir. Genellikle kullanılan tip http dir.
host alan adının sunucusunu bildirir. Örnek: www.

domain alan adıdır. Örnek: htmldersleri.org

ort sunucuya hangi porttan bağlanacağınızı belirtir. http portu 80 olarak sabitlenmiştir.

path, o sunucu içerisindeki alt klasörlere veya direkt bir dosyaya ulaşmak istediğinizde kullanmanız gereken elemandır.

filename ise sunucu içerisinde alt klasörlerde bulunan bir dosyaya direkt ulaşmak isterseniz kullanmanız gereken elemandır.

URL İnternet Servis Tipleri

Tip (Schemes) Erişim
file Kendi lokal bilgisayarınızdaki bir dosyaya ulaşmanızı sağlar.
ftp FTP sunucu üzerindeki bir dosyaya ulaşmanızı sağlar.
http World Wide Web Sunucu üzerindeki bir dosyaya ulaşmanızı sağlar.
gopher Gopher sunucu üzerindeki bir dosyaya ulaşmanızı sağlar.
news Bir Usenet haber grubu
telnet Telnet bağlantısı
WAIS WAIS sunucu üzerinde bir dosya

Html Dersi

Gizliliğinize değer veriyoruz