En Temel HTML Etiketleri

1 Şubat 2024 3 mins to read
Share

Bu yazımızda HTML’e başlarken gerekli olan en temel 3 hatta gidiş yolunda faydalanacağımız 4 html etiketiyle birlikte 7 etiketin ne işe yaradığını ve nasıl kullanıldığını göreceğiz. Eğer kodlama alanında yeniyseniz ve henüz hiçbir bilgiye sahip değilseniz daha önce yazdığım HTML nedir ve ne işe yarar? makalemi okumak isteyebilirsiniz.

1. <!DOCTYPE html> ve <html> Etiketi

Her HTML dosyasının en başında <!DOCTYPE html> deklarasyonu bulunur. Bu, tarayıcıya dokümanın HTML5 kullanılarak yazıldığını söyler. Hemen ardından, <html> etiketi gelir. Bu etiket, tüm HTML kodunuzu sarmalar ve bir HTML dokümanının başlangıcı ve sonunu belirtir.

<!DOCTYPE html>
<html>
    <!-- Burada head ve body etiketleri yer alır -->
</html>

2. <head> Etiketi

<head> etiketi, genellikle görsel olmayan, sayfa hakkındaki bilgileri içerir. Bu bölümde sayfa başlığı, karakter seti, bağlantılı stil dosyaları (CSS) ve meta etiketleri gibi unsurlar yer alır. Örneğin, <title> etiketi bu bölümde bulunur ve web tarayıcısının sekme başlığını belirler.

<head>
    <meta charset="UTF-8">
    <title>Bu Sayfanın Başlığı</title>
    <!-- Diğer başlık öğeleri -->
</head>

3. <body> Etiketi

<body> etiketi, kullanıcıya gösterilen tüm içeriği içerir. Metinler, resimler, bağlantılar, listeler, tablolar ve daha fazlası bu bölümde yer alır. Kısacası, tarayıcıda görmek istediğiniz her şey <body> etiketinin içine yazılır.

<body>
    <h1>Bu bir başlık</h1>
    <p>Bu bir paragraf.</p>
    <!-- Diğer içerikler -->
</body>

Bir Arada Kullanımı

Bir HTML dokümanı, bu üç bölümün birleşimiyle oluşturulur. İşte temel bir HTML yapısı örneği:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Örnek Sayfa</title>
</head>
<body>
    <h1>Merhaba Dünya!</h1>
    <p>HTML öğrenmeye hoş geldiniz.</p>
</body>
</html>

Bu basit yapının üzerine inşa ederek, daha karmaşık ve işlevsel web sayfaları oluşturabilirsiniz. HTML öğrenirken bu temel yapıyı ve etiketleri anlamak, sonraki adımlar için sağlam bir temel oluşturacaktır.

Leave a comment

Your email address will not be published. Gerekli alanlar * ile işaretlenmişlerdir