Tutorial HTML terusan 11 ~ infoku.net

Setelah mempelajari Tutorial HTML terusan 10 sekarang kita akanlanjutkan ke Tutorial HTML terusan 11.

Di dalam HTML, untuk menampilkan text agar bisa tampil dengan spasi dan karakter sesuai aslinya (text tanpa format) kita memerlukan tag khusus, yakni tag <pre>. Jika di dalam tag biasa, HTML akan mengabaikan spasi antar karakter (apabila terdapat lebih dari 1 spasi secara berurutan), text yang berada di dalam tag <pre> akan ditampilkan dengan ‘apa adanya’.

Tag <pre> Untuk Membuat Preformatted Text HTML

Tag <pre> adalah singkatan dari Preformatted Text. Sesuai dengan namanya, tag ini digunakan untuk text yang ‘belum’ diformat. Jika text diinput ke dalam tag <pre>, maka HTML akan menampilkan text tersebut sesuai dengan ‘apa adanya’. Text akan ditampilkan sesuai bagaimana text tersebut di buat, termasuk spasi yang ada.

Tag <pre> termasuk ke dalam kelompok block level element, sehingga akan ditampilkan di baris baru, terpisah dari text yang ada sebelum tag ini.

Berikut adalah contoh cara penulisan dan penggunaan tag <pre> di dalam HTML:

<!DOCTYPE html>

<html>

<head>

<title>Belajar HTML di infoku.net</title>

</head>

<body>

<h3>Saya sedang belajar HTML di infoku.net</h3>

<pre>

Spasi di dalam bagian 

ini akan     ditampilkan

dengan                  apa        adanya

</pre>

</body>

</html>

Seperti yang terlihat, spasi akan tetap ditampilkan sebagaimana yang ditulis. Juga jenis font yang digunakan biasanya font berjenis “monospace” yang memiliki panjang karakter yang sama untuk setiap hurufnya.

Tag <code> untuk Penulisan Kode

Sesuai dengan namanya, tag <code> ditujukan untuk memasukkan kode ke dalam HTML. Umumnya web browser akan menampilkan text yang berada di dalam tag <code> sama dengan jenis font tag <pre>, yakni dengan font monospace, namun dengan perbedaan bahwa tag <code> akan menghapus semua spasi yang lebih dari 1.

Tag <code> termasuk kelompok inline level element, dan mengikuti alur text yang ada.

Berikut adalah contoh cara penulisan dan penggunaan tag <code> di dalam HTML:

<!DOCTYPE html>

<html>

<head>

<title>Belajar HTML di infoku.net</title>

</head>

<body>

<h3>Saya sedang belajar HTML di infoku.net</h3>

<p>HTML adalah singkatan dari 

<code>Hypertext Markup          Language</code></p>

</body>

</html>

Dari contoh dapat dilihat perbedaan dari tag <pre> dan tag <code>. Tag <pre> bersifat block elemen, sedangkan tag <code> bersifat inline elemen. Tag <pre> akan menampilkan seluruh text tanpa menformat spasi, namun di dalam tag <code>, jika ditemukan karakter spasi dengan jumlah lebih dari 1, maka hanya 1 yang digunakan.

Selain menggunakan tag <pre> dan tag <code>, HTML versi 4.01 memiliki tag <tt> yang akan menghasilkan tampilan yang sama dengan tag <code>. Tag <tt> adalah singkatan dari Teletype, dan akan ditampilkan dengan font “monospace”.
HTML5 menyatakan tag <tt>: deprecated, yang artinya disarankan untuk tidak digunakan, dan kemungkinan tidak akan didukung web browser. Anda mungkin masing menemukan tag ini terutama dalam website lama.

Tag <bdo> untuk Merubah Arah Text HTML

Tag <bdo> adalah singkatan dari Bidirectional Override. Tag ini ditujukan untuk merubah arah text yang normalnya ditulis dari kiri ke kanan seperti bahasa inggris atau bahasa indonesia, menjadi dari kanan ke kiri seperti penulisan dalam bahasa arab.

Untuk menjalankan fungsinya, tag <bdo> memerlukan sebuah atribut dir yang bisa berisi salah satu dari 2 nilai, yakni ltr dan rtl.

Nilai Atribut ltr adalah singkatan dari left to right yang akan membuat arah text mulai dari arah kiri lalu ke arah kanan web browser. Sedangkan rtl adalah singkatan dari right to left yang akan menampilkan text dari kanan ke kiri.

Tag <bdo> termasuk kedalam tipe tag inline, dan akan ditampilkan mengikuti alur text yang ada.

Berikut adalah contoh cara penulisan dan penggunaan tag <bdo> di dalam HTML:

<!DOCTYPE html>

<html>

<head>

<title>Belajar HTML di infoku.net</title>

</head>

<body>

<h3>Saya sedang belajar HTML di infoku.net</h3>

<p>

<bdo dir="ltr">HTML adalah dasar dari semua halaman web di internet. 

Jika anda ingin mempelajari cara membuat website,

maka hal pertama yang harus dipelajari adalah HTML</bdo></p>

<p>

<bdo dir="rtl">HTML adalah dasar dari semua halaman web di internet. 

Jika anda ingin mempelajari cara membuat website,

maka hal pertama yang harus dipelajari adalah HTML</bdo></p>

</body>

</html>

Seperti yang terlihat, penggunaan tag <bdo dir=”rtl”> akan membuat web browser menampilkan karakter dari kanan ke kiri. Untuk text dengan bahasa indonesia atau bahasa inggris, tag ini akan jarang digunakan, kecuali anda ingin membuat pembaca pusing seperti contoh diatas.

Tag <blockquote> Untuk Membuat Kutipan Panjang HTML

Tag <blockquote> digunakan untuk bagian text yang merupakan kutipan panjang. Disebut kutipan panjang karena tag ini merupakan tipe block element, sehingga akan memisahkan diri dari text yang ada menjadi baris baru. Tag <blockquote> lebih cocok digunakan untuk memberikan penegasan penting untuk kutipan.

Selain untuk kutipan, sering juga tag ini digunakan untuk penulisan testimoni.

Berikut adalah contoh cara penulisan dan penggunaan tag <blockquote> di dalam HTML:

<!DOCTYPE html>

<html>

<head>

<title>Belajar HTML diinfoku.net</title>

</head>

<body>

<h3>Saya sedang belajar HTML di infoku.netm</h3>

<p>HTML atau Hypertext Markup Language adalah dasar dari semua 

halaman web di internet.</p>

<p>Berikut adalah defenisi HTML dikutip dari Wikipedia: </p>

<blockquote>HTML or HyperText Markup Language is the standard 

markup language used to create web pages. 

HTML is written in the form of HTML elements consisting of tags 

enclosed in angle brackets.</blockquote>

</body>

</html>

Seperti yang terlihat, secara default Web browser menampilkan tag <blockquote> sebagai paragraf baru dan dijorokkan (indent) beberapa pixel pada awal dan akhir text.

Tag <q> Untuk Membuat Kutipan Pendek HTML

Tag <q> adalah versi inline dari tag <blockquote>. Tag ini digunakan untuk kutipan pendek yang akan ‘menyatu’ dengan text yang ada saat ini karena sifatnya yang termasuk tipe inline element.

Didalam spesifikasi HTML, Web browser akan menampilkan text yang berada di dalam tag <q> berada didalam tanda kutip.

Berikut adalah contoh cara penulisan dan penggunaan tag <q> di dalam HTML:

<!DOCTYPE html>

<html>

<head>

<title>Belajar HTML di infoku.net</title>

</head>

<body>

<h3>Saya sedang belajar HTML di infoku.net</h3>

<p>Andi berkata, <q>Jadilah diri anda sendiri</q>

</body>

</html>

Seperti yang terlihat, web browser akan menambahkan tanda kutip untuk tag <q>, walaupun kita tidak menuliskannya di dalam text.
Sekian dulu penjelasan dari saya,semoga jelas,kita lanjut lagi Dalam tutorial selanjutnya di Tutorial HTML terusan 12.

About Admin MC3

This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.