HTML NEDİR, NE İŞE YARAR?

HTML Nedir, Ne işe Yarar?

Bu makalemde web tasarıma yeni başlayanlar veya bilgilerini tazelemek isteyenler için Web’in temel yapısını oluşturan elementlerden biri olan Hiper Metin İşaretleme Dili (HyperText Markup Language) yani kısa ve herkesin bildiği adıyla HTML’den bahsedeceğim.

HTML nedir, ne işe yarar, HTML bir programa dili midir gibi birçok soruyu yanıtlamaya çalışacağım.

HyperText Markup Language (HTML) Nedir?

Yukarıda da belirttiğim gibi HyperText Markup Language kısa adıyla HTML, web sayfalarını hazırlamak için kullanılan bir işaretleme dilidir. HTML programlama dili değildir betik bir dildir, yani derleme olmaksızın çalıştırılabilir. Kullanılabilir en güncel sürüm versiyonu HTML 5’tir.

HTML ne işe yarar?

HTML web sitelerinin İnteraktif ortamda kullanıcı ile buluşmasını, web içeriğinin anlamını ve yapısını oluşturur.

HTML, CSS ile birlikte kullanıldığında çok daha etki bir görünüm kazanır. Eğer HTML bir kadın olsaydı, makyaj setinin adı CSS olurdu :) Bir o kadar ayrılmaz ve tamamlayıcıdırlar.

Tek başına HTML kullanılabilir fakat görüntü itibarı ile itici ve kullanıcı odaklı olmaz. Aşağıdaki resimde blog sayfamdan CSS desteğini kaldırarak bir ekran görüntüsü aldım.

html nedir

Muhtemelen yukarıdaki resme baktığınızda, şu anki sayfa ile alakası yok diyeceksiniz ki bu sonuca bakarak CSS’in web sayfa oluşumunun vazgeçilmez bir parçası olduğunu gösteriyor.

Nasıl kullanılır, kuralları nelerdir?

HTML kullanmaya başladığınızda ilk öğreneceğiniz tag (element) <html> </html> HTML açma kapama tagıdır.

HTML’in bazı standart kuralları vardır ve bu standartlar doğrultusunda kullanılmalıdır:

  • HTML yazılırken kodlar <html><body> kodlar buraya gelmeli </body></html> arasına yazılmalıdır.
  • HTML içerisindeki tüm kodlar <kod> köşeli parantez içerisinde yer alır.
  • Açılan her kod tagı kapatılmalıdır. Örnek: <tag> kodlar buraya gelmeli</tag> şeklinde.
  • HTML kod tabanı içerisinde Türkçe veya özel karakterler yer alamaz.

html nedir ne işe yarar

En sık kullanılan bazı HTML taglar ise şunlardır:

<head>, <title>, <body>, <header>, <footer>, <article>, <section>, <p>, <div>, <br>, <span>, <img>, <figure>, <audio>, <canvas>, <strong>, <em> <details>, <embed>, <nav>, <video>, <ul>, <ol>, <li>

<html>: HTML’in başlaması ile birlikte kullanılan ve tüm kodları kapsayan etikettir.

<head>: Site kodlama dilini, meta etiketlerini (desctreption, title vb) sayfa stil taglarını, web sitesi içerisinde tanımlayacağınız fontları vb. belirleyeceğiniz kısımdır. <html> tagından hemen sonra gelir ve web sitesinin adeta beyni niteliğindedir.

<title>: Web site başlığını belirlediğiniz alandır. Arama motoru sorgularında web siteniz ile ilgili ilk izlenimin oluşmasını sağlayacak olan, ilk görünen kısımdır ve SEO açısından çok önemlidir.

<description>: Web sitenizin açıklama kısmıdır. Arama motorlarında web sayfanız listelenirken kullanıcıların göreceği bir alan olup, SEO açısından önem arz eden taglardandır.

<body>: Kullanıcılar tarafından görüntülenen, sayfanın asıl başlangıç noktasıdır.

<h1>: Web sayfanızın başlık etiketidir ve bir defa kullanılması önerilir. Devamında <h2> <h3> olarak alt başlıklar kullanılır.

<ul>, <ol> ve <li>: Sayfa içerisinde listeleme yapmak için kullanılan taglardır. Ul ve ol anne niteliğinde olup, <li> ise çocuktur.

<a>: Sayfa içerisinde link verme amacı ile kullanılan etiketlerdendir. Çok sık kullanılır.

<p>: Paragraf etiketidir. Cümleleri birbirinden ayırmak, daha düzenli bir yazı sistemi oluşturmak için idealdir ve en çok kullanılan taglar arasındadır.

<strong>: Yazıları kalınlaştırır. Farklı bir alternatif kullanımı ise <b>’dir. Genellikle dikkat çekilmesini istediğiniz kelime veya cümlelerde tercih edilir.

<u>: Uygulandığı kelime veya cümlenin altı çizili olmasını sağlar. Genellikle dikkat çekilmesini istediğiniz kelime veya cümlelerde tercih edilir.

<i>: Yazıların yatay olmasını sağlar.

<br>: Mevcut satırı sonlandırarak alt satıra geçer, bir nevi boşluk bırakmaya yarar.

<header>, <section>, <nav>, <figure>, <footer>:Bu etiketler HTML 5 ile gelen yeni özelliklerdendir. Bu etiketler web sayfasını guruplara ayırarak daha kolay anlaşılmasını sağlamaktır.

Bu tagların dışında bir çok HTML elementi mevcuttur, tamamı için şuradaki kaynağa göz atabilirsiniz.

Nasıl HTML öğrenebilirsiniz?

Eğer elinizin altında bilgisayar ve İnternet varsa Dünyanın en büyük kütüphanesindesiniz demektir. Öğrenmek istediğiniz her şey, sorularınızın tüm cevapları birkaç arama motoru sorgusuna bağlı. Mesela HTML nedir, ne işe yarar, web tasarım nedir, nasıl web tasarımcı olunur vb. kelimeleri aratarak başlayabilirsiniz. Böylece ilk adımı atmış olursunuz.

HTML öğrenmek için şuradaki kaynaklar harika bir başlangıç yapmanızı sağlayabilir:

https://www.w3schools.com

https://css-tricks.com

https://www.learn-html.org/

https://www.codecademy.com

https://html.com/

https://developer.mozilla.org

https://www.javatpoint.com/

Ayrıca HTML nedir, ne işe yarar gibi sorularınıza cevap olabilecek nitelikte şu youtube videosu da öğrenmenize yardımcı olabilir:

Konu ile ilgili düşüncelerinizi paylaşın