iklan-surgaweb2

template-wordpress

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

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:

  1. Tipe dokumen html

Untuk html5 penulisan tipe dokumen html cukup dengan kode berikut:

 

  1. 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:

 

  1. HTML untuk judul halaman

Elemen judul halaman html diawali dengan <title>. Elemen <title> ini akan muncul pada judul jendela halaman html. Contohnya seperti in:

 

  1. 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:

 

  1. HTML untuk judul artikel

Untuk judul artikel atau untuk sub judul gunakan tag <h1> sampai <h6>. Contoh penggunaannya seperti berikut:

 

  1. HTML untuk paragraf

Dalam penulisan paragraf pada html anda bisa menggunakan tag <p> contohnya seperti ini:

 

  1. HTML untuk gambar

Untuk memasukkan gambar kedalam halaman html anda bisa gunakan tag <img> contohnya seprti berikut;

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:

Lihat hasilnya disini: http://jsfiddle.net/q15y3tvw/

 

  1. HTML untuk Tabel

Untuk membuat table dalam html agak sedikit rumit kalau belum terbiasa. Berikut ini contoh sederhana table html:

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.

Lihat Video >>

 

(Visited 14,187 times, 11 visits today)