🪄 Sınav/Test Üret
Ana Sayfa / AÖF (Açıköğretim) / AÖF Web Tasarımı ve Kodlama / HTML5 ve CSS Temelleri / Konu Özeti
🎓 AÖF (Açıköğretim) 📚 AÖF Web Tasarımı ve Kodlama

📝 AÖF Web Tasarımı ve Kodlama: HTML5 ve CSS Temelleri Konu Özeti

HTML5 ve CSS Temelleri Konu Özeti

HTML5 Temelleri

HTML Nedir ve Temel Yapısı

HTML (HyperText Markup Language), web sayfalarını oluşturmak için kullanılan standart işaretleme dilidir. Tarayıcılar tarafından yorumlanarak görsel içeriklere dönüştürülür.

Önemli Not: HTML bir programlama dili değil, bir işaretleme dilidir.

Her HTML belgesi, tarayıcıya belge tipini bildiren <!DOCTYPE html> bildirimi ile başlar. Temel HTML belgesi yapısı aşağıdaki gibidir:

  • <html>: Tüm HTML içeriğini kapsayan kök etikettir.
  • <head>: Belge hakkında meta bilgiler (başlık, karakter seti, stil dosyaları vb.) içerir. Tarayıcıda görünmez.
  • <body>: Web sayfasının tarayıcıda görünen tüm içeriğini (metin, görseller, bağlantılar vb.) barındırır.

Temel HTML Etiketleri

  • <head> İçindeki Etiketler:
    • <title>: Tarayıcı sekmesinde veya pencere başlığında görünen sayfa başlığını belirler.
    • <meta>: Sayfa hakkında meta veri (karakter seti, açıklama, anahtar kelimeler vb.) sağlar. Örneğin, Türkçe karakter desteği için <meta charset="UTF-8"> kullanılır.
  • Başlıklar: Sayfadaki başlıkları tanımlamak için <h1>'den <h6>'ya kadar etiketler kullanılır. <h1> en önemli başlık, <h6> ise en az önemli başlığı temsil eder.
  • Paragraflar: Metin bloklarını oluşturmak için <p> etiketi kullanılır.
  • Metin Biçimlendirme Etiketleri:
    • <b> veya <strong>: Metni kalın yapar. <strong> anlamsal olarak daha güçlü bir vurgu ifade eder.
    • <i> veya <em>: Metni italik yapar. <em> anlamsal olarak vurgulu metin anlamına gelir.
    • <u>: Metnin altını çizer.
    • <mark>: Metni işaretler (vurgular).
    • <small>: Metni daha küçük gösterir.
    • <sub>: Alt simge metin. Örneğin, H<sub>2</sub>O.
    • <sup>: Üst simge metin. Örneğin, x<sup>2</sup>.
    • <br>: Tek satır atlaması (satır sonu).
    • <hr>: Yatay çizgi (konu değişimi).
  • Listeler:
    • <ul> (Unordered List): Sırasız liste (madde işaretli). İçindeki her bir öğe <li> etiketi ile tanımlanır.
    • <ol> (Ordered List): Sıralı liste (numaralı). İçindeki her bir öğe <li> etiketi ile tanımlanır.
  • Bağlantılar: Başka bir sayfaya veya aynı sayfa içinde bir konuma bağlantı vermek için <a> etiketi kullanılır. Hedef URL href özniteliği ile belirtilir.
    • Örnek: <a href="https://www.google.com">Google'a Git</a>
  • Görseller: Sayfaya görsel eklemek için <img> etiketi kullanılır. src özniteliği görselin yolunu, alt özniteliği ise görsel yüklenemediğinde veya ekran okuyucular için alternatif metni belirtir.
    • Örnek: <img src="resim.jpg" alt="Açıklama" width="300" height="200">

HTML Tabloları

Verileri satır ve sütunlar halinde düzenlemek için kullanılır.

  • <table>: Tabloyu tanımlar.
  • <tr> (Table Row): Tablo satırını tanımlar.
  • <th> (Table Header): Tablo başlık hücresini tanımlar. Genellikle kalın ve ortalanmış görünür.
  • <td> (Table Data): Tablo veri hücresini tanımlar.

Örnek Tablo Yapısı:

<table border="1">
  <tr>
    <th>Ad</th>
    <th>Soyad</th>
  </tr>
  <tr>
    <td>Ahmet</td>
    <td>Yılmaz</td>
  </tr>
</table>

HTML Formları (Basit)

Kullanıcılardan bilgi toplamak için kullanılır.

  • <form>: Formu tanımlayan etikettir. action ve method gibi öznitelikleri vardır.
  • <input>: Kullanıcıdan veri girişi almak için en çok kullanılan etikettir. type özniteliği ile farklı giriş türleri belirlenir (text, password, submit, radio, checkbox vb.).
    • Metin girişi: <input type="text" name="kullaniciAdi">
    • Gönderme butonu: <input type="submit" value="Gönder">

HTML5 Semantik Etiketler

Web sayfasının yapısını daha anlamlı hale getiren ve SEO için de önemli olan etiketlerdir:

  • <header>: Sayfanın veya bir bölümün başlığını veya giriş içeriğini içerir.
  • <nav>: Navigasyon bağlantılarını (menüleri) içerir.
  • <main>: Belgenin ana ve baskın içeriğini içerir.
  • <article>: Bağımsız, kendi başına anlamlı içerik parçası (blog yazısı, haber vb.).
  • <section>: Belgenin tematik olarak gruplandırılmış bir bölümünü temsil eder.
  • <aside>: Ana içerikten ayrı, ancak onunla ilgili içerik (sidebar, reklam bloğu vb.).
  • <footer>: Sayfanın veya bir bölümün altbilgisini içerir (telif hakkı, iletişim bilgileri vb.).

CSS Temelleri

CSS Nedir ve Kullanım Amaçları

CSS (Cascading Style Sheets), HTML belgelerinin görsel sunumunu (renkler, yazı tipleri, düzen vb.) tanımlamak için kullanılan stil sayfası dilidir. HTML içeriğini görsel tasarımından ayırarak web geliştirme sürecini daha düzenli ve yönetilebilir hale getirir.

Temel Amaç: İçerik (HTML) ve sunum (CSS) ayrımı yaparak web sitelerinin bakımını ve tasarımını kolaylaştırmak.

CSS Sözdizimi (Syntax)

Bir CSS kuralı, bir seçici (selector) ve bir veya daha fazla bildirimden (declaration) oluşur. Her bildirim bir özellik (property) ve bir değer (value) çiftidir.

seçici {
  özellik: değer;
  özellik2: değer2;
}
  • Seçici: Stillerin uygulanacağı HTML elementini hedefler.
  • Özellik: Değiştirilecek stil özelliğini belirtir (örn. color, font-size).
  • Değer: Özelliğe atanacak değeri belirtir (örn. blue, 16px).

CSS Ekleme Yöntemleri

CSS kodları HTML belgesine üç farklı şekilde eklenebilir:

  1. Harici (External) CSS: En yaygın ve önerilen yöntemdir. CSS kodları .css uzantılı ayrı bir dosyada tutulur ve HTML belgesine <link> etiketi ile bağlanır. 
    <head>
  <link rel="stylesheet" href="stil.css">
</head>
  2. Dahili (Internal) CSS: CSS kodları HTML belgesinin <head> bölümünde <style> etiketleri arasına yazılır. Tek bir sayfanın özel stilleri için uygundur. 
    <head>
  <style>
    body {
      background-color: lightblue;
    }
  </style>
</head>
  3. Satır İçi (Inline) CSS: Doğrudan HTML etiketinin style özniteliği içine yazılır. Sadece o etiketi etkiler ve genellikle özel durumlar veya hızlı testler için kullanılır. Bakımı zordur. 
    <p style="color: red; font-size: 14px;">Kırmızı metin.</p>

CSS Seçiciler (Selectors)

HTML elementlerini hedeflemek için kullanılırlar:

  • Element (Öğe) Seçici: Doğrudan HTML element adını hedefler. 
    p {
  color: blue;
}
  • Class (Sınıf) Seçici: Belirli bir class özniteliğine sahip elementleri hedefler. HTML'de class="sinifAdi" şeklinde tanımlanır, CSS'te nokta (.) ile kullanılır. Birçok element aynı sınıfa sahip olabilir. 
    .mavi-metin {
  color: blue;
}
  • ID (Kimlik) Seçici: Belirli bir id özniteliğine sahip tek bir elementi hedefler. HTML'de id="kimlikAdi" şeklinde tanımlanır, CSS'te diyez (#) ile kullanılır. Bir sayfada aynı id'den yalnızca bir tane olmalıdır. 
    #ana-baslik {
  font-size: 24px;
}

Temel CSS Özellikleri

Sık kullanılan bazı CSS özellikleri:

Özellik Açıklama Örnek Değerler
color Metin rengini ayarlar. red, #FF0000, rgb(255,0,0)
background-color Elementin arka plan rengini ayarlar. blue, #0000FF
font-family Metnin yazı tipini ayarlar. Arial, sans-serif
font-size Metnin boyutunu ayarlar. 16px, 1.2em, 120%
font-weight Metnin kalınlığını ayarlar. normal, bold, 400, 700
font-style Metnin stilini ayarlar (normal, italik). normal, italic
text-align Metnin yatay hizalamasını ayarlar. left, right, center, justify
width Elementin genişliğini ayarlar. 100px, 50%
height Elementin yüksekliğini ayarlar. 50px, auto
display Elementin nasıl görüntüleneceğini ayarlar. block, inline, inline-block, none

CSS Kutu Modeli (Box Model)

Her HTML elementi, CSS tarafından bir kutu olarak kabul edilir. Bu kutu modeli, bir elementin genişliğini, yüksekliğini, kenar boşluklarını, dolgusunu ve kenarlığını tanımlar. İçten dışa doğru sıralaması:

  • Content (İçerik): Elementin gerçek içeriği (metin, resim vb.). width ve height özellikleriyle boyutu ayarlanır.
  • Padding (Dolgusu): İçerik ile kenarlık arasındaki boşluktur. Arka plan rengini alır.
  • Border (Kenarlık): Dolgu ile dış kenar boşluğu arasındaki çizgidir.
  • Margin (Dış Kenar Boşluğu): Kenarlık ile diğer elementler arasındaki boşluktur. Şeffaftır.

Bu özellikler ayrı ayrı (margin-top, padding-left vb.) veya kısa yollarla (margin: 10px 20px;) ayarlanabilir.

  • padding: 10px; (Tüm kenarlara 10px dolgu)
  • margin: 5px 10px 15px 20px; (Üst, Sağ, Alt, Sol sırasıyla 5, 10, 15, 20px dış kenar boşluğu)
  • border: 1px solid black; (1px kalınlığında, düz, siyah kenarlık)

CSS Display Özelliği

Bir elementin nasıl görüntüleneceğini belirler:

  • display: block;: Tam genişlik kaplar, yeni bir satırdan başlar ve altındaki elementi yeni bir satıra iter (örn. <p>, <div>, <h1>).
  • display: inline;: Sadece içeriği kadar yer kaplar, yeni bir satırdan başlamaz ve diğer inline elementlerle aynı satırda devam eder (örn. <span>, <a>, <img>). width ve height özellikleri etki etmez.
  • display: inline-block;: inline gibi aynı satırda devam eder, ancak block gibi width ve height özelliklerini kabul eder.

İçerik Hazırlanıyor...

Lütfen sayfayı kapatmayın, bu işlem 30-40 saniye sürebilir.