HTML NEDİR?

 HTML NEDİR?
Okunuyor HTML NEDİR?

HTML nedir

HTML nedir sorusunun cevabını bloğumuzda verdik. HTML (HyperText Markup Language) Tim Berners-Lee tarafından 1990 yılında oluşturduğu bir işaretleme dilidir. HTML kodları, internette gördüğümüz web sitelerinin oluşturulmasında kullanılır. Sayfaların temel yapısını oluşturur ve internet tarayıcılar html kodlarını işleyerek bu kodları web sayfasına dönüştürür. İçeriklerin internet sitesinde gözükmesini sağlar ve arama motorlarını web sitesi hakkında bilgilendirir. HTML olmadan tarayıcılar metinleri nasıl göstereceğini bilemez. HTML bir web sayfasının iskelet sistemi olarak düşünülebilir. Başlıca Html etiketlerinden yada bir web sitenin olmazsa olmaz iskeletine örnek verecek olursak;

<!DOCTYPE html>
<html>
<head>
	Sayfa ile ilgili tanımlamalar
	<title>Sayfa Başlığı</title>
</head>
<body>
	Sayfanın içeriğini oluşturacak kısımlar
	(Resimler, yazılar vs.)
</body>
</html>

Yukarıdaki örnekte görüldüğü gibi html, head, title, body etiketleri HTML’in olmazsa olmaz etiketleridir.  Her HTML etiketi “<>” şeklinde açılır. Çoğu HTML etiketleri “</>” şeklinde kapatılır. Kapatılması gereken etiketleri kapatmazsak yazdığımız kodlarda hata alırız. Temel HTML etiketlerini inceleyecek olursak;

<html> Etiketi

Web sitemizin tüm kodlarını kapsayan etikettir.

<head> Etiketi

Bu etiket sayfanın tarayıcıya ve arama motorlarına tanıtıldığı (Meta etiketleriyle), CSS ve Javascript dosyalarının dahil edildiği alanı temsil eder. Head etiketi içine yazılan hiçbir kod tarayıcı ekranında görünmez. Şimdi de bu etiketlerin en sık kullanılanlarını inceleyelim.

<title> Etiketi

Sayfa başlığını belirtir.

<!DOCTYPE html>
<html>
<head>
	<title>Web Odası</title>
</head>
<body>

</body>
</html>

<meta> Etiketi

Meta etiketleri sayfaya ait temel bilgileri (Sayfa açıklaması, anahtar kelimeler, başlık vs) tarayıcılara ve arama motorlarına iletir. Böylelikle sayfanın hangi konu ile alakalı olduğunu arama motorları öğrenir ve sonuçları o bilgilere göre listeler.  Örnek verecek olursak;

<!DOCTYPE html>
<html>
    <head>
        <title>Web Odası</title>
        <meta charset="utf-8" />
        <meta name="description" content="Bu bir web sayfasının tanımıdır.">
        <meta name="keywords" content="anahtar, kelimeler, burada, olur">
    </head>

<body>

</body>
</html>

<meta> etiketi çoğunlukla name ile birlikte kullanılır. Örneğin; description, tanımlama demektedir ve sayfa tanımlaması yapılır. keywords, anahtar kelimeler anlamındadır ve arama motorları için gerekli önemli anahtar kelimeler bu kısma yazılır. Charset ile sayfanın dil formatı tarayıcıya belirtilir. Aşağıdaki görselde çok daha rahat anlayabilirsiniz.

HTML nedir?

<link> Etiketi

  • Harici dosyaları HTML dosyaları içerisinde tanımlamamızı sağlar.
  • Head etiketi içerisinde tanımlanır.
  • Açılıp kapanan etiketlerden biri değildir yani kapanış etiketi bulundurmaz.
  • Charset, href, hreflang, media, rel, size, target ve type parametrelerini alabilir.
  • Ancak charset ve target parametreleri HTML5 tarafından desteklenmemektedir
<!DOCTYPE HTML>
<html>
    <head>
        <title>Web Odası</title>
        <link rel="stylesheet" href="css/style.css"/>
    </head>
    <body>
    </body>
</html>

Yukarıdaki örnekte rel’in açılımı relationship’tir ve dilimizde ilişki anlamına gelmektedir. Sayfaya eklenecek dosyanın ilişkisini tarayıcıya belirtir. Örneğin; ilk satırda bir CSS dosyası eklenmiştir

<style> Etiketi

Bazen sayfaya özgü CSS kodları kullanmak isteyebiliriz. Bunun için style etiketini kullanmamız yeterli olacaktır. Örnegin;

<!DOCTYPE HTML>
<html>
    <head>
        <title>Web Odası</title>
        <style>
            body {
                color: red;
            }
        </style>
    </head>
    <body>
        <p>Bu bir deneme yazıdır.</p>
    </body>
</html>

Verdiğimiz örnekte sitenin içindeki metinin rengini kırmızı yaptık.

<script> Etiketi

Dışarıdan istemci tarafında çalışacak bir komut dosyası  ya da JavaScript dosyası tanımlamak için kullanıyoruz. Script etiketini head içinde kullandığımız gibi body etiketi içinde de kullanabiliriz. İki farklı şekilde kullanılır;

  • Dışarıdan bir dosya dahil etmek için kullanlabilir.
<!DOCTYPE HTML>
<html>
    <head>
        <title>Web Odası</title>
        <script src="js/jquery-3.3.1.min.js "></script>        
    </head>
    <body>
    </body>
</html>
  • Sayfa içersinde bir komut çalıştırmak için kulanıyoruz.
<!DOCTYPE HTML>
<html>
    <head>
        <title>Web Odası</title>
        <script>
            $(document).ready(function() {
                alert('Sayfa hazır!');
            });
        </script>
    </head>
    <body>
    </body>
</html>

Bu yazımızda HTML nedir sorusunun cevabı, HTML temel yapısını ve head etiketi içersinde en sık kullanılan etiketler hakkında bilgi verdik. Programlama nedir başlıklı bloğumuzu da okumak isteyebilirsiniz. HTML hakkında youtube videosu isterseniz de webodası youtube kanalına gidebilirsiniz. Diğer yazımızda görüşmek üzere.

Yapılan Yorumlar
Bir Yorum Yapın