HTML - Tag Dasar

Tag Judul

Dokumen apa pun dimulai dengan judul. Anda dapat menggunakan ukuran berbeda untuk heading Anda. HTML juga memiliki enam level heading, yang menggunakan elemen<h1>, <h2>, <h3>, <h4>, <h5>, dan <h6>. Saat menampilkan heading apa pun, browser menambahkan satu baris sebelum dan satu baris setelah heading itu.

Contoh

<!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>

Ini akan menghasilkan hasil sebagai berikut -

Tag Paragraf

Itu <p>tag menawarkan cara untuk menyusun teks Anda menjadi paragraf yang berbeda. Setiap paragraf teks harus berada di antara tag pembuka <p> dan penutup </p> seperti yang ditunjukkan di bawah ini pada contoh -

Contoh

<!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>

Ini akan menghasilkan hasil sebagai berikut -

Tag Jeda Baris

Kapanpun Anda menggunakan <br />elemen, apa pun yang mengikutinya dimulai dari baris berikutnya. Tag ini adalah contoh dari sebuahempty elemen, di mana Anda tidak perlu membuka dan menutup tag, karena tidak ada apa-apa di antara keduanya.

Tag <br /> memiliki spasi di antara karakter brdan garis miring ke depan. Jika Anda menghilangkan spasi ini, browser lama akan mengalami masalah saat menampilkan jeda baris, sedangkan jika Anda melewatkan karakter garis miring dan hanya menggunakan <br> ini tidak valid dalam XHTML.

Contoh

<!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>

Ini akan menghasilkan hasil sebagai berikut -

Konten Centering

Kamu dapat memakai <center> tag untuk meletakkan konten apa pun di tengah halaman atau sel tabel apa pun.

Contoh

<!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>

Ini akan menghasilkan hasil sebagai berikut -

Garis Horizontal

Garis horizontal digunakan untuk memecah bagian dokumen secara visual. Itu<hr> tag membuat garis dari posisi saat ini dalam dokumen ke margin kanan dan memutus garis yang sesuai.

Misalnya, Anda mungkin ingin memberi garis di antara dua paragraf seperti pada contoh di bawah ini -

Contoh

<!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>

Ini akan menghasilkan hasil sebagai berikut -

Lagi <hr /> tag adalah contoh dari empty elemen, di mana Anda tidak perlu membuka dan menutup tag, karena tidak ada apa-apa di antara keduanya.

Itu <hr /> elemen memiliki spasi di antara karakter hrdan garis miring ke depan. Jika Anda menghilangkan spasi ini, browser lama akan kesulitan membuat garis horizontal, sedangkan jika Anda melewatkan karakter garis miring dan hanya menggunakan<hr> itu tidak valid dalam XHTML

Pertahankan Pemformatan

Terkadang, Anda ingin teks Anda mengikuti format persis seperti yang tertulis di dokumen HTML. Dalam kasus ini, Anda dapat menggunakan tag yang telah diformat sebelumnya<pre>.

Teks apa pun di antara pembukaan <pre> tag dan penutupnya </pre> tag akan mempertahankan pemformatan dokumen sumber.

Contoh

<!DOCTYPE html>
<html>

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

Ini akan menghasilkan hasil sebagai berikut -

Coba gunakan kode yang sama tanpa menyimpannya di dalam <pre>...</pre> tag

Spasi Nonbreaking

Misalkan Anda ingin menggunakan frase "12 Angry Men." Di sini, Anda tidak ingin browser membagi "12, Angry" dan "Men" menjadi dua baris -

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

Jika Anda tidak ingin browser klien merusak teks, Anda harus menggunakan entitas spasi nonbreaking  bukannya ruang normal. Misalnya, saat membuat kode "12 Angry Men" dalam sebuah paragraf, Anda harus menggunakan sesuatu yang mirip dengan kode berikut -

Contoh

<!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>

Ini akan menghasilkan hasil sebagai berikut -