HTML ve CSS Nedir İşlevleri Nelerdir Bilmeniz Gerekenler
- Uğurcan Yapar
- 31 Mar
- 3 dakikada okunur
Web dünyasına adım atarken en çok karşılaştığınız sorulardan biri "HTML nedir?" ve "CSS nedir?" olabilir. İnternet sitelerinin temel yapı taşları olan bu iki teknoloji, web sayfalarının görünümünü ve işlevselliğini belirler. Eğer web tasarımına ilgi duyuyorsanız veya kendi web sitenizi oluşturmak istiyorsanız, HTML ve CSS hakkında sağlam bir bilgiye sahip olmak şarttır. Bu yazıda, HTML ve CSS'nin ne olduğunu, işlevlerini ve nasıl kullanıldıklarını detaylı şekilde öğreneceksiniz.
HTML Nedir ve Ne İşe Yarar?
HTML, "HyperText Markup Language" ifadesinin kısaltmasıdır. Türkçeye "Köprü Metni İşaretleme Dili" olarak çevrilebilir. Web sayfalarının iskeletini oluşturur. Yani, bir web sitesinde gördüğünüz metinler, başlıklar, paragraflar, listeler, bağlantılar ve görsellerin yerleşimi HTML ile belirlenir.
HTML'nin Temel Özellikleri
Yapısal Dil: HTML, web sayfasının yapısını belirler. Başlıklar, paragraflar, tablolar gibi öğeler HTML etiketleriyle tanımlanır.
Bağlantılar (Linkler): Web sayfaları arasında geçişi sağlayan bağlantılar HTML ile oluşturulur.
Medya Desteği: Görseller, videolar ve ses dosyaları HTML ile sayfaya eklenir.
Formlar: Kullanıcıdan bilgi almak için kullanılan formlar HTML ile hazırlanır.
HTML Etiketlerine Örnekler
```html
<h1>Başlık</h1>
<p>Bu bir paragraf metnidir.</p>
<a href="https://www.ornek.com">Örnek Link</a>
<img src="resim.jpg" alt="Örnek Resim">
```
Bu örneklerde `<h1>` başlık, `<p>` paragraf, `<a>` bağlantı ve `<img>` resim etiketleridir.
CSS Nedir ve Ne İşe Yarar?
CSS, "Cascading Style Sheets" yani "Basamaklı Stil Sayfaları" anlamına gelir. HTML ile oluşturulan yapıya stil ve tasarım eklemek için kullanılır. Renkler, yazı tipleri, kenarlıklar, boşluklar ve sayfa düzeni gibi görsel özellikler CSS ile kontrol edilir.
CSS'nin Temel Özellikleri
Görsel Tasarım: Web sayfasının renkleri, yazı tipi boyutları ve arka planları CSS ile belirlenir.
Düzen Kontrolü: Sayfa içindeki öğelerin konumu, hizalanması ve boyutları CSS ile ayarlanır.
Responsive Tasarım: Farklı cihazlarda (telefon, tablet, bilgisayar) uyumlu görünüm sağlar.
Animasyon ve Geçişler: Sayfa öğelerine hareket ve efektler eklenebilir.
CSS Örnek Kodu
```css
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: #333333;
text-align: center;
}
p {
font-size: 16px;
line-height: 1.5;
}
```
Bu kodda sayfanın arka plan rengi, yazı tipi ve başlıkların rengi ayarlanmıştır.
HTML ve CSS Nasıl Kullanılır?
HTML ve CSS birlikte kullanılarak web sayfaları oluşturulur. HTML sayfanın iskeletini oluştururken, CSS bu iskelete stil verir. Bu ikisini birlikte kullanmak için birkaç yöntem vardır:
1. Satır İçi Stil (Inline CSS)
HTML etiketlerinin içine doğrudan stil eklenir.
```html
<p style="color: blue; font-size: 18px;">Mavi renkli paragraf</p>
```
2. Dahili Stil (Internal CSS)
HTML dosyasının `<head>` bölümünde `<style>` etiketi içinde CSS yazılır.
```html
<head>
<style>
p {
color: red;
font-size: 20px;
}
</style>
</head>
```
3. Harici Stil Sayfası (External CSS)
CSS kodları ayrı bir dosyada tutulur ve HTML dosyasına bağlanır.
```html
<head>
<link rel="stylesheet" href="stil.css">
</head>
```
Bu yöntem, büyük projelerde stil yönetimini kolaylaştırır.
HTML ve CSS Nasıl Kullanılır Örnek Proje
Basit bir web sayfası oluşturmak için şu adımları takip edebilirsiniz:
HTML dosyası oluşturun ve temel yapıyı yazın.
CSS dosyası oluşturun ve stil kurallarını ekleyin.
HTML dosyasına CSS dosyasını bağlayın.
Tarayıcıda dosyayı açarak sonucu görün.
```html
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Örnek Sayfa</title>
<link rel="stylesheet" href="stil.css">
</head>
<body>
<h1>Hoşgeldiniz</h1>
<p>Bu, HTML ve CSS kullanılarak oluşturulmuş basit bir web sayfasıdır.</p>
</body>
</html>
```
```css
body {
background-color: #e0f7fa;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
h1 {
color: #00796b;
text-align: center;
}
p {
font-size: 18px;
color: #004d40;
margin: 20px;
}
```
Bu örnek, HTML ve CSS'nin birlikte nasıl çalıştığını gösterir.
HTML ve CSS Öğrenirken Dikkat Etmeniz Gerekenler
Temel Etiketleri İyi Öğrenin: HTML'nin temel etiketlerini ve işlevlerini kavrayın.
CSS Seçicilerini Anlayın: Stil uygularken hangi seçicilerin kullanıldığını bilin.
Tarayıcı Uyumluluğu: Kodlarınızın farklı tarayıcılarda nasıl göründüğünü test edin.
Responsive Tasarım: Mobil cihazlarda da iyi görünmesi için CSS medya sorgularını kullanın.
Pratik Yapın: Öğrendiklerinizi küçük projelerde uygulayın.
HTML ve CSS'nin Günümüzdeki Önemi
Web siteleri ve uygulamalar, kullanıcı deneyimini artırmak için HTML ve CSS'ye dayanır. İyi yapılandırılmış HTML, arama motorları tarafından daha kolay anlaşılır. CSS ise kullanıcıların siteyi rahat ve estetik bulmasını sağlar. Ayrıca, modern web geliştirme araçları ve frameworkler de bu iki teknolojiyi temel alır.
Örneğin, popüler içerik yönetim sistemleri (WordPress, Joomla) ve front-end frameworkleri (Bootstrap, Tailwind CSS) HTML ve CSS üzerine kuruludur. Bu yüzden, web tasarım ve geliştirme alanında ilerlemek istiyorsanız, bu teknolojileri öğrenmek size büyük avantaj sağlar.
Yorumlar