HTML, yani HyperText Markup Language, web’in temel taşıdır ve internette gördüğünüz hemen hemen her sayfanın iskeletini oluşturur. Statik bir web sitesi oluşturmak veya web geliştirme dünyasına adım atmak istiyorsanız, HTML öğrenmeniz gereken ilk dildir. Bu rehber, HTML’e yeni başlayanlar için tasarlanmıştır ve en temel kavramları anlaşılır bir şekilde ele alacaktır. Öncelikle bir HTML belgesinin olmazsa olmaz yapısal etiketlerini inceleyeceğiz: <!DOCTYPE>, <html>, <head> ve <body>. Bu temel yapı üzerine nasıl içerik ekleyeceğimizi, metinleri başlıklar (<h1>-<h6>) ve paragraflar (<p>) halinde nasıl düzenleyeceğimizi öğreneceğiz. Son olarak, sayfalar arasında gezinmeyi sağlayan bağlantıları (<a>) ve sayfaları görsel olarak zenginleştiren resimleri (<img>) nasıl ekleyeceğimizi örneklerle göreceğiz.
Bir HTML sayfasının temel yapısı
Her HTML belgesi, tarayıcıya sayfanın nasıl yorumlanacağını söyleyen belirli bir temel yapı üzerine kuruludur. Bu yapı, belgenin en tepesinde yer alan bir bildirim ve iç içe geçmiş birkaç temel etiketten oluşur. Bu etiketler, sayfanın görünmeyen meta verilerinden kullanıcının gördüğü içeriğe kadar her şeyi kapsar.
<!DOCTYPE html> bildirimi
Bu, bir HTML etiketi değildir; bir bildirimdir. Tarayıcıya, okumak üzere olduğu belgenin hangi HTML sürümünde yazıldığını söyler. <!DOCTYPE html>, belgenin modern HTML5 standardına göre yazıldığını belirtir. Bu satırı her zaman HTML dosyanızın en başına eklemeniz, tarayıcının sayfanızı doğru bir şekilde işlemesini sağlamak için kritik öneme sahiptir.
<html>, <head> ve <body> etiketleri
Bu üç etiket, sayfanın ana iskeletini oluşturur:
- <html>: Bu etiket, <!DOCTYPE> bildiriminden sonra gelir ve tüm diğer HTML etiketlerini saran kök etikettir. Sayfanın başlangıcını ve sonunu işaret eder.
- <head>: Bu bölüm, web sayfasının kendisinde doğrudan görünmeyen “meta” bilgileri içerir. Sayfa başlığı (<title>), karakter seti tanımlamaları, stil dosyalarına (CSS) ve komut dosyalarına (JavaScript) bağlantılar gibi bilgiler burada yer alır. Tarayıcı sekmesinde görünen başlık, bu bölümdeki <title> etiketi ile belirlenir.
- <body>: Bu etiket, kullanıcının web sayfasında gördüğü tüm içeriği barındırır. Metinler, başlıklar, resimler, videolar, bağlantılar ve diğer tüm görünür öğeler <body> etiketleri arasına yazılır.
Metinleri düzenleme: başlıklar ve paragraflar
Web sayfasının gövdesine içerik eklerken, metni anlamsal olarak yapılandırmak hem okunabilirlik hem de arama motoru optimizasyonu (SEO) için önemlidir. HTML, bu amaçla başlık ve paragraf etiketleri sunar.
<h1> ile <h6> arası başlık etiketleri
Başlık etiketleri, metin hiyerarşisi oluşturmak için kullanılır. <h1> en önemli başlığı temsil eder ve genellikle sayfanın ana başlığı için yalnızca bir kez kullanılır. <h2>, ana başlığın alt bölümlerini, <h3> ise <h2>‘nin alt bölümlerini belirtmek için kullanılır ve bu hiyerarşi <h6>‘ya kadar devam eder. Bu etiketler sadece metni büyütmek için değil, içeriğin yapısını mantıksal olarak tanımlamak için kullanılmalıdır.
<h1>Bu ana başlıktır</h1>
<h2>Bu bir alt başlıktır</h2>
<h3>Bu daha alt bir başlıktır</h3><p> paragraf etiketi
<p> etiketi, metin paragraflarını tanımlamak için kullanılır. Tarayıcılar, her paragraf etiketinden önce ve sonra otomatik olarak bir miktar boşluk ekleyerek metnin okunmasını kolaylaştırır. Uzun metin bloklarını bu etiket içine yerleştirmek, içeriğinizi düzenli ve okunabilir kılar.
<p>Bu bir metin paragrafıdır. HTML'in temellerini öğrenmek, web geliştirme yolculuğunuzun ilk adımıdır.</p>
<p>Bu da başka bir paragraftır. Her yeni paragraf kendi <p> etiketi içinde olmalıdır.</p>Sayfaları birbirine bağlama ve medya ekleme
Modern web, yalnızca metinden ibaret değildir. Sayfalar arası gezinmeyi sağlayan bağlantılar ve içeriği zenginleştiren görseller, kullanıcı deneyiminin ayrılmaz bir parçasıdır.
<a> bağlantı etiketi
<a> (anchor) etiketi, bir sayfadan diğerine veya aynı sayfa içindeki farklı bir bölüme bağlantı oluşturmak için kullanılır. En önemli özelliği href (hypertext reference) özniteliğidir. Bu öznitelik, bağlantının yönlendirileceği hedef adresi (URL) belirtir. Etiketler arasına yazılan metin, kullanıcının tıklayacağı bağlantı metni olur.
<a href="https://www.google.com">Google'a gitmek için buraya tıklayın</a><img> resim etiketi
<img> etiketi, bir web sayfasına resim eklemek için kullanılır. Bu etiket, bir kapanış etiketine sahip değildir. İki temel özniteliğe ihtiyaç duyar:
- src (source): Görüntülenecek resim dosyasının yolunu veya URL’sini belirtir.
- alt (alternative text): Resim yüklenemezse veya görme engelli kullanıcılar ekran okuyucu kullanıyorsa gösterilecek alternatif bir metin sağlar. Bu öznitelik hem erişilebilirlik hem de SEO için çok önemlidir.
<img src="resimler/logo.png" alt="Şirket Logosu">Her şeyi bir araya getirelim: basit bir web sayfası iskeleti
Şimdiye kadar öğrendiğimiz tüm etiketleri kullanarak basit ama eksiksiz bir HTML sayfası oluşturalım. Bu örnek, bir HTML dosyasının temel yapısını ve içeriğin bu yapıya nasıl yerleştirildiğini göstermektedir. Bu kodu bir metin düzenleyiciye kopyalayıp “.html” uzantısıyla kaydederek kendi bilgisayarınızda bir tarayıcıda açabilirsiniz.
<!DOCTYPE html>
<html>
<head>
<title>Benim İlk Web Sayfam</title>
</head>
<body>
<h1>Web Geliştirmeye Hoş Geldiniz</h1>
<p>Bu benim HTML öğrenirken oluşturduğum ilk web sayfası. Burada başlıklar, paragraflar, resimler ve bağlantılar gibi temel HTML etiketlerini kullanıyorum.</p>
<h2>Öğrendiğim Konular</h2>
<p>Şu ana kadar temel sayfa yapısını, metin biçimlendirmeyi ve medya eklemeyi öğrendim.</p>
<img src="https://via.placeholder.com/150" alt="Örnek bir resim">
<p>Daha fazla bilgi edinmek için bu harika kaynağı ziyaret edebilirsiniz:</p>
<a href="https://developer.mozilla.org/tr/docs/Web/HTML">MDN Web Docs: HTML</a>
</body>
</html>
Bu rehberde, bir web sayfasının yapısal temelini oluşturan <!DOCTYPE> bildirimi, <html>, <head> ve <body> etiketlerinin önemini kavradık. Bu iskeletin üzerine, içeriğimizi hiyerarşik olarak düzenlememizi sağlayan başlık etiketlerini (<h1>-<h6>) ve metin blokları oluşturmamıza yarayan paragraf etiketini (<p>) nasıl kullanacağımızı öğrendik. Ayrıca, web’in temelini oluşturan bağlantı (<a>) ve sayfalarımızı görsel olarak zenginleştiren resim (<img>) etiketlerinin kullanımını inceledik. Bu temel etiketler, web geliştirmenin başlangıç noktasını oluşturur. Buradan sonra, sayfalarınıza stil kazandırmak için CSS ve interaktif özellikler eklemek için JavaScript öğrenerek web geliştirme becerilerinizi bir sonraki seviyeye taşıyabilirsiniz. Unutmayın, her karmaşık web sitesi, burada öğrendiğiniz bu basit yapı taşları üzerine inşa edilmiştir.
Resim Sahibi: Markus Spiske
https://www.pexels.com/@markusspiske