HTML taglerine geçmeden önce HTML Syntaxı ile ilgili biraz bilgi vermek istiyorum.Html’de büyük-küçük harf duyarlılığı yoktur.HTML elemanları bir başlama tagi ile başlar ve bir bitiş ya da kapanış tagi denile tag ile sonlandırılır.Tanımlanan elemanın içeriği bu iki başlama ve bitiş tagının arasında bulunur.Çoğu tagler başlangıç ve bitiş tagları halinde kullanılırken bazı tagler sadece başlangıç tagleri ile tanımlanır.Taglerin özellikleri vardır ve elemanları istediğimiz şekilde dizayn etmemizi sağlar.Eleman düzenlemesini Style tagının yanı sıra Css ile daha da profesyonelce görünümler elde edebiliriz.Şimdi taglere geçelim..
Bir HTML dokumaninda olmasi gerekli olan temel taglerimiz vardir.Bunlar şu şekildedir:
<!DOCTYPE html>
<html>
<head>
<title>Sayfanın Başlığı</title>
</head>
<body>
Sayfa içerigi
</body>
</html>
<!DOCTYPE> websayfamızın browserda düzgün bir biçimde gösterilmesini sağlayan tagdir.İlk satırda yazılması gerekmektedir.Html5 ten önce daha karmaşık olan bu tag HTML5 ile en sade haline getirilip bu ifadeyle yazımı yeterli hale getirilmiştir.
<h1,h2,h3,h4,h5,h6> :Bu tagler ile text boyutunu düzenleyebiliriz.
<p></p>:Sayfamıza paragraf eklememizi sağlayan taglerdir.
HTML’de kullandığımız elemanlara link vermemizi sağlayan tagler sayesinde yönlendirmeleri de sağlayabiliriz.
<link> tagleri dokuman ile yonlendirilecek yeni dokuman arasındaki ilişkilendirmemizi sağlar.
<a href=”http://www.seydialkan.com/“>Visit my blog</a>:Bu tanımlama ile texte link vermiş oluruz.<a> tagi arasına yazılan texte tıklandığında href ile belirtilen sayfaya yönlendirme yapılır.
<a href=”http://www.seydialkan.com/“><img src=”URL” alt=”Alternate Text”></a>:Burada bir resime url atamış oluyoruz.
<a href=”mailto:info@seydialkan.com“>Send e-mail</a>:Bu şekilde bir linklendirme ile belirtilen mail adresine yönlendiriliriz.
<link rel=”stylesheet” type=”text/css” href=”style.css”>:Bu ,fade ise yukarıda da kısaca bahsettiğim css dokumanında yazdığımız kodları sayfada kullanmamızı sağlayan ifadedir.
<br> :Bir text’i sonraki satırda başlatan tagdir.
<!– … –> : Bu tag arasına aldığımız ifadeler yorum olup sayfada işlevsizleşecektir..
<style> :Bu özellik html dokumanını bir duvara benzetirsek o duvarın çimentosu gibidir 😀 Sayfayı düzenlememizi sağlayan özelliktir.Bir sonraki aşaması CSS ile HTML Dokumanını çok karıştırmadan tek bir yerden düzenlemektir.
<class>:Bir eleman için bir veya birden fazla sınıf tanımlanabilir.(css’te bize birçok kolaylık sağlayacaktır.)
<id> :Her bir elementi tek bir id ile özelleştirebiliriz.
<script>:HTML dokumanımızda bir script kullanmak için bu tag ile yonlendirme yaparız.
<meta>:Bu tag sayfada herhangi bir işlev gerçekleştirmez.Arkaplanda sayfanın browserda çalışmasıyla ilgili detayları düzenleten tagdır.Arama motorlarına sayfa hakkında ihtiyaç duydukları bilgileri sağlar.
HTML’de Listeleme Tagleri:
<ol> Listelemeyi (1,2,3 ..) şeklinde sıralı bir biçimde yapar.
<ul> Listelemeyi sıralama yapmadan gerçekleştirir.Liste elemanlarının başına nokta türlerini getirir.
<li> Listelenecek elemanları listeler.
<dl> Listemizin başında herhangi bişey olmasını istemediğimiz durumlarda kullanırız.
<dt> Listemizin başında boşluk bırakmadan satır başından yazdırır.
<dd> Listeyi alt kategoriler şeklinde içeriden başlatır.
HTML’de Table ve div’ler
<table> Tablo oluşturmamızı sağlayan tag
<th> Tablodaki hücreye başlık ekleme tagıdır.
<tr> Tabloda bir satır eklememizi sağlayan tagdir.
<td> Tabloya bir sütün ekler.
<div> Dökümanı bölmelere ayırır.Böylelilkle bölmeler üzerinde daha kolay düzenlemeler yapabiliriz.
<span> Verilerin gösterilmesi için bir katman sağlar.
HTML Form Oluşturma Tagleri:
<form> Kullanıcı girişine izin verecek bir form oluşturur.
<input> İnput girişini sağlar.
<textarea>Multiline text alanı oluşturur.
<label> Bir etiket oluşturur
<fieldset> Formdaki ilişkili elemanları gruplandırır.
<select> Seçim yapabileceğimiz bir drop-down listesi oluşturmamızı sağlar.
<option> Drop-down listesindeki elemanları oluşturmamızı sağlar.
<button> Buton oluturan tag’dir.
Çeşitli input tipleri vardır.Bunlar:
<input type=”text” name=”email” size=”40″ maxlength=”50″>
<input type=”password”>
<input type=”checkbox” checked=”checked”>
<input type=”radio” checked=”checked”>
<input type=”submit” value=”Send”>
<input type=”reset”>
<input type=”hidden”>
<textarea name=”comment” rows=”60″ cols=”20″></textarea>
<iframe> Frame kullanabileceğimiz bir alan oluşturur.