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.
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.
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.
<!-- Bu bir açıklama --> |
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. |
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'
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 |
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
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> |
Ç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. |
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ı |
Sosyal Platformlar