HTML’e Giriş: Temel Bilgiler ve Yapı
HTML Nedir?
HTML (HyperText Markup Language), web sayfalarının iskeletini oluşturan bir işaretleme dilidir. Tarayıcılara bir sayfanın içeriğini nasıl görüntüleyeceğini anlatır. HTML ile yazılmış bir belge, tarayıcı tarafından kullanıcıya çeşitli metin, görsel, video gibi içerikleriyle sunulur. Her bir parçası “etiketler” ile ifade edilen yapısal bir dildir.
Örneğin, aşağıdaki temel HTML yapısı, bir HTML belgesinin başlangıcını oluşturur:
Copied!<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Başlık</title> </head> <body> <h1>Merhaba Dünya!</h1> <p>Bu, ilk HTML sayfamız.</p> </body> </html>
<!DOCTYPE html>
: HTML5 sürümünü belirtir.<html lang="tr">
: Dil bilgisini belirtir, burada Türkçe (tr) kullanılmıştır.<head>
ve <body>
: HTML belgesinin ana bölümleridir.
HTML Belgelerinin Yapısı
Bir HTML belgesi, genellikle üç ana bölümden oluşur:
-
Doctype Beyanı (
<!DOCTYPE html>
): HTML5 standardını kullanmak için başa eklenen bir beyan. -
Başlık Bölümü (
<head>
): Sayfa başlığını, karakter kodlamasını, tarayıcıya özel bilgileri ve stil dosyalarını içerir. -
Gövde Bölümü (
<body>
): Kullanıcının ekranda göreceği tüm içeriklerin yer aldığı bölüm.
Başlık Etiketleri
HTML’de başlıklar <h1>
ile <h6>
arasındaki etiketlerle oluşturulur. En önemlisi <h1>
iken, en az önemlisi <h6>
etiketidir. Bu etiketler, içeriğin hiyerarşik yapısını belirtmekte kullanılır ve özellikle SEO açısından önemlidir.
Örneğin:
Copied!<h1>Bu Ana Başlık</h1> <h2>Bu İkinci Seviye Başlık</h2> <h3>Bu Üçüncü Seviye Başlık</h3>
Paragraf ve Satır Etiketleri
Metinleri paragraflar halinde yazmak için <p>
etiketi kullanılır. Yeni bir satıra geçmek için ise <br>
etiketi tercih edilir. Bu etiketler, metni daha okunabilir hale getirir.
Örneğin:
Copied!<p>Bu bir paragraftır.</p> <p>Yeni bir paragrafa geçtik.</p> <p>Bu satırdan sonra <br> yeni bir satıra geçiyoruz.</p>
Metin Biçimlendirme Etiketleri
HTML’de metni kalın, italik, altı çizili gibi çeşitli biçimlerde gösterebilmek için özel etiketler bulunur.
-
<b>
ve<strong>
: Metni kalın gösterir.<strong>
, metnin daha önemli olduğunu belirtmek için kullanılır. -
<i>
ve<em>
: Metni italik gösterir.<em>
, vurgulamak için kullanılır. -
<u>
: Altı çizili metin oluşturur. -
<mark>
: Metni işaretlemek için kullanılır.
Örnek:
Copied!<p><b>Bu metin kalın yazılmıştır.</b></p> <p><strong>Bu önemli bir metindir.</strong></p> <p><i>Bu metin italik yazılmıştır.</i></p> <p><u>Bu metin altı çizili olarak gösterilmektedir.</u></p> <p><mark>Bu metin işaretlenmiştir.</mark></p>
HTML’de Linkler ve Resimler
Bağlantılar (Links)
HTML’de bağlantılar (linkler) <a>
etiketiyle oluşturulur. Bir kullanıcı bir bağlantıya tıkladığında, başka bir sayfaya veya aynı sayfa içinde başka bir bölüme yönlendirilir. Bu etiketin en yaygın kullanımı aşağıdaki gibidir:
Copied!<a href="https://www.osmanbayrak.com.tr">Bu bir bağlantıdır</a>
-
href
özelliği, bağlantının yönlendirileceği URL’yi belirler. -
<a>
etiketi içindeki metin, kullanıcı tarafından görülecek olan bağlantı metnidir.
Bağlantıyı yeni bir sekmede açmak için target="_blank"
özelliği eklenir:
Copied!<a href="https://www.osmanbayrak.com.tr" target="_blank">Yeni sekmede açılan bağlantı</a>
Görseller ve Multimedya
Görseller, web sayfalarının vazgeçilmez ögelerindendir ve HTML’de <img>
etiketi ile eklenir. Bu etiketin temel kullanımı:
Copied!<img src="resim.jpg" alt="Örnek Resim" width="500" height="300">
-
src
: Görselin kaynağını belirler. -
alt
: Alternatif metin, görselin yüklenememesi durumunda gösterilir ve SEO açısından önemlidir. -
width
veheight
: Görselin genişlik ve yüksekliğini belirler.
Bir videoyu <video>
etiketi ile, sesi ise <audio>
etiketi ile ekleyebiliriz:
Copied!<video controls> <source src="video.mp4" type="video/mp4"> Tarayıcınız bu videoyu desteklemiyor. </video> <audio controls> <source src="ses.mp3" type="audio/mpeg"> Tarayıcınız bu sesi desteklemiyor. </audio>
Liste Yapıları
HTML, sıralı ve sırasız listeleri destekler. Bu listeler <ul>
(sırasız liste) ve <ol>
(sıralı liste) etiketleri ile yapılır.
Sırasız Liste
Sırasız liste <ul>
etiketiyle yapılır ve her bir öğe <li>
etiketi ile belirtilir:
Copied!<ul> <li>Öğe 1</li> <li>Öğe 2</li> <li>Öğe 3</li> </ul>
Sıralı Liste
Sıralı liste <ol>
etiketiyle yapılır ve her bir öğe <li>
etiketi ile belirtilir:
Copied!<ol> <li>Birinci</li> <li>İkinci</li> <li>Üçüncü</li> </ol>
Tanım Listesi
Tanım listesi, bir öğenin açıklamasını içeren özel bir listedir. <dl>
, <dt>
ve <dd>
etiketleriyle yapılır:
Copied!<dl> <dt>HTML</dt> <dd>Web sayfalarının yapısını belirleyen işaretleme dili.</dd> <dt>CSS</dt> <dd>Web sayfalarını biçimlendirme dili.</dd> </dl>
Formlar ve Giriş Alanları
Kullanıcıdan bilgi almak için formlar kullanılır. Formlar, <form>
etiketiyle oluşturulur ve <input>
, <textarea>
, <select>
gibi alt etiketler içerir.
Form Etiketleri
Temel bir form yapısı şu şekildedir:
Copied!<form action="/islem.php" method="post"> <label for="isim">İsim:</label> <input type="text" id="isim" name="isim"><br> <label for="email">Email:</label> <input type="email" id="email" name="email"><br> <input type="submit" value="Gönder"> </form>
-
action
: Form verilerinin gönderileceği dosyayı belirler. -
method
: Verilerin gönderme yöntemini belirler (get
veyapost
).
Form Giriş Tipleri
HTML’de farklı form giriş tipleri vardır. Örneğin, type="text"
metin girişi, type="number"
sayısal giriş sağlar:
Copied!<input type="text" name="ad" placeholder="Adınızı giriniz"> <input type="number" name="yas" placeholder="Yaşınızı giriniz"> <input type="email" name="email" placeholder="Email adresinizi giriniz"> <input type="checkbox" name="sozlesme"> Kullanım şartlarını kabul ediyorum <input type="radio" name="cinsiyet" value="erkek"> Erkek <input type="radio" name="cinsiyet" value="kadın"> Kadın
Form Validasyonu
HTML5 ile gelen required
, min
, max
, pattern
gibi özellikler, form doğrulama işlemlerini daha kolay hale getirir. Bu sayede JavaScript kullanmadan kullanıcıdan alınan bilgileri kontrol edebiliriz.
Copied!<input type="text" name="ad" required> <input type="number" name="yas" min="18" max="100"> <input type="email" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" title="Geçerli bir email adresi girin">
Tablolar
Tablolar, verileri satır ve sütun düzeninde göstermek için kullanılır; <table>
, <tr>
, <td>
, <th>
gibi etiketlerle yapılır.
Tablo Etiketleri
Basit bir tablo örneği:
Copied!<table border="1"> <tr> <th>İsim</th> <th>Yaş</th> <th>Şehir</th> </tr> <tr> <td>Ahmet</td> <td>25</td> <td>İstanbul</td> </tr> <tr> <td>Ayşe</td> <td>30</td> <td>Ankara</td> </tr> </table>
-
<table>
: Tabloyu tanımlar. -
<tr>
: Tablo satırını oluşturur. -
<th>
: Başlık hücrelerini belirtir. -
<td>
: Normal hücreleri belirtir.
Colspan ve Rowspan
Hücreleri birleştirmek için colspan
ve rowspan
kullanılır:
Copied!<table border="1"> <tr> <th colspan="2">Başlık 1</th> <th>Başlık 2</th> </tr> <tr> <td rowspan="2">Satırları Birleştir</td> <td>Veri 1</td> <td>Veri 2</td> </tr> <tr> <td>Veri 3</td> <td>Veri 4</td> </tr> </table>
HTML5 Yenilikleri ve Semantik Etiketler
HTML5, içerik düzenini daha anlamlı hale getirmek için birçok yeni etiketle birlikte geldi. Bu etiketler, içerik bölümlerinin amacını daha net bir şekilde belirleyerek hem SEO uyumunu artırır hem de tarayıcıların içeriği daha iyi anlamasını sağlar.
Semantik Etiketler
<header>
Etiketi
Bir web sayfasının veya bir bölümün üst kısmını belirtmek için kullanılır. Genellikle logo, başlık ve menüler içerir.
Copied!<header> <h1>Web Sitesi Adı</h1> <nav> <a href="#ana_sayfa">Ana Sayfa</a> <a href="#hakkinda">Hakkında</a> <a href="#iletisim">İletişim</a> </nav> </header>
<footer>
Etiketi
Bir sayfanın veya bir bölümün alt kısmını belirtir. Genellikle telif hakkı bilgileri, iletişim bilgileri ve sosyal medya bağlantıları içerir.
Copied!<footer> <p>© 2024 Tüm Hakları Saklıdır.</p> </footer>
<article>
Etiketi
Bağımsız içerikleri belirtmek için kullanılır. Blog gönderileri, haber makaleleri veya forum gönderileri gibi bağımsız bölümler için idealdir.
Copied!<article> <h2>Makale Başlığı</h2> <p>Bu, bağımsız bir makaledir ve içeriği kendi başına anlamlıdır.</p> </article>
<section>
Etiketi
Bir web sayfasının belirli bir bölümünü belirtir. Genellikle, anlamlı başlıklarla gruplanan içerikler için kullanılır.
Copied!<section> <h2>Hizmetlerimiz</h2> <p>Çeşitli hizmetlerimiz hakkında bilgiler.</p> </section>
<aside>
Etiketi
Ana içeriğe ek olarak verilen bilgileri belirtir. Yan panel (sidebar) olarak kullanılabilir.
Copied!<aside> <h3>İlgili İçerikler</h3> <p>Bu bölüm, ana içerikle ilgili ek bilgiler sağlar.</p> </aside>
<nav>
Etiketi
Sayfadaki gezinme bağlantılarını içerir. Bir menüyü veya bağlantı grubunu belirtmek için idealdir.
Copied!<nav> <a href="#ana_sayfa">Ana Sayfa</a> <a href="#hizmetler">Hizmetlerimiz</a> <a href="#iletisim">İletişim</a> </nav>
HTML5 API’leri
HTML5 ile gelen bazı yeni API’ler, web sayfalarını daha etkileşimli ve işlevsel hale getirmemizi sağlar. Bunlardan en popüler olanlarına göz atalım:
Canvas API
<canvas>
etiketi, grafiksel çizimler yapmak için kullanılır. JavaScript ile birlikte çizimler, oyunlar, veri görselleştirmeleri yapılabilir.
Copied!<canvas id="cizimAlani" width="200" height="200"></canvas> <script> var canvas = document.getElementById("cizimAlani"); var ctx = canvas.getContext("2d"); ctx.fillStyle = "blue"; ctx.fillRect(10, 10, 100, 100); </script>
Geolocation API
Bu API, kullanıcının konum bilgilerini almayı sağlar. Genellikle harita uygulamalarında veya konuma dayalı hizmetlerde kullanılır.
Copied!<button onclick="konumAl()">Konumumu Göster</button> <p id="konum"></p> <script> function konumAl() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { document.getElementById("konum").innerHTML = "Enlem: " + position.coords.latitude + "<br>Boylam: " + position.coords.longitude; }); } else { document.getElementById("konum").innerHTML = "Konum bilgisi alınamıyor."; } } </script>
Local Storage
Kullanıcıya ait verileri, tarayıcı üzerinde kalıcı olarak saklamak için kullanılır. Kullanıcı sayfayı kapatıp tekrar açtığında bile bu verilere ulaşılabilir.
Copied!<script> // Veriyi kaydetme localStorage.setItem("kullaniciAdi", "Ahmet"); // Veriyi okuma var isim = localStorage.getItem("kullaniciAdi"); document.write("Kullanıcı Adı: " + isim); // Veriyi silme localStorage.removeItem("kullaniciAdi"); </script>
HTML ve CSS İlişkisi
HTML, web sayfasının yapısını sağlar; CSS (Cascading Style Sheets) ise bu yapıyı biçimlendirir. CSS, HTML elemanlarının nasıl görüneceğini belirlemek için kullanılır.
CSS Kullanım Yöntemleri
CSS, HTML ile üç farklı şekilde kullanılabilir:
-
Satır İçi (Inline) CSS: HTML etiketinin
style
özelliği ile doğrudan uygulanır.
Copied!<h1 style="color: blue; text-align: center;">Merhaba Dünya!</h1>
Dahili (Internal) CSS: HTML belgesinin <head>
bölümünde <style>
etiketi kullanılarak uygulanır.
Copied!<head> <style> h1 { color: green; font-size: 24px; } </style> </head>
Harici (External) CSS: Ayrı bir .css
dosyası oluşturularak uygulanır. Bu yöntem, çok sayfalı web sitelerinde stil yönetimini kolaylaştırır.
Copied!<link rel="stylesheet" href="stil.css">
Temel CSS Özellikleri
-
Renkler:
color
vebackground-color
özellikleri ile metin ve arka plan renkleri ayarlanır.
Copied!body { background-color: #f0f0f0; } p { color: #333; }
Yazı Tipi (Font): font-family
, font-size
, font-weight
gibi özelliklerle yazı tipi ve boyutu ayarlanır.
Copied!h1 { font-family: Arial, sans-serif; font-size: 30px; font-weight: bold; }
Aralıklar (Margin ve Padding): margin
dış aralık, padding
iç aralık ayarlamak için kullanılır.
Copied!div { margin: 10px; padding: 20px; }
CSS Seçiciler
CSS, HTML elemanlarını seçip biçimlendirmek için çeşitli seçiciler sağlar.
- Etiket Seçiciler: Belirli bir etiket türüne stil verir.
Copied!p { color: red; }
Sınıf Seçicileri (.
): Bir sınıfa sahip elemanlara stil verir. class
özelliği ile HTML elemanlarına uygulanır.
Copied!<style> .ozel { color: blue; font-weight: bold; } </style> <p class="ozel">Bu, özel bir paragraf.</p>
ID Seçicileri (#
): Belirli bir kimlik (ID) değerine sahip elemanlara stil verir. id
özelliği ile HTML elemanlarına uygulanır.
Copied!<style> #baslik { color: green; font-size: 24px; } </style> <h1 id="baslik">Bu başlık ID ile seçildi</h1>
JavaScript ile HTML Etkileşimi
JavaScript, HTML sayfalarını daha etkileşimli hale getirmek için kullanılan bir programlama dilidir. Kullanıcı etkileşimleri (tıklama, fare hareketleri vb.), form doğrulama, veri işleme gibi işlevleri gerçekleştirmek için JavaScript ve HTML bir arada kullanılır.
Temel JavaScript Kullanımı
JavaScript, <script>
etiketi kullanılarak doğrudan HTML içine yazılabilir veya harici bir .js
dosyasına bağlanabilir.
Dahili JavaScript
HTML içindeki <script>
etiketiyle JavaScript doğrudan sayfa içinde yazılabilir:
Copied!<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <title>JavaScript Örneği</title> </head> <body> <button onclick="merhaba()">Merhaba De!</button> <script> function merhaba() { alert("Merhaba Dünya!"); } </script> </body> </html>
Harici JavaScript
Harici bir JavaScript dosyasını <script src="dosya.js"></script>
ile bağlayabilirsiniz. Bu yöntemde, JavaScript kodları dosya.js
adlı dosyada yer alır.
Copied!<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <title>Harici JavaScript</title> <script src="script.js"></script> </head> <body> <button onclick="merhaba()">Merhaba De!</button> </body> </html>
script.js
dosyasının içeriği ise şöyle olur:
Copied!function merhaba() { alert("Harici dosyadan Merhaba Dünya!"); }
JavaScript ile DOM Manipülasyonu
JavaScript kullanarak HTML yapısını değiştirebilir, yeni elemanlar ekleyebilir veya mevcut elemanları güncelleyebiliriz. Bu işlem, DOM (Document Object Model) üzerinden yapılır.
Copied!<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <title>DOM Manipülasyonu</title> </head> <body> <p id="paragraf">Bu bir paragraftır.</p> <button onclick="paragrafDegistir()">Paragrafı Değiştir</button> <script> function paragrafDegistir() { document.getElementById("paragraf").innerHTML = "Paragraf değiştirildi!"; } </script> </body> </html>
Bu örnekte, document.getElementById("paragraf").innerHTML
komutuyla belirli bir paragrafın içeriğini değiştirmiş oluyoruz.
Duyarlı Tasarım (Responsive Design) ve Medya Sorguları (Media Queries)
Mobil cihazlarda ve farklı ekran boyutlarında iyi görünen sayfalar oluşturmak için duyarlı tasarım kullanılır. CSS medya sorguları, sayfanın farklı ekran boyutlarına uyum sağlamasını sağlar.
Medya Sorgularına Giriş
Medya sorguları, belirli ekran boyutları için özel CSS tanımlamaya olanak tanır. Örneğin, max-width
özelliği, belirli bir genişliğe kadar geçerli olan CSS kurallarını uygular.
Copied!/* Varsayılan stil */ body { background-color: lightblue; } /* Ekran genişliği 600 pikselden küçükse geçerli olacak stil */ @media (max-width: 600px) { body { background-color: pink; } }
Duyarlı Grid Düzenleri
Grid veya flexbox yapısını medya sorgularıyla kullanarak, esnek ve duyarlı bir düzen oluşturabilirsiniz. Örneğin, iki sütunlu bir düzeni, küçük ekranlarda tek sütuna dönüştürmek için aşağıdaki yapıyı kullanabiliriz:
Copied!<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Duyarlı Tasarım</title> <style> .container { display: flex; flex-wrap: wrap; } .box { flex: 1 1 50%; /* Varsayılan olarak iki sütun */ padding: 10px; background-color: lightgray; margin: 5px; } /* Küçük ekranlarda tek sütuna geçiş */ @media (max-width: 600px) { .box { flex: 1 1 100%; } } </style> </head> <body> <div class="container"> <div class="box">Kutu 1</div> <div class="box">Kutu 2</div> </div> </body> </html>
Bu örnekte, ekran genişliği 600 pikselden küçük olduğunda, iki sütunlu yapı tek sütuna dönüşmektedir.
HTML Form Doğrulama ve Kullanıcı Girdisi Kontrolü
Kullanıcılardan alınan verilerin doğru formatta olmasını sağlamak için HTML form doğrulaması kullanılır. Bu doğrulamayı HTML5 özellikleriyle veya JavaScript ile yapabiliriz.
HTML5 Form Doğrulama Özellikleri
HTML5, form doğrulamasını kolaylaştırmak için bazı yeni özellikler eklemiştir:
-
required
: Boş geçilemeyen alanları belirtir. -
type
: Giriş türünü belirtir (email, number, url gibi). -
min
vemax
: Sayısal veya tarih girişleri için minimum ve maksimum değerleri tanımlar. -
pattern
: Regex kullanarak belirli bir formata uyan girişleri kabul eder.
Copied!<form action="/gonder" method="post"> <label for="email">Email:</label> <input type="email" id="email" name="email" required><br> <label for="yas">Yaş:</label> <input type="number" id="yas" name="yas" min="18" max="100" required><br> <label for="telefon">Telefon:</label> <input type="tel" id="telefon" name="telefon" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" title="Format: 123-456-7890"><br> <input type="submit" value="Gönder"> </form>
Yukarıdaki örnekte, email formatı için type="email"
, yaş için minimum ve maksimum değerleri belirleyen min
ve max
, telefon numarası için ise pattern
özelliği kullanılmıştır.
JavaScript ile Form Doğrulama
JavaScript ile daha özelleştirilmiş form doğrulaması yapılabilir.
Copied!<form name="form" onsubmit="return dogrula()"> <label for="ad">Adınız:</label> <input type="text" id="ad" name="ad" required><br> <label for="email">Email:</label> <input type="email" id="email" name="email" required><br> <input type="submit" value="Gönder"> </form> <script> function dogrula() { var ad = document.forms["form"]["ad"].value; var email = document.forms["form"]["email"].value; if (ad == "" || email == "") { alert("Tüm alanları doldurunuz."); return false; // Formun gönderilmesini engeller } } </script>
Bu örnekte, form gönderilmeden önce dogrula
fonksiyonu çağrılır ve eğer herhangi bir alan boşsa kullanıcıya uyarı verilir.
Gelişmiş HTML ve CSS Teknikleri
CSS Animasyonları
CSS animasyonları ile web sayfalarına hareketlilik katılabilir. Bu animasyonlar, kullanıcının dikkatini çekmek veya belirli ögelere vurgu yapmak için kullanılabilir.
Copied!@keyframes fade { from { opacity: 0; } to { opacity: 1; } } .animasyonlu { animation: fade 2s ease-in-out; }
Copied!<div class="animasyonlu">Bu öge yavaşça görünür hale gelir.</div>
Flexbox ile Duyarlı Düzenler
Flexbox, düzenlemeyi çok daha esnek hale getiren bir CSS yapısıdır. display: flex;
ile aktif edilir.
Copied!.container { display: flex; justify-content: space-around; /* Öğeleri yatayda dağıtır */ } .kutu { background-color: #ddd; padding: 20px; margin: 10px; flex: 1; /* Her kutu eşit oranda yer kaplar */ }
Copied!<div class="container"> <div class="kutu">Kutu 1</div> <div class="kutu">Kutu 2</div> <div class="kutu">Kutu 3</div> </div>
Bu ders, HTML ve CSS ile birlikte JavaScript, medya sorguları, form doğrulama ve flexbox gibi ileri konuları ele alarak daha dinamik ve duyarlı web sayfaları oluşturmanıza yardımcı olur. Son olarak, bu bilgileri farklı projelerde kullanarak deneyim kazanabilir ve daha karmaşık sayfalar oluşturabilirsiniz.
Bu HTML rehberiyle, web geliştirme dünyasına sağlam bir adım attınız. HTML’in temellerinden başlayarak, CSS ile biçimlendirme, JavaScript ile etkileşim ve HTML5’in sunduğu yeniliklerle sayfalarınıza profesyonel bir dokunuş kazandırabilirsiniz. Her yeni projeyle becerilerinizi daha da geliştirecek ve web tasarım dünyasında ileriye doğru emin adımlarla ilerleyeceksiniz. Unutmayın, her başarılı projenin temelinde sağlam bir altyapı ve tutarlı bir öğrenme süreci vardır.
Başarılar ve yaratıcı projeler sizinle olsun!
Bir yanıt yazın