Podit
Bu çalışma materyali, kullanıcı tarafından sağlanan kopyalanmış metinler ve ders ses kaydı transkripti kaynaklarından derlenmiştir.
🌐 Web Programlamada Yeni Eğilimler: HTML, HTML5 ve CSS3 Temelleri
Bu ünite, modern web sayfalarının temel yapı taşları olan HTML, HTML5 ve CSS3 teknolojilerini detaylı bir şekilde incelemektedir. Amacımız, bu materyali tamamladığınızda HTML elemanları ile sayfa tasarlayabilme, HTML5'in gelişmiş özelliklerini entegre edebilme ve CSS kullanarak tasarımlarınızı geliştirebilme bilgi ve becerilerine sahip olmanızdır.
📚 Anahtar Kavramlar
- HTML: Hiper Metin İşaretleme Dili
- HTML5: HTML'in en güncel sürümü
- CSS3: Basamaklı Stil Sayfaları'nın en güncel sürümü
- Semantik Web: Anlamsal web sayfaları oluşturma
- W3C: World Wide Web Consortium (Web standartlarını belirleyen kuruluş)
1️⃣ HTML: Temel Yapı ve Etiketler
HTML (Hyper Text Markup Language), internet sayfalarını tasarlamak için kullanılan bir metin işaretleme dilidir. 📝 World Wide Web Consortium (W3C) tarafından belirlenen standartlar sayesinde, web sayfaları daha hızlı yüklenir ve arama motorları tarafından daha iyi indekslenir. HTML, kendi başına çalışan programlar üretemediği için tam olarak bir programlama dili sayılmaz. Web tarayıcıları tarafından yorumlanarak görsel hale getirilir ve tarayıcıya göre görünüm farklılıkları gösterebilir.
1.1. Metin Editörleri 💻
Web sayfası kodlamak için Not Defteri gibi basit metin editörleri yeterli olsa da, Notepad++ gibi gelişmiş editörler geliştirme sürecini kolaylaştırır. Notepad++'ın bazı özellikleri:
- ✅ Sözdizimi Vurgulama (Syntax Highlighting): HTML etiketlerini tanıyarak farklı renklerde gösterir, hataları tespit etmeye yardımcı olur.
- ✅ Çoklu Belge Desteği: Aynı anda birden fazla belgeyle çalışabilme.
- ✅ Birden Fazla Programlama Dili Desteği: HTML dışında diğer dilleri de tanır.
- ✅ Sayfa Ön İzleme: Yazılan web sayfasının tarayıcılarda (Internet Explorer, Firefox) ön izlemesini yapma imkanı (örn. Ctrl+Alt+Shift+I for IE, Ctrl+Alt+Shift+X for Firefox).
1.2. Temel HTML Belge Yapısı 🏗️
Bir web sayfasının temel yapısı aşağıdaki gibidir:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="utf-8">
<title>İlk HTML5 Sayfam</title>
</head>
<body>
Yaşasın HTML5 Öğreniyorum
<!-- Bu bir yorum satırıdır ve tarayıcıda görünmez -->
</body>
</html>
<!DOCTYPE html>: Sayfanın HTML5 sürümü olduğunu belirtir.<html>: Tüm HTML kodlarını içerir.lang="tr"sayfanın dilini Türkçe olarak ayarlar.<head>: Sayfa başlığı (<title>) ve karakter seti (<meta charset="utf-8">) gibi doğrudan kullanıcıya gösterilmeyen bilgileri barındırır.<body>: Kullanıcıya gösterilecek tüm içeriği içerir.- HTML etiketleri
<etiket_adı>şeklinde açılır ve</etiket_adı>şeklinde kapatılır. Yorum satırları<!-- yorum -->ile belirtilir.
1.3. Temel HTML Etiketleri 🏷️
- Başlık Etiketleri:
<h1>'den<h6>'ye kadar başlık seviyelerini belirtir.<h1>en büyük,<h6>en küçük başlığı temsil eder.<h1>Başlık 1</h1> <h2>Başlık 2</h2> - Paragraf Etiketi:
<p>etiketi metin paragrafları oluşturmak için kullanılır. Her paragraf yeni bir satırda başlar.<p>Bu ilk paragrafımız.</p> - Bağlantı Ekleme:
<a>etiketi başka web sayfalarına bağlantı (link) vermek için kullanılır.hrefözelliği bağlantı adresini belirtir.<a href="http://www.anadolu.edu.tr/">Anadolu Üniversitesi</a> - Metin Biçimlendirme Etiketleri:
<strong>veya<b>: Metni kalın yapar.<em>veya<i>: Metni eğik (italik) yapar.<sub>: Metni alt yazı yapar.<sup>: Metni üst yazı yapar.<del>: Metnin üzerini çizer.<u>: Metnin altını çizer.<small>: Metnin fontunu küçültür.<big>: Metnin fontunu büyütür.<tt>: Metni daktilo fontunda yazar.<cite>: Metni alıntı olarak belirtir.<abbr>: Kısaltmanın tanımınıtitleözelliği ile gösterir.<br/>: Bir satırlık boşluk oluşturur (boş etiket).<hr/>: Yatay bir çizgi oluşturur (boş etiket).
- Liste Etiketleri:
- Sıralı Liste (
<ol>): Numaralandırılmış listeler için kullanılır.type(1, i, I, a, A) vestartözellikleri vardır. - Sırasız Liste (
<ul>): İşaretli listeler için kullanılır.type(disc, circle, square) özelliği vardır. - Liste Elemanı (
<li>): Her iki liste türünde de elemanları belirtmek için kullanılır.
<ol type="i"><li>Birinci Eleman</li></ol> <ul type="square"><li>Alt eleman</li></ul> - Sıralı Liste (
- Tanım Listesi Etiketi:
<dl>tanım listesini,<dt>alt başlığı,<dd>ise başlığa ait bilgiyi tanımlar.<dl><dt>Meyveler</dt><dd>Elma</dd></dl> - Tablo Etiketi:
<table>tabloyu,<tr>satırı,<td>hücreyi,<th>başlık hücresini oluşturur.borderözelliği çerçeve kalınlığını ayarlar.colspanverowspanözellikleri hücre birleştirmek için kullanılır.<table border="1"> <tr><th>Başlık</th></tr> <tr><td>Hücre</td></tr> </table>
2️⃣ HTML5: Gelişmiş Özellikler ve Semantik Etiketler
HTML5, web sayfalarının yapısını semantik web kavramını destekleyecek şekilde geliştirmiştir. Bu anlamsal etiketler, arama motorlarının sayfaları daha anlamlı indekslemesine yardımcı olur ve mobil cihazlarla daha uyumlu web sayfaları oluşturmayı kolaylaştırır.
2.1. HTML5 Semantik Etiketleri 🏷️
<header>: Sayfanın tanımı, başlığı gibi bilgileri içerir.<nav>: Sayfa içi veya dışı bağlantılar için kullanılır (navigasyon menüsü).<article>: Bir makale veya yazı alanını temsil eder.<section>: HTML sayfası içinde bir bölümü belli eder.<aside>: Yan menü veya ana içerikle ilişkili ek bilgileri içerir.<footer>: Bir sayfa veya bölüm için alt bilgi (telif hakkı, iletişim vb.).<address>: İletişim bilgilerinin yer aldığı bölümdür.
2.2. Detay ve Özet Etiketi 💡
<details>ve<summary>etiketleri, özet bilgiyi gösterip detayları gizlemek için kullanılır.<details> <summary>Özet Başlık</summary> <p>Özetin Devamı...</p> </details>
2.3. Medya Etiketleri 🎬
HTML5, web sayfalarına ses ve video eklemeyi kolaylaştırmıştır.
- Resim Etiketi (
<img>): Görsel ögeler eklemek için kullanılır.src: Resmin yolu.alt: Resmin alternatif metni (arama motorları ve erişilebilirlik için önemlidir).<figcaption>: Resmin altına başlık eklemek için kullanılır.
<figure> <img src="pasta.jpg" alt="doğum günü pastası"> <figcaption>Pasta resmi</figcaption> </figure> - Video Etiketi (
<video>): Video oynatıcı eklemek için kullanılır. Flash gibi eklentilere ihtiyaç duymaz.width,height: Genişlik ve yükseklik.controls: Oynatıcı kontrollerini gösterir.autoplay: Video hazır olur olmaz oynatmaya başlar.loop: Video bittiğinde yeniden başlar.muted: Video ilk açıldığında sesi kapalı olur.poster: Video oynatılana kadar ekranda bir resim gösterir.preload: Sayfa yüklendiğinde videonun yüklenip yüklenmeyeceğini ayarlar (auto, metadata, none).<source>: Farklı video formatlarını belirtir.
<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> </video> - Ses Dosyası Etiketi (
<audio>): Ses dosyası oynatıcı eklemek için kullanılır. Video etiketiyle benzer kontrol özelliklerine sahiptir.<audio controls> <source src="ses.mp3" type="audio/mpeg"> </audio>
2.4. HTML5 Yeni Giriş Tipleri 📝
HTML5, kullanıcı girişlerini daha spesifik hale getiren yeni input tipleri sunar. Eski tarayıcılar bu tipleri tanımazsa standart metin girişi gibi davranır.
type="date": Tarih seçimi.type="datetime-local": Tarih ve zaman seçimi.type="email": E-posta girişi (mobil klavyede '@' işareti çıkar).type="month": Ay ve yıl seçimi.type="time": Saat seçimi.type="week": Hafta ve yıl seçimi.type="url": URL girişi (mobil klavyede URL'ye özel tuşlar çıkar).type="tel": Telefon numarası girişi (mobil klavyede telefon çevirici ekranı çıkar).type="search": Arama kelimeleri girişi.type="range": Belirli aralıkta sayı seçimi (min,max,valueözellikleri).type="number": Sayısal değer girişi (min,max,stepözellikleri).type="color": Renk seçimi.<input type="date" name="tarih_giris"> <input type="color" name="renksecim">
2.5. Diğer HTML5 Etiketleri ➕
<canvas>: JavaScript yardımıyla grafik ve çizim alanları oluşturur.<canvas id="myCanvas" width="200px" height="100px" style="border:1px solid #000000;"></canvas><mark>: Metin içerisinde vurgulanan metni tanımlar (varsayılan rengi sarıdır).<p>HTML5 öğrenmek <mark>çok</mark> keyifli.</p><meter>: Bilinen bir aralık içindeki değeri görsel olarak verir (min,max,valueözellikleri).<meter value="30" min="0" max="100"></meter><progress>: Bir işlemin ilerleme sürecini görsel olarak verir (value,maxözellikleri).<progress value="50" max="100"></progress><datalist>: Giriş elemanları için önceden tanımlanmış seçenekler listesi sunar (otomatik tamamlama).<input list="meyveler" name="meyveler"> <datalist id="meyveler"><option value="Elma"></datalist><output>: Hesaplama sonucunu tanımlar.<form oninput="x.value=parseInt(a.value)+parseInt(b.value)"> <input type="number" id="a" value="50"> + <input type="number" id="b" value="50"> = <output name="x" for="a b"></output> </form><geolocation>: Kullanıcının konum bilgisini alır (kullanıcı izni gereklidir).<button onclick="KonumAl()">Koordinat Al</button> <p id="yazi"></p> <script> /* Konum alma fonksiyonları */ </script>
3️⃣ CSS3 ile Web Tasarımı
Web sayfalarının biçimlendirilmesi, CSS (Cascading Style Sheet - Basamaklı Stil Sayfaları) ile gerçekleştirilir. 🎨 CSS, HTML elemanlarının renk, boyut, arka plan gibi birçok görsel özelliğini değiştirmeyi sağlar. En önemli özelliği, stil değişikliklerinin tek bir noktadan tüm sayfaları etkileyebilmesidir. CSS tanımlamaları <style> etiketleri arasına yazılır veya harici bir dosyada tutulur.
3.1. Temel CSS Kullanımı 🖌️
- Renk Tanımlama: Renkler İngilizce isimleriyle (blue), RGB değerleriyle (
rgb(0,0,255)) veya onaltılık kodlarla (#0000FF) belirtilebilir.<style type="text/css"> h1 { color: blue; /* Metin rengi */ background-color: yellow; /* Arka plan rengi */ } </style> <div>ve<span>Kullanımı: Bu etiketler, içerik gruplamak ve stil uygulamak için kullanılır.<div>: Blok seviyesinde bir elemandır, genellikle bir bölümü kapsar.<span>: Satır seviyesinde bir elemandır, metnin bir kısmına stil uygulamak için kullanılır.
<div class="Kontak_Bilgisi"> <span class="Ad_Soyad">Uğur</span> <span>111-1111</span> </div>
3.2. CSS3 Özellikleri ✨
CSS3, web tasarımına modern ve dinamik görünümler kazandıran birçok yeni özellik getirmiştir.
- Yuvarlatılmış Çerçeve Görünümü (
border-radius): HTML elemanlarının köşelerini yuvarlatır.border: Çerçevenin kalınlığı, tipi ve rengi.padding: İç boşluk.width,height: Genişlik ve yükseklik.
#Yuvarlak_Stil_1 { border-radius: 25px 0px 0px 0px; /* Köşe yuvarlatma */ border: 2px solid #8AC007; padding: 20px; } - Metin Gölgelendirme (
text-shadow): Metinlere gölge efekti verir.text-shadow: Yatay_Gölge(px) Dikey_Gölge(px) Bulanıklık(px) Renk;
h1 { text-shadow: 5px 4px 10px blue; } - Geçişler (
transition): Bir elemanın fare ile etkileşime girdiğinde (hover) veya başka bir durumda stil özelliklerinin yumuşak bir şekilde değişmesini sağlar.div { width: 100px; height: 100px; background: red; transition: width 2s, height 3s; /* Genişlik 2s, yükseklik 3s içinde değişir */ } div:hover { width: 200px; height: 200px; /* Fare üzerine gelince boyut değişimi */ } - Çoklu Kolonlar (
column-count): Metinleri gazete veya dergilerdeki gibi çoklu kolonlara böler.column-count: Kolon sayısı.column-gap: Kolonlar arası mesafe.column-rule: Kolonlar arası çizgi.
.Gazete { column-count: 2; column-gap: 40px; } - Renk Geçişli Görünüm (Gradients):
- Doğrusal Renk Geçişi (
linear-gradient): Belirli bir yönde renk geçişi oluşturur.linear-gradient(yön/açı, Renk1, Renk2, ...)
- Dairesel Renk Geçişi (
radial-gradient): Belirli bir merkezden yayılan renk geçişi oluşturur.radial-gradient(Renk1, Renk2, ...)
⚠️ Tarayıcı uyumluluğu için genellikle#Renk_Degisim { background: linear-gradient(white, black); /* Beyazdan siyaha doğrusal geçiş */ } #Dairesel { background: radial-gradient(black, white); /* Siyahtan beyaza dairesel geçiş */ }-webkit-,-moz-,-o-gibi ön ekler kullanılır. - Doğrusal Renk Geçişi (
🎯 Sonuç
Bu materyal, web sayfası tasarımının temelini oluşturan HTML elemanlarını, HTML5'in getirdiği semantik, medya ve yeni giriş tipi gibi gelişmiş özelliklerini ve son olarak CSS3 kullanarak web sayfalarına görsel tasarım ve biçimlendirme uygulama yöntemlerini kapsamaktadır. Bu teknolojiler, modern, erişilebilir ve dinamik web sayfaları oluşturmak için vazgeçilmez araçlardır. Bu bilgilerle, kendi web projelerinizi geliştirmeye başlayabilir ve web dünyasındaki yeni eğilimlere ayak uydurabilirsiniz.
