Berkenalan Dengan HTML Dan Bagaimana Cara Membuatnya

  • Whatsapp

HTML merupakan singkatan dari Hypertext Markup Language. Singkatan ini terdiri dari 3 komponen kata, yakni: Hypertext, Markup dan Language yaitu bahasa markup standar yang digunakan untuk membuat halaman web.

HyperText Markup Language (HTML) adalah bahasa inti dari hampir semua konten Web. Sebuah bahasa yang menggambarkan struktur dan isi semantik dari sebuah dokumen Web. Sama seperti yang dijelaskan dalam wikipedia tentang HTML : https://id.wikipedia.org/wiki/HTML

Bacaan Lainnya

Saat menjelaskan apa itu HTML, kita tidak bisa melepaskan dengan CSS (Cascading Style Sheets) dan JS (Javascript).  Untuk membuat sebuah website kita tidak bisa memisahkan antara ketiga hal tersebut yaitu HTML, CSS dan JS.

Untuk mempermudah dalam memahami apa itu HTML, mari kita buat sebuah perumpamaan seperti membangun sebuah rumah ?

  • HTML : diibaratkan seperti membangun sebuah rumah maka HTML itu adalah kerangkanya saja, hanya kerangka sebuah rumah
  • CSS : Akan memiliki fungsi untuk mengatur warna, ketinggian, panjang, atau lebar dari sebuah pintu, jendela, dinding dll. Intinya CSS memiliki fungsi untuk mengatur semua warna, bentuk ataupun ukuran dari panjang lebarnya sebuah rumah.
  • JS : Akan memiliki fungsi untuk mengatur pintu rumah dibuka kedalam / keluar, mengatur saluran air, mengatur instalasi listrik seperti Ketika di Tekan ON maka lampu kamar menyala.

Contoh :
Ketika kita menuliskan code 
HTML seperti dibawah ini :

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <title>Belajar HTML</title>
 </head>
 <body>
   <h1>Belajar HTML</h1>
   <p>Belajar Kerangka HTML</p>
   <button type="button" name="button">Pesan</button>
 </body>
</html>

 

Ketika dijalankan di browser akan menampilkan seperti ini :

 

Semua yang ditampilan dibrowser dari code HTML yang kita tulis adalah defaultnya, baik dari sisi warna ataupun ukurannya.

Ketika kita menambahkan code CSS maka tampilannya seperti ini, sesuai code CSS yang kita tulis.

 

Dan Ketika button “PESAN” kita klik, lalu menampilkan sebuah pesan, maka proses yang melakukan hal tersebut dilakukan dengan code Javascript.

 

Membuat File HTML

Langkah pertama saat kita belajar html adalah dengan membuat sebuah file HTML, di mana dalam file tersebut kita akan menuliskan code – code HTML nya.

Sebelum kita membuat file HTML, buatlah 1 buah folder di komputer dan kita beri nama “html” dimana file-file html nanti akan kita letakkan di dalam folder “html” tersebut.

Untuk membuat file dan menuliskan code html kita akan membuka Text Editor terlebih dahulu, dan kita menggunakan Text Editor ATOM.

Selanjutkan kita tampilkan folder html ke dalam Text Editor ATOM.

  • Klik File
  • Klik Add Project Folder
  • Pilih folder html yang sudah kita buat, kemudian klik OPEN
  • Dan kemudian akan tampil di dalam text editor folder yang sudah kita pilih

Selanjutkan kita akan membuat 1 buah file HTML, Caranya :

  • Klik kanan pada folder HTML yang sudah tampil di text editor atom tersebut
  • Kemudian klik New File
  • kita beri nama index dan karena file yang kita buat adalah file html, maka harus kita tambahkan ekstensi .html di belakangnya, menjadi index.html
  • Tekan Enter, dan file html kita berhasil dibuat 🙂

Note :
• penulisan nama file di html disarankan kecil semua
• Text Editor yang digunakan adalah Atom, teman-teman boleh menggunakan teks editor lainnya misal notepad ++, Visual Studio Code, Sublime ataupun yang lainnya.

Pos terkait