Manfaatkan Habis HTML Blog WordPress

Bagi blogger WordPress HTML (Hyper Text Markup Language) pasti tak asing lagi. Sebagian (kecil) tag HTML tersedia di editor ‘Text’: ‘b’, ‘i’, ‘link’, ‘b-quote’ … dst. Padahal masih banyak tag HTML lain yang kalau dimanfaatkan habis sangat membantu mempercantik tampilan konten kita. Sering terlupakan karena jarang dipakai. Berikut hanya 1 contoh saja.

1. Atribut teks: ‘style’

Judul di tengah

Judul di atas dibuat dengan menambahkan atributpada tag paragraf <p> (teks biasa) berupa keterangan warna, letak atau posisi, tipe dan ukuran font. Ini kodenya,

<p style="color:brown;text-align:center;font-family:Times New Roman;font-size=20px;">Judul di tengah</p>

Ada kata ‘style’ di sini, yaitu format khusus untuk mengatur gaya tampilan atau style. Format khusus ini punya nama sendiri, ‘CSS’ (Cascading Style Sheet). Style membuat tag jadi “panjang”; style berisi keterangan yang diapit tanda kutip-ganda. Setiap keterangan terdiri atas property (properti) dan value (nilai) ditulis ‘properti:nilai;’.

Contoh color adalah property, brown adalah nilai. Warna ‘brown’ kebetulan dikenal, kalau tidak harus menggunakan kode heksa (notasi #) 6 digit. Contoh warna merah #FF0000, biru #0000FF, hijau #00FF00, kuning #FFFF00. Boleh huruf kecil. Lihat kode warna di 216 Web Safe Colour Chart atau The 216 Color Webmaster’s Palette.

Properti dan nilai font dapat dibagi menjadi font-style (normal, italic, oblique), font-variant (normal, small-caps), font-weight (normal, bold), font-size (banyak), font-family (banyak).

Ribet, kalau semua variasi font ditulis tag jadi panjang sekali. Bisa diperpendek dengan mengurutkan semua nilai mengikuti pembagian di atas, yang tidak ada tidak usah ditulis,

<p style="color:#0000ff; font:italic 11px georgia;">Memperpendek atribut</p>

Jadinya seperti ini,

Memperpendek atribut

Eh, ternyata mudah juga.

Atribut teks ‘style’ memiliki banyak variasi atau kombinasi dengan tag lainnya, antara lain dengan ‘div‘.
 

Update yang tercecer 😀

Latar kuning di belakang teks di atas dapat dibangun dengan kode berikut,

<p style="background-color:#FFFF99;">Update yang tercecer</p>

Ingin warna lain, tinggal mengubah kode warnanya. Kalau yang ini?

Kotak/bingkai teks

<p style="padding:5px;border:1px dashed #FF0000;">Kotak/bingkai teks</p>

Untuk eksperimen ubah angka padding dan border, ubah warna, ubah ‘dashed’ dengan solid, dotted, double, groove, ridge, inset, outset.

2. Atribut tabel

Tag tabel tidak tercantum di editor ‘Text’ blog WordPress. Sengaja ditiadakan agar sederhana karena penggunaannya terbatas? Tiga tag terlibat: <table>, <tr> (table row), <td> (table data) dengan struktur sebagai berikut,

<table>
	  <tr>
		<td>Data 1</td>
		<td>Data 2</td>
		<td>Data 3</td>
	  </tr>
	  <tr>
		<td>Data 4</td>
		<td>Data 5</td>
		<td>Data 6</td>
	  </tr>
</table>

Setiap baris terdiri atas 3 sel data, total 2 baris. Hasil,

Tabel-1 Tabel eksperimen.
Data 1 Data 2 Data 3
Data 4 Data 5 Data 6

Atribut? Berikut untuk dicoba sendiri, oke.
(1) <table border=”1″ cellspacing=”10″> (tabel diberi kotak dan berjarak)
(2) <table border=”1″ cellpadding=”10″> (data bergeser ke dalam)
(3) <td align=”right” valign=”top”>Data 1</td> (‘Data 1’ rata-kanan dan naik)
(4) Judul: sisipkan setelah tag <tabel>, <caption>Tabel-1 Tabel eksperimen.</caption>
(5) Variasi atribut tag <td>: <tr><td colspan=”3″>Data 1</td></tr> jadinya seperti ini,

Data 1
Data 2 Data 3 Data 4

Baris pertama sebanyak 3 kolom diborong ‘Data 1’. Berikut ‘Data 1’ memborong 3 baris,

Data 1 Data 2
Data 3
Data 4

Kodenya,

<table>
	  <tr>
		<td rowspan="3">Data 1</td>
		<td>Data 2</td>
	  </tr>
	  <tr>
		<td>Data 3</td>
	  </tr>
	  <tr>
		<td>Data 4</td>
	  </tr>
</table>

3. Atribut Gambar

Untuk gambar (image), ada tagnya di editor. Klik [img] dan kita diminta mengisi sumber gambar (‘src’) dilanjutkan dengan deskripsi ringkas (‘alt’). Struktur standar/baku seperti ini,

<img src=”(sumber gambar)” alt=”deskripsi ringkas” />

Deskripsi ringkas terbaca kalau loading gambar lama. Deskripsi juga membantu mereka yang memiliki lemah penglihatan. Usahakan selalu mengisi ‘alt’. Sekarang tambahkan atribut ini sesudah ‘alt’ title=”Shinkansen Tokyo-Niigata” lalu lihat apa yang terjadi ketika mouse berada di atas gambar. Horee.. ada keterangan yang muncul.
 

Shinkansen Tokyo-Niigata
Gmb.1 Perjalanan dari Tokyo ke Niigata.

 
Lalu keterangan/judul di bawah gambar? Ini atribut tambahan. Kode selengkapnya seperti ini,

<figure>
<img src="shinkansen.jpg" alt="Shinkansen" title="Shinkansen Tokyo-Niigata">
<figcaption>Gmb.1 Perjalanan dari Tokyo ke Niigata.</figcaption>
</figure>

Gambar juga bisa dilink ke tempat tertentu. Pasang atribut <a href=”(alamat laman yang dituju)”>didepan <img> dan ditutup dengan </a> di akhir. Klik gambar, laman dituju terbuka.

Kalau cuma link begitu saja sih sudah tahu! Kalau beberapa link?
Pulau Jawa

Jakarta Banjir Bandung Pindad Jogja Borobudur Surabaya SPG

Gambar di samping adalah peta pulau Jawa; ada 4 kota besar Jakarta, Bandung, Jogja, Surabaya. Klik untuk mendapatkan keistimewaan atau keunggulan kota tersebut.

Boleh tahu dong kode seperti apa?

<img src="Pulau Jawa.jpg" alt="Pulau Jawa" title="Pulau Jawa" width="200" height="75" usemap="#pulaujawa" />
<map name="pulaujawa">
  <area shape="circle" coords="36,14,5" href="Jakarta.jpg" alt="Jakarta Banjir" title="Jakarta"></area>
  <area shape="circle" coords="55,28,5" href="Bandung.jpg" alt="Bandung Pindad" title="Bandung"></area>
  <area shape="circle" coords="94,42,5" href="Jogja.jpg" alt="Jogja Borobudur" title="Jogja"></area>
  <area shape="circle" coords="152,38,5" href="Surabaya.jpg" alt="Surabaya SPG" title="Surabaya"></area>
</map>

Perhatikan ada atribut tambahan ‘usemap’! Maksudnya gambar dipakai sebagai ‘peta’ yang diberi nama ‘pulaujawa’. Area adalah luas lingkup link, dalam hal ini bentuk lingkaran (shape =”circle”). Koordinat terdiri atas posisi titik pusat lingkaran diukur dari pojok kiri atas (0,0) sedangkan angka ke 3, jari-jari lingkaran.

Pikirkan kegunaan multi-link di 1 gambar! Mau untuk mempromosikan pariwisata budaya di kota masing-masing, atau, belajar anatomi tubuh manusia? Atau mau menunjukkan susunan tata surya kita? Atau untuk tombol saja. (Tombol punya tag khusus). Apa pun itu, hebat!

😀  (kotak/bingkai untuk gambar bisa? hehe… HTML Blog WordPress belum habis!)

Tagged with: , , , , , , , , , , , , , ,
Ditulis dalam Blog HTML dan CSS, Blog Tips dan Trik, Blogging
4 comments on “Manfaatkan Habis HTML Blog WordPress
  1. […] mendemokan mudahnya membuat link gambar di atas, menggunakan konsep yang pernah diperkenalkan untuk link 4 kota di pulau Jawa pada posting beberapa waktu lalu. Program online dipakai (lagi) membantu mempercepat pekerjaan […]

  2. Hartatowirdani berkata:

    trims….infonya mas….salam…

  3. pursuingmydream berkata:

    Terima kasih buat ulasannya, sangat berguna untuk membuat tulisan di blog :).

Silakan komentar, 'like' juga oke

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: