Web tasarımı, dijital dünyada kendinizi ifade etmek veya projelerinizi sergilemek için en önemli becerilerden biridir. HTML ve CSS, modern web tasarımının temel taşlarını oluşturur. Bu rehberde, sıfırdan başlayarak HTML ve CSS’i öğrenmek isteyenler için kapsamlı bir giriş sunuyoruz.
1. Web Tasarımına Genel Bakış
Web tasarımı, görsel estetikle birlikte kullanıcı deneyimini optimize etmeyi amaçlayan bir süreçtir. Web sitelerini tasarlamak için iki temel dil kullanılır:
- HTML (HyperText Markup Language): Web sayfasının yapısını oluşturur.
- CSS (Cascading Style Sheets): Web sayfasının stilini ve düzenini belirler.
Bu iki teknoloji, birlikte çalışarak web sitelerinin hem işlevsel hem de estetik açıdan etkileyici olmasını sağlar.
2. HTML: Web Sayfasının Temeli
HTML, bir web sayfasının iskeletidir. Her HTML dosyası bir dizi etiketten (tag) oluşur. Bu etiketler, web tarayıcılarının içeriği nasıl görüntüleyeceğini belirtir.
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>Web Tasarım Rehberi</title>
</head>
<body>
<h1>Merhaba Dünya!</h1>
<p>Bu, ilk web sayfanız!</p>
</body>
</html>
HTML Etiketleri:
<html>: Tüm HTML belgesini kapsar.<head>: Sayfa hakkında meta bilgileri içerir (başlık, karakter seti vb.).<body>: Kullanıcıya gösterilecek içeriği barındırır.
3. CSS: Web Sayfasına Stil Eklemek
CSS, HTML’nin sade yapısını estetik bir tasarıma dönüştürmek için kullanılır. Renkler, yazı tipleri, düzenler ve diğer görsel ögeler CSS ile kontrol edilir.
CSS’in Kullanımı
CSS üç farklı şekilde kullanılabilir:
- Inline CSS: HTML etiketinin içine stil eklemek.
<p style="color: red;">Bu kırmızı bir paragraf!</p> - Internal CSS: HTML belgesinin
<head>kısmında stil tanımlamak.<style> body { background-color: lightblue; } </style> - External CSS: Harici bir dosya kullanarak stilleri uygulamak.
<link rel="stylesheet" href="styles.css">
Temel CSS Özellikleri
body {
font-family: Arial, sans-serif;
line-height: 1.6;
}
h1 {
color: darkblue;
text-align: center;
}
p {
color: gray;
font-size: 16px;
}
4. Web Tasarımı için Araçlar
Başarılı bir web tasarımı için bazı temel araçları öğrenmek önemlidir:
- Kod Editörleri: Visual Studio Code, Sublime Text veya Notepad++ gibi araçlarla HTML ve CSS kodlarınızı yazabilirsiniz.
- Tarayıcı Geliştirici Araçları: Google Chrome veya Firefox’ta yer alan geliştirici araçlarını kullanarak tasarımlarınızı test edebilirsiniz.
- Kaynaklar: MDN Web Docs, W3Schools gibi sitelerden öğrenme materyalleri bulabilirsiniz.
5. İlk Proje: Basit Bir Web Sayfası
Aşağıda, basit bir HTML ve CSS projesi örneği verilmiştir:
HTML (index.html)
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kişisel Web Sayfam</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Hoş Geldiniz</h1>
<p>Kendi web sayfanızı oluşturmaya başlayın!</p>
</header>
<main>
<section>
<h2>Hakkımda</h2>
<p>Ben bir web geliştirici adayıyım.</p>
</section>
<section>
<h2>İletişim</h2>
<p>Email: ornek@example.com</p>
</section>
</main>
<footer>
<p>© 2025 Web Tasarım Rehberi</p>
</footer>
</body>
</html>
CSS (styles.css)
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
header {
background: #333;
color: white;
text-align: center;
padding: 20px 0;
}
main {
padding: 20px;
}
section {
margin-bottom: 20px;
}
footer {
text-align: center;
background: #333;
color: white;
padding: 10px 0;
}
6. Mobil Uyumlu Tasarımlar (Responsive Design)
Modern web tasarımı, mobil cihazlarla uyumlu olmalıdır. CSS ile mobil uyumlu tasarımlar yapmak için medya sorguları kullanılır.
Örnek: Medya Sorgusu
@media (max-width: 768px) {
body {
font-size: 14px;
}
header h1 {
font-size: 20px;
}
}
7. Sonraki Adımlar
- JavaScript’i Öğrenin: Web sitenize etkileşim katmak için JavaScript öğrenmeye başlayabilirsiniz.
- Framework ve Kütüphaneler: Bootstrap, Tailwind gibi araçlarla daha hızlı tasarımlar yapabilirsiniz.
- Pratik Yapın: Kendi projelerinizi oluşturarak öğrendiklerinizi pekiştirin.
Web tasarımına başlamanın en iyi yolu, küçük adımlarla pratik yapmaktır. HTML ve CSS’i öğrendikten sonra, hayalinizdeki projeleri hayata geçirmeye bir adım daha yaklaşmış olacaksınız. İyi çalışmalar!
