Dasar-dasar HTML 1 Oleh: Cecep Yusuf

Apa yang harus dipelajari jika kita ingin membuat sebuah website? Yup, jawabannya adalah HTML. Yuk kita intip HTML itu seperti apa.

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:

Ini adalah Judul Konten

Ini adalah isi paragraf, kamu dapat tulis apapun di sini

Dilihat dari kode di atas, kita dapat melihat struktur secara jelas bentuk halaman sebuah website. Saya akan jelaskan satu persatu. 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 , 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 , kita menambahkan teks yang diapit sepasang tag

dan

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:

Paragraf ini berada dalam tag "p"

Tulisan ini berada dalam tag "div"

---

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:

Teks ini diberi atribut align dengan nilai "center", yang berfungsi untuk mengetengahkan tulisan

Contoh di atas adalah contoh untuk atribut src, height, width, dan align. Element mempresentasikan isi secara keseluruhan isi dari sepasang tag, attribute, beserta isinya.

Teks ini diberi atribut align dengan nilai "center", yang berfungsi untuk mengetengahkan tulisan

Contoh di atas adalah contoh untuk element , dan element

Teks ini diberi atribut align dengan nilai "center", yang berfungsi untuk mengetengahkan tulisan

, 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

atau

atau

dan seterusnya.

Ini

Ini

Ini

Ini

adalah adalah adalah adalah

heading heading heading heading

level level level level

satu

dua

tiga

empat

Membuat Paragraf Untuk membuat paragraf, kita cukup mengapit uraian teks dengan tag

.

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.

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.

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. 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. 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: Klik di sini untuk menuju situs saya 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 beserta isinya ke dalam tag . 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!

Tentang Penulis Cecep Yusuf Hi, my name is Cecep Yusuf. However, in the virtual world I am more likely to use the name Cheyuz, which is an abbreviation of two words "Cecep" and "Yusuf". I am founder of Jagocoding.com, u can view more of me in Cheyuz.com