Tutorial Dasar HTML

Wednesday, July 1, 2015

Apa itu HTML? Website yang Anda lihat sekarang ini adalah wujud dari HTML. Nah mau bikin website seperti ini juga? Berarti Anda harus mengetahui tutorial ini. Tutorial ini adalah yang paling dasar mengenai HTML. Nah seperti apakah HTML itu?

Struktur HTML

Struktur sebuah website awalnya sangat sederhana, yaitu ada head dan body. Head berisi inisialisasi (inisial awal) dan deklarasi untuk sebuah halaman web, dan Body merupakan isi web itu sendiri. Head dan Body ada di dalam tag Html, tag yang merupakan isi secara keseluruhan halaman web. Untuk lebih jelasnya, coba perhatikan kode di bawah ini:

<!DOCTYPE HTML>
<html>
    <head>
        <title>Judul Halaman Web</title>
    </head>
    <body>
      <h1>Ini adalah Judul Konten</h1>
      <p>Ini adalah isi paragraf, kamu dapat tulis apapun di sini</p>
    </body>
</html>

Dilihat dari kode di atas, kita dapat melihat struktur secara jelas bentuk halaman sebuah website. Saya akan jelaskan satu persatu.

<!DOCTYPE HTML>

DOCTYPE adalah suatu deklarasi yang digunakan untuk mengidentifikasi jenis dokumen HTML yang digunakan sehingga browser dapat menentukan bagaimana memperlakukan kode tersebut. Ada beberapa jenis dari tipe DOCTYPE ini. Sebagai contoh ya kita pakai doctype di atas.

Di dalam tag <head>, ada sepasang tag bernama title. Fungsi dari tag itu adalah menentukan judul dokumen html yang kamu buat. Sebenarnya, di dalah tag head itu bisa banyak deklarasi dan inisialisasi. Di dalam head, biasanya dipakai untuk meload CSS, Javascript, menentukan meta, dan sebagainya. Basically, kita akan belajar secara dasar terlebih dahulu.

Di dalam tag <body>, kita menambahkan teks yang diapit sepasang tag <h1> dan<p> yang merupakan isi yang ditampilkan pada browser. Perlu diperhatikan bahwa di dalam tag inilah semua akan ditampilkan di dalam browser.

Element, Tag dan Attribute

Di dalam kode HTML, ada 3 istilah yang wajib kita ketahui, yaitu element, tag dan attribute (atribut).

Tag adalah teks khusus yang kita sebut dengan istilah markup yang diawali dengan tanda "<" dan diakhiri dengan tanda ">". Tag terdiri dari dua bagian, tag pembuka dan tag penutup. Tag pembuka diapit dengan tanda "<>", dan tag penutup diawali dengan tanda "<" dan diakhiri dengan tanda "/>". Khusus untuk tag tanpa pasangan, bentuknya berbeda, contohnya "br" dan "hr". Contoh:

<p>Paragraf ini berada dalam tag "p"</p>
<div>Tulisan ini berada dalam tag "div"</div>
</br>
<hr />

Contoh di atas adalah contoh untuk tag

p, div, br, dan hr.

Atribut mendefinisikan properti dari suatu tag HTML, yang terdiri atas nama dan nilai. Contoh:

<img src="gambar.jpg" height="100" width="200" />
<p align="center">Teks ini berfungsi untuk mengetengahkan tulisan</p>

Contoh di atas adalah contoh untuk element <img src="gambar.jpg" height="100" width="200" />, dan element <p align="center">Teks ini diberi atribut align dengan nilai "center", yang berfungsi untuk mengetengahkan tulisan</p>, jadi element itu mencakup 3 bagian tersebut.

Tag-tag dasar HTML

Ok, setelah kita mengetahui struktur HTML secara dasar, kita sekarang akan mempelajari tag-tag dasar HTML. Berikut ini saya jelaskan tag-tag yang biasa dipakai untuk membuat sebuah halaman web.

Membuat Teks Judul

Bagi yang sudah terbiasa membuat dokumen di MS Word, pasti kamu tahu apa itu istilah heading. Ya, heading adalah judul dari sebuah konten. Heading ada banyak level, mulai dari 1, 2, 3, dan seterusnya. Sama seperti halaman web, halaman web juga berbentuk persis seperti itu. Untuk membuat heading, kita cukup mengapit teks yang akan kita jadikan judul dengan <h1> atau <h2> atau<h3> dan seterusnya.

<h1>Ini adalah heading level satu<h1>
<h2>Ini adalah heading level dua<h2>
<h3>Ini adalah heading level tiga<h3>
<h4>Ini adalah heading level empat<h4>

Membuat Paragraf

Untuk membuat paragraf, kita cukup mengapit uraian teks dengan tag <p>.

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
</p>
 
<p>
Donec adipiscing ligula sed nisi porta lacinia. Nullam vulputate dictum magna. 
</p>

teks "Lorem ipsum" adalah contoh kata-kata standard di dalam dunia web untuk pemisalan kalimat, kamu bisa generate sendiri di situs: http://lipsum.com

Menambahkan Gambar

Jika kamu sering menampilkan gambar di kaskus, blog, dan sebagainya tentu kamu sudah tahu konsep dari tagging HTML ini. Bahkan kamu bisa tahu bagaimana cara menampilkan gambar, meletakkannya di tengah, mengubah ukuran, dan sebagainya. Ok, untuk menambahkan gambar, simpelnya kamu dapat membuatnya seperti berikut ini.

<img src="http://alamatweb.com/gambar.jpg" />

Atribut src adalah alamat URL gambar tersebut diupload.