Belajar HTML: Tutorial Belajar Format Text HTML

Minggu, 26 April 2015

Tutorial Belajar Format Text HTML

· Tutorial HTML Lanjutan: Tag dan Atribut untuk Pembuatan Text dan Format Text HTML

Di dalam tutorial HTML dasar, kita telah mempelajari tag-tag dasar HTML untuk pembuatan text, seperti pembuatan paragraf , dan tag break .

Dalam Tutorial Belajar HTML Lanjutan: Tag dan atribut untuk pembuatan Text dan Format Text HTML ini kita akan mempelajari lebih banyak tag-tag yang bertujuan untuk menformat text di dalamHTML.

Sesuai dengan peruntukkannya, tag-tag ini dirancang untuk membuat struktur text (konten) dari halaman web. Web browser akan menampilkan beberapa tag dengan tampilan visual seperti huruf tebal, huruf kecil, italic, dll, namun kita sebaiknya tidak bertujuan membuat text menjadi miring, namun menandai bagian text mana yang perlu ‘ditekankan’. Tampilan visual yang sama bisa didapat menggunakan CSS.

Beberapa judul dari tutorial pada bagian ini mungkin dirasa tidak tepat, karena tujuan dari HTML adalah sebagai struktur, bukan untuk tampilan seperti memiringkan huruf, namun saya berpendapat akan mudah untuk dipahami jika judul tutorial dibuat seperti itu. Pengaturan format tampilan text ‘sebaiknya’ dibuat di level CSS.

Di dalam halaman ini, saya akan men-index seluruh tutorial yang berkaitan dengan pembuatan dan format text dalam HTML.

Tutorial Text HTML Part 1: Perbedaan Block Element dengan Inline Element tag HTML

Sebelum membahas tag-tag yang berkaitan dengan text, dalam tutorial ini saya ingin menjelaskan tentang 2 jenis tipe elemen atau 2 jenis tipe tag di dalam HTML, yakni block element dan inline element serta perbedaan keduanya.

Di dalam HTML, seluruh text atau ‘isi’ halaman web harus berada di dalam atau diantara tag pembuka dan penutup HTML. Tag-tag di dalam HTML bisa dibagi menjadi 2 bagian, yakni tag berjenis block, dan tag berjenis inline. Di dalam tutorial text HTML: Perbedaan block element dengan inline element HTML ini kita akan membahas perbedaan keduanya.

Pada dasarnya, seluruh tag dalam HTML dibedakan menjadi 2 jenis: tag bertipe block element dan tag dengan tipe inline element. Perbedaan keduanya terletak dalam cara web browser menampilkan tag ini.

Pengertian Blok Level Element dalam Tag HTML

Tag dengan tipe block level element, bertujuan untuk membagi halaman HTML menjadi bagian yang terpisah, atau menjadi ‘blok’. Contoh dari blok elemen ini adalah tag paragraf (), list (<ol> atau <ul>), dan heading (<h1> s/d <h6>). Block element akan ditampilkan terpisah dari seluruh tag sebelum dan sesudahnya.

Web browser secara default akan menampilkan blok level elemen secara terpisah seolah-olah dalam sebuah ‘kotak’ dan dimulai pada baris baru (tidak mengikuti tag sebelumnya). Dan biasanya juga memiliki jarak spasi dari tag sebelum dan tag sesudahnya.

Berikut adalah contoh tag , <h2>, dan <ol> di dalam HTML:

<!DOCTYPE html>

<html>

<head>

<title>Belajar HTML di Duniailkom</title>

</head>

<body>

<h2>Saya sedang belajar Block Element HTML</h2>

<h4>Di Duniailkom.com</h4>

Tag p dan h1 adalah tag dengan tipe blok

Keduanya akan dimulai di baris baru

<ul>

<li>Tag li juga merupakan blok elemen</li>

<li>dan juga akan berjarak dari tag p sebelumnya</li>

</ul>

</body>

</html>

Dari contoh tersebut terlihat bahwa masing-masing tag akan ditampilkan di baris baru dan berjarak dari tag sebelumnya.

Pengertian Inline Level Element dalam Tag HTML

Berbeda dengan block level element, tag dengan tipe inline level element akan ‘menyatu’ dengan tag sebelum dan sesudahnya. Tag ini tidak akan memulai blok atau baris baru namun akan tetap berada di dalam blok tersebut. Tag inline juga tidak akan ditampilkan dengan jarak dari tag sebelum dan sesudahnya. Contoh dari tag inline ini adalah: , , dan .

Berikut adalah contoh dari halaman HTML kita sebelumnya, namun seluruh tag diganti dengan tag inline seperti , , dan :

<!DOCTYPE html>

<html>

<head>

<title>Belajar HTML di Duniailkom</title>

</head>

<body>

Saya sedang belajar Inline Element HTML

Di Duniailkom.com

Tag i dan em adalah tag dengan tipe blok

Keduanya tidak dimulai di baris baru

</body>

</html>

Terlepas dari tampilan text yang dicetak tebal atau miring, inline elemen adalah jenis tag yang mengikuti alur dari tag HTML yang ada.

Tampilan yang menjadi perbedaan block elemen dengan inline elemen tidaklah mutlak. Dengan menggunakan CSS, kita bisa merubah tampilan block elemen ‘seolah-olah’ menjadi inline elemen dan sebaliknya. Namun karena tujuan HTML bukanlah untuk tampilan, melainkan untuk membuat struktur halaman web, kita sebaiknya tidak berfokus di dalam tampilan, namun di dalam struktur. Untuk menangani tampilan dari web, sebaiknya menggunakan CSS.

Tutorial Text HTML Part 2: Cara Membuat Huruf Miring dalam HTML (tag i dan tag em)

Merubah format text seperti membuat huruf miring, merupakan hal biasa yang kita lakukan dalam aplikasi text processing, misalnya Microsoft Word. Dalam tutorial kali ini, kita akan membahas Cara Membuat Huruf Miring dalam HTML dengan tag dan .

Tag Untuk Membuat Huruf Miring dalam HTML

Tag  adalah singkatan dari italic. Italic merupakan sebutan untuk karakter text yang ditulis miring. Pada awalnya, tag  tidak memiliki arti struktur apa-apa, dan pernah berstatusdeprecated yang artinya disarankan untuk tidak digunakan lagi.

Hal ini terjadi karena tag  semata-mata bertujuan untuk membuat huruf italics, atau garis miring. Sebagian programmer berpendapat bahwa tag yang bertujuan visual seperti ini sebaiknya tidak dipakai dan dialihkan kepada CSS.

Namun pada era HTML5 saat ini, tag  tetap dipertahankan, namun defenisinya diganti menjadi “alternative voice”. Alternative Voice dimaksudkan untuk menandai bagian artikel yang ‘pengucapan’atau ‘mood‘-nya berbeda, seperti untuk menandai kata atau kalimat yang berasal dari bahasa asing.

Tag  masuk ke dalam tipe tag inline, yang akan mengikuti alur text yang ada.

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

<!DOCTYPE html>

<html>

<head>

<title>Belajar
  HTML di Duniailkom</title>

</head>

<body>

<h3>Saya
  sedang belajar HTML di Duniailkom.com</h3>

<p>HTML
  adalah singkatan dari <i>Hypertext Markup Language</i></p>

</ul>

</body>

</html>

Tag Untuk Stresses Emphasis Text HTML

Tag  adalah singkatan dari Stresses Emphasis. Stresses Emphasis ditujukan untuk menandai bagian text yang perlu di tekankan. Dalam implementasinya, tag  akan ditampilkan dengan huruf miring, sehingga mirip dengan tag .

Tag  masuk ke dalam tipe tag inline, yang akan mengikuti alur text yang ada.

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

<!DOCTYPE html>

<html>

<head>

<title>Belajar
  HTML di Duniailkom</title>

</head>

<body>

<p>Saya
  sedang belajar <em>HTML</em> di Duniailkom.com</p>

<p>HTML
  adalah singkatan dari Hypertext Markup Language</p>

</ul>

</body>

</html>

Walaupun keduanya sama-sama ditampikan dengan garis miring, tag  dan tag dimaksudkan untuk tujuan yang berbeda. Tag  digunakan untuk penekanan kata, sedangkan tag  digunakan untuk kata asing yang pengucapannya berbeda.

Dalam penggunaan sehari-hari, kedua tag ini sering dipertukarkan. Bahkan tag  lebih sering digunakan dibandingkan dengan tag . Beberapa programmer juga berpendapat bahwa kita tidak harus mengikuti aturan perbedaan ini, dan menggunakan apa yang lebih familiar selama hal itu tidak menjadi masalah.

Untuk membuat hasil huruf mirng di dalam CSS, kita bisa menggunakan:

font-style:
  italics;

Tutorial Text HTML Part 3: Cara Membuat Huruf Tebal dalam HTML (tag b dan tag strong)

Dalam pembuatan text, kadang kita perlu untuk membuat beberapa kata dalam format huruf tebaluntuk penekanan kalimat. Di dalam HTML, untuk membuat huruf tebal, kita menggunakan tag dan tag . Dalam tutorial HTML kali ini, kita akan membahas Cara Membuat Huruf Tebal dalam HTML dengan tag dan tag .

Tag dan Untuk Membuat Huruf Tebal dalam HTML

Jika anda telah membaca tutorial text HTML sebelumnya, yakni tentang tag  dan tag , maka kejadian serupa juga dialami oleh tag  dan tag .

Pada masa-masa awal perkembangan web, CSS pada saat itu belum berkembang seperti sekarang, sehingga keperluan untuk mengubah atau mempercantik halaman web, ditangani langsung olehHTML.

Tag  adalah singkatan dari bold yang di dalam aplikasi pemrosesan text berarti huruf tebal. Sama seperti alasan pada tag , pada saat era xHTML, tag  juga disarankan untuk tidak digunakan lagi, karena tag yang menangani tampilan seharusnya digantikan dengan CSS.

xHTML kemudian menyediakan tag  yang berarti “strong importance” untuk menggantikan penggunaan tag . Tag  digunakan pada bagian text yang perlu penekanan khusus seperti instruksi, atau kalimat penting. Web browser akan menampilkan tag  dengan huruf tebal.

Pada saat HTML5 keluar, tag  kembali di ‘restui’ menjadi tag resmi HTML, namun dengan tujuan sebagai “stylistically offset”, atau penggunaannya adalah untuk menandai kata kunci atau nama produk yang dirasa perlu untuk ditulis berbeda dengan text di sekelilingnya.

Berikut adalah contoh perbedaan penggunaan tag  dan tag :

<!DOCTYPE html>

<html>

<head>

<title>Belajar
  HTML di Duniailkom</title>

</head>

<body>

<p>Saya
  sedang belajar di <b>Duniailkom.com</b></p>

<p>HTML
  adalah <strong>bahasa wajib programmer web</strong></p>

</ul>

</body>

</html>

Di dalam contoh tersebut, saya menggunakan tag  untuk penulisan nama situs duniailkom, dan tag  untuk penekanan kalimat penting.

Sama seperti tag , tag  lebih populer di gunakan dibandingkan dengan tag , hal ini terutama disebabkan karena tag  telah ada dari awal perkembangan HTML. Di dalam spesifikasiHTML5, kedua tag ini memiliki tampilan yang sama, namun dengan pengertian yang berbeda.

Untuk membuat hasil berupa huruf tebal di dalam CSS, kita bisa menggunakan:

font-weight:
  bold;

Tutorial Text HTML Part 4: Cara Membuat Huruf Garis Bawah (underline) HTML (tag u dan ins)

Penulisan text dengan garis bawah atau underline biasa digunakan untuk menandai kata atau penekanan kata yang dianggap penting. Untuk membuat karakter dengan garis bawah di dalamHTML, kita menggunakan tag  dan tag <ins>.

Dalam tutorial kali ini, kita akan mempelajari Cara Membuat Huruf Garis Bawah (underline) dalam HTML dengan menggunakan tag dan tag <ins>.

Tag untuk Penulisan Text dengan Garis Bawah

Tag  adalah singkatan dari underline, atau garis bawah. Tag ini digunakan untuk membuat karakter text dengan garis bawah. Sama seperti tag  dan , tag  tidak memiliki tujuan apa-apa dan lebih kepada tampilan dari text.

Tag  masuk kedalam tipe tag inline, yang akan mengikuti alur text yang ada.

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

<!DOCTYPE html>

<html>

<head>

<title>Belajar
  HTML di Duniailkom</title>

</head>

<body>

<h3>Saya
  sedang belajar HTML di Duniailkom.com</h3>

<p><u>HTML</u>
  atau <u>Hypertext Markup Language</u>

adalah
  dasar dari semua halaman web di internet.

Jika
  anda ingin mempelajari cara membuat website,

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

</body>

</html>

Tag <ins> untuk Penulisan Text dengan Garis Bawah

Tag <ins> adalah kependekan dari Insert. Tag <ins> ditujukan untuk bagian text baru yang ditambahkan ke dalam konten web. Tag <ins> dirancang untuk menegaskan bagian text yang sebelumnya tidak ada. Tag ini adalah kebalikan dari tag <del>.

Tag <ins> saya masukkan ke dalam tutorial ini karena secara default web browser menampilkan tag<ins> dengan garis bawah. Tag ini termasuk jenis inline element.

Berikut adalah contoh penggunaan tag <ins> di dalam HTML:

<!DOCTYPE html>

<html>

<head>

<title>Belajar
  HTML di Duniailkom</title>

</head>

<body>

<h3>Saya
  sedang belajar HTML di Duniailkom.com</h3>

<p>HTML
  atau Hypertext Markup Language adalah dasar dari

semua
  halaman web di internet. Jika anda ingin mempelajari

cara
  membuat website, maka

<del>hal
  pertama yang harus dipelajari adalah PHP</del>

<ins>hal
  pertama yang harus dipelajari adalah HTML</ins></p>

</body>

</html>

Secara pribadi, saya menggunakan tag  untuk bagian text yang tidak ditujukan apa-apa selain mempertegas penulisan. Namun apabila ada bagian text yang ditambahkan kemudian, tag <ins>akan membantu struktur konten dari HTML.

Untuk membuat hasil huruf dengan garis bawah di dalam CSS, kita bisa menggunakan:

text-decoration:
  underline;

Tutorial Text HTML Part 5: Cara Membuat Huruf Tercoret (Strikethrough) HTML (tag s dan del)

Dalam tutorial Text HTML kali ini, kita akan membahas tentang Cara Membuat Huruf Tercoret di dalam HTML. Huruf / Text tercoret ini dikenal juga dengan istilah strikethrough. Strikethroughbiasanya digunakan untuk mengoreksi text atau bagian dari kalimat. Untuk membuat text tercoret ini, kita menggunakan tag <s> dan tag <del>.

Tag <s> untuk Penulisan Strikethrough dalam HTML

Tag <s> adalah singkatan dari Strikethrough. Strikethrough adalah istilah yang dipakai untuk membuat text dengan garis tercoret. Tag <s> tidak memiliki arti apa-apa dan murni merupakan format text untuk menampilkan text dengan strikethrough.

Tag <s> masuk ke dalam tipe tag inline, yang akan mengikuti alur text yang ada.

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

<!DOCTYPE html>

<html>

<head>

<title>Belajar
  HTML di Duniailkom</title>

</head>

<body>

<h3>Saya
  sedang belajar HTML di Duniailkom.com</h3>

<p><s>JavaScript</s>
  HTML adalah dasar dari

semua
  halaman web di internet. Jika anda ingin mempelajari cara

membuat
  website, maka hal pertama yang harus dipelajari adalah HTML</p>

</body>

</html>

Tag <del> untuk Text yang di Koreksi

Tag <del> adalah singkatan dari delete. Sesuai dengan namanya, tag <del> ditujukan untuk penulisan text yang dianggap salah dan ingin dikoreksi. Tag <del> merupakan kebalikan dari tag<ins> yang bertujuan untuk penambahan text baru.

Tag <del> saya masukkan ke dalam tutorial ini karena secara default web browser menampilkan tag<del> dengan garis tercoret. Tag ini termasuk jenis inline element.

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

<!DOCTYPE html>

<html>

<head>

<title>Belajar
  HTML di Duniailkom</title>

</head>

<body>

<h3>Saya
  sedang belajar HTML di Duniailkom.com</h3>

<p>HTML
  atau Hypertext Markup Language adalah dasar dari

semua
  halaman web di internet.

Jika
  anda ingin mempelajari cara membuat website, maka

<del>hal
  pertama yang harus dipelajari adalah PHP</del>

<ins>hal
  pertama yang harus dipelajari adalah HTML</ins></p>

</body>

</html>

Secara pribadi, saya menggunakan tag <s> untuk bagian text yang tidak ditujukan apa-apa selain garis tercoret. Namun apabila ada bagian text yang memang dirasa perlu dikoreksi, tag <del> akan membantu struktur konten dari HTML dan lebih disarankan.

Selain menggunakan tag <s> dan <del>, HTML versi 4.01 memiliki tag <strike> dengan tampilan yang sama, namun HTML5 menyatakan tag <strike> deprecated, yang artinya disarankan untuk tidak digunakan, dan kemungkinan tidak akan didukung web browser. Anda mungkin masing menemukan tag ini terutama dalam website lama.

Untuk membuat hasil huruf dengan garis tercoret di dalam CSS, kita bisa menggunakan:

text-decoration:
  line-through;

Tutorial Text HTML Part 6: Cara Menulis Persamaan Matematis dalam HTML (tag sup dan sub)

Dalam membuat konten web, kadang kita perlu membuat dan memasukkan persamaan matematika ke dalam HTML, seperti pangkat, rumus kimia, dll. Cara penulisan ini misalnya 2³atau H₂O. Pada tutorial kali ini kita akan membahas Cara Menulis Persamaan Matematis di dalam HTML dengan tag dan tag .

Tag Untuk Membuat Text Superscript

Tag  adalah singkatan dari superscript, yaitu sebutan untuk karakter kecil diatas text. Umumnya superscript digunakan didalam persamaan matematika seperti dalam pembuatan pangkat. Dalam angka 3² , angka 2 adalah superscript. Penulisan HTML untuk hal ini adalah32.

Tag  masuk ke dalam tipe tag inline, yang akan mengikuti alur text yang ada.

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

<!DOCTYPE html>

<html>

<head>

<title>Belajar
  HTML di Duniailkom</title>

</head>

<body>

<h3>Saya
  sedang belajar HTML di Duniailkom.com</h3>

<p>3<sup>2</sup>
  + 5<sup>3</sup> = 9 + 125 = 134</p>

</body>

</html>

Tag untuk membuat text Subscript

Tag  adalah singkatan untuk Subscript. Subscript adalah penyebutan untuk karakter kecil yang diletakkan sedikit di bawah baris karakter normal. Biasanya subscript digunakan untuk formula kimia seperti H₂O. H₂O di dalam tag HTML ditulis dengan H2O.

Tag  masuk ke dalam tipe tag inline, yang akan mengikuti alur text yang ada.

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

<!DOCTYPE html>

<html>

<head>

<title>Belajar
  HTML di Duniailkom</title>

</head>

<body>

<h3>Saya
  sedang belajar HTML di Duniailkom.com</h3>

<p>Dalam
  rumus kimianya, air ditulis sebagai H<sub>2</sub>O</p>

</body>

</html>

Baik tag  maupun tag  kemungkinanakan jarang kita gunakan, kecuali jika anda membuat artikel matematika atau kimia.

Untuk membuat efek yang sama seperti tag  dan tag  melalui CSS agak sedikit sulit, karena CSS tidak memiliki style khusus untuk superscript dan subscript. Untuk membuat efeknya, anda bisa menggabungkan beberapa ‘trik’ seperti berikut ini untuk mendapatkan efek superscript di CSS:

position:
  relative; top: -0.5em; font-size: 80%;

Tutorial Text HTML Part 7: Cara Membuat Kutipan di dalam HTML (tag blockquote dan q)

Dalam penulisan text, terutama artikel ilmiah, kita akan sering membuat kutipan yang berasal dari sumber-sumber referensi. Untuk penulisan kutipan, HTML memiliki 2 buah tag khusus, yakni tag<blockquote> dan tag <quote>. Pada tutorial Text HTML kali ini kita akan membahas Cara Membuat Kutipan di dalam HTML.

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 di Duniailkom</title>

</head>

<body>

<h3>Saya
  sedang belajar HTML di Duniailkom.com</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 Duniailkom</title>

</head>

<body>

<h3>Saya
  sedang belajar HTML di Duniailkom.com</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.

Tutorial Text HTML Part 8: Cara Membuat Text HTML Tanpa Format (tag pre dan tag code)

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, HTMLakan mengabaikan spasi antar karakter (apabila terdapat lebih dari 1 spasi secara berurutan), text yang berada di dalam tag <pre> akan ditampilkan dengan ‘apa adanya’.

Pada tutorial Text HTML kali ini kita akan membahas tentang Cara Membuat Text HTML Tanpa Format dengan menggunakan tag <pre> dan tag <code>.

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 Duniailkom</title>

</head>

<body>

<h3>Saya
  sedang belajar HTML di Duniailkom.com</h3>

<pre>

Spasi
  di dalam bagian

ini
  akan     ditampilkan

dengan
                  
  apa        adanya

</pre>

</ul>

</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 <pre> juga sering dipakai untuk membuat contoh program. Seluruh contoh kode program di duniailkom ini ditampilkan di dalam tag <pre>.

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 Duniailkom</title>

</head>

<body>

<h3>Saya
  sedang belajar HTML di Duniailkom.com</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.

Tutorial Text HTML Part 9: Cara Untuk Merubah Arah Text dalam HTML (tag bdo)

Karena HTML digunakan tidak hanya untuk web dengan huruf alphabet, tetapi juga huruf yang berupa karakter-karakter khusus seperti huruf china atau huruf arab, maka HTML memiliki sebuah tag khusus yang digunakan untuk merubah arah text. Di dalam tutorial kali ini kita akan membahasCara Untuk Merubah Arah Text dalam HTML dengan tag <bdo>.

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 Duniailkom</title>

</head>

<body>

<h3>Saya
  sedang belajar HTML di Duniailkom.com</h3>

<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>

<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.

Tutorial Text HTML Part 10: Tag HTML Untuk Penulisan Hal Teknis (tag samp, kbd, dan var)

Selain tag <pre> dan tag <code>, di dalam HTML masih terdapat beberapa tag yang berkaitan dengan hal teknis, yakni tag <samp>, tag <kbd>, dan tag <var>. Ketiga tag ini umumnya hanya ditemui dalam pembuatan konten web yang banyak melibatkan penulisan kode program. Ketiga tag ini lebih berfungsi kedalam pembuatan struktur HTML, dibandingkan tampilan.

Tag <samp> untuk membuat Program Sample

Tag <samp> adalah kependekan dari Program Sample. Tag ini diperuntukkan untuk contoh kode program. Web browser akan menampilkan text di dalam tag ini dengan font monospace, namun akan menghilangkan spasi. Tag ini akan ditampilkan mirip seperti tag <code>.

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

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

<!DOCTYPE html>

<html>

<head>

<title>Belajar
  HTML di Duniailkom</title>

</head>

<body>

<h3>Saya
  sedang belajar HTML di Duniailkom.com</h3>

<p>HTML
  adalah singkatan dari

<samp>Hypertext
  Markup          
  Language</samp></p>

</ul>

</body>

</html>

Tag <kbd> untuk Penulisan Keyboard, dan tag <var> untuk Variabel

Tag <kbd> adalah singkatan dari keyboard. Tag ini diperuntukkan untuk text yang berisi text inputan keyboard. Text yang berada di dalam tag ini akan ditampilkan menggunakan fontmonospace.

Tag <var> adalah singkatan dari variabel. Tag ini diperuntukkan untuk text yang berisi variabel matematika atau variabel program. Text yang berada di dalam tag ini akan ditampilkan dengan baris miring (italic).

Berikut adalah contoh penggunaan tag <kbd> dan <var> di dalam HTML:

<!DOCTYPE html>

<html>

<head>

<title>Belajar
  HTML di Duniailkom</title>

</head>

<body>

<h3>Saya
  sedang belajar HTML di Duniailkom.com</h3>

<p>Tekan
  tombol <kbd>SHIFT</kbd> untuk mengubah case.

<p>Variabel
  <var>a</var> akan berisi nilai integer</p>

</body>

</html>

Ketiga tag yang kita bahas disini lebih ditujukan untuk membuat struktur halaman HTML. Struktur ini akan berguna terutama jika halaman web ditampilkan dengan web browser ‘khusus‘ sepertiscreen reader yang akan menyebutkan bagian tag tertentu seperti ketiga tag ini secara berbeda.

Tutorial Text HTML Part 11: Cara Menampilkan dan Memasukkan Karakter Khusus HTML

Selain karakter alfanumerik, kadang kita butuh menulis karakter-karakter khusus ke dalam HTML, misalnya tanda “<”. Karakter kurung siku “<” tidak bisa dituliskan begitu saja di dalam HTML, karena karakter kurung siku berfungsi internal dalam HTML sebagai tanda pembuka tag. Di dalam tutorial text HTML kali ini, kita akan mempelajari cara menampilkan dan memasukkan karakter khusus ke dalam HTML.

Cara Memasukkan Karakter Khusus ke dalam HTML

Untuk memasukkan karakter-karakter khusus ke dalam HTML, kita harus men-‘escape’ karakter tersebut. Istilah escape maksudnya bahwa dari pada menulis sebuah karakter secara langsung, kita bisa menggantinya dengan angka atau referensi yang merujuk kepada karakter tersebut.

Dalam HTML, terdapat 2 cara untuk men-‘escape’ karakter, yaitu dengan menggunakan penomoran angka (numeric entity), dan menggunakan singkatan untuk karakter (named entity). Kedua cara ini ditulis dengan karakter ‘&’ pada awal penulisan, dan diakhiri dengan karakter ‘;’.

Sebagai contoh, jika saya ingin menuliskan karakter “<” di dalam konten HTML, maka penulisannya adalah sebagai berikut:

Saya
  sedang belajar menampilkan karakter &#060; dalam HTML

Cara diatas menggunakan penomoran angka atau numeric entity. Karakter “<” memiliki numeric entity 60, sehingga ditulis menjadi &#060;.

Jika menggunakan singkatan karakter atau named entity, karakter “<”ditulis menjadi < sebagai berikut:

Saya
  sedang belajar menampilkan karakter &lt; dalam HTML

Tabel Karakter Khusus dalam HTML

Selain karakter “<”, HTML menyediakan ratusan karakter khusus yang bisa digunakan. Berikut adalah tabel karakter khusus yang sering digunakan:

Untuk list lengkap karakter-karakter khusus dalam HTML, anda bisa melihatnya di situs Web Standars Project di www.webstandards.org/learn/reference/charts/entities/

Sebagai penutup, berikut adalah contoh kode HTML yang akan menampilkan beberapa karakter khusus dalam HTML:

<!DOCTYPE html>

<html>

<head>

<title>Belajar
  HTML di Duniailkom</title>

</head>

<body>

<h3>Saya
  sedang belajar HTML di &copy; Duniailkom.com &#174;
  &trade;</h3>

<p>Dalam
  tutorial kali ini, kita akan belajar untuk menampilkan

karakter-karakter
  khusus seperti &lt;, &#062;, &hellip;</p>

</body>

</html>

Salah satu karakter penting untuk diketahui adalah karakter ‘non-breaking space’, yang ditulis sebagai   karakter ini berfungsi untuk memastikan bahwa frase atau kata tidak terpisah.

Jika saya menulis:

Dunia Ilkom

Kata tersebut akan ditampilkan web browser menjadi Dunia Ilkom (karakter   akan ditampilkan sebagai spasi), Namun kedua kata tersebut akan ‘dianggap‘ sebagai satu kesatuan, dan tidak akan terpisah walaupun berada di akhir baris atau ukuran web browser diperkecil.

Tutorial Text HTML Part 12: Tag abbr, cite, dfn, dan small untuk Struktur Text HTML

Tutorial kali ini khusus dibuat untuk membahas tag-tag Text HTML yang tidak saya masukkan dalam tutorial tersendiri. Tag yang akan kita bahas dalam tutorial ini adalah tag <abbr>, tag <cite>, tag <dfn>, dan tag . Keempat tag ini bisa digunakan untuk membuat struktur dan format Text di dalam HTML.

Tag <abbr> untuk Penulisan Singkatan dalam HTML

Tag <abbr> adalah singkatan dari Abbreviation. Abbreviation berarti singkatan dan sesuai dengan namanya, ditujukan untuk text yang berbentuk singkatan seperti ”NASA”, ”HTML”, atau ”HTTP”. Penggunaan tag ini biasanya juga menyertakan atribut title. Atribut title berfungsi untuk menampilkan kepanjangan dari singkatan yang ada pada tag <abbr>. Isi dari artibut title hanya ditampilkan ketika mouse berada diatas tag <abbr>.

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

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

<!DOCTYPE html>

<html>

<head>

<title>Belajar
  HTML di Duniailkom</title>

</head>

<body>

<h3>Saya
  sedang belajar HTML di Duniailkom.com</h3>

<abbr

title="Hypertext
  Markup Language">HTML</abbr>

adalah
  dasar dari semua halaman web di internet.

Jika
  anda ingin mempelajari cara membuat website,

hal
  pertama yang harus dipelajari adalah HTML

</body>

</html>

Hasil dari tag <abbr> tidak akan ditampilkan berbeda di dalam web browser, dan penggunaannya lebih kepada struktur text HTML.

Selain menggunakan tag <abbr>, HTML versi 4.01 memiliki tag <acronym> dengan tampilan dan tujuan yang sama (termasuk atribut title), namun HTML5 menyatakan tag<acronym> deprecated, yang artinya disarankan untuk tidak digunakan, dan kemungkinan tidak akan didukung web browser. Anda mungkin masih akan menemukan tag ini terutama dalam website lama.

Tag <cite> untuk Membuat Sumber Referensi

Tag <cite> adalah singkatan dari Citation. Citation adalah sebutan untuk referensi. Di dalam membuat konten web, biasanya referensi ini bisa berupa buku atau alamat dari web lain. Web browser pada umumnya akan menampilkan tag <cite> dengan garis miring atau italic.

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

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

<!DOCTYPE html>

<html>

<head>

<title>Belajar
  HTML di Duniailkom</title>

</head>

<body>

<h3>Saya
  sedang belajar HTML di Duniailkom.com</h3>

HTML
  adalah dasar dari semua halaman web di internet.

Jika
  anda ingin mempelajari cara membuat website,

hal
  pertama yang harus dipelajari adalah HTML

<p>Referensi
  yang saya gunakan untuk tutorial ini adalah

<cite>Learning
  Web Design</cite>,

dan
  <cite>HTML Ultimate Reference</cite>

</body>

</html>

Tag <dfn> Untuk Menandai Defenisi Kata

Tag <dfn> adalah singkatan dari Definition. Sesuai dengan namanya, tag ini digunakan untuk menandai defenisi dari suatu istilah. Karena istilah akan sering muncul dalam tulisan, biasanya hanya istilah yang muncul pertama kali saja yang diberi tag <dfn>.

Sebagian besar web browser akan menampilkan tag <dfn> dengan huruf miring atau italic. Tag<dfn> masuk ke dalam tipe tag inline, yang akan mengikuti alur text yang ada.

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

<!DOCTYPE html>

<html>

<head>

<title>Belajar
  HTML di Duniailkom</title>

</head>

<body>

<h3>Saya
  sedang belajar HTML di Duniailkom.com</h3>

HTML
  adalah dasar dari semua halaman web di internet.

Jika
  anda ingin mempelajari cara membuat website,

hal
  pertama yang harus dipelajari adalah HTML

<dfn>Web
  Browser</dfn> adalah sebuah software aplikasi

untuk
  menerima, menampilkan, dan menerjemahkan informasi

dari
  world wide web (wikipedia).

Dan
  salah satu informasi itu dibuat dalam format HTML.

</body>

</html>

Tag untuk Membuat Ukuran Huruf Kecil

Tag  digunakan untuk membuat ukuran huruf menjadi lebih kecil dibandingkan text lainnya. tag  seharusnya berstatus deprecated seperti saudaranya, tag <big>. Namun tag mendapat defenisi ulang pada spesikasi HTML5, yakni Small Imprint.

Small Imprint dimaksudkan untuk text kecil diluar konten, seperti copyright atau legal notice. Jika anda menginginkan ukuran text yang kecil, namun bukan untuk small imprint, lebih baik menggunakan CSS.

Tag  masuk ke dalam tipe tag inline, yang akan mengikuti alur text yang ada.

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

<!DOCTYPE html>

<html>

<head>

<title>Belajar
  HTML di Duniailkom</title>

</head>

<body>

<h3>Saya
  sedang belajar HTML di Duniailkom.com</h3>

HTML
  adalah dasar dari semua halaman web di internet.

Jika
  anda ingin mempelajari cara membuat website,

hal
  pertama yang harus dipelajari adalah HTML.

<small>Copyright
  duniailkom.com 2014</small>

</body>

</html>

Tag  memiliki pasangan tag <big>, namun tag <big> dinyatakan deprecated di dalam HTML5, yang artinya disarankan untuk tidak digunakan, dan kemungkinan tidak akan didukung web browser. Anda mungkin masing menemukan tag ini terutama dalam website lama.

Tutorial Text HTML Part 13: Tag-tag Deprecated untuk Struktur Text dalam HTML

Selain tag-tag yang kita bahas di dalam sesi tutorial text HTML ini, dalam sejarahnya HTML memiliki tag-tag yang deprecated atau dianggap ‘usang’ dan disarankan untuk tidak digunakan lagi. Tag-tag ini saya tampilkan hanya sebagai referensi karena mungkin masih banyak digunakan pada beberapa halaman web.

Dalam tutorial text HTML kali ini kita akan mempelajari Tag-tag Deprecated untuk Struktur Text dalam HTML.

Pengertian tag Deprecated HTML

Beberapa tag HTML dianggap deprecated atau usang. Tag-tag ini umumnya adalah peninggalan dari sejarah HTML yang digunakan untuk mengatur tampilan website. Saat itu CSS belum berkembang dan belum banyak digunakan. Programmer menuntut agar tag-tag HTML dapat berfungsi juga untuk mempercantik tampilan.

Seiiring perkembangan CSS, saat ini disarankan untuk memisahkan konten atau isi website dengan tampilan website. Hal-hal yang berhubungan dengan tampilan sebaiknya menggunakan CSS, dan tidak dilakukan dari tag HTML. Hal ini akan membuat halaman web menjadi fleksibel dan jika suatu saat dibutuhkan perubahan tampilan, hanya tinggal mengubah CSS saja.

Kemunculan HTML5 beberapa waktu yang lalu, membuat tag-tag yang tidak relevan menyandang status deprecated. Namun beberapa tag yang pada era xHTML berstatus deprecated juga ada yang’dihidupkan’ lagi, seperti tag dan .

Walaupun tag-tag yang akan kita bahas disini berstatus deprecated, umumnya web browser masih mendukungnya dengan alasan kompatibilitas dengan website lama. Walaupun demikian, kita tidak bisa mengandalkan hal ini, dan mungkin saja dalam waktu tak lama lagi web browser tidak akan mendukung tag ini.

Daftar Tag Deprecated untuk Struktur Text dalam HTML

Tag-tag yang menjadi deprecated adalah:

· Tag <acronym>: untuk membuat singkatan. Tag ini digantikan dengan tag <abbr>.

· Tag <applet>: untuk memasukkan Java Applet.

· Tag <basefont>: untuk membuat settingan font default halaman web. Tampilan font sepenuhnya disarankan menggunakan CSS.

· Tag <big>: untuk membuat besar ukuran text. Tag ini murni sebagai tampilan, dan disarankan menggunakan CSS.

· Tag <center>: untuk membuat rata tengah text. Disarankan untuk menggunakan CSS.

· Tag <dir>: untuk membuat directory list. Tag ini digantikan dengan tag <ul> (unordered list).

· Tag : Untuk mengatur font text. Tag ini masih sering digunakan untuk mengatur tampilan text, seperti warna, ukuran font, jenis font, dll. Tag ini sepenuhnya untuk mengatur tampilan, dan disarankan menggunakan CSS.

· Tag <isindex>: untuk memasukkan search box.

· Tag <menu>: digunakan untuk membuat menu list.

· Tag <strike>: untuk membuat text dengan garis salah atau strike-through. Tag ini digantikan dengan tag <s> atau <del>

· Tag <tt>: untuk membuat text dengan tampilan teletype dan ditampilkan dengan fontmonospace. Tag ini bisa digantikan dengan tag <code>.

· Tag <blink>: Tag ini berasal dari zaman perang browser antara Internet Explorer dan Netscape. Awalnya digunakan untuk membuat text berkedip-kedip. Namun penggunaan tag ini sering menganggu pengunjung dan web browser saat ini pada umumnya tidak mendukung tag ini lagi.

· Tag <marquee>: Tag ini juga berasal dari tag non standar yang digunakan web browser. Tag<marquee> digunakan untuk membuat efek text berjalan pada web browser. Tag ini adalah sedikit tag HTML yang ‘bergerak’. Efek yang ditampilkan bisa dikontrol dengan beberapa atribut. Penggunaan tag <marquee> saat ini sudah jarang digunakan, terkesan ‘jadul’ karena efeknya yang sering mengganggu.

Berikut adalah contoh cara penulisan dan penggunaan tag-tag deprecated di dalam HTML:

<!DOCTYPE html>

<html>

<head>

<title>Belajar HTML di Duniailkom</title>

</head>

<body>

<h3>Saya sedang belajar HTML di Duniailkom.com</h3>

adalah dasar dari semua halaman web di internet.

Jika anda ingin mempelajari cara membuat website,

hal pertama yang harus dipelajari adalah

<strike>CSS</strike> HTML.

<big>Referensi</big> yang saya gunakan untuk tutorial ini adalah

Learning Web Design,

dan HTML Ultimate Reference

Beberapa tag di dalam halaman ini berstatus <tt>deprecated</tt>,

dan disarankan untuk tidak dipergunakan lagi.

<blink>tag blink </blink>sudah tidak didukung,

namun tag marquee masih ditampilkan oleh web browser

seperti berikut ini:

<marquee>Learn web programming in duniailkom</marquee>

</body>

</html>

1 komentar:

Unknown29 Februari 2020 pukul 23.41
kebetulan banget saya lagi cari pembahasa tentang ini terimakasih ya gan sudh membuat artikel ini ..dgn artikel ini sangat memudahkan saya untuk belajar pemrograman web .terus membuat artikel yang lainnya ya gan .suka saya dengan artikelnya .perkenalkan nama saya indah lestari websaite kampus saya https://www.atmaluhur.ac.id
BalasHapus
Balasan

Tambahkan komentar

Minggu, 26 April 2015

Tutorial Belajar Format Text HTML

Sebelum membahas tag-tag yang berkaitan dengan text, dalam tutorial ini saya ingin menjelaskan tentang 2 jenis tipe elemen atau 2 jenis tipe tag di dalam HTML, yakni block element dan inline element serta perbedaan keduanya.

Merubah format text seperti membuat huruf miring, merupakan hal biasa yang kita lakukan dalam aplikasi text processing, misalnya Microsoft Word. Dalam tutorial kali ini, kita akan membahas Cara Membuat Huruf Miring dalam HTML dengan tag <i> dan <em>.

Tag <i> Untuk Membuat Huruf Miring dalam HTML

Tag <em> Untuk Stresses Emphasis Text HTML

Tag <b> dan <strong> Untuk Membuat Huruf Tebal dalam HTML

Tag <u> untuk Penulisan Text dengan Garis Bawah

Tag <ins> untuk Penulisan Text dengan Garis Bawah

Tag <s> untuk Penulisan Strikethrough dalam HTML

Tag <del> untuk Text yang di Koreksi

Tag <sup> Untuk Membuat Text Superscript

Tag <sub> untuk membuat text Subscript

Tag <blockquote> Untuk Membuat Kutipan Panjang HTML

Tag <q> Untuk Membuat Kutipan Pendek HTML

Tag <pre> Untuk Membuat Preformatted Text HTML

Tag <code> untuk Penulisan Kode

Tag <bdo> untuk Merubah Arah Text HTML

Tag <samp> untuk membuat Program Sample

Tag <kbd> untuk Penulisan Keyboard, dan tag <var> untuk Variabel

Cara Memasukkan Karakter Khusus ke dalam HTML

Tabel Karakter Khusus dalam HTML

Tag <abbr> untuk Penulisan Singkatan dalam HTML

Tag <cite> untuk Membuat Sumber Referensi

Tag <dfn> Untuk Menandai Defenisi Kata

Tag <small> untuk Membuat Ukuran Huruf Kecil

1 komentar: