Kamis, 23 Juni 2016

Mengatur Style Teks

Nani!! 07.12

Pertama kita akan belajar mengenai bagaimana membuat style dari teks yang memungkinkan kalian membuat efek tebal, garis miring, garis bawah, monospace, dan coret. Efek-efek ini hampir semuanya diakomodasi oleh semua browser modern.

1. Untuk membuat efek tebal, digunakan tag <b> yang merupakan singkatan bold.
2. Untuk membuat efek garis miring, digunakan tag <i> yang merupakan singkatan italic.
3. untuk membuat garis bawah, digunakan tag tag <u> yang merupakan singkatan dari underline.
4. Untuk membuat efek monospace, digunakan tag <tt> yang merupakan singkatan dari typewriter text.
5. Untuk membuat efek coret, digunakan tag <strike>, yang artinya coret.

Sebenarnya ada beberapa efek style lain dari pemrograman HTML namun apakah style tersebut dikenali atau tidak, akan tergantung kepada browsernya. Akan tetapi, browser modern umumnya mendukung 5 efek dasar di atas. berikut ini contoh kode yang bisa kalian buat untuk mengatur style pada teks :

<html>
<head>
<title>pemformatan style teks</title>
</head>
<body>
<h1>Lirik Lagu </h1>
<p>
<b> Wherever you are, I'll always make you smile </b>
</p>
<p>
<i> Wherever you are, I'm always by your side </i>
</p>
<p>
<u> Whatever you say, kimi wo omou kimochi </u>
</p>
<p>
<tt> I promise you "forever" right now </tt>
</p>
<p>
<strike> I don't need a reason </strike>
</p>
</body>
</html>

hasilnya akan seperti ini jika di lihat di browser :

Untuk mengkombinasikan format-format teks di atas, kalian tinggal meletakkan tag-tag tersebut pada teks yang kalianm inginkan, misalnya untuk membuat format garis miring, tebal, dan coret secara bersamaan, kalian dapat menggunakan kode berikut:

<b><i><strike> tulisan ini mengalami multi format </strike></i></b>

Selain 5 format di atas, ada juga beberapa format tambahan yang masing-masing memiliki fungsi berbeda. Perama adalah <pre> yang berfungsi menangani format seperti spasi, tab, dan enter yang sebelumnya tidak di akomodasikan di browser.

berikut ini contoh ilustrasi penggunaan tag <pre> yang merupakan singakatan dari performatting;

<html>
<head>
<title>Pemformatan Style teks preformatting</title>
</head>
<body>
<h1>Contoh sebelum pre </h1>
ini baris pertama
ini baris kedua
</body>
</html>

hasilnya akan seperti ini :

Pada gambar di atas, walaupun di source kode tulisan "ini baris pertama" berbeda baris dengan tulisan "ini baris kedua" tetapi di browser terlihat kedua baris tersebut digabung. Itu karena tidak diberi format <pre>. Jika diberi <pre>, tampilan akan terlihat seperti di kode sumbernya, jadi, jika tab atau enter ingin kalian terapkan pada tampilan web, berikut ini kode di bagian body jika diberi <pre> :

<html>
<head>
<title>Pemformatan Style teks preformatting</title>
</head>
<body>
<h1>Contoh setelah pre </h1>
<pre>
ini baris pertama
ini baris kedua
</pre>
</body>
</html>

Setelah menggunakan <pre> tampilan di halaman web akan sesuai dengan yang ada di source code-nya. Akan tetapi, bentuk tulisan menjadi seperti tulisan monospace.