HTML KODLARI VE ANLAMLARI
HTML Nedir Ne İşe Yarar?
Web dünyasının en önemli konularından biri olan ve bir anlamda vazgeçilmezi diyebileceğimiz bir konuyla karşınızdayız. Açılımı İngilizce olarak ‘ Hyper Text Markup Language’ olan ve ‘Hiper Metin İşaretleme Dili’ şeklinde Türkçe ifade edilen bir metin işaretleme dilidir. Yazımızın
ilerleyen kısımlarında Html nedir kısaca bahsedeceğiz.
İnternet üzerinde kullanıcıların giriş yapmalarını sağlamak amacıyla web sayfaları oluşturmak için kullanılan bir betik dili olan Html sayfası bulunduğu sunucularda ‘.html‘ veya ‘.htm‘ uzantılarıyla tutulur.
Herhangi bir web sitesine giriş yapılınca sistemin bizi yönlendirdiği sayfa, siteye giriş sayfası olarak tanımlanır. Bahsedilen bu
sayfanın ismi farklı farklı tanımlanabilmektedir. Aşağıda bu isimlere örnek olması açısından bazı giriş sayfası isimleri yazılmıştır.
-
html
-
htm
-
html
-
htm
-
aspx
-
php
Görüldüğü gibi farklı dosya isimleri ve farklı uzantılar kullanılarak giriş sayfaları belirlenebilmektedir. İlgili sunucuda mevcut web sitesi için hangisinin giriş sayfası olduğu belirlemek gerekecektir. Bu işlemden sonra artık giriş sayfası üzerinden siteye girişler
sorunsuz bir şekilde sağlanabilir.
Html gerçek anlamda bir programlama dili olmamasına karşın yine de belli bir sözdizimi ve kullanımı bulunmaktadır. Bu kurallara uyarak Html kodları yazmak gerekir. Peki Html kodu nedir? Bir sonraki başlığa geçip Html’in sözdizimine göz atalım.
Html Kodu Nedir?
Html ile web sayfaları oluşturmak çok basittir. Bu dil ile web sayfaları oluşturmaya başlayınca günlük konuşma dilini kullanıyormuşçasına sayfalar
geliştirebilirsiniz. Bu aşamada css nedir sorusu da cevaplanması gereken sorulardandır ama şu an konumuz dışında olduğu için
değinilmeyecektir. Çünkü css başlı başına farklı bir teknolojidir.
Şimdi artık Html nasıl kullanılır sorusuna cevap verebiliriz. Bunun için ‘Notepad’ programını kullanmak oldukça pratik bir çözüm
olacaktır. Zaten Html ile geliştirilen uygulamaların derlenmesine gerek olmaması bu konuda geliştiricilere büyük kolaylık ve avantajlar sağlamaktadır.
Html Sayfası Oluşturmak
Bir Html sayfası oluşturmak için küçük ve büyük (< >) işaretlerinden sıkça faydalanacağız. O zaman öncelikle < > işaretlerinin arasına ‘html’
yazmakla başlayalım. Ardından yine (< >) işaretlerini kullanarak html tag’inin içerisine ‘head’ ve ‘body’ tag’lerini yazıyoruz. Burada yazdığımız html, head ve body Html dilinde tag olarak isimlendirilmektedir.
Şimdi yukarıda bahsettiğimiz durumun kodlarını detaylı bir şekilde aşağıda inceleyelim.
<html>
<head>
<title> İlk HTML Sayfamız </title>
</head>
<body>
<font size = "5" face = "Tahoma" color = "gray"> İlk HTML Sayfamız </font>
</body>
</html>
Yukarıdaki kodları incelediğimiz zaman iç içe geçmiş bir yapı görmekteyiz. En dışta yukarıda belirttiğimiz <html> </html>tag’leri yer alıyor. Sonra gelen tag <head> </head> ve daha sonraki tag <body> </body>’dir. Head tag’i başlık olarak ifade edilirken, body tag’i gövdeyi temsil eder. Yani bir web
sayfasının başlıkla ilgili verileri head tag’i içerisine, içerik ve görünümle ilgili olanları ise body tag’i içerisine yazıyoruz.
Head tag’i içerisinde yer alan <title> </title> tag’i web sayfamızın başlık bilgisini içermektedir. Buraya
yazacağınız başlık tarayıcının en üstünde görünen başlık olacaktır. Yukarıda verilen kodları Notepad’de yazıp farklı kaydet diyerek “ Kayıt Türü” kısmından ‘Tüm Dosyalar’ seçilir ve dosya adının sonuna ‘.html’ eklenir. Artık oluşan
dosyamız Html uzantılı olacaktır ve herhangi bir tarayıcıda çalıştırdığınızda açılacaktır.
HTML Kodları ve Anlamları
Etiket(Tag) Açıklama
<!–…–> Yorum tanımlar
<!DOCTYPE> Belge türünü belirler
<a> Bir köprüyü tanımlar
<abbr> Bir kısaltma veya bir kısaltma tanımlar
<acronym> Bir kısaltma tanımlar (HTML5’te <abbr> kullanılır)
<address> Bir belgenin yazarı / sahibinin iletişim bilgilerini tanımlar
<applet> Gömülü bir uygulamasını tanımlar.(HTML5’te <Embed> veya <object> kullanılır)
<area> Bir görüntü haritası içinde bir alanı tanımlar
<article> Bir makale tanımlar
<aside> Sayfa içeriğini kenara tanımlar
<audio> Ses içeriğini tanımlar
<b> Kalın metin tanımlar
<base> Bir belgedeki tüm göreli URL’ler için taban URL / hedef belirler
<basefont> Bir belgedeki tüm metin için bir varsayılan renk, boyut ve yazı belirtir (HTML5 desteklenmez. Bunun yerine CSS kullanın)
<bdi> Bunun dışındaki diğer metinden farklı bir yöne biçimlendirilmiş olabilir metnin bir kısmını izole eder
<bdo> Geçerli metin yönünü geçersiz kılar
<big> Büyük metin tanımlar (HTML5 desteklenmiyor. CSS yerine kullanın)
<blockquote> Başka bir kaynaktan alıntı bölüm tanımlar
<body> Belgenin cesedini tanımlar
<br> Tek bir satır sonu tanımlar
<button> Tıklanabilir bir düğme tanımlar
<canvas> Scripting aracılığıyla anında, grafik çizmek için kullanılır (genellikle JavaScript)
<caption> Bir tablo başlığını tanımlar
<center> Merkezli metni tanımlar (HTML5 desteklenmiyor. CSS yerine kullanın)
<cite> Bir eserin başlığını tanımlar
<code> Bilgisayar kodunun bir parçasını tanımlar
<col> Bir <COLGROUP> elemanı içinde her sütun için sütun özelliklerini belirtir
<colgroup> Biçimlendirmek için bir tablo, bir veya daha fazla sütun grubu belirtir
<datalist> Giriş kontrolleri için önceden tanımlanmış seçenekler listesini belirtir
<dd> Bir açıklama listesindeki bir terimin açıklaması / değerini tanımlar
<del> Bir belgeden silindi metni tanımlar
<details> Kullanıcı görüntülemek veya gizlemek ek ayrıntılar tanımlar
<dfn> Bir terimin tanımlanması örneğini temsil
<dialog> Bir iletişim kutusu veya pencere tanımlar
<dir> Bir dizin listesini tanımlar(HTML5 desteklenmiyor.<ul> kullanın)
<div> Bir belgedeki bölüm tanımlar
<dl> Bir açıklama listesi tanımlar
<dt> Bir açıklama listesinde bir terim / isim tanımlar
<em> Vurguladı metni tanımlar
<embed> Harici (HTML olmayan) uygulama için bir kabı tanımlar
<fieldset> Gruplar bir form elemanları ile ilgili
<figcaption> Bir <rakam> öğesi için bir başlık tanımlar
<figure> Kendi kendine yeten içeriği belirtir
<font> Metin için yazı tipi, renk ve boyutunu tanımlar
<footer> Bir belgenin veya bölümün altbilgi tanımlar
<form> Kullanıcı girişi için bir HTML formu tanımlar
<frame> Kullanıcı girişi için bir HTML formu tanımlar…
<frameset> Kare seti tanımlar
<h1> to
<h6> HTML başlıkları tanımlar
<head> Belge ile ilgili bilgiler tanımlar
<header> Bir belgenin veya bölümün bir başlık tanımlar
<hr> Içerik tematik değişiklik tanımlar
<html> Defines the root of an HTML document
<i> Bir HTML belgesinin kök tanımlar
<iframe> Bir satır içi çerçeve tanımlar
<img> Bir görüntü tanımlar
<input> Bir giriş kontrolü tanımlar
<ins> Bir belgeye yerleştirilmiş olan bir metin tanımlar
<kbd> Klavye girişi tanımlar
<keygen> (Formlar için) bir anahtar çifti jeneratör alanını tanımlar
<label> Bir <input> öğesi için bir etiket tanımlar
<legend> Bir <fieldset> öğesi için bir başlık tanımlar
<li> Bir liste öğesini tanımlar
<link> Bir belge ve harici kaynak arasındaki ilişki (en stil sayfalarını bağlamak için kullanılır) tanımlar
<main> Bir belgenin ana içeriğini belirler
<map> Bir istemci tarafı görüntü haritası tanımlar
<mark> İşaretli / vurgulanan metni tanımlar
<menu> Komutların bir listesini / menü tanımlar
<menuitem> Kullanıcı açılır menüden çağırabilirsiniz bir komut / menü öğesi tanımlar
<meta> Bir HTML belgesi hakkında meta tanımlar
<meter> Bilinen bir aralık içinde bir sayıl ölçümünü tanımlar (bir ölçü)
<nav> Navigasyon bağlantıları tanımlar
<noframes> Çerçeveleri desteklemeyen kullanıcılar için alternatif bir içerik tanımlar
<noscript> Istemci tarafı komut desteği olmayan kullanıcılar için alternatif bir içerik tanımlar
<object> Katıştırılmış nesne tanımlar
<ol> Sıralı liste tanımlar
<optgroup> Bir açılan listesinde ilgili seçeneklerin bir grup tanımlar
<option> Bir açılır listeden bir seçenek tanımlar
<output> Bir hesaplamanın sonucunu tanımlar
<p> Bir paragraf tanımlar
<param> Bir nesne için bir parametre tanımlar
<pre> Önceden biçimlendirilmiş metni tanımlar
<progress> Bir görevin ilerlemesini temsil
<q> Kısa bir alıntı tanımlar
<rp> Yakut açıklamaları desteklemeyen tarayıcılarda göstermek ne tanımlar
<rt> (Doğu Asya tipografi için) karakter bir açıklama / telaffuz tanımlar
<ruby> (Doğu Asya tipografi için) bir yakut ek açıklama tanımlar
<s> Artık doğru metin tanımlar
<samp> Bir bilgisayar programı örnek çıktı tanımlar
<script> Bir istemci tarafı komut dosyası tanımlar
<section> Bir belgedeki bölüm tanımlar
<select> Bir açılır listeyi tanımlar
<small> Daha küçük metin tanımlar
<source> (<Video> ve <audio>) medya unsurları için birden fazla medya kaynakları tanımlar
<span> Bir belgedeki bölüm tanımlar
<strike> Çizili metni tanımlar(HTML5 desteklenmiyor. <del> veya <s> kullan)
<strong> Önemli metni tanımlar
<style> Bir belge için stil bilgilerini tanımlar
<sub> Indisli metni tanımlar
<summary> Bir <detay> elemanı için görünür bir başlık tanımlar
<sup> Üstsimge metni tanımlar
<table> Tablo tanımlar
<tbody> Gruplar bir tablo vücut içeriği
<td> Bir tablodaki bir hücreyi tanımlar
<textarea> Çok satırlı giriş kontrolünü tanımlar (metin alanı)
<tfoot> Gruplar bir tablo altbilgi içeriği
<th> Bir tablodaki bir başlık hücreyi tanımlar
<thead> Bir tablodaki bir başlık hücreyi tanımlar
<time> Bir tarih / saat tanımlar
<title> Belge için bir başlık tanımlar
<tr> Bir tablodaki bir satır tanımlar
<track> (<Video> ve <audio>) medya unsurları için metin parçalarını tanımlar
<tt> Teletype metni tanımlar
<u> Normal metinden üslup farklı olmalıdır metni tanımlar
<ul> Sırasız liste tanımlar
<var> Bir değişken tanımlar
<video> Bir video veya film tanımlar
<wbr> Olası bir çizgi-break tanımlar
