Bu sayfada · 7 başlık
Öğren · Dene · Üret
HTML: çalışma alanı ve ilk kullanım
Kurulum gerektirmeden editör ve tarayıcıyla başla; örnek kodu değiştirerek öğren.
HTML Geliştirme Ortamı Hakkında Bilmen Gereken 5 Temel Soru
Web sayfalarının içerik ve iskeletini oluşturmak, semantik etiketlerle arama motorlarına ve tarayıcılara sayfa mimarisini anlatmak için kullanılır.
Web sayfaları, erişilebilir formlar, medya oynatıcıları, SEO uyumlu içerik blokları oluşturulur.
Tüm internet sayfalarında ve web tarayıcılarında kullanılır.
VS Code ve herhangi bir web tarayıcısı (Chrome, Edge vb.); ek bir sunucuya ihtiyaç duymadan yerel dosya olarak çalışır.
Web geliştirmenin 1 numaralı adımıdır; tüm web dünyası HTML çatısı üzerinde yükselir.
Ne işe yarar?
HTML, başlık, paragraf, bağlantı, görsel ve formlarla web belgesinin yapısını ve anlamını kurar. Bir işaretleme dilidir.
Kurulum yerine çalışma alanını hazırla
HTML ve CSS indirip kurulan programlar değildir. Bir kod editörü ve güncel tarayıcı yeterlidir. VS Code kullanabilir veya aşağıdaki örneği burada deneyebilirsin.
- Bir proje klasörü aç. Dosya uzantılarının görünür olduğundan emin ol.
- index.html adlı dosya oluştur. Adının yanlışlıkla index.html.txt olmadığını kontrol et.
- CSS için stil.css adlı dosya oluşturabilir ve HTML head bölümüne <link rel="stylesheet" href="../assets/css/ogrenme.css"> ekleyebilirsin.
- Dosyaları kaydet; index.html dosyasını tarayıcıda aç. Değişiklikten sonra sayfayı yenile.
- Inspect / İncele bölümünde HTML ağacını ve uygulanan CSS kurallarını gör.
İlk çalışan örneğin
Bir değeri değiştir ve önizle
Aşağıdaki tam HTML dosyasında başlık metnini değiştir.
<!doctype html>
<html lang="tr">
<meta charset="utf-8">
<title>İlk sayfam</title>
<h1>Merhaba!</h1>
<p>HTML ile ilk içeriğim.</p>
</html>▶ Sonuç
Başlık ve paragraf tarayıcıda görünür.
Takılırsan bunlara bak
- CSS yüklenmiyorsa dosya yolu ve uzantı aynı mı?
- Değişiklik görünmüyorsa dosyayı kaydettin mi ve doğru sekmeyi mi yeniliyorsun?
- Bir kart taşıyorsa sabit genişlik, minimum genişlik ve uzun metinleri incele.
Editör ve tarayıcı ile kapsamlı HTML atölyesi
HTML işaretleme, CSS stil dilidir. Bu çalışma alanında dosya yolu, düzenleme ve tarayıcı doğrulamasını birlikte uygula.
Videoyla adım adım izle · 5:50
Türkçe açıklamalı sessiz görsel anlatım. Sesli ders veya kesintisiz ekran kaydı değildir. Duraklatıp kendi ortamında uygula.
Video bölümleri ve tam metin
Anlamlı ve erişilebilir kişisel tanıtım sayfası
Bir ziyaretçinin kim olduğunu, ne öğrendiğini ve kaynaklarına nasıl ulaşacağını anlayabildiği tek sayfalık bir belge hazırla. Önce içerik hiyerarşisini kur; görsel tasarımı CSS modülüne bırak.
Önce planla
DOCTYPE, lang, charset, viewport ve anlamlı title içeren tam belge oluştur.
Uygulama 1
DOCTYPE, lang, charset, viewport ve anlamlı title içeren tam belge oluştur.
Uygulama 2
Tek ana başlık, kısa tanıtım ve iki alt bölüm yaz.
Uygulama 3
Öğrenme hedeflerini sıralı, kaynaklarını sırasız listele.
Uygulama 4
İzinli bir görsel ekle; anlamlı alt, width ve height belirt.
Uygulama 5
İlişkili küçük bir veri tablosu kur; caption ve uygun th/scope kullan.
Uygulama 6
Gerçek gönderim yapmayan, etiketli bir örnek iletişim formu ekle.
Uygulama 7
header/nav/main/footer ile bölgeleri ayır; bağlantıları ve bütün dosya yollarını dene.
Uygulama 8
HTML kaynağını ve tarayıcının oluşturduğu belge ağacını karşılaştır.
Doğrulama 1
Kaynak okunaklı; kapanış ve iç içelik doğru.
Doğrulama 2
Başlık sırası ve bağlantı metinleri anlaşılır.
Doğrulama 3
Klavyeyle forma ve bağlantılara ulaşılabiliyor.
Doğrulama 4
Fotoğraf ve göreli yollar doğru; gerçek gönderim varmış gibi sunulmuyor.
Bitirme projesi: Anlamlı ve erişilebilir kişisel tanıtım sayfası
Bir ziyaretçinin kim olduğunu, ne öğrendiğini ve kaynaklarına nasıl ulaşacağını anlayabildiği tek sayfalık bir belge hazırla. Önce içerik hiyerarşisini kur; görsel tasarımı CSS modülüne bırak.
- DOCTYPE, lang, charset, viewport ve anlamlı title içeren tam belge oluştur.
- Tek ana başlık, kısa tanıtım ve iki alt bölüm yaz.
- Öğrenme hedeflerini sıralı, kaynaklarını sırasız listele.
- İzinli bir görsel ekle; anlamlı alt, width ve height belirt.
- İlişkili küçük bir veri tablosu kur; caption ve uygun th/scope kullan.
- Gerçek gönderim yapmayan, etiketli bir örnek iletişim formu ekle.
- header/nav/main/footer ile bölgeleri ayır; bağlantıları ve bütün dosya yollarını dene.
- HTML kaynağını ve tarayıcının oluşturduğu belge ağacını karşılaştır.
Projen bitti mi? Bunları doğrula
- Kaynak okunaklı; kapanış ve iç içelik doğru.
- Başlık sırası ve bağlantı metinleri anlaşılır.
- Klavyeyle forma ve bağlantılara ulaşılabiliyor.
- Fotoğraf ve göreli yollar doğru; gerçek gönderim varmış gibi sunulmuyor.
Temellerden sonra devam müfredatı
Bu modül başlangıç ve uygulamalı temel sağlar. Aşağıdaki konular ayrı derinleşme alanlarıdır; yalnızca bu sayfayı bitirmek bütün dili bildiğin anlamına gelmez.
- Erişilebilir form hata mesajları ve belge doğrulama
- Responsive görseller: picture ve srcset
- Medya öğeleri, metadata ve gerçek sunucuya form gönderimi
Bitirme projesi için referans çözüm
Önce kendi projen üzerinde çalış. Bu küçük başlangıç çözümünü inceleyip görevlerde istenen ek durumlarla geliştir.
HTML
<!doctype html>
<html lang="tr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Deniz'in öğrenme günlüğü</title>
</head>
<body>
<header><nav><a href="#hedefler">Hedefler</a> <a href="#kaynaklar">Kaynaklar</a></nav></header>
<main>
<h1>Öğrenme günlüğüm</h1>
<p>Ben Deniz. Web belgelerini anlamlı biçimde düzenlemeyi öğreniyorum.</p>
<section id="hedefler"><h2>Hedeflerim</h2>
<ol><li>HTML yapısı</li><li>CSS görünümü</li><li>JavaScript etkileşimi</li></ol>
</section>
<section id="kaynaklar"><h2>Kaynaklar</h2>
<ul><li><a href="https://developer.mozilla.org/">MDN belgeleri</a></li></ul>
</section>
<section><h2>Çalışma planım</h2>
<table><caption>Örnek süreler</caption>
<tr><th scope="col">Gün</th><th scope="col">Dakika</th></tr>
<tr><th scope="row">Pazartesi</th><td>30</td></tr></table>
</section>
<section><h2>Örnek iletişim alanı</h2>
<form><label for="ad">Ad</label><input id="ad" name="ad">
<label for="mesaj">Mesaj</label><textarea id="mesaj" name="mesaj"></textarea>
<button type="button">Bu örnek veri göndermez</button></form>
</section>
</main>
<footer><p>Hazırlayan: Deniz · Örnek içerik</p></footer>
</body></html>Dosyayı tarayıcıda aç; bölüm bağlantıları ve etiketli formu klavyeyle dene. Görsel alıştırması için kendi izinli fotoğrafını ve anlamlı alt metnini ekle.
Bu içerik işine yaradı mı?
Görüşünü aşağıdan işaretleyebilir ve varsa notunu bırakabilirsin.