İçeriğe geç
Codary
HTML5 Modül 1: HTML5 Sıfırdan Giriş ve Metin Yapısı

1.1 HTML5 Nedir ve Temel İskelet Yapısı

Kolay
Ders 1 / 28 %0 Ders listesi
1.1 HTML5 Nedir ve Temel İskelet Yapısı 1.2 Meta Etiketleri ve Karakter Seti (UTF-8) 1.3 Başlık Etiketleri (H1 - H6) ve Paragraflar 1.4 Metin Vurgulama ve Biçimlendirme Etiketleri 1.5 Satır Sonu (<br>) ve Ayırıcı Çizgi (<hr>) 1.6 Hatayı Bul: Kapanmayan Etiketler 2.1 Bağlantılar (Links) ve Anchor Etiketi 2.2 Görsel Etiketi (Image - <img>) 2.3 Sıralı ve Sırasız Listeler (UL, OL, LI) 2.4 Medya Etiketleri: Audio ve Video 2.5 Sayfa İçi Gömülü İçerikler (Iframe) 3.1 Form Yapısı (<form>) ve Label Kullanımı 3.2 Metin Girdileri: Text, Password, Email, Tel 3.3 Sayısal ve Zaman Girdileri (Number, Date, Time) 3.4 Seçim Kutuları: Radio, Checkbox ve Color 3.5 Slider (Range), Dosya (File) ve Hidden Girdileri 3.6 Açılır Menüler (<select>) ve Datalist 3.7 Form Gruplama (Fieldset) ve Form Nitelikleri 3.8 Hatayı Bul: Çalışmayan Kayıt Formu 4.1 Tablo Temelleri (Table, TR, TH, TD) 4.2 Gelişmiş Tablo Hücre Birleştirme (Colspan & Rowspan) 4.3 Tablo Bölümleri (Thead, Tbody, Tfoot) 4.4 Semantik HTML5 Yapısı (Header, Nav, Main, Footer) 4.5 İnteraktif HTML5 Etiketleri (Details & Summary) 5.1 Proje 1: Gelişmiş Özgeçmiş (CV) Web Sayfası 5.2 Proje 2: Çok Adımlı Kapsamlı Kayıt Formu 5.3 Proje 3: Ürün Kataloğu ve Fiyat Tablosu 5.4 Proje 4: Komple Semantik HTML5 Blog İskeleti
Misafir olarak çalışıyorsun. İlerlemeni kaydetmek ve sonraki dersleri açmak için giriş yap. Giriş yap / Kayıt ol

HTML Nedir?

Bir gazete sayfasını düşün. Sayfada büyük bir manşet, altında küçük başlıklar, paragraflar ve fotoğraflar vardır. Gazeteyi dizen kişi her parçaya "bu manşet", "bu paragraf" diye etiket koyar. HTML de tam olarak bunu yapar: içeriği etiketlerle işaretler, tarayıcı da bu etiketlere bakarak sayfayı çizer.

Etiket (tag) nedir?

Etiketler küçüktür ve büyüktür işaretleri arasına yazılır. Çoğu etiket bir açılış ve bir kapanış etiketinden oluşur. İkisinin arasındaki her şey o etiketin içeriğidir.
Örnek KodHTML
<h1>Bu bir başlıktır</h1>
  1. <h1>: Açılış etiketi. "Büyük başlık burada başlıyor" der.
  2. Bu bir başlıktır: Ekranda görünen içerik.
  3. </h1>: Kapanış etiketi. Başındaki / işareti "burada bitiyor" demektir.
Açılış etiketi, içerik ve kapanış etiketinin tamamına element denir.

Her HTML sayfasının iskeleti

Her web sayfası aynı temel iskeletle başlar. Önce örneğe bak, sonra her satırın görevini oku.
Örnek KodHTML
<!DOCTYPE html>
<html lang="tr">
<head>
    <title>Sekmede görünen başlık</title>
</head>
<body>
    <h1>Sayfada görünen başlık</h1>
</body>
</html>
  1. <!DOCTYPE html>: Tarayıcıya "bu belge HTML5 ile yazıldı" der. Etiket değil, bir bildirimdir ve kapanışı yoktur.
  2. <html lang="tr">: Tüm sayfayı saran kök etikettir. lang="tr" sayfanın Türkçe olduğunu söyler; ekran okuyucular ve Google bu bilgiyi kullanır.
  3. <head>: Sayfanın görünmeyen bilgileri buraya yazılır: başlık, karakter seti, açıklama.
  4. <title>: Tarayıcı sekmesinde ve Google arama sonuçlarında görünen başlıktır.
  5. <body>: Ekranda görünen her şey bu etiketin içine yazılır.
İç içe etiketleri okunaklı tutmak için içerideki satırları 4 boşluk (veya Tab) ile içeri kaydırırız. Tarayıcı bu boşlukları önemsemez ama kodu okuyan insanlar için büyük fark yaratır.

Önizleme hakkında

Bu sitedeki editör yazdığın kodu küçük bir pencerede gösterir. <title> sekmede göründüğü için önizlemede görünmez; bu normaldir.

Sık yapılan hatalar

  • Kapanış etiketini unutmak: <h1>Merhaba yazıp </h1> yazmazsan, sonraki her şey de başlık gibi büyük görünür.
  • Görünen içeriği <head> içine yazmak: başlık ve paragraflar her zaman <body> içinde olmalıdır.
  • Etiketleri çapraz kapatmak: <html><body></html></body> yanlıştır. En son açılan etiket ilk kapanır.
Görev Kendin yazarak öğren
Tam bir HTML5 sayfa iskeleti oluştur.

  1. İlk satıra HTML5 doküman tipi bildirimini yaz.
  2. html etiketini aç ve dilini Türkçe (lang="tr") olarak belirt.
  3. head içine sekme başlığı olarak İlk Sayfam yazan bir title ekle.
  4. body içine Merhaba HTML5! yazan bir h1 başlığı ekle.
  5. body ve html etiketlerini kapat.

    Bilgi Kontrol Quizi

    Bir HTML5 belgesinin en üstüne yazılan doküman tipi bildirimi hangisidir?

    index.html

    Parantez ve tırnaklar kendiliğinden kapanır. Tab girinti ekler; editörden çıkmak için önce Esc, sonra Tab.

    Çıktı Konsolu: Hazır 
    Çıktı görmek için "Kodu Çalıştır" butonuna basın...