Web geliştirmeye başlayan herkesin ilk öğrendiği iki temel teknoloji: HTML ve CSS’tir.
Bir web sitesinin iskeleti HTML, tasarımı ve görünümü CSS ile oluşturulur.
.
HTML (HyperText Markup Language), web sayfalarının yapısını oluşturan işaretleme dilidir.
HTML:
HTML = Sayfanın iskeleti
CSS (Cascading Style Sheets), HTML ile oluşturulan yapının tasarımını ve stilini belirler.
CSS ile:
CSS = Görünüm & Tasarım
HTML yapıyı oluşturur, CSS bu yapıyı boyar ve düzenler.
Modern web siteleri mobil uyumlu olmak zorundadır.
CSS’te media query kullanılır:
Bu sayede ekran küçüldüğünde tasarım değişir.
Kesinlikle evet.
Çünkü:
HTML ve CSS, web dünyasının temelidir.
JavaScript öğrenmeden önce bu iki konuyu sağlam öğrenmek gerekir.
Bir web sitesinin iskeleti HTML, tasarımı ve görünümü CSS ile oluşturulur.
.
HTML Nedir?
HTML (HyperText Markup Language), web sayfalarının yapısını oluşturan işaretleme dilidir.HTML:
- Başlıkları oluşturur
- Paragrafları tanımlar
- Görselleri ekler
- Linkleri oluşturur
- Formları yapar
HTML = Sayfanın iskeleti
Basit HTML Örneği
Kod:
<!DOCTYPE html>
<html>
<head>
<title>WebTurka</title>
</head>
<body>
<h1>Merhaba WebTurka</h1>
<p>Bu bir HTML örneğidir.</p>
</body>
</html>
HTML Temel Etiketler
| Etiket | Açıklama |
|---|---|
<h1> | Başlık |
<p> | Paragraf |
<a> | Link |
<img> | Görsel |
<form> | Form |
<input> | Giriş alanı |
<div> | Blok alan |
<span> | Satır içi alan |
CSS Nedir?
CSS (Cascading Style Sheets), HTML ile oluşturulan yapının tasarımını ve stilini belirler.CSS ile:
- Renk verilir
- Yazı tipi değiştirilir
- Margin / padding ayarlanır
- Responsive tasarım yapılır
- Animasyon eklenir
CSS = Görünüm & Tasarım Basit CSS Örneği
Kod:
body {
background-color: #111;
color: #fff;
font-family: Arial;
}
h1 {
color: orange;
}
HTML + CSS Birlikte Nasıl Çalışır?
HTML yapıyı oluşturur, CSS bu yapıyı boyar ve düzenler.
Kod:
<h1 class="baslik">WebTurka</h1>
Kod:
.baslik {
color: blue;
font-size: 40px;
}
Responsive Tasarım (Mobil Uyum)
Modern web siteleri mobil uyumlu olmak zorundadır.CSS’te media query kullanılır:
Kod:
@media (max-width: 768px) {
body {
background-color: red;
}
}
Modern CSS Özellikleri
- Flexbox
- Grid
- Animations
- Transitions
- Variables
HTML5 & CSS3 Neler Getirdi?
HTML5:
<video><audio><canvas>- Semantic etiketler (
<header>,<footer>,<section>)
CSS3:
- Border-radius
- Box-shadow
- Transform
- Gradient
- Animation
HTML / CSS Nerelerde Kullanılır?
- Kurumsal web siteleri
- Blog sistemleri
- Forum tasarımları
- Admin paneller
- Landing page’ler
- E-ticaret siteleri
Öğrenmek Mantıklı mı?
Kesinlikle evet.Çünkü:
- Web’in temelidir
- Front-End’in başlangıcıdır
- Freelancer iş bulma ihtimali yüksektir
- UI/UX alanına geçiş sağlar
HTML vs CSS Özet
| HTML | CSS |
|---|---|
| Yapı | Tasarım |
| İskelet | Stil |
| İçerik | Görünüm |
| Sayfanın temeli | Görsel düzen |
Sonuç
HTML ve CSS, web dünyasının temelidir.JavaScript öğrenmeden önce bu iki konuyu sağlam öğrenmek gerekir.