Script HTML

Script HTML yang "Wajib" Diketahui para Blogger

Ini memang nggak ada kaitannya dengan topik blog saya, tapi berhubung saya nulis di blog maka tak ada salahnya saya memposting mengenai kiat-kiat menulis di blog. Para blogger tentunya sangat dimanjakan oleh tools yang disediakan provider blog dalam membuat tampilan dan memposting artikel, namun tidak ada salahnya untuk mengetahui script-script dasar html. Setidaknya Anda bisa memperapi tulisan Anda, atau pada tingkat lebih lanjut untuk mempercanggih tampilan dengan mengedit template, kalau mau. Berikut beberapa script html yang “wajib” diketahui oleh para blogger.

Pada dasarnya, script html berupa tag-tag dalam kurung lancip yang mengkodekan tampilan isi yang dibatasi oleh tag pembuka dan tag penutupnya. Jadi, perintah tag hanya akan berpengaruh pada isi yang berada di antara tag pembuka dan tag penutup. Tag pembuka berupa kode perintah diikuti deskripsi dan nilainya (kalau ada) dan tag penutup berupa garis miring diikuti kode perintah yang sama.

Font

Tag untuk font:

<font size=”x” face=”arial” style=”italic” color=””>tulisan</font>

Tag ringkas untuk style

<b>bold</b>

<i>italic</i>

<u>underline</u>

<s>strikethrought</s>

^{^superscript}

_{_subscript}

Dari contoh di atas diketahui font ialah tag untuk huruf, size, style dan color ialah deskripsi tag disertai nilainya dalam tanda kutip. Semua teks yang diapit tag bold, <b></b> hurufnya akan menjadi tebal, demikian juga pada style yang lainnya. Ukuran huruf dapat diisi 1 sampai 7, defaultnya adalah 3, kecuali terdapat settingan pada blog Anda. Warna dapat ditulis dalam bahasa Inggris untuk warna umum seperti “black”, “white”, “red”, “green”, “pink”, dan seterusnya. Untuk warna yang lebih beragam, gunakan kode heksadesimal tiga warna dasar cahaya yaitu #RRGGYY. RR (red) menandakan intensitas warna merah, GG hijau, dan YY kuning. Intensitas ditulis dalam sistem heksadesimal dua digit, yakni dari 00 hingga ff (misal #45cd01). Warna putih merupakan gabungan tiga warna dasar, sehingga kodenya #ffffff, sedangkan kode untuk hitam ialah #000000. Superscrpit maksudnya penulisan kecil ke atas teks utama (seperti pangkat), sedangkan subscript ialah penulisan kecil ke bawah teks utama (seperti indeks).

Karakter khusus

Beberapa karakter tak dapat diketik dalam tag html karena merupakan simbol dari tag html itu sendiri, misalnya kurung lancip, ampersand, dan spasi lebih dari satu. Misalya dalam menulis posting ini, semua kurung lancip yang tampil saya tuliskan dalam &lt; dan &gt;, sebab jika tidak alih-alih scriptnya tampil malah akan diterjemahkan. Untuk kurung lancip pembuka, gunakan &lt, untuk kurung lancip penutup gunakan &gt; dan untuk spasi gunakan &nbsp;. Beberapa karakter lainnya antara lain:

&deg; (derajat), &plusmn; (lebih-kurang), &copy; (copyright), &amp; (ampersand, &), &frasl; (/), &micro; (mu), &uarr; (panah atas), &darr; (panah bawah), &larr; (panah kiri), &rarr; (panah kanan), &#35; (#). Karakter lainnya seperti huruf latin dicopy saja dari charmap.

Untuk baris baru gunakan tag <br> (tanpa tag penutup). Pada blogger, terdapat opsi pemutus baris pada html editor, yaitu menggunakan [enter] atau menggunakan tag <br>. Agar tak membingungkan, pilihlah opsi tag <br> sehingga enter tidak akan diterjemahkan sebagai baris baru. Ini cukup berguna agar script tidak terlihat bersambungan, sehingga mudah untuk dikenali. Untuk garis datar gunakan tag <hr width=”xxx”>, width menunjukkan ketebalan garis dalam piksel.

Paragraf

Untuk membuat karakter paragraf seperti baris pertama menjorok ke kanan dan spasi tambahan antar paragraf, gunakan tag berikut ini:

<p class="MsoNormal" style="text-align: justify; text-indent: 35pt;">tulisan</p>

Atau jika tak ingin spasi baris tambahan (misalnya ingin menambahkan sendiri), gunakan

<div class="MsoNormal" style="text-align: justify; text-indent: 35pt;">tulisan</div>

text-indent menunjukkan seberapa jauh baris pertama paragraf bergeser ke kanan (+) atau ke kiri (-).

Align

Align atau rata teks (maupun gambar) bisa dipadukan dalam tag paragraf bisa juga dipisah. Misalnya:

<left>tulisan</left>

<right>tulisan</right>

<center>tulisan</center>

Untuk align justify sendiri tak dapat berfungsi jika tidak di dalam tag paragraf.

Tabel

Sering kita perlu membuat tabel dalam postingan, atau jika tidak kita biasa ingin menampilkan tulisan dalam dua kolom. Karena tidak ada perintah tabulasi (tab) dalam html, dapat digunakan tag tabel untuk membuat tulisan lebih rapi.

<table border=”w” width=”x” cellspacing=”y” cellpadding=”z”>

<tr><td>aaa</td><td>bbb</td></tr>

<tr><td>ccc</td><td>ddd</td></tr>

<tr><td>eee</td><td>fff</td></tr>

</table>

Dengan mengganti w=2, y=1 dan z=5, diperoleh tampilan seperti di bawah ini:

aaa	bbb
ccc	ddd
eee	fff

Tag <tr></tr> merepresentasikan baris dalam tabel, sedangkan tag <td></td> merepresentasikan kolom dalam baris. Border merepresentasikan ketebalan garis tabel, jika tak ingin bordernya terllihat masukkan nilai 0. Sel-sel pada tabel merupakan kotak-kotak yang dipisahkan sebanyak nilai cellspacing (defaultnya 2). Agar bordernya terlihat menyatu, pilih cellspacing=”0”. Cellpadding merepresentasikan jarak isi sel dari border. Width menunjukkan lebar sel atau tabel dalam piksel, jika tak diisi maka akan disesuaikan dengan lebar teks atau jendela.

Gambar

Untuk memasukkan gambar, gunakan tag

<img src=”xxx” width=”yyy” height=”zzz” align=”www”>

Target gambar diisi dengan URL gambar. Width dan height menunjukkan lebar dan tinggi gambar dalam piksel. Jika width dan height tidak diisi, gambar akan ditampilkan dalam ukuran aslinya atau disesuaikan dengan lebar jendela. File gambar dapat berekstensi jpg, gif, maupun bmp. Misalnya:

<img src=”http://www.situs.com/gambar/gambar1.jpg">

Ada pun untuk gambar latar belakang gunakan tag

<body background=”URLgambar”>semua isi di latar depan</body>

Equation atau persamaan matematika dapat diinput dalam bentuk gambar. Praktisnya dapat menggunakan bantuan Latex dari Codecogs. Caranya input persamaan pada editor lalu copy script yang diberikan pada editor blog Anda.

Link

Untuk memberikan fungsi tautan atau link pada suatu URL, gunakan tag

<link>URL</link>

Sedangkan untuk memberi link pada teks yang bukan URL, gunakan tag

<a href=”URL” target=”xxx”>teks yang ingin diberi link</a>

Target merupakan tempat dimana URL yang dituju akan dibuka. Jika dikosongkan, URL link akan dibuka di jendela yang sama dengan jendela tempat link berada. Agar link dibuka pada tab baru ketikkan target=”blank”, target=”blank1”, dan seterusnya. Target dapat pula diberi nilai "self", "parent", dan "top".

Untuk memberikan link pada gambar, padukan tag link dengan tag gambar, misal:

<a href=”URL” target=”xxx”> <img src=”xxx” width=”yyy” height=”zzz” indent=”www”></a>

Untuk memberikan perintah jika gambar diklik akan muncul gambar dalam ukuran penuh, gunakan tag

<a href=”xxx.jpg” target=”xxx”> <img src=”xxx.jpg” width=”yyy” height=”zzz” indent=”www”></a>

Daftar

Daftar dapat berupa bullet atau numbering. Tiap poin diawali tag <li>, dan biasanya tidak perlu tag penutup </li>. Contoh untuk bullet:

Contoh hewan memamahbiak:
<ul type=”xxx”>
<li>sapi
<li>kambing
<li>kerbau
</ul>

Type dapat berupa “disc”, “cyrcle”, atau “square”. Untuk numbering, tag <ul></ul> diganti dengan <ol></ol> dan tipenya dapat berupa “A”, “a”, “I” (angka romawi), atau “1”. Defaultnya ialah “1”.

Efek teks

<blink>tulisan</blink>

<marquee>tulisan</marquee>

<marquee behavior=”alternate”>tulisan</marquee>

Cobalah sendiri untuk mengetahui efeknya..