HTML CSS VE JS

HTML, CSS ve JavaScript: Web Geliştirmenin Temel Taşları

Web geliştirme, modern dünyada büyük bir önem kazanmış durumda ve bu alanda HTML, CSS ve JavaScript, web sitelerinin temel yapı taşlarını oluşturuyor. Bu üç teknoloji, web sayfalarının yapısını, stilini ve işlevselliğini kontrol etmek için birlikte kullanılır. İşte bu üç önemli teknolojiyi anlamak için bir rehber:

1. HTML (HyperText Markup Language)

HTML, web sayfalarının iskeletini oluşturan işaretleme dilidir. Bir web sayfasında gördüğünüz metinler, resimler, bağlantılar ve formlar gibi tüm içerikler HTML ile tanımlanır. HTML, tarayıcıya içeriğin nasıl yapılandırılacağını ve sunulacağını söyler.

HTML’nin Temel Yapısı:

  • Etiketler: HTML, içerik öğelerini tanımlamak için etiketler kullanır. Örneğin, <h1> etiketi başlıkları tanımlar, <p> etiketi paragrafları tanımlar.
  • HTML Dosyası: Her HTML dosyası, <html> etiketiyle başlar ve </html> etiketiyle biter. Sayfanın başlık, meta bilgiler gibi unsurları <head>, içeriği ise <body> etiketleri arasında yer alır.

Örnek HTML Kodu:

<!DOCTYPE html>
<html>
<head>
<title>Basit Bir Web Sayfası</title>
</head>
<body>
<h1>Merhaba Dünya!</h1>
<p>Bu benim ilk HTML sayfam.</p>
</body>
</html>

2. CSS (Cascading Style Sheets)

CSS, web sayfalarının stilini belirlemek için kullanılan bir stil dilidir. HTML, bir web sayfasının yapısını tanımlarken, CSS o sayfanın nasıl görüneceğini belirler. CSS ile renkler, yazı tipleri, hizalama, boşluklar ve hatta animasyonlar gibi birçok stil özelliği tanımlanabilir.

CSS’nin Kullanım Yöntemleri:

  • Inline CSS: HTML etiketleri içinde stil özellikleri yazılır.
  • Internal CSS: HTML dosyasının <head> bölümüne yazılır.
  • External CSS: Ayrı bir .css dosyasına yazılır ve HTML dosyasına bağlanır.

Örnek CSS Kodu:

body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}

h1 {
color: #333;
text-align: center;
}

p {
font-size: 16px;
color: #666;
}

3. JavaScript (JS)

JavaScript, web sayfalarına etkileşim ve dinamiklik kazandıran bir programlama dilidir. JavaScript, kullanıcıların bir düğmeye tıklaması, form doldurması ya da fareyi bir öğe üzerine getirmesi gibi olaylara yanıt verebilir. Ayrıca, veri işleme ve API ile iletişim kurma gibi ileri düzey işlevler sağlar.

JavaScript’in Kullanım Alanları:

  • Dinamik İçerik: Sayfa yüklendiğinde içerik değiştirme.
  • Form Doğrulama: Formlar gönderilmeden önce girişlerin doğrulanması.
  • Animasyonlar: Öğelerin hareketli bir şekilde görünmesi.
  • Veri İşleme: Web API’leri ile veri alışverişi yaparak dinamik veri yükleme.

Örnek JavaScript Kodu:

document.getElementById(“btn”).addEventListener(“click”, function() {
alert(“Butona tıkladınız!”);
});

4. HTML, CSS ve JavaScript Nasıl Birlikte Çalışır?

HTML, CSS ve JavaScript genellikle aynı sayfada birbirini tamamlar. HTML sayfanın içeriğini sunarken, CSS bu içeriğin görünümünü ayarlar ve JavaScript, sayfayı interaktif hale getirir.

Örnek Birleştirilmiş Yapı:

<!DOCTYPE html>
<html>
<head>
<title>HTML, CSS ve JS Birlikte</title>
<style>
body { background-color: #e0f7fa; }
h1 { color: #00796b; text-align: center; }
</style>
</head>
<body>
<h1>Merhaba, JavaScript Dünyası!</h1>
<button id=”btn”>Tıkla</button>

<script>
document.getElementById(“btn”).addEventListener(“click”, function() {
alert(“JavaScript ile etkileşim sağlandı!”);
});
</script>
</body>
</html>

5. Sonuç

HTML, CSS ve JavaScript, modern web geliştirme için olmazsa olmaz teknolojilerdir. HTML, yapı sağlar, CSS görsellik katar ve JavaScript, web sitelerini interaktif ve dinamik hale getirir. Bu üç teknoloji, birlikte kullanıldığında, kullanıcı deneyimini zenginleştiren güçlü ve işlevsel web siteleri oluşturmanıza olanak tanır.

Özet:

  • HTML: Web sayfalarının yapısını ve içeriğini oluşturur.
  • CSS: Sayfanın görünümünü ve stilini ayarlar.
  • JavaScript: Web sayfasını interaktif hale getirir.

Web geliştirmeye başlarken bu üç teknolojiye hakim olmak, modern, çekici ve işlevsel web siteleri oluşturmanın ilk adımıdır.

Related Posts

JavaScript ile Arama Filtreleme fonksiyonu için bir örnek

Açıklama:
Arama Kutusu: Kullanıcı, arama kutusuna bir şey yazdığında onkeyup olayı tetiklenir ve searchTable() fonksiyonu çalışır.
startsWith(): Arama terimi, hücredeki metnin başında yer alıyorsa o hücre vurgulanır.
highlight sınıfı: Arama terimiyle eşleşen hücreler sarı arka plana sahip olurken, diğer hücrelerin vurgulaması kaldırılır.
Nasıl Çalışır:
Kullanıcı, arama kutusuna bir kelime yazmaya başladığında, her harf yazıldığında arama fonksiyonu çalışır.
Fonksiyon, her hücreyi kontrol eder ve arama terimiyle eşleşenleri sarı renkle vurgular.
Arama terimiyle eşleşmeyen hücreler gizlenmez; yalnızca vurgulama kaldırılır.

Daha Fazlası..

Devam et..

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Bu site, istenmeyenleri azaltmak için Akismet kullanıyor. Yorum verilerinizin nasıl işlendiği hakkında daha fazla bilgi edinin.

You Missed

    JavaScript ile Arama Filtreleme fonksiyonu için bir örnek
      Matematik de e Sayısı – Euler Sayısı “e” Tüm Detaylar
        Matematik de i harfinin önemini ve neden kullanıldığını öğrenelim
          Fonksiyonlar Ile Vize Final Ortalaması Alıyoruz.
            PHP de 4 işlem
              PHP TC doğrulama