HTML - Başlık

Tipik bir HTML belgesinin aşağıdaki yapıya sahip olacağını öğrendik -

Document declaration tag 
<html>
   
   <head>
      Document header related tags
   </head>

   <body>
      Document body related tags
   </body>
   
</html>

Bu bölüm, HTML <head> etiketi ile temsil edilen başlık kısmı hakkında biraz daha detay verecektir. <head> etiketi, <title>, <meta>, <link>, <base>, <style>, <script> ve <noscript> etiketleri gibi çeşitli önemli etiketlerin bulunduğu bir kapsayıcıdır.

HTML <title> Etiketi

HTML <title> etiketi, HTML belgesinin başlığını belirtmek için kullanılır. Aşağıda, bir HTML belgesine başlık vermek için bir örnek verilmiştir -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Title Tag Example</title>
   </head>

   <body>
      <p>Hello, World!</p>
   </body>

</html>

Bu, aşağıdaki sonucu verecektir -

HTML <meta> Etiketi

HTML <meta> etiketi, HTML belgesi hakkında sayfa son kullanma tarihi, sayfa yazarı, anahtar kelime listesi, sayfa açıklaması vb. Hakkında bilgiler içeren meta veriler sağlamak için kullanılır.

Aşağıda, bir HTML belgesi içindeki <meta> etiketinin önemli kullanımlarından birkaçı verilmiştir -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Meta Tag Example</title>

      <!-- Provide list of keywords -->
      <meta name = "keywords" content = "C, C++, Java, PHP, Perl, Python">

      <!-- Provide description of the page -->
      <meta name = "description" content = "Simply Easy Learning by Tutorials Point">

      <!-- Author information -->
      <meta name = "author" content = "Tutorials Point">

      <!-- Page content type -->
      <meta http-equiv = "content-type" content = "text/html; charset = UTF-8">

      <!-- Page refreshing delay -->
      <meta http-equiv = "refresh" content = "30">

      <!-- Page expiry -->
      <meta http-equiv = "expires" content = "Wed, 21 June 2006 14:25:27 GMT">

      <!-- Tag to tell robots not to index the content of a page -->
      <meta name = "robots" content = "noindex, nofollow">

   </head>

   <body>
      <p>Hello, World!</p>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

HTML <base> Etiketi

HTML <base> etiketi, bir sayfadaki tüm göreli URL'lerin temel URL'sini belirtmek için kullanılır; bu, diğer tüm URL'lerin, belirli bir öğe için bulunurken temel URL'ye birleştirileceği anlamına gelir.

Örneğin, verilen tüm sayfalar ve resimler, http://www.tutorialspoint.com/ dizini temel URL'si ile verilen URL'lerin önüne geçildikten sonra aranacaktır -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Base Tag Example</title>
      <base href = "https://www.tutorialspoint.com/" />
   </head>

   <body>
      <img src = "/images/logo.png" alt = "Logo Image"/>
      <a href = "/html/index.htm" title = "HTML Tutorial"/>HTML Tutorial</a> 
   </body>

</html>

Bu, aşağıdaki sonucu verecektir -

Ancak temel URL'yi başka bir şeye değiştirirseniz, örneğin, temel URL http://www.tutorialspoint.com/home ise, resim ve verilen diğer bağlantılar http://www.tutorialspoint.com/home/images gibi olur. /logo.png ve http://www.tutorialspoint.com/html/index.htm

HTML <link> Etiketi

HTML <link> etiketi, geçerli belge ile harici kaynak arasındaki ilişkileri belirtmek için kullanılır. Aşağıda, içinde bulunan harici bir stil sayfası dosyasını bağlamak için bir örnek verilmiştir.css web kökü içindeki alt dizin -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML link Tag Example</title>
      <base href = "https://www.tutorialspoint.com/" />
      <link rel = "stylesheet" type = "text/css" href = "/css/style.css">
   </head>
	
   <body>
      <p>Hello, World!</p>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

HTML <style> Etiketi

HTML <style> etiketi, geçerli HTML belgesinin stil sayfasını belirtmek için kullanılır. Aşağıda, <style> etiketi içinde birkaç stil sayfası kuralı tanımlamak için bir örnek verilmiştir -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML style Tag Example</title>
      <base href = "https://www.tutorialspoint.com/" />
      
      <style type = "text/css">
         .myclass {
            background-color: #aaa;
            padding: 10px;
         }
      </style>
   </head>
	
   <body>
      <p class = "myclass">Hello, World!</p>
   </body>

</html>

Bu, aşağıdaki sonucu verecektir -

Note- CSS işleri, nazik ayrı bir öğretici kullanılabilir kontrol hakkında bilgi edinmek için css

HTML <script> Etiketi

HTML <script> etiketi, harici komut dosyası dosyasını dahil etmek veya HTML belgesi için dahili komut dosyasını tanımlamak için kullanılır. Aşağıda, basit bir JavaScript işlevi tanımlamak için JavaScript kullandığımız bir örnek verilmiştir -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML script Tag Example</title>
      <base href = "http://www.tutorialspoint.com/" />
      
      <script type = "text/JavaScript">
         function Hello() {
            alert("Hello, World");
         }
      </script>
   </head>

   <body>
      <input type = "button" onclick = "Hello();" name = "ok" value = "OK"  />
   </body>

</html>

Bu, verilen düğmeye tıklamayı deneyebileceğiniz aşağıdaki sonucu üretecektir -

Note- JavaScript'in nasıl çalıştığını öğrenmek için, lütfen javascript'te bulunan ayrı bir eğiticiye bakın