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. &nbsp;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 -