Pada suatu hari, teman saya Irvan Riswanto (iriswanto) bilang, tutorial di Jaco mendingan banyakin yang dasar-dasar untuk orang yang mau belajar membuat aplikasi. Akhirnya 'beliau' membuat tutorial dasar-dasar mySQL di situs ini. Dan akhirnya pula saya jadi ingin ngasi tutorial-tutorial paling dasar dalam membuat aplikasi web. Apa yang harus dipelajari jika kita ingin membuat sebuah website? Yup, jawabannya adalah HTML. Yuk kita intip HTML itu seperti apa.
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 deklerasi 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 diberi atribut align dengan nilai "center", yang berfungsi untuk mengetengahkan tulisan</p>
Contoh di atas adalah contoh untuk atribut src, height, width, dan align.
Element mempresentasikan isi secara keseluruhan isi dari sepasang tag, attribute, beserta isinya.
<img src="gambar.jpg" height="100" width="200" /> <p align="center">Teks ini diberi atribut align dengan nilai "center", yang 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. Morbi ultricies magna in ligula adipiscing non congue tellus bibendum. Nunc aliquet vehicula turpis vestibulum congue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis dapibus pellentesque lacus, suscipit congue elit tincidunt ut. Mauris euismod, lectus eget auctor commodo, erat nisi blandit quam, viverra viverra ipsum felis sed erat. Nam venenatis iaculis ante, id rhoncus ligula pretium sit amet. Integer eu enim ut nibh convallis euismod. Nam varius iaculis lacus eu commodo. Fusce sem sapien, ultricies non convallis a, tempus sit amet lectus. Donec ullamcorper est id metus mattis adipiscing. Etiam mauris elit, rhoncus ac euismod sit amet, consectetur eu est. Sed nec sapien aliquet felis vulputate semper. Donec fringilla malesuada vestibulum. Cras a iaculis orci. Proin vestibulum lobortis dui, a gravida dolor interdum a. </p> <p> Donec adipiscing ligula sed nisi porta lacinia. Nullam vulputate dictum magna. Maecenas urna purus, consequat eu blandit non, pretium et justo. Integer orci purus, porta consectetur ullamcorper non, bibendum ut nisi. Cras luctus turpis non lorem rutrum ac placerat sem ultricies. Maecenas tincidunt malesuada viverra. Nullam vel elit diam, porta porttitor mi. In sem nisl, accumsan non vulputate sed, porta vitae ante. Vestibulum at interdum lorem. Sed dapibus nunc quis turpis pellentesque faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris commodo, quam ac suscipit pulvinar, mauris eros volutpat magna, ac mattis neque erat ut odio. Curabitur at lacinia metus. Vivamus rhoncus eleifend facilisis. </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.
Untuk mengubah lebar dan tinggi gambar, gampang... kamu tinggal menambahkan atribut width dan height di dalam tag tersebut.
<img src="http://alamatweb.com/gambar.jpg" width="200" height="100" />
Membuat Hyperlink
Hyperlink/Anchor adalah elemen di dalam HTML yang berfungsi sebagai 'pentaut' web kita dengan alamat URL yang lain yang berbentuk teks. Jika kita mengklik teks tersebut, maka browser akan memindahkan kita ke alamat yang dituju. Bentuknya seperti ini:
<a href="http://www.cheyuz.com">Klik di sini untuk menuju situs saya</a>
Hasilnya adalah sebuah teks bertuliskan Klik di sini untuk menuju situs saya, dan ketika teks tersebut diklik, maka browser akan memindahkan teks tersebut ke situs cheyuz.com. (promosi)
Membuat Link Bergambar
Apa sih link bergambar? Link bergambar itu adalah hyperlink yang berbentuk gambar. Di atas kan sudah kita coba bagaimana membentuk sebuah hyperlink yang berupa teks, kali ini bagaiaman kita membuat hyperlink yang berupa gambar. Caranya adalah dengan memasukkan tag <img> beserta isinya ke dalam tag <a>.
<a href="http://www.cheyuz.com"><img src=""http://alamatweb.com/gambar.jpg /></a>
OK sementara segini aja dulu ya, pegel nih jari saya hehehe... Pada tutorial berikutnya, insya Allah kita akan belajar bagaimana membuat tabel, kemudian load css, load javascript, dan sebagainya. Makanya, follow saya okeee, jadi kamu gak ketinggalan tutorial-tutorial dari saya.. hehehe..
~ Jagocoding.com
Stand by with Me, @cheyuz,
Jagocoding, learn and share your code!
