Tutorial HTML terusan 12 ~ infoku.net

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

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 infoku.net</title>
</head>

<body>
<h3>Saya sedang belajar HTML di infoku,net</h3>
<p>HTML adalah singkatan dari 
<samp>Hypertext Markup           Language</samp></p>
</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 font monospace.

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 infoku.net</title>
</head>

<body>
<h3>Saya sedang belajar HTML di infoku.net</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‘ seperti screen reader yang akan menyebutkan bagian tag tertentu seperti ketiga tag ini secara berbeda.

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 infoku.net</title>
</head>
 
<body>
<h3>Saya sedang belajar HTML di &copy; infoku.net &#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:

infoku&nbsp;net

Kata tersebut akan ditampilkan web browser menjadi infoku net (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.

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 infoku.net</title>

</head>

<body>

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

<p>

<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

</p>

</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 infoku.net</title>

</head>

<body>

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

<p>

HTML adalah dasar dari semua halaman web di internet. 

Jika anda ingin mempelajari cara membuat website,

hal pertama yang harus dipelajari adalah HTML

</p>

<p>Referensi yang saya gunakan untuk tutorial ini adalah 

<cite>Learning Web Design</cite>,

dan <cite>HTML Ultimate Reference</cite>

</p>

</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 infoku.net</title>

</head>

<body>

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

<p>

HTML adalah dasar dari semua halaman web di internet. 

Jika anda ingin mempelajari cara membuat website,

hal pertama yang harus dipelajari adalah HTML

</p>

<p>

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

</p>

</p>

</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 infoku.net/title>

</head>

<body>

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

<p>

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>

<p>

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

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 font monospace. 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 infoku.net</title>
</head>
<body>

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


<acronym title="HyperText Markup Language">HTML<acronym>
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 infoku.net</marquee>

<center>Copyright infoku.net 2017</center>
</body>
</html>

Sekian dulu penjelasan dari saya,semoga jelas,kita lanjut lagi Dalam tutorial selanjutnya di Tutorial HTML terusan 13.

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.