Tutorial HTML terusan 10

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

Tag <u> untuk Penulisan Text dengan Garis Bawah

Tag <u> adalah singkatan dari underline, atau garis bawah. Tag ini digunakan untuk membuat karakter text dengan garis bawah. Sama seperti tag <i> dan <b>, tag <u> tidak memiliki tujuan apa-apa dan lebih kepada tampilan dari text.
Tag <u> masuk kedalam tipe tag inline, yang akan mengikuti alur text yang ada.

Berikut adalah contoh cara penulisan dan penggunaan tag <u> 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><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 infoku.net</title>
</head>

<body>
<h3>Saya sedang belajar HTML di infoku.net</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 <u> 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;

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

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

<body>
<h3>Saya sedang belajar HTML di infoku.net</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;

Tag <sup> Untuk Membuat Text Superscript

Tag <sup> adalah singkatan dari superscript, yaitu sebutan untuk karakter kecil diatas text. Umumnya superscript digunakan didalam persamaan matematika seperti dalam pembuatan pangkat. Dalam angka 32 , angka 2 adalah superscript. Penulisan HTML untuk hal ini adalah 3<sup>2</sup>.
Tag <sup> masuk ke dalam tipe tag inline, yang akan mengikuti alur text yang ada.

Berikut adalah contoh cara penulisan dan penggunaan tag <sub> 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>3<sup>2</sup> + 5<sup>3</sup> = 9 + 125 = 134</p>
</body>

</html>

Tag <sub> untuk membuat text Subscript

Tag <sub> 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 H2O. H2O di dalam tag HTML ditulis dengan H<sub>2</sub>O.

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

Berikut adalah contoh cara penulisan dan penggunaan tag <sub> 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>Dalam rumus kimianya, air ditulis sebagai H<sub>2</sub>O</p>
</body>

</html>
Untuk membuat efek yang sama seperti tag <sub> dan tag <sup> 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%;

Baik tag <sup> maupun tag <sup> kemungkinan akan jarang kita gunakan, kecuali jika anda membuat artikel matematika atau kimia. Untuk persamaa matematika yang cukup rumit, harus menggunakan bahasa pemrograman web lain seperti JavaScript dan menggunakan notasi LaTeX.

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




Previous
Next Post »

silahkan berkomentar bila ada yang ingin di tanyakan . ConversionConversion EmoticonEmoticon