06 March 2015

Apakah belajar HTML itu sulit?

Posted by Fadly Indrawijaya , 27 Komentar

‫بِسْـــــــــمِ ﷲِالرَّحْمَنِ الرَّحِيم
Menurut saya, ilmu itu seperti sebuah biji yang tumbuh perlahan menjadi sebuah pohon. Daunnya lebat sehingga menjadi tempat yang nyaman untuk berteduh. Belum lagi buahnya yang banyak dan begitu manis. Ilmu juga terus tumbuh dan kemudian memperlihatkan manfaatnya bagi diri sendiri. Namun ibarat buah tadi, apa hanya dinikmati sendiri? atau membaginya pada orang lain sehingga mereka bisa ikut menanamnya, minimal merasakan manisnya.

Beberapa hari yang lalu, saya berniat merapikan folder-folder yang ada dalam laptop karena ada begitu banyak file yang berserakan belum lagi folder berbeda yang mungkin memiliki data yang sama. Saya sempat merenung ketika menyadari begitu banyak file yang berisi tutorial blog. Tak terasa sudah 6 tahun saya ngeblog, ada begitu banyak ilmu seputar blog yang saya dapatkan dalam rentang waktu itu. Namun setelah merenungi, ternyata manfaat itu umumnya saya rasakan sendiri, hanya sedikit yang sempat dibagikan kembali. Saya bahkan mengibaratkan diri sendiri seperti seorang yang memiliki pohon yang berbuah namun terus menyimpan buah-buah tersebut dalam kulkas hingga akhirnya muncul pertanyaan "Mau diapakan buah sebanyak ini?"
Ini kembali menjadi motivasi bagi saya untuk menulis karena beberapa saat yang lalu sempat tidak posting, sebenarnya kemarin itu sedang sibuk utak-atik template lagi agar ukurannya bisa pas saat dibuka menggunakan perangkat mobile. Berhubung ada begitu banyak tutorial yang saya pelajari tentang blog mari sama-sama mempelajarinya. Sebagai pemanasan, kali ini saya akan perkenalkan HTML dan CSS (CSS akan dibahas pada postingan berikutnya), kedua bahasa program inilah yang memegang peranan penting pada tampilan sebuah blog. Apakah belajar HTML itu sulit?

HTML

Singkatan dari HyperText Markup Language adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi [Wikipedia].

Mengapa HTML menjadi hal dasar yang harus dipelajari oleh blogger? Karena html ini adalah penyusun utama sebuah halaman, ia ibarat rangka/tiang. Baiklah, dibanding berteori tentang HTML, gimana kalau langsung mempraktekkan kode HTML dasar. Sebelumnya siapkan dulu aplikasi editor teks kalian, contohnya Notepad (Windows), Gedit (Linux), TextMate (Macintosh), bahkan pengguna Android juga bisa melakukannya dengan mengunduh aplikasi text editor terlebih dahulu (jika bingung memilih aplikasi, silahkan install Jota Text Editor).

Setelah siap, silahkan ketik atau salin kode berikut:

<html>
<head>
<title>Belajar HTML</title>
</head>
<body>
<p>Halo Dunia !!!</p>
<p>Belajar HTML bersama BiluPing</p>
</body>
</html>


Kemudian Save file dengan nama "tahap1.html" Yang perlu diperhatikan adalah: ekstensi atau akhiran nama file harus menggunakan ".html". Sebelum melanjutkan, saya akan menjelaskan sedikit tentang arti dari kode diatas
  • Tag <html> ditutup dengan </html> adalah tag yang menginformasikan pada browser bahwa kode tersebut adalah dokumen HTML.
  • Tag <head> ditutup dengan </head> adalah pembuka, tag ini biasanya berisi tag judul halaman atau metatag yang dibutuhkan oleh server. Kecuali judul halaman, apapun yang ditulis antara tag ini tak akan muncul di browser namun data tersebut tetap dibutuhkan, contohnya meta tag yang dibutuhkan oleh mesin pencari.
  • Tag <title> ditutup dengan </title> tag yang bertugas menampilkan judul halaman di bagian atas browser.
  • Tag <body> ditutup dengan </body> adalah badan dokumen. Semua struktur sebuah halaman tersimpan antara tag ini. Bisa dikatakan bahwa, apapun yang muncul di layar berasal dari tag ini.
  • Tag <p> ditutup dengan </p> (Paragraf), menginformasikan pada browser bahwa ini adalah sebuah paragraf.
Sekarang silahkan buka file yang telah di save sebelumnya. Karena tadi di save dengan ektensi *.html maka file tersebut akan otomatis dibuka oleh browser. Jika tak ada yang salah ketik, tampilannya akan menjadi seperti ini:

Belajar HTML

Gimana, mudah kan? Mari kita coba praktekkan contoh lain. Kita akan membuat 3 paragraf namun kali ini menggunakan efek bold, italic, underline dan pewarnaan huruf. Paragraf pertama hurufnya berwarna biru dengan tambahan atribut <b> Bold / huruf tebal, paragraf kedua dibiarkan dengan tampilan biasa, dan paragraf ketiga diberi warna hijau dengan tambahan atribut <i> Italic / huruf miring dan <u> Underline / garis bawah. Silahkan salin kode berikut pada file baru anda atau bisa menyalin kembali pada file sebelumnya.

<html>
<head>
<title>Belajar HTML</title>
</head>
<body>
<p><font color="blue"><b>Belajar HTML itu mudah</b>.</font></p>
<p>Tak ada kesuksesan tanpa usaha, tak ada usaha tanpa memulai.</p>
<p><font color="green"><i>Kalau susah</i>, <u>terus belajar</u> dan <u>jangan menyerah</u>.</font></p>
</body>
</html>


Kemudian jangan lupa save dengan nama "tahap2.html". Kemudian buka file tadi menggunakan browser.

Atribut <font> memberikan informasi bahwa huruf yang berada diantara <font> dan </font> menggunakan efek warna. Demikian juga dengan <b>, <i>, dan <u>.

hasilnya akan seperti ini:

Belajar HTML itu mudah.
Tak ada kesuksesan tanpa usaha, tak ada usaha tanpa memulai.
Kalau susah, terus belajar dan jangan menyerah.

Tidak terlalu sulit kan? Salah satu hal yang perlu diperhatikan saat menuliskan kode html adalah pasangan/penutup dari tag tersebut. Tag <html> ditutup dengan tag </html>, dan urutannya harus sama, jika kode A yang membuka, kemudian ada kode B di dalamnya maka kode B tersebut harus menutup dulu kemudian ditutup oleh kode A. Contoh urutannya seperti ini: ABCDDCBA (benar), ABBCDDCA (benar), ABBCCDDA (benar), ABCDCBDA (salah).

Tapi tidak semua tag memiliki pasangan, ada kondisi dimana suat tag justru tidak memiliki pasangan. Contohnya <br/> Break yang sering muncul di blogspot. Tag ini tak memiliki pasangan karena berfungsi sebagai ganti baris.

Gimana sahabat BiluPing, tidak terlalu rumit kan? Cukup kenali dulu hal-hal dasarnya dan jangan ragu untuk terus mencoba. Jika mengalami kesulitan, jangan ragu untuk tinggalkan komentar.

Sumber gambar:
HTML - html-helper.net

foto fadly
Penulis: Fadly Indrawijaya
Manusia sederhana dengan impian luar biasa. Penikmat hujan, segelas teh hangat dan buku. Sangat tertarik pada astronomi, teknologi, fotografi, jurnalis, dan alam. Selengkapnya >>

27 comments:


bingungBingung? Jangan ragu untuk Bertanya | Komentar

Kami menghargai setiap tanggapan pembaca.
Kami akan berusaha merespon tanggapan tersebut secepatnya, اِ نْ شَآ ءَ اللّهُ

Catatan
1. Jangan SPAM yah....
2. Tidak menggunakan link hidup
3. Silahkan berkomentar dengan sopan


  1. dulu pas th 2000, belajar HTML via buku, mumet manteeep!skr sih tinggal buka inet langsung googling aja ya.penuntunnya mudah.salah satunya disini.lebih mudah ga usah mumet hehehe eh makasih masih mau main, ingin tahu cara bikin bubuk biji alpukat: ada di http://getoekgoreng.blogspot.com/2015/03/membuat-bubuk-biji-alpukat.html

    ReplyDelete
    Replies
    1. Tadi komentaranya double jadi saya hapus yang satunya yah :)
      Saya juga kenal HTML justru saat belum punya komputer jadi kode HTMLnya cuma bisa dibayangin aja :D kemudian kenal blog di akhir tahun 2008 lalu mau coba-coba utak atik template sendiri, akhirnya coba belahar HTML lagi.

      Makasih mba info tentang biji Alpukatnya, kirain tadi langsung di blender gitu dibuat jus juga :D

      Delete
  2. Dasar dasar HTML memang multak diperlukan bagi Blogger. Karena jika tidak ada dasar sama sekali pasti akan kesulitan untuk edit HTML nya. Minimal dasar dasar nya sudah bisa Sehingga letak FILE FILE yang diinginkan bisa dipasang tepat pada posisinya di CSS dan atau di EDIT HTML nhya

    ReplyDelete
    Replies
    1. Betul kang Asep, kita perlu mengenal dasar-dasarnya dulu, kemudian mencoba membiasakan, seiring waktu juga akan paham sendiri :)

      Delete
  3. Html masih dinamis ya,,, scripnya yang panjang lumayan bkin pusing juga ehehhee
    Sekarang ini aku lagi belajar php yang sifatnya dinamis :)

    ReplyDelete
    Replies
    1. Ia mas, masih gitu-gitu aja tapi tetap asyik kok :)

      Delete
  4. Belajar HTML itu intinya harus tekun, mempunyai rasa ingin tau yang kuat dan nggak pernah menyerah. Error coba lagi.

    ReplyDelete
    Replies
    1. Memang harus punya modal ingin tahu mba, kemudian jangan menyerah soalnya belajar HTML itu bukan masalah sekali dua kali tapi harus diulang-ulang :)

      Delete
  5. cukup sulit kayaknya, apalagi bagi orang awam kayak aku

    ReplyDelete
    Replies
    1. Gak sulit kok mba, kalau ada kendala silahkan ditanyakan. Sapa tau bisa bantu :)

      Delete
  6. gampang2 susah gan untuk orang seperti saya
    pahamnya paling bikin title doang hehe

    ReplyDelete
    Replies
    1. Loh kendalanya dimana? Silahkan sharing kalau ada kendala :)

      Delete
  7. Huaaaa.. Aku pucing kalok belajar ini, Baaaang.. :P

    ReplyDelete
    Replies
    1. Pelajari dikit-dikit aja beb, HTML itu kayak perasaan, mau di mengerti juga :D

      Delete
    2. kakbeb jangan pusing-pusing kan ada ishmahh

      Delete
    3. Tuh beb, jangan pusing-pusing katanya :)

      Delete
  8. Saya suka lupa beberapa kode html jadinya sering pake Google deh buat menemukan kodenya :)

    ReplyDelete
    Replies
    1. Coba di catat yang sering di lupa mas, biar gambang di ingatnya dibanding harus buka Google lagi :)

      Delete
  9. gak sulit hanya pelru diulik dan tekun ya

    ReplyDelete
    Replies
    1. Betul mba, istilahnya harus dibiasakan, lama kelamaan juga akan terasa mudah mempelajarinya :)

      Delete
  10. mas fadly tahu? Ishmah beberapa waktu yang lalu ikut perlombaan ttg komputer yang mengharuskan ishmah belajar lebih dalam ttg html dan ternyata html memang mudah. Mudah untuk dilupakan... *becanda.. gak mudah juga sih, cuman asal mau, aja.

    ReplyDelete
    Replies
    1. Alhamdulillah sedikit tahu. tapi kalau lama gak utak-atik lagi biasanya dikit lupa makanya harus terus dilatih :)

      Delete
  11. selama ini saya hanya mencontek kode yang sudah ada, dengan penjelasan anda saya sedikit lebih paham fungsinya,.... jos dan muantab penjelasanya

    ReplyDelete
    Replies
    1. Semoga bermanfaat mas, yang terpenting itu harus selalu dilatih mas :)

      Delete
  12. belajar html itu cukup bikin pusing mas,cara mengatasinya bagaimana ya?? biar bisa menerapkan html

    ReplyDelete
  13. Belajar html untuk pemula sepertiku suka bikin males, kak, hehe... *alasan klasik... Padahal pengen bisa... :D

    ReplyDelete
  14. Sebenarnya inilah dasar dari ilmu lainnya di bidang website. terlebih dahulu mengerti struktur html dengan baik dan benar.

    ReplyDelete

Related Posts Plugin for WordPress, Blogger...
 

BiluPing © 2009 - 2016.

Home | | Contact | FAQ | BiluPing Google+