Belajar HTML Bagi Blogger

Thursday, July 11, 2013
Tentu kita tidak asing dengan gambar diatas bukan? Yaps, itu adalah tampilan saat akan membuat satu postingan baru di blog.

Pada tampilan tersebut terdapat Compose dan HTML. Saat kita memilih Compose maka akan muncul halaman kosong untuk menuliskan postingan dan jika kita pilih HTML maka akan muncul pula halaman kosong. Lantas, apa bedanya?

HTML atau Hyper Text Markup Language bisa diartikan sebagai suatu file teks sederhana yang mengandung perintah-perintah berupa TAGS sehingga sebuah web browser dapat menampilkan suatu halaman dengan display tertentu.
Lalu, Apa itu TAGS? Tag itu adalah tanda < dan >. Jika diantara tanda tadi diberi HTML yang jadinya seperti ini <HTML>, maka tag tersebut disebut tag html. (Sumber: www.carawebs.info)

Melalui tags tersebut, web browser (seperti Mozilla Firefox, Google Chrome, Opera, dll) akan menampilkan halaman web dengan tampilan sesuai dengan tags yang digunakan.

Untuk memudahkan pemahaman, mari kita belajar dengan contoh ^^
Pada Compose, ketikkan kata "Hello World" dengan dicetak tebal. Lalu lihat pada HTML, apa yang terlihat? 
<b>Hello World</b>

Benar begitu?? Nah, tanda < > itulah yang disebut tags dan b merupakan salah satu 'isi elemen HTML' yang memberikan perintah cetak tebal.

Tags ada yang berpasangan, ada pula yang tidak. Sebagian besar tags adalah tags berpasangan. Contohnya: <b>kata</b>

<b> memiliki pasangan </b>. Sintaks ini akan mencetak-tebalkan kata yang diapit oleh pasangan tags <b>. Mari kita praktekkan!

Pada Compose, ketikkan kata "Saya sedang belajar HTML". Lalu lihat pada HTML, apa yang terlihat? 
Saya sedang belajar <b>HTML</b>

Mengapa blogger perlu belajar HTML?
Belajar HTML ini menjadi penting saat seorang blogger ingin mengeksplor blog mereka. Jika para blogger hanya sebatas menuliskan postingan di blog mereka, maka belajar HTML menjadi tidak perlu.

Mengeksplor blog?
(Contoh sederhana) Bagaimana jika ingin menampilkan tabel dipostingan? Misal seperti tabel berikut ini?
Blog Wamubutabi
Pemilik Meo^^nk
Apakah untuk menampilkannya harus copy-paste dari Ms.Word?
Yaps, cara tersebut memang bisa digunakan, namun ada cara lain, yakni menulisnya di HTML, seperti berikut:
<table>
         <tr>
                      <td>Blog</td>
                      <td>Wamubutabi</td>
         </tr>
         <tr>
                      <td>Pemilik</td>
                      <td>Meo^^nk</td>
         </tr> 
</table>

Nah, itu sintaks untuk menampilkan tabel. Sekarang, mari kita belajar HTML untuk link.
<a href="url tujuan">kata yang jika diklik akan bisa melakukan link</a>

Sederhana bukan? Lanjut ke HTML untuk menampilkan gambar.
<img src="sumber gambar">
*tags <img> adalah contoh tags yang tidak berpasangan

Jika menginginkan gambar yang bisa nge-link, kita tinggal memadupadankan kedua sintaks diatas.
<a href="url tujuan">
          <img src="sumber gambar">
</a>

Yuhhu... masih banyak sintaks HTML yang lain. Yuk, belajar bersama-sama ^^

4 comments:

  1. Yang itu adalah sintax standar yang wajib diketahui blogger. Sedangkan yang lainnya hanya pelengkap saja seperti style inline css.

    ReplyDelete
  2. Yaps, Benar sekali..
    namun mungkin bagi blogger pemula akan merasa bingung..
    hehe

    ReplyDelete
  3. Kode dasar HTML
    < html>
    < head>
    < title>judul
    < /head>
    < body>
    isi apa aja menggunakan kode html
    < /body>
    < /html>

    itu mas sebenarnya kode dasar html, kode html tidak akan mengeksekusi perintah tanpa atribut diatas.. biasanya kalau di blogger kode dasar tersebut sudah ada di dalam template jadi kalau mau nulis artikel tidak perlu menulis kode dasarnya lagi didalam kolom artikel.

    Namun jika mau membuat program lain seberti menggunakan netepad/wordpat harus memakai kode diatas.. seumpama di notepad cuma ditulis < b> .... tidak akan dieksekusi atau kode html salah

    ReplyDelete

Terima kasih telah mengunjungi Wamubutabi :)
Silahkan tinggalkan jejak ^^

Powered by Blogger.