HTML Nedir? HTML Kodlama Nasıl Yapılır? HTML Örnekleri

Standart biçimlendirme yerine geçen, Köprü Metni Biçimlendirme Dili (Hypertext Markup Language) HTML ’in açılımıdır. Web sayfaları ve uygulamalar için bölümler, paragraflar, başlıklar, bağlantılar ve bloklar oluşturmasına ve yapılandırmasına olanak tanır.

Seorative uzman ekibi, sizler için HTML nedir? Ne işe yarar? ve nasıl çalışır gibi soruların cevaplarını vererek, bir kılavuz hazırladı.

HTML Nedir?

  • Hiper Metin Biçimlendirme Dili / Köprü Metni Biçimlendirme Dili anlamına gelir.
  • Web sayfaları oluşturmak için standart biçimlendirme dili olarak kabul edilen bağlantı kodlarıdır ve web sayfasının yapısını tanımlar.
  • Öğeleri, tarayıcıya içeriği nasıl göstereceğini kodlarla anlatır.
  • Öğeleri, içerik parçalarını etiketler “bu başlık”, “bu paragraf”, “bu bağlantı” vb. 

Kısaca web sayfası ve içeriklerinin yapılandırılması için kullanılan özel kodlardır.

Birçok kişi bu yapının bir programlama dili olduğunu düşünse de aslında içeriğin yapısını tanımlayan bir biçimlendirme dili olarak bilinir. HTML; içerikte bulunan farklı bölümlerin, belli bir düzende görünmesi, belli şekilde davranması için kullanılan bir dizi öğeden meydana gelir.

HTML 5 Nedir? Artıları Nelerdir?

HTML 5 html’in en son sürümüdür. Aslında bir programlama dili olmayan ve web sitelerini oluşturmaya yarayan html’in son sürümü olan HTML 5 bazı ek özelliklere sahiptir.

Dahili Video ve Ses Oynatabilme: Bu özellik önceden üçüncü parti yazılımlar entegre edilerek yapılıyorken HTML 5 sayesinde herhangi bir dış kaynak kullanmadan da bu özelliği kullanabiliyorsunuz.

Çevrimdışı Önbellek: İnternet bağlantısı olmasa bile web sitesini daha önceden ziyaret etmiş kolayca site içinde gezinebilir ve site içerisindeki içeriklere ulaşabilir.

Mobile Uygunluk: Günümüzde internet kullanıcılarının çoğunluğu mobil cihazları kullanıyor. HTML 5 ekran boyutları çeşitlilik gösteren mobil cihazların ekran boyutlarına göre şekillenen web siteleri tasarlanmasını da izin veriyor. Bu sayede mobil tarafta da kullanıcı deneyimi daha da artıyor.

HTML Ne İşe Yarar?

Köprü metni biçimlendirme dili olarak da bilinen HTML, web sitesinin can damarlarından biridir.

  • Web sayfaları
  • Uygulamalar için bölümler
  • Paragraflar
  • Başlıklar
  • Bağlantılar
  • Blok alıntılar oluşturma ve yapılandırmada kullanılır.

HTML’nin bir programlama dili olmadığı, dinamik işlevsellik yaratma özelliği olmadığından dolayı, belgeleri Word’e benzeyen şekle uygun hale getirmeye yarar. HTML ile çalışırken, web sitesinin sayfalarını oluşturmak için HTML etiket kodları kullanılır.

HTML Nasıl Çalışır?

HTML yazmak için ilk olarak, HTML düzenleyici açılması gerekir. Sayfa üzerinde kullanılacak etiketler ile, HTML sayfasının temel yapısı oluşturulur. HTML etiketleri; HTML öğesinin başlangıcını işaretlemek için kullanılır. 

Genel olarak açılı parantez iç

inde kullanılır. Çoğu etiketin çalışması için <h1> kapatılması için </h1> şeklinde komut verilmesi gerekir. Aynı zamanda etiketler kullanılırken, açıldıkları sırayla kapatılmalıdır.

  • <!DOCTYPE HTML> etiketi; Web sitesinin ön sözüdür. Belge türlerinin HTML olarak kabul edilmesi için,  sayfanın izlemesi gereken bir dizi kural vardır. Bunun sebebi, otomatik hata denetimi içindir.
  • <HTML></HTML> etiketi; bu öğe, sayfanın tamamında bulunan tüm içerikleri kapsar ve çoğu zaman kök öğe olarak adlandırılır.
  • <head></head> etiketi; sayfanın içerik olmayan kısmıdır. HTML sayasına eklemek istenilen tüm şeyler için bir kap görevini üstlenir. Bu elemanın görevi; anahtar kelimeler ve arama sonuçlarında kullanıcıların görmesini istediğiniz bir sayfa açıklaması, içeriği şekillendiren CSS, karakter seti bildirimleri ve daha fazlasını kapsar.
  • <meta charset=”utf-8” etiketi; Bu öğe, belgelerde kullanılması gereken karakter kümesini, yazı dillerinin büyük çoğunluğunu UTF 8’e ayarlama görevini üstlenir. Artık üzerine konabilecek herhangi bir metin içeriği işlenebilir.
  • <title></title> etiketi; Yüklendiği tarayıcı sekmesinde görünen, başlık olan sayfanın başlığını belirleyen komuttur. Sayfa yer imlerine eklendiğinde ya da favorilere eklendiğinde, sayfayı tanımlamak için de tercih edilir.
  • <body><body> etiketi; metin, görseller, videolar, oyunlar, oynatılabilir ses parçaları gibi birçok şeyi, sayfanın ziyaret edildiğinde, web kullanıcılarına göstermek istenilen tüm içeriği kapsayan öğedir.

Web sitesi tasarımında, siteye eklenmesi gereken 3 farklı liste türü bulunur.

  • Sıralı liste (<ol>) etiketiyle kullanılır.
  • Sırasız liste (<ul>) etiketiyle kullanılır.
  • Tanım listesi (<dl>) etiketiyle kullanılır.

HTML etiketleri; blok düzeyinde ve satır içi etiketler olarak iki ana türü vardır. Blok düzeyinde etiketler; tüm kullanılabilir alanı kaplar ve her seferinde belgede yeni bir satır başı başlatma özelliği bulunur. Başlıklar ve paragraflar, blok etiketlerin en önemli örnekleridir.

Satır içi etiketler; sadece ihtiyaç duydukları kadar yer kaylar ve sayfada yeni bir satır başlatma özellikleri yoktur. Genel olarak, blok düzeyinde öğelerin iç bölümünü biçimlendirmeye yararlar. Bağlantılar, vurgulanan dizeler, satı içi etiketlere en iyi örnektir.

En Çok Kullanılan Örnekleri Nelerdir?

HTML, web sitelerinin yapısı oluşturur. Aşağıda nasıl kullanılacağına ilişkin bazı örnekleri vardır.

A href: <a href> öznitelik bir bağlantı ile, bir hedefe karşılık gelir. İnternette yerel dosyalarla bağlantı kurar. Tüm tarayıcılar tarafından desteklenir. Örneğin <a href=” #”>This is a dead link</a> örneği verilebilir.

Yazı tipi boyutu; sayısal ya da göreceli bir değer olarak belirtilir. Sayısal değerler 1 ile 7 arasında değişir. Yazı tipi boyutunda söz dizimi; <font size=”number”> şeklinde verilir.

Hizalama; bir görüntünün hizalama özelliği görüntünün etrafındaki öğenin nerede hizalanması gerektiğini belirtir. Görüntüyü sağa hizala, sola hizala, alta hizala, orta hizala gibi komutları içerir. <p>This is another example<img src=”image.png” alt=”Image” align=”right”></p> şeklinde verilebilir.

Gövde arka plan görüntüsü eklenmek istendiğinde, <body background> şeklinde yapılabilir. Sözdizimi <body background=”URL”> yapılır. 

A target; nitelik belirtir. “_Blank” değerine sahip olan bir hedef özellik, bağlantılı belgeyi yeni bir pencerede ya da sekmede açabilir. <a href=https://www.alanadı.com target=”_blank”>alanadı</a> şeklinde uygulanır.

Hreflang; Web sitesinde birden fazla dilde içerik bulunuyorsa, hreflang etiketi kullanılması gerekir.

Önerilen Yazı: Hreflang Etiketi Nedir, Nasıl Kullanılır?

“_Self” değerine sahip bir hedef için, bağlı belge tıklandığında çerçeve açılır. <a href=https://www.alanadı.com” target=”_self”>alanadı</a> şeklinde yazılır.

“_Parent” değerine sahip bir hedef için, bağlı belgeyi üst çerçevede açar. <a href=https://www.alanadı.com” target=”_parent”>alanadı</a> şeklinde bitirilir.

“_Top” değerindeki bir hedef için, bağlantılı belge, pencerenin tam gövdesinde açar. <a href=https://www.alanadı.com target=”_top”>alanadı</a> şeklindedir.

HTML hakkında herhangi bir soru ya da sorununuz için, Seorative uzman ekibi ile iletişime geçebilir, kodların nasıl yazılacağı ya da farklı bir soru için, detaylı bilgi alabilirsiniz.