Html-Introduction
HTML veya Hipermetin İşaretleme Dili (HyperText Markup Language), internetdeki tüm web sayfalarının temelini oluşturan dildir. HTML'i bir evin çerçevesi gibi düşünebilirsiniz - duvarların, kapıların ve pencerelerin nerede olacağını belirler, ancak renklerini veya dekorasyonunu değil. Tıpkı bir mektup yazarken başlık, paragraflar ve imza kullanarak içeriği düzenlediğimiz gibi, HTML de web içeriğini yapılandırılmış öğeler kullanarak organize eder. Kişisel web sitelerinde HTML, projeler, biyografi ve iletişim bilgileri bölümlerini tanımlar. Bloglarda yazılar, yorumlar ve navigasyonu yapılandırır. E-ticaret sitelerinde ürün katalogları, açıklamalar ve satın alma butonlarını organize eder. Haber sitelerinde manşetler, makaleler ve kategorileri hiyerarşik olarak düzenler. Bu eğitimde HTML'in temellerini öğrenecek, bir belgenin temel yapısından başlayacaksınız. Başlıklar, paragraflar ve bağlantılar gibi temel öğeleri nasıl oluşturacağınızı keşfedeceksiniz. Anlamsal işaretleme ve erişilebilirliğin önemini anlayacaksınız. Eğitimin sonunda, işlevsel ve iyi yapılandırılmış web sayfaları oluşturmak için sağlam bilgilere sahip olacak, CSS ile stil ekleme ve JavaScript ile etkileşim sağlama konularına hazır olacaksınız.
Basic Html-Introduction Example
html<!DOCTYPE html>
<html>
<head>
<title>İlk Web Sayfam</title>
</head>
<body>
<h1>Web siteme hoş geldiniz</h1>
<p>Bu benim ilk HTML sayfam.</p>
</body>
</html>Bu temel kodun her parçasını analiz edelim. <!<a href="/tr/html/html-doctype/" class="smart-link">DOCTYPE</a> html> bildirimi tarayıcıya bunun bir HTML5 belgesi olduğunu söyler - tıpkı posta türünü belirten bir pul gibi. <html> etiketi tüm içeriği saran kök kapsayıcıdır ve bir mektubun zarfı gibi işlev görür. İçinde iki ana bölüm bulunur: <head> ve <body>. <head> bölümü kullanıcının görmediği meta verileri içerir - bir mektubun arka yüzündeki bilgiler gibi. Bu bölümde <title> etiketi bulunur ve tarayıcının sekmesinde görünür. <body> bölümü tüm görünür içeriği içerir - mektubun ana metni gibi. <h1> etiketi ana başlığı oluşturur - sayfanın en önemli başlığı olup SEO ve görsel hiyerarşi için kullanılır. <p> etiketi sıradan bir metin paragrafını tanımlar. Her açılış etiketinin / işaretiyle kapanış etiketi olduğuna dikkat edin. Bu hiyerarşik yapı çok önemlidir: HTML bir soy ağacı gibidir, her öğenin ebeveynleri, çocukları ve kardeşleri vardır. Tarayıcılar bu kodu yukarıdan aşağıya okur, her etiketi yorumlar ve içeriği görsel olarak işler. Bu temel yapı, basit kişisel blogdan karmaşık e-ticaret platformlarına kadar her türlü site için temel görevi görür.
Practical Html-Introduction Example
html<!DOCTYPE html>
<html lang="tr">
<head>
<title>Dijital Portföyüm - Ayşe Yılmaz</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Ayşe Yılmaz - Web Geliştiricisi</h1>
<h2>Hakkımda</h2>
<p><strong>Frontend geliştirme</strong> konusunda 3 yıllık deneyime sahip uzmanım.</p>
<h2>Projelerim</h2>
<p>En son çalışmamı inceleyin: <a href="proje.html">Online Mağaza</a></p>
<p><em>İletişim:</em> [email protected]</p>
</body>
</html>HTML'de en iyi uygulamaları takip etmek, profesyonel ve erişilebilir siteler oluşturmak için kritik öneme sahiptir. İlk olarak, her zaman anlamsal HTML kullanın - etiketleri görsel görünüme değil, içeriğin anlamına göre seçin. Ana başlık için <h1>, alt başlıklar için <h2> ve paragraflar için <p> kullanın. İkinci olarak, <html> etiketine her zaman lang özniteliği ekleyerek ve resimler için alt özniteliği kullanarak erişilebilirliği sağlayın. Üçüncü olarak, tutarlı girintileme ve öğelerin mantıklı organizasyonu ile temiz yapı koruyun. Dördüncü olarak, etiketlerinizi her zaman kapatın ve özniteliklerde tırnak işareti kullanın. En yaygın hatalar şunlardır: uygun anlamsal öğeler yerine her şey için <div> kullanmak, charset ve lang gibi temel öznitelikleri unutmak, <span> içine <p> koymak gibi yanlış iç içe geçirme yapmak ve etiketleri kapatmadan açık bırakmak. Hata ayıklama için tarayıcının geliştirici araçlarını (F12) kullanarak öğeleri inceleyin ve sorunları tespit edin. HTML'nizi W3C Validator gibi çevrimiçi araçlarla doğrulayın. Her zaman farklı tarayıcılar ve cihazlarda test yapın. Unutmayın: iyi yapılandırılmış HTML gelecekteki bakımı kolaylaştırır ve SEO'yu doğal olarak iyileştirir.
📊 Quick Html-Introduction Reference
| Öğe | Açıklama | Örnek |
|---|---|---|
<h1> - <h6> |
Hiyerarşik başlıklar (en önemliden en az önemliye) | <h1>Ana Başlık</h1> |
<p> |
Metin paragrafı | <p>Bu bir paragraftır.</p> |
<a> |
Başka sayfaya veya bölüme bağlantı | <a href="hakkinda.html">Hakkında</a> |
<strong> |
Güçlü vurgulanmış metin | <strong>Çok önemli</strong> |
<em> |
Vurgulanmış metin | <em>Vurgulanan metin</em> |
<img> |
Resim gösterme | <img src="foto.jpg" alt="Açıklama"> |
Bu eğitimde HTML'in temellerini öğrendiniz ve bu işaretleme dilinin tüm web sayfalarının omurgasını nasıl oluşturduğunu anladınız. Temel kavramlar arasında HTML belgelerinin temel yapısı, anlamsal hiyerarşinin önemi ve erişilebilirlik en iyi uygulamaları yer alır. HTML, web geliştirme yolculuğunuzda sadece ilk adımdır - tıpkı bir evi dekore etmeden önce temellerini atmak gibi. Bir sonraki doğal adım, sayfalarınızı stilize etmek ve güzelleştirmek, renkler, düzenler ve animasyonlar eklemek için CSS öğrenmektir. Daha sonra JavaScript, projelerinize etkileşim ve dinamik işlevsellik getirecektir. Öğrenmeye devam etmek için farklı içerik türleriyle basit sayfalar oluşturarak pratik yapın. Listeler (<ul>, <ol>), tablolar (<table>) ve formlar (<form>) gibi öğeleri keşfedin. <header>, <nav>, <main> ve <footer> gibi öğelerle anlamsal HTML'i inceleyin. Pratik projeler oluşturun: kişisel portföy sayfası, basit blog veya açılış sayfası. Programlamanın pratik yaparak öğrenildiğini unutmayın - yazılan her kod satırı bilginizi ve güveninizi pekiştirir.
🧠 Bilginizi Test Edin
Test Your Html-Introduction Knowledge
Challenge yourself with this interactive quiz and see how well you understand the topic
📝 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