HTML Etiketleri
Merhabalar bir önceki yazımda HTML’e genel anlamda bir giriş yapmıştık, bugün ki yazımda ise HTML’e daha yakından bakalım istedim. Eğer HTML hakkında fikriniz yoksa bir önceki yazıma giderek HTML hakkında bilgi edinebilirsiniz. Bir önceki yazıma gitmek için lütfen tıklayın.
Bugün HTML’deki etiketlere ve işlevlerine değiniyor olacağım. Keyifli okumalar :)
<!DOCTYPE html>
<html>
<head>
<title>Başlık</title>
</head>
<body>
<h1>MERHABA DÜNYA, MERHABA MEDIUM </h1>
</body>
</html>Bir önceki yazımda anlattığım üzere temel HTML yapımızın bu şekilde oluştuğundan bahsetmiştim, örneğimizde ise <h1> etiketine yer vermiştik. Şimdi ise örneğimizde ki <h1> etiketi gibi olan, diğer başlık etiketlerine göz atalım.
Peki, başlık atmayı öğrendik, yazımızı nasıl yazacağız derseniz bunun için de <p> etiketimizi kullanmamız gerekiyor.
<p> Bu bir paragraf yazısıdır.</p>Şuanda okumakta olduğunuz bu yazıdaki başlıkları ve yazıları, yazmak için hangi etiketleri kullanmanız gerektiğini öğrendiniz. Şimdi ise HTML’deki liste etiketlerine bakalım.
- Liste 1
- Liste 2
<ul>
<li>Liste 1</li>
<li>Liste 2</li>
</ul>Eğer noktalı bir liste hazırlamak isterseniz <ul> etiketi ve içerisine <li> etiketini kullanmanız gerekir.
- Liste 1
- Liste 2
<ol>
<li>Liste 1</li>
<li>Liste 2</li>
</ol>Eğer sıralı bir liste hazırlamak isterseniz <ol> etiketi ve içerisine <li> etiketini kullanmanız gerekir. Fark ettiğiniz üzere <li> etiketini her ikisinde de kullanıyoruz. Noktalı listeler için <ul> kullanırken sıralı listeler için <ol> etiketini kullandığımıza dikkat etmelisiniz. Ayrıca sıralı listeler de numerik listeler hazırlayabileceğimiz gibi romen rakamları veya harfli listeler yani a. b. şeklinde listelerde hazırlayabiliriz. Ancak bunu bu aşamada göstermiyorum, çünkü bundan önce attributes kavramını göstermem gerekecek. Bir sonraki yazımda attributes kavramından söz ediyor olacağım. Şimdi ise yazı biçimlerini, stillerini ve alıntı yapmayı gösteriyor olacağım.
Yukarıdaki kodun canlı olarak çıktısını aşağıdaki resimde görebilirsiniz. Burada ki <b> etiketi içerisine girdiğiniz metni kalın yapar, yine aynı şekilde <i> etiketini kullanmanız durumda ise yazının eğik bir biçimde geldiğini göreceksiniz. Bir yazının altını çizmek isterseniz ise <u> etiketini kullanıyor olacağız. Örneğin matematikte ki x kare ifadesini nasıl yapabilirim derseniz burada karşımıza <sup> etiketi çıkıyor yine aynı şekilde altına bir simge eklemek istediğiniz durumda da <sub> etiketinden yararlanıyoruz. <blockquote> etiketimizin işlevi ise uzun bir alıntı yapmak istediğimizde kullanırken, kısa alıntılar da <q> etiketini kullanıyoruz.
Bu yazımdaki göstermek istediğim son etiket ise bizlere HTML ile nasıl tablo oluşturabileceğimizi gösterecek.
<table>
<thead>
<tr>
<th>Sütun 1</th>
<th>Sütun 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Satır 1</td>
<td>Sütun 2</td>
</tr>
</tbody>
</table>
HTML de tabloları öğrendiğim gün bu şekilde gördüğümde bu nasıl tablo demiştim. Belki sizde şuan öyle diyor olabilirsiniz :) ama hiç endişe etmeyin unutmayın ki şuan sadece en temel ve en basit haliyle sizlere aktarmaya çalışıyorum, elbette ki ilerleyen aşamalarda farklı teknolojilerden de bahsederek çirkin görünen her şeyi istediğimiz gibi şekillendirebileceğimizi de görüyor olacağız.
Buradaki etiketlerden bahsetmem gerekirse öncelikle <table> etiketimiz ile başlıyoruz daha sonra sütunlarımızı belirtmek için <thead> etiketimizi ve içerisine tüm sütunumuzu tutacak <tr> etiketimizi oluşturuyoruz. Başlık etiketlerimizi <th> içerisinde belirtiyoruz. <tbody> etiketi ise <body> etiketimiz gibi verilerimizi, içeriklerimizin tutulduğu alanı temsil ediyor. <tr> ile bir satır oluşturuyor ve içerisine <td> etiketimizi oluşturuyoruz. Burada fark ettiğiniz üzere satır ve sütunlarımızı oluştururken <tr> etiketinden yararlandık. Bu etiketimizin görevi ise bize bir satır oluşturmak, basitçe bir resimde anlatmak gerekirse;
Yine aynı mantığı <tbody> içerisinde de düşünmeliyiz, her bir satırımızı <tr> içerisinde ki <td> olarak kodlamalı ve verilerimizi bu şekilde göstermeliyiz.
Basitçe HTML etiketlerine giriş yapmış olduk. Umarım yararlı olmuştur, bir sonraki yazımda görüşmek üzere…
