Belajar HTML Dasar : Tag Dasar HTML

Tag Heading

Setiap dokumen biasanya selalu dimulai dengan heading. Anda dapat menggunakan berbagai ukuran untuk judul dokumen Anda.

HTML memiliki enam level heading, yang menggunakan kode elemen <h1>, <h2>, <h3>, <h4>, <h5>, dan <h6>.

Saat menampilkan judul apa pun, browser menambahkan satu baris sebelum dan satu baris setelah judul tersebut.

Contoh

<! DOCTYPE html>
<html>
   <head>
       <title> Contoh penggunaan Heading </title>
   </head>
   <body>      
       <h1> Ini adalah heading 1 </h1>
       <h2> Ini adalah heading 2 </h2>
       <h3> Ini adalah heading 3 </h3>
       <h4> Ini adalah heading 4 </h4>
       <h5> Ini adalah heading 5 </h5>
       <h6> Ini adalah heading 6 </h6>
   </body>

</html>

Kode ini akan menampilkan hasil sebagai berikut :

Ini adalah heading 1

Ini adalah heading 2

Ini adalah heading 3

Ini adalah heading 4

Ini adalah heading 5
Ini adalah heading 6

Tag Paragraf

Tag <p> berguna untuk menyusun teks Anda ke dalam paragraf yang berbeda. Setiap paragraf teks harus berada di antara tag pembuka <p> dan tag penutup </ p> seperti ditunjukkan dalam contoh di bawah ini :

Contoh

<! DOCTYPE html>
<html>
   <head>
      <title> Contoh Paragraf </title>
   </head>
   <body>       
      <p>Ini adalah paragraf pertama dari teks.</p> 
      <p>Berikut adalah paragraf kedua dari teks.</p> 
      <p>Di sini adalah paragraf ketiga dari teks.</p> 
   </body>

</html>

Kode ini akan menampilkan hasil sebagai berikut :

Ini adalah paragraf pertama dari teks.

Berikut adalah paragraf kedua dari teks.

Di sini adalah paragraf ketiga dari teks.

Tag Baris Baru

Ketika Anda menggunakan elemen <br />, maka setiap kalimat yang mengikutinya akan dimulai dari baris berikutnya.

Tag ini adalah contoh elemen kosong, di mana Anda tidak perlu membuka dan menutup tag. Tag <br /> memiliki spasi antara karakter br dan garis miring.

Contoh

<! DOCTYPE html>
<html>
    <head>
        <title> Contoh Baris Baru</title>
    </head>

    <body>       
        Halo 
        Anda mengirimkan tugas Anda tepat waktu.<br />
        Terima kasih 
        Herbert 
    </body>

</html>

Kode ini akan menampilkan hasil sebagai berikut –

Halo

Anda mengirimkan tugas Anda tepat waktu.

Terima kasih

Herbert

Centering Konten

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

Contoh

<! DOCTYPE html>
<html>
    <head>
        <title> Contoh Centering Konten </title>
    </head>

    <body>
        Teks ini tidak ada di tengah. 
        <center>        
        Teks ini di tengah. 
        </center>
    </body>

</html>

Kode ini akan menampilkan hasil berikut :

Teks ini tidak ada di tengah.

Teks ini di tengah.

Horinzontal Lines

Horizontal Lines  digunakan untuk memisahkan bagian dokumen secara visual. Tag <hr> membuat garis dari posisi dimana kode <hr /> diletakkan.

Misalnya, Anda mungkin ingin memberikan garis antara dua paragraf seperti pada contoh di bawah ini :

Contoh

<! DOCTYPE html>
<html>
    <head>
        <title> Contoh Horizontal Lines </title>
    </head>

    <body>
    Ini adalah paragraf satu dan harus berada di atas 
    <hr />
    Ini adalah paragraf dua dan harus berada di bawah 
    </body>

</html>

Kode ini akan menampilkan hasil sebagai berikut :

Ini adalah paragraf satu dan harus berada di atas


Ini adalah paragraf dua dan harus berada di bawah

 

Sekali lagi, tag  <hr /> adalah contoh dari elemen kosong, di mana Anda tidak perlu membuka dan menutup tag, karena Anda tidak perlu mengapit konten apapun.

Elemen <hr /> memiliki spasi antara karakter hr dan garis miring ke depan.

Preserve Formatting

Kadang-kadang, Anda ingin agar  teks yang Anda tulis mengikuti format bagaimana itu ditulis dalam dokumen HTML. Dalam kasus ini, Anda dapat menggunakan tag preformatted <pre>.

Teks apa pun antara tag pembuka <pre> dan tag penutup </ pre> akan mempertahankan bentuk tulisan sesuai dengan  dokumen sumber.

Contoh

<! DOCTYPE html>
<html>
   <head>
       <title> Pertahankan Format Contoh </title>
   </head>

   <body>
      <pre>
      function testFunction (strText) {
      alert (strText)
      }
      </pre>
   </body>

</html>

Kode ini akan menampikan hasil sebagai berikut :

function testFunction (strText) {

alert (strText)

}

Anda dapar mencoba gunakan kode yang sama tanpa menyimpannya di dalam tag <pre> … </ pre>

Artikel Lainnya

Tags:

0 Komentar

Kirim Komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.

0