HTML Kodu Örnekleri ile Web Sayfası Oluşturma

Yazan /

HTML Nedir?

HTML (HyperText Markup Language), web sayfalarını oluşturmak için kullanılan bir işaretleme dilidir. HTML, sayfanın yapısını tanımlamak için çeşitli etiketler kullanır. Bu etiketler, metin, resim, bağlantı gibi bileşenlerin nasıl görüntüleneceğini belirler. HTML’in temel amacı, internet kullanıcılarının farklı web sayfalarına erişimini kolaylaştırmaktır.

Bir HTML belgesi, metin düzenleyicide (örneğin Not Defteri) oluşturulabilir. Basit bir HTML belgesi şu şekilde görünür:

<!DOCTYPE html>
<html>
<head>
    <title>Benim İlk Web Sayfam</title>
</head>
<body>
    <h1>Merhaba, Dünya!</h1>
    <p>HTML kodu öğreniyorum.</p>
</body>
</html>

HTML Temel Etiketleri

HTML’in temel etiketlerinden bazıları şunlardır:

  • <html>: HTML belgesinin başlangıcını tanımlar.
  • <head>: Sayfanın başlık ve stil bilgilerini içerir.
  • <title>: Sayfanın başlığını tanımlar ve tarayıcı sekmesinde görünür.
  • <body>: Sayfanın görünen içeriğini barındırır.

Örneğin, başlıkları göstermek için kullanılan etiketler şunlardır:

<h1>Başlık 1</h1>
<h2>Başlık 2</h2>
<h3>Başlık 3</h3>

Bu etiketler, sayfanın hiyerarşisine göre içeriği belirli şekillerde biçimlendirir. Kullanıcılar, tarayıcıda sayfayı görüntülediğinde başlıkların boyutları sayesinde içerik sıralamasını kolayca anlayabilir.

HTML Paragraf ve Metin Biçimlendirme

HTML’de metin paragraflarını oluşturmak için <p> etiketi kullanılır. Örneğin:

<p>Bu bir paragraftır.</p>

Metin biçimlendirmek için de çeşitli etiketler mevcuttur:

  • <b>: Kalın metin için kullanılır.
  • <i>: İtalik metin için kullanılır.
  • <u>: Altı çizili metin için kullanılır.

Örneğin, tarihsel bir olayı ifade etmek için:

<p>1 Mayıs, <b>Emek ve Dayanışma Günü</b> olarak kutlanır.</p>

HTML’de Bağlantılar ve Resimler

Bağlantılar oluşturmak için <a> etiketi kullanılır. Örneğin, bir web sitesine bağlantı vermek için:

<a href="https://www.ornek.com">Ornek Web Sitesi</a>

HTML dilinde resim eklemek için ise <img> etiketi kullanılır. Resimlerin konumu ve boyutu ayarlanabilir:

<img src="resim.jpg" alt="Örnek Resim" width="300" height="200">

Bu şekilde, web sayfanızda görseller de kullanarak içeriğinizi daha çekici hale getirebilirsiniz.

HTML Listeleri Kullanma

HTML’de içindeki öğeler sıralı veya sırasız listeler oluşturmak için kullanılır. Sırasız bir liste oluşturmak için <ul> etiketi kullanılarak her öğe için <li> etiketleri eklenebilir:

<ul>
    <li>Öğe 1</li>
    <li>Öğe 2</li>
</ul>

Sıralı liste oluşturmak için ise <ol> kullanılabilir:

<ol>
    <li>Birinci Öğe</li>
    <li>İkinci Öğe</li>
</ol>

Bu yapı, içeriğin daha düzenli ve takip edilebilir olmasını sağlar.

HTML Tablolar Oluşturma

HTML tablolar, verileri düzenli bir şekilde sunmak için kullanılır. Tablolar <table> etiketi ile tanımlanır ve satırları oluşturmak için <tr>, hücreleri oluşturmak için ise <td> etiketleri kullanılır:

<table>
    <tr>
        <th>Başlık 1</th>
        <th>Başlık 2</th>
    </tr>
    <tr>
        <td>Hücre 1</td>
        <td>Hücre 2</td>
    </tr>
</table>

Başlık satırı oluşturmak için <th> etiketi kullanılır. Tablolar, verilerin görsellerle desteklenmesine yardımcı olur ve kullanıcıların bilgiyi daha kolay anlamasını sağlar.

HTML Yorum ve Öznitelikler

Yorum eklemek, kodun anlaşılabilirliğini artırmak için önemlidir. HTML’de yorum eklemek için aşağıdaki yapıyı kullanabilirsiniz:

<!-- Bu bir yorumdur -->

Öznitelikler, HTML etiketlerine daha fazla bilgi eklemenizi sağlar. Örneğin, bir bağlantı için hedef belirlemek için <a> etiketinde target özniteliğini kullanabilirsiniz:

<a href="https://www.yeni-sayfa.com" target="_blank">Yeni Sayfa Aç</a>

Bu, bağlantıya tıklanıldığında yeni bir sekmede açılmasını sağlar.

HTML ile Güzel Tasarımlar Oluşturma

HTML görsel içerik oluşturmada temel bir yapı sağlar. Ancak, CSS ile birlikte kullanıldığında estetik ve fonksiyonellik kazanır. CSS ile sayfanın görünümünü kişiselleştirebilir, yazı tiplerini, renkleri ve yerleşimi değiştirebilirsiniz.

Örneğin:

<style>
    body {
        background-color: #f4f4f4;
        color: #333;
        font-family: Arial, sans-serif;
    }
</style>

Bu CSS kodu, sayfanın arka plan rengini ve yazı rengini değiştirecektir. HTML ve CSS birlikte kullanıldığında kullanıcılar için hem bilgi sunma hem de görsel deneyim sağlama açısından güçlü bir etki yaratır.

Sonuç

HTML, web tasarımının temel taşlarından biridir. Basit bir HTML dokümanı ile başlayarak, çeşitli etiketleri ve yapıları öğrenebilir ve karmaşık içerikler oluşturabilirsiniz. Bu makalede yalnızca temel düzeyde bazı örnekler verdik. Ancak uygulama yaparak daha derinlemesine öğrenebilirsiniz.

HTML’in gücünü anlamak, web tasarımında ve gelişiminde size büyük avantajlar sağlayacaktır. Kendinizi geliştirmek ve örnekler üzerinde çalışmak için sitenizi oluşturun ve denemeler yapın!

Benzer Yazılar

Scroll to Top