Açıklama ve Örnekler

Betik ve Stil Gömme Etiketleri

Betik ve stil gömme etiketleri, HTML'de içeriklerin stil ve davranışını belirlemek için kullanılan etiketlerdir. Bu etiketler, HTML'in temel yapı taşlarından biridir ve HTML'in temel işlevlerinden biridir. Bu bölümde, betik ve stil gömme etiketleri hakkında bilgi verilecektir.

Ana Konu
İçindekiler
Seviye 4

Yapı, Görünüm ve Davranış Köprüsü Betik ve Stil Gömme Etiketleri

Genel Açıklama:

Bu etiketler, HTML'i diğer web dilleriyle ( özellikle CSS ve JavaScript ) bir araya getirerek sayfanın görünümünü ve işlevselliğini yöneten temel mimari bağlantı noktalarıdır.

Bu mekanizma, daha önce detaylandırdığınız Sorumlulukların Ayrımı ilkesini somut kod düzeyinde uygulamanın anahtarıdır.

Bu etiketlerin çoğu, kullanıcının doğrudan görmediği <head> etiketi içinde kullanılır.

Bu konfigürasyon, tarayıcıya içeriği göstermeye başlamadan önce gerekli stil ve mantık dosyalarını yükleme talimatını verir.

Mimari Rol: Ayrı Sorumlulukların Entegrasyonu

Bu etiketler, web geliştirmenin temel prensibini, yani HTML'in yapıyı ( iskeleti ), CSS'in stili ( görünümü ) ve JavaScript'in davranışı

( etkileşimi ) ayrı tutmasını sağlar.

DRY Prensibine Katkı:

Bu etiketler, stil ve mantık kodunun "tek bir harici dosyada" tutulmasına ve yüzlerce HTML sayfası tarafından tekrar tekrar kullanılmasına olanak tanır.

Bu, DRY prensibinin temel bir uygulamasıdır ve projenin Bakım Kolaylığı'nı dramatik bir şekilde artırır.

Dinamik Dönüşüm:

Bu etiketler sayesinde, basit, statik bir HTML belgesi, "zengin özelliklere sahip, dinamik ve etkileşimli" bir uygulamaya dönüşebilir.

<script> etiketi, Davranış katmanını devreye sokarak tarayıcıyı bir uygulama motoru haline getirirken; <link> etiketi, Görünüm katmanını devreye sokarak görsel tutarlılığı ve düzeni sağlar.

Seviye 3
Genel Açıklama

<link> etiketi, bir HTML belgesi ile harici bir kaynak arasında ilişki kuran, kapanış etiketi gerektirmeyen bir etikettir.

Web geliştirmede en yaygın kullanım amacı, bir CSS stil dosyasını HTML belgesine bağlamaktır.

Bu mekanizma sayesinde stil kuralları HTML dosyasının dışına taşınabilir ve farklı sayfalar tarafından ortak şekilde kullanılabilir.

Mimari Rol: Sorumluluk Ayrımının Zorlanması

<link> etiketi, bir HTML belgesi ile harici bir kaynak ( genellikle bir CSS dosyası ) arasında ilişki kuran, kapanış etiketi gerektirmeyen hayati bir araçtır.

Mimari açıdan, bu etiket, Yapı katmanını Görünüm katmanına bağlayan resmi köprüdür.

<link> etiketinin ana görevi, sayfanın "stil kurallarını içeren" CSS dosyasını HTML belgesine bağlamaktır.

Konum ve Performans:

Bu etiket genellikle <head> içinde kullanılır.

Bunun nedeni, tarayıcıya HTML içeriğini çizmeyi ( render ) başlatmadan önce "stil bilgilerini indirme" talimatı vermektir.

Bu erken yükleme, sayfanın stilsiz görünmesini engelleyerek Kritik Oluşturma Yolu'nu hızlandırmaya yardımcı olur.

DRY Prensibi ve Bakım:

Harici CSS dosyaları kullanmak, stil kodunun "Tekrar Etmeme" prensibine uygun olarak tek bir yerde tutulmasını sağlar .

Bu merkezi yönetim, yüzlerce HTML sayfasındaki stili tek bir dosyayı değiştirerek güncelleme olanağı sunar, böylece Bakım Kolaylığı artar.

Kapsülleme ve Performans:

Harici dosyaların kullanılması, "stil ve içeriği ayırarak" kodu daha düzenli hale getirir.

Ayrıca, tarayıcılar CSS dosyasını önbelleğe ( cache ) alabilir; bu da stil dosyasının tekrar indirilmemesi anlamına gelir, böylece Performans AQC'si iyileşir.

Ana Nitelikler: Sözleşmenin Detayları

<link> etiketinin iki temel niteliği, bu mimari sözleşmeyi belirler:

Rel (Relation): Bağlantının türünü belirtir.

Stil dosyaları için değeri her zaman stylesheet olmalıdır.

Bu, tarayıcıya indirilen dosyanın "görünüm katmanına" ait olduğunu açıkça bildirir.

Href (Hypertext Reference): Bağlanacak olan CSS dosyasının yolunu veya URL'sini belirtir.

</>
<link> Etiketi Uygulama Örneği 
<!DOCTYPE html>
<html lang="tr">
    <head>
        <meta charset="UTF-8">
        <title>Link Etiketi Örneği</title>
        <link rel="stylesheet" href="css/ana-stil.css?v=1.0.150">
    </head>

    <body>

        <h1>Sayfamızın Başlığı</h1>
        <p>Bu metnin stili, harici dosyadaki kurallarla belirlenir.</p>

    </body>
</html>
Seviye 4

Style Etiketi Dahili Stil Sayfası

Genel Açıklama

<style> etiketi, bir HTML belgesinin içinde doğrudan CSS stil kuralları tanımlamaya olanak tanıyan bir etikettir.

Bu etiket sayesinde geliştirici, harici bir CSS dosyasına ihtiyaç duymadan sayfanın görünümünü belirleyen stil kurallarını doğrudan HTML belgesi içine yazabilir.

<style> etiketi çoğunlukla <head> bölümü içinde kullanılır ve yalnızca ilgili sayfaya ait stil kurallarının tanımlanmasına imkân tanır.

Mimari İkilem: Sorumluluğun İhlali

<style> etiketi, HTML belgesinin içine doğrudan CSS kuralları yazılmasına olanak tanır.

Bu etiket, küçük çaplı veya yalnızca o sayfaya özel olan stil kurallarını harici bir dosyaya ihtiyaç duymadan tanımlamak için kullanılır ve bu genellikle <head> etiketi içinde bulunur.

<style> etiketinin kullanımı, mimari açıdan bir ödünleşim yaratır ve genel olarak Sorumlulukların Ayrımı ilkesini ihlal eder.

Gereksiz Bağlılık: Stil kurallarını doğrudan HTML içine gömmek, Görünüm ( CSS ) ve Yapı ( HTML ) katmanlarını birbirine sıkı sıkıya bağlar.

Bu, stil değiştiğinde HTML dosyasının da değişmesini gerektirir.

Bakım Kolaylığı Sorunu: Stil kurallarının birden fazla HTML dosyasına dağılması, Bakım Kolaylığı'nı ciddi şekilde düşürür ve DRY prensibini ihlal eder.

Tek bir kuralı değiştirmek için birden fazla dosyanın düzenlenmesi gerekir.

Performans Dezavantajı: Önbellekleme Engeli

En iyi uygulama, büyük projelerde bu etiket yerine harici <link> etiketi kullanmaktır. Bunun temel nedeni Performans (AQC) ile ilgilidir:

Önbellekleme Engeli:

<style> etiketi içindeki CSS, HTML belgesinin bir parçası olarak kabul edilir. Bu, tarayıcının stili ayrıcaönbelleğe (cache) alamayacağı anlamına gelir.

Kullanıcı her sayfayı ziyaret ettiğinde, stil kodunun tamamı yeniden indirilmek zorunda kalır.

Harici CSS ise "tek bir kez indirilip" yüzlerce sayfada tekrar kullanılabilir.

Haklı Kullanım Alanı: Kritik CSS

Modern web optimizasyonunda, bu etiketin kullanımı için tek bir haklı mimari istisna vardır:

Kritik CSS Kullanıcının ekranında hemen görünmesi gereken (above-the-fold) stil kurallarını <style> etiketi içine gömerek, tarayıcının

ana sayfa içeriğini hızla çizmeye ( render ) başlaması sağlanır.

Bu, sayfa yükleme süresini düşürerek Performans AQC'sine katkıda bulunur, ancak bu, bilinçli ve kontrollü bir sorumluluk ihlalidir.

</>
<style> Etiketi Uygulama Örneği 
<!DOCTYPE html>
<html lang="tr">
    <head>
        <meta charset="UTF-8">
        <title>Style Etiketi Örneği</title>
        
        <style>
            body {
                background-color: #f4f4f4;
                color: #333;
            }
            h1 {
                border-bottom: 2px solid blue;
            }
        </style>
    </head>
    <body>
    
        <h1>Dahili Stil Uygulaması</h1>
        <p>Bu paragraf, yukarıdaki stil kurallarına uyar.</p>
    
    </body>
</html>
Seviye 4

Script Etiketi Betik Gömme Etiketi

Genel Açıklama

<script> etiketi, bir HTML belgesine JavaScript kodu eklemek veya harici bir JavaScript dosyasını bağlamak için kullanılan temel betik etiketidir.

Bu etiket sayesinde web sayfaları yalnızca statik içerik sunmakla kalmaz, aynı zamanda kullanıcı etkileşimlerine tepki verebilen

dinamik uygulamalara dönüşebilir.

<script> etiketi, sayfanın davranış katmanını temsil eder ve genellikle JavaScript kodlarının çalıştırılmasını tetikler.

Mimari Rol: Kritik Oluşturma Yolu ve Engelleme Sorunu

<script> etiketi, HTML belgesine Davranış katmanını dahil etmek veya yazmak için kullanılan, web mimarisinin dinamik ve güçlü

bağlantı noktasıdır.

Bu etiket, sayfanın etkileşimini, iş mantığını ve dinamik içerik akışını kontrol eden JavaScript kodlarını tetikler.

<script> etiketinin konumu ve yükleme biçimi, Performans AQC'sini doğrudan etkileyen kritik bir mimari karardır.

Senkron Yükleme Sorunu:

Geleneksel olarak, tarayıcı bir <script> etiketiyle karşılaştığında, betiği indirmeyi ve yürütmeyi bitirene kadar DOM oluşturma işlemini durdurur.

Bu, script ne kadar büyük olursa, kullanıcının "boş bir sayfa görme süresini" o kadar uzatır.

Bu durum, performans için kritik olan Kritik Oluşturma Yolu üzerinde darboğaz yaratır.

Konum ve Optimizasyon Felsefesi:

Bu engelleme ( blocking ) sorununu çözmek için <script> etiketinin konumu ve yükleme nitelikleri optimize edilir:

Geleneksel Konum(<head>): Sayfanın en başında, mantığın kullanılabilmesi için hızlı yükleme ihtiyacı varsa kullanılır ( Ancak bu durum performans riskini artırır ).

Modern Konum(Kapanan </body> Öncesi): Sayfa yükleme hızını artırmak ve DOM'un oluşturulmasını engellememek için, betiğin <body> etiketinin kapanışından hemen önce yerleştirilmesi standart bir optimizasyon haline gelmiştir.

Bu, "tüm görsel içeriğin önce çizilmesini" sağlar.

</>
<script> Etiketi Uygulama Örneği 
<!DOCTYPE html>
<html lang="tr">
    <head>
        <meta charset="UTF-8">
        <title>Script Etiketi Örneği</title>
    </head>
    <body>
    
        <h1>JavaScript Etkileşimi</h1>
        <button id="buton">Tıkla!</button>
        <p id="mesaj"></p>
        
        <script>
            document.getElementById('buton').onclick = function() {
                document.getElementById('mesaj').textContent = 'Butona tıklandı!';
            };
        </script>
    
    </body>
</html>
Seviye 4

NoScript Etiketi Davranış Katmanı İçin Yedekleme ve Dayanıklılık

Genel Açıklama

<noscript> etiketi, tarayıcıda JavaScript devre dışı bırakıldığında veya desteklenmediğinde kullanıcıya gösterilecek alternatif içeriği tanımlamak için kullanılan bir HTML elementidir.

Bu etiket sayesinde web uygulamaları, betik katmanının çalışmadığı durumlarda dahi kullanıcıya bilgilendirici mesajlar veya temel içerik erişimi sunabilir.

<noscript> etiketi, özellikle JavaScript'e bağımlı uygulamalarda kullanıcı deneyimini korumak ve sistemin dayanıklılığını artırmak için kullanılan önemli bir yedek mekanizmadır.

Mimari Rol: Hata Toleransı ve Durum Kontrolü

<noscript> etiketi, kullanıcının tarayıcısında JavaScript devre dışı bırakıldığında veya tarayıcı betiği desteklemediğinde gösterilecek içeriği tanımlar.

Bu etiket, web mimarisinin ""Dayanıklılı"k"" felsefesini somutlaştıran, kritik bir yedek mekanizmasıdır.

Bu etiketin varlığı, sistemin birincil Davranış ( JavaScript ) katmanına olan bağımlılığını yönetme zorunluluğundan doğar.

Dayanıklılık (Resilience):

Uygulamanın temel işlevselliği JavaScript'e bağlıysa, "<noscript>" etiketi, uygulamanın bu en büyük başarısızlık noktasına karşı

zarif bir şekilde bozulmamasını sağlar.

Kullanıcıya, sistemin neden çalışmadığını bildiren veya temel içeriğe erişim sağlayan bir mesaj göstermek için idealdir.

Kontrol Mekanizması:

Etiket, tarayıcı tarafından gerçekleştirilen basit, "yerleşik bir durum kontrolüdür".

Kullanıcının tarayıcısında JavaScript etkinse, <noscript> etiketi içindeki tüm içerik tamamen yoksayılır ve görüntülenmez.

AQC Katkısı: Erişilebilirlik ve Kullanılabilirlik

<noscript> içeriği, Erişilebilirlik ve Kullanılabilirlik AQC'lerini destekler:

Erişilebilirlik:

Bazı kurumsal veya erişilebilirlik odaklı tarama ortamlarında JavaScript'in kısıtlanması yaygındır.

Bu etiket, bu kullanıcılara dahi en azından "temel içeriğe ulaşma" veya sorunu anlama şansı tanır.

İlerlemsel Geliştirme (Progressive Enhancement):

Bu etiketin ideal kullanımı, sadece bir uyarı vermek yerine, uygulamanın temel işlevselliğinin ( Bağlantılar, Statik Formlar ) saf HTML ile sağlanmasına olanak tanır.

Böylece, betik katmanı başarısız olsa bile, uygulamanın Yapı katmanı işlevselliğini sürdürür.

<noscript> etiketi, JavaScript'in olmadığı bir ortamda bile "hizmet sürekliliğini" sağlamaya yönelik minimal bir mimari sözleşmedir.

</>
<noscript> Etiketi Uygulama Örneği 
<!DOCTYPE html>
<html lang="tr">
    <head>
        <meta charset="UTF-8">
        <title>Noscript Etiketi Örneği</title>
    </head>
    <body>
    
        <noscript>
            <h2>Uyarı:</h2>
            <p>Bu sayfanın tüm özelliklerini kullanmak için lütfen tarayıcınızda JavaScript'i etkinleştirin.</p>
        </noscript>
        
    </body>
</html>