Bu rehber, Microsoft Word (İleri Seviye) kapsamında hazırlanmış Giriş Seviyesi düzeyinde kapsamlı bir eğitim materyalidir. Limit Bilgisayar Kursu eğitmenleri tarafından hazırlanan bu içerik, konuyu adım adım ve uygulamalı olarak ele almaktadır.
? Ücretsiz Döküman İndir
Bu blog yazısının tam dökümanını ücretsiz olarak indirebilir veya online görüntüleyebilirsiniz.
? İçerik
? HTML & CSS Temelleri — Sıfırdan Web Geliştirme
Bu ders, web geliştirmenin temellerini oluşturan HTML ve CSS'i sıfırdan öğretmektedir. Dersin sonunda kendi web sayfanızı oluşturabilecek seviyeye geleceksiniz.
? Bu Derste Öğrenecekleriniz: HTML yapısı, semantik elementler, formlar, CSS seçiciler, Box Model, Flexbox, Grid, responsive tasarım, ve ilk web sayfanızı oluşturma.
1. Web Nasıl Çalışır?
Bir web sayfasını ziyaret ettiğinizde şu süreç işler:
- Tarayıcı (Chrome, Firefox) URL'yi alır
- DNS Sunucusu alan adını IP adresine çevirir
- Web Sunucusu (IIS, Apache, Nginx) HTML dosyasını gönderir
- Tarayıcı HTML'i okur, CSS'i uygular, JavaScript'i çalıştırır
- Kullanıcı sayfayı görür
| Teknoloji | Rol | Benzetme |
|---|---|---|
| HTML | Yapı / İçerik | Evin iskeleti ve duvarları |
| CSS | Görünüm / Stil | Boya, dekorasyon, mobilya |
| JavaScript | Davranış / Etkileşim | Elektrik, su tesisatı, aydınlatma |
2. HTML Temelleri
2.1 Temel HTML Yapısı
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sayfa Başlığı</title>
<link rel="stylesheet" href="stil.css">
</head>
<body>
<h1>Merhaba Dünya!</h1>
<p>Bu benim ilk web sayfam.</p>
</body>
</html>
2.2 Temel HTML Etiketleri
| Etiket | Açıklama | Örnek |
|---|---|---|
<h1> - <h6> | Başlıklar (1 en büyük) | <h1>Ana Başlık</h1> |
<p> | Paragraf | <p>Bir metin...</p> |
<a> | Bağlantı (link) | <a href="sayfa.html">Tıkla</a> |
<img> | Resim | <img src="foto.jpg" alt="Açıklama"> |
<ul> / <ol> | Sırasız / Sıralı liste | <ul><li>Madde</li></ul> |
<div> | Genel kapsayıcı (blok) | <div class="kutu">...</div> |
<span> | Satır içi kapsayıcı | <span class="vurgu">...</span> |
<br> | Satır sonu | Metin satır<br>sonu |
<hr> | Yatay çizgi | Bölüm<hr>ayracı |
<strong> | Kalın (anlamsal) | <strong>Önemli</strong> |
<em> | İtalik (anlamsal) | <em>Vurgulanan</em> |
2.3 Semantik HTML5 Elementleri
HTML5 ile gelen anlamsal etiketler, sayfanın yapısını hem tarayıcıya hem de arama motorlarına açıklar:
<header> → Sayfa/bölüm başlığı (logo, menü) <nav> → Navigasyon menüsü <main> → Ana içerik (sayfada tek olmalı) <article> → Bağımsız içerik birimi (blog yazısı) <section> → Tematik bölüm <aside> → Yan panel (reklam, ilgili yazılar) <footer> → Alt bilgi (iletişim, telif) <figure> → Resim + alt yazı grubu <time> → Tarih/saat gösterimi
3. CSS Temelleri
3.1 CSS Dahil Etme Yöntemleri
| Yöntem | Kullanım | Öncelik |
|---|---|---|
| Harici CSS | <link rel="stylesheet" href="stil.css"> | Normal — Önerilen yöntem |
| Dahili CSS | <style> p { color: red; } </style> | Normal — Tek sayfa için |
| Satır İçi CSS | <p style="color: red;"> | En yüksek — Kaçınılmalı |
3.2 CSS Seçiciler
| Seçici | Söz Dizimi | Açıklama | Örnek |
|---|---|---|---|
| Element | p | Tüm <p> etiketleri | p { color: blue; } |
| Sınıf | .sinif | class="sinif" olanlar | .vurgu { font-weight: bold; } |
| ID | #kimlik | id="kimlik" olan (tek) | #baslik { font-size: 24px; } |
| Torun | div p | div içindeki tüm p'ler | nav a { color: white; } |
| Çocuk | div > p | div'in doğrudan çocuğu p | ul > li { margin: 5px; } |
| Pseudo-class | a:hover | Mouse üzerine gelince | a:hover { color: red; } |
3.3 Box Model — CSS'in Temeli
Her HTML elementi bir kutu (box) olarak düşünülür. Bu kutu dıştan içe doğru 4 katmandan oluşur:
┌─────────────── MARGIN (Dış boşluk) ───────────────┐ │ ┌─────────── BORDER (Kenarlık) ─────────────┐ │ │ │ ┌─────── PADDING (İç boşluk) ───────┐ │ │ │ │ │ │ │ │ │ │ │ CONTENT (İçerik) │ │ │ │ │ │ width × height │ │ │ │ │ │ │ │ │ │ │ └─────────────────────────────────────┘ │ │ │ └────────────────────────────────────────────┘ │ └─────────────────────────────────────────────────────┘
3.4 Flexbox Düzen
Tek boyutlu (satır veya sütun) düzenleme sistemidir:
/* Container */
.kapsayici {
display: flex;
justify-content: space-between; /* Yatay hizalama */
align-items: center; /* Dikey hizalama */
gap: 16px; /* Elemanlar arası boşluk */
flex-wrap: wrap; /* Satır taşması halinde alt satıra geç */
}
/* Öğeler */
.oğe {
flex: 1; /* Eşit genişlik paylaşımı */
min-width: 200px;
}
3.5 CSS Grid
İki boyutlu (satır + sütun) düzenleme sistemidir:
/* 3 sütunlu grid */
.grid-kapsayici {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 eşit sütun */
grid-template-rows: auto;
gap: 20px;
}
/* Belirli bir öğeyi 2 sütuna yay */
.genis-oge {
grid-column: span 2;
}
4. Responsive Tasarım
Web sayfanızın tüm ekran boyutlarında düzgün görünmesini sağlama tekniğidir.
4.1 Media Query
/* Mobil (0-767px) */
@media (max-width: 767px) {
.grid-kapsayici {
grid-template-columns: 1fr; /* Tek sütun */
}
.menu { display: none; }
.hamburger { display: block; }
}
/* Tablet (768-1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
.grid-kapsayici {
grid-template-columns: repeat(2, 1fr); /* 2 sütun */
}
}
/* Masaüstü (1024px+) */
@media (min-width: 1024px) {
.grid-kapsayici {
grid-template-columns: repeat(3, 1fr); /* 3 sütun */
}
}
? Proje: Kişisel Web Sayfası Oluşturun
- Yeni bir klasör oluşturun:
benim-sayfam/ index.htmldosyası oluşturunstil.cssdosyası oluşturun- Sayfanızda şunlar olsun:
- Header: Adınız ve navigasyon menüsü
- Ana bölüm: Kendinizi tanıtan bir paragraf
- Beceriler bölümü: HTML, CSS, JavaScript yüzdeleri
- Projeler: 3 kart düzeninde (Flexbox veya Grid ile)
- İletişim formu: Ad, e-posta, mesaj alanları
- Footer: Sosyal medya linkleri
- Responsive yapın: Mobil, tablet ve masaüstü uyumlu
- En az 3 farklı renk, 2 farklı font kullanın
? Bu Konuyu Profesyonelce Öğrenmek İster misiniz?
Limit Bilgisayar Kursu'nda Microsoft Word (İleri Seviye) eğitimini MEB onaylı sertifika ile tamamlayın. Uygulamalı eğitim, uzman eğitmenler ve birebir destek ile öğrenin.