Bilgisayar Sistemleri ve Dijital Teknolojiler

HTML Dersi

Bu derste ne öğreneceğiz?

Bu derste HTML (Hypertext Markup Language) nedir, nasıl kullanılır ve temel yapısı hakkında bilgi edineceğiz. HTML, web sayfalarının oluşturulmasında kullanılan bir işaretleme dilidir. Öğreneceğimiz konular arasında HTML etiketleri, yapısı, sayfa oluşturma ve örnek uygulamalar yer alacak.

Temel kavramlar

HTML, web sayfalarının iskeletini oluşturan bir dildir. Temel kavramlar şunlardır:

• Etiketler: HTML'de içerik oluşturmak için kullanılan işaretleme elemanlarıdır. Örneğin, <p> etiketi bir paragrafı belirtir.
• Öznitelikler: Etiketlere ek bilgi eklemek için kullanılır. Örneğin, <a href="link"> etiketi, bir bağlantının hedefini belirtir.
• HTML Belgesi: Bir web sayfasının tüm içeriğini barındıran dosyadır. Genellikle .html uzantısına sahiptir.

Ayrıntılı anlatım

HTML, etiketler ile yapılandırılmıştır. Her etiket, açılış ve kapanış şeklinde kullanılır. Örneğin:

<html>
    <head>
        <title>Sayfa Başlığı</title>
    </head>
    <body>
        <p>Merhaba Dünya!</p>
    </body>
</html>

Yukarıdaki örnekte, <html> etiketi, HTML belgesinin başlangıcını belirtir. <head> etiketi, sayfanın başlık ve meta bilgilerini içerir. <body> etiketi ise sayfanın görünür içeriğini barındırır.

Temel HTML Etiketleri

HTML'de sık kullanılan bazı etiketler şunlardır:

• <h1> - <h6>: Başlık etiketleri, sayfanın başlıklarını oluşturur.
• <p>: Paragraf oluşturur.
• <a>: Bağlantı oluşturur.
• <img>: Resim ekler.
• <ul> ve <ol>: Sırasız ve sıralı liste oluşturur.

Çözümlü örnekler

Şimdi birkaç örnek üzerinden gidelim:

Örnek 1: Basit bir HTML sayfası oluşturma

<html>
    <head>
        <title>Benim İlk Sayfam</title>
    </head>
    <body>
        <h1>Hoşgeldiniz!</h1>
        <p>Bu benim ilk HTML sayfam.</p>
    </body>
</html>

Örnek 2: Bağlantı ve resim ekleme

<html>
    <head>
        <title>Resim ve Bağlantı</title>
    </head>
    <body>
        <p>Bu bir <a href="https://www.example.com">bağlantıdır</a>.</p>
        <img src="resim.jpg" alt="Açıklayıcı Metin">
    </body>
</html>

Sık yapılan hatalar

HTML yazarken dikkat edilmesi gereken bazı yaygın hatalar şunlardır:

• Etiketlerin kapanmaması: Her açılış etiketinin bir kapanış etiketi olmalıdır.
• Yanlış etiket kullanımı: Örneğin, <p> etiketi içinde başka bir <p> etiketi kullanmak yanlıştır.
• Özniteliklerin yanlış yazılması: Özniteliklerin doğru biçimde yazılması önemlidir.

Uygulama

Şimdi kendi HTML sayfanızı oluşturmayı deneyin. Aşağıdaki adımları takip edin:

1. Bir metin editörü açın (örneğin Notepad veya Visual Studio Code).
2. Aşağıdaki kodu yazın:

<html>
    <head>
        <title>Kendi Sayfan</title>
    </head>
    <body>
        <h1>Merhaba!</h1>
        <p>Bu benim kişisel sayfam.</p>
    </body>
</html>

3. Dosyayı kendi_sayfa.html olarak kaydedin.
4. Tarayıcınızda açın ve sonucu görün.

Mini test

Aşağıdaki soruları cevaplayın:

1. HTML nedir?
2. Bir HTML belgesinin başlangıç etiketi hangisidir?
3. Hangi etiket bir bağlantı oluşturur?
4. Resim eklemek için hangi etiketi kullanırız?
5. Bir HTML sayfasında başlık etiketleri hangi aralıkta kullanılır?

Cevap anahtarı

1. HTML, web sayfalarının oluşturulmasında kullanılan bir işaretleme dilidir.
2. HTML belgesinin başlangıç etiketi <html>dir.
3. Bağlantı oluşturmak için <a> etiketi kullanılır.
4. Resim eklemek için <img> etiketi kullanılır.
5. Başlık etiketleri <h1> ile <h6> arasında kullanılır.

Özet

Bu derste HTML'nin temellerini öğrendik. HTML etiketlerinin nasıl kullanıldığını, basit bir HTML sayfası oluşturmayı ve sık yapılan hataları inceledik. HTML, web sayfalarının yapı taşlarını oluşturur ve doğru kullanıldığında etkili bir şekilde bilgi sunmamıza yardımcı olur.