HTML ve CSS ile Web Tasarımının Temelleri
8 Ekim 2024
HTML ve CSS ile Web Tasarımının Temelleri
HTML (HyperText Markup Language) ve CSS (Cascading Style Sheets), web sayfalarını oluşturmak ve tasarlamak için kullanılan temel teknolojilerdir. HTML, web sayfalarının yapısını belirlerken, CSS, sayfanın görünümünü düzenler. Bu yazıda, HTML ve CSS’in temellerini ve nasıl birlikte çalıştıklarını basit bir şekilde anlatacağım.
1. HTML: Web Sayfasının Temel Yapısı
HTML, bir web sayfasının iskeletini oluşturan ve içerik ile yapıyı tanımlayan bir işaretleme dilidir. HTML, her şeyin başlangıcıdır ve kullanıcıya gösterilen içeriği tanımlar.
HTML, etiketlerden oluşur. Bu etiketler, sayfadaki metin, görseller, bağlantılar, formlar, tablolar ve daha fazlasını belirtir. HTML etiketleri genellikle açılış ve kapanış etiketlerinden oluşur.
HTML Temel Yapısı
Bir HTML belgesinin temel yapısı aşağıdaki gibidir:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML ve CSS ile Web Tasarımı</title>
</head>
<body>
<header>
<h1>HTML ve CSS ile Web Tasarımı</h1>
</header>
<section>
<p>Web tasarımı yaparken HTML ve CSS'in nasıl çalıştığını öğrenmek çok önemlidir.</p>
</section>
<footer>
<p>© 2024 Web Tasarımı</p>
</footer>
</body>
</html><!DOCTYPE html>: HTML5 belgesinin başında yer alır ve belge türünü belirtir.
<html>: HTML belgesinin başlangıcıdır.
<head>: Sayfanın başlık, karakter seti, stil dosyası gibi meta bilgilerini içerir.
<body>: Sayfanın görünen kısmıdır ve tüm içerik burada yer alır.
<header>, <section>, <footer>: Sayfa yapılarını tanımlar. Bu etiketler semantik etiketlerdir, yani içeriğin anlamını belirtir.
2. CSS: Web Sayfasının Görünümü
CSS, web sayfalarının stilini belirler. CSS ile sayfanın renkleri, yazı tipleri, düzeni ve genel tasarımı ayarlanır. HTML ile içerik eklerken, CSS ile bu içeriğin nasıl görüneceğini kontrol ederiz.
CSS Temel Kullanımı
CSS yazarken, HTML öğelerine stil vermek için selector, property ve value kullanılır. Aşağıda, basit bir CSS örneği yer alıyor:
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}h1 {
color: #333;
text-align: center;
}p {
color: #555;
line-height: 1.5;
}
body: Sayfanın tüm gövdesine stil verir.
h1: Başlık 1 (en büyük başlık) etiketi için stil uygular.
p: Paragraf etiketinin stilini belirler.
CSS, stil dosyasını HTML belgesine şu şekilde dahil edebiliriz:
Inline (Doğrudan HTML içinde): HTML etiketleri içinde, style özniteliği ile stil yazılabilir.
<h1 style="color: blue;">Merhaba Dünya!</h1>Internal (HTML dosyasına gömülü): CSS kodları, HTML dosyasının <head> bölümünde yer alan <style> etiketleri arasında yazılabilir.
<style>
h1 {
color: blue;
}
</style>
External (Ayrı CSS Dosyası): En yaygın kullanılan yöntemdir. CSS kodları ayrı bir .css dosyasına yazılır ve HTML dosyasına link ile bağlanır.
<link rel="stylesheet" href="styles.css">
3. HTML ve CSS Birlikte Çalışması
HTML ve CSS’in nasıl birlikte çalıştığını daha iyi anlayabilmek için, aşağıdaki basit örneği inceleyelim:
HTML Dosyası (index.html)
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>HTML ve CSS Örneği</title>
</head>
<body>
<header>
<h1>HTML ve CSS ile Web Tasarımı</h1>
</header>
<section>
<p>Bu, HTML ve CSS kullanarak tasarlanmış basit bir sayfadır.</p>
</section>
</body>
</html>
CSS Dosyası (styles.css)
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}h1 {
color: #333;
text-align: center;
margin-top: 50px;
}section {
padding: 20px;
text-align: center;
}p {
font-size: 18px;
color: #555;
}
Bu örnekte, HTML sayfasındaki içerikler CSS ile stilize edilmiştir. h1 başlığının rengi, p paragrafının boyutu ve renk tonu gibi özellikler CSS ile ayarlanmıştır.
4. HTML ve CSS İpuçları
Responsive Tasarım: Web sitenizin mobil cihazlarda da düzgün görünmesi için responsive tasarım uygulamak önemlidir. CSS ile @media queries kullanarak farklı ekran boyutlarına uygun stiller tanımlayabilirsiniz.
Flexbox ve Grid: CSS ile modern layout sistemleri kullanmak, karmaşık düzenleri kolayca oluşturmanızı sağlar. Flexbox ve Grid gibi sistemlerle esnek ve dinamik tasarımlar oluşturabilirsiniz.
Web Fontları Kullanma: Google Fonts gibi kaynaklardan özel yazı tipleri kullanarak sayfanızı daha özgün hale getirebilirsiniz.
Sonuç
HTML ve CSS, web tasarımının temel taşlarıdır. HTML, içeriği yapılandırırken, CSS bu içeriği estetik olarak düzenler. Bu iki teknoloji, güçlü bir web tasarımı oluşturmanın temelini atar. Hem HTML hem de CSS hakkında daha fazla bilgi edinmek, web geliştiricisi olarak becerilerinizi geliştirmenize yardımcı olacaktır.