HTML Dersi devam
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.
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'
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 |
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 | ÷ | ÷ |
HTML başka sayfalara kendi üzerinden bağlantı (link) kurmak için hyperlink (çoklu bağlantı) özelliğini kullanılır.
Örnekler
<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:
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> |
Ç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. |
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ı |
Devamı gelecek
