27 September 2016

Pemformatan Teks

Berikut ini adalah contoh yang dihasilkan pemformatan teks pada dokumen web:

HTML menggunakan tag seperti <b> dan <i> untuk memformat output, seperti teks tebal atau miring.

Tag HTML ini disebut tag format, selengkapnya dalam tabel berikut :
Tag HTML Pemformatan Teks
Tag      Deskripsi 
<b>      Mendefinisikan teks tebal
<em>     Mendefinisikan teks menekankan 
<i>      Mendefinisikan teks miring
<small>  Mendefinisikan teks kecil 
<strong> Mendefinisikan teks penting
<sub>    Mendefinisikan teks di bawah garis 
<sup>    Mendefinisikan teks di atas garis
<ins>    Mendefinisikan teks sisipan 
<del>    Mendefinisikan teks dicoret
<mark>   Mendefinisikan teks ditandai

Tag HTML “keluaran komputer”
Tag      Deskripsi 
<code>   Mendefinisikan teks kode komputer
<kbd>    Mendefinisikan teks keyboard 
<samp>   Mendefinisikan teks contoh kode
<var>    Mendefinisikan teks variabel 
<pre>    Mendefinisikan teks terformat

HTML Citations, Quotations, and Definition Tags
Tag          Deskripsi 
<abbr>       Mendefinisikan sebuah singkatan
<address>    Mendefinisikan alamat atau kontak informasi 
<bdo>        Mendefinisikan arah teks
<blockquote> Mendefinisikan bagian yang dikutip dari sumber lain 
<q>          Mendefinisikan sebuah kutipan pendek
<cite>       Mendefinisikan judul karya 
<dfn>        Mendefinisikan sebuah istilah definisi

Latihan
1. Format Teks
<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

2. Pre Format
<html>
<head>
<title>Preformat </title>
</head>
<body>
<h2>Daftar Harga Kopi:</h2>
<pre
Kopi Hitam..........3.000 
Kopi Putih..........4.000 
Kopi Susu...........3.500 
</pre
Harga sewaktu-waktu bisa berubah. 
</body
</html>

3. Pre Format
<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>

No comments:

Post a Comment

Popular Posts