Mengatur Tata Letak Teks Pada HTML

Tampilan halaman website pada browser pada dasarnya bisa dibuat seperti saat kita membuat surat atau dokumen pada microsoft word. Setiap halaman mempunyai judul dan isi, lalu pada isi terdapat paragraf dan didalam paragraf terdapat baris demi baris kalimat. Pada HTML masing-masing bagian ini mempunyai tag sendiri-sendiri, misalnya tag heading seperti h1, h2, dst dipakai untuk judul dan sub judul. Kemudian tag p dipakai untuk membuat paragraf dan tag br dipakai untuk membuat baris baru.

1. Membuat judul pada HTML dengan Tag HEADING <h1>...</h1>

Dalam setiap artikel atau dokumen tentu diperlukan sebuah judul. Ukuran font judul ini harus tampak lebih besar dari teks yang lain. Secara umum judul dibuat dengan tag <h1>. Jika dibutuhkan sub judul didalam artikel maka dipakai tag <h2>, <h3> dan seterusnya sampai <h6>. Perlu digaris bawahi bahwa judul atau heading ini tidak sama dengan title yang menggunakan tag <title> karena title akan muncul pada title window dan tidak berasa pada halaman isi.

johanandyagasi.blogspot.com. Meski terlihat bahwa heading tampak membuat font menjadi lebih besar namun tidak disarankan menggunakan heading untuk sekedar memperbesar ukuran teks. Hal ini dikarenakan heading juga merupakan alat search engine dalam mengindeks sebuah halaman website.

Contoh script membuat judul dalam HTML dengan <h1> sampai <h6>

 <!DOCTYPE html>  
 <html>  
 <head>  
 <title>Belajar HEADING HTML</title>  
 <body>  
 <h1>HEADING TINGKAT 1</h1>  
 <h2>HEADING TINGKAT 2</h2>  
 <h3>HEADING TINGKAT 3</h3>  
 <h4>HEADING TINGKAT 4</h4>  
 <h5>HEADING TINGKAT 5</h5>  
 <h6>HEADING TINGKAT 6</h6>  
 </body>  
 </html>

Dan berikut ini tampilan heading pada browser

2. Membuat paragraf pada HTML dengan tag <p>...</p>

Setelah judul kemudian kita masuk pada seksi pembuatan paragraf atau alinea. paragraf adalah rangkaian kalimat yang tersusun dari beberapa kata sehingga mempunyai makna tertentu. penulisan paragraf dimaksudkan untuk memudahkan pembaca dalam menangkap maksud atau gagasan utama dari penulis. Setiap paragraf terpisah oleh jarak yang lebih lebar dibandingkan dengan jarak setiap baris.

Untuk menandai setiap paragraf dalam HTML dipakai tag <p>...</p>. Jadi teks-teks dalam satu paragraf harus diletakkan diantara tag tersebut. Secara default paragraf dibuat rata kiri dan untuk membuatnya menjadi rata tengah atau rata kanan dapat dipakai atribut ALIGN.

Contoh script membuat paragraf dalam HTML

 <!DOCTYPE html>  
 <html>  
 <head>  
 <title>Belajar PARAGRAF HTML</title>  
 <body>  
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>  
 <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.  
 </p>  
 </body>  
 </html>

Dan berikut ini tampilan paragraf pada browser

3. Membuat baris baru pada HTML dengan tag <br>

Dalam sebuah artikel kadang dibutuhkan mambuat baris baru namun masih dalam satu paragraf. Untuk itu dipakai tag <br> yang merupakan singkatan dari begin row. Tag <br> akan membuat teks setelah tag ditulis pada baris baru tanpa memberi ruang kosong seperti tag <p>. Tag <br> dalam keseharian mengetik mirip dengan tombol Enter.

4. Membuat garis pemisah pada HTML dengan tag <hr>

Selain tag <br> mengganti baris juga bisa dilakukan dengan tag <hr>, bedanya jika menggunakan tag <hr> maka diatas baris baru akan ditampilkan sebuah garis horisontal sebagai pemisah. Tag <hr> merupakan singkatan dari horizontal rule.

5. Membuat kutipan teks pada HTML dengan tag <blockquote>

Dengan tag <blockquote> maka teks akan dibuat agak menjorok kedalam. Tag ini digunakan untuk menampilkan kutipan atau catatan tertentu dalam sebuah artikel.

Contoh script HTML dengan tag <h1>, <p>, <br>, <hr> dan <blockquote>

 <!DOCTYPE html>  
 <html>  
 <head>  
 <title>Belajar tag HTML p, br, hr dan blockquote</title>  
 <body>  
 <h1>judul artikel</h1>  
 <hr>  
 <p>Ini adalah baris pertama paragraf pertama.<br>  
 Ini adalah baris kedua paragraf pertama.  
 </p>  
 <p>Ini adalah kalimat pertama paragraf kedua.  
 Ini adalah kalimat kedua paragraf kedua tanpa membuat baris baru  
 <blockquote>Ini adalah catatan khusus yang terdapat pada paragraf kedua</blockquote>  
 </p>  
 <p>Ini adalah paragraf ketiga</p>  
 </body>  
 </html>