HTML - Giriş

1152 Okunma HTML Ders No : 1

HTML (HyperText Markup Language), internet üzerinden bilgi iletmek için geliştirilmiş bir standarttır. Bir HTML sayfası dinamik yapıdadır, bağlantılara tıklayarak ve sayfa ile etkileşime girerek sizi geçerli sayfadaki farklı bir konuma veya internet üzerinden farklı bir sayfaya götürebilir.

HTML ile birlikte , CSS ve JavaScript kodları da sıkça kullanılmaktadır. CSS ve Javascript (js), bir html sayfasında kullanılmakta ve html kodlarına yardımcı olmaktadır. Web tarayıcısı HTML sayfasını yüklerken css ve js den gelen kodları da yükler ve web sayfası oluşur.

CSS kodları, HTML öğelerinin stilini tanımlar. Bir HTML sayfasının içine yerleştirilir veya ".css" uzantılı başka bir dosya olarak yaratılıp, html sayfası ile etkileşime sokulabilir.

JavaScript, DOM (Document Object Model veya Belge Nesne Modeli) adı verilen bir API aracılığıyla HTML sayfasıyla etkileşim kurmak için kullanılan programlama dilidir.

İlk HTML Sayfamız

Basit anlamda bir html sayfası yaratalım. 

</DOCTYPE html>
    <html>
        <head>
         
        </head>
        <body>
         
        </body>
    </html>

Yukarıdaki örnekte görüldüğü üzere "head" ve "body" kısımları sayfanın ana bileşenlerini oluşturur.

Tarayıcı sekmesinin başlığında görünmesi için "title" ve bir paragraf yazmak için "p" ekleyelim.

Unutulmaması gereken nokta, her elementin bir başlangıç ve bitiş etiketi vardır. "<>" ile başlar ve "</>" ile biter. Element ile ilgili herşey bu etiketlerin içinde meydana gelmektedir. 

</DOCTYPE html>
    <html>
        <head>
            <title> Örnek Başlık </title>
        </head>
        <body>
            <p> Örnek paragraf metni </p>
        </body>
    </html>

Bir ".txt" dosyası yaratın. Sonra bu kodu oraya kopyalayıp, "index.html" olarak kaydedin. Böylece basit bir html sayfası yaratmış olursunuz. Daha sonra dosyaya çift tıklayarak yaratılan html örneğini tarayıcınızda görebilirsiniz.

HTML Temel Elementleri

HTML dilinde en çok kullanılan temel elementleri inceleyelim.

  • Bir metin başlığı yaratmak için <h1>, <h2>, <h3>, <h4>, <h5>, <h6> etiketleri kullanılır.
  • Bir paragraf yaratmak için <p> etiketi kullanılır.
  • Yatay bir çizgi yaratmak için <hr> etiketi kullanılır.
  • Bir link (bağlantı) yaratmak için <a> etiketi kullanılır.
  • Liste ile ilgili element yaratmak için <ul>(sırasız liste), <ol>(sıralı liste) ve <li> (liste öğesi) etiketleri kullanılır.
  • Bir resim öğesi yaratmak için <img> etiketi kullanılır.
  • Bir bölücü (divider) öğesi yaratmak için <div> etiketi kullanılır.
  • Bir metin aralığı yaratmak için <span> etiketi kullanılır.

Ayrıca her öğenin kendine ait attribute (öznitelik) grubu vardır. Fakat bazıları bir çok html elementinde kullanılmaktadır. Bunlar..

  • id : Sayfadaki bir öğenin kendine ait kimliğidr. Link, JavaScript ve daha fazlasını kullanarak öğeleri bulmak için kullanılır.
  • class : Bir öğenin CSS sınıfını belirtir.
  • style : Bir öğeye uygulanacak CSS stillerini belirtir.
HTML