Rabu, 23 Januari 2013

Perfomatan Text HTML






Teks dalam dokumen web dapat diformat secara khusus untuk menunjukkan perbedaan dan penekanan terhadap isi dan maksud dari teks tersebut. Perbedaan ditampilkan dalam bentuk huruf tebal, miring, digarisbawahi,dll.

3.1 Pemformatan Teks • Menebalkan huruf (bold) • Memiringkan huruf (italic) • Digarisbawahi • Mengecilkan huruf • Superscript • Subscript

Contoh – Listing 3.1: formatteks.html <html> <head> <title>Format Teks</title> </head> <body> <p><b>Tulisan ini ditebalkan (bold)</b></p> <p><strong>Tulisan ini ditebalkan (strong)</strong> </p> <p><em>Tulisan ini miring (emphasize) </em></p> <p><big>Tulisan ini besar (big)</big></p> <p><i>Tulisan ini miring (italic) </i></p> <p>Tulisan ini <sub>subscript</sub> </p> <p>Tulisan ini <sup>superscript</sup></p> </body> </html>

Gambar 3.1. Contoh formatteks.html

Modul Ajar Disain Web Politeknik Elektronika Negeri Surabaya (PENS)

3.2 Teks Preformat Tag <pre> dan </pre>dapat kita gunakan untuk menampilkan sesuai dengan dokumen web tersebut dalam editor teks. Contoh – Listing 3.2 : pre.html <html> <head> <title>Tag Preformatted</title> </head> <body> <pre> This section provides a brief overview of the menus in Dreamweaver. The File menu and Edit menu contain the standard menu items for File and Edit. menus, such as New, Open, Save, Save All, Cut, Copy, Paste, Undo, and Redo </pre> <pre> Ini adalah preformatted text. Menampilkan spasi Dan line break apa adanya. </pre> <p>Tag PRE cocok digunakan untuk menampilkan kode bahasa pemrograman komputer :</p> <pre> for i = 1 to 10 print i next i </pre> </body> </html>

Modul Ajar Disain Web Politeknik Elektronika Negeri Surabaya (PENS)

Gambar 3.2. Contoh pre

3.3 Quotation Tag <blockquote> digunakan untuk membuat sebagian teks yang dikutip sebagai suatu blok sendiri. Kebanyakan browser umumnya menggunakan margin untuk kutipan teks tadi untuk memisahkan dari teks yang mengelilinginya. Contoh – Listing 3.3 : quotation.html <html> <head> <title>quotation</title> </head> <body> tulisan ini BUKAN quotation <blockquote> tulisan ini adalah quotation <br> tulisan ini adalah quotation <br> tulisan ini adalah quotation <br> </blockquote> </body> </html>

Gambar 3.3. Contoh qoutation

3.4 Tag-tag Pemformatan Tag Awal Keterangan <b> Mendefinisikan teks yang ditebalkan <big> Mendefinisikan teks yang besar ukurannya <em> Mendefinisikan teks yang ditekankan <i> Mendefinisikan teks yang dimiringkan – italic <small> Mendefinisikan teks yang dikecilkan ukurannya

Modul Ajar Disain Web Politeknik Elektronika Negeri Surabaya (PENS)

<strong> Mendefinisikan teks yang ditebalkan <sub> Mendefinisikan teks yang dijaikan subscript <sup> Mendefinisikan teks yang superscript <pre> Mendefinisikan teks preformatted <blockquote> Mendefinisikan quotation yang panjang.

3.5 Toolbar Dreamweaver untuk pemformatan teks

Gambar 3.4. Toolbar format teks

Keterangan : • B : Bold • I : Italic • S : Strong • Em : Emphasize • [“”] : Blockquote • PRE : Pre

Tidak ada komentar:

Poskan Komentar