HTML öğrenin! kahkahalar.com

En iyi espriler ve komik hikayeler ve Resimler bu Nostaljik Sitede!

İnternete bağlanma anında çıkan sesler bizi mutlu ederdi.

Ancak ev telefonu ile konuşan olursa malesef internet kesilirdi ve tekrar bağlanmak için beklerdik.

Sizce gelecekte Üniversitelerde "internet ve yazılım tarihi" bölümü açılabilir mi?

Fıkralar

Komik Resimler

☎ Biri Kişisel Verilerin Korunması mı dedi? 😂

**Web Geliştirmenin Kronolojik Tarihi**
Tarih (Yıl–Ay)	Önemli Gelişme
1969–10	ARPANET’te ilk bağlantı kurulması (internetin temeli)
1983–01	İnternet ana omurgasının TCP/IP’ye geçişi (modern internetin başlangıcı)
1989–03	Tim Berners-Lee’nin WWW önerisi (hiper metin + URL + HTTP)
1990–12	İlk web sunucusu ve web sitesi (info.cern.ch) çalışır hâle geldi
1991–08	World Wide Web’in halka duyurulması (alt.hypertext)
1993–04	Mosaic 1.0 yayınlandı (grafik tarayıcılarla web patlaması)
1994–10	W3C kuruldu (web standartlarının koordinasyonu)
1995–11	HTML 2.0 yayınlandı (ilk resmî spesifikasyon)
1995–12	JavaScript (LiveScript → JavaScript) Netscape ile tanıtıldı
1996–12	CSS1 önerisi yayımlandı (stil katmanının standardı)
1997–06	ECMAScript 1 (JS’in standardı) kabul edildi
1998–05	CSS2 yayımlandı (konumlandırma, medya türleri vb.)
1999–12	HTML 4.01 yayımlandı (erişilebilirlik ve yapı vurgusu)
2000–01	XHTML 1.0 (XML temelli HTML) yayımlandı
2004–06	WHATWG kuruldu (HTML5 sürecini hızlandıran topluluk)
2005–02	AJAX terimi ortaya çıktı (dinamik, asenkron web dönemi)
2008–01	HTML5 ilk çalışma taslağı yayımlandı
2009–12	ECMAScript 5 (strict mode, JSON, Array metodları)
2011–12	WebSocket protokolü RFC 6455 olarak standartlaştı
2014–10	HTML5 W3C Recommendation oldu (resmen tamamlandı)
2015–05	HTTP/2 standardı (çoklama, başlık sıkıştırma, daha hızlı aktarım)
2015–06	ECMAScript 2015 (ES6) yayımlandı (modüller, sınıflar, let/const, Promise)
2016–04	Let’s Encrypt genel kullanıma açıldı → HTTPS yaygınlaşması hızlandı
2017–03	CSS Grid büyük tarayıcılarda varsayılan olarak desteklenmeye başladı
2022–06	HTTP/3 (QUIC tabanlı) RFC 9114 olarak standartlaştı

HTML Liste Diyagramı

  
<ul> (Unordered List - Sırasız Liste Konteyneri) : listelerin başında yalnızca bir madde işareti (bullet) bulunur.
 ├
 ├──<li> Item 1 </li> (List Item - Liste Öğesi)
 ├
 ├── <li> Item 2 </li> (List Item - Liste Öğesi)
 ├
 └── <li> Item 3 </li> (List Item - Liste Öğesi)  




<ol> (Ordered List - Sıralı Liste Konteyneri) : Listelerin başında numara (1, 2, 3, ...) bulunur.
 ├
 ├── <li> First </li> (List Item - Liste Öğesi)
 ├
 ├── <li> Second </li> (List Item - Liste Öğesi)
 ├
 └── <li> Third </li> (List Item - Liste Öğesi)
 



<dl> (Description List - Açıklama Listesi Konteyneri)
 ├
 ├── <dt> Term 1 </dt> (Description Term)
 │
 ├── <dd> Description for Term 1 </dd> (1.Terimin Açıklaması)
 └── <dd> Another description for Term 1 </dd> (1.Terimin Diğer Açıklaması)
 ├
 ├
 ├── <dt> Term 2 </dt> (Description Term)
 ├
 └── <dd> Description for Term 2 </dd> (2.Terimin Açıklaması)
 ├
 ├
 └── <dt> Term 3 </dt> (Description Term)
 ├
 └── <dd> Description for Term 3 </dd> (3.Terimin Açıklaması)

<ul> , <ol> bir container, içinde birden çok listeli itemler içerir.
<dl> ise bir container içinde birden çok çift halinde listeli haldedir. (<dt> term + <dd> description)

Özetle: HTML’de 4 çeşit list vardır. <ul> , <ol> , <dt> , <dl>; Uygulamada sıklıkla bunlardan yalnız <ul> ve <ol> kullanılır.

Yalnızca HTML kullanılarak bir içeriği responsive yapmak için her bir ekran boyutu için ayrı içerik barındırmak gerekliydi.
Bunun için picture elementi kullanılırdı. Şuan ise uygulamada kullanılmıyor.
Uygulamada birçok html etiketi artık kullanılmıyor. Bu sayfada günümüzde en çok kullanılanlar mevcut.


  <picture>
      <!-- Large screens (desktop) -->
      <source media="(min-width: 1024px)" srcset="/assets/resim1-large.png">
  
      <!-- Medium screens -->
      <source media="(min-width: 600px)" srcset="/assets/resim1-medium.png">
  
      <!-- Small screens -->
      <img src="/assets/resim1-small.png" alt="kahkahacom nostalji">
  </picture>

HTML Etiket ve Element Kavramları

Etiket (Tag)

Etiket, koddaki syntax parçasıdır. Bir şeyin nerede başlayıp nerede bittiğini gösteren işaretçidir.

Element

Element, bir etiketin içindeki içerik ve diğer etiketlerle birlikte oluşturduğu yapıdır.

Örneğin; <p> veya </p> birer etiket iken her ikisi birlikte arasındaki paragraf içeriği ile beraber bir elementi oluşturur.

HTML Element Türleri (Block, Inline, Void)

Block-level (Blok Düzeyi) Elementler: Yeni bir satırda başlar ve tüm yatay alanı kaplar. Örnekler: <div>, <p>, <h1> - <h6>, <section>, <article>, <header>, <footer>

Inline (Satır İçi) Elementler: Yeni bir satır başlatmaz, sadece içeriğin etrafını sarar. Örnekler: <span>,<img>, <,<input>, <a>, <strong>, <em>, <img>

Void (Boş) Elementler: Kapanış etiketi (/) olmayan elementlerdir. Örnekler: <img>, <br>, <hr>, <input>, <meta>, <link>

<img> etiketi ve <input> hem inline elementlerdir hem de void elementlerdir.

Yani bu elementler hem satır içinde davranır (yeni satır başlatmaz),
Hem de kapanış etiketi yoktur (</img> diye yazılmaz).

Etiket Adı	Semantik İşlevi
<header>	Sayfanın veya bir bölümün başlık (logo, navigasyon, arama çubuğu vb.) içeriğini tanımlar.
<main>	Sayfanın ana ve benzersiz içeriğini barındırır. Sayfa başına sadece bir tane olmalıdır.
<footer>	Sayfanın veya bir bölümün alt bilgi (telif hakkı, iletişim bilgileri vb.) içeriğini tanımlar.
<nav>	Ana navigasyon linkleri bloğunu (menüleri) tanımlar.Header'ın içinde yer alır.
<aside>	Ana içerikle dolaylı olarak ilgili olan içeriği (kenar çubuğu, reklamlar vb.) tanımlar.
<section>	Belge içinde tematik olarak gruplandırılmış, genellikle bir başlığı olan bir bölümü temsil eder. Örneğin hero-section gibi id'ler kullanılabilir.
<article>	Kendi başına bağımsız ve dağıtılabilir bir içerik parçasını (blog yazısı, forum gönderisi, makale vb.) tanımlar.
<h1> - <h6>	Hiyerarşik başlık seviyelerini tanımlar. <h1> en önemli, <h6> en az önemli başlıktır.Her nekadar h1 en büyük h6 en küçük olsa da bu default gelen boyut farklılıkları CSS ile rahatlıkla değiştirilebilir.Esas önemli olan semantik olarak önem sırası anlamını ifade etmesidir. Bir sayfada yalnızca bir adet h1 etiketi olabilir.
<figure>	Görsel, diyagram, kod bloğu gibi bağımsız bir içerik akışını belirtmek için kullanılır.
<figcaption>	Bir <figure> elemanı için açıklayıcı bir başlık veya altyazı sağlar.
<details>	Kullanıcının isteğe bağlı olarak görüntüleyebileceği veya gizleyebileceği ek ayrıntıları tanımlar.
<summary>	<details> elemanı için görünür bir başlık görevi görür. Tıklandığında detayları gösterir/gizler.
<time>	Belirli bir saati veya tarihi insan ve makine tarafından okunabilir bir formatta tanımlar.
<mark>	Metnin bir bölümünü, okuyucunun dikkatini çekmek amacıyla işaretler veya vurgular (sarı fosforlu kalem gibi).
<address>	Bir makalenin veya sayfanın yazar/sahibi için iletişim bilgilerini (e-posta, adres, telefon vb.) içerir.
<blockquote>	Başka bir kaynaktan alıntılanan uzun bir bölümü belirtir.
<cite>	Yaratıcı bir eserin (kitap, film, şarkı vb.) başlığına referans vermek için kullanılır.
<em>	Metne vurgu yapar. Genellikle italik olarak görüntülenir ancak anlamı "vurgu"dur.
<strong>	Metnin güçlü bir öneme sahip olduğunu belirtir. Genellikle kalın olarak görüntülenir ancak anlamı "önem"dir.
<pre>	Önceden biçimlendirilmiş metin bloklarını (kod parçacıkları, ASCII sanat vb.) korur ve monospaced fontla gösterir.
<code>	Bilgisayar kodu veya programlama dili parçacıklarını belirtir. Genellikle monospaced fontla gösterilir.

HTML Elementlerini Semantik işlevlerine uygun kullanmak neden gereklidir?

HTML etiketlerini semantik işlevlerine uygun olarak kullanmak, SEO (Arama Motoru Optimizasyonu) açısından çok önemlidir ve en temel en iyi uygulamalardan biridir.

Arama motorlarının içeriği daha iyi anlamasını sağlar.
Erişilebilirliği artırır, çünkü ekran okuyucular semantik etiketleri tanır.
Sayfa hiyerarşisini ve içeriğini daha iyi organize eder.

<!DOCTYPE html>
<html lang="tr"> 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SEMANTİK HTML GENEL HİYERARŞİSİ</title>
</head>

  <body> 
      <header>
      </header>
                  
          <main>
         </main>
          
     <footer>
     </footer>
 </body>

</html>

Meta Veri (Metadata) Nedir?

Meta etiketleri, web sayfanız hakkında arama motorlarına ve tarayıcılara bilgi veren "veri hakkında veri" parçacıklarıdır. Kullanıcılar bu etiketleri doğrudan sayfada görmezler, ancak sayfanızın arama sonuçlarında nasıl görüneceğini ve sıralamasını büyük ölçüde etkilerler.SEO açısından da önemlidir.

<head>bir tek <title> etiketi hariç sayfanın head etiketiiçerisindeki hiçbirşey doğrudan sayfada görünmez.


        Ancak HTML'in head etiketi içerisnde bulunan meta etiketleri arama motorlarına ve tarayıcılara sayfanın içeriği hakkında bilgi verir.
        

        

        1. Title Etiketi (<title>)
      Önemi: Sayfa içi SEO'nun en ağır topudur. Arama sonucunun tıklanabilir başlığıdır. Sayfanın ana konusunu net bir şekilde ifade etmeli ve en önemli anahtar kelimeyi içermelidir.
      <title>kahkahalar.com - 90'ların Nostaljik Web Dünyası</title>

          2. Description Meta Etiketi (<meta name="description">)
          Önemi: Arama sonuçlarındaki "reklam metninizdir". Kullanıcıları sitenize tıklamaya teşvik
            etmelidir. Tıklama oranını (CTR) doğrudan etkiler, bu da dolaylı olarak sıralamanızı iyileştirebilir.
          <meta name="description" content="90'ların internet ruhunu yeniden yaşayın! Kahkahalar.com ile web'in nostaljik ve komik tarihine bir yolculuk yapın.">

          3. Viewport Meta Etiketi (<meta name="viewport">)
          Önemi: Sitenizin mobil uyumlu olmasını sağlar. Google, siteleri öncelikle mobil
            versiyonlarına göre sıraladığı için (Mobile-First Indexing), bu etiket olmadan iyi bir sıralama almak
            neredeyse imkansızdır.
          <meta name="viewport" content="width=device-width, initial-scale=1.0">

          4. Keywords Meta Etiketi (<meta name="keywords">)
          ÖNEMLİ UYARI: Bu etiket, geçmişte kötüye kullanıldığı için artık Google tarafından
              bir sıralama faktörü olarak kabul edilmemektedir. Yine de bazı eski veya daha küçük arama
            motorları tarafından kullanılabilir. Günümüz SEO stratejilerinde odaklanılması gereken bir etiket değildir.
          
          <!-- SEO için artık önemsizdir -->
<meta name="keywords" content="internet tarihi, web tarihi, komik, nostaljik site, bir zamanlar kahkaha sitesi">

          5. Author Meta Etiketi (<meta name="author">)
          Önemi: Sayfanın veya içeriğin yazarını belirtir. Doğrudan bir SEO etkisi olmasa da,
            içeriğin kaynağını ve güvenilirliğini belirtmek için iyi bir alışkanlıktır.
          <meta name="author" content="Kahkahalar.com">
          

          
          

          
          
          
            ERİŞİLEBİLİRLİK (ACCESSIBILITY)
            Erişilebilirlik, tüm kullanıcıların, özellikle de engelli bireylerin, web içeriğine erişimini sağlamayı
              amaçlar. Bu, doğru HTML etiketleri kullanmak, uygun renk kontrastları sağlamak ve ekran okuyucular için
              içerik oluşturmak gibi uygulamaları içerir.
          
          

          
          
            1. Görseller İçin `alt` (Alternatif Metin) Niteliği
            Ekran okuyucular görselleri göremez ama `alt` niteliğindeki metni okuyabilir. Bu, görme engelli
              kullanıcılar için en önemli niteliklerden biridir.


            Aynı zamanda img etiketi içerisinde yer alan görselin yüklenmemesi durumunda `alt` metni devreye girer ve
              kullanıcıya görselin ne hakkında olduğunu açıklar.
            Bilgi Veren Görsel Örneği:
            Eğer görsel bir bilgi iletiyorsa, `alt` metni bu bilgiyi açıklamalıdır.
            <img src="grafik.png" alt="2024 yılı satışlarının aylara göre artışını gösteren çubuk
                grafik.">

            Dekoratif Görsel Örneği:
            Eğer görsel sadece süs amaçlıysa ve bir bilgi taşımıyorsa, `alt` niteliği boş bırakılmalıdır. Bu, ekran
              okuyucunun gereksiz yere "görsel" demesini engeller.
            <img src="susleme.png" alt="">
          
          
          
          
            2. Anlaşılır Link ve Buton Metinleri
            Link metinleri, tek başlarına okunduğunda bile anlamlı olmalıdır. "Buraya tıklayın" gibi belirsiz
              ifadelerden kaçınılmalıdır.

            Kötü Kullanım Örneği:
            Daha fazla bilgi için <a href="/hakkimizda">buraya tıklayın</a>.

            İyi Kullanım Örneği:
            <a href="/hakkimizda">Şirketimiz hakkında daha fazla bilgi edinin</a>.
          
          
          
          
            3. Erişilebilir Formlar ve <label>
            Her form elemanı (`input`, `select` vb.), ne işe yaradığını belirten bir `<label>` etiketine sahip
              olmalıdır. `label`'ın `for` niteliği ile `input`'un `id` niteliği eşleşmelidir.
            
              
                <label for="kullanici_adi">Kullanıcı Adı:</label><br>
                <input type="text" id="kullanici_adi" name="kullanici_adi">
              
            
            
              
                <label for="sifre">Şifre:</label><br>
                <input type="password" id="sifre" name="sifre">
              
            
          
          
          
          
            4. Yapısal Veri Tabloları
            Veri tabloları, ekran okuyucuların satır ve sütun başlıklarını doğru şekilde ilişkilendirebilmesi için
              yapısal olarak etiketlenmelidir.
            

            Örnek:


            
              Aylık Giderler
              
                
                  Ay
                  Gider Kalemi
                  Tutar
                
              
              
                
                  Ocak
                  Kira
                  5000 TL
                
              
            
            Tablo Kodu Örneği:
            
              
                <table>

                  <caption>Aylık Giderler</caption>

                  <thead>

                    <tr>

                      <th scope="col">Ay</th>

                      <th scope="col">Gider Kalemi</th>

                      <th scope="col">Tutar</th>

                    </tr>

                  </thead>

                  <tbody>

                    <tr>...</tr>

                  </tbody>

                </table>
              
            
          
          
          
          
            5. ARIA Nitelikleri (İleri Seviye)
            ARIA (Accessible Rich Internet Applications), karmaşık web uygulamalarında standart HTML'in yetersiz
              kaldığı durumlarda ek anlam sağlamak için kullanılır. En basit ve yaygın kullanımlarından biri, görünür
              metni olmayan butonlara etiket eklemektir.
            `aria-label` Örneği:
            
              
                <!-- Görünür bir metni olmayan, sadece ikon içeren bir buton -->

                <button aria-label="Ayarlar">

                  <img src="ayar-ikonu.svg" alt="">

                </button>
              
            
          
          

          
          

          
          HTML DÖKÜMANTASYON VE KAYNAKLARI
          
            MDN Web Docs - HTML
            

            W3Schools - HTML
            

            WHATWG(Web Hypertext Application
                Technology Working Group) 

              (Bu site HTML'in adeta teknik şartnamesidir)
            

            Bu sitede Emmet kısayollarını
                öğrenebilirsiniz.

Aylık Giderler
Ay	Gider Kalemi	Tutar
Ocak	Kira	5000 TL


    
                      Tüm hakları
        Y kuşağınındır © 1997 Kahkahalar.com

Kahkahalar.com 90'lar Web Deneyimi

Web sitesi geliştirmeyi yeni öğrenmeye başlayanlar için yalnızca HTML kullanılarak yapılmış nostaljik bir site!

Aynı zamanda da CSS stillendirme hiç olmadığından dolayı İĞRENÇ !

HTML is all abouth markup!

Sizce gelecekte Üniversitelerde "internet ve yazılım tarihi" bölümü açılabilir mi?

HTML Liste Diyagramı

HTML Etiket ve Element Kavramları

Etiket (Tag)

Element

HTML Element Türleri (Block, Inline, Void)

HTML Elementlerini Semantik işlevlerine uygun kullanmak neden gereklidir?

Meta Veri (Metadata) Nedir?

`<head>``bir tek <title> etiketi hariç sayfanın head etiketiiçerisindeki hiçbirşey doğrudan sayfada görünmez.`

Ancak HTML'in head etiketi içerisnde bulunan meta etiketleri arama motorlarına ve tarayıcılara sayfanın içeriği hakkında bilgi verir.

1. Title Etiketi (<title>)

2. Description Meta Etiketi (<meta name="description">)

3. Viewport Meta Etiketi (<meta name="viewport">)

4. Keywords Meta Etiketi (<meta name="keywords">)

5. Author Meta Etiketi (<meta name="author">)

ERİŞİLEBİLİRLİK (ACCESSIBILITY)

1. Görseller İçin `alt` (Alternatif Metin) Niteliği

Bilgi Veren Görsel Örneği:

Dekoratif Görsel Örneği:

2. Anlaşılır Link ve Buton Metinleri

Kötü Kullanım Örneği:

İyi Kullanım Örneği:

3. Erişilebilir Formlar ve <label>

4. Yapısal Veri Tabloları

Tablo Kodu Örneği:

5. ARIA Nitelikleri (İleri Seviye)

`aria-label` Örneği:

HTML DÖKÜMANTASYON VE KAYNAKLARI