Teks yang ada dalam dokumen web dapat diformat secara khusus untuk menunjukan perbedaan dan penekanan terhadap isi dan maksud dari teks tersebut. Pembedaan ditampilkan dalam bentuk huruf tebal (bold), miring (italic), digaris bawahi (underline), dan lain-lain. HTML menggunakan tag seperti <b> dan <i> untuk output format, seperti teks tebal atau miring. Ini disebut format tag HTML.
1. Pemformatan Teks
Contoh bagaimana memformat teks dalam sebuah dokumen HTML :
| <html> <body> <p><b>Text ini ditebalkan</b></p> <p><strong>Text ini tebal</strong></p> <p><big>Text ini besar</big></p> <p><em>Text ini emphasize</em></p> <p><i>Text ini miring</i></p> <p><small>Text ini kecil</small></p> <p>Text ini<sub> subscript</sub> </p> <p>Text ini<sup>superscript</sup></p> </body> </html> |
Tampilannya adalah sebagai berikut :
2. Teks Preformat
Contoh bagaimana mengontrol line break dan spasi dengan tag pre :
| <html> <body> <pre> Ini adalah text terformat yang mengontrol line break dan spasi </pre> <p>Menampilkan kode komputer menggunakan teks preformat</p> <pre> for i = 1 to 10 print i next i </pre> </body> </html> |
Tampilannya adalah sebagai berikut :
3. Tag "Komputer Output
Contoh bagaimana tag "Komputer Output" berbeda ditampilan :
| <html> <body> <code>Computer code</code> <br /> <kbd>Keyboard input</kbd> <br /> <tt>Teletype text</tt> <br /> <samp>Sample text</samp> <br /> <var>Computer variable</var> <br /> <p><b>Catatan:</b> Tag ini sering digunakan untuk layar komputer / kode pemrograman.</p> </body> </html> |
Tampilannya adalah sebagai berikut :
4. Address / Alamat
Contoh bagaimana mendefinisikan informasi kontak untuk penulis / pemilik website :
| <html> <body> <address> Toko Handphone Winangun<br /> <a href="mailto:id@example.com">Email kami</a><br /> Alamat: Jl. Citraland Winangun 1 MANADO<br /> Telp: 0431 3393391 </address> </body> </html> |
Tampilannya adalah sebagai berikut :
5. Singkatan dan Acronim
Contoh bagaimana menangani singkatan dan akronim :
| <html> <body> <p><acronym title="World Wide Web">WWW</acronym></p> <p><abbr title="Hypertext Markup Language"> HTML</abbr>:</p> <p>Atribut judul digunakan untuk menunjukkan versi-dieja ketika memegang pointer mouse pada akronim atau singkatan.</p> </body> </html> |
Tampilannya adalah sebagai berikut :
6. Arah Teks
Contoh bagaimana mengubah arah teks :
| <html> <body> <p> Jika browser Anda mendukung bi-directional override (bdo), baris berikutnya akan ditulis dari kanan ke kiri (rtl): </p> <bdo dir="rtl"> Berikut adalah beberapa teks Ibrani </bdo> </body> </html> |
Tampilannya adalah sebagai berikut :
7. Quotation / Kutipan
Contoh bagaimana menangani kutipan panjang dan pendek :
| <html> <body> Sebuah kutipan yang panjang: <blockquote> Ini adalah kutipan panjang. Ini adalah kutipan panjang. Ini adalah kutipan panjang. Ini adalah kutipan panjang. Ini adalah kutipan panjang.Ini adalah kutipan panjang. Ini adalah kutipan panjang. Ini adalah kutipan panjang. Ini adalah kutipan panjang. Ini adalah kutipan panjang. </blockquote> <p><b>Note:</b> Menyisipkan Browser putih spasi sebelum dan sesudah elemen blockquote. Hal ini juga menyisipkan margin.</p> Sebuah kutipan yang pendek: <q>Ini adalah kutipan pendek</q> <p><b>Note:</b> Browser menyisipkan tanda kutip kutipan pendek.</p> </body> </html> |
Tampilannya adalah sebagai berikut :
8. Teks yang dihapus dan disisipkan
Contoh bagaimana untuk menandai teks yang dihapus dan disisipkan :
| <html> <body> <p>Warna favorit saya adalah <del>biru</del> <ins>merah</ins>!</p> <p>Perhatikan bahwa browser akan strikethrough teks dihapus dan menggaris bawahi teks dimasukkan.</p> </body> </html> |
Tampilannya adalah sebagai berikut :
0 comments:
Post a Comment