Home
Ders
Eğitim

HTML Eğitimi - Ders 1: HTML Nedir?

Dynexplorer


Bu dersimizde HTML'in ne olduğunu, neden kullanıldığını ve basit bir HTML belgesi oluşturmayı öğreneceğiz.

HTML Nedir?

HTML, "HyperText Markup Language" ifadesinin kısaltmasıdır. Web sayfalarını oluşturmak için kullanılan standart bir işaretleme dilidir. HTML, bir web sayfasının yapısını ve içeriğini tanımlamak için kullanılır.

HTML'in Kullanım Alanları

HTML, şu alanlarda yaygın olarak kullanılır:

  • Web sayfalarının içeriğini oluşturma (metin, görsel, bağlantılar).
  • Sayfa yapısını tanımlama (başlıklar, paragraflar, listeler).
  • Diğer teknolojilerle (CSS, JavaScript) entegrasyon.

HTML Nasıl Çalışır?

HTML belgeleri, tarayıcılar tarafından okunur ve görüntülenir. Bir HTML belgesi, aşağıdaki gibi temel bir yapı içerir:

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>Web Sayfam</title>
</head>
<body>
    <h1>Merhaba Dünya!</h1>
    <p>Bu benim ilk HTML sayfam.</p>
</body>
</html>

HTML Dosyasını Oluşturma

HTML belgesi oluşturmak için aşağıdaki adımları izleyebilirsiniz:

  1. Bir metin düzenleyici (ör. Notepad, VS Code) açın.
  2. Yukarıdaki kodu kopyalayıp yapıştırın.
  3. Dosyayı index.html adıyla kaydedin.
  4. Tarayıcınızda bu dosyayı açarak sonucu görün.

Daha Fazla Öğrenmek İçin

HTML hakkında daha fazla bilgi edinmek için şu kaynağı ziyaret edebilirsiniz: MDN Web Docs - HTML.

HTML Elementleri ve Etiketler

HTML, elementler ve etiketler üzerine kuruludur. Etiketler, HTML elementlerinin başlangıç ve bitişini belirtir. Örneğin:

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

Yukarıdaki örnekte:

  • <p> başlangıç etiketi (açılış etiketi).
  • </p> bitiş etiketi (kapanış etiketi).
  • Bu bir paragraftır. ise elementin içeriğidir.

Her HTML elementi mutlaka başlangıç ve bitiş etiketi arasında içerik taşır. Ancak bazı elementler, kendiliğinden kapanır. Örneğin:

<img src="resim.jpg" alt="Bir resim">

<img> elementi bir görüntü eklemek için kullanılır ve içeriği olmadığı için kapanış etiketi kullanılmaz.

HTML'in Temel Yapısı

Bir HTML belgesinin temel yapısı aşağıdaki gibidir:

<!DOCTYPE html>
<html>
    <head>
        <title>Sayfa Başlığı</title>
    </head>
    <body>
        <h1>Başlık</h1>
        <p>Bu bir paragraf.</p>
    </body>
</html>

Burada:

  • <!DOCTYPE html>: HTML5 standardını belirtir.
  • <html>: Tüm HTML belgesini kapsar.
  • <head>: Belge başlığı, meta veriler ve harici dosya bağlantılarını içerir.
  • <body>: Görünen içerik bu kısımda yer alır.

HTML Elementleri ile Çalışmak

HTML'de en yaygın kullanılan elementler şunlardır:

  • <h1> - <h6>: Başlık elementleri.
  • <p>: Paragraf.
  • <a>: Bağlantı.
  • <img>: Görsel.
  • <ul> ve <ol>: Listeler.

Örnek:

<h1>Başlık 1</h1>
<p>Bu bir paragraf.</p>
<a href="https://ornek.com">Bu bir bağlantıdır.</a>
<img src="ornek.jpg" alt="Bir örnek resim">

HTML ile Stil ve Tasarım

HTML, bir web sayfasının yapısını oluşturur, ancak tasarımı genellikle CSS ile yapılır. Yine de HTML'de basit stiller eklemek için style özelliğini kullanabilirsiniz:

<p style="color: red;">Bu kırmızı bir paragraf.</p>

Ancak, bu yöntemin yerine CSS kullanmak her zaman önerilir.

Uygulama: Kendi Web Sayfanızı Oluşturun

Şimdi öğrendiklerimizi uygulamak için basit bir web sayfası yapalım:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Benim İlk Web Sayfam</title>
    </head>
    <body>
        <h1>Merhaba, Dünya!</h1>
        <p>Bu benim ilk web sayfam.</p>
        <a href="https://google.com">Google'a Git</a>
        <img src="ornek.jpg" alt="Örnek Resim">
    </body>
</html>

Bu dosyayı index.html adıyla kaydedin ve tarayıcınızda açın!

Bir sonraki dersimizde HTML elementlerini detaylıca inceleyeceğiz. Daha fazlası için bizi takip edin!

Post a Comment