Tutorial HTML terusan 9 ~ infoku.net

Setelah mempelajari Tutorial HTML terusan 8 sekarang kita akanlanjutkan ke Tutorial HTML terusan 9.
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 infoku.net</title>
</head>

<body>
<h2>Saya sedang belajar Block Element HTML</h2>
<h4>Di infoku.net</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 infoku.net</title>
</head>

<body>
Saya sedang belajar Inline Element HTML 
Di infoku.net 
Tag i dan em adalah tag dengan tipe inline
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.

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

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

<body>
<h3>Saya sedang belajar HTML di infoku.net</h3>
HTML adalah singkatan dari Hypertext Markup Language
</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 infoku.net</title>
</head>

<body>
Saya sedang belajar HTML di infoku.net
HTML adalah singkatan dari Hypertext Markup Language
</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;

Tag <b> dan <strong> Untuk Membuat Huruf Tebal dalam HTML
Jika anda telah membaca tutorial text HTML sebelumnya, yakni tentang tag <i> dan tag <em>, maka kejadian serupa juga dialami oleh tag <b> dan tag <strong>.

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

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

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

Pada saat HTML5 keluar, tag <b> 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 <b> dan tag <strong>:

<!DOCTYPE html><html>

<head>

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

</head>

<body>

<p>Saya sedang belajar di <b>infoku.net</b></p>

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

</body>

</html>

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

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

font-weight: bold;

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

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

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.