Anak Males – Ketika kita ingin menjadi seorang web developer maka HTML adalah dasar yang wajib untuk di pelajari pemula.
Pasti sudah banyak sekali yang sudah mendengar mengenai html sebelemunya kan, namun tidak ada salahnya jika ingin membaca tutorial ini untuk mengenal dasar dasar html.
Karena di sini kita akan membahas dari nol hingga kita bisa membuat halaman ala-ala html sendiri.
Kita mulai aja kali ya.
Apa Itu HTML ?
HTML adalah singkatan dari Hypertext Markup Language. Siapa juga yang tidak kenal dengan html ? Seperti nama singkatannya, dimana html adalah salah satu bahasa markah yang dibangun untuk merepresentasikan sebuah halaman website.
Jika kita mengibaratkan sebuah website adalah tubuh manusia, maka html adalah sebuah tulang/kerangkanya.
Karena html memang seperti itu, hanya sebuah strukturnya saja.
HTML mempunyai peran untuk menentukan struktur konten dan tampilan dari sebuah website.
3 Hal Yang Dibutuhkan untuk Membangun Website
Untuk membuat sebuah website yang sangat keren setidaknya kita membutuhkan beberapa bahasa yang sangat berperan penting.
Berikut ini adalah beberapa hal yang harus di butuhkan untuk membangun website.
- HTML
- CSS
- JS (Javascript)
Dengan tiga bahasa tersebut maka kita sudah bisa membuat sebuah website yang keren.
Seperti yang sudah kita bahas, bahwa HTML kita anggap sebagai tulang, sendi dan lain sebagainya untuk merepresentasikan struktur website.
Kemudian untuk mempercantik tampilan website, maka kita membutuhkan CSS. Kita mengannggap CSS sebagai kulitnya, atau mungkin baju, aksesoris lainnya.
Dengan adanya CSS maka tampilan website akan lebih keren lagi karena bisa di animasikan dan lain lain.
Sementara itu, kita menggunakan Javascript untuk memberikan sebuah aksi terhadap sebuah website. Dalam kerangka anatomi tubuh, yang bisa menggerakan seluruh tubuh adalah sang otak.
Maka Javascript adalah otaknya website. Contohnya seperti membuat slider gambar, menampilkan popup dan masih banyak lagi.
Sejarah Awal Kemunculan HTML
Kita bahas sejarah awal mula kemunculan bahasa markup satu ini dulu ya. Jadi awal dari kemunculan HTML dimulai pada tahun 1980.
Siapa yang tahun segitu udah di lahirkan hmm.
Dimulai dari sebuah lembaga yang bernama CERN(Conseil Européen pour la Recherche Nucléaire) yang artinya adalah Komisi Eropa untuk Penelitian Fisika Nuklir.
Nuklir ngga tuh wkwk, bukan perusahaan teknologi loh.
Tapi seiring berjalannya waktu, timbul permasalahan dimana para pekerja dan peneliti mereka bekerja menggunakan software dan hardware yang berbeda beda.
Saat itu banyak pekerjaan yang dilakukan menggunakan email seperti pengiriman dokumen penelitian, dokumen teknis dan masih banyak lagi.
Namun karena saat itu belum ada yang namanya hyper link, membuat para peneliti CERN kesulitan saat ingin membuat rujukan ke dokumen lainnya.
Memang kita bisa menyebutkan judulnya, tapi sangat sulit untuk menemukannya karena jumlahnya yang banyak juga.
Dari masalah ini, maka Tim Berners-Lee akhirnya turun tangan untuk mengembangkan software yang bernama Enquire.
Beliau pun akhirnya memulai project Enquire pada sekitar 23 Juni 1980 sebagai sebuah program hypertext yang dibuat dengan menggunakan bahasa pemrograman pascal.
Program ini berjalan di terminal atau berbasis teks.
Namun pada akhirnya project ini di hentikan karena mengalami kegagalan, yang menurut Tim sendiri kesulitan melakukan koordinasi dan menjaga agar informasi tetap terbaru.
Dan masalah yang di hadapi oleh CERN masih belum terselesaikan oleh Enquire.
Tidak menyerah sampai di situ, Tim kemudian memutuskan untuk membuat sebuah proposal mengenai sistem hypertext yang berbasis internet pada tahun1989.
Untuk yang penasaran isi proposalnya bagaimana, bisa di lihat disini : The original proposal of the WWW, HTMLized.
Kurang lebih isi proposalnya adalah menjelaskan bagaimana konsep HTML.
Ada dokumen Hypertext yang di simpan di dalam server kemudian ada program di sisi client yang digunakan untuk membuka dokumen HTML.
Tidak hanya itu saja, ada juga hyperlink yang digunakan untuk menghubungkan dokumen satu dengan dokumen lainnya.
Kemudian di tahun 1991, Tim lagi lagi, menerbitkan dokumen yang berjudul : Tag used in HTML.
Dimana dokumen ini berisi penjelasan mengenai 18 tag awal yang menjadi konsep dasar HTML yang sudah berkembang pesat sampai saat ini.
HTML sebenarnya dirancang berdasarkan konsep bahasa markup yang dikenal dengan SGML(Standard Generalized Markup Language).
Apa itu SGML ?
SGML adalah standar internasional yang digunakan untuk membuat dokumen dengan markup, bisa di bilang HTML adalah implementasi dari SGML.
Ide Tim ini kemudian disebarkan kedalam sebuah mailing listdan menjadi perhatian dari ilmuan komputer di seluruh dunia.
Kemudian HTML di terapkan oleh CERN dan menjadi website yang pertama kali di buat di dunia.
Lihat disini : The World Wide Web Project.
Bagaimana Pengembangan Versi HTML ?
Tidak sampai di pembuatan website pertama saja menggunakan HTML.
Tapi HTML juga sampai saat ini sudah berkembang sangat pesat, dari yang tadinya hanya mempunyai beberapa tag html sekarang sudah lumayan banyak dan fungsinya juga bertambah.
HTML pun sudah mempunyai beberapa versi, mau itu dari versi yang paling tua sampai ke versi terbarunya.
Berikut ini adalah pengembangan versi pada HTML :
- HTML 1.0 (Juni 1993) merupakan versi HTML pertama, tapi tidak secara resmi di rilis.
- HTML 2.0 (November 1995) adalah versi kedua yang resmi pertama kali beredar di pasaran dan di rilis oleh IETF
- HTML 3.0 (Maret 1995) merupakan versi gagal beredar, karena banyak perubahan yang memicu perdebatan.
- HTML 3.2 (Januari 1997) versi resmi yang dirilis oleh W3C pertama kali.
- HTML 4.0 (April 1998) merupakan versi pengembangan dari versi versi 3.2
- HTML 4.01 (Desember 1999) perbaikan dari versi sebelumnya
- XHTML 1.0 (Januari 2000) pengembangan dari HTML versi 4.01 yang bisa mengadopsi XML
- XHTML 2.0 (Augustus 2002—Juli 2006) versi kedua dari XHTML
- HTML 5 (Oktober 2014) versi yang di gunakan sampai saat ini.
Begitulah perkembangan HTML menempuh sejarah sampai saat ini kita menggunakan HTML 5 untuk membuat sebuah website.
Mengapa Kita Perlu Belajar HTML ?
Pertanyaan yang akan muncul saat ini adalah kenapa kita harus belajar HTML ?. Mungkin kalau kita adalah kaum kaum mobile tidak begitu berarti untuk bahasa markah ini.
Namun perlu di ingat untuk kita yang ingin menjadi seorang web developer maka wajib hukumnya untuk belajar HTML.
Berikut adalah alasan kenapa harus belajar HTML terutama dasar dasarnya :
- HTML merupakan dasar dari segala pemrograman website, maka dari itu wajib hukumnya untuk belajar ini.
- Sebagai gerbang terdepan sebelum kita mempelajari CSS dan Javascript bahkan sampai PHP sekalipun.
- Kalau kita menjadi blogger, maka dengan memahami HTML akan membantu kita untuk mengubah tampilan blog
- Dan lain sebagainya.
Persiapan Untuk Belajar HTML Dasar
Kita akan praktikan sedikit ilmu dari HTML.
Tapi karena kita akan belajar HTML, maka kita perlu mempersiapkan apa saja yang harus digunakan untuk belajar HTML kedepaannya.
Contoh yang harus di siapkan adalah alat alat sebagai berikut ini.
1. Teks Editor Untuk Menulis HTML
Hal pertama yang yang harus kita lakukan adalah memilih teks editor, karena tanpa adanya teks editor maka kita tidak akan bisa menulis bahasa pemrograman apapun termasuk HTML.
Mau menggunakan notepad boleh, notepad++ boleh juga atau bahkan sublime juga sangat boleh.
Ada banyak sekali teks editor yang bisa digunakan untuk menulis HTML kok. Kita bebas menggunakan teks editor apapun.
Apapun teks editornya, yang penting bisa digunakan untuk membuat dan menulis dokumen HTML.
Namun kita akan menggunakan teks editor spesifik yaitu teks editor Visual Studio Code.
2. Web Browser untuk Menjalankan HTML
Yang kedua adalah web browser yang akan kita gunakan untuk melihat tampilan website kita yang dibuat menggunakan HTML.
Dokumen HTML akan di baca oleh browser yang kemudian akan tersampaikan kepada user.
Kita bebas menggunakan browser mana saja, karena memang sekarang ini sudah banyak sekali browser yang super duper canggih.
Jika ingin sebuah saran, maka gunakan web browser dengan versi terbarunya, karena kita juga bisa menggunakan HTML versi terbaru juga.
Google Chrome saya rasa sudah cukup, atau jika memang ingin tambahan bisa menggunakan firefox dan alternatifnya bisa menggunakan microsoft edge.
Kita Buat Hello World di Dokumen HTML
Setelah kita mengetahui apa yang perlu di siapkan ketika kita ingin ngoding HTML, maka kini saatnya kita untuk mempraktikannya.
Hello World adalah dua kata yang sangat familiar di kalangan programmer. Kita akan mencoba menampilkan teks sederhana tersebut menggunakan HTML.
Bukalah teks editor yang sudah kita bahas sebelumnya, kemudian masukan kode berikut ini.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Hello World !!</title>
</head>
<body>
<p>Hello World</p>
</body>
</html>
Setelah itu simpan kedalam file dengan nama “hello.html”.
Kemudian coba running dokumen HTML diatas di browser yang sudah kita bahas, maka akan tampil hasilnya seperti dibawah ini.
Jika sudah seperti itu, maka selamat 🎉🎉…
Kita telah berhasil membuat dokumen website menggunakan HTML tanpa adanya hambatan.
3 Hal yang Perlu Diperhatikan Untuk Penamaan File HTML
Ada beberapa poin yang harus di perhatikan saat kita sedang memberikan sebuah nama di dalam dokumen HTML.
Karena, penamaan HTML akan berpengaruh terhadap keberlangsungan hidup website kita nantinya.
Apa saja memangnya yang perlu diperhatikan saat menamai file HTML ? Jadi berikut ini adalah 3 hal yang harus di perhatikan dalam penulisan file HTML.
1. Extensi File HTML
Nah, yang pertama adalah file HTML itu harus berekstensi “.html”, “.xhtml” (untuk file XHTML) dan “.htm” saja.
Jika kita tidak menggunakan ekstensi ini, maka dokumen file HTML tidak akan bisa di baca oleh browser kita.
Contohnya seperti kasus berikut ini :
Sudah jelas jika file dengan ekstensi selain yang di sebutkan tidak akan terbaca oleh browser. Jadi yang akan muncul hanyalah script saja.
2. Penamaan Homepage
Jika kita ingin membuat sebuah halaman untuk homepage, maka kita sebaiknya menggunakan nama “index.html”.
Kenapa ?…
Karena file dengan nama index.html akan otomatis di buka saat website di kunjungi.
Sebagai contoh, ketika kita membuka website seperti anakmales.com, maka yang akan terbuka adalah file dengan nama index.html.
3. Hindari Penggunaan Spasi Pada Nama File
Memberi nama file menggunakan spasi sangat tidak di sarankan, bukannya tidak di perbolehkan namun nantinya jika file HTML di berikan nama menggunakan spasi maka akan berdampak pada url website kita.
Contohnya seperti saat kita membuat sebuah file dengan nama hello world. Maka yang ada nanti urlnya seperti berikut ini.
Perhatikan untuk urlnya.
file:///C:/Users/anakmales/Downloads/hello%20world.htmlJika kita menggunakan spasi, maka url akan diubah menjadi “%20”.
Itu sangat tidak di rekomendasikan, karena tampak jelek dan tidak mudah untuk di ingat.
Namun sebagai pengganti dari spasi, kita bisa menggunakan tanda baca mines “-“ atau underscore “_”.
4. Penggunaan Huruf Besar dan Tanda Baca
Emang sih ketika kita membuat sebuah paragraf atau kita harus di awali dengan huruf kapital, namun untuk penamaan file HTML usahakan hindari penggunaan huruf besar.
Karena selain, tidak enak di baca oleh manusia, untuk mesin juga tidak baik. Apalagi jika menggunakan tanda baca yang tidak diperlukan.
Contoh penamaan yang tidak di anjurkan.
- HelloWorlD.html
- hell*$#.html
Enak ngga di baca ?
Kalau seperti itu maka urlnya tampak jelek di depan mesin. Udah jelek di depan dia, mesin juga nilai jelek.
Struktur Dasar HTML
Dokumen HTML yang tadi kita buat, tentu saja mempunyai struktur. Apa saja struktur yang ada di dalam HTML ? Mari kita bahas.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Hello World !!</title>
</head>
<body>
<p>Hello World</p>
</body>
</html>Jadi dari kode diatas kita bisa simpulkan bahwa terdapat 3 bagian yang menjadi penopang berdirinya dokumen HTML.
- Bagian Deklarasi
- Bagian Head
- Bagian Body
Kita bahas satu persatu.
1. Bagian Deklarasi HTML
Perhatikan baris berikut ini.
<!DOCTYPE html>Baris tersebut merupakan tag deklarasi untuk menyertakan tipe dokumen sekaligus versinya. Pada contoh tersebut, kita menyatakan dokumen ini bertipe HTML dan versinya adalah HTML 5.
Lalu apakah kita boleh untuk tidak menggunakan deklarasi ini ?
Sebenarnya boleh aja, lagi pula dokumen HTMLnya akan tetap berjalan di browser. Namun akan melanggar aturan standar yang dibuat oleh W3C.
Kemudian dibawah nya terdapat tag seperti berikut ini.
<html lang="en" dir="ltr">Tag html memang sudah wajib di sertakan disetiap file HTML.
Kemudian di dalam tag ini, menyertakan atribut lang=”en” yang digunakan untuk menyertakan kalau dokumen HTML ini akan menggunakan bahasa inggris.
Kemudian untuk dir=”ltr” digunakan untuk mendefinisikan arah tulisan dari arah kiri. Tag html ini adalah tag yang mempunyai tag penutup, seperti ini <html></html>.
Nanti kita akan membahas berbagai macam tag HTML di tutorial HTML berikutnya.
2. Bagian Head HTML
Yang kedua adalah bagian head. Sama seperti tag html yang mempunyai penutup <head></head>.
<head>
<meta charset="utf-8">
<title>Hello World !!</title>
</head> Didalam bagian head HTML kita bisa memasukan berbagai macam tag, namun tag ini nantinya akan di baca oleh mesin.
Seperti contohnya :
- Tag meta yang berguna untuk keperluan SEO
- Tag title untuk memberikan judul situs
- Tag style untuk menempatkan CSS
- Tag script untuk menempatkan javascript
- Dan masih banyak lagi
3. Bagian Body
Yang terakhir adalah bagian body. Bagian ini terkenal dengan bagian yang akan tampil di web browser. Untuk penulisannya sama seperti tag tag lainnya yang menggunakan penutup.
<body>
<p>Hello World</p>
</body>Didalam tag ini kita bisa memasukan berbagai macam tag, seperti tag yang memang digunakan untuk membuat paragraf dan lain lain.
Bahkan jika kita butuh javascript juga bisa dimasukan di dalam tag body.
Penutup
Baiklah, mungkin kita cukupkan tutorial kali ini, mungkin sudah cukup panjang untuk sebuah pengenalan saja.
Tutorial berikutnya kita akan membahas mengenai Tag, Elemen dan Atribut di dalam HTML jadi sampai jumpa di tutorial tersebut. Babai.