Pada tutorial belajar html ini saya akan jelaskan dengan lengkap bagaimana cara membuat website dengan html beserta dengan contoh-contoh yang bisa anda coba sendiri.
Untuk dapat dengan mudah dalam belajar html anda disarankan memperlajarinya dari dasar. Sebenarnya sintak dasar dari html itu hanya sedikit. Namun banyak properti dan atribut yang bisa dipakai oleh masing-masing tag dan elemen pada html. Oleh karena itu untuk belajar html agar anda lebih mudah memahami struktur html maka anda harus benar-benar menguasai dasar bahasa html.
Baiklah di tutorial belajar html ini saya tidak akan menjelaskan apa itu html karena saya yakin anda sudah sering mendengar istilah html, namun kita langsung praktek bagaimana cara membuat halaman web menggunakan html.
Dalam tutorial belajar html ini saya menggunakan versi html terbaru yaitu html5. Jadi semua contoh kode html yang saya gunakan nantinya menggunakan html5.
Persiapan belajar html5
Yang harus anda siapkan pertamakali adalah program/software untuk editor html. Saya sarankan anda menggunakan editor yang biasa dipakai banyak desainer web seluruh dunia yaitu Sublime Text. Anda bisa mendownloadnya disini: www.sublimetext.com. Anda bisa juga menggunakan editor lain seperti notepad++, eclipse, Adobe Dreamweaver, Microsoft Expression Web, CoffeeCup HTML Editor dan sebagainya sebagaimana yang anda sukai.
Contoh sederhana halaman html
Contoh sederhana halaman web html5 dapat anda lihat dibawah ini
<!DOCTYPE html> <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
Lihat hasilnya disini: http://jsfiddle.net/pc2qrrhf/
Dasar-Dasar HTML
Beberapa dasar-dasar html yang harus anda ketahui terlebihdahulu dalam belajar html adalah sintak dasar yang sering digunakan dalam halaman website. Diantara sintak dasar html adalah sebagai berikut:
- Tipe dokumen html
Untuk html5 penulisan tipe dokumen html cukup dengan kode berikut:
<!DOCTYPE html> Contohnya seperti : <!DOCTYPE html> <html> <body> <h1>Belajar PHP</h1> <p>Dalam tutorial belajar php ini...</p> </body> </html>
- HTML untuk header
Elemen header dalam html menggunakan tag <head>. Didalam tag <head> ini terdapat banyak elemen lainnya yang bisa dimasukkan. Maksud dari elemen <head> ini adalah hal yang paling pertama dibaca oleh browser sebelum isi halaman ditampilkan. Contoh penggunaan elemen <head> adalah seperti ini:
<head> <title>Website Pertamaku – Belajar HTML</title> </head>
- HTML untuk judul halaman
Elemen judul halaman html diawali dengan <title>. Elemen <title> ini akan muncul pada judul jendela halaman html. Contohnya seperti in:
<title>Website Pertamaku – Belajar HTML</title>
- HTML untuk tubuh halaman
Tubuh halaman adalah apa-apa yang akan ditampilkan oleh browser. Semuanya berada didalam tag <body>. Semua yang ada didalam tag <body> adalah isi dari tubuh halaman web. Contohnya seperti ini:
<body> <h1>Belajar PHP</h1> <p>Tutorial Belajar PHP ini...</p> </body>
- HTML untuk judul artikel
Untuk judul artikel atau untuk sub judul gunakan tag <h1> sampai <h6>. Contoh penggunaannya seperti berikut:
<h1>PROPOSAL</h1> <h2>BAB I</h2> <h3>1.1. LATAR BELAKANG</h3>
- HTML untuk paragraf
Dalam penulisan paragraf pada html anda bisa menggunakan tag <p> contohnya seperti ini:
<p>Belajar html.</p> <p>Tutorial belajar html.</p>
- HTML untuk gambar
Untuk memasukkan gambar kedalam halaman html anda bisa gunakan tag <img> contohnya seprti berikut;
<img src="pasfoto.jpg">
Sekarang anda sudah mengenal sintak-sintak dasar html atau html5. Sekarang mari kita coba susun secara utuh sebuah halaman html sederhana menggunakan elemen dan tag yang sudah dijelaskan diatas. Perhatikan cotoh berikut ini:
<!DOCTYPE html>
<html>
<head>
<title>Website Pertamaku – Belajar HTML</title>
</head>
<body>
<h1>Belajar PHP</h1>
<p> Untuk dapat dengan mudah dalam belajar html anda disarankan memperlajarinya dari dasar. Sebenarnya sintak dasar dari html itu hanya sedikit. Namun banyak properti dan atribut yang bisa dipakai oleh masing-masing tag dan elemen pada html. Oleh karena itu untuk belajar html agar anda lebih mudah memahami struktur html maka anda harus benar-benar menguasai dasar bahasa html.</p>
<p>
<img src="pasfoto.jpg">
<br>
<a href="http://www.waroengweb.co.id/">Kunjungi website saya</a>
</p>
</body>
</html>
Lihat hasilnya disini: http://jsfiddle.net/q15y3tvw/
- HTML untuk Tabel
Untuk membuat table dalam html agak sedikit rumit kalau belum terbiasa. Berikut ini contoh sederhana table html:
<table style="width:100%" border="1"> <tr> <td>Ali</td> <td>Badu</td> <td>50</td> </tr> <tr> <td>Eka</td> <td>Budi</td> <td>94</td> </tr> </table>
pembuatan table diawali dengan tag <table>
kemudian diikuti dengan pembuatan baris dengan tag <tr>
Didalam setiap baris ada kolom/field dengan menggunakan tag <td>
Jumlah <td> anatara baris pertama dengan baris berikutnya harus sama banyak.
