🎓 HTML Nedir? Ne İşe Yarar? Test 1 - Ders Notu
Bu ders notu, "HTML Nedir? Ne İşe Yarar? Test 1" sınavında karşılaşacağınız temel HTML kavramlarını, yapısını ve kullanım alanlarını sade bir dille özetlemektedir. Amacımız, web sayfalarının iskeletini oluşturan bu dili kolayca anlamanıza yardımcı olmaktır.
📌 HTML Nedir?
HTML, web sayfalarını oluşturmak için kullanılan standart bir işaretleme dilidir. İnternet tarayıcılarının web içeriğini doğru bir şekilde görüntülemesini sağlar.
- HTML, "HyperText Markup Language" (Köprü Metni İşaretleme Dili) kelimelerinin baş harflerinden oluşur.
- Bir web sayfasının temel yapısını, yani metinleri, görselleri, bağlantıları ve diğer içerikleri nasıl düzenleneceğini tanımlar.
- Bir binanın iskeletine veya bir kitabın içindekiler tablosuna benzetilebilir; içeriğin nerede duracağını belirler.
💡 İpucu: HTML bir programlama dili DEĞİLDİR. Sadece içeriği işaretlemek ve yapılandırmak için kullanılır.
📝 Temel HTML Belge Yapısı
Her HTML belgesinin belirli bir temel yapısı vardır. Bu yapı, tarayıcıya sayfanın nasıl yorumlanması gerektiğini söyler ve içeriği düzenli bir şekilde barındırır.
- <!DOCTYPE html>: Belgenin HTML5 standardında olduğunu belirtir. Bu, tarayıcının sayfayı doğru modda işlemesi için çok önemlidir.
- <html>: Tüm HTML içeriğini kapsayan kök öğedir. Sayfanın dilini (örneğin,
lang="tr") burada belirtebilirsiniz.
- <head>: Sayfa hakkında meta bilgileri (görüntülenmeyen bilgiler) içerir. Örneğin, sayfa başlığı, karakter kodlaması, CSS dosyası bağlantıları gibi.
- <body>: Web sayfasının tarayıcıda görünen tüm içeriğini (metin, resim, bağlantı, video vb.) barındırır.
⚠️ Dikkat: <head> etiketi içindeki bilgiler tarayıcıda doğrudan görünmezken, <body> etiketi içindeki her şey kullanıcı tarafından görülebilir.
🏷️ HTML Etiketleri (Tags) ve Öğeleri (Elements)
HTML, içeriği yapılandırmak için etiketler (tags) kullanır. Bir açılış etiketi, içerik ve bir kapanış etiketi bir araya gelerek bir öğe (element) oluşturur.
- Başlık Etiketleri (<h1> - <h6>): Sayfadaki başlıkları ve alt başlıkları belirtmek için kullanılır. <h1> en önemli başlıkken, <h6> en az önemli başlığı temsil eder.
- Paragraf Etiketi (<p>): Metin paragraflarını oluşturmak için kullanılır.
- Bağlantı Etiketi (<a>): Bir sayfadan başka bir sayfaya veya aynı sayfanın farklı bir bölümüne köprü (link) oluşturur.
- Görsel Etiketi (<img>): Web sayfasına resim eklemek için kullanılır. Kapanış etiketi olmayan "tekil" (self-closing) bir etikettir.
- Liste Etiketleri (<ul>, <ol>, <li>): Sırasız (unordered - <ul>) veya sıralı (ordered - <ol>) listeler oluşturmak için kullanılır. Her liste öğesi <li> etiketi ile belirtilir.
💡 İpucu: Birçok HTML etiketi açılış (<etiket>) ve kapanış (</etiket>) etiketlerine sahipken, <img> veya <br> gibi bazı etiketler tekildir ve kapanış etiketine ihtiyaç duymaz.
⚙️ HTML Nitelikleri (Attributes)
Nitelikler, HTML öğelerine ek bilgi eklemek için kullanılır. Her zaman açılış etiketinin içinde yer alırlar ve "niteliğin_adı="değer"" şeklinde yazılırlar.
- href: Bağlantı (<a>) etiketinde, bağlantının gideceği URL'yi belirtir. Örn:
<a href="https://www.google.com">Google</a>
- src: Görsel (<img>) etiketinde, resmin dosya yolunu belirtir. Örn:
<img src="resim.jpg">
- alt: Görsel (<img>) etiketinde, resim yüklenemediğinde veya görme engelli kullanıcılar için resmin açıklamasını sunar.
- width ve height: Görselin genişliğini ve yüksekliğini belirler.
- class ve id: CSS ile stil vermek veya JavaScript ile öğelere erişmek için kullanılır.
⚠️ Dikkat: Nitelik değerleri her zaman çift tırnak (") içinde yazılmalıdır.
🎯 HTML'in Amacı ve Diğer Teknolojilerle İlişkisi
HTML, web'in temelini oluşturur ancak modern web siteleri sadece HTML ile yapılmaz. Genellikle diğer teknolojilerle birlikte kullanılır.
- Yapılandırma: HTML, web sayfasının iskeletini ve içeriğinin mantıksal yapısını oluşturur.
- CSS (Cascading Style Sheets): Web sayfasının görünümünü (renkler, fontlar, düzen vb.) stilize etmek için kullanılır. HTML'e "elbise giydirmek" gibi düşünebilirsiniz.
- JavaScript: Web sayfasına etkileşim (animasyonlar, form doğrulamaları, dinamik içerik vb.) katmak için kullanılır. HTML'e "beyin ve kas" eklemek gibidir.
💡 İpucu: HTML içeriği, CSS görünümü, JavaScript ise davranışı yönetir. Bu üçü modern web'in vazgeçilmezidir.
