HTML
Hiper Metin İşaretleme Dili (İngilizce Hypertext Markup Language, ks. HTML) web sayfalarını oluşturmak için kullanılan standart metin işaretleme dilidir. Dilin son sürümü HTML5'tir.
HTML, bir programlama dili olarak tanımlanamaz. Zira HTML kodlarıyla kendi başına çalışan bir program yazılamaz. Ancak bu dili yorumlayabilen programlar aracılığıyla çalışabilen programlar yazılabilir. Programlama dili denilememesinin nedeni tam olarak budur. Temel gereği yazı, görüntü, video gibi değişik verileri ve bunları içeren sayfaları birbirine basitçe bağlamak, buna ek olarak söz konusu sayfaların web tarayıcısı yazılımları tarafından düzgün olarak görüntülenmesi için gerekli kuralları belirlemektir. HTML kodunu web tarayıcıları okur, yorumlar ve görsel hale dönüştürürler, dolayısıyla aynı HTML kodunun farklı tarayıcılarda farklı sonuç vermesi olasıdır.
Küçüktür ve büyüktür işaretleri arasına yazılan HTML komutları kullanılarak yazılır (ör: <html>). İşaretlenen metnin başını ve sonunu belirtmek için çoğunlukla çift olarak kullanılırlar (Örnek: <h1>Selam</h1>) ancak işaretlemek yerine metnin bir yerine bir işaret konacaksa tek olarak da kullanılabilirler (Ör: <img>).
Örnek bir HTML kodu[değiştir | kaynağı değiştir]
HTML standartları W3C tarafından belirlenmektedir. HTML, "etiket" (İngilizce: tag) ismi verilen çeşitli elemanlar kullanılarak oluşturulur. Aşağıdaki örnek bu etiketler kullanılarak yazılmıştır.
<html> <head> <title>örnek başlık</title> </head> <body> <p style="font-size:10px"><a href="http://tr.wikipedia.org">Özgür Ansiklopedi</a></p> </body> </html>
Bu kodun ekran çıktısı "Özgür Ansiklopedi" yazısı şeklinde olur ve yazı Vikipedi genel sayfasına köprü görevi görür.
Tarihi
1980 yılında CERN'de görevli olan Tim Berners-Lee, CERN araştırmacılarının bilgilerini ve dökümanlarını birbirleriyle paylaşabilmeleri için bir sistem olması gerektiğine inanıyordu. Bu yüzden prototip olarak ENQUIRE isimli sistemi önerdi.1989 yılına gelindiğinde internet tabanlı sistemin ilk temellerini yine aynı isim Tim Berners Lee attı.1990 yılında HTML işaretleme dilini geliştirmesinden sonra World Wide Web(WWW) sistemini kurmuştur. Bu şekilde CERN'de bilgi paylaşımını kolaylaştırma amacı doğrultusunda ortaya çıkan HTML günümüzde hayatımızın vazgeçilmezi olan internetin başlıca temelini oluşturmuştur.
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 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> |
<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.
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
"Programlama dili biçimlendirmeli" etiketler
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
Bir özel karakter üç kısımdan oluşur: bir ampersand (ve) (&) işareti, bir belirtgeç ismi yada # işareti ile beraber ASCII kodu, ve son olarak noktalı virgül(;)
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
| Sonuç | Açıklama | Ö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> |
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
Ç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. |