HTML Temelleri

html temelleri

Web geliştirmenin temel taşı olan HTML Temelleri (HyperText Markup Language), web sayfalarının oluşturulmasında vazgeçilmez bir rol oynar. Bu makalede, HTML’nin ne olduğunu anlamak ve temel kullanımını öğrenmek için adım adım rehber sunacağız.

HTML Temelleri Nedir ve Neden Önemlidir?

HTML, web sayfalarının yapılandırılmasını ve içeriklerinin düzenlenmesini sağlayan bir işaretleme dilidir. Basit ve anlaşılır etiketleri kullanarak, başlıklar, paragraflar, resimler, bağlantılar ve daha fazlası gibi sayfa öğelerini tanımlayabilirsiniz. Bu, web tarayıcılarının bu kodları alarak sayfaları görüntülemesini sağlar. HTML olmadan, internette gezinme ve içerik tüketme deneyimi düşünülemez. Detaylar için HTML Nedir konumuzu inceleyebilirsiniz.

HTML Hiyerarşisi

HTML temel öğeleri hiyerarşiktir, yani web sayfasındaki içeriğin ağaç benzeri yapısını oluşturmak için birbirlerinin içine yerleştirilebilirler.

Bu hiyerarşik yapıya DOM (Belge Nesne Modeli) denir ve web tarayıcısı tarafından web sayfasını oluşturmak için kullanılır. Bu örnek en temel html web sitesi örneğidir. Örneğin ;

<!DOCTYPE html>
<html>
<head>
    <title>İlk HTML Sayfam</title>
</head>
<body>
    <h1>Merhaba, Dünya!</h1>
    <p>HTML <strong>öğrenmek</strong> <em>harika</em> bir deneyimdir.</p>
</body>
</html>

Tarayıcı Çıktısı :

html temelleri tarayıcı çıktısı

Bu örnekte html öğesi, hiyerarşinin kök(en büyük) öğesidir ve iki alt öğe içerir: head ve body

Head öğesi ise sırasıyla,  title öğresini içerir.

body öğesi ise, h1 ve p alt öğelerini içermektedir.

Yukarıdaki örnekte kullanılan html temelleri çeşitli öğelerin anlamlarına bakalım.

  • <html>: DOM’un kök öğesidir ve koddaki diğer tüm öğeleri içerir
  • <head>: başlık ve bağlantılı CSS veya JavaScript dosyaları gibi web sayfasıyla ilgili meta verileri içerir
  • <title>: web tarayıcısının başlık çubuğunda veya sekmesinde görüntülenecek olan web sayfasının başlığını içerir
  • <body>: Web tarayıcısının penceresinde görüntülenecek olan web sayfasının ana içeriğini içerir
  • <p>: web sayfasındaki metnin paragraflarını içerir
  • <strong><em>: öğelerin alt öğeleri <p>, metni sırasıyla önemli ve vurgulu olarak işaretlemek için kullanılırlar.

Not: Web tarayıcısında yalnızca <body> etiketinin içindeki öğeler görüntülenir.

HTML öğeleri nelerdir ?

HTML öğeleri, açılış ve kapanış etiketleri, içerik ve nitelikler dahil olmak üzere çeşitli bölümlerden oluşur. İşte bu parçaların her birinin açıklaması:

html öğeleri nelerdir

Burada,

  • Açılış etiketi : Bu, açılı parantez içine alınmış öğe adından oluşur. Elementin başlangıcını ve elementin etkilerinin başladığı noktayı belirtir.
  • Kapanış etiketi : Bu, açılış etiketiyle aynıdır ancak öğe adının önünde eğik çizgi bulunur. Elementin sonunu ve elementin etkilerinin bittiği noktayı belirtir.
  • İçerik : Bu, metin, diğer öğeler veya her ikisinin birleşimi olabilen öğenin içeriğidir.
  • Element: Açılış etiketi, kapanış etiketi ve içerik birlikte öğeyi oluşturur.

HTML Nitelikleri Nelerdir?

HTML öğeleri, öğe hakkında ek bilgi sağlayan niteliklere sahip olabilir. Öğenin açılış etiketinde belirtilirler ve ad-değer çiftleri şeklini alırlar. Bir örnek görelim:

<a href="http://example.com"> Örnek</a>

Burada bulunan href özelliği bir niteliktir. <a> etiketine ilişkin bağlantı bilgilerini sağlar. Yukarıdaki örnekte;

  • href – özelliğin adı
  • https://www.karasoft.com.tr – özelliğin değeri

Not : HTML nitelikleri çoğunlukla isteğe bağlıdır.

HTML Syntax (söz dizimi)

Geçerli HTML kodu yazmak için katı bir syntax (söz dizimi) kurallarına uymamız gerekir. Bu, etiketlerin, öğelerin ve niteliklerin kullanımının yanı sıra girinti ve beyaz alanın doğru kullanımını da içerir. HTML sözdizimi ile ilgili bazı önemli noktalar şunlardır:

1. HTML etiketleri köşeli parantez içine alınmış öğe adından oluşur. Örneğin, <h1><p> bazı <img> HTML etiketleridir.

2. HTML öğeleri, öğenin içeriğinin, öğenin açılış ve kapanış etiketlerinin içine alınmasıyla oluşturulur. 

Örneğin,

<span>Bazı yazılar.</span>

bir HTML öğesidir.

3. HTML nitelikleri, HTML öğeleri hakkında ek bilgi sağlamak için kullanılır ve öğenin açılış etiketinde belirtilir. Örneğin,

<a target="_blank" href="https://www.karasoft.com.tr">Buraya tıklayın</a> 

Burada target kısmında bir nitelik var.

4. HTML kodu iyi biçimlendirilmiş ve düzgün girintili olmalı, her öğe kendi satırında olmalı ve hiyerarşinin her düzeyi bir düzey girintili olmalıdır. Bu, kodun okunmasını ve anlaşılmasını kolaylaştırır ve hataların önlenmesine yardımcı olabilir. Örneğin,

<html>
    <head>
        <title>İlk HTML Sayfamız</title>
    </head>
    <body>
        <h1>İlk HTML Sayfam</h1>
        <p>Merhaba Dünya!</p>
    </body>
</html>

Bu basit örneklerle HTML’nin temellerini anlamaya başladık. Kendi sayfalarınızı oluşturarak daha fazla pratik yapabilirsiniz. HTML öğrenmek, web geliştirme dünyasına adım atmanın heyecan verici bir yoludur. Unutmayın, her büyük web uygulaması HTML’nin güçlü temelleri üzerine inşa edilmiştir.

HTML Temelleri dersimizi bitirmiş olduk. Aklınıza takılan soruları yorum bölümünden sormayı unutmayınız. Bir sonraki derste görüşmek dileğiyle.

Click to rate this post!
[Total: 1 Average: 5]

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir