Cara Efektif Belajar HTML dengan Praktek Langsung

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

Disini saya tidak akan mengajarkan HTML dengan cara merangkak, akan tetapi saya ingin mengajarkan anda 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 anda untuk belajar HTML, saya sarankan anda untuk men-download software Macromedia Dreamweaver di macromedia.com atau adobe.com. Software ini tidaklah gratis, anda harus membayarnya, namun anda 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.

Anda boleh mendapatkan Dreamweaver dengan cara apapun. Yang penting, saya sangat menyarankan anda untuk menggunakan software ini supaya anda 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 anda sudah menginstall Dreamwever di laptop atau pc anda. 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 anda dan anda bisa langsung belajar HTML dengan mudah menggunakan Dreamweaver.

Nah sekarang, buka software Dreamweaver anda. Disana anda anda disuguhi dengan daftar pilihan file yang bisa anda 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 anda ingin melihat penampakan desainnya, maka pilih tab Design. Tapi saya sarankan anda 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 anda dapat menempatkan link css, javascript atau meta sebagai pelengkap web anda. Selain itu, bagian <head> juga tempat anda meletakkan title web anda. 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 anda akan mengetahui apa-apa saja fungsi tag dalam HTML, misalnya menebalkan tulisan, memiringkan, menggaris bawahi dan lainnya.

Pertama-tama, buat tulisan sesuka hati anda, 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 anda 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 anda.

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 anda 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 anda 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 anda 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">

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



Tabel

Cara membuat table, anda 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 anda inginkan, lalui Table Width (ukuran), dan Ukuran ketebalan garisnya.



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

Link

Untuk membuat link, anda 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--=""> 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 anda 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 anda 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 anda harus banyak-banyak eksplorasi sendiri fungsi-fungsi yang ada pada Dreamweaver. Dengan begitu, anda tidak perlu harus menghafal tiap tag-tag HTML, karena di software tersebut sudah ada semua.

Perlu diingat, ada beberapa tag yang anda mewajibkan menggunakan tanda petik dua (“) atau petik satu(‘), hal ini akan anda 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.

Artikel ini bermanfaat? Share ke Jejaring Sosial Anda.

Artikel lain:

0 Response to "Cara Efektif Belajar HTML dengan Praktek Langsung"

Post a Comment