Tiga Bahasa dalam Pembuatan Website
1. Html
Yang pertama sudah pasti Html. Karena Html ini adalah bahasa inti dari pembuatan website. Tanpa menggunakan html, kita akan lebih sulit untuk membuat website.
2. Css
Yang kedua ada Css. Css termasuk ke dalam bahasa penyusun website, lebih tepatnya Css ini adalah pelengkap dari Bahasa html. Tugas Css ini adalah membuat tampilan agar terlihat menarik.
3. Javascript
Yang ketiga ada Bahasa Javascript. Javascript juga sebagai pelengkap dari Bahasa Html dan Bahasa Css. Fungsi Javascript adalah agar website terlihat lebih hidup. Misalnya dengan Javascript kita bisa membuat pop up untuk iklan atau bisa juga membuat alert untuk notifikasi untuk website.
Apakah Html Itu Penting ?
Kalau menurut saya, Html termasuk bahasa yang penting dan wajib dipelajari khusus nya bagi para web developer ( Pengembang Website ). Selain bisa digunakan untuk pembuatan website, html juga bisa digunakan untuk membuat Aplikasi Android. Jika kamu ingin mencoba membuat Aplikasi Android menggunakan bahasa Html, kamu bisa mencobanya menggunakan Cordova.
Sejarah Html
Html pertama kali dibuat oleh tim Berners-Lee yang merupakan seorang ahli fisika pada lembaga penelitian CERN ( Conseil Européen pour la Recherche Nucléaire ) yang ada di Swiss. Tim Barners-Lee awalnya memiliki ide mengenai sistem hypertext yang menggunakan basis internet. Untuk versi pertama dari html hanya memiliki 18 tag dan dikeluarkan pada tahun 1991 oleh tim Barners-Lee.
Html dirancang berdasarkan pada konsep bahasa markup yang dikenal dengan SGML ( Standard Generalized Markup Language ). SGML adalah sebuah standar internasional untuk membuat dokumen dengan tanda ( markup ). Jadi bisa dibilang bahwa html merupakan hasil implementasi dari SGML. Adapun beberapa tag html hasil implementasi dari SGML, diantaranya : <title>, <p>, <li>, <h1>, <h2>, <h3>, <h4>, <h5>, dan <h6>. Namun tidak semua tag dalam bahasa html berasal dari hasil implementasi dari SGML. Salah satunya adalah hyperlink yang merupakan hasil pemikiran murni dari tim Barners-Lee.
Versi Html
Selain itu, Html juga memiliki beberapa versi, Berikut ini adalah beberapa versi dari html mulai dari pertama hingga saat ini.
- Html 1.0 dibuat pada Juni 1993. Html 1.0 merupakan versi html yang pertama. Sayangnya versi ini tidak resmi beredar di pasaran.
- Html 2.0 dibentuk pada tanggal 24 November 1995. Html 2.0 merupakan versi html yang kedua dan versi ini merupaka versi pertama yang beredar di pasaran dan dirilis oleh IETF ( Internet Engineering Task Force ).
- Html 3.0 dibentuk pada tanggal 28 Maret 1995. Namun sangat disayangkan versi ini gagal beredar karena memicu berbagai perdebatan.
- Html 3.2 dibentuk pada 14 Januari 1997. Html 3.2 resmi dirilis oleh W3C ( Wire Wide Web Consortium ) pertama kalinya.
- Html 4.0 dibentuk pada 24 April 1998. Versi 4.0 merupakan hasil pengembangan dari versi sebelumnya yaitu versi 3.2
- Html 4.01 dibentuk pada 24 Desember 1999. Versi 4.01 merupakan hasil perbaikan dari versi sebelumnya yaitu versi 4.0
- Xhtml 1.0 dibentuk pada tanggal 26 Desember 2000. Versi Xhtml ini merupakan hasil pengembangan dari versi sebelumnya yaitu versi Html 4.0 dengan mengadopsi xml.
- Xhtml 2.0 dibentuk sekitar Agustus 2002 sampai Juli 2006. Versi ini merupakan versi kedua dari Xhtml versi 1.0.
- Html5 dibentuk pada 28 Oktober 2014. Versi html ini masih digunakan hingga saat ini.
Peralatan Yang Diperlukan Untuk Belajar Html
Sebelum membuat codingan nya, pastikan kamu sudah menyiapkan peralatan yang dibutuhkan untuk belajar html. Apa saja peralatan yang dibutuhkan ? Simak dibawah ini.
1. Text Editor
Apa itu Text Editor ? Text Editor adalah sebuah aplikasi yang digunakan untuk menuliskan codingan. Di dalam text editor tersebut kita bisa menuliskan berbagai macam bahasa program. Namun ada beberapa Aplikasi Text Editor yang hanya support untuk satu bahasa program saja. Berikut ini adalah rekomendasi Text Editor yang sebaiknya kamu gunakan.
Jika kamu menggunakan Handphone Android, kamu bisa memilih beberapa text editor berikut ini
- AnWriterFree Html Editor
- Acode
- Dcoder
- Quick Edit
- Spck Editor
Jika kamu menggunakan iOS, kamu bisa memilih beberapa text editor berikut ini
- Textastic
- Koder
- iEditor
- Edhita
Jika kamu menggunakan Windows, kamu bisa memilih beberapa text editor berikut ini
- Sublime Text
- Notepad
- Notepad ++
- Atom
- Visual Studio Code
2. Browser
Yang kedua ada Browser. Tanpa adanya browser, kita tidak akan bisa menjalankan sebuah program html. Berikut ini adalah beberapa browser yang mungkin bisa kalian coba.
- Google Chrome
- Mozilla Firefox
- Opera Mini
- UC Turbo
- UC Browser
Membuat File Html
Setelah menyiapkan kedua peralatan seperti diatas, sekarang coba buka text editor nya dan cobalah tuliskan codingan dibawah ini.
<!DOCTYPE html>
<html lang="en">
<head>
<title> Belajar Html</title>
</head>
<body>en
<p>Selamat Datang di Blog Freeze Coder</p>
</body>
</html>
Setelah itu, jangan lupa untuk menyimpan file codingan nya dengan ekstensi .html (Misalnya: index.html atau belajar.html)
Struktur Dasar Html
Dalam codingan html, kita tidak bisa sembarang menuliskan codingan nya. Html juga memiliki beberapa struktur penyusun nya. Jadi pastikan kamu memahami struktur dasar html terlebih dahulu
1. Struktur Deklarasi
Jika kita perhatikan codingan diatas, terdapat code <!DOCTYPE html> pada barisan pertama. Code itulah yang bisa kita sebut sebagai bagian deklarasi dari Html5. Lalu apakah kita wajib menyertakan code tersebut ? Sebenarnya kalaupun kita tidak menyertakan code tersebut, codingan kita tetap bisa di jalankan. Namun jika tidak menyertakan code tersebut, termasuk melanggar aturan yang dibuat oleh W3C.
Setelah code <!DOCTYPE html>, terdapat code <html lang="en">. Apa fungsi code <html lang="en"> ? Dalam bahasa html, kita wajib menyertakan tag <html> agar broswer dapat mengenali dan membaca file html nya. Kemudian fungsi atribut lang="en" adalah untuk menyatakan bahwa konten html tersebut menggunakan bahasa inggris.
2. Struktur Head
Struktur head merupakan bagian kepala dari html. Struktur head dimulai dari tag <head> dan diakhiri dengan penutupnya tag </head>. Berikut ini adalah beberapa fungsi tag <head> :
- Dapat digunakan sebagai tempat import codingan Css dan Javascript
- Digunakan untuk menyertakan Tag meta untuk SEO
- Dapat digunakan sebagai import file untuk favicon website
Selain ketiga fungsi diatas, di dalam tag <head> juga kita bisa membuat judul untuk website menggunakan tag pembuka <title> dan tag penutupnya </title>.
3. Struktur Body
Struktur Body merupakan bagian badan dari file html. Bagian body ini lah yang akan di tampilkan pada web browser. Struktur body dimulai dari tag <body> hingga tag penutupnya </body>. Dalam tag <body> kamu bisa menuliskan codingan apapun sesuai dengan keinginanmu.