Türküm, doğruyum, yapışkanım!

Temel HTML Tags (Etiketleri) - 1

Html'e yeni giriş yapan arkadaşlar için basitçe tag (etiket)leri tanıtalım ne işe yaradıklarını belirtelim...

Tag'lerin sıralamasını w3schools.com'daki sıraya göre götüreceğim. Önce HTML'in tanımını yaparak başlayalım:

Açılımı İngilizce Hyper Text Markup Language olan ve bu kelimelerin baş harflerinden oluşmuş olan HTML, bünyesinde küçük işaretleme etiketleri bulunduran, bu etiketler sayesinde browser (tarayıcı)a sayfayı nasıl göstermesi gerektiğini bildiren, uzantısı mutlaka htm veya html olan basit bir text editöründe hazırlanabilen dosyalardır.

Bu tanımın ardından en basit şekilde oluşturulmuş bir html sayfasının görüntüsünü sizlerle paylaşalım;

<html>
<head>
<title>Title of page</title>
</head>
<body>
Bu benim ilk HTML sayfam, yaşasın çalsın davulla zurna.
</body>
</html>

Kodları açıklayacak olursak Temel olarak bir sayfa 3 bölümden oluşmaktadır en dışta <html> onun içinde <head> ve <body> bölümleri vardır.

<head> in içinde sayfanın başlığı <title> ve ileride göreceğimiz <script> , <style> , <meta> gibi etiketler bulunmakta bu bölüme sayfanın kimliği diyebiliriz. Bu kısım browserda gözükmez.

<body> kısmı sayfanın içeriğinin yani yazı, fotoğraf, resim, form ve menülerin bulunduğu bölümdür. Buraya koyduğunuz tüm elemanlar browserda görüntülenecektir.

Şimdiye kadar verilen bilgilerin pekişmesi için hemen bir notepad açın buradaki kodları kopyalayıp notepade yapıştırın ve Kaydet (Save) seçeneğinden dosyayı index.html ismini vererek kaydedin (Aslında bu size kalmış isterseniz dosyaya kendi isminizi de verebilirsiniz, "Ör: serkan.html"). Notepadi kapatın ve dosyanın browserınızın ikonunu aldığını göreceksiniz (IE, Firefox, vs.). Bu dosyayı çalıştırdığınızda internet sayfanız açılacak ve sayfa üzerinde "Bu benim ilk HTML sayfam, yaşasın çalsın davulla zurna." yazısı çıkacaktır. Artık ilk HTML deneyimizi gerçekleştirmiş oldunuz.

Şimdi sırayla TAG (Etiket)leri öğrenelim:

<html> Html bizim ana etiketimizdir ve bize HTML kodlarının başladığını belirtir. <html> tag i kodların en sonunda </html> şeklinde kapatılır, bu HTML kodlarının sona erdiğini belirtir ve mutlaka kapatılmalıdır.

<head> Head etiketi sayfa başlığı bilgilerini içerir. Bu tag </head> şeklinde kapatılır. Bu bilgiler browserda görüntülenmemektedir.

<title> Title sayfanın başlığıdır. Bu tag in içine yazılanlar browserın en üstünde görüntülenir. Bu tag </title> şeklinde kapatılır.

<body> Body içinde geçen herşey browserda görüntülenecektir. Bu tag </body> şeklinde </html> den hemen önce kapatılır. Tag lerin kapatılması temiz ve anlaşılır bir kodlama açısından gereklidir, bu duruma mutlaka dikkat etmelisiniz özellikle dreamweaver gibi bir editörde değil de notepad gibi basit bir editör kullanıyorsanız.

Başlıklar

<h1> <h2> <h3> <h4> <h5> <h6> Başlıklar 6 adet ile sınırlıdır. Bu tag leri metinlerimiz içinde bulunan başlıklar için kullanmaktayız. Sayfa içindeki başlıkların 6 ile sınırlanması gibi bir durum söz konusu değildir; burada boyut bakımından bir sıralama gerçekleşmiştir, <h1> büyük puntolu <h6> küçük puntolu başlıklarda kullanılabilir, bunları gazetelerdeki başlık boyutlarıyla ilişkilendirebiliriz. Sayfa içindeki kullanım yeri ve sayısı tasarımcının insiyatifindedir. Başlık etiketleri </h1> </h2> </h3> </h4> </h5> </h6> şeklinde kapatılmalıdır.

Paragraf

<p> P etiketi paragrafı belirtir. Herhangi bir metni bu tag sayesinde çeşitli paragraflara bölebiliriz. Sayfa içinde bu tag in kullanım sayısı ile ilgili bir sınırlama yoktur. Örnek:

<p>Burası birinci paragrafımız. Burada hikayemizin giriş bölümü mevcuttur.</p>
<p>Burası ikinci paragrafımız. Burada hikayemizin gelişme bölümü mevcuttur.</p>
<p>Burası üçüncü paragrafımız. Burada hikayemizin sonuç bölümü mevcuttur.</p>

Sayfamızı ön izleme yaptığımızda şu şekilde gözükecektir:

Burası birinci paragrafımız. Burada hikayemizin giriş bölümü mevcuttur.

Burası ikinci paragrafımız. Burada hikayemizin gelişme bölümü mevcuttur.

Burası üçüncü paragrafımız. Burada hikayemizin sonuç bölümü mevcuttur.

Yukarıda görüldüğü üzere metnimiz üç ayrı paragraf şeklinde sayfamızda gözükecektir. Açtığımız <p> tag ini </p> şeklinde kapatmalıyız. Eğer açtığımız tag i kapatmazsak browser (tarayıcı) hatalı göstermeyecek fakat biz hatalı bir işlem yapmış olacağız; bu yüzden açtığımız her tag i kapatmalıyız.

Satır kesme

<br> Satır kesme (line break) tag imiz <br> dir. Bu tag i belirli bir yerden sonra yeni bir paragraf açmadan satırımızı bölmek, yani kabaca alt satıra geçmek için kullanırız. Örnek:

<p>Bu satırı html <br> kelimesinden sonra bölerek alt satıra geçeceğiz.</p>

Sayfamızı ön izleme yaptığımızda şu şekilde gözükecektir:

Bu satırı html
kelimesinden sonra bölerek alt satıra geçeceğiz.

Görüldüğü gibi html kelimesinden sonra alt satıra geçilmiştir.

Yatay şerit (horizontal rule)

<hr> Paragraflarımızı yatay bir şerit ile ayırma işlemini <hr> tag i ile yapmaktayız. Örnek:

Ben html öğreniyorum. <hr> Ben de html öğreniyorum.

Sayfamızı ön izleme yaptığımızda şu şekilde gözükecektir:

Ben html öğreniyorum.

Ben de html öğreniyorum.

Görüldüğü gibi iki paragraf arasında yatay bir şerit çizilmiştir.

HTML kodları arasına yorum yazma

Bir diğer temel html tag imiz, html kodları arasına çeşitli hatırlatmalar, belirlemeler, karışıklıkları önlemek veya daha sonradan düzenlemek istediğimiz kodlara kolay ulaşmamızı sağlamak için yazdığımız  tag idir. Kullanımı:

<!-- Ürün listesi -->
<ul>
<li>Kitap</li>
<li>Kalem</li>
<li>Silgi</li>
</ul>
<!-- Ürün listesi bitti -->

Örnek yeterince anlaşılır olmuştur umarım, yorumlar browserda gözükmemektedir.

HTML Taglerinin ilk bölümü bu kadar 2. derste görüşürüz.

Katrasa.com üzerinde bulunan tüm yazılı ve görsel malzemenin telif hakları belirtilen isimlere aittir. İzinsiz kopyalamak, kullanmak, yayınlamak tehlikeli ve yasaktır. Hırsızların kalbi itinayla kırılır, eline verilir.

Eklenmesini istediğiniz içeriğiniz mi var? Makalelerde veya içerikte yazım hatası mı var? Uyarın beni! Yani bir mail atın.

İçerikten rahatsız mı oldun? O zaman sana Bay baay .