HTML (HyperText Markup Language), web sayfaları oluşturmak için kullanılan bir işaretleme dilidir. HTML etiketleri, web sayfalarının yapısını ve içeriğini belirtmek için kullanılır.
Bir HTML etiketi genellikle açılış ve kapanış etiketi olmak üzere iki parçadan oluşur. Açılış etiketi, etiketin adını ve bazı özellikleri belirtirken, kapanış etiketi / adı da etiketin sonlandığını gösterir.
İşte bazı temel HTML etiketleri ve kullanımları:
<html>: Sayfanın başlangıcını belirtir.<head>: Sayfanın başlık bölümünü belirtir. Bu bölümde genellikle stil, meta verileri, JavaScript kodları vb. yer alır.<body>: Sayfanın ana içeriğini belirtir. Bu bölümde metinler, resimler, videolar, tablolar, form elemanları vb. yer alır.<h1>–<h6>: Başlık etiketleri.<h1>en büyük,<h6>en küçük başlığı belirtir.<p>: Paragraf etiketi. Metinleri paragraf halinde gruplamak için kullanılır.<img>: Resim etiketi. Sayfaya resim eklemek için kullanılır.<a>: Bağlantı etiketi. Sayfalar arası veya farklı sitelere bağlantı vermek için kullanılır.<ul>–<li>: Liste etiketleri.<ul>işaretli,<ol>sıralı listeleri belirtirken,<li>her listeleme öğesini belirtir.<table>–<tr>–<td>: Tablo etiketleri.<table>tablo yapısını,<tr>satırı,<td>hücreleri belirtir.
Bu sadece temel HTML etiketleridir ve birçok başka etiket vardır. Ayrıca, CSS (Cascading Style Sheets) kullanarak HTML öğelerinin görünümünü değiştirmek ve JavaScript kullanarak sayfada etkileşimli öğeler eklemek mümkündür.
Bu nu bir örnekle gösterelim.
<!DOCTYPE html>
<html>
<head>
<title>Örnek Sayfa</title>
<meta charset="UTF-8">
<meta name="description" content="Bu bir örnek sayfadır.">
<meta name="keywords" content="HTML, örnek, sayfa">
<meta name="author" content="Esitemiz">
<style>
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}
</style>
</head>
<body>
<h1>Hoş Geldiniz</h1>
<p>Bu bir <strong>örnek sayfa</strong>dır. Burada HTML ve CSS öğelerini kullanarak bir sayfa oluşturduk.</p>
<img src="https://picsum.photos/200" alt="Rastgele Resim">
<ul>
<li>Birinci liste öğesi</li>
<li>İkinci liste öğesi</li>
<li>Üçüncü liste öğesi</li>
</ul>
<a href="https://www.youtubekesfet.com/">Youtube Kesfet'e gitmek için tıklayın</a>
</body>
</html>Bu örnekte, <head> bölümünde sayfa başlığı, karakter kodlaması, açıklama, anahtar kelimeler ve yazar bilgileri meta etiketleri kullanılmıştır. Ayrıca, <style> etiketiyle sayfada bulunan öğelerin görünümü CSS kullanarak özelleştirilmiştir.
Ana içerik <body> bölümünde bulunur. Başlık için <h1> etiketi kullanılmış, metin için <p> etiketi kullanılmıştır. Resim için <img> etiketi kullanılmıştır. Liste için <ul> ve <li> etiketleri kullanılmıştır. Son olarak, <a> etiketiyle Google’a yönlendiren bir bağlantı eklenmiştir.
Bu sadece bir örnek ve daha karmaşık bir sayfa yapısı için daha fazla etiket kullanılabilir.
