Html Head ve Body Kod bloklarından oluşur. Ekrandaa gözüken bütün nesneler body arasına yazılır.

HTML , Köprü Metni Biçimlendirme Dili anlamına gelir . Kullanıcının web sayfaları ve uygulamaları için bölümler, paragraflar, başlıklar, bağlantılar ve blok alıntılar oluşturmasına ve yapılandırmasına olanak tanır.

HTML bir programlama dili değildir, yani dinamik işlevsellik oluşturma yeteneği yoktur. Bunun yerine, Microsoft Word’e benzer şekilde belgeleri düzenlemeyi ve biçimlendirmeyi mümkün kılar.

HTML ile çalışırken, bir web sitesi sayfasını işaretlemek için basit kod yapıları (etiketler ve özellikler) kullanırız. Örneğin, ekteki metni başlangıç <p> ve kapanış </p> etiketine yerleştirerek bir paragraf oluşturabiliriz .

  1. <p > HTML’de paragrafı bu şekilde eklersiniz. </ p>
  2. <p > Birden fazla tür olabilir! </ p>

Genel olarak, HTML, web sitesi oluşturmadaki yeni başlayanlar için gerçekten basit ve öğrenmesi kolay bir biçimlendirme dilidir. Bu makaleyi okuyarak şunları öğreneceksiniz:

HTML’nin Tarihçesi

HTML, İsviçre’deki CERN araştırma enstitüsünde fizikçi Tim Berners-Lee tarafından icat edildi . İnternet tabanlı bir köprü metin sistemi fikri ortaya attı.

Köprü metni, görüntüleyenlerin hemen erişebileceği diğer metinlere referanslar (bağlantılar) içeren bir metin anlamına gelir. 1991’de 18 HTML etiketinden oluşan ilk HTML sürümünü yayınladı. O zamandan beri, HTML dilinin her yeni sürümü, işaretlemeye yeni etiketler ve nitelikler (etiket değiştiriciler) ile geldi.

Mozilla Developer Network’ün HTML Element Referansına göre , şu anda 140 HTML etiketi var, ancak bazıları zaten eski (modern tarayıcılar tarafından desteklenmiyor).

Popülerliğin hızla artması nedeniyle, HTML artık resmi bir web standardı olarak kabul edilmektedir. HTML spesifikasyonları, World Wide Web Konsorsiyumu (W3C) tarafından korunur ve geliştirilir. W3C’nin web sitesinde dilin en son durumunu istediğiniz zaman kontrol edebilirsiniz .

Dilin en büyük yükseltmesi 2014’te HTML5’in tanıtımıydı. İşaretlemeye <article> , <header> ve <footer> gibi kendi içeriklerinin anlamını ortaya koyan birkaç yeni semantik etiket ekledi .

Dikkatinizi Çekebilir;   Python Kullanan 8 Birinci Sınıf Yazılım Şirketi

HTML Nasıl Çalışır?

HTML belgeleri, .html  veya .htm  uzantısı ile biten dosyalardır. Ardından herhangi bir web tarayıcısını (Google Chrome, Safari veya Mozilla Firefox gibi) kullanarak görüntüleyebilirsiniz. Tarayıcı HTML dosyasını okur ve içeriğini internet kullanıcılarının görüntüleyebilmesi için oluşturur.

Genellikle, ortalama web sitesi birkaç farklı HTML sayfası içerir . Örneğin: ana sayfalar, yaklaşık sayfalar, iletişim sayfalarının hepsinde ayrı HTML belgeleri bulunur.

Her HTML sayfası , web sayfalarının yapı taşları olarak başvurabileceğiniz bir dizi etiketten ( öğeler de denir ) oluşur . İçeriği bölümler, paragraflar, başlıklar ve diğer içerik blokları şeklinde yapılandıran bir hiyerarşi oluştururlar.

Çoğu HTML öğesinde <tag> </tag> sözdizimini kullanan bir açılış ve kapanış vardır .

Aşağıda, HTML öğelerinin nasıl yapılandırılabileceğine ilişkin bir kod örneği görebilirsiniz:

Html kodları ve içerik
  • En dıştaki öğe, daha büyük içerik bölümlerini oluştrmak için kullanabileceğiniz basit bir bölümdür ( <div> </div> ).
  • Bir başlık ( <h1> </h1> ), bir alt başlık ( <h2> </h2> ), iki paragraf ( <p> </p> ) ve bir resim ( <img> ) içerir.
  • İkinci paragraf , hedef URL’yi içeren bir href özniteliğine sahip bir bağlantı –köprü-  ( <a> </a> ) içerir.
  • Resim etiketi ayrıca iki niteliğe sahiptir: resim yolu için src ve resim açıklaması için alt .

En Çok Kullanılan HTML Etiketlerine Genel Bakış

HTML etiketlerinin iki ana türü vardır: blok düzeyi ve satır içi etiketler .

  1. Blok düzeyindeki öğeler kullanılabilir alanın tamamını kaplar ve her zaman belgede yeni bir satır başlatır. Başlıklar ve paragraflar blok etiketlere harika bir örnektir.
  2. Satır içi öğeler yalnızca ihtiyaç duydukları kadar yer kaplar ve sayfada yeni bir satır başlatmaz. Genellikle blok düzeyi elemanların iç içeriğini biçimlendirmeye yararlar. Bağlantılar ve vurgulanan dizeler satır içi etiketlere iyi örneklerdir.

Blok Seviyesi Etiketleri

Her HTML belgesinin içermesi gereken üç blok düzeyi etiketi <html> , <head> ve <body> .

  1. <Html> </ html> etiketi her HTML sayfası çevreler en üst düzey unsurdur.
  2. <Head> </ head> etiketi, Sayfanın başlığı ve charset meta bilgileri tutar.
  3. Son olarak, <body> </body> etiketi sayfada görünen tüm içeriği kapsar.
  1. <html >
  2. <Head >
  3. <! – META BİLGİLERİ ->
  4. </ Head>
  5. <Body >
  6. <! – SAYFA İÇERİĞİ ->
  7. </ Body>
  8. </ Html>
  • Başlıkların HTML’de 6 seviyesi vardır. Bunlar <h1> </h1> ila <h6> </h6> arasındadır, burada h1 en yüksek düzey başlığı ve h6 en düşük düzeydir. Paragraflar <p> </p> ile çevrelenirken  , blok alıntılar <blockquote> </blockquote> etiketini kullanır.
  • Bölümler, genellikle birkaç paragraf, resim, bazen blok alıntılar ve daha küçük öğeler içeren daha büyük içerik bölümleridir. Bunları <div> </div> etiketini kullanarak işaretleyebiliriz . Bir div öğesi, içinde başka bir div etiketi de içerebilir.
  •  Sıralı listeler için <ol> </ol> etiketlerini ve sırasız listeler için <ul> </ul> etiketlerini  de kullanabilirsiniz  . Bireysel liste öğeleri <li> </li> etiketi ile çevrelenmelidir . Örneğin, HTML’de temel sıralanmamış bir liste şöyle görünür:
Dikkatinizi Çekebilir;   İngiliz işletme liderlerinin üçte ikisi çocuklara teknoloji öğretmenin matematikten daha önemli olduğunu söylüyor
Örnek Kodlama ve Çıktısı


Satır İçi Etiketler

Metni biçimlendirmek için birçok satır içi etiket kullanılır. Örneğin, bir  <strong> </strong> etiketi bir öğeyi kalın olarak gösterirken ,  <em> </em> etiketleri onu italik olarak gösterir .

Köprüler ayrıca bağlantının hedefini belirtmek için <a> </a> etiketleri ve  href nitelikleri gerektiren satır içi öğelerdir  :

  1. <a href = “https://example.com/”> Beni tıkla! </a>

Görüntüler de satır içi öğelerdir. Herhangi bir kapanış etiketi olmadan <img> kullanarak bir tane ekleyebilirsiniz  . Ancak  , görüntü yolunu belirtmek için src niteliğini de kullanmanız gerekir  , örneğin:

  1. <img src = “/images/example.jpg” alt = “Örnek resim” >

HTML Evrimi. HTML ve HTML5 Arasındaki Fark Nedir?

İlk günlerden bu yana, HTML inanılmaz bir evrim geçirdi. W3C, sürekli olarak yeni sürümleri ve güncellemeleri yayınlarken, tarihsel dönüm noktaları da özel isimler alır.

HTML4 (bu günlerde yaygın olarak “HTML” olarak adlandırılır) 1999 yılında yayınlanırken, en son ana sürüm 2014 yılında çıktı. HTML5 olarak adlandırılan  güncelleme, dile birçok yeni özellik getirdi.

HTML5’in en çok beklenen özelliklerinden biri, ses ve video yerleştirme için yerel destek. Flash oynatıcı kullanmak yerine, yeni <audio> </audio> ve <video> </video> etiketlerini kullanarak videoları ve ses dosyalarını web sayfalarımıza yerleştirebiliriz .

HTML5 de bazı anlamsal iyileştirmeler yaptı. Yeni semantik etiketler (anlam taşıyan etiketler ), tarayıcıları içeriğin anlamı hakkında bilgilendirir, bu da hem okuyuculara hem de arama motorlarına yarar sağlar.

En popüler anlamsal etiketler <article> </article> , <section> </section> , <aside> </aside> , <header> </header> ve <footer> </footer> .

Örneğin <h1> etiketi de bir semantik etikettir. Çünkü <h1> etiketi içine aldığımız başlık sayfamızın en önemli özet bilgisi olarak algılanır ve sayfada bir tane kullanmamız önerilir.

Şöyle ki <h1> etiketi ile oluşturduğumuz bir başlığın nasıl göründüğünden çok hangi anlamda bilgi sunduğu önemlidir.

HTML Artıları ve Eksileri

Dikkatinizi Çekebilir;   JQuery nedir

Çoğu şey gibi, HTML de birkaç güçlü yön ve sınırlama ile birlikte gelir.

Artıları:

  • Çok fazla kaynağa ve geniş bir topluluğa sahip yaygın olarak kullanılan bir dil.
  • Her web tarayıcısında yerel olarak çalışır.
  • Düz bir öğrenme eğrisi ile birlikte gelir.
  • Açık kaynak kodlu ve tamamen ücretsiz.
  • Her istek hızlı gerçekleştirilir ve en az düzeyde kaynak kullanılır.
  • Resmi web standartları, World Wide Web Konsorsiyumu (W3C) tarafından korunmaktadır.
  • PHP ve Node.js gibi arka plan dillerine kolayca entegre edilebilir.

Eksileri:

  • Genellikle statik web sayfaları için kullanılır. Dinamik işlevsellik için JavaScript veya PHP gibi arka plan dili kullanmanız gerekebilir.
  • Tasarımları düzenlenmesi ve kontrolü zordur.
  • Bazı tarayıcılar yeni özellikleri yavaşça benimser.
  • Çok sayıda sayfa içeren siteler için kullanışlı değildir.
  • Tarayıcı davranışını tahmin etmek bazen zordur (örneğin, eski tarayıcılar her zaman daha yeni etiketler oluşturmaz).
  • Hızlı değişen içerik ve kişiselleştirmeler için kullanışlı değildir.

HTML, CSS ve JavaScript arasındaki ilişki nedir?

HTML güçlü bir dil olsa da, profesyonel ve tamamen duyarlı bir web sitesi oluşturmak için yeterli değildir. Bunu yalnızca metin öğeleri eklemek ve içeriğin yapısını oluşturmak için kullanabiliriz.

Ancak, HTML diğer iki ön uç diliyle son derece iyi çalışır:  CSS (Basamaklı Stil Sayfaları) ve JavaScript . Birlikte, zengin kullanıcı deneyimi elde edebilir ve gelişmiş işlevleri uygulayabilirler.

  • CSS, arka plan, renkler, düzenler, boşluklar ve animasyonlar gibi stillerden sorumludur.
  • JavaScript, kaydırıcılar, pop-up’lar ve fotoğraf galerileri gibi dinamik işlevler eklemenize olanak tanır.

HTML’yi çıplak bir kişi, CSS’yi giyim, JavaScript’i de hareket ve tarz olarak düşünün.

Html Öğrenmek İçin En İyi Çevrimiçi Kurslar

  1. https://www.udemy.com/

CEVAP VER

Lütfen yorumunuzu giriniz!
Lütfen isminizi buraya giriniz