Web Tutorial Indonesia 
Sebagian besar halaman web terdiri dari teks, jadi sangatlah penting untuk kita pelajari tentang format teks yang benar. Ini adalah lanjutan tutorial Pengenalan HTML, jika belum membaca tutorial tersebut, disarankan untuk membacanya sebelum melanjutkan tutorial ini.
Dalam tutorial kali ini kita akan belajar tentang elemen HTML yang berkaitan tentang format teks. Kita akan menambahkan beberapa tag paragraf(paragraph) dan tag headline(judul).
Kita akan melanjutkan skrip yang telah dibuat pada tutorial sebelumnya, pada skrip tersebut kita akan menghapus semua elemen HTML beserta isinya yang berada dalam tag <body>, sehingga skrip kita menjadi seperti ini:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Judul Halaman Saya</title>
</head>
<body>
</body>
</html>
Elemen Paragraf/Paragraph
Selanjutnya kita menambahkan elemen paragraf dalam elemen body dengan menambahkan tag pembuka <p> dan diakhiri tag penutup </p>, diantara tag paragraf kita akan memberikan isi yaitu berupa kalimat “Lorem Ipsum”, kalimat ini sering digunakan untuk uji coba elemen paragraf.
Dengan menambakan kalimat tersebut, skrip akhir kita menjadi seperti ini:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Judul Halaman Saya</title>
</head>
<body>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veni
am, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commo
do consequat.</p>
</body>
</html>
Lihat skrip yang telah ditandai dengan warna background yang lebih hitam, penulisan tag paragraf sedikit lebih maju kedalam, hal ini dilakukan karena menerapkan identasi dalam penulisan skrip, untuk kegunaan dari identasi anda dapat membaca artikel “Belajar nyekrip dengan baik“.
Kembali ke teks editor kita, simpan skrip dan refresh halaman web browser, web browser akan menampilkan teks seperti gambar dibawah ini:
Penampilan Elemen Paragraf dalam Body
Oke, kita telah berhasil menambahkan kalimat “lorem issum” dalam halaman browser. Kita bisa menambahkan beberapa paragraph lainnya dalam halaman browser, cukup dengan menambahkan tag beserta elemen paragraf dalam tag body.
Tambahkan satu paragraf dengan menyalin paragraf diatasnya, sehingga web browser akan menampilkan dua paragraf.
Terdapat Jarak antar Elemen Paragraf dalam Body
Perhatikan gambar diatas, terdapat jarak(enter) antara paragraf satu dengan paragraf lainnya, ini disebabkan karena pengaturan style oleh browser terhadap paragraf kita, kita bisa merubah style tersebut dengan CSS, kita akan mempelajari tentang CSS pada tutorial berikutnya.
Elemen Judul/Headline
Judul merupakan bagian utama dari pembuatan halaman web, bahkan dalam pembuatan sebuah dokumen. Judul merupakan identitas dari karya tulis, dengan judul yang menarik akan memberikan daya tarik seseorang untuk membaca isi dokumen/halaman web.
Oke, mari kita tambahkan judul pada halaman web kita, seperti yang sudah kita pelajari sebelumnya bahwa kita bisa memberikan judul pada halaman web dengan memanfaatkan tag judul/headline <h1>. Ketikkan skrip berikut persis dibawah tag pembuka dari body.
<h1>Ini adalah judul tingkat pertama</h1>
Sehingga skrip akhir kita menjadi seperti berikut:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Judul Halaman Saya</title>
</head>
<body>
<h1>Ini adalah judul tingkat pertama</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</body>
</html>
Perhatikan area yang telah ditandai dengan warna background yang lebih gelap, itulah skrip yang baru kita tambahkan tadi. Tag H1 merupakan tag judul tingkat pertama dan merupakan yang terpenting, tag ini biasanya dibuat untuk judul blog dan judul post.
Simpan file skrip kita pada teks editor, refresh halaman browser, maka halaman browser akan menampilkan tulisan seperti gambar berikut:
Penampilan Elemen H1 dalam Body
Pada halaman browser, tulisan yang telah kita tentukan sebagai judul akan terlihat lebih besar daripada tulisan yang telah kita tentukan menjadi paragraf, hal ini sekali lagi karena penerapan style standar yang diterapkan oleh browser pada tulisan judul kita.
Terdapat 6 tingkat/level tag judul, mulai H1 sampai H6, mari kita ketikkan skrip berikut persis dibawah tag <h1> yang telah kita buat tadi.
<h2>Ini adalah judul tingkat kedua</h2> <h3>Ini adalah judul tingkat ketiga</h3> <h4>Ini adalah judul tingkat keempat</h4> <h5>Ini adalah judul tingkat kelima</h5> <h6>Ini adalah judul tingkat keenam</h6>
Sehingga skrip akhir kita menjadi seperti dibawah ini:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Judul Halaman Saya</title>
</head>
<body>
<h1>Ini adalah judul tingkat pertama</h1>
<h2>Ini adalah judul tingkat kedua</h2>
<h3>Ini adalah judul tingkat ketiga</h3>
<h4>Ini adalah judul tingkat keempat</h4>
<h5>Ini adalah judul tingkat kelima</h5>
<h6>Ini adalah judul tingkat keenam</h6>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</body>
</html>
Setelah itu simpan dan refresh halaman browser, maka akan menampilkan seperti gambar berikut:
Penampilan Elemen H2-H6 dalam Body
Perhatikan gambar diatas, ternyata tag H1 lebih besar penulisannya daripada tag H2 dan seterusnya, ini dikarenakan bahwa tag H1 adalah tag judul yang utama dan memiliki peran paling penting.
Sebagai contoh, saat kita membaca sebuah koran, kita akan menemukan tulisan paling besar dan letaknya paling diatas alias judul koran tersebut, pada pada halaman web, tag H1 yang berperan seperti itu. Jika dalam koran tersebut terdapat sub judul, maka dalam halaman web, tag H2 yang berperan, dan jika terdapat sub judul dari sub judul, maka tag H3 yang berperan dan seterusnya.
Elemen paragraf dan elemen judul adalah elemen yang wajib pada sebuah halaman web yang berisikan teks, pada tutorial berikutnya kita akan membahas tentang Emphasis dan menerapkan pada halaman web kita.
Berikut hasil akhir dari skrip pada tutorial Teks HTML: Paragraf dan Judul. Anda dapat menjalankan skrip berikut secara langsung dengan mengeklik tombol “Run” yang terdapat di bawah area skrip.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Judul Halaman Saya</title>
</head>
<body>
<h1>Ini adalah judul tingkat pertama</h1>
<h2>Ini adalah judul tingkat kedua</h2>
<h3>Ini adalah judul tingkat ketiga</h3>
<h4>Ini adalah judul tingkat keempat</h4>
<h5>Ini adalah judul tingkat kelima</h5>
<h6>Ini adalah judul tingkat keenam</h6>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</body>
</html>
Happy Nyekrip! Terimakasih.
Terimakasih, sangat membantu.
sama-sama. senang bisa membantu :)