Web geliştirmenin temel taşları olan HTML5 ve CSS3, modern web siteleri ve uygulamaları oluşturmak için güçlü bir ikili oluşturuyor. HTML5, içeriği yapılandırmak ve sunmak için kullanılırken, CSS3 görünümü, stil ve animasyonları kontrol eder. Bu makalede, HTML5 ve CSS3’ün ne olduğunu, nasıl birbirleriyle etkileşimde bulunduklarını ve web geliştirmenin neden bu teknolojilere dayandığını keşfedeceğiz.
HTML5: İçerik ve Yapılandırma
HTML5, HyperText Markup Language’ın (Hypertext İşaretleme Dili) en son sürümüdür ve web sayfalarını oluşturmak için kullanılan temel bir işaretleme dilidir. HTML5, aşağıdaki gibi önemli özellikleri içerir:
- Yenilikçi Etiketler: HTML5, semantik ve açıklayıcı etiketlerle zenginleştirilmiştir. Örneğin,
<header>,<nav>,<article>,<footer>gibi etiketler sayesinde belgenin yapısı daha anlamlı ve tarayıcılar ile arama motorları için daha anlaşılır hale gelir.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 ve CSS3 Blogu</title>
</head>
<body>
<header>
<h1>Web Geliştirme İkinci Evrimi</h1>
<p>HTML5 ve CSS3 ile Tanışın</p>
</header>
<nav>
<ul>
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Hakkımızda</a></li>
<li><a href="#">İletişim</a></li>
</ul>
</nav>
<article>
<h2>HTML5 Nedir?</h2>
<p>HTML5, web sayfalarını oluşturmak ve yapılandırmak için kullanılan bir işaretleme dilidir...</p>
</article>
<footer>
<p>© 2024 HTML5 ve CSS3 Blogu. Tüm hakları saklıdır.</p>
</footer>
</body>
</html>
- Gelişmiş Form Elemanları: HTML5, gelişmiş form elemanları ekleyerek kullanıcı deneyimini iyileştirir.
<input type="date">,<input type="email">gibi yeni özelliklerle form işlemleri daha etkili hale gelir.
CSS3: Tasarım ve Animasyon
CSS3, Cascading Style Sheets’in en son sürümüdür ve HTML belgelerini stilize etmek, düzenlemek ve animasyon eklemek için kullanılır. CSS3’ün bazı önemli özellikleri şunlardır:
- Gelişmiş Seçiciler: CSS3, daha karmaşık ve hedeflenmiş seçicileri destekler. Bu, belgelerin belirli bölümlerini daha hassas bir şekilde hedeflemeyi mümkün kılar.
/* Örneğin: İlk çocuk elemanını seçmek */
article p:first-child {
color: #ff0000;
}
- Döşeme (Grid) ve Esnek Kutu (Flexbox) Modelleri: CSS3, sayfa düzenini oluşturmak için döşeme ve esnek kutu modellerini içerir. Bu, sayfa düzenini daha esnek ve kullanışlı hale getirir.
/* Örneğin: Flexbox kullanımı */
nav {
display: flex;
justify-content: space-around;
}
- Animasyon ve Geçiş Efektleri: CSS3 ile animasyonlar ve geçiş efektleri eklemek oldukça kolaydır. Bu, web sayfanıza canlılık katar ve kullanıcı deneyimini artırır.
/* Örneğin: Hover üzerinde geçiş efekti */
a:hover {
color: