Oke, kita kembali ke kode HTML kita yang terakhir dari pelajaran sebelumnya. Disini bisa kita lihat bahwa konten kita masih hanya judulnya saja. Kita akan menambahkan paragraf, dan akan mempelajari beberapa tag yang akan menambahkan format pada konten kita, seperti huruf tebal, huruf miring, garis pembatas, dan lain-lain.

Pertama kita tambahkan dahulu konten kita dengan kata-kata acak. Disini kita menggunakan teks yang dikenal dengan nama Lorem Ipsum. Bisa kita search di Google, lalu kita lihat keterangannya dari Wikipedia. Ini adalah contoh dokumen Lorem Ipsum. Jadi kita akan menggunakan kata-kata acak, tanpa makna, hanya untuk membentuk tampilan dokumennya.

Untuk menggunakan Lorem Ipsum di dalam Atom, kita mesti menginstall package yang namanya Lorem. Di Atom saya sudah terinstall. Dan untuk menggunakannya kita mengetikan lorem_p diikuti dengan jumlah paragraf yang kita butuhkan. Misalkan saya mau membuat 3 paragraf, maka saya mengetik lorem_p3 lalu tekan alt+L. Lalu package akan membuatkan 3 paragraf yang isinya kata-kata acak untuk kita. Kita simpan dan kita lihat hasilnya di browser.

Di browser kita lihat bahwa ketiga paragraf masih digabung menjadi satu ya. Karena kita belum memberikan tag P yang menginformasikan kepada browser bahwa konten yang bersangkutan akan diperlakukan sebagai satu paragraf. Sebagai contoh kita beri tag pembuka P di awal paragraf pertama, dan kita beri tag penutupnya setelah paragraf. Dan agar lebih rapi, konten dari tag P kita berikan 1 inden lebih dalam dari tag P. Kita simpan dan lihat hasilnya di browser.

Kita bisa lihat bahwa paragraf pertama sudah dipisahkan dari paragraf lainnya. Namun paragraf kedua dan ketiga masih menyatu. Kita tambahkan lagi tag P pada paragraf kedua dan paragraf ketiga. Kita simpan lagi dan kita buka browser untuk melihat hasilnya. Sekarang konten kita sudah berbentuk 3 paragraf ya.

Selanjutnya kita ingin memberikan garis pembatas diantara judul dan paragraf pertama. Kita bisa melakukan hal ini dengan menambahkan tag HR, singkatan dari Horizontal Rule. Kita buka kembali kode HTML kita, dan kita tambahkan tag HR diantara header ketiga dan paragraf pertama. Perhatikan bahwa elemen HR adalah void element, jadi kita tidak perlu membuat tag penutup.

Kita simpan dan lihat hasilnya. Kita bisa melihat setelah judul sudah ada garis yang memisahkannya dengan paragraf pertama. Dulunya kita bisa mengatur ukuran dari horizontal rule ini dengan menggunakan attribute width dan size, namun sejak HTML versi lima sudah tidak disarankan lagi untuk menggunakan attribute ini. Mengikuti standart HTML 5, maka untuk pengaturan horizontal rule bisa dilakukan dengan menggunakan CSS. Jadi nantinya akan kita bahas lagi apabila kita sudah memasuki pelajaran mengenai CSS.

Selanjutnya kita akan memberikan efek huruf tebal pada sebagian kata di paragraf pertama kita. Hal ini bisa kita lakukan dengan menggunakan tag Strong. Kita kembali ke kode HTML kita. Lalu kita buat tag pembuka strong sebelum kata kedua paragraf pertama, dan kita tutup setelah kata keempat. Kita lihat hasilnya di browser. Sudah kelihatan menggunakan huruf tebal ya.

Selain itu, kita juga bisa membuat efek huruf tebal dengan menggunakan tag B, singkatan dari Bold. Kita coba membuat efek huruf tebal di kata lain yang masih berada di paragraph pertama. Dan kita lihat hasilnya di browser.

Disini kita lihat bahwa tag Strong dan tag B memberikan hasil yang sama. Namun untuk standart HTML 5, kita disarankan untuk menggunakan tag Strong, karena di dalam kode HTML 5 kita membicarakan mengenai struktur konten. Dengan memberikan tag Strong, kita memberitahukan bahwa kita memberikan penekanan terhadap konten tersebut. Hal ini lebih mengandung arti, daripada kita hanya memberitahu browser untuk menggunakan huruf tebal.

Hal yang sama juga bisa kita temukan untuk penggunaan huruf miring. Kita bisa menggunakan tag EM yang singkatan dari Emphasize, dimana kita memberitahukan browser bahwa konten yang bersangkutan bersifat spesial dan perlu ditampilkan berbeda dari konten lainnya, dalam hal ini menggunakan huruf miring. Sementara kalau kita menggunakan tag i, kita hanya memberitahu browser untuk menggunakan huruf italic atau huruf miring.

Kita coba menggunakan tag EM dan tag i di dalam kode HTML kita di paragraf kedua. Kita simpan dan lihat hasilnya pada browser. Kedua tag memberikan efek yang sama, yaitu menggunakan huruf miring.

Dan untuk paragraf ketiga kita akan memberikan contoh penggunaan huruf tebal dan huruf miring untuk konten yang sama. Setelah tag pembuka paragraf, kita tambahkan tag strong dan tag em. Sedangkan di akhir paragraf kita tambahkan tag penutup em dan strong. Dan kita lihat lagi hasilnya pada browser. Paragraf ketiga menggunakan huruf tebal dan miring sekaligus pada konten yang sama.

Yang terakhir kita bahas dalam video ini adalah tag BR, singkatan dari Line Break. Apabila kita melihat kembali kode HTML kita. Di setiap paragraf, kita bisa melihat bahwa teks pada konten kita sudah terdiri dari beberapa baris. Dan di setiap baris baru, pada bagian depannya ada inden beberapa spasi. Namun kalau dilihat pada hasil yang ditampilkan oleh browser, seluruh teks pada paragraf digabung menjadi satu baris. Nah, yang menjadi pertanyaan adalah, bagaimana bila kita memiliki kebutuhan untuk memisahkan konten dalam satu paragraf menjadi beberapa baris? Disini kita menggunakan tag BR.

Kita coba search Google mengenai HTML BR. Dan kali ini kita melihat referensi dari MDN.

Di situs Mozilla kita bisa melihat contoh dari penggunaan tag BR untuk paragraf yang isinya puisi, sehingga perlu dipisahkan menjadi banyak baris. Di sebelah kiri kita bisa melihat kode HTML-nya. Di setiap akhir baris ditambahkan tag BR. Elemen BR ini juga merupakan void element, jadi kita tidak perlu membuat tag penutupnya. Di sebelah kanan layar kita bisa melihat hasil dari kode HTML tersebut, dimana di setiap BR akan menyebabkan konten setelah tag dituliskan di baris berikutnya.

Kita copy contoh kode dari Mozilla ini dan kita Paste ke kode kita setelah paragraf ketiga. Kita rapikan sedikit indentnya. Kita simpan dan lihat hasilnya di browser. Kita akan mendapatkan tambahan paragraf keempat yang isinya sama persis dengan contoh output dari situs Mozilla. Jadi kalau kita ingin agar konten ditampilkan di baris berikutnya, maka kita bisa menambahkan tag BR pada akhir baris.

Dengan menggunakan fasilitas tanya jawab, maka Anda bisa bertanya dan akan dijawab langsung oleh instruktur kursus.

Anda belum terdaftar pada kursus ini sehingga tidak bisa mengajukan pertanyaan.