HTML Nedir?

HTML, HyperText Markup Language (Hiper Metin İşaretleme Dili) ‘in kısaltmasıdır. İlk kez 1993 yılında ortaya çıkmıştır. Web platformları için yani web sitesi tasarlamak amacıyla kullanılan bir dildir. W3C ve WHATWG tarafından geliştirilmektedir. HTML her ne kadar bir programlama dili olarak bilinse de aslen bir programlama dili değildir. Çünkü HTML kodları ile birlikte asla çalışan bir program yazılamaz ancak HTML dilini yorumlayabilen programlar aracılığıyla çalılabilir bir program yazılabilir.
HTML için programlama dili denilmemesinin temel görevinin yazı, görüntü ve video gibi verileri ve sayfaları birbirleriyle bağlamak ve bu sayfaları web tarayıcılarında düzgün bir şekilde görüntülemektedir.

HTML dili ile birlikte CSS veya Javascript komutları beraber kullanılması durumunda görsel ve dinamik bir web sitesi tasarlayabilirsiniz. CSS, Cascading Style Sheets’ in kısaltmasıdır. Türkçe anlamı ise Basamaklı Biçim Sayfaları olarak geçmektedir. CSS’ in en temel açıklaması, HTML etiketlerini görsel olarak yani yazı ve resim boyutu, yazının fontu, yazı rengi gibi özellikler ile geliştirilmesini sağlayan bir işaretleme dilidir. Javascript nedir diye soracak olursanız da Javascript, en popüler kodlama dillerinden bir tanesidir. Javascript kullanımı ile birlikte web site fonksiyonları arttırabilir ve dinamik web siteleri tasarlayabilirsiniz. HTML dosya uzantısı .html ve .htm olarak 2 şekildedir. HTML ile web tasarımı yapmak isteyen kullanıcılar, bütün işletim sistemlerinde sorunsuz bir şekilde kullanım yapabilir.

HTML Ne İşe Yarar?

HTML, web tasarımcılar tarafından kullanılan ve web tasarım tasarlanırken profil oluşturma, bağlantı oluşturma, blog alıntıları, paragraflar ve başlıklar oluşturulmasında yardımcı olmaktadır. Basit kod yapıları olan etketlerle birlikte kullandıkları etiketlerin özelliklerine göre web sayfalarını tasarlayabir ve şekillendirebilirler. HTML kodları kullanmadan bir web sitesi kodlanamaz bu nedenle HTML’ yi bir web sitesinin iskeleti olarak düşünebilirsiniz.

HTML, öğrenilmesi kolay bir biçimleme dilidir. Bir web tasarımı geliştirmek istediğiniz de ilk olarak HTML kullanımını öğrenmeniz gerekmektedir. HTML’ nin hem kullanımı hem de öğrenimi oldukça basittir.

HTML ile Neler Yapılabilir?

HTML ile birlikte bir web sitesi tasarlarken site içerisinden yer alacak olan görsel, yazı ve video gibi içeriklerin site içerisindeki konumlandrılmasını sağlar.
İnternet de gezindiğimiz sitelerin tümü HTML dilini kullanmaktadır. İnternet de giriş yapmış olduğunuz bir site PHP, ASP.net, Python ve Django gibi programlama dilleri ile geliştirilmiş olabilir ama tasarlanan sitenin kodlarında mutlaka HTML kodları bulunmaktadır. HTML ile tasarlamış olduğunuz bir web sitesinde ne yazık ki SQL kullanımı yapamazsınız ancak SQL kullanımı yapabilmeniz için PHP ya da ASP.net kodlarını da kullanmanız gerekmektedir. Yeni başlayan arkadaşlar SQL nedir diye soracak olursa eğer SQL, veritabanı olarak adlandırılmaktadır.  Sitenizde SQL kullanımı doğrultusunda veri ekleme, veri bulma, verileri düzenleme, veri kaydetme, Veri güncelleme, verileri sorgulama, yeni tablo oluşturma gibi işlemleri gerçekleştirebilirsiniz.

En Çok Kullanılan HTML Kodları Örnekleri

HTML kodları ” < ” ile başlar ve ” > ” ile biter. HTML kodları arasında bilmeniz gereken bazı temel kodlar bulunmaktadır. Aşağıda bazı temel HTML kodlarına yer verilmiştir.

<!DOCTYPE html> : Bu komut web sitenin HTML5 formatına göre tasarlandığı bilgisini verir. Tüm HTML sayfaları bu kod ile başlar.

<html> : HTML etiketi , kök etiket olarak bilinir. Tüm html kodları ” <html>… </html> etiketleri arasında yazılmaktadır.

<body> : Web sitesinde görünmesini istediğiniz tüm kodlar ” <body>…</body> ” etiketleri arasında yazılmaktadır.

<head> : Web sayfanıza ait başlık, dil ve diğer düzenlemelerin yer aldığı etikettir. <head> ile başlar ve </head> ile bitirilir.

<title> : Web sitenize ait bir başlık tanımlamak için kullanılır. <title> etiketi < head> … </head> etiketleri arasına yazılması gerekir.

<meta charset=”utf-8″> : HTML kodlarını Türkçe karakter desteği dahil bir çok dil setini desteklediği bilgisini belirtmektedir.

Başlık kodu  (hx): HTML’ de bir başlık atmak istediğiniz de 6 başlık kodu bulunmaktadır. Bunlar <h1>, <h2>… <h6> şeklinde sıralı olarak gitmektedir. <h1> etiketi ile atılan başlık Ana başlıktır. Ondan sonra gelen başlık etiketi <h2>’ dir. <h2> etiketi ise alt başlığı belirttmektedir. <h2>’ den sonra gelen <h3> ise h2′ nin alt başlığı olarak kullanılmaktadır.

Paragraf etiketi (<p>) :  Web sitenizdebir paragraf başından başlamak istediğiniz <p> etiketi kullanılır. Paragraf etiketi <p> ile açılır</p> ile kapatılır.

Resim Ekleme Etiketi(<img>) :  Resim ekleme etiketi sayesinde web sitenizde yayınlamak istediğiniz bir resmi kolay bir şekilde yayınlayabilirsiniz. Resim ekleme işlemi yapabilmek için sitenizin çalışacağı sunucuya dosyanızı yükleyin ve ardından <img> etiketi ile birlikte resmin adını yazarak web sitenizde yayınlanmasını istediğiniz resmi yayınlayabilirsiniz.

HTML5 Nedir?

HTML5, HTML işaretleme dilinin 5 sürümüdür. HTML 5 sayesinde tarayıcılar da herhangi bir eklenti kullanımı yapmadan web siteniz ile ilgili tüm özellikleri tarayıcılarda açılmasını ve sorunsuz bir şekilde gösterilmesini sağlayabilirsiniz. HTML 5 kullanımı ücretsiz olarak yapılmaktadır. HTML 5 sayesinde animasyonlar, uygulamalar, müzik ve film gibi hemen hemen bir çok düzenlemeler yapabilirsiniz. HTML 5 ile tasarlanmış bir web siteniz için mobil, tablet ve PC için ayrı ayrı kodlamalar yapmanıza gerek yoktur. HTML 5 ile tasarlanan bir web sitesi giriş yapılan cihazdaki tarayıcının desteklemesi sonucunda sorunsuz bir şekilde görüntüleme yapılmasını sağlar. İnternet Explorer, Google Chrome, Microsoft Edge, Firefox, Safari, Opera ve Android tarayıcılarının hepsi HTML 5′ i desteklemektedir.

Aşağıda HTML 5′ in sağlamış olduğu bazı avantajlara yer verilmiştir.

Dahili video ve ses oynatabilme özelliği : HTML 5 öncesi sürümlerde video ve ses dosyası oynatmak istendiğinde 3 parti programlar veya eklentiler kullanılması gerekiyordu. HTML 5 ile birlikte bu sorun giderilmiştir.

Temiz Kod Özelliği : HTML 5  sürümünden önceki sürümler ile tasarlanan bir web sitesi sayfalarında ciddi karmaşıklıklar olabiliyordu ancak HTML 5 ile birlikte bu sorun giderilmiştir.  HTML 5 ile birlikte geliştirilmiş bir sitede kodlar eski sürümlere kıyasla daha temiz ve daha anlaşılabilir bir şekilde anlaşılmaktadır.

Çevrimdışı Önbellek Özelliği : Çevrimdışı önbellek özelliği sayesinde çevrimiçi giriş yaptığınız bir siteye daha sonrasında internet olmadan yani çevrimdışı olarak siteye giriş yapabilir ve daha önce ziyaret ettiğiniz sitelere erişim yapabilirsiniz.

Mobil Görünüme Uygunluk: HTML 5 ile birlikte tablet ve telefonlarda hiç bir eklenti kullanımı yapmadan otomatik olarak giriş yaptığınız cihaza özel ölçümlenebilme özelliği geliştirilmiştir. Bu sayede telefon, tablet ve bilgisayardan giriş yapacak kullanıcılarınız için ayrı ayrı tasarım yapılmasına gerek yoktur.

HTML Yazarken Dikkat Edilmesi Gerekenler

HTML ile kod yazarken dikkat edilmesi gereken bazı hususlar bulunmaktadır. Bu hususlar ile ilgili olarak aşağıda kısa bir bilgilendirme yapılmıştır.

  • HTML ile bir kod yazmaz istediğiniz de tüm kodlarınız <html>… </html> etiketleri arasına yazılması gerekmektedir.
  • Web sitenizin içerisinde görünmesini istediğiniz tüm kodların <body>…</body> etiketleri arasında olması gerekiyor.
  • Web siteniz için bir başlık belirlemek istediğiniz <title>…</title> etiketleri arasında yazmanız gerekmektedir. <title> etiketi mutlaka <html> etiketleri arasında yazılması gerekmektedir.
  • Bir etiket açmak için ” < > ” etiketi ile başlar ve etiketi kapatmak için ise ” </ > etiketi ile kapatılır.

HTML ile CSS ve JS Arasındaki Bağlantı

Bir web sitesi tasarlamak istediğiniz site 3 ana unsurdan oluşmaktadır. Bunlar içerik, sunum ve etkişleşimdir.
Site içeriği HTML kodları ile birlikte oluşturulmaktadır. HTML ile sitenize ait görsel, font gibi özellikleri kısıtlı bir şekilde düzenlemeler yapabilirsiniz. Sitenizde sunum yapabilmek için ise CSS kullanımı yapılması gerekmektedir. CSS ile birlikte web sitenizde yer alan yazıların ve resimlerin boyutlarını, yazı rengini, yazının fontunu, yazı ve resmin site içerisindeki konumunu yani dilediğiniz şekilde düzenlemeler yapabilirsiniz. İçerik ve sunum ile ilgili işlemler yapıldıktan sonra son olarak da etkileşim kısmı kalmaktadır. İşte bu kısımda da sitenizde yer alan içeriklerin kullanıcı ile iletişime geçebilmesi için kullanıcı duyarlı sayfalar oluşturabilirsiniz. Daha açıklayıcı bir şekilde belirtmek gerekirse, mouse ile site içerisinde bir yazının üzerine geldiğiniz de yazının değiştirilmesini istemeniz durumunda Javascript kodlarını kullanmanız gerekmektedir. Aynı şekilde sitedeki bir linke tıkladığınız da linkin aynı sayfa içerisinde açılmasını sağlamak için de yine aynı şekilde Javascript kodlarını kullanmanız gerekir.

HTML’in Avantajları

HTML ile birlikte günümüzde tasarlamak istediğiniz bir web sitesinin iskeletini kolay bir şekilde tasarlayabilirsiniz. HTML ile birlikte web sitenizin içerisinde resim ekleme, müzik ekleme, video ekleme ve yazı ekleme gibi içeriklerin konumlandırmalarını yapabilirsiniz.
Web üzerinde giriş yapmış olduğunuz sitelerin hepsi HTML yapısını kullanmaktadır. HTML kodlarını PHP, ASP.net, Python ve Django gibi yazılımlar ile birlikte çalışabilmektedir.

Günümüzde web sitelerin tümünün HTML kodları ile birlikte tasarlandığını söyledik. Peki bu HTML’nin avantajları nelerdir ? Bu nedenle sizlere HTML’in avantajları ile ilgili aşağıda sizlere bilgiler verilmiştir.

  • Kullanımı ve öğrenmesi oldukça basit bir dil olarak bilinmektedir.
  • Hemen hemen tüm tarayıcılar ile uyumlu bir şekilde sorunsuz olarak çalışmaktadır.
  • HTML ile tasarlanmış bir sitenin kaynak kullanımı, diğer farklı diller ile tasarlanan sitelerin kaynak kullanımından çok daha azdır.
  • Sunucu ile iletişim süreleri oldukça kısadır.

HTML’in Dezavantajları

HTML dilinin avantajları olduğu gibi elbette dezavantajları da bulunmaktadır. Aşağıda size HTML’in dezavantajları ile ilgili olarak bilgiler verilmiştir.

HTML ile bir web tasarımı oldukça zor düzenlenmektedir.
Kullanıcı etkileşim seviyesi diğer dillere göre daha sınırlı olarak kalmaktadır.
Çok sayfalı tasarımlarda yeterince verimli olarak çalışmamaktadır.
Hızlı değişimlere geç cevap vermektedir.
Dinamik yapısı ideal bir seviyede değildir.