Temel HTML5 Etiketleri(Tags) Nedir? Nasıl Kullanılır?

Temel HTML5 Etiketleri(Tags) Nedir? Nasıl Kullanılır?
HTML Nedir?
HTML (HyperText Markup Language – Kelime İşaretleme Dili), web sayfalarının tasarımının yapıldığı bir işaretleme dilidir. HTML bir yazılım dili değildir ve diğer yazılım dilleri gibi özel derleyicilere ihtiyacı yoktur. Oluşturulan HTML sayfaları derlenmek veya çalıştırılmak yerine, kullanıcı programı tarafından yorumlanır. Bu programlara biz Web Tarayıcılar (Browser) diyoruz. Fakat web tasarımcılar kodlama yaparken kullanım rahatlığını sağlamak için Adobe Dreamweaver vb programlar kullanmayı tercih ederler.
Temel HTML Etiketleri(Tags) ve Kullanım Amaçları
**Uyarı : Alt kısımda gördüğünüz kod parçaları gösterim amacı ile büyük harfler kullanılarak yazılmıştır, siz kodlama yaparken küçük harf düzeni kullanmanız daha faydalı olacaktır.
• <HTML></HTML> : Html kodlarının başladığını ve bittiğini belirtmek için kullanılır. Yani kodlarımızın hepsi bu iki kodun arasında olmalıdır.
• <HEAD></HEAD> : Bu kodlar ilk yazılacak kodlardır. Bu iki kod arasına sayfamızla ilgili bilgileri yazmamız gerekmektedir, alt kısımdaki tüm etiketler <HEAD> etiketi arasında kullanılmaktadır.
• <TITLE></TITLE> : Head kodlarının arasına yazılacak olan bu iki kod arasına sayfanızın ismini ve birkaç küçük bilgi yazmanız gerekmektedir aynı zamanda bu kısıma yazdığınız başlık tarayıcının menü üstü sekme barında gözükecektir.
• <META name="description" content="..."> : Head kodları arasına yazılan Meta kodları sayfanızı arama motoruna kaydettiğiniz zamanlarda sayfanız hakkında bilgi vermenizi sağlar. Bu meta kodunda bulunan content="..." kısmına sayfanızın tanımını yazmanız gerekmektedir.(SEO için büyük önem teşkil etmektedir.)
• <META name="keywords" content="..."> : Head kodları arasına yazılacak olan bu Meta kodundaki content="..." kısmına ise sayfanızı arama motorunda ararken kullanılan anahtar kelimeleri yazmanız gerekmektedir. (SEO için büyük önem teşkil etmektedir.)
• <META name="Author" content="..."> : Head kodları arasına yazılacak olan bu Meta kodunda ise content="..." kısmına sayfanızın sahibi olan kuruluş veya kişinin adı yazılmalıdır.
• <META name="generator" content="..."> : Head kodları arasına yazılacak olan bu Meta kodunda ise content="..." kısmına sayfanızı hazırladığınız html programının ismini yazmanız gerekmektedir.
• <H1></H1> , <H2></H2> , <H3></H3> , <H4></H4> , <H5></H5> , <H6></H6> : <H...> etiketleri sitenizin içinde kullanacağınız başlıklarınızı boyutlandırmak ve göz önüne çıkarmak için kullanacağınız etiketlerdir. Aralarındaki boyut farkını aşağıda verdiğim resimden inceleyebilirsiniz.(SEO için büyük önem teşkil etmektedir.)
• <BODY></BODY> : Bu iki kod ise Head kodlarından sonra gelen ve sayfanızın temelini oluşturan kodlardır. Sayfanızın şeklini belirleyecek olan tüm kod ve yazılar bu iki kodun arasına veya kod satırına yazılacaktır.
• <BODY BACKGROUND="..."> : Bu kod satırındaki tırnakların arasına sayfanızın arka fonunu oluşturacak resmin adresini göstermeniz gerekmektedir.
• <BODY BGCOLOR="..."> : Bu kod satırına ise sayfanızın arka plan rengini belirlemeniz gerekmektedir.
• <BODY TEXT="..."> : Bu kod satırına ise sayfanızda kullanacağınız yazının rengini belirlemeniz gerekmektedir.
• <BODY LINK="..."> : Bu kod satırına ise sayfanızda vermiş olduğunuz linklerin hangi renkle gösterileceğini belirtmeniz gerekmektedir.
• <BODY VLINK="..."> : Bu kod satırına ise daha önceden ziyaret edilmiş linklerin hangi renkle gösterileceğini belirtmeniz gerekmektedir.
• <BODY ALINK="..."> : Bu kod satırında ise bir linke tıklandığında o linkin renginin hangi renge dönüşmesi gerektiğini belirtmeniz gerekmektedir.
• <BODY BGSOUND="..."> : Bu kod satırı sayesinde sayfanızda, arka fonda müzik çalmasını sağlayabilirsiniz. Yapmanız gereken tek şey, tırnakların arasına müzik dosyasının adresini yazmak.
UYARI! Yukarıda BODY ile başlayan kodlar, aynı kod dizinine yazılmalıdırlar. (Örnek: <BODY BACKGROUND="..." TEXT="..." LINK="..."> )
• <FONT COLOR="..."></FONT> : Daha önce body kod satırı içerisinde belirttiğiniz renkten farklı bir renk kullanmak isterseniz bu kodu kullanmalısınız.
• <FONT SIZE="..."></FONT> : Yazı karakterlerinin büyüklük-küçüklük ayarını yapmanızı sağlar.
• <FONT FACE="..."></FONT> : Yazı tipinin(fontunun) belirlenmesine yaramaktadır.
UYARI! Yukarıda FONT ile başlayan kodlar, eğer birden fazla kullanılacaksa, aynı kod dizinine yazılmalıdırlar. (Örnek: <FONT SIZE="..." COLOR="..."> )
• <STRONG></STRONG> : Yazı şeklinin daha koyu olmasını sağlar.
• <I></I> : Yazı karakterinin eğri olmasını sağlar.
• <U></U> : Yazı karakterlerinin altına bir çizgi çeker.
• <HR> : Sayfada soldan sağa sürekli bir çizgi çeker.
• <BR> : Satır atlamaya yarar.
• <LI> : Sayfada noktayla başlayan bir liste oluşturmak için kullanılır. Listedeki her madde için birer kere kullanılması gerekmektedir.
• <P> : Yeni bir paragrafa başlamak için kullanın.
• <IMG SRC="..."> : Sayfanıza resim koymaya yarayan komuttur.
• <CENTER></CENTER> : Sayfanızdaki bir yazıyı ya da resmi ortalamak için bu kodu kullanmanız gerekmektedir.
• <TABLE> ... </TABLE> : Sayfanızda tablolar yaratmak için kullanmanız gereken koddur. İyi hazırlanmış bir tablo sayfanızı gerçekten güzel kılar.
• <TABLE BORDER="..."> : Sayfada kullanacağınız tablonun kenarlarındaki sınırların kalınlığını belirlemek için kullanılır.
• <TABLE CELLSPACING="..." CELLPADDING="..."> : Tablonun içinde kullanacağınız hücrelerin boyutunu ayarlamak için kullanmanız gereken kodlar.
• <TABLE WIDTH="..." HEIGHT="..."> : Tablonun boyutlarını belirlemek için kullanacağınız koddur.
UYARI! Yukarıdaki son 3 kod, TABLE kod dizinine art arda yazılmalıdır.
• <TR> : Tablonun içinde yeni bir satır oluşturmak için kullanılır. Table komut satırından sonra ilk kullanılacak ve tablo içinde her yeni satıra başlamak için kullanmanız gereken koddur.
• <TD> : Tabloda yeni bir hücre oluşturmanız için kullanacağınız koddur.
• <TD WIDTH="..." HEIGHT="..."> : Tablo içerisindeki hücrenin boyutunu belirlemek için kullanılması gereken koddur.
• <TD ALIGN="..." VALIGN="..."> : Tablo içerisindeki hücrenin, tablo içindeki yerini belirtmek için kullanılması gereken koddur.
UYARI! Yukarıdaki son 2 kod, TD kod dizinine art arda yazılmalıdır.
• <FRAMESET COLS="...%, ...%> veya <FRAMESET ROWS="...%, ...%"> ... </FRAMESET> İki ayrı sayfayı tek bir sayfada göstermeye yarayan koddur. İlk seçeneği seçerseniz iki sayfa tek bir sayfa içerisinde yan yana yer alır. İkinci seçenekte ise iki ayrı sayfa tek bir sayfa içerisinde alt alta yer alır. % işaretinden önceki noktalı yere, her iki sayfanın da tek sayfa içerisindeki yer kaplama yüzdeleri yazılmalıdır. FRAMESET kod satırı HEAD ile BODY kod satırları arasında yer alır.
• <FRAME SRC="..."> : Tek sayfa içerisinde göstermek istediğiniz her iki sayfayı da bu kod ile tek tek yazmalısınız.