HTML - Temel Etiketler

Başlık Etiketleri

Herhangi bir belge bir başlık ile başlar. Başlıklarınız için farklı boyutlar kullanabilirsiniz. HTML'de ayrıca öğeleri kullanan altı düzey başlık vardır.<h1>, <h2>, <h3>, <h4>, <h5>, ve <h6>. Herhangi bir başlığı görüntülerken, tarayıcı bu başlıktan önce bir satır ve sonra bir satır ekler.

Misal

<!DOCTYPE html>
<html>

   <head>
      <title>Heading Example</title>
   </head>
	
   <body>
      <h1>This is heading 1</h1>
      <h2>This is heading 2</h2>
      <h3>This is heading 3</h3>
      <h4>This is heading 4</h4>
      <h5>This is heading 5</h5>
      <h6>This is heading 6</h6>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

Paragraf Etiketi

<p>etiketi, metninizi farklı paragraflar halinde yapılandırmanın bir yolunu sunar. Her bir metin paragrafı, aşağıdaki örnekte gösterildiği gibi bir açılış <p> ile bir kapanış </p> etiketi arasında yer almalıdır -

Misal

<!DOCTYPE html>
<html>

   <head>
      <title>Paragraph Example</title>
   </head>
	
   <body>
      <p>Here is a first paragraph of text.</p>
      <p>Here is a second paragraph of text.</p>
      <p>Here is a third paragraph of text.</p>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

Satır Sonu Etiketi

Ne zaman kullanırsanız <br />öğesi, onu izleyen her şey bir sonraki satırdan başlar. Bu etiket bir örnektirempty aralarına girecek hiçbir şey olmadığından, açma ve kapama etiketlerine ihtiyacınız olmayan öğe.

<br /> etiketinde karakterler arasında boşluk vardır brve eğik çizgi. Bu boşluğu atlarsanız, eski tarayıcılar satır sonunu işlemede sorun yaşarlar, ancak eğik çizgi karakterini kaçırırsanız ve sadece <br> kullanırsanız XHTML'de geçerli değildir.

Misal

<!DOCTYPE html>
<html>

   <head>
      <title>Line Break  Example</title>
   </head>
	
   <body>
      <p>Hello<br />
         You delivered your assignment ontime.<br />
         Thanks<br />
         Mahnaz</p>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

Merkezleme İçeriği

Kullanabilirsiniz <center> herhangi bir içeriği sayfanın ortasına veya herhangi bir tablo hücresine yerleştirmek için etiketi.

Misal

<!DOCTYPE html>
<html>

   <head>
      <title>Centring Content Example</title>
   </head>
	
   <body>
      <p>This text is not in the center.</p>
      
      <center>
         <p>This text is in the center.</p>
      </center>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

Yatay çizgiler

Yatay çizgiler, bir belgenin bölümlerini görsel olarak bölmek için kullanılır. <hr> etiketi, belgedeki geçerli konumdan sağ kenar boşluğuna bir çizgi oluşturur ve buna göre satırı keser.

Örneğin, aşağıdaki örnekte olduğu gibi iki paragraf arasına bir satır vermek isteyebilirsiniz -

Misal

<!DOCTYPE html>
<html>

   <head>
      <title>Horizontal Line Example</title>
   </head>
	
   <body>
      <p>This is paragraph one and should be on top</p>
      <hr />
      <p>This is paragraph two and should be at bottom</p>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

Tekrar <hr /> etiketi bir örnektir empty aralarına girecek hiçbir şey olmadığından, açma ve kapama etiketlerine ihtiyacınız olmayan öğe.

<hr /> öğesinde karakterler arasında boşluk var hrve eğik çizgi. Bu boşluğu atlarsanız, eski tarayıcılar yatay çizgiyi oluşturmada sorun yaşarken, eğik çizgi karakterini kaçırır ve yalnızca kullanırsanız<hr> XHTML'de geçerli değil

Biçimlendirmeyi Koru

Bazen metninizin HTML belgesine nasıl yazıldığının tam biçimini izlemesini istersiniz. Bu durumlarda, önceden biçimlendirilmiş etiketi kullanabilirsiniz<pre>.

Açılış arasındaki herhangi bir metin <pre> etiketi ve kapanış </pre> etiketi, kaynak belgenin biçimlendirmesini koruyacaktır.

Misal

<!DOCTYPE html>
<html>

   <head>
      <title>Preserve Formatting Example</title>
   </head>
	
   <body>
      <pre>
         function testFunction( strText ){
            alert (strText)
         }
      </pre>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

Aynı kodu içeride tutmadan kullanmayı deneyin <pre>...</pre> etiketleri

Bölünemez Alanlar

"12 Kızgın Adam" ifadesini kullanmak istediğinizi varsayalım. Burada, bir tarayıcının "12, Kızgın" ve "Erkekler" i iki satıra bölmesini istemezsiniz -

An example of this technique appears in the movie "12 Angry Men."

İstemci tarayıcısının metni kırmasını istemediğiniz durumlarda, bölünemez bir boşluk varlığı kullanmalısınız.  normal bir alan yerine. Örneğin, bir paragrafta "12 Kızgın Adam" ı kodlarken, aşağıdaki koda benzer bir şey kullanmalısınız -

Misal

<!DOCTYPE html>
<html>

   <head>
      <title>Nonbreaking Spaces Example</title>
   </head>
	
   <body>
      <p>An example of this technique appears in the movie "12&nbsp;Angry&nbsp;Men."</p>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -