HTML/CSS

HTML, bir web sayfasının yapısını yazmak için kullanılan işaretleme dilidir. Başlık, paragraf, görsel, bağlantı ve form HTML ile sayfaya konur. HTML bir programlama dili değildir. Tarayıcıya «burada ne var» diye söyler.

CSS ise bu yapının görünüşünü yazar. Renk, boyut, yazı tipi, boşluk ve öğelerin yan yana mı alt alta mı duracağı CSS'in işidir. CSS de bir programlama dili değildir. Bir biçim dilidir.

Tarayıcı önce HTML'i okur, sonra CSS kurallarını uygun öğelere uygular. Bir düğmeye basılınca ne olacağı ise genellikle JavaScript ile yazılır.

HTML ve CSS bir web sayfasının görünen kısmında kullanılır:

• Yazılar ve sade siteler
• Formlar ve düğmeler
• Menü ve sayfa düzeni
• Görsel ve metnin yerleştirilmesi
• Telefon ve bilgisayar ekranına uyan görünüm

Birçok web uygulamasında gördüğünüz katman da HTML ve CSS üzerine kurulur. Hesaplamak ve veri saklamak başka bir kısmın işidir.

HTML ve CSS ile sayfanın yapısını ve görünüşünü hazırlayabilirsiniz:

• Başlık ve metin yazmak
• Görsel ve bağlantı eklemek
• Düğme ve formun görünüşünü vermek
• Öğeleri satır ve sütun gibi dizmek
• Ekran genişliğine göre görünüşü değiştirmek

Basit örnek

<h1>Nibras Code</h1>
<p>Sade bir sayfa.</p>

Bu HTML bir başlık ve bir paragraf oluşturur. Renk ve boyut ayrı CSS ile yazılır.

İlk HTML sayfasını yazmak zor değildir. Birkaç etiket ve bir CSS kuralı tarayıcıda sonuç gösterir. Zorluk sayfa büyüdükçe, öğeler iç içe girdikçe ve aynı görünüşü birkaç ekranda korumak gerektiğinde başlar.

Başlangıç için şu sıra faydalıdır:

1. Başlık, paragraf, bağlantı ve görsel etiketleri
2. Etiketin açılışı ve kapanışı
3. CSS seçicisi: kural hangi öğeye uygulanır
4. Renk, yazı tipi ve boşluk
5. Genişlik ve yükseklik
6. Öğeleri yan yana dizmek
7. Küçük bir sayfayı kendiniz yazmak

Hazır şablonu kopyalamaktan çok, küçük sayfayı kendiniz değiştirmek daha iyi öğretir.

Avantajları

• Sade bir sayfa tarayıcıda doğrudan açılır
• İlk örnekler kısadır ve sonuç hemen görünür
• Neredeyse her web sayfası bu iki dilin üzerindedir
• HTML içeriği, CSS görünüşü ayrı tutmaya yardım eder
• Dilin kendisi için ayrı bir ücret yoktur

Dezavantajları

• Tek başlarına hesap, giriş ve veri mantığı yazmazlar
• Büyük sitede CSS kuralları birbirine karışabilir
• Aynı sayfayı birkaç tarayıcıda kontrol etmek gerekir
• Görünüş bozulursa sebep çoğu zaman kapanmamış etiket veya uymayan seçicidir

Bir HTML öğesi genellikle açılış ve kapanış etiketinden oluşur. Bir CSS kuralı ise seçici ve süslü parantez içindeki özelliklerden oluşur.

HTML

<h1>Nibras Code</h1>
<p>Bu bir paragraftır.</p>
<a href="https://nibrascode.com">Siteye git</a>

CSS

h1 {
  color: #1d4ed8;
  font-size: 32px;
}

p {
  line-height: 1.6;
}

Nereye yazılır

CSS ayrı bir dosyada durup HTML'e bağlanabilir. Küçük örnekte style etiketi içine de yazılabilir. Büyük sayfada ayrı dosya daha derli topludur.

Küçük sayfa

<!DOCTYPE html>
<html lang="tr">
  <head>
    <meta charset="utf-8">
    <title>Nibras Code</title>
    <style>
      body { font-family: sans-serif; }
      h1 { color: #1d4ed8; }
    </style>
  </head>
  <body>
    <h1>Nibras Code</h1>
    <p>HTML yapıyı, CSS ise rengi yazar.</p>
  </body>
</html>

Bağlantı ve görsel

<a href="https://nibrascode.com">Nibras Code</a>
<img src="logo.png" alt="Nibras Code işareti">

Sınıf ile biçim

<p class="not">Kısa not.</p>

<style>
  .not {
    background: #f3f4f6;
    padding: 12px;
  }
</style>

Yukarıdaki kısa örnekler bir parçayı gösterir. Bunlar tarayıcıda açabileceğin küçük sayfalardır. Dosyayı .html diye kaydet. Bir rengi veya sözü değiştir, yeniden kaydet ve sayfayı yenile. HTML ne olduğunu söyler. CSS nasıl göründüğünü söyler.

Bir kart

article kutudur. h2 içindeki başlıktır, p cümledir. kart sınıfı kancadır. CSS o sınıftaki her öğeye genişlik, açık zemin, ince çizgi ve iç boşluk verir. Sınıf olmazsa sözler yine görünür, ama kutu olmaz.

<article class="kart">
  <h2>Python</h2>
  <p>Oxunaqlı dildir. Kiçik proqram üçün uyğundur.</p>
</article>

<style>
  .kart {
    max-width: 280px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
  }
</style>

Kart 280 pikselden geniş olmaz. Geniş ekranda sayfanın tamamına yayılmaz.

Yan yana iki bağlantı

nav bağlantıları tutar. CSS olmazsa alt alta dururlar ya da altı çizili mavi söz kalırlar. display: flex onları yan yana koyar. gap aralarındaki boşluktur. text-decoration: none alt çizgiyi kaldırır. href içindeki adres bağlantının gittiği yerdir.

<nav>
  <a href="/programming/python">Python</a>
  <a href="/programming/javascript">JavaScript</a>
</nav>

<style>
  nav { display: flex; gap: 16px; }
  nav a { color: #1d4ed8; text-decoration: none; }
</style>

Sözler mavi kalır. Alt çizgi gider. flex kalkınca satır tarayıcının olağan düzenine döner.

Kısa bir form

label alanın adıdır. input kişinin yazdığı boş satırdır. button basılan yerdir. Formun kendisi bir sütundur: önce alan, sonra düğme, arada küçük boşluk. Bu örnek adı bir yere göndermez. Göndermek sunucu ya da JavaScript ister. Burada yalnız biçimi görürsün.

<form>
  <label>
    Ad
    <input name="ad" type="text">
  </label>
  <button type="submit">Göndər</button>
</form>

<style>
  form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 240px;
  }
  input, button { padding: 8px; }
</style>

Alan ve düğme aynı genişliktedir, 240 piksel. Yazılan ad bu sayfa ile tek başına saklanmaz.

Koyu şeritli sayfa

Bu bir parça değil, bütün dosyadır. header üstteki koyu şerittir. main onun altındaki beyaz yerdir. body { margin: 0 } tarayıcının kendi eklediği beyaz çerçeveyi kaldırır. Renk ve boşluk CSS'tir. Nibras Code ve Birinci qeyd sözleri HTML'dir. Dosyayı note.html diye kaydet ve aç.

<!DOCTYPE html>
<html lang="az">
<head>
  <meta charset="utf-8">
  <title>Qeyd</title>
  <style>
    body { margin: 0; font-family: sans-serif; }
    header { background: #111827; color: white; padding: 16px; }
    main { padding: 16px; }
  </style>
</head>
<body>
  <header>Nibras Code</header>
  <main>
    <h1>Birinci qeyd</h1>
    <p>Bu sətir əsas hissədə durur.</p>
  </main>
</body>
</html>

Üst şerit koyudur, üstündeki yazı beyazdır. Başlık şeridin içinde değil, altında durur.

HTML nedir?

HTML, web sayfasının yapısını yazan işaretleme dilidir. Başlık, metin, görsel ve bağlantı onunla verilir.

CSS nedir?

CSS, sayfanın görünüşünü yazan biçim dilidir. Renk, boyut, yazı tipi ve düzen onunla verilir.

HTML bir programlama dili midir?

Hayır. HTML bir işaretleme dilidir. Sayfada ne olduğunu söyler, hesap ve koşul yazmaz.

CSS olmadan sayfa açılır mı?

Evet. Tarayıcı HTML'i yine gösterir. Görünüş sade kalabilir.

HTML, CSS ve JavaScript aynı mıdır?

Hayır. HTML yapıyı, CSS görünüşü, JavaScript ise davranışı yazar.

Öğrenmek için ayrı bir program almak gerekir mi?

Hayır. Başlangıç için bir metin düzenleyici ve tarayıcı yeter. Dosyayı .html olarak kaydedip tarayıcıda açabilirsiniz.

HTML ve CSS ücretsiz mi?

Evet. Onları yazmak ve tarayıcıda açmak için dilin kendisine ait bir ücret yoktur.