Learn about HTML

Dasar dan Pengenalan Belajar HTML

WEB PROGRAMMING

MODUL PEMBELAJARAN HTML

HTML? Mungkin sangat asing bagi Anda yang masih awam dalam dunia internet khususnya dalam dunia programming. Ya, HTML merupakan sesuatu yang kita jumpai setiap saat kita bermain dengan internet dan merupakan sebuah bahasa pemrograman dasar yang harus diketahui oleh seseorang yang ingin terjun ke dunia web developer. Hal tersebut dikarenakan HTML merupakan pondasi dasar dalam pembangunan sebuah website dimana kode=kode tersebut yang diolah oleh sebuah web browser untuk menyajikan sebuah tampilan website agar dapat dilihat dan dimengerti oleh orang awam.

 

Apa itu HTML?

Hyper Text Markup Language / HTML adalah sebuah bahasa mark up yang digunakan dalam penyusunan sebuah halaman website. HTML ini disimpan dengan ekstensi standar berupa .htm ataupun .html yang nantinya akan diproses oleh sebuah web browser ( firefox, opera, chrome, dsb) menjadi sebuah tampilan website yang menarik. Dalam penggunaannya secara umum HTML ini dipadukan dengan bahasa pemrograman yang lain yaitu CSS, JS (Java Script), dan PHP untuk memberikan hasil web yang lebih menarik dan dinamis meskipun sebenarnya HTML dapat berdiri sendiri (akan tetapi tampilan websitenya akan menjadi sangat tidak menarik). HTLM memiliki element-element yang tersusun dari tag-tag yang memiliki fungsinya masing-masing untuk membangun sebuah website. Seperti tag heading, title, paragraph, form, tombol, list, dsb.

 

Fungsi dan Kegunaan HTML

Sebagai sebuah pondasi dalam pembangunan sebuah halaman website maka HTML memiliki fungsi dan kegunaan sebagai berikut:

  1. Menjadi kerangkan dasar dalam pembuatan sebuah halaman website.
  2. Mengcover berbagai element sesuai dengan kebutuhan.
  3. Membuat sebuah judul halaman website untuk ditampilkan pada title bar browser.
  4. Membuat heading atau format judul
  5. Membuat sebuah table
  6. Menyusun sebuah list
  7. Membuat sebuah paragraph
  8. Membuat garis
  9. Membuat huruf tebal, cetak miring, bergaris bawah.
  10. Membuat form
  11. Membuat tombol
  12. Menampilkan gambar, video ataupun kontan lainnya. Dan berbagai kegunaan lainnya.

 

Simple HTML script

Contoh sebuah halaman dengan HTML sederhana

 

 

Penjelasan untuk masing-masing tag dari halaman HTML sederhana:

  • < !DOCTYPE html> sebuah deklarasi yang digunakan untuk menyatakan bahwa dokumen tersebut merupakan sebuah dokumen dengan bahasa HTML (khususnya HTML 5)
  • Tag <html> merupakan element utama dalam sebuah halaman HTML
  • Tag <head> merupakan sebuah element yang memuat berbagai macam informasi meta-data mengenai sebuah halaman HTML
  • Tag <title> digunakan untuk menyatakan judul dari dokumen.
  • Tag <body> merupakan elemen penanda untuk semua unsur isi yang dapat dilihat dari sebuah halaman.
  • Tag <h1> menyatakan sebuah kalimat yang merupakan sebuah heading yang besar
  • Tag <p> menyatakan sebuah element yang berisikan sebuah paragraph.

 

HTML Tag

HTML tag adalah sebuah elemen yang ditandai dengan tanda <>:

<tagname> isi dari sebuah elemen </tagname>

 

  • Tag HTML tersusun dari sebuah tag yang berpasangan seperti <p> dan </p>
  • Tag yang pertama disebut sebagai tag pembuka dan yang kedua sebagai tag penutup.
  • Tag penutup ditulis sepertihalnya tag pembuka, hanya saja ditambahkan tanda garis miring “/” sebelum nama tag tersebut.

 

Web Browsers

Kegunaan dari web browser (Chrome, IE / Microsoft Edge, Firefox, Opera, Safari, Comodo Browser,dll) adalah untuk membaca dan menerjemahkan kode HTML dan kemudian menampilkannya.

Code in HTML

Kode dalam bentuk bahasa HTML

HTML in Browser

Tampilan setelah diproses oleh browser

 

 

Struktur Halaman HTML

Berikut ini adalah gambaran dari visualisasi struktur sebuah halaman HTML:

HTML Structure Visualization

Visualisasi Struktur HTML

Pada penerapannya, kode yang nantinya ditampilkan pada jendela browser adalah kode yang berada di dalam area berwarna putih (berada di dalam tag body).

Deklarasi <!DOCTYPE> merepresentasikan jenis sebuah dokumen yang bertujuan untuk membantu web browser menampilkan halaman web dengan benar. Penulisannya dilakukan 1x dan berada di posisi paling atas sebelum tag apapun serta tidak bersifat case sensitive (besar kecil huruf tidak berpengaruh).

 

Sejarah Singkat mengenai perkembangan HTML

Sejak pertama kali sebuah web diperkenalkan, telah ada beberapa versi dari HTML yaitu:

Versi Tahun
HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2014

Nah, begitulah sekilas mengenai pembelajaran awal mengenai pengenalan HTML sebagai bahasa pemrograman untuk membuat sebuah web. Terimakasih banyak sudah membaca dan tunggu materi selanjutnya.

Source : dari berbagai sumber.

CafadaNet Your IT Partner and Solutions located at Indonesia , JGY, ID . Reviewed by 608 customers rated: 4.8 / 5