Basit Bir HTML Sayfası Nasıl Oluşturulur?

by trustix


Eklenme Tarihi : 15 Aralık 2020 20:44 Views:     281



HTML Sayfası Oluşturma

 

HTML statik web siteleri ya genel olarak web sayfalarının iskeletini oluşturmaya yarayan bir işaretleme dilidir. Bu işaretleme dilinde sayfaların düzenlenmesin etiket ya da element adı verilen yapılar ile sağlanır. Her etiket ayrıca mevcut görevlerini daha iyi yerine getirmek ya da görevlerini genişletmek için öznitelik denilen bir yapı ile bütünleşir. Burada basit düzeyde bir HTML sayfasında hangi etiketler bulunur ve bu etiketler en nihayetinde nasıl kullanılır buna değineceğin.

Öncelikle basit bir HTML sayfasında hangi etiketler ve bu etiketler ne işe yarar buna değinelim.

HTML Sayfasında Kullanılan Temel Etiketler/Elementler

  • <!DOCTYPE> : Bu etiket sayfanın HTML sürümünü belirtmek için kullanılmaktadır. HTML5 anlamı taşır. Farklı sürümler için farklı değerler kullanılır.
  • <html> : Bir web sayfasının açılış etiketidir. Bütün kodlar <html></html> etiketlerinin arasına yazılır. lang özniteli dil ve ülkeyi belirtmek için eklenir.
  • <head> :  Web sayfasının gövdesi dediğimi ana yapıdaki kodların yazılmadığı ancak bununla beraber meta etiketleri dediğimiz site bilgilerinin yer aldığı ayrıca CSS dosyalarının import edildiği yada CDN dosylarının çağrıldığı bölümdür. Sayfanın adı da ayrıca bu etiketin içerisine yazılan <title> etiketi ile belirtilir.
  • <meta> : Kapanış etiketi gerektirmeyen bir etikettir. Web tarayıcılarına sayfa hakkında bilgi vermek için kullanılır. Bu bilgiler sayfanın dili, karakter kodlaması, ziyaret aralığı, site yazarı ve açıklaması gibi daha birçok bilgi içerebilir. Standart karakter kodlaması UTF-8 olmalıdır.
  • <title> :  Tarayıcı çubuğunda görünecek olan sayfa başlığı bu etiketin içerisine yazılmalıdır.
  • <body> : Web sayfasının kullanıcılar tarafından görüntülenen bütün arayüzü bu etiketin içerisindedir. Paragraflar, resimler, videolar, dosyalar ya da benzer içeriklerin ve bunlara ilişkin etiketlerin tamamı bu etiketin içerisine yazılır. </body> etiketi buradaki gibi kapatıldıktan sonra herhangi bir etiket ya da içerik eklenmemeildir.
  • <p> : Paragraf metinleri için kullanılan etikettir.
  • <a> : Bağlantı verilebilecek içerikler için kullanılan etikettir.
  • <h1>: Başlıkları belirtmek için kullanılan etikettir.

 

 

Yukarıdaki bilgileri kullanarak HTML sayfası oluşturalıım. Örneğin:

<!DOCTYPE html>

<!--html etiketini açtık ve lang özniteliği ile sayfa dilinin Türkçe olduğunu belirttik.
-->
<html lang="tr">

<!--
    bu etiketin içerisinde meta etiketleri CSS dosyaları ya da kodları 
    import edilebilecek CDN dosyaları ve title etiketi bulunur.
-->
<head>
    <!--Sayfanın karakter kodlamasını gösteren meta etiketi-->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!--sayfa başlığını gösteren title etiketi-->
    <title>Html - Örnek Sayfa </title>


    <!--Varsa CSS dosyaları burada import edilebilir.-->
</head>
  

<!--Bütün sayfa gövdesi yani kullanıcının karşılacağı arayüz body etiketi ile başlar.-->
<body>
    <!--biras satır içi CSS ile tasarım değiştirilebiir.-->
    <h1 style="text-align: center;">Web sayfasına hoş geldiniz.</h1>
    <p style='margin:20%; padding: 30px; color:slateblue; font-style: italic; font-size: 18px;'>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nisi numquam vero atque architecto enim, fugiat ipsam accusantium molestias doloribus laboriosam quia officia delectus corrupti repudiandae tenetur, maiores praesentium, magni expedita.</p>
</body>
</html>

 

 

Yukarıdaki kodlar aşağıdaki gibi bir sonuç üretecektir.





0

Yorum Formu

vikikod.com    © 2019