HTML

HTML’e Giriş

24 Nisan 2018

Merhabalar. Web sitesi tasarımda kullanılan dillerin başında gelen HTML, internette gördüğünüz hemen hemen bütün sitelerde kullanılan temel dildir. Açılımı “Hypertext Markup Language” olan HTML, özellikle son zamanlarda çıkardığı HTML5 sürümüyle birlikte çok fazla gelişerek, web site oluşturmada artık vazgeçilmez olmuştur. HTML dosyalarının sonu “.html” ile biter. Çok fazla ayrıntıya girmeden bir HTML kodunun nasıl göründüğüne bakalım.

Şimdi, yukarıdaki kodu adım adım inceleyelim. Koda baktığımız zaman “<” ve “>” işaretlerini sık sık görüyoruz. Bu işaretleri “tag” dediğimiz, yani Türkçe karşılığı “etiket” sözcüklerinin başına ve sonuna koymamız gerekiyor. Örneğin, “p” harfi “paragraf” sözcüğünü ifade eden etikettir ve “p” harfinden önce ve sonra “<” ve “>” işaretlerini koymamız gerekiyor.

Dikkat çeken bir diğer unsur ise “<p>” etiketinden sonra “Paragraf yazısı.” tümcesi eklenmiş ve ardından “</p>” etiketi eklenmiş. Gördüğünüz gibi “p” harfinden önce “/” işareti var. Bunun anlamı bir önceki “p” etiketinin bitişidir. Yani “<p>” ile “</p>” arasına yazdığınız her şey tarayıcıda bir paragraf olarak görülecektir.

Yukarıdaki kodda her şeyin bir anlamı var tabii ki. Örneğin, “title” etiketi sayfanın başlığını ifade ediyor. Bunun arasına yazdığınız her şey, siteye girdiğinizde üst tarafta başlık olarak gözükür.

Yazının devamında etiket yerine “tag” kullanacağım. Günlük hayatta da bu tür sözcükleri İngilizce haliyle kullanmanızı tavsiye ederim.

Taglerin Anlamları

Tek bir yazıda tüm tagleri açıklamak biraz zahmetli olacak. Zaten giriş yazısı yazıyoruz. O yüzden şimdilik sadece yukarıdaki kodda ne demek istediğimize bakalım.

<!DOCTYPE html>

Dosyamızın doküman türünü “html” olarak belirliyoruz. Bu kısımda aynı zamanda HTML dosyamızın versiyonunu da belirleyebiliyoruz. Bu tag için bitiş tagine ihtiyacımız yoktur.

<html lang=”tr”>

HTML dosyamızın dilini belirliyoruz. Sitemizin kodları her zaman bu tagler ile başlatılır. Bazı durumlarda sitede Türkçe karakter sorunu yaşayabilirsiniz. Her zaman çözmese de bazen dosyanın dilini Türkçe olarak belirlemek işe yarayabiliyor. Bitiş tagimiz ise “</html>”dir.

<head>

Dokümanımızın baş kısmı bu taglerin arasında yer alır. Bu taglerin arasında site hakkında genel bilgi veririz. Sitemiz için gerekli dosyaların çekilmesini sağlayabiliriz. Aynı zamanda bu taglerin arasına koyduğumuz bazı kodlar ile sitemizi Google’da indeksletip, SEO gibi ayarlamaları da yapabiliriz.

<meta charset=“UTF-8”>

Genelde “<head>” taglerinin arasında olan “<meta>” tagleri belli başlı özellikler alır. Buradaki “meta” tagi “charset” özelliğini almıştır. Sitemizin karakter setini belirler. Biz burada “UTF-8” olarak ayarlıyoruz. Türkçe karakter sorunu yaşamamak için “UTF-8” yapmanızı öneririm.

<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>

Bu kod aslında biraz daha ileri seviyedir. Ama genel anlamda sitemizin mobil uyumlu olması için sitenin ilk açılışında cihazın genişliğini alır ve sitenin genişliğini ona göre ayarlar.

<meta http-equiv=“X-UA-Compatible” content=“ie=edge”>

Eğer sitenizin Internet Explorer’ın bazı eski sürümlerini de desteklediğini söylemek istiyorsanız, bu meta tagini eklemeniz mantıklı olacaktır. Bu zorunlu bir meta tagi değildir. Ancak genelde eklenmesi önerilir.

<title>

Zaten yukarıda resimli olarak bu kısmın ne işe yaradığını söylemiştim. Her HTML sayfasında bir “title” bulunmalı. Özellikle SEO için çok önemli bir yeri vardır. Kodladığınız her HTML sayfasında mutlaka “title” tagini kullanın.

<body>

Bu tag sitenizin genel olarak gövde kısmının başladığını söylüyor. Yani, daha önce “<head>” kısmını eklemiştik. Burası sitemizin başıydı, “body” tagi de sitemizin genel olarak iskeletini oluşturacağımız kodların başlangıcıdır. Bu tagin içinde artık sitemizin iskeletini oluşturmaya başlıyoruz.

<h1>

Bu tagin açılımı “header1” olarak düşünülebilir. Bu tagler 1’den başlayarak 6’ya kadar gider. “h1” tagi ana başlığı ifade eder. Bundan sonra gelen “h2”, “h3” vb. tagler ise alt başlıkları ifade eder. SEO için bu tagleri iyi kullanmak son derece önemlidir. Özellikle Google’ın robotları, bu tagler ile sitenizin nasıl bir içeriğe sahip olduğunu analiz etmeye çalışır.

<p>

Bu tag de paragraf anlamını taşıyor. Sitenize bir yazı eklemek istediğinizde bu tagin arasında yazmanız gerekiyor.

Sonuç

Yukarıdaki kodlar sayesinde aslında bir HTML’in nasıl bir doküman yapısı olduğunu da görmüş olduk. Öncelikle HTML dosyamızın sürümünü belirliyoruz. Daha sonra HTML kodlarımızı başlatıyoruz. Daha sonra sitenin kafa kısmı olarak görülen “head” kısmını kodluyoruz. Son olarak da sitenin gövdesi yani “body” kısmını kodluyoruz.

Şimdilik, yazıyı burada kesmek mantıklı olacaktır. Bir sonraki yazımızda HTML kodu yazabilmek için kullanabileceğimiz yazı editörlerine bakacağız. Listemizde VisualStudio Code, Atom, SublimeText olacak. Genel olarak bu 3 editör kullanılıyor. Ama tabii ki HTML kodunu bir Notepad ile de yazabilirsiniz.

    Bir Cevap Yazın

    TR
    EN TR