HTML Tutorials : Formatting Teks #2

HTML Tutorials : Formatting Teks #2

Thumbnail HTML Tutorials : Formatting Teks #2
Pada tutorial sebelumnya kita telah membahas HTML Tutorials : Formatting Teks #1. Setelah kita mengetahui penggunaan tag bold, hingga subscript dan superscript. Di tutorial kali ini kita akan membahas tag-tag lainnya dalam pemformatan teks pada HTML Tutorials : Formatting Teks #2.
------------------------------------------------------------------------------------------------

Tag Big dan Tag Small

Tag Big digunakan untuk menampilkan teks dengan ukuran yang lebih besar dari tag yang lain. Tag ini dapat dituliskan dengan tag pembuka <big> dan ditutup dengan penutup </big>. Penggunaan tag big tidak didukung dalam HTML 5, Anda dianjurkan untuk menggunakannya dalam CSS. Meskipun begitu, tag ini akan tetap berjalan baik dalam HTML 5 jika Anda menggunakannya.
Contoh :
What happen with the <big>bigger words</big> here?
Tag Small memiliki fungsi yang berlawanan dengan tag big. Tag small akan menampilkan elements yang berada dalam tag pembuka <small> dan penutup </small> menjadi memiliki format ukuran teks yang lebih kecil.
Contoh :
Why <small>this words</small> become the small one?
------------------------------------------------------------------------------------------------

Tag Strike dan Tag Deleted

Tag Strike digunakan untuk menampilkan tulisan dengan coretan. Biasanya, tag ini digunakan untuk menandai tulisan yang salah. Penulisan tag strike diambil dari singkatannya, yaitu “s”. Elements yang berada di antara tag pembuka <s> dan penutup </s> akan menjadi teks dengan coretan. mahaamesha.com
Contoh :
Lawan tersulit untuk dikalahkan bagimu adalah <s>malas</s> dirimu sendiri.
Tag Deleted atau sering dikenal dengan del memiliki fungsi yang sama dengan tag strike. Tag del juga akan menampilkan tulisan dengan coretan di tengahnya. Tag ini dituliskan dengan tag pembuka <del> dan penutup </del>. Tag del biasanya digunakan bersamaan dengan tag ins.
Contoh :
Banyak orang bisa kursus <del>berbayar</del> <ins>gratis</ins> belajar web programming di sini.
------------------------------------------------------------------------------------------------

Tag Mark

Suatu tulisan akan lebih menarik dan lebih mudah dibaca ketika kita memberikan sentuhan yang berbeda di dalamnya. Apalagi dalam tulisan yang lebih dari 2.000 kata. Kita akan akan lebih nyaman membacanya ketika ada tulisan dengan tanda khusus yang menandakan tulisan itu penting. Anda pasti pernah menggunakan stabilo ketika menandai hal penting di catatan Anda bukan? Ini seperti dengan tag mark.
Tag Mark digunakan untuk memberikan warna pada latar atau background tulisan. Pemberian warna latar seperti ini lebih dikenal dengan highlight color. Web browser akan menampilkan highlight dengan warna kuning.
Contoh :
Mark tag defines <mark>marked / highlight</mark> text.
------------------------------------------------------------------------------------------------

Tag Pre-Formated

Tag pre dituliskan dengan tag awalan <pre> dan akhiran </pre>. Tag pre Ini mengindikasikan pre-formated text dan digunakan untuk menampilkan teks dengan format yang tidak biasa. Web browser akan menampilkan elements pre tag dalam posisi yang sama ketika kita menuliskannya pada editor. Selain itu, elements dari tag pre ditampilkan tanpa wrap text oleh web browser.
mahaamesha.com
Contoh Tanpa Tag Pre :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
<title>Ma Haamesha | &lt;pre&gt;</title>
</head>
<body>
<h1>Tanpa Tag Pre</h1>
T
 A
  G
       P
         R
            E
              F
                O
                   R
                M
              A
            T
          E
       D
</body>
</html>
Contoh dengan Tag Pre :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
<head>
<title>Ma Haamesha | &lt;pre&gt;</title>
</head>
<body>
<h1>Dengan Tag Pre</h1>
<pre>
T
 A
  G
       P
         R
            E
              F
                O
                   R
                M
              A
            T
          E
       D
</pre>
</body>
</html>

------------------------------------------------------------------------------------------------

Summary

Pada tutorial kali ini, kita telah belajar 6 tag baru :
- Tag Big                <big>…</big>
- Tag Small            <small>…</small>
- Tag Strike            <s>…</s>
- Tag Deleted          <del>…</del>
- Tag Marked          <mark>…</mark>
- Tag Preformated   <pre>…</pre>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
          <title>Ma Haamesha | &lt;Format Teks #2&gt;</title>
<body>
Teks ini menggunakan <big>tag big</big><br>
Teks ini menggunakan <small>tag small</small><br>
Teks ini menggunakan <s>tag deleted</s><br>
Teks ini menggunakan <del>tag deleted</del><br>
Teks ini menggunakan <mark>tag marked</mark><br>
<pre>
                                    t    pre
Teks ini menggunakan  a    format
                                         g    ted
</pre>
</body>
</html>

------------------------------------------------------------------------------------------------
Semoga tutorial kali ini bermanfaat bagi Anda semua. Jika Anda merasa demikian, Anda bisa mendukung saya dengan memberi tanggapan dan saran yang membangun mengenai tutorial atau blog ini melalui kolom komentar. Ikuti terus tutorial-tutorial lainnya. Pada tutorial berikutnya, kita akan membahas mengenai tag formatting teks yang lain di HTML Tutorials : Formatting Teks #3.


Created by mahaamesha :}

Comments