. .

WEB DESIGN : HTML TEXT FORMATING Bold, Italic , Underline Dan Sebagainya.

Posted by CHRISTIANTO D,WIBOWO | D3MI-2016 STMIK BUMI GORA On Minggu, Desember 25, 2016 No comments

WEB DESIGN : HTML TEXT Formating Bold, Italic Dan Sebagainya. Sebelum lanjutkan pembelajaran ini, perlu diketahui bacalah dulu artikel pembelajaran sebelumnya dan kuasai pengenalan pengetahuan dasar di :
WEB PROGRAMMING
Terimakasih pada sumber pembelajaran ini :
Kita langsung praktek, buka/buat file draftwebdesign.html, file ini kita gunakan untuk praktek contoh-contoh HTML yang sederhana dan praktis, jadi kalaupun tidak terecord, bukan menjadi masalah besar, hanya saja sangat dianjurkan untuk menyimpan semua file contoh agar suatu saat bisa jadi refrensi.

Kembali ke HTML TEXT Formating, kita buat contoh :
<!DOCTYPE html>
<html>
<body>

<p><b>Kalimat tebal - Bold</b></p>
<p><i>Kalimat miring - Italic</i></p>
<p>Kata ini<sub> subscript</sub> dan <sup>superscript</sup></p>

</body>
</html>
HTML Format Elements
HTML juga mendefinisikan elemen khusus untuk mendefinisikan teks dengan makna khusus. HTML menggunakan unsur-unsur seperti <b> dan <i> untuk memformat output, seperti teks tebal atau miring.
Elemen format yang dirancang untuk menampilkan jenis khusus dari teks:
  • <B> - teks Bold
  • <I> - teks Miring
  • <Strong> - teks Penting
  • <Em> - Ditekankan teks (emphasis)
  • <Mark> - Ditandai teks
  • <Small> - teks Kecil
  • <Del> - teks Dihapus
  • <Ins> - Dimasukkan teks (disisipkan)
  • <Sub> - teks Subscript
  • <Sup> - teks Superscript
HTML <b>
HTML <b> mendefinisikan teks tebal, tanpa kepentingan tambahan.
<!DOCTYPE html>
<html>
<body>

<p>text ini normal.</p>

<p><b>text ini tebal.</b></p>

</body>
</html>

OUTPUT           :
text ini normal.

text ini tebal.
HTML <i>
HTML <i> mendefinisikan teks miring, tanpa kepentingan tambahan.
<!DOCTYPE html>
<html>
<body>

<p>text ini normal.</p>

<p><i>text ini miring.</i></p>

</body>
</html>
OUTPUT           :
text ini normal.


text ini miring.
HTML <strong>
HTML <strong> mendefinisikan text yang kuat, dengan menambahkan semantik kepentingan "strong".
<!DOCTYPE html>
<html>
<body>

<p>text ini normal.</p>

<p><strong>text ini strong.</strong></p>

</body>
</html>
OUTPUT           :
text ini normal.

text ini strong.
Perbedaan Elemen <strong> dan <b>, kedua-nya membuat teks tebal. Dalam hal presentasi mereka identik. Mengapa memiliki dua elemen yang berbeda melakukan hal yang sama? kedua-nya mungkin terlihat sama dengan manusia, tetapi bagi  web crawlers atau bots - itu adalah sesuatu yang sangat berbeda. Ketika pencarian spider mesin (search engine) dan menganalisa halaman, teks dalam <strong> tag dianggap penting, sedangkan teks dalam <b> tag tidak.
PENTING menambah wawasan :Sebuah crawler Web adalah bot Internet yang sistematis menelusuri dengan World Wide Web , biasanya untuk tujuan Web pengindeksan ( web spidering ).
Mesin pencari web dan beberapa situs lain menggunakan web crawling atau perangkat lunak spidering untuk memperbarui web konten mereka atau indeks konten situs web lain, 'Web crawler dapat menyalin semua halaman yang mereka kunjungi untuk diproses kemudian oleh mesin pencari yang mengindeks halaman download sehingga pengguna dapat mencari lebih efisien.
Crawler mengkonsumsi sumber daya pada sistem mereka kunjungi dan sering mengunjungi situs tanpa persetujuan diam-diam (spy). Isu jadwal, beban, dan "kesopanan" ikut bermain ketika koleksi besar halaman yang diakses. Ada mekanisme untuk situs publik tidak ingin dijelajahi untuk membuat ini dikenal sebagai agen crawler. Misalnya, termasuk robots.txt file yang dapat meminta bots ke indeks hanya bagian dari situs , atau tidak sama sekali.
Karena jumlah halaman di internet sangat besar, bahkan crawler terbesar pun kesulitan membuat indeks lengkap. Untuk itu mesin pencari alasan yang buruk untuk memberikan hasil pencarian yang relevan di tahun-tahun awal dari World Wide Web, sebelum tahun 2000. Hal ini meningkat pesat oleh mesin pencari modern, hasil yang sangat baik saat ini diberikan langsung. Crawler dapat memvalidasi hyperlink dan HTML code. Mereka juga dapat digunakan untuk Scraping web (lihat juga pemrograman berbasis data ).Ⓒ Wikipedia 
HTML <em>
HTML <em> elemen mendefinisikan menekankan teks, (emphasis) dengan menambahkan semantik kepentingan.
<!DOCTYPE html>
<html>
<body>

<p>text ini normal</p>

<p><em>text ini emphasized.</em></p>

</body>
</html>
OUTPUT           :

text ini normal



text ini emphasized.
Sama dengan perbedaan antara HTML <strong> dan <b>, HTML <em> dan <i> juga kelihatan seperti sama, tetapi berbeda kepentingan dalam web crawlers dan bots.
HTML <small> Elemen
HTML <small> elemen mendefinisikan teks yang lebih kecil:
<!DOCTYPE html>
<html>
<body>

<h2>HTML <small>lebih kecil</small> Formatting</h2>

</body>
</html>
OUTPUT           :

HTML lebih kecil Formatting
HTML <mark>
HTML <mark> elemen mendefinisikan ditandai atau teks yang disorot:
<!DOCTYPE html>
<html>
<body>

<h2>HTML <mark>DITANDAI</mark> Formatting</h2>

</body>
</html>
OUTPUT           :

HTML DITANDAI Formatting                                                                                                   
HTML <del> Elemen
HTML <del> mendefinisikan teks dipindahkan (/dihapus).
<!DOCTYPE html>
<html>
<body>

<p>elemen del diartikan menghapus (pindahkan) text.</p>

<p>Warna favoritku <del>BIRU</del> dan MERAH.</p>

</body>
</html>

OUTPUT           :
elemen del diartikan menghapus (pindahkan) text.


Warna favoritku BIRU dan MERAH.
HTML <ins> Elemen
HTML <ins> elemen mendefinisikan teks dimasukkan (ditambahkan/disisipkan, hasilnya mirip dengan HTML <u> Underline).
<!DOCTYPE html>
<html>
<body>

<p>Elemen ins mewakili text yang disisipkan (ditambah).</p>

<p>Warna favorite Saya <ins>WARNA</ins> MERAH.</p>

</body>
</html>

OUTPUT           :
Elemen ins mewakili text yang disisipkan (ditambah).


Warna favorite Saya WARNA MERAH.

HTML <sup> Elemen
HTML <sup> mendefinisikan teks superscript.
<!DOCTYPE html>
<html>
<body>

<p>Ini adalah kalimat <sup>superscripted</sup> text.</p>

</body>
</html>

OUTPUT           :
Ini adalah kalimat superscripted text.
HTML <sub> Elemen
HTML <sub> mendefinisikan teks subscript.
<!DOCTYPE html>
<html>
<body>

<p>Ini adalah kalimat <sub>subscripted</sub> text.</p>

</body>
</html>

OUTPUT           :
Ini adalah kalimat subscripted text.

Sekarang buatlah HTML file dengan artikel berparagraph <p> dan break line <br> dan kombinasikan dengan elemen-elemen text HTML formating yang sudah kita pelajari diatas.
<!DOCTYPE html>
<html>
<body>
<p><u>DRAFT <sup>WEB DESIGN</sup> <sub>HTML ELEMEN TEXT</sub> FORMATING</u></p><br>
<p>This is a <sub>NEW</sub> paragraph.<br>
<p><b>BAKTI KEPADA ORANGTUA.</b><br>
<p>Di dunia ini sering dijumpai <strong>anak-anak yang tidak berbakti kepada orangtuanya</strong>. Mereka sering menyalahkan orangtuanya karena mereka menganggap bahwa orangtuanya tidak memberikan cinta kasih dan perhatian yang penuh kepada mereka. Mereka selalu menuntut cinta kasih dan perhatian dari orangtuanya karena mereka menganggap bahwa cinta kasih dan perhatian itu wajib diberikan oleh orangtua kepada mereka. <i>Mereka tidak menyadari bahwa anak yang baik seyogyanya tidak menuntut cinta kasih dan perhatian, tetapi melakukan kewajibannya dengan baik.</i><br>
<p>Di dunia ini sering dijumpai <strong>anak-anak yang selalu menuntut agar orangtuanya dapat menjadi manusia yang sempurna dalam berbagai hal</strong>, seperti <b>Ariya Puggala</b> (makhluk suci). Anak-anak selalu menuntut agar orangtuanya berkelakuan baik dan bertutur kata ramah, tanpa pernah mengoreksi dirinya sendiri. Anak-anak selalu melihat sifat-sifat buruk yang dimilikinya oleh orangtuanya, tanpa pernah menyadari bahwa orangtuanya yang belum mencapai kesucian itu masih dapat berbuat salah. Anak-anak selalu mencela dan membenci orangtuanya jika orangtuanya berbuat salah. Tanpa pernah berusaha memberitahu kesalahan orangtuanya dengan cara yang bijaksana. Anak-anak tidak pernah menyadari bahwa orangtuanya dapat berwatak keras itu sesungguhnya karena pengalaman masa lalunya. Anak-anak tidak pernah menyadari bahwa sesungguhnya tidak mudah untuk merubah sifat dan watak orangtuanya yang keras itu. Anak-anak tidak pernah menyadari bahwa jika mereka tidak dapat merubah <em>sifat dan watak</em> orangtuanya yang keras itu, maka seharusnyalah mereka merubah pikirannya sendiri..<br>
<p>Di dunia ini sering dijumpai anak-anak yang tidak memperdulikan kesejahteraan, kebahagiaan, dan kesehatan orangtuanya. Mereka tidak pernah menanyakan apakah orangtuanya tidak menderita panas atau dingin, lapar atau haus. Mereka tidak pernah menanyakan, apakah orangtuanya dapat tidur nyenyak dan beristirahat dengan tenang. Mereka tidak pernah menanyakan apakah orangtuanya tidak menderita sakit apapun. Mereka tidak pernah melayani orangtuanya dengan baik. Mereka tidak pernah memperhatikan kesusahan orangtuanya, Mereka tidak pernah mengetahui bahwa orangtuanya sering menangis, meratap, dan berkeluh kesah.<br>
<p>Di dunia ini sering dijumpai anak-anak yang melupakan kebaikan orangtuanya. Mereka tidak menyadari pengorbanan yang amat besar yang telah diberikan oleh orangtuanya kepada mereka. Mereka tidak tahu berterima kasih kepada orangtuanya. Mereka tidak berbakti kepada orangtuanya. Mereka tidak berusaha menghibur dan membahagiakan orangtuanya. Mereka tidak berusaha memenuhi keinginan-keinginan orangtuanya. Mereka baru menyadari semua itu ketika orangtuanya sudah meninggal dunia. Mereka baru menyesali semua sikap dan tingkah lakunya sebagai anak yang tidak berbakti. Penyesalan memang selalu datang terlambat.<br>
<p><b><mark>Dalam kitab suci Dhammapada <sup>Bab V ayat 67</sup>, Sang Buddha bersabda,.</mark><b><br>
<p>“Bilamana suatu perbuatan setelah selesai dilakukan membuat seseorang menyesal, maka perbuatan itu tidak baik. Orang itu akan menerima akibat perbuatannya dengan ratap tangis dan wajah yang bergelimang air mata...!<br>
<p><del>This is a paragraph.</de><br>

</body>
</html>

Walaupun semua kode HTML bersarang ini (nested) sedikit berantakan, namun. Solusi yang modern adalah dengan menggunakan sesuatu yang disebut Cascading Stylesheet (CSS). Menggunakan Stylesheet memungkinkan kita untuk melakukan semua format teks di bagian HEAD, atau lebih baik lagi dalam sebuah file eksternal. Nanti kitaa akan pelajari bagaimana melakukan itu semua.
Dalam pembelajaran berikutnya, kita akan pelajari dulu HTML List.

0 komentar:

Posting Komentar