HTML'e Başlangıç | 𝗣𝗥𝗢𝗧𝗢𝗧𝗨𝗥𝗞

HTML Nedir?

HTML, web sayfaları oluştururken kullanılan bir işaretleme dilidir. İngilizce adıyla, "Hyper-text Markup Language", Türkçe adıyla "Hiper Metin İşaretleme Dili"nin kısaltmasıdır.

Bir web sayfasına girildiğinde, son kullanıcının gördüğü her zaman HTML çıktısıdır. Onun daha güzel ve düzenli görünmesini sağlayan CSS, daha dinamik bir yapıda kullanılmasını sağlayan ise JavaScripttir.

CSS ve JavaScript konularına, HTML'den sonra bakılması yeni başlayacak olanların faydasına olacaktır. Zira HTML'i iyi öğrendikten sonra sırasıyla CSS ve JavaScript, front-end geliştirme yapmak isteyenlerin izlemesi gereken bir yoldur.

HTML, uzun adıyla "Hyper Text Markup Language" demektir.
HTML, Türkçe adıyla "Hiper Metin İşaretleme Dili" demektir.
HTML ile yazılar işaretlenerek, web sayfalarının yapıları belirlenir.
HTML ile işaretleme yapılırken belli başlı html etiketleri kullanılır.
HTML etiketleri, "başlık", "paragraf", "tablo" vb. bölümleri işaretlemek için kullanılır. Bunların tamamına ilerleyen bölümlerde değineceğiz.

UNUTMAYIN

Web tarayıcıları, HTML etiketlerini göstermez ancak sayfaların içeriklerini oluşturmak için bu etiketleri kullanır. Bu yüzden kurallarına uygun HTML yazmak, hem tarayıcıların kodlarınızı yorumlamasını kolaylaştırır hem de arama motoru dostu sayfalar oluşturmanızı sağlar.

Basit bir HTML Sayfası

Basit bir HTML sayfası, temel olarak aşağıdaki etiketlerden oluşur.

<!DOCTYPE html>
<html>
<head>
    <title>Başlık</title>
    <meta charset="UTF-8">
</head>
<body>
    
   test
    
</body> 
</html>

Editörde Görüntüle

Bu örneği web tarayıcısında açtığınızda şöyle bir çıktı göreceksiniz;

İlk HTML Sayfası Örneği

Örneğin Açıklaması

<!DOCTYPE> tanımı, HTML sayfası yorumlanırken HTML'in hangi sürümüyle yorumlanması gerektiğini belirlemek için kullanılır. Bu örnekte biz son sürüm olan HTML5'i kullandık.
<html> etiketi, HTML'in en temel etiketidir ve diğer tüm etiketleri kapsar.
<head> etiketi, sayfa hakkında üst bilgiler içerir. Yani kullanıcı bir web sayfasına girdiğinde göremeyeceği ancak arka planda yüklenip işleyişi devam ettirecek bilgileri içerir. Bunların ilk örneği olan <title> etiketini yazarak sayfanın başlığını belirledik. Bu etiketin detaylarına ileride geleceğiz.
<title> etiketi, sayfanın başlığını belirlemek için kullanılır ve <head> etiketi içerisinde yer alır.
<meta> etiketi, web sayfalarında üst bilgi belirtmek için kullanılır. Bu örnekte, sayfanın karakter kodlamasını belirttik.
<body> etiketi, görünecek olan tüm yazı ve etiketleri içinde barındırır. Yani bir web sayfası açıldığında, body içerisindekiler son kullanıcıya gösterilir.

Yukarıdaki örneği tam olarak anlamadıysanız, HTML etiketlerinin yapısını inceleyerek başlayalım.

HTML'de Etiket Yapısı

HTML'de metinleri işaretlerken etiketler kullanılır. Ve etiketler tanımlanırken < küçüktür ve > büyüktür işaretleri içerisine etiket adı yazılır. Yani <etiketAdi> şeklinde tanımlanırlar.
Ayrıca açılan etiketler, aynı şekilde başında / konarak kapatılır. Yani <etiketAdi> .. </etiketAdi> şeklinde tanımlanır. Ancak bu kural tüm etiketler için geçerli değildir, bazı etiketler kendiliğinden kapatıldığından sizin kapatmanıza gerek yoktur. Bunların ayrımını, ilerleyen derslerde daha iyi anlayıp öğreneceksiniz ancak kapatılmayan etiketlere birkaç örnek vermek gerekirse, <img> <br> <hr> <meta> vb. diyebiliriz.

Örnek bir HTML etiketi inceleyelim;

<b>Kalın Yazı</b>

Editörde Görüntüle

Bu örnekte, <b> içerisindeki ifade kalın yazılacaktır.

HTML'de Nitelik Yapısı

Etiketleri oluşturduktan sonra, etiketleri oluşturan niteliklerin kullanımını incelemek gerekiyor. Nitelikler, etiketlerin direktifleri gibi düşünebilirsiniz. Yani etiketin daha fazla işlevsel hale getirmek için belli başlı nitelikler tanımlıyoruz. Ancak önce, nitelik nasıl tanımlanır bunu öğrenelim.

Niteliği etiketi açtıktan sonra anahtar="değer" şeklinde tanımlıyoruz. Niteliklerle ilgili daha detaylı bir açıklamayı "Nitelikler" sayfasında bulacaksınız. Şimdilik bir örnek vermek gerekirse, yukarıdaki temel örneğimizden verelim.

<meta charset="UTF-8">

Editörde Görüntüle

Bu örnek hem kendi kendine kapanan etiket türüne hemde nitelikli bir etikete örnek. Gördüğünüz gibi anahtar olarak charset ve değer olarakta UTF-8 değeri geldi. Bazı durumlarda anahtar ve değerler belli başlı şeyleri temsil ederken, bazı durumlarda değerler sizin belirleyeceğiniz bir ifadede olabilir.

Ayrıca nitelikleri birden fazlada kullanabilirsiniz, örnek vermek gerekirse;

<meta content="description" content="açıklama..">

Editörde Görüntüle

Web Tarayıcıları

Eğer daha önce bu işlerle uğraşmadıysanız, web tarayıcısı ifadesini duymamış olabilirsiniz ancak emin olun uzun süredir kullandığınız bir program.

Web tarayıcılarının amacı HTML sayfalarını okuyup yorumlayarak son kullanıcıya göstermektir.

Web tarayıcıları yazılan HTML etiketlerini son kullanıcıya göstermezler, ancak belgenin nasıl yorumlanacağını bu etiketlere göre belirlerler. Bu etiketlerde, sizin HTML sayfalar oluştururken kullandığınız etiketlerdir.

Popüler Tarayıcılar

Şu an popüler olarak kullanılan 6 tarayıcı mevcut. Bunlar;

Google Chrome (https://www.google.com/chrome/)
Adındanda anlaşılacağı üzere Google'ın geliştirdiği bir web tarayıcısı. Eylül 2008'de Windows sürümü yayınlandıktan sonra diğer işletim sistemleri içinde (Linux, macOs, iOS, Android) sürümleri geliştirildi. Ayrıca Chrome, open-source kültürüne uyan bir tarayıcı olup kaynak kodlarının bir çoğunu Chromium adlı açık kaynaklı tarayıcı projesinde paylaşmaktadır.
Mozilla Firefox (https://www.mozilla.org/tr/firefox/)
Mozilla Vakfı ve alt kuruluşu Mozilla Corporation tarafından kurulan, açık kaynak kodlu ve özgür geliştirilen bir web tarayıcısıdır. Windows, macOS, Linux, Android ve iOS işletim sistemlerinde kullanabilir.
Apple Safari (https://www.apple.com/tr/safari/)
Apple'ın 2003'te tanıttığı ve 2008'de iPhone ile birlikte mobil içinde geliştirilen web tarayıcısıdır. macOs ve iOS'ta en stabil çalışan tarayıcılardan bir tanesidir.
Opera (https://www.opera.com/tr)
Windows, macOS ve Linux işletim sistemlerinde çalışan bir web tarayıcısıdır. Mobil versiyonuda mevcuttur, diğer tarayıcılara göre çok tercih edilen bir tarayıcı değildir.
Microsoft Edge (https://www.microsoft.com/tr-tr/windows/microsoft-edge)
Internet Explorer'ın bize çektirdiği acılardan sonra 12. sürümü Edge'in 12. sürümü olarak tanıtıldı ve hayatımıza girdi. Microsoft'un bütün cihazlarında varsayılan tarayıcı olarak çalışmaktadır ve Internet Explorer'ın yerini almıştır. Eğer Internet Explorer 6 zamanlarını biliyorsanız, Edge'in çok kullanılmayacağını tahmin edebilirsiniz. Yinede modern tarayıcılar gibi davranan, çağa ayak uyduran bir tarayıcı olarak kabul görülüyor.
Internet Explorer (https://www.microsoft.com/tr-tr/download/internet-explorer.aspx)
1995'te hayatımıza giren, 20 senelik hayatında ne yazık ki çağa ayak uyduramayarak diğer rakiplerinin gerisinde kalan, front-end geliştiricilerinin rüyalarına kabus gibi çöken, sonunda ise Microsoft'un pimini çektiği emekli, adına şiirler yazılmış, yavaşlığı ile bilinen meşhur web tarayıcısıdır.

<!DOCTYPE> Tanımı

DOCTYPE tanımı, HTML sayfanın belge türünü belirler. Yani tarayıcının HTML sayfayı hangi sürümde yorumlayacağı, bu etikete bağlıdır.

Bu etiketi yazmak zorunlu çünkü tarayıcıların doğru şekilde çalışması için bu gereken bir standart. Her zaman sayfanın en üstünde tanımlanır.

<!DOCTYPE> tanımlanırken büyük-küçük harfe dikkat etmenize gerek yoktur, her iki türlüde geçerli olacaktır.

Şu an ki güncel HTML sürümü olan HTML5 için DOCTYPE tanımını aslında yukarıdaki ilk örneğimizde yazmıştık, şimdi tekrar edelim.

<!DOCTYPE html>

Tarayıcı bu tanıma göre sayfanın HTML5 standartlarına göre yazıldığını varsayarak yorumlayacaktır.

HTML Sürümleri

1990'da gelişime başlayan HTML, Word-wide Web'in kurulmasıyla birlikte önemli adımlar atarak bu günlere ulaştı. Önemli sürüm güncellemelerine aşağıdan ulaşabilirsiniz.

Sürüm	Yıl
HTML	1991
HTML 2.0	1995
HTML 3.2	1997
HTML 4.01	1999
XHTML	2000
HTML5	2014

W3C Hakkında

Tim Berners-Lee, 1989'da CERN laboratuvarında HTML işaretleme dilini geliştirdikten sonra, W3C, yani ingilizce adıyla "World Wide Web Consortium", Türkçe adıyla "Dünya Çapında Ağ Örgütü"nü kurmuştur. Bu örgütün amacı, HTML'in ve CSS'in standartlarını belirlemektir.