Temel HTML komutları kullanılarak basit bir web sayfası oluşturabiliriz. Aşağıda, bir HTML belgesinin temel yapısını içeren bir örnek bulunmaktadır. Bu örnek, başlık, paragraf, bağlantı ve resim etiketlerini içermektedir:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Temel HTML Uygulama</title>
</head>
<body>
<header>
<h1>Hoş Geldiniz!</h1>
</header>
<nav>
<ul>
<li><a href="#section1">Bölüm 1</a></li>
<li><a href="#section2">Bölüm 2</a></li>
<li><a href="#section3">Bölüm 3</a></li>
</ul>
</nav>
<section id="section1">
<h2>Bölüm 1</h2>
<p>Bu bir paragraf içeriğidir. HTML etiketleri sayesinde metni düzenleyebilir ve biçimlendirebilirsiniz.</p>
<img src="resim-url" alt="Açıklama">
</section>
<section id="section2">
<h2>Bölüm 2</h2>
<p>HTML, web sayfalarının yapısal ve içeriksel özelliklerini tanımlamak için kullanılır.</p>
<a href="https://www.example.com">Örnek Bağlantı</a>
</section>
<section id="section3">
<h2>Bölüm 3</h2>
<p>HTML, CSS ve JavaScript gibi teknolojiler bir araya gelerek interaktif ve görsel zengin web sayfalarının oluşturulmasını sağlar.</p>
</section>
<footer>
<p>© 2024 Temel HTML Uygulama</p>
</footer>
</body>
</html>
Bu örnekte:
<!DOCTYPE html>: HTML5 standardını belirtir.<html>: HTML belgesinin başlangıcını ve sonunu belirtir.<head>: Başlık, karakter seti, viewport gibi meta bilgileri içerir.<body>: Sayfanın görünen içeriğini içerir.<header>,<nav>,<section>,<footer>: Semantik etiketler, sayfanın yapısını belirler.<h1> to <h2>: Başlık etiketleri, sayfanın başlığını ve bölüm başlıklarını belirler.<p>: Paragraf etiketi, metni paragraflara böler.<a>: Bağlantı etiketi, sayfa içindeki veya dışındaki kaynaklara bağlantı sağlar.<img>: Resim etiketi, sayfaya bir resim ekler.
Bu temel örnek, HTML etiketlerinin nasıl kullanılacağını göstermektedir. Öğrenmeye başladığınızda, daha karmaşık sayfalar oluşturabilir ve CSS ve JavaScript gibi diğer teknolojileri de entegre edebilirsiniz.