Apakah belajar HTML itu sulit?
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:
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.
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
Sumber gambar:
HTML - html-helper.net
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
BalasHapusTadi komentaranya double jadi saya hapus yang satunya yah :)
HapusSaya 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
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
BalasHapusBetul kang Asep, kita perlu mengenal dasar-dasarnya dulu, kemudian mencoba membiasakan, seiring waktu juga akan paham sendiri :)
HapusHtml masih dinamis ya,,, scripnya yang panjang lumayan bkin pusing juga ehehhee
BalasHapusSekarang ini aku lagi belajar php yang sifatnya dinamis :)
Ia mas, masih gitu-gitu aja tapi tetap asyik kok :)
HapusBelajar HTML itu intinya harus tekun, mempunyai rasa ingin tau yang kuat dan nggak pernah menyerah. Error coba lagi.
BalasHapusMemang harus punya modal ingin tahu mba, kemudian jangan menyerah soalnya belajar HTML itu bukan masalah sekali dua kali tapi harus diulang-ulang :)
Hapuscukup sulit kayaknya, apalagi bagi orang awam kayak aku
BalasHapusGak sulit kok mba, kalau ada kendala silahkan ditanyakan. Sapa tau bisa bantu :)
Hapusgampang2 susah gan untuk orang seperti saya
BalasHapuspahamnya paling bikin title doang hehe
Loh kendalanya dimana? Silahkan sharing kalau ada kendala :)
HapusHuaaaa.. Aku pucing kalok belajar ini, Baaaang.. :P
BalasHapusPelajari dikit-dikit aja beb, HTML itu kayak perasaan, mau di mengerti juga :D
Hapuskakbeb jangan pusing-pusing kan ada ishmahh
HapusTuh beb, jangan pusing-pusing katanya :)
HapusSaya suka lupa beberapa kode html jadinya sering pake Google deh buat menemukan kodenya :)
BalasHapusCoba di catat yang sering di lupa mas, biar gambang di ingatnya dibanding harus buka Google lagi :)
Hapusgak sulit hanya pelru diulik dan tekun ya
BalasHapusBetul mba, istilahnya harus dibiasakan, lama kelamaan juga akan terasa mudah mempelajarinya :)
Hapusmas 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.
BalasHapusAlhamdulillah sedikit tahu. tapi kalau lama gak utak-atik lagi biasanya dikit lupa makanya harus terus dilatih :)
Hapusselama ini saya hanya mencontek kode yang sudah ada, dengan penjelasan anda saya sedikit lebih paham fungsinya,.... jos dan muantab penjelasanya
BalasHapusSemoga bermanfaat mas, yang terpenting itu harus selalu dilatih mas :)
Hapusbelajar html itu cukup bikin pusing mas,cara mengatasinya bagaimana ya?? biar bisa menerapkan html
BalasHapusBelajar html untuk pemula sepertiku suka bikin males, kak, hehe... *alasan klasik... Padahal pengen bisa... :D
BalasHapusSebenarnya inilah dasar dari ilmu lainnya di bidang website. terlebih dahulu mengerti struktur html dengan baik dan benar.
BalasHapus