HTML nedir? | En çok kullanılan HTML kodları

HTML sıkça duyduğumuz bir İnternet terimidir. Peki “HTML nedir?”

  • HTML İngilizce “hypertext markup language” kelimelerinin kısaltmasıdır.
  • İnternet üzerinden alınan materyalleri görüntülemek için kullanılan standart bir biçimlendirme sistemidir.
  • İnternet üzerinden çağrılan her bir birim web sayfası olarak adlandırılır. HTML web sayfasının yapısını tanımlar.
  • Genellikle web sayfaları başka web sayfalarını çağırmayı sağlayan başka HTML bağlantıları da içerir.

HTML Nasıl Yazılır?

  • HTML anlaşılması pratik bir dizi kod içerir.
  • HTML belirli kurallara göre yazılır.
  • HTML öğeleri, tarayıcıya içeriğin ne şekilde görüntüleneceğini belirtir.
  • HTML kodları, başlık, paragraf, bağlantı gibi içerik parçalarını etiketler.

HTML Dosyası Nasıl Oluşturulur?

Bir HTML dosyası HTML kodlarının sıfırdan yazılmasıyla oluşturulabileceği gibi, MS Front Page, Dreamweaver gibi HTML editörleri ile de hazır kodlar aracılığıyla pratik şekilde oluşturulabilir. Sıfırdan kod yazıyorsanız editör olarak Notepad bile kullanabilirsiniz.

Bir HTML Belgesinin Yapısı

Bir HTML belgesi çok sayıda HTML öğesi içerir. Bu yapı genel olarak şu şekildedir:

<html>

<head>

<title>Sayfa Başlığı</title>

</head>

<body>

<H1> Buraya Başlık Gelir</H1>

<P> Buraya ilk paragraf yazılır</P>

<P>Buraya sonraki yeni paragraf yazılır</P>

</body>

</html>

Dikkat edin: <body> bölümünün içeriği web tarayıcıda gösterilir. <title> Öğesinin içeriği ise web tarayıcının sayfa bölümünde gösterilir.

En Çok Kullanılan HTML Kodları

Çok sayıda HTML kodu mevcuttur. HTML kodları yaza yaza iyice ve kolayca öğrenilir. Öncelikle en sık kullanılan HTM kodları öğrenilmelidir.

Başlıklar (<h1>-<h6>)

HTML öğeleri içinde kullanılan başlıklar sırasıyla büyükten küçüğe; <h1></h1>,<h2></h2>,<h3></h3>,<h4></h4>,<h5></h5>,<h6></h6> şeklinde gösterilir. Her bir başlık bu öğelerin arasına yazılır. En büyük başlık <h1></h1>, en küçük başlık <h6></h6> aralığına yazılır. 

Paragraf (<p>)

Paragraflar kod içindeki <P> </P> aralığına yazılır. Her bir paragraf için ayrı bir <P> </P> kodu kullanılır.

Liste (<ul>-<ol>)

HTML kodlarında listeleme de sıkça kullanılır.

Sıralanmamamış listeler için liste öğeleri <li> </li> arasına yazılarak <ul> </ul> kodları arasına sıralanır.

Örneğin:

<ul>

 <li>Ekmek</li>

 <li>Süt</li>

 <li>Çay</li>

</ul>

Sıralı listeler ise <ol> </ol> etiketi arasında gösterilir.

Örneğin:

<ol>

 <li>Ekmek</li>

 <li>Süt</li>

 <li>Çay</li>

</ol>

Resim (<img>)

Web sitesinde kullanılan bir görüntünün şekli kodlarla düzenlenebilir. Bunun için <img> kodu kullanılır.

<img src=”madalya.jpg” alt=”Altın Madalya”>

Burada src kaynak görsel dosyayı gösterirken, alt komutu da görsel altına yazılacak yazıyı verir.

Görüntünün eni (width) ve boyu(height) da kod ile aşağıdaki örnekte olduğu gibi iki şekilde sınırlanabilir.

<img src=” madalya.jpg ” alt=” Altın Madalya ” style=”width:500px;height:600px;”>

<img src=” madalya.jpg ” alt=” Altın Madalya ” width=”500″ height=”600″>

Bölme (<div>)

<div> etiketi ile blok oluşturulur.

<div> etiketi, HTML belgesinde bir bölüm ya da bölme yaratmak için kullanılır.

HTML elementleri için bir kapsayıcı oluşturur. Böylece daha sonra CSS ile şekillendirilebilir. Ya da Javascript ile manipüle edilebilir.

Çapa (<a>)

<a> etiketi bir linki tanımlar. href özelliği, bağlantının gittiği sayfanın URL’sini verir. Aşağıdaki örnekte google ana sayfasına link verilmiştir. Yazıya tıklandığında Google sayfası açılır.

<a href=”https://www.google.com”>Google’ı ziyaret edin </a>

Figür 1. HTLM etiketleri

HTML Versiyonları

İlk çıktığı günden bu yana HTML oldukça değişmiştir.

HTML 1.0

  • HTML’in ilk çıkan versiyondur.
  • HTML’in en basit versiyonudur.
  • Tekst ve görsel gibi temel öğeleri destekler.
  • Biçimlendirme gibi zengin destekleri yoktur.

HTML 2.0

  • HTML 1.0’ın gelişitirilmesi amacıyla 1995 yılında ortaya çıkmıştır.
  • HTML 2.0 işaretleme etiketlerini oldukça geliştirmiştir.
  • HTML 2.0 ile tablolar da HTML etiketi olarak gelmiştir.

HTML 3.2

  • 1997 Yılında geliştirilmiştir.
  • HTML 3.2 ile HTML etiketleri ilerleme kaydetmiştir.
  • CSS desteği gelmiştir.
  • Form öğelerini daha iyi destekler.
  • HTML 3.2 ile tarayıcı frame etiketini destekler.  

HTML 4.01

  • 1999 Yılında geliştirilmiştir.
  • CSS desteğini artırmıştır.
  • CSS HTML sayfasının içine eklenmiştir.
  • Yeni HTML etiketleri geliştirilmiştir.

HTML 5.0

  • 2014 Yılında geliştiriciler tarafından kullanılır hale gelmiştir.
  • En son HTML versiyonudur.
  • Çok sayıda yeni HTML etiketi desteği ile gelmiştir.
  • Halen gelişmesi devam etmektedir.

HTML5 Nedir?

HTML 5.0 en son geliştirilen HTML versiyonudur. Birçok yeni HTML etiketini destekler. Time, audio, description, embed, fig, shape, footer, article, canvas, navy, output, section, source, track ve video bu etiketler arasında öne çıkanlardır. Web sitenizde oldukça komplike uygulamaların çalışmasına olanak tanır. İnternete bağlı değilken bile çalışabilecek uygulamalar geliştirmenizi sağlar. HTML 5 yenilikleri 5 ana başlıkta toplanabilir:

  1. E-posta: Form etiketi olarak üretilmiş olsa da doğrulama kontrolleri için de kullanılabilir.
  2. Şifre: Bir başka form etiketidir ve kullanıcıdan parola almak için kullanılır. Parola alanı kullanıcı tarafından görülmez.
  3. Audio etiketi: HTML 5 tarafından eklenmiş bir etikettir. Web sayfalarına ses eklenmesine ve dinlenmesine olanak tanır.
  4. Semantik etiketler: Diğer adı; yapısal etiketlerdir. Web sayfasının yapısını belirler. Belli başlı semantik etiketler arasında; figcaption, <header> ve <footer> bulunur.
  5. Bölüm etiketi: Web sayfasında bulunan bir bölümü göstermek için kullanılır.

HTML ve HTML 5 Arasındaki Farklar Nelerdir?

Zaman içinde büyük bir değişim dönüşüm geçiren HTML son versiyonunun getirdiği yeniliklerle dikkat çeker. HTML ve HTML 5 arasındaki en temel farklar şöyle sıralanabilir:

  • HTML en temel biçim desteğini sağlarken, HTML 5 en son geliştirilen HTML desteğini sunar.
  • HTML video ve ses dosyalarını desteklemezken, HTML 5 her ikisini de destekler.
  • HTML tarayıcıları geçici depolama için cache memory kullanırken, HTML 5 application cache, SQL database, ve web storage depolama seçeneklerini kullanır.
  • HTML tüm tarayıcılar tarafından desteklenirken, HTML 5 sadece HTML 5 uyumlu tarayıcılar ile kullanılabilir.
  • HTML ile vektör grafik kullanımı spesifik araçlar ile mümkünken, HTML 5 ile vektör grafik kullanılabilir.
  • HTML ile tarayıcı arayüzü ve JavaScript aynı iş parçacığında çalışırken, HTML5’de, tarayıcı arayüzünün birden çok iş parçacığında çalışmasına izin veren JavaScript Web Worker API’si bulunur.
  • HTML cookies ve veri depolama kullanırken, HTML 5 bunun yerine yerel depolama yapar.
  • HTML ile daire, dikdörtgen, çember gibi şekiller çizmek mümkün değilken, HTM5 ile bu mümkündür.
  • HTML ile doküman tipi deklerasyonu uzunken, HTML 5 ile bu çok kısadır.

HTML’in CSS ve Javascript ile İlişkisi Nedir?

Bir web sitesinin ana iskeletini; HTML, CSS ve Javascript oluşturur. HTML işaretleme dilidir, CSS biçimlendirme dili, Javascript ise programlama dilidir.

HTML ile ana hatlarını oturttuğunuz web sitesinin şeklini CSS ile verirsiniz. Javascript ise dinamik bir web arayüzü elde etmenizi sağlar. Butonları yönetebilmenizi, alana yazılan yazıların otomatik tamamlanmasını Javascript sağlar.

Figür 2. HTML, CSS, Javascript ilişkisi

Büyük bir proje üzerinde çalışırken, HTML, CSS ve Javascript dosyalarının ayrı ayrı klasörlerde tutulmasında fayda vardır.

Bir CSS dosyasını HTML dosyanıza bağlarken, HTML dosyanızdaki sonraki komut dosyasını head etiketinin içine yazmanız gerekir.

Bir Javascript dosyasını HTML’nize bağlarken, komut dosyasının kaynağını gövde etiketinin içine ya da dışına eklemeniz yeterlidir. Sonuç fark etmez.

Figür 3. WordPress sitl.css kodu örneği

HTML Nasıl Öğrenilir?

HTML kitaplardan öğrenilebileceği gibi online olarak da öğrenilebilir. Bu alanda yardımcı çok sayıda web sitesi mevcuttur. Ayrıca ücretli ve ücretsiz online ders veren web siteleri de bulunur. Bu eğitimler en temel adım olan etiketlerin nasıl kullanılacağından, daha karmaşık olan CSS ve Javascript ile nasıl kullanılacağına kadar geniş bir kapsama sahiptir.

Öğrenme sürecinde ilk adım; temel etiketleri, ana kuralları öğrenmek ve basit örnekleri uygulamaktır. Kullanılan etiketlerin sırayla kapatılması, açılan her etiketin kapatılması gibi temel unsurlar ilk öğrenilecek kurallar arasında yer alır.

Sık kullanılan etiketler öğrenilip yeterince örnek yapıldıktan sonra daha fazla etiket öğrenilir ve daha sofistike web tasarımları üzerinde çalışılabilir. HTML öğrenme süreci adım adım ilerleme gerektirir. Bu süreçte hazır HTML editörleri de yardımcı olacaktır.

0 Shares:
Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Benzer İçerikler