HTML Sözdizimi ve Kuralları
HTML Sözdizimi ve Kuralları, web geliştirme sürecinin temelini oluşturur ve web sayfalarının nasıl yapılandırılacağını ve görüntüleneceğini belirler. HTML’yi bir ev inşa etmek için kullanılan bir plan gibi düşünün: duvarlar ve odalar gibi yapıyı oluşturur, böylece her şey düzenli olur. HTML (Hipermetin İşaretleme Dili), içeriği düzenlemek için etiketler (Tags) kullanır ve kişisel web siteleri, bloglar, e-ticaret siteleri veya haber siteleri gibi platformlar için gereklidir. Örneğin, bir kişisel web sitesi projeleri sergilemek için HTML kullanırken, bir e-ticaret sitesi ürün listelerini yapılandırır. Doğru sözdizimi, tarayıcıların kodu doğru bir şekilde yorumlamasını sağlar, böylece erişilebilir ve işlevsel web siteleri oluşturulur. Kurallar olmadan, bir site kötü inşa edilmiş bir ev gibi çökebilir. Bu rehberde, HTML sözdiziminin temellerini, etiketler, nitelikler (Attributes) ve iç içe geçme (Nesting) dahil olmak üzere basit örneklerle öğreneceksiniz. Pratik uygulamaları, en iyi uygulamaları ve kaçınılması gereken yaygın hataları keşfedeceksiniz. Sonunda, herhangi bir temel web sitesi için yapılandırılmış HTML oluşturabilecek ve CSS ile JavaScript öğrenmeye hazır olacaksınız.
Temel Örnek
html<!-- Creates a simple webpage with a heading and paragraph -->
<!DOCTYPE html>
<html>
<head>
<title>İlk Sayfam</title>
</head>
<body>
<h1>Hoş Geldiniz</h1>
<p>Bu benim ilk web sayfam.</p>
</body>
</html>Yukarıdaki temel örnek, bir HTML belgesinin ana yapısını gösterir. Şimdi bunu adım adım açıklayalım. <!<a href="/tr/html/html-doctype/" class="smart-link">DOCTYPE</a> html> bildirimi, tarayıcıya bunun bir HTML5 belgesi olduğunu belirtir ve tutarlı bir görüntüleme sağlar. <html> etiketi, kök element (Root Element) olarak, bir evin temeli gibi tüm diğer etiketleri içerir. İçinde, <head> bölümü meta veriler (Metadata) içerir; örneğin, <title> etiketi, tarayıcı sekmesinde görünen sayfa başlığını tanımlar. <body> etiketi, görünür içeriği barındırır, örneğin <h1> başlığı ("Hoş Geldiniz") ve <p> paragrafı ("Bu benim ilk web sayfam"). Her etiket, bir açılış etiketi (örn. <p>) ile başlar ve bir kapanış etiketi (örn. </p>) ile biter, içeriği bir kap gibi sarar. Bu yapı, tarayıcının sayfayı doğru anlaması ve görüntülemesi için kritik önemdedir. Örneğin, bir blogda <h1> bir makale başlığı, <p> ise içeriği olabilir. Yeni başlayanlar kapanış etiketlerinin neden gerekli olduğunu sorabilir: Bunlar olmadan, tarayıcı yapıyı yanlış yorumlayabilir ve görüntüleme hatalarına yol açabilir. Bu basit kod, haber sitesi gibi herhangi bir sitede metin içeriğini net bir şekilde sunmak için kullanılabilir.
Pratik Örnek
html<!-- A section of a personal website showcasing an about section -->
<!DOCTYPE html>
<html>
<head>
<title>Kişisel Web Sitem</title>
</head>
<body>
<header>
<h1>Hakkımda</h1>
</header>
<section>
<article>
<h2>Özgeçmişim</h2>
<p>HTML ve CSS kullanarak basit web siteleri tasarlıyorum.</p>
<a href="contact.html">İletişime Geç</a>
</article>
</section>
</body>
</html>HTML Sözdizimi ve Kuralları’nda ustalaşmak için en iyi uygulamaları takip etmek ve yaygın hatalardan kaçınmak çok önemlidir. İlk olarak, anlamsal HTML (Semantic HTML) kullanın; <header>, <section> ve <article> gibi etiketler içeriğin rolünü netleştirir, erişilebilirlik (Accessibility) ve arama motoru optimizasyonu (SEO) açısından fayda sağlar. Örneğin, haber siteleri makaleleri düzenlemek için anlamsal etiketlerden yararlanır. İkincisi, doğru iç içe geçme (Proper Nesting) sağlayın: Etiketler açıldıkları sıranın tersine kapanmalıdır, örneğin <p><strong>Metin</strong></p>, düzenli istiflenmiş kutular gibi. Üçüncü olarak, erişilebilirliği artırmak için gerekli nitelikleri, örneğin görseller için alt niteliğini ekleyin; bu, e-ticaret sitelerindeki ürün görselleri için kritiktir. Yaygın hatalar arasında, her şey için <div> gibi anlamsız etiketler kullanmak yer alır; bu, tarayıcıları ve yardımcı teknolojileri karıştırır. Kapanış etiketlerini unutmak, bir blog yazısının yanlış hizalanmasına neden olabilir. Yanlış iç içe geçme, örneğin <p><strong>Metin</p></strong>, sayfa yapısını bozar. Hata ayıklamak için tarayıcı geliştirici araçlarını (Browser Developer Tools) ve W3C Markup Validator gibi doğrulayıcıları kullanın. Temiz, girintili kod yazın, özellikle blog gibi ortak projelerde okunabilirliği artırır. Bu uygulamalar, HTML kodunuzu sağlam ve kullanıcı dostu yapar.
📊 Hızlı Referans
| Etiket | Açıklama | Örnek |
|---|---|---|
| <!DOCTYPE html> | HTML5 belge türünü bildirir | <!DOCTYPE html> |
| <html> | Sayfanın kök elementi | <html>...</html> |
| <head> | Başlık gibi meta verileri içerir | <head><title>Sayfam</title></head> |
| <body> | Sayfanın görünür içeriğini içerir | <body><h1>Merhaba</h1></body> |
| <h1> - <h6> | Başlıklar için etiketler | <h1>Ana Başlık</h1> |
| <p> | Metin için paragraf etiketi | <p>Bu bir metin.</p> |
Bu rehber, HTML Sözdizimi ve Kuralları’nın temellerini kapsadı ve etiketler, nitelikler ve doğru iç içe geçme ile web sayfalarını nasıl yapılandıracağınızı öğretti. HTML’nin, kişisel web siteleri veya e-ticaret platformları gibi siteler için içeriği düzenleyen bir ev planı gibi olduğunu öğrendiniz. Temel örnek basit bir sayfa gösterirken, pratik örnek bir kişisel web sitesinin hakkında bölümünü sundu ve gerçek projelere uygulanabilir. Anlamsal HTML ve doğru iç içe geçme gibi en iyi uygulamalar erişilebilirlik ve netlik sağlar; kapanış etiketlerini unutmak gibi hatalardan kaçınmak ise görüntüleme sorunlarını önler. Bu beceriler web geliştirmenin temelidir. Sonraki adım, HTML’nize stil eklemek için CSS öğrenmek; bu, bir evi dekore etmek gibi renk ve düzen katar. JavaScript, düğmeler veya formlar gibi etkileşimler ekleyerek haber sitelerini geliştirir. Öğrenmeye devam etmek için küçük sayfalar oluşturun, çevrimiçi doğrulayıcılar kullanın ve MDN Web Docs gibi kaynakları keşfedin. Farklı etiketlerle deney yaparak becerilerinizi güçlendirin ve daha karmaşık web projelerine hazırlanın.
🧠 Bilginizi Test Edin
Bilginizi Test Edin
Bu konudaki anlayışınızı pratik sorularla test edin.
📝 Talimatlar
- Her soruyu dikkatle okuyun
- Her soru için en iyi cevabı seçin
- Quiz'i istediğiniz kadar tekrar alabilirsiniz
- İlerlemeniz üstte gösterilecek