Html - Dosya Yapısı - Mustafa Sabri OĞUZ

Öncelikle Html'i öğrenmek için dosya yapısını öğrenmemiz gerekiyor. Bu konu Html derslerinin temelidir. Çünkü bir Html dosyası oluşturabilmek için nasıl çalıştığını bilmemiz gerekiyor.

Üstte ki resimde bir internet tarayıcısı tarafından görüntülenen basit bir Html dosyası görmektesiniz. Aslında dosyamız Word dosyasından fırlamış gibi görünmez, bunu kullandığımız internet tarayıcısı (Chrome, Opera, Safari, IE, Firefox ...vs) yazmış olduğumuz etiketleri yorumlayarak herkesin rahatça anlayabileceği bir görsele dönüşür. İnternet tarayıcımızın aslında gördüğü şey aşağıda ki kodlardır. Görüntülediğimiz herhangi bir internet sayfasına farenizin sağ tuşuna basın ve "Sayfa kaynağını görüntüle" seçeneğini seçin. Karşınıza aşağıda ki kodlara benzer kodlar çıkacaktır.

Zamanla bu kodların neler olduğunu ve nasıl kullanılacağını öğreneceğiz, acele etmeye gerek yok... Şimdi aşağıda ki basit html dosya yapısını inceleyelim.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Sayfa Başlığı</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>
</head>
<body>
    <h1>Msoguz.com - Html Dersleri</h1>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Libero, repellendus?</p>
</body>
</html>

Sırayla etiketleri açıklayacak olursak;

<!DOCTYPE html>: Bu etiket dosyamızın html dökümanı olduğunu ifade etmektedir. Lakin kullanılması zorunlu değildir. Dosya uzantısını gören her tarayıcı bunun bir Html dosyası olduğunu anlayabiliyor. Fakat tercihen kullanılması gerekir. Çünkü kullandığınız back-end diline (Php, ASP.net) göre dosya uzantısı htm veya html olmayabilir.
<html>: Bu etiket Html dokümanının başlangıcını ve bitişini ifade eder. Bir html dosyası mutlaka bu etiket ile başlamalı ve bitmeli, Kırmızı ve mavi alanlar dosyamızın içerisinde yer almasa bile bu başlangıç ve bitiş etikleri mutlaka olmalı.
<head>: Kırmızı ile belirtilen yer dosyanın tanımını içeren başlık bölümüdür. Bu bölüm internet tarayıcısı için gerekli bilgileri tutar ve işler. Fakat head etiketlerinin arasında yer alan kodlar kullanıcıya gösterilmez. Çoğunlukla bu bölüm bir kere oluşturulur ve her sayfada aynı şekil kullanılır.
<body>: Sayfamızın gövdesini olarak ifade edilen bölümdür. İşlerimizin çoğu bu bölümde gerçekleşmektedir. Çünkü bu bölümde yer alan etiketler internet tarayıcı (browser) tarafından kullanıcıya doğrudan gösterilen bölümdür.

Dosyamızın yapısı kabaca iki ana bölümden oluşur, bunlar; head ve body etiketleridir. Başarılı html dosyasının yapısında bu iki etiket bulunmalıdır.

Elimden geldiğince kısa ve öz anlatmaya çalıştım. Eminim bilmediğiniz etiketlerde gözünüz takılı kalmıştır. Merak etmeyin bir sonra ki yazımda onları da öğreneceğiz. Her yazımın sonunda işlediğimiz kodları Github'a yayınlayacağım. Oradan kodların son haline ulaşabilirsiniz...

Github Reposu