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 tulisan Anda bisa menjadi lebih rapih, atau pada tingkat lebih lanjut untuk mempercanggih tampilan dengan mengedit template, kalau mau. Berikut beberapa script html yang paling dasar, dengan kata lain “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

script	Tampilan
<b>Udang tumis petai</b>	Udang tumis petai
<i>Udang tumis petai</i>	Udang tumis petai
<u>Udang tumis petai</u>	Udang tumis petai
<s>Udang tumis petai</s>	Udang tumis petai
<sup>Udang tumis petai</sup>	Udang tumis petai
<sub>Udang tumis petai</sub>	Udang tumis petai

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 khusus pada template 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).

Pada HTML 5, tag <font> sudah tak dapat digunakan. Untuk itu, gunakan tag <font> seperti yang disajikan pada segmen divisi.

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. Misalnya 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; (#), &alpha; (α), &pi; (π), &Omega; (Ω), dan seterusnya. Beberapa karakter lainnya dapat dilihat di sini. Anda juga bisa menyalinnya saja dari charmap. Jika tidak diterjemahkan dengan benar, gunakan &#xxxx; dengan xxxx diganti dengan unicode simbol (lihat di 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.

Divisi, Align dan Paragraf

Untuk menerapkan kelas atau gaya tertentu pada bagian/divisi tertentu dari script HTML dapat digunakan tag <div></div>. Semua deskripsi yang diberikan dalam <div> hanya berlaku dalam divisi itu saja. Jadi, tag <div> dapat digunakan untuk merampingkan beberapa deskripsi dalam satu tag. Berikut diberikan contohnya.

<div style="font-family:cambria; color:red; font-size:18px">Ini tulisan contoh.</div>

Ini tulisan contoh.

<div class="MsoNormal" style="text-align: justify; text-indent: 35pt; margin-left: 50pt; margin-right: 10pt; color: #0030ff; font-family: Times New Roman; font-size: 16px; font-style: bold">Ini juga tulisan contoh.</div>

Ini juga tulisan contoh.

Sintaks "class" memberikan markup umum yang diterapkan (yang telah dideskripsikan dalam CSS) dan "style" memberikan perubahan atau deskripsi tambahan. "text-align" menunjukkan rata-teks, dapat diisi dengan "left", "right", "justify", atau "center". "margin-left" menunjukkan margin teks atau objek dari kiri, Anda bisa menyatakannya dalam poin (pt), pixel (px) atau centimeter (cm). Begitu pula Anda dapat menerapkan margin untuk top, right, dan bottom. "text-indent" menunjukkan seberapa jauh baris pertama paragraf bergeser ke kanan (+) atau ke kiri (-). Jika deskripsi yang dimaksud tidak ingin diubah dari default-nya ya tidak perlu dituliskan. Selanjutnya Anda coba-coba saja.

Bila hanya ingin menerapkan align pada bagian tertentu, dapat digunakan tag berikut.

<div align="left">tulisan</div>

Khusus untuk rata-tengah, dapat digunakan tag di luar divisi seperti <center>tulisan atau objek</center>.

Efek tumpang tindih bisa Anda peroleh dengan menggunakan margin negatif, contohnya seperti berikut.

<div style="font-family: Arial Black; font-size: 24px; color: black"> paradoks77 </div> <div style="margin-top: -35px; margin-left: 3px; font-family: Arial Black; font-size: 24px; color: #bbbbff"> paradoks77 </div>

Teks pada divisi setelahnya digeser ke atas sebesar 35 pixel dan ke kanan sebesar 3 pixel, memberikan hasil seperti berikut.

paradoks77

paradoks77

Untuk menerapkan kelas paragraf, tag <div> dapat diganti dengan tag <p>, semisal berikut.

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

Secara otomatis akan diberikan spasi tambahan antarparagraf.

Untuk judul suatu seksi (section Bro, bukan sexy) sebaiknya menggunakan format heading. Terdapat beberapa level heading yang dapat digunakan, dari <h1> hingga <h6>. Berikut merupakan contohnya

script	Tampilan
<h1>Ini heading 1</h1>	Ini heading 1
<h2>Ini heading 2</h2>	Ini heading 2
<h3>Ini heading 3</h3>	Ini heading 3
<h4>Ini heading 4</h4>	Ini heading 4
<h5>Ini heading 5</h5>	Ini heading 5
<h6>Ini heading 6</h6>	Ini heading 6

Seperti halnya tag <p>, tag heading dapat diberikan tambahan deskripsi seperti <div>. Jika ingin memberi nomor, tambahkan saja di dalam teks seperti <h2>1. Bab I</h2>.

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="1" width="400" cellspacing="1" cellpadding="5"> <colgroup> <col span="1" style="width: 15%;"> <col span="1" style="width: 55%;"> <col span="1" style="width: 30%;"> </colgroup> <tr><th>No.</th><th>Nama</th><th>Pekerjaan</th></tr> <tr><td>1</td><td>Panijan Sibenar</td><td>Kritikus</td></tr> <tr><td>2</td><td>Prakoso Mangeles</td><td>Politikus</td></tr> <tr><td>3</td><td>Tukiyem Tunganggur</td><td>Pengamat politik</td></tr> </table>

Script di atas akan memberikan tampilan sebagai berikut.

No.	Nama	Pekerjaan
1	Panijan Sibenar	Kritikus
2	Prakoso Mangeles	Politikus
3	Tukiyem Tunganggur	Pengamat politik

Tag <tr></tr> mempresentasikan baris dalam tabel, sedangkan tag <td></td> mempresentasikan sel (kolom) dalam baris. Khusus untuk baris teratas [head row], "td" dapat diganti dengan "th". "width" menyatakan lebar tabel (lebar tiap-tiap kolom diberikan dalam colgroup), jika tak diisi maka akan disesuaikan dengan lebar teks atau jendela. "border" menyatakan 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 mempresentasikan jarak isi sel dari border.

Gambar

Blogger menyediakan menu untuk menginput gambar dalam postingan, meskipun demikian, baiknya kita mengetahui script penginputan gambar agar lebih mudah mengedit tampilannya. 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">

Bila gambar berada di komputer Anda, unggah terlebih dahulu melalui menu pada editor blog dan lihat alamat gambarnya. Ada pun untuk gambar latar belakang gunakan tag

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

Persamaan

Equation atau persamaan matematika dapat diinput dalam bentuk gambar atau memasang tools khusus dari pihak ketiga. Praktisnya dapat menggunakan bantuan Latex dari Codecogs. Caranya input persamaan pada editor lalu salin embed code yang diberikan ke editor blog Anda. Berikut ini tampilan lamannya :

Berikut ini hasilnya:

Jika gambar tidak muncul sempurna pada postingan, coba ganti pilihan embed code antara "HTML" atau "HTML (edit)"

Anda juga dapat menggunakan markup dari pihak ketiga, seperti MathJax, dengan menyisipkan baris berikut ini pada template blog Anda setelah <head>.

<script src='https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML' type='text/javascript'/>

Selanjutnya, Anda tinggal mengetikkan perssamaan dengan format LaTex diantarai $$ dan $$ untuk persamaan pada baris tersendiri atau di antara \( dan \) untuk persamaan pada baris teks. Jika belum mengetahui format LaTex, Anda dapat membiasakannya di situs letex.codecogs di atas. Untuk hasilnya, misalkan

$$ -\frac{\hbar^2}{2m} \nabla^2 \psi = i \hbar \frac{\partial}{\partial t} \psi $$

Akan nampak seperti

$$ -\frac{\hbar^2}{2m} \nabla^2 \psi = i \hbar \frac{\partial}{\partial t} \psi $$

Lebih jauh, Anda dapat membaca postingan saya mengenai tutorial Mathjax.

Tautan (Link)

Untuk memberikan fungsi tautan/pranala atau link pada objek ke suatu 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 (unordered list) atau numbering (ordered list). 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”, “circle”, 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

Cobalah gunakan tag berikut ini dan lihat hasilnya :)

<blink>tulisan</blink>

<marquee>tulisan</marquee>

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

Textbox dan Spoiler

Textbox merupakan penampil teks seperti notepad, script HTML tidak diterjemahkan dalam textbox. Untuk membuat textbox, gunakan script berikut ini:

<textarea cols="80" rows="5"> Ketik tulisan di sini. </textarea>

"cols" menunjukkan lebar textbox (dalam karakter) dan "rows" menunjukkan panjang textbox (dalam baris). Jika tulisan lebih panjang daripada panjang textbox, maka tulisan dapat di-scroll.

Kadangkala kita ingin memberikan informasi tambahan, namun tak ingin tampilan menjadi terlalu panjang (biasanya bila informasi tambahan itu bersifat trivia). Untuk itu, kita dapat menulisnya dalam kotak khusus yang dapat diciut-kembangkan (spoiler). Berikut ini script dasar untuk membuat spoiler, ditulis dalam textbox sebagai contoh dari script sebelumnya.

<div style="margin: 5px 20px 20px;"> <div class="smallfont" style="margin-bottom: 2px;"><b>(judul)</b>: <input value="Buka" style="margin: 0px; padding: 0px; width: 55px; font-size: 12px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" type="button"> </div> <div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;"> <div style="display: none;"> (Tuliskan isi spoiler di sini) <br> </div></div></div>

Dan hasilnya...

(judul):

(Tuliskan isi spoiler di sini)

Sekian dulu, kalau ada niat saya perbarui lagi. Selamat ngeblog!