Cara Efektif Belajar HTML dengan Praktek Langsung

Untuk menjadi pembuat website (webmaster) professional, kamu terlebih dahulu wajib mempelajari tentang HTML. Seperti yang sudah saya katakan sebelumnya kalau HTML ini bagaikan rangka atau tulang dalam sebuah website, untuk itu kamu harus benar-benar mempelajarinya.

Disini saya tidak akan mengajarkan HTML dengan cara merangkak, akan tetapi saya ingin mengajarkan kamu dengan langsung berlari layaknya orang-orang yang sudah pro, artinya kita akan belajar sambil mempraktekkannya langsung langsung dengan software pendukungnya.

Dulu ketika pertama kali saya belajar HTML pada tahun 2006, saya masih menggunakan notepad. Ketika itu saya belum tahu ternyata ada banyak software webmaster yang bisa kita gunakan untuk mempermudah pekerjaan kita. Hingga akhirnya saya pun menemukan satu software yang cocok kiranya untuk saya.

Supaya mempermudah kamu untuk belajar HTML, saya sarankan kamu untuk men-download software Macromedia Dreamweaver di macromedia.com atau adobe.com. Software ini tidaklah gratis, kamu harus membayarnya, namun kamu bisa mencoba versi trialnya. Tapi ada juga yang gratis, misalnya Notepad++, akan tetapi saya jarang menggunakannya. Cuma karena saya lebih suka menggunakan Dreamweaver, maka dalam tutorial ini kita akan belajar HTML dengan menggunakan Dreamweaver.

Kamu boleh mendapatkan Dreamweaver dengan cara apapun. Yang penting, saya sangat menyarankan kamu untuk menggunakan software ini supaya kamu lebih mudah memahami dengan yang namanya HTML.

Tidak hanya HTML, software Macromedia Dreamweaver juga sangat membantu kita untuk mempelajari CSS dan PHP dikemudian hari. Percayalah, software ini sangat hebat.
Oke bagaimana? Sudah siap belajar HTML? Saya harap kamu sudah menginstall Dreamwever di laptop atau pc kamu. Kalau sudah, mari kita buka pelajaran kali ini, yakni CARA MUDAH BELAJAR HTML.

A. Mengenal Adobe Dreamweaver

Dulu, kami mengenalnya dengan nama Macromedia Dreamweaver, tapi sekarang entah kenapa berubah menjadi Adobe Dreamweaver.

Tapi tidaklah penting, yang penting software itu ada sama kamu dan kamu bisa langsung belajar HTML dengan mudah menggunakan Dreamweaver.

Nah sekarang, buka software Dreamweaver kamu. Disana kamu kamu disuguhi dengan daftar pilihan file yang bisa kamu buat dengan bantuan Dreamweaver. Karena kita ingin belajar HTML, maka pilih Create New HTML.

Oke, akan muncul kolom Code yang berisi barisan kode HTML. Jika kamu ingin melihat penampakan desainnya, maka pilih tab Design. Tapi saya sarankan kamu tetap pada pilihan Code, karena disini kita akan mempelajari tentang seluk beluk HTML.

Seperti yang pernah saya ceritakan sebelumnya, file HTML selalu diawali dengan <html> dan diakhiri dengan </html>. Bagian teratas ada <head></head>, pada bagian ini kamu dapat menempatkan link css, javascript atau meta sebagai pelengkap web kamu. Selain itu, bagian <head> juga tempat kamu meletakkan title web kamu. Nah, yang akan muncul di tampilan web pengunjung yakni apapun yang ada di antara <body></body>.

Kalau begitu, save file HTML tersebut dengan menekan CTRL+S. Beri nama index. Nanti file tersebut otomatis tersimpan dengan nama index.html.

B. Tag HTML

Masih dalam file HTML, sekarang mari kita belajar fungsi-fungsi tag HTML. Disini kamu akan mengetahui apa-apa saja fungsi tag dalam HTML, misalnya menebalkan tulisan, memiringkan, menggaris bawahi dan lainnya.

Pertama-tama, buat tulisan sesuka hati kamu, misalnya seperti ini:

Oh, ada yang lupa, kita lupa menambahkan title pada file index.html tersebut. Oke tambahkan title pada file html tersebut seperti gambar dibawah ini:

Kalau sudah, jangan lupa di save dan lihat hasilnya dengan membuka file index.html kamu menggunakan browser.

Judul

Dalam HTML, kita mengenal bentuk judul tulisan berdasarkan ukuran, ukuran terbesar yaitu <H1></H1>, dan umumnya yang paling kecil yaitu <h6></h6>.

Oke, silahkan dicoba seperti dibawah ini:

<h1>Judul artikel</h1>
<h2>Judul artikel</h2>
<h3>Judul artikel</h3>
<h4>Judul artikel</h4>
<h5>Judul artikel</h5>
<h6>Judul artikel</h6>

Di save, lalu coba cek hasilnya melalui browser kamu.

Paragraf

Untuk membuat paragraph menggunakan tag <p></p>. Contoh dibawah ini:

<p>Contoh paragraf yang akan saya buat</p>

Save dan lihat hasilnya dengan membuka file index.html kamu menggunakan browser.

Ganti Baris

Untuk ganti baris menggunakan tag <br> atau bisa juga <br />. Contoh dibawah ini:baris pertama <br />
baris kedua<br />

Nah, coba save dan lihat hasilnya dengan membuka file index.html kamu menggunakan browser.

C. Atribut HTML

Aligment

Ini perintah untuk mengatur sisi tulisan menjadi sisi kiri, sisi kanan, tengah dan sisi rata. Gunakan perintah dibawah ini:

<div align="left">Sisi kiri</div>
<div align="right">Sisi kanan</div>
<div align="center">Sisi tengah</div>
<div align="justify">sisi rata</div>

Sebenarnya semua perintah diatas tidak perlu diketik manual, karena sudah ada di bagian bar bawah Dreamweaver.

Membuat warna

Membuat warna tinggal menggunakan perintah seperti ini:

<font color="#FF0000">Merah</font>
<font color="#FFFF00">kuning</font>
<font color="#00FF00">hijau</font>

Nah,  jangan lupa di save dan lihat hasilnya dengan membuka file index.html kamu menggunakan browser.

Perintah mewarnai tulisan dapat digunakan melalui tag HTML atau melalui CSS. Ini hanya pengenalan saja, karena lebih lengkapnya cara mewarnai web akan kita pelajari selanjutnya di seri pembelajaran mengenai CSS.

Untuk pewarnaan dapat menggunakan kode mesin (#FF0000) atau langsung menggunakan bahasa inggris “red”, hasilnya sama saja. Cuma keuntungan menggunakan kode, kita bisa mengetahui semua warna yang kita inginkan, tinggal kita melacaknya saja via Adobe Photoshop.

Background website

Membuat background dapat menggunakan HTML atau CSS. Karena kita sedang belajar HTML, mari kita coba via HTMLnya dulu. Gunakan tag dibawah ini:<body bgcolor="#FF9966">

Kamu tinggal ganti saja kode warna sesuka hati kamu. Kalau sudah di save, coba lihat perubahan file html kamu melalui browser.

Tabel

Cara membuat table, kamu boleh gunakan fitur Dreamweaver supaya lebih mudah. Terlebih dahulu pilih dulu tampilan Design melalui tab diatas.

Klik Insert > Table (atau CTRL+Alt+T).  Isikan Rows (baris) dan Columns (kolom) dengan jumlah yang kamu inginkan, lalui Table Width (ukuran), dan Ukuran ketebalan garisnya.

 

Jangan takut untuk mencoba-coba segala fitur yang ada dibar bawah Dreamweaver, karena semakin sering kamu mencoba maka kamu akan semakin familiar dengan software hebat ini.

Link

Untuk membuat link, kamu tinggal menggunakan perintah ini:

<a href="http://monzaaulia.com">Teks Link</a>

Ini membuat link agar terbua di tab baru browser, gunakan perintah ini:

<a href="http://monzaaulia.com" target="_blank">Teks Link</a>

Ingin membuat judul di link yang katanya berpengaruh untuk SEO, gunakan perintah ini:

<a href="http://monzaaulia.com" title="blog monza">Teks Link</a>

Nah, jika ingin membuat link agar halaman dapat kembali ke atas, ini perintahnya:

<a href="http://monzaaulia.com#top">Kembali ke atas</a>. <--tambahkan top--=""></--tambahkan>

Untuk membuat link email:

<a href="mailto:monzaaulia@outlook.com">email saya</a>

Kalau sudah, jangan lupa di save dan lihat hasilnya dengan membuka file index.html kamu menggunakan browser.

Tampilan Teks

Beberapa tag yang mengubah tampilan teks:

<strong>Tebal</strong>
<em>Miring</em>
<u>Garis Bawah</u>
<small>mengecilkan huruf</small>
<big>membesarkan ukuran huruf</big>
<sub>seperti rumus kimia</sub>
<sup>seperti kuadrat</sup>
<blockquote>khusus qoute</blockquote>

 

Membuat list

Membuat list bisa dengan angka atau dot doing, sama seperti dalam Microsoft Word. Cuma bedanya di HTML ada perlu menggunakan kode-kodenya saja. Begini cara membuatnya:

<ol>
<li>List pertama</li>
<li>List kedua</li>
<li>List ketiga</li>
</ol>
<ul>
<li>List 1</li>
<li>List 2</li>
<li>List3 </li>
</ul>

Kalau kamu menggunakan <ol> dengan </ol>, maka list yang dihasilkan berupa list angka. Sedangkan jika menggunakan <ul> dan </ul>, maka akan menghasilkan varian list dot dan sebagainya.

Penutup

Inilah hasil belajar kita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Belajar HTML</title>
</head>

<body>
Saya sedang belajar html
<h1>Judul artikel</h1>
<h2>Judul artikel</h2>
<h3>Judul artikel</h3>
<h4>Judul artikel</h4>
<h5>Judul artikel</h5>
<h6>Judul artikel</h6>
<p>Contoh paragraf yang akan saya buat</p>
baris pertama <br />
baris kedua<br />

<div align=”left”>Sisi kiri</div>

<div align=”right”>Sisi kanan</div>

<div align=”center”>Sisi tengah</div>

<div align=”justify”>sisi rata</div>

<font color=”#FF0000″>Merah</font>
<font color=”#FFFF00″>kuning</font>
<font color=”#00FF00″>hijau</font>

<body bgcolor=”#FF9966″>

<table width=”100%” border=”0″>
<tr>
<td>Satu</td>
<td>Dua</td>
</tr>
<tr>
<td>Tiga</td>
<td>Empat</td>
</tr>
</table>

<a href=”http://monzaaulia.com”>Teks Link</a>
<a href=”http://monzaaulia.com” target=”_blank”>Teks Link</a>
<a href=”http://monzaaulia.com” title=”blog monza”>Teks Link</a>
<a href=”http://monzaaulia.com#top”>Kembali ke atas</a>
<a href=”mailto:monzaaulia@outlook.com”>email saya</a>

<strong>Tebal</strong>
<em>Miring</em>
<u>Garis Bawah</u>
<small>mengecilkan huruf</small>
<big>membesarkan ukuran huruf</big>
<sub>seperti rumus kimia</sub>
<sup>seperti kuadrat</sup>
<blockquote>khusus qoute</blockquote>

<ol>
<li>List pertama</li>
<li>List kedua</li>
<li>List ketiga</li>
</ol>
<ul>
<li>List 1</li>
<li>List 2</li>
<li>List3 </li>
</ul>
</body>
</html>

Untuk belajar HTML tidak cukup sehari saja, karena sebenarnya HTML ini begitu luas, maka alangkah baiknya kamu harus banyak-banyak eksplorasi sendiri fungsi-fungsi yang ada pada Dreamweaver. Dengan begitu, kamu tidak perlu harus menghafal tiap tag-tag HTML, karena di software tersebut sudah ada semua.

Perlu diingat, ada beberapa tag yang kamu mewajibkan menggunakan tanda petik dua (“) atau petik satu(‘), hal ini akan kamu kuasai seiring berjalan waktu, tidaklah perlu terburu-buru. Dan satu lagi, hampir semua tag HTML diikuti oleh kode pembuka dan penutup, jangan lupa itu, misalnya <b> dan </b>, <em> dan </em>, dan lainnya.

2 Replies to “Cara Efektif Belajar HTML dengan Praktek Langsung”

Leave a Reply

Your email address will not be published. Required fields are marked *