Dasar-Dasar HTML yang sering digunakan di WordPress.com


HTML Logo

Sebagai pemula yang belajar HTML, setiap ada kode HTML yang saya dapat biasanya selalu saya copy mentah-mentah, karena tidak tahu apa dan fungsi dari masing-masing kode tersebut. Ini cukup menyulitkan karena tidak semua kode dapat diterapkan pada tempat yang berbeda, maka perlu beberapa modifikasi untuk menyesuaikan dengan website masing-masing. Untuk itulah saya merasa perlunya dasar-dasar HTML yang sering digunakan di WordPress.com gratisan untuk dipahami. Walau tidak terlalu dalam, paling tidak bisa digunakan untuk modifikasi untuk diterapkan di website.

HTML sendiri sekarang sudah berada di versi HTML 5, dan menurut Webopedia.com HTML (Hypertext Markup Language) merupakan bahasa yang digunakan untuk membuat dokumen di Word Wide Web. HTML mendefinisikan struktur dan tampilan website menggunakan tag dan atribut. Struktur dasar bahasa HTML adalah <HTML><BODY></BODY></HTML> Dimana di <BODY> tersebutlah kita menginput kode HTML di widget ataupun di postingan. Sebelum <BODY> masih ada <HEAD> dan <STYLE>, tapi untuk <STYLE> kita menginputnya langsung setelah atribut STYLE karena untuk pengguna wordpress.com gratisan kita  tidak bisa mengedit file .php ataupun CSS keseluruhan. (mohon koreksi jika salah)

Kurang lebih seperti berikut contohnya  tulisan original hitandi.wordpress.com

Contoh :

<html>
<head>
<style>
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>

<h1>Ini adalah Judul</h1>
<p>Ini adalah Paragrap.</p>

</body>
</html> 

Hasil penulisan kode HTML seperti di atas adalah seperti berikut

Ini adalah Judul

Ini adalah Paragrap.

Akan tetapi jika kita akan menuliskanya di postingan atau widget maka formatnya kurang lebih seperti ini

Contoh :

<h1 style="color: red;">This is a heading</h1>
<p style="color: blue;">This is a paragraph.</p>

Jadi <STYLE> di tuliskan di dalam, karena di posting dan widget wordpress tidak dapat memanggil <STYLE> yang di deklarasikan di <HEAD>. Karena pada dasarnya ketika kita posting atau menginput HTML  di widget, kita telah bekerja di  dalam <BODY> karena <HTML> sampai <HEAD> nya merupakan struktur website secara keseluruhan.tulisan original hitandi.wordpress.com

Tabel di bawah merupakan contoh-contoh dasar tag HTML yang sering digunakan khususnya untuk WordPress.com. Seperti yang di lihat terdapat 4 kolom dimana untuk penulisanya setelah tag diikuti attibute dan diisikan dengan value.

Tag Attribute Value/Nilai Keterangan
a href URL Alamat ULR atau link yang dituju
target _blank tempat agar dibukanya link di tab baru, jika tidak ditambahkan target, maka secara default akan dibuka di tab tempat link itu berada. Masih banyak value yang lain, tp lebih sering menggunakan target=”_blank”
 img src URL Link lokasi gambar
height  pixel Ukuran tinggi gambar
weight  pixel Ukuran lebar gambar
usemap #mapname Penggunaan gambar biasanya untuk koordinat gambar dalam pixel
alt text Text alternatif untuk keterangan gambar
span Digunakan untuk memberi gaya di sebagian text
ul Membuat list dengan bullet, biasanya diikuti dengan tag

<li>
ol Membuat list dengan nomor, biasanya diikuti dengan tag

<li>
li Membuat list dengan bullet, biasanya diikuti dengan tag

<li>
div mendefinisikan bagian dari dokumen HTML, biasanya digunakan bersamaan dengan CSS
style memberikan gaya atau atribut HTML, biasanya juga digunakan dengan CSS
table digunakan untuk membuat tabel,terdiri dari tag,

<th>

tabel header,

<tr>

tabel row, dan

<td>

cell tabel

Untuk melihat dan mempelajari kode HTML secara lengkap dapat dilihat di www.w3schools.com

Tag HTML di atas dapat digunakan dengan CSS tanpa mendeklarasikan di dalam <HEAD> melainkan langsung dalam elemen HTML menggunakan atribut style. Untuk cara penulisan dan contohnya dapat dibaca di Penulisan CSS untuk HTML WordPress.com

Advertisements

One comment on “Dasar-Dasar HTML yang sering digunakan di WordPress.com

  1. Pingback: Penulisan CSS untuk HTML di WordPress.com | Hit Andi

Komentarnya please

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s