İçindekiler
Web geliştirme dünyasına adım atmaya başladığınızda, HTML (HyperText Markup Language) en temel yapı taşıdır. HTML, web sayfalarındaki içeriklerin nasıl düzenleneceğini ve sunulacağını belirler. Bugün, bir web sayfasının temel yapısını inceleyerek HTML’in nasıl çalıştığını daha iyi anlayacağız.
HTML Yapısının Temelleri
HTML belgesi, belirli bir yapı izler. Bu yapının en temel öğeleri şunlardır:
<!DOCTYPE html>: HTML5 belgesi olduğumuzu belirtir. Tarayıcılara, sayfanın HTML5 formatında yorumlanacağını söyler.<html lang="tr">: Sayfanın dili Türkçe olarak belirlenmiş. Bu, arama motorlarına ve tarayıcılara içeriğin dilini bildirir.<head>: Sayfanın başlık ve meta bilgilerini içerir. Örneğin, sayfanın karakter seti (UTF-8), uyumluluk ayarları ve sayfa başlığı burada yer alır.<body>: Sayfanın içerik kısmını tanımlar. Asıl metin, görseller, bağlantılar bu bölümde yer alır.
Başlık ve Navigasyon Menüsü
Bir web sayfasının başlık kısmı, genellikle sitenin logosu veya ana başlıkları içerir. Ayrıca, ziyaretçilerin farklı sayfalara kolayca geçiş yapabilmesini sağlamak için bir navigasyon menüsü de bulunur.
Örneğimizde, sayfanın başlık kısmında şu etiketleri görüyoruz:
<header>
<nav>
<ul>
<li><a href="index.html">Home Page</a></li>
<li><a href="aboutUs.html">About Us</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>Bu kısımda, kullanıcıların kolayca geçiş yapabileceği “Ana Sayfa”, “Hakkımızda” ve “İletişim” gibi sayfalara yönlendiren bağlantılar bulunuyor.
İçerik Alanı ve Makaleler
Web sayfasının asıl içeriği, genellikle makaleler ve diğer öğelerden oluşur. Makaleler <article> etiketi içinde düzenlenir ve bu içerikler başlık, metin ve görsellerle desteklenir. Örneğin:
<article>
<img src="https://picsum.photos/id/505/600/300" alt="a picture from Lorem Picsum">
<h2>Birinci Yazı</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi, dolorum?</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Necessitatibus, eaque. A, exercitationem reprehenderit?</p>
<ol>
<li>Lorem, ipsum dolor.</li>
<li>Laboriosam, esse beatae.</li>
<li>Iusto, numquam a?</li>
<li>Fugit, maiores animi?</li>
</ol>
<hr>
</article>Bu örnekte, yazının başlığı (<h2>), içeriği (<p>), bir görsel (<img>) ve sıralı liste (<ol>) yer almakta. Bu, sayfanın zengin içerikli ve okunabilir olmasını sağlar.
Altbilgi (Footer) Bölümü
Bir web sayfasının altbilgi kısmı, genellikle sayfanın tekrar eden bağlantılarını içerir. Bu bölüme, kullanıcıların sayfanın farklı alanlarına hızlıca ulaşabilmesi için menüler eklenir. Örneğimizde, altbilgiyi şu şekilde görürüz:
<ul>
<li><a href="index.html">Home Page</a></li>
<li><a href="aboutUs.html">About Us</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>Altbilgiler, sayfa sonlarında bulunarak, kullanıcı deneyimini artırır.
HTML, web sayfalarının temellerini oluşturan bir işaretleme dilidir. Yukarıdaki örnekte, basit bir blog sayfasının yapısını inceledik. Web sayfanızda başlık, içerik ve navigasyon gibi bölümleri tanımlamak için HTML etiketlerinden faydalanabilirsiniz. Her bir etiket, sayfanın yapısını düzenler ve içeriğinizi ziyaretçilere sunar.
Eğer HTML hakkında daha fazla bilgi edinmek istiyorsanız, bu temel yapıyı genişleterek daha dinamik ve etkileşimli sayfalar oluşturabilirsiniz. Unutmayın, HTML sadece bir başlangıçtır; CSS ve JavaScript ile sayfanızı daha da geliştirerek zenginleştirebilirsiniz. HTML ile ilgili daha çok bilgi için “HTML” sayfasına bakabilirsin. Ayrıca w3schools sayfasına da bakabilirsin.
Web Sitesi Örneği
index.html
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Anasayfa</title>
</head>
<body>
<!--Navbar - start-->
<header>
<nav>
<ul>
<li>
<a href="index.html">Anasayfa</a>
</li>
<li>
<a href="aboutUs.html">Hakkımızda</a>
</li>
<li>
<a href="contact.html">İletişim</a>
</li>
</ul>
</nav>
</header>
<!--Navbar - end-->
<!--Content - start-->
<section>
<!--Articles - start-->
<article>
<img src="https://picsum.photos/id/505/600/300" alt="a picture from Lorem Picsum">
<h2>Birinci Yazı</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi, dolorum?</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Necessitatibus, eaque. A, exercitationem reprehenderit?</p>
<p>Dicta blanditiis obcaecati nemo esse.</p>
<ol>
<li>Lorem, ipsum dolor.</li>
<li>Laboriosam, esse beatae.</li>
<li>Iusto, numquam a?</li>
<li>Fugit, maiores animi?</li>
</ol>
<hr>
</article>
<article>
<img src="https://picsum.photos/id/487/600/300" alt="a picture from Lorem Picsum">
<h2>İkinci Yazı</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi, dolorum?</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Necessitatibus, eaque. A, exercitationem reprehenderit?</p>
<p>Dicta blanditiis obcaecati nemo esse.</p>
<ul>
<li>Lorem ipsum dolor sit.</li>
<li>Quia cupiditate accusantium aliquam?</li>
<li>Adipisci ullam molestiae consequuntur?</li>
<li>Consequatur quae ab distinctio.</li>
</ul>
<hr>
</article>
<article>
<img src="https://picsum.photos/id/37/600/300" alt="a picture from Lorem Picsum">
<h2>Üçüncü Yazı</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi, dolorum?</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Necessitatibus, eaque. A, exercitationem reprehenderit?</p>
<p>Dicta blanditiis obcaecati nemo esse.</p><hr>
</article>
<!--Articles - end-->
</section>
<!--Content - end-->
<!--Footer - start-->
<ul>
<li>
<a href="index.html">Anasayfa</a>
</li>
<li>
<a href="aboutUs.html">Hakkımızda</a>
</li>
<li>
<a href="contact.html">İletişim</a>
</li>
</ul>
<!--Footer - end-->
</body>
</html>
aboutUs.html
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hakkımızda</title>
</head>
<body>
<!--Navbar - Start-->
<header>
<nav>
<ul>
<li>
<a href="index.html">Anasaya</a>
</li>
<li>
<a href="aboutUs.html">Hakkımızda</a>
</li>
<li>
<a href="contact.html">İletişim</a>
</li>
</ul>
</nav>
</header>
<!--Navbar - End-->
<!--Content - Start-->
<section>
<!--Articles - Start-->
<article>
<img src="https://picsum.photos/id/25/600/300" alt="">
<h2>Hakımızda </h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Temporibus, ipsum.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing.</p>
<p>Lorem ipsum dolor sit amet consectetur.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda similique sed quo!</p>
<p>Lorem ipsum dolor sit amet.</p>
<hr>
</article>
<!--Articles - End-->
</section>
<!--Content - End-->
<!--Footer - Start-->
<ul>
<li>
<a href="index.html">Anasaya</a>
</li>
<li>
<a href="aboutUs.html">Hakkımızda</a>
</li>
<li>
<a href="contact.html">İletişim</a>
</li>
</ul>
<!--Footer - End-->
</body>
</html>
contact.html
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>İletişim</title>
</head>
<body>
<header>
<nav>
<ul>
<li>
<a href="index.html">Anasayfa</a>
</li>
<li>
<a href="aboutUs.html">Hakkımızda</a>
</li>
<li>
<a href="contact.html">İletişim</a>
</li>
</ul>
</nav>
</header>
<section>
<article>
<h2>İletişim</h2>
<img src="https://picsum.photos/id/57/600/300" alt="">
<p>
Address:
</p>
<address>
İstanbul <br>
Menekşe Mahallesi Sümbül Sokak<br>
Beyoğlu, İstanbul
<ul>
<li>
<a href="tel:02121234567">0212 123 45 67</a>
</li>
<li>
<a href="mailto:info@ornek.org">info@ornek.org</a>
</li>
</ul>
</address>
<hr>
</article>
</section>
<footer>
<ul>
<li>
<a href="index.html">Anasayfa</a>
</li>
<li>
<a href="aboutUs.html">Hakkımızda</a>
</li>
<li>
<a href="contact.html">İletişim</a>
</li>
</ul>
</footer>
</body>
</html>
-
<img>etiketindealtözelliği ne işe yarar?<img>etiketindekialt(alternatif metin) özelliği, resmin yüklendiği durumda görüntülenemediği durumlar için açıklayıcı bir metin sağlar. Bu, görsel engelli kullanıcılar için önemlidir çünkü ekran okuyucu yazılımlarının resimleri tanımlamasına olanak tanır. Ayrıca, resim yüklenemediğinde kullanıcıya alternatif bir açıklama sunar. -
Bir web sayfası neden başlık etiketi (
<title>) kullanmalıdır?<title>etiketi, sayfanın başlığını belirler ve bu başlık, tarayıcı sekmesinde görünür. Aynı zamanda, sayfanın arama motorları tarafından indekslenmesinde de önemli bir rol oynar. Başlık, sayfanın içeriğini kısa ve öz bir şekilde tanımlar, bu nedenle SEO (arama motoru optimizasyonu) açısından da önemlidir. -
HTML ile dinamik bir web sayfası yapılabilir mi?
HTML, statik içerik sağlar; yani yalnızca sabit veri sunar. Ancak, HTML’i CSS (stil eklemek) ve JavaScript (dinamik etkileşimler eklemek) ile birleştirerek dinamik ve etkileşimli web sayfaları oluşturabilirsiniz. JavaScript ile kullanıcı etkileşimlerine tepki verebilir ve sayfanın içeriğini değiştirebilirsiniz.
-
HTML’in SEO üzerindeki etkisi nedir?
HTML, SEO (arama motoru optimizasyonu) açısından oldukça önemlidir çünkü doğru HTML etiketlerini kullanmak, web sayfanızın arama motorları tarafından daha iyi anlaşılmasını sağlar. Başlık etiketleri (
<title>), başlıklar (<h1>,<h2>, vb.), açıklamalar (<meta>), ve içeriğin yapısı gibi öğeler, SEO performansını etkileyebilir.
Henüz yorum yapılmamış. İlk yorumu siz yapabilirsiniz!