Site Oluşturma Kalıbı
Dünyadaki tüm web siteleri belirli bir başlangıç kalıbından oluşur. Bu kalıp dünyadaki tüm web sitelerinde aynıdır. Bir önceki derslerde gördüğümüz tüm etiketleri bu kalıp üzerinden yazarız. Bu kalıp normalde ilk giriş dersinde anlatılır fakat etiketler ve HTML hakkında hiçbir bilgisi olmayan birisine ilk başta karmaşık gelebilir. Bu yüzden bu dersi etiketlerin mantığını size öğrettikten sonra anlatmayı daha uygun bulduk.
Dünyadaki tüm web sitelerinde birazdan göstereceğimiz HTML kalıbı mevcuttur. Tüm web siteleri bu kalıp üzerine inşa edilir. Bu kalıbı sizlere adım adım parça parça anlatacağız. Bu kalıbı öğrendikten sonra gerçek bir web sitesi yazmak için gereken en önemli adımı atmış olacaksınız.
1. Aşama
HTML kodlarımızı girmeye başlamadan önce ilk başa <!doctype html> yazarız. Bu kod tarayıcıya belgenin HTML türünde olduğunu bildirir.
2. Aşama
<!doctype html> yazdıktan sonra bir alt satıra inip <html> etiketini açıp kapatırız. Buradaki html etiketi sitemizin tamamını temsil etmektedir. Tıpkı <p> etiketi içerisine yazdığımız <b>, <strong>, <i> ve <em> etiketleri gibi diğer tüm etiketler <html> etiketinin içerisine yazılır.
<!doctype html>
<html>
<!-- Bu alana kodlar gelecek. -->
</html>3. Aşama
Web sitemizi bir insana benzetirsek <html> etiketi insanı tanımlamak için kullanılır. Dünyadaki tüm web siteleri 2 bölümden oluştur. Birincisi baş (<head> etiketi), ikincisi ise gövdedir (<body> etiketi).
<head> etiketimizi insanın başına benzetebiliriz. <body> etiketimizi ise insanın gövdesine benzetebiliriz. <head> etiketi içerisine yazacağımız kodlar kullanıcı ile dolaylı olarak etkileşim kurmak için kullanılır. <head> etiketinin detaylarını bir sonraki derslerde anlattık.
<!doctype html>
<html>
<head>
<!-- Bu alana kodlar gelecek. -->
</head>
<!-- Bu alana kodlar gelecek. -->
</html>4. Aşama
Son olarak <body> etiketimizi girerek sitemizin gövdesini oluşturacağız. <body> etiketi içerisine sitemizdeki paragraflar, başlıklar, butonlar, tablolar, görseller ile ilgili kodlar girilir. Gövde etiketi yani <body> etiketi sitemizin gözle görülür kısmını oluşturmak için kullanılır.
<!doctype html>
<html>
<head>
<!-- Bu alana kodlar gelecek. -->
</head>
<body>
<p>
Hiçbir kul, kıyamet gününde, ömrünü nerede tükettiğinden, ilmiyle ne gibi işler yaptığından, malını nerede kazanıp nerede harcadığından, vücudunu nerede yıprattığından sorulmadıkça bulunduğu yerden kıpırdayamaz (Tirmizi Kıyamet 1)
</p>
</body>
</html>Özet
Mantık oldukça basit. İlk önce tarayıcıya mevcut belgenin bir HTML belgesi olduğunu bildirmek için en başa <!doctype html> yazdık. Ardından bir alt satıra inerek tüm html etiketlerini içinde barındıran ana kodumuzu yani <html> etiketimizi açıp kapattık. Ardından sitemizin baş kısmını belirtmek için <head> etiketini açıp kapattık ve son olarak <body> etikimizi açıp kapatarak sitemizin gövdesini oluşturmuş olduk. Tüm kodlar bu kalıba göre yazıldığı için ezberlemenizde fayda var. Bu kalıbı ezberlemek için editöre bakmadan yazmaya çalışarak pratik yapınız.