HTML Nedir?
HTML (HyperText Markup Language) web sayfalarının temel yapı taşını oluşturan bir işaretleme dilidir. Web sitelerinin görünümünü ve düzenini tanımlamak için kullanılır. HTML, tarayıcıların web sayfalarını doğru şekilde görüntüleyebilmesi için gerekli talimatları sağlar.
Herhangi bir web sitesi oluşturmak istiyorsanız HTML bilmeniz gereken ilk şeylerden biridir. Bu rehberde HTML’nin temel kavramlarını ve yapı taşlarını öğreneceksiniz.
HTML’in Temel Yapısı
Bir HTML belgesi, belirli bir yapı ve etiketler dizisiyle oluşturulur. Her HTML belgesi şu temel bileşenlerden oluşur:
Doctype Deklarasyonu: HTML5 ile genellikle
<!DOCTYPE html>olarak tanımlanır. Bu, tarayıcılara sayfanın hangi HTML sürümünde yazıldığını bildirir.Html Etiketi: HTML dosyasının başlangıç ve bitişini belirleyen etikettir:
<html>ve</html>. Tüm içerik bu etiketlerin arasında yer alır.Head Etiketi: Sayfanın başlık, karakter seti ve meta verileri gibi bilgileri içerir.
<head>etiketi içinde genellikle<title>etiketi de yer alır. Bu etiket, tarayıcı sekmesinde görünen başlığı belirtir.Body Etiketi: Görünen içerik buraya yazılır. Metinler, resimler, bağlantılar ve diğer tüm görseller
<body>etiketi içinde bulunur.
HTML Etiketleri ve Anlamları
HTML’de her şey etiketler ile oluşturulur. Etiketler, köşeli parantezler < > içine alınarak yazılır. Çoğu etiketin bir başlangıç etiketi ve bir bitiş etiketi vardır. Örneğin:
<p>ve</p>: Paragraf oluşturmak için kullanılır.<h1>ve</h1>: Başlık etiketi. H1, sayfanın en önemli başlığıdır ve genellikle sayfa başlıkları için kullanılır. H2, H3 gibi diğer başlıklar da sayfanın alt başlıkları için tercih edilir.
Bazı etiketlerin bitiş etiketi olmayabilir. Örneğin, bir satır kırma etiketi olan <br> kendiliğinden kapanır ve yeni bir satır başlatır.
HTML Sayfa Yapısının Önemi
HTML sayfa yapısında doğru etiketleri kullanmak, hem arama motorları hem de kullanıcı deneyimi açısından kritiktir. Başlık etiketleri, bir web sayfasının içeriğini hiyerarşik bir düzende sunar ve arama motorları bu başlıklara göre sayfanın ana konusunu anlamlandırır.
HTML ve CSS İlişkisi
HTML, bir web sayfasının yapısını oluştururken; CSS (Cascading Style Sheets) sayfanın stilini ve tasarımını kontrol eder. CSS, HTML ile birlikte çalışarak sayfanın rengini, fontlarını ve düzenini belirler.
Örneğin, bir başlığın rengini CSS ile şu şekilde değiştirebilirsiniz:
<h1 style="color: blue;">Bu bir başlıktır</h1>
Bu sayede HTML ile oluşturduğunuz yapıyı CSS ile daha estetik hale getirebilirsiniz.
HTML ile Linkler ve Resimler
Web sayfalarının en temel işlevlerinden biri, diğer sayfalara veya içeriklere bağlantı vermektir. HTML’de bağlantılar a etiketi ile yapılır:
<a href="https://www.ornek.com">Ornek Siteye Git</a>
Bu kod, “Ornek Siteye Git” ifadesine tıklanabilir bir bağlantı ekler. Aynı şekilde, bir web sayfasına resim eklemek için img etiketi kullanılır:
<img src="resim.jpg" alt="Resim Açıklaması">
Bu etiket, sayfada bir resim görüntüler. alt özelliği, resim yüklenemediğinde veya görme engelli kullanıcılar için alternatif bir açıklama sağlar.
HTML Formları: Kullanıcı Girdileri
HTML, kullanıcıdan bilgi almak için formlar oluşturmaya da olanak tanır. Bir form, çeşitli giriş alanlarından oluşur ve kullanıcıların bilgi göndermesine imkan verir. Örneğin
<form action="submit.php" method="post"> <label for="isim">İsim:</label> <input type="text" id="isim" name="isim"> <input type="submit" value="Gönder"> </form>
Bu kod, bir isim girişi yapabileceğiniz ve bilgiyi gönderebileceğiniz basit bir form oluşturur.
HTML’de Tablo ve Liste Yapıları
HTML, sayfada düzenli veri gösterimi için tablolar ve listeler oluşturmayı sağlar.
Tablolar
Bir tablo, satır ve sütunlardan oluşur. Her satır tr, her sütun ise td etiketi ile tanımlanır:
<table>
<tr>
<td>İsim</td>
<td>Soyisim</td>
</tr>
<tr>
<td>Ahmet</td>
<td>Yılmaz</td>
</tr>
</table>
Bu kod, iki sütunlu ve iki satırlı bir tablo oluşturur.
Listeler
HTML’de iki tür liste vardır: sıralı ve sırasız listeler. Sıralı listeler ol etiketi ile, sırasız listeler ise ul etiketi ile oluşturulur.
<ul> <li>Elma</li> <li>Armut</li> <li>Üzüm</li> </ul>
Bu kod, madde işaretli bir liste oluşturur.
SEO Uyumlu HTML Oluşturma
Bir web sitesini oluştururken SEO (Arama Motoru Optimizasyonu) kurallarına uygun bir HTML yapısı kullanmak oldukça önemlidir. Arama motorları, sitenizi daha iyi anlamak ve sıralamak için HTML etiketlerine ve içerik yapısına dikkat eder. İşte SEO uyumlu HTML oluşturmanın bazı temel kuralları:
- Doğru Başlık Etiketlerini Kullanın: H1, H2 gibi başlıklar, içeriğinizi hiyerarşik olarak düzenler. H1 etiketi yalnızca bir kez kullanılmalıdır.
- Meta Açıklamalar: Sayfanın içeriğini özetleyen ve arama motorları tarafından kullanılan meta açıklamalar yazılmalıdır.
- Alt Etiketleri: Resimlerde alt etiketleri kullanarak görselleri açıklayın. Bu hem SEO için hem de erişilebilirlik açısından önemlidir.
- Düzenli ve Temiz Kod: Fazla karmaşık olmayan, düzenli ve anlaşılır bir HTML yapısı, arama motorları tarafından daha iyi taranır.
HTML Öğrenmeye Başlayın
HTML, web geliştirme dünyasına adım atmanın ilk ve en önemli adımıdır. Temel HTML etiketlerini öğrendiğinizde, web sayfaları oluşturmanın ne kadar basit olduğunu göreceksiniz. Web sitelerini daha etkili ve estetik hale getirmek için CSS ve JavaScript gibi teknolojilerle HTML’yi birleştirebilirsiniz.
Her adımda öğrendiğiniz bilgileri pratiğe dökmek, HTML öğrenme sürecinizi hızlandıracaktır. Artık HTML ile bir web sayfası oluşturmanın temel unsurlarını biliyorsunuz. Şimdi bu bilgileri kullanarak kendi projelerinize başlayabilirsiniz.
Comments are closed