HTML'e Giriş - Sayfa Yapısı

by trustix


Eklenme Tarihi : 08 Aralık 2020 14:02 Views:     504



HTML - [ Hyper Text Markup Language ] bir web/internet sayfasının yapısını, tasarımını ve içeriğini yapılandırmak için kullanılan bir işaretleme dilidir. Bir web sayfasının hangi bölümünde fotoğraf olacağı, hangi bölümünde metin içeriği olacağı, hangi bölümün başlık hangi bölümün alt başlık olduğunu belirlemek için kullanılan bir sistemdir.

 

HTML bir programlama dili değildir. Bir tasarlama/biçimlendirme/işaretleme dilidir. Temel görevi içeriğin yapısını tanımlamaktır. Bu tanımlama 'eleman' ya da 'etiket' adını verdiğimiz standart ifadeler ile sağlanır. Örnek bir HTML sayfası üzerinden durumu daha net bir şekilde açıklamaya çalışalım.

 

<!DOCTYPE html>
<html>

<head>
   <!-- 
   Bu bölüm meta etiketleri adını verdiğimi bölümdür.
   Meta etiketleri temelde bir web sayfasının hangi dilde olduğunu
   hangi dilde kodlandığını web sayfasını tasarlayan kişi bilgisini
   web sayfası ile ilgili açıklamayı ve elbette daha birçok bölümü
   içeren bölümdür.
   -->
    <meta charset="utf-8">
    <meta name="author" content="">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Site Adı</title>
    <!-- Bu bölüm stil dosyalarını yani tasarım dosyalarını yani css dosyalarını
    içe aktardığımız diğer bir ifade ile import ettiğimiz bölümdür.
    Ayrıca bazı javascript dosyaları da benzer bir şekilde burada 
    import edilebilir.
     -->
    <link href="css/style.css" rel="stylesheet">
</head>

<!-- web sayfasının bütün içeriği ve iskelet yapısı 
body etiketlerinin içerisinde yer almak durumundadır.
Diğer bir ifade ile body etiketleri web sayfasının gövdesinin oluşturur.
 -->
<body>

    <p>Merhaba Sayın Seyirciler.</p>

   
   <!-- javascript dosyaları sayfa başında içe aktarıldığı gibi
   burada da içe aktarılabilir. Js dosyasının içeriğine göre farklı şekilde
   kullanılabilir.
    -->
    <script src="js/script.js"></script>
</body>

</html>

 

Yukarıda sayfa incelendiğinde  bir web sayfasının her zaman HTML etiketleri arasında yazılanlardan oluştuğu, başlık kısmının  <head> </head> etiketleri arasında olduğu anlaşılabilir. Ayrıca web sayfasının ana bölümü yani gövdesi <body> </body> etiketleri arasındadır. Çok az etiket dışında bütün etiketlerin bir de kapatma etiketi vardır. Örneğin:

Açılış etiketi

<body>

Kapanış etiketi

</body>

 

HTML'deki etiketlerin çok büyük bir bölümü yukarıda olduğu gibi açılış ve kapanış şeklinde kullanılır. Kapanış etiketlerinde farklı olarak eğik çizgi  vardır.

Şimdi yukarıda verilen ilk sayfayı adım adım inceleyim.

 

<!DOCTYPE html>
<html>


</html>

Yukarıdaki html etiketleri bu iki etiket arasında yer alan her şeyin html kodu olduğunu belirtmektedir. Bütün web sayfalarının içeriği bu etiket içesinde yer alır. Şimdi bir sonraki adıma geçelim.

<!DOCTYPE html>
<html>

<head>

</head>

</html>

 

head etiketi arasında yer alacak olan diğer etiketler genelde üç farklı bölümden oluşur. Birinci bölüm ki biz buna meta etiketlerinin bulunduğu bölüm diyoruz. İkinci bölüm sayfa başlığı bölümü ve üçüncü bölüm harici dosyaların içe aktarıldığı bölümdür.

Head etiketlerinin bölümlerine bakalım.

<!DOCTYPE html>
<html>

<head>
    <!--  Birinci Bölüm Başlangıç -->
    <meta charset="utf-8">
    <meta name="author" content="">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--  Birinci Bölüm Bitiş -->



    <!--  İkinci Bölüm Başlangıç -->
    <title>Site Adı</title>
    <!--  İkinci Bölüm Bitiş -->

   
    <!--  Üçüncü Bölüm Başlangıç -->
    <link href="css/style.css" rel="stylesheet">
    <!--  Üçüncü Bölüm Bitiş -->

</head>


</html>

 

Buraya kadar incelediğimiz bölüm head etiketlerinin arasındaki bölümdü. Bundan sonrası ise body etiketlerinin olduğu bölüm. Geriye kalan bütün etiketleri body etiketi içerisinde yer alır. Bu anlatımdan sonra HTML etiketleri ve bunların nasıl kullanıldığına ilişkin detaylı açıklamalar ve anlatımlar aralıklı olarak yapılacaktır.

Son olarak tüm HTML kodlarımızı ve bunların nasıl bir sonuç ürettiklerine bakalım.

HTML Kodları

<!DOCTYPE html>
<html>

<head>
    <!--  Birinci Bölüm Başlangıç -->
    <meta charset="utf-8">
    <meta name="author" content="">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--  Birinci Bölüm Bitiş -->



    <!--  İkinci Bölüm Başlangıç -->
    <title>Örnek Blog Sitesi</title>
    <!--  İkinci Bölüm Bitiş -->


    <!--  Üçüncü Bölüm Başlangıç -->
    <link href="css/style.css" rel="stylesheet">
    <!--  Üçüncü Bölüm Bitiş -->

</head>

<body>

    <p>Merhaba Sayın Seyirciler.</p>



    <script src="js/script.js"></script>
</body>


</html>

 

Yukarıdaki kodlar çalıştığında ve bu kodların yer aldığı .html uzantılı dosya local ve ya uzak bir sunucuda çalıştırıldığında karşımıza aşağıdaki gibi bir sonuç çıkacaktır. Herhangi bir js veya css eklemesi yapılmadığı için elbette görüntü çok statik ve sade olacaktır.

 

 

Evet arkadaşlar HTML sayfa yapısı ile ilgili HTML giriş olacak şekilde temel noktalardan bahsetmeye çalıştık.

    <p>Herkese İyi Kodlamalar</p>

 





0

Yorum Formu

vikikod.com    © 2019