Home / HTML / Belajar Html – Text Formatting Element

Belajar Html – Text Formatting Element

Dalam bab kali ini kita akan membahas tag, atribut dan element yang berkaitan dengan memformat teks, seperti cara membuat paragraf, link, huruf miring, huruf tebal, dll. Semua tagtag ini ditempatkan di dalam bagian <body> dari halaman web.

Perlu menjadi catatan, ketika membahas tag atau atribut yang memiliki efek ‘tampilan’, biasanya tag atau atribut tersebut telah dinyatakan deprecated (usang), dan kita disarankan untuk beralih menggunakan CSS.

Agar pembahasan materi lebih komplit, saya tetap membahas tag dan atribut ‘usang’ ini namun juga menyertakan contohnya dengan CSS. CSS adalah pembahasan yang sangat luas, dan umumnya dibahas dalam buku tersendiri. Walaupun demikian, di akhir buku saya menyertakan panduan singkat memahami CSS. Ini saya buat agar anda bisa mengikuti pembahasan materi yang ‘sedikit’ melibatkan CSS.

Belajar Html - Text Formatting Element

1 Paragraf Element

Tag <p>digunakan untuk membuat paragraf, dan besar kemungkinan tag inilah yang paling banyak anda gunakan ketika mengisi konten untuk sebuah website.

Untuk membuat paragraf, kita tinggal mengisi teks diantara tag pembuka <p> dan tag penutup </p>, seperti contoh berikut:

<p>Ini adalah paragraf pertama</p>
<p>Ini adalah paragraf kedua</p>

Tag <p> merupakan block level element, sehingga akan tampil terpisah dalam baris baru. Web browser juga akan menambahkan beberapa spasi sebelum dan sesudah paragraf. Spasi ini (atau lebih tepatnya: margin) nantinya bisa dihilangkan atau diubah menggunakan CSS.

1.1 Memformat Rata Tepi Paragraf (atribut align)

Salah satu hal yang ingin anda lakukan di dalam paragraf adalah mengatur rata tepi (align) sebuah teks. Apakah teks itu akan ditampilkan dengan rata kanan, kiri, tengah, atau keduanya (justify). Untuk mendapatkan hasil ini, kita bisa menggunakan atribut align. Nilai yang bisa diinput adalah left, right, center, atau justify.

Berikut contoh penggunaan atribut align di dalam tag <p>:

<p align="center">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   Nam dictum sapien nec elit volutpat pellentesque.
   Vestibulum tristique justo ut eros iaculis, sit amet tempor luctus.
   Quisque convallis sapien sit amet sem efficitur, at efficitur ornare.
</p>

Namun sebelum anda menambahkan atribut ini ke dalam HTML, atribut align sudah dinyatakan
deprecated oleh standar HTML5.

Belajar Html - Text Formatting Element

1.2 Mengatur Align Paragraf Dengan CSS

Hampir semua atribut HTML yang berstatus deprecated memiliki pasangan kode CSS untuk menggantikannya, tidak terkecuali atribut align. Efek rata teks yang sama bisa di dapat dengan menggunakan property text-align dari CSS. Nilai dari text-align ini sama seperti atribut align, yakni salah satu dari: left, right, center, atau justify.

Berikut contoh penggunaan property text-align untuk tag <p>:

<p style="text-align: justify">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   Nam dictum sapien nec elit volutpat pellentesque.
   Vestibulum tristique justo ut eros iaculis, sit amet tempor luctus.
   Quisque convallis sapien sit amet sem efficitur, at efficitur ornare.
</p>

<p style="text-align: right">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   Nam dictum sapien nec elit volutpat pellentesque.
   Vestibulum tristique justo ut eros iaculis, sit amet tempor luctus.
   Quisque convallis sapien sit amet sem efficitur, at efficitur ornare.
</p>

Berikut kode lengkapnya pada halaman index.html:

<pre><!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
     <title>Belajar Paragraf HTML</title>
  </head>
  <body>
     <p style="text-align: justify">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Nam dictum sapien nec elit volutpat pellentesque.
        Vestibulum tristique justo ut eros iaculis, sit amet tempor luctus.
        Quisque convallis sapien sit amet sem efficitur, at efficitur ornare.
     </p>
     <p style="text-align: right">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Nam dictum sapien nec elit volutpat pellentesque.
        Vestibulum tristique justo ut eros iaculis, sit amet tempor luctus.
        Quisque convallis sapien sit amet sem efficitur, at efficitur ornare.
    </p>
 </body>
</html>
</pre>

Belajar Html - Text Formatting Element
Seperti layaknya sebuah paragraf, di dalam tag <p> kita juga bisa menggunakan berbagai inline
level element sebagai isi dari paragraf, seperti membuat huruf miring, huruf tebal, atau link.

Belajar Html - Text Formatting Element

2. Anchor Element (a)

Tag <a> (disebut juga dengan anchor element) merupakan salah satu tag terpenting dalam HTML. Tag ini digunakan untuk membuat link ke halaman lain (atau bisa juga untuk membuat link kepada file gambar, file pdf, file mp3, dll).

Untuk membuat link, setidaknya perlu 2 hal, yakni teks yang berfungsi sebagai teks link (teks yang bisa ‘di-klik’) dan alamat tujuan link (URL).

Untuk membuat teks yang bisa di-klik, kita tinggal membuat teks diantara tag pembuka <a> dengan tag penutup </a>, seperti contoh berikut ini:


<a> Halaman Login</a>

[/html
<p style="text-align: justify;">Sedangkan untuk membuat lokasi yang akan dituju ketika teks tersebut di klik, kita membutuhkan atribut href. Tag <a> termasuk ke dalam inline level element, sehingga ia akan ditampilkan mengikuti baris teks sebelumnya (tidak pindah ke baris baru).</p>

<h4><strong>2.1Atribut href</strong></h4>
<p style="text-align: justify;">Untuk menginput lokasi tujuan yang ingin di-link kan, tag 
<a> membutuhkan atribut href (hypertext references). Nilai dari atribut href berupa alamat dari halaman yang ingin dituju. Alamat ini bisa berbentuk alamat absolut atau alamat relatif (kita akan bahas keduanya sesaat lagi).</p>
Berikut contoh penulisan tag <a> dengan penambahan atribut href:



<a href="http://www.beliprogram.com/login.html">Halaman Login</a>

Jika anda menginput kode diatas ke bagian <body> halaman index.html, berikut adalah kode
lengkapnya:


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar Link HTML</title>
</head>
<body>
<a href="http://www.beliprogram.com/login.html">Halaman Login</a>
</body>
</html>

Belajar Html - Text Formatting Element

Teks Halaman Login berfungsi sebagai anchor teks, yakni teks yang bisa di-klik. Secara default, teks ini berwarna biru dengan efek garis bawah (underline). Kita bisa mengubah efek ini dengan menggunakan CSS.

2.2 Mengenal Alamat Absolut dan Alamat Relatif

Secara umum, alamat lokasi file di dalam HTML dapat dikelompokkan menjadi dua jenis, yakni alamat absolut dan alamat relatif. Alamat absolut adalah alamat yang mencantumkan URL secara lengkap, yakni terdiri dari nama protocol (bagian http://), nama domain (seperti: www.beliprogram.com), dan nama file (seperti: login.html). Contoh alamat absolut secara lengkap adalah: http://www.beliprogram.com/login.html. Alamat relatif adalah alamat yang ‘relatif’ kepada file tujuan berdasarkan struktur folder. Dengan membuat alamat relatif, kita tidak perlu membuat alamat URL lengkap seperti alamat absolut. Namun alamat relatif ini perlu pembahasan khusus.

Agar lebih mudah memahami cara penulisan alamat relatif, saya akan menggunakan contoh struktur folder seperti pada gambar dibawah ini.

Belajar Html - Text Formatting Element

Dalam struktur diatas, saya memiliki folder belajar_html yang di dalamnya terdapat 2 folder: folder_a dan folder_b serta sebuah file: index.html. Dalam folder_a terdapat 2 file: hello_- world.html dan tabel.html. Di dalam folder_b juga terdapat 2 file: login.html dan register.html.

Misalkan saat ini saya sedang mengetik kode pada file index.html. Untuk membuat link ke halaman tabel.html yang berada pada folder_a, saya tinggal menulis lokasi dari file tabel.html relatif kepada file index.html. Berikut cara penulisan link-nya:


<a href="folder_a/tabel.html">Halaman Tabel</a>

Apabila file yang saya tuju adalah login.html dalam folder_b, maka penulisannya menjadi:


<a href="folder_b/login.html">Halaman Login</a>

Sebagai contoh lain, sekarang saya akan menggunakan file hello_world.html. Untuk membuat link dari halaman hello_world.html ke halaman tabel.html, saya cukup menuliskan alamat: tabel.html (karena kedua file ini berada di dalam folder yang sama). Berikut cara penulisan linknya:


<a href="tabel.html">Halaman Tabel</a>

Namun jika saya ingin membuat link ke file index.html, maka saya harus ‘naik’ 1 folder ke atas. Untuk naik 1 folder, kita menulisnya dengan karakter titik dua kali diikuti dengan garis miring: ‘../’. Sehingga penulisan linknya menjadi seperti berikut:


<a href="../index.html">Halaman Index</a>

Masih menggunakan file hello_world.html, jika saya ingin membuat link ke file register.html, maka saya harus naik 1 folder, pindah ke folder_b, dan menuliskan nama file register.html. Berikut cara penulisan link-nya:


<a href="../folder_b/register.html">Halaman Register</a>

Aturan penulisan alamat ini sangat penting untuk dipahami, karena penggunaannya tidak hanya untuk tag <a> saja, tetapi juga untuk mengakses file external lain seperti gambar, file CSS, atau file JavaScript. Anda mungkin akan menemukan struktur folder yang cukup rumit, sehingga harus naik beberapa folder, kemudian masuk ke dalam beberapa folder lagi untuk menemukan file yang dituju, seperti contoh berikut:


<a href="../../../folder_a/folder_b/terpendam.html">Halaman Terpendam</a>

Dalam contoh diatas, kita naik 3 folder (dari file saat ini), kemudian masuk ke folder_a, ke folder_b, dan akhirnya menemukan file terpendam.html.

Belajar Html - Text Formatting Element

2.3 Link ke Bagian Lain pada Halaman yang Sama

Selain berfungsi untuk membuat link ke halaman lain, tag <a> juga bisa digunakan untuk membuat link ke bagian lain pada halaman yang sama. Hal ini lazim dilakukan jika halaman yang anda tulis cukup panjang, sehingga memerlukan ‘daftar isi’ pada bagian awal. Jika daftar isi ini di klik, maka layar web browser akan pindah ke bagian tersebut. Untuk membuat ini, kita perlu melakukan 2 hal: menandai lokasi yang dituju, dan membuat link menuju lokasi tersebut. Menandai sebuah lokasi yang akan menjadi tujuan link, bisa dilakukan dengan menggunakan atribut id. Atribut id merupakan salah satu atribut global. Atribut global atau global attribute adalah atribut yang bisa digunakan oleh seluruh tag HTML. Nilai dari atribut id biasanya berupa sebuah kata atau kumpulan karakter (kita juga bisa menggunakan angka, garis penghubung, atau underscore). Sebagai contoh, berikut adalah penulisan atribut id dengan nilai bab1 pada sebuah paragraf:


<p id="bab1">Ini adalah paragraf pembuka di dalam bab 1</p>

Belajar Html - Text Formatting Element

Setelah lokasi link selesai dibuat, kita tinggal ‘mengaitkan’ nilai atribut id tersebut dengan atribut href. Caranya, dengan menggunakan tanda pagar (#) dan diikuti dengan nilai atribut id yang dituju. Untuk membuat link yang akan menuju tag dengan id=”bab1″, saya tinggal menulis atribut href=”#bab1″ pada tag <a>. Notasi penulisan atribut href ini disebut juga dengan fragment identifier. Berikut adalah penulisan linknya:


<a href="#bab1">Menuju Bab 1</a>

Sebagai file latihan, saya akan memodifikasi file index.html menjadi seperti berikut ini:


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar Link HTML</title>
</head>
<body>
<h1>Belajar HTML</h1>
<a href="#bab1">Menuju Bab 1</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p id="bab1">Ini adalah paragraf pembuka di dalam bab 1</p>
</body>
</html>

Belajar Html - Text Formatting Element

Pada contoh diatas, saya menggunakan banyak tag <br> agar teks paragraf tidak terlihat pada jendela web browser (seolah-olah berada ‘jauh’ dibawah), sehingga ketika link “Menuju Bab 1” di klik, web browser akan pindah ke bagian tersebut. Anda juga bisa mengkombinasikan nilai atribut href menjadi seperti berikut ini:


<a href="http://www.beliprogram.com/tutorial.html#bab2">
Tutorial bab 2
</a>

Ketika link diatas di-klik, web browser akan menampilkan halaman tutorial.html pada situs beliprogram.com, dan langsung menuju bab 2.

2.4 Atribut Target

Atribut target pada tag <a> digunakan untuk menentukan pada jendela mana halaman web akan ditampilkan. Nilai yang bisa digunakan untuk atribut ini adalah _self, _blank, _parent, _top, atau framename. Apabila kita menggunakan atribut target=”_self”, maka web browser akan menampilkan halaman link di dalam jendela saat ini. Berikut contoh penggunaannya:


<a href="http://www.beliprogram.com/tutorial.html" target="_self">
Halaman Tutorial
</a>

Atribut target=”_self” jarang ditulis, karena jika tidak ditulis pun link akan tetap tampil di halaman saat ini. Atribut target=”_blank” akan menampilkan halaman link di dalam jendela baru web browser. Tapi karena saat ini semua web browser menggunakan sistem ‘tab’, maka halaman link umumnya akan tampil di dalam tab baru. Berikut contoh penggunaannya:


<a href="en.wikipedia.org/wiki/HTML" target="_blank">HTML di Wikipedia</a>

Selain _self dan _blank, atribut target masih memiliki nilai _parent, _top dan framename. Ketiga nilai ini digunakan jika halaman HTML menggunakan frame. Frame adalah fitur HTML untuk ‘memecah’ jendela web browser menjadi beberapa bagian. Saat ini penggunaan frame sudah jarang digunakan dan sudah berstatus deprecated, oleh karena itu saya akan melewatkan pembahasan ini.

2.5 Atribut Rel

Atribut rel merupakan singkatan dari relationship. Atribut ini digunakan untuk menyatakan bagaimana hubungan halaman saat ini dengan halaman yang akan di-link-kan. Nilai dari atribut ini cukup banyak, beberapa diantaranya: alternate, author, bookmark, nofollow, noreferrer, dan prefetch. Atribut rel lebih ditujukan kepada ‘robot’ mesin pencari seperti google, bukan untuk pengunjung. Oleh karena itu, kita tidak akan melihat efek langsung dari atribut ini. Atribut rel relatif jarang digunakan, sehingga saya tidak akan membahas semua nilai dari atribut ini. Akan tetapi terdapat satu nilai atribut rel yang cukup ‘terkenal’, yakni nofollow. Atribut rel=”nofollow” digunakan untuk tujuan SEO. Salah satu point terpenting yang digunakan Google untuk membuat rangking hasil pencarian adalah dengan menilai seberapa banyak sebuah situs dijadikan referensi. Google men-kalkulasinya dengan melihat seberapa banyak link yang menuju website tersebut, atau dikenal dengan istilah backlink. Apabila sebuah website banyak dijadikan referensi dari situs lain, maka google menganggapnya sebagai website terbaik dan ditampilkan pada posisi teratas. Situs wikipedia hampir selalu berada pada posisi pertama. Hal ini terjadi karena banyak website lain yang menjadikan wikipedia sebagai sumber dan membuat link ke wikipedia. Konsep ini sangat baik, tetapi ada kalanya kita ingin sebuah link ‘tidak ikut dihitung’ oleh google. Sebagai contoh, ketika saya membuat artikel di beliprogram, kadang saya menggunakan referensi dari situs lain dan membuat link kepada website tersebut. Link ini akan ‘dihitung’ oleh google sebagai backlink untuk situs tersebut.

Akan tetapi, banyak dari situs-situs ini tidak berkaitan dengan pembahasan (dan beberapa diantaranya menuju ke situs jual beli atau bahkan situs spam), sehingga saya tidak ingin google menjadikan link tersebut untuk ikut dihitung sebagai backlink. Beberapa pakar SEO juga tidak menyarankan membuat link ke situs yang tidak berkaitan dengan materi yang dibahas, bahkan bisa menurunkan ranking situs si pemberi link. Untuk memberitahu google akan hal ini, kita tinggal menambahkan atribut rel=”nofollow” pada link tersebut, seperti contoh berikut ini:

</pre>
<a href="http://www.duniailkom.com" rel="nofollow">Situs ane gan</a>

Ketika google melihat link dengan atribut rel=”nofollow”, maka google tidak akan menghitung link tersebut untuk menilai ranking website.

About admin

Check Also

Sejarah dan Perkembangan Bahasa HTML

Belajar HTML – Style Element

Tag <style> digunakan untuk menginput kode style ke dalam halaman HTML. Kode style yang umumnya …

Tinggalkan Balasan

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