Tutorial HTML: Prosedur dan Sistematis HTML

4 min


prosedur-dan-sistematis-html

Dalam artikel ini saya akan membahas secara rinci prosedural teknologi HTML. Sistematis dan teknis tentang HTML yang mungkin belum pernah Anda pelajari sebelumnya akan di kupas tuntas dalam tulisan ini.

Tulisan ini tidak akan mendefinisikan apa itu HTML. Apabila Anda ingin mengetahui lebih lanjut definisi tentang HTML, Anda dapat membacanya di artikel Mengapa Anda Harus Mengerti HTML dan Bagaimana Cara Menjadi Website Developer.


Prosedur HTML & Web Browser

HTML adalah sebuah kode yang diterjemahkan oleh peramban web (web browser) yang hasilnya berbentuk sebuah visual objek yang dapat dilihat dengan baik oleh mata manusia ketika menggunakan peramban web.

Jadi, dalam hal ini, peramban web bertugas untuk menerjemahkan kode HTML menjadi sebuah output visual dalam bentuk teks, gambar, audio, maupun video.

Untuk contoh sederhananya Anda bisa perhatikan kode berikut:

Coba Anda copy kode di atas lalu paste di aplikasi Notepad. Simpan (Save as) kode tersebut dengan nama contoh.html (pastikan format file adalah .html).

Lalu buka file contoh.html dalam peramban web Anda.

Apabila hasil dari kode file contoh.html persis seperti gambar di bawah ini, itu artinya kode HTML telah diterjemahkan oleh peramban web menjadi sebuah objek visual yang lebih mudah dibaca oleh pengguna.

screenshoot-contoh-html

Apabila sebuah peramban web tidak dapat menerjemahkan kode HTML, maka hasilnya mungkin akan menjadi seperti ini.

source-contoh-html

Dari gambar di atas terlihat bahwa kode HTML tidak ditampilkan dengan baik, atau peramban web tidak menerjemahkan kode HTML menjadi sebuah objek visual, atau dalam kata lain hanya menampilkan sebuah teks polos (plain text).

Proses Web Browser Menerjemahkan Kode

Dalam ilmu pengembangan website, proses penerjemahan kode disebut dengan eksekusi (execute), atau dalam kata lain bisa juga disebut kompilasi (compiled).

Sama seperti kode-kode lain dalam dunia ilmu komputer, kode HTML juga melakukan eksekusi dan kompilasi.

Ketika seorang pengembang website menulis kode seperti  <h1>, <p> atau  <strong>, maka peramban web akan melakukan tahap eksekusi terhadap kode tersebut untuk ditampilkan dalam peramban web sesuai aturan yang telah diterapkan secara default dalam peramban web itu sendiri.

🤔🤔🤔😐😐😐🙄🙄🙄😕😕😕

OK, jadi penjelasan sederhananya seperti ini… Saya akan mengilustrasikan proses web browser menerjemahkan kode layaknya manusia melakukan komunikasi agar lebih mudah di pahami.

manusia = penulis kode

eksekutor = pengantar kode

peramban = penampil kode

Manusia: Hay eksekutor! Tolong antarkan kode  <h1>Saya adalah manusia</h1> ke peramban.
Eksekutor: Baik! kode <h1>Saya adalah manusia</h1> akan saya antarkan pada peramban.

Eksekutor: Halo peramban! Saya ingin mengantarkan kode  <h1>Saya adalah manusia</h1> dari manusia.
Peramban: Baiklah, saya melihat bahwa kode yang akan ditampilkan adalah  <h1> dengan tulisan  Saya adalah manusia. Tulisan tersebut akan tampil dengan warna hitam, lalu ukuran huruf (font) 20, dan ketebalan huruf cukup tebal.

Nah, dari ilustrasi percakapan di atas, peramban menyatakan bahwa kode  <h1> akan di tampilkan dengan warna hitam, ukuran huruf 20, dan ketebalan huruf cukup tebal. Ukuran huruf 20 dan ketebalan huruf cukup tebal adalah aturan yang diterapkan secara default ketika web browser menerima kode  <h1>.

Seorang pengembang web juga bisa merubah aturan default tersebut menggunakan aturan sesuai pengembang web itu sendiri.

Apabila dalam kode  <h1> ditambahkan kode  <h1 style="font-size: 16px; weight: 300; color: red;">Saya adalah manusia</h1>, maka secara otomatis tulisan  Saya adalah manusia yang tampil dalam peramban web akan berbeda dengan gaya dan aturan yang diatur secara default oleh peramban web.

Tanda (Tags) Pada HTML

Kode HTML adalah sebuah tanda (tags) yang telah teridentifikasi oleh peramban web. Contoh dari tanda dalam kode HTML adalah  <h1><strong>, atau  <p> yang telah Anda lihat di paragraf sebelumnya.

Kode HTML memiliki banyak tanda (tags). Saat ini, terdapat lebih dari 110 tanda HTML yang telah berkembang dan digunakan oleh sebagian besar website di seluruh dunia.

Setiap tanda (tags) HTML memiliki fungsi yang berbeda. Apabila Anda telah melihat contoh kode di paragraf sebelumnya, Anda pasti dapat mendefinisikan bahwa tanda  <strong> digunakan untuk mempertebal huruf.

Ada juga tanda-tanda lain yang dapat digunakan untuk menampilkan gambar, video, dan audio dalam peramban web. Namun, hal tersebut akan saya bahas di artikel selanjutnya.

Dalam praktiknya, Anda tidak perlu menghafal seluruh tanda HTML. Sebagian besar pengembang website pun hanya menghafal sebagian besar tanda HTML yang umum digunakan untuk pengembangan website.

Apakah HTML Bahasa Pemrograman?

Menurut cara pandang saya pribadi, HTML adalah bahasa pemrograman. Namun, prosedur atas pemprosesan dari setiap kode pada HTML sangat berbeda dengan bahasa pemrograman logik (logical programming language). HTML memiliki default code yang fungsinya sudah jelas dan mutlak.

Bahasa sederhananya seperti ini…

Apabila bahasa pemrograman seperti C#, PHP, Java, atau Python memiliki logika, maka HTML tidak memiliki hal tersebut. Logika dalam HTML harus dibantu oleh CSS dan Javascript agar tampilan objek sesuai dengan keinginan pengembang web. Walaupun begitu, bahasa pemrograman logik pun tidak akan pernah bisa menangani objek sebaik HTML dalam peramban web.

Contoh, bagaimana Anda membuat teks menjadi merah menggunakan bahasa pemrograman PHP? Pure PHP tanpa HTML.

Jawabannya sudah jelas, impossible. Serumit apapun Anda membuat kode dalam PHP, Anda tetap menulis kode PHP yang terdapat HTML di dalamnya,

Sisi pemrograman pada HTML memang tidak terletak pada kode, melainkan pada peramban web yang memproses setiap kode HTML menjadi objek visual.

Contoh, kode  <h1> secara default akan tampil lebih besar dibanding kode  <p>.

Selain dari itu, apabila kode HTML ditambahkan attribute, maka hasilnya akan berbeda dari objek default.

Kode  <h1> akan berbeda hasilnya dibanding  <h1 style="font-size: 16px;">. Contoh ini disebut dengan kode HTML yang memiliki sebuah attribute.

Apakah Saya Bisa Membuat Custom HTML Tags

Jawabannya bisa, tapi tidak mudah, dan tidak sulit. Contoh, apabila Anda ingin membuat tanda HTML dengan nama  <tekstebal>Di sini akan ada teks tebal</tekstebal>, maka Anda harus mempelajari Polymer. Polymer adalah salah satu Javascript Framework yang saat ini dapat membantu Anda untuk membuat tags custom pada HTML.

Namun, sebelum Anda mempelajari Polymer, ada baiknya Anda mempelajari terlebih dahulu HTML dan Javascript agar Anda lebih mudah untuk mempelajari bahasa pemrograman tingkat lanjut.


Sekian artikel ini saya buat. Apabila terdapat kesalahan dalam penulisan atau opini dalam artikel ini, mohon tinggalkan pendapat Anda melalui kolom komentar di bawah ini.

4.7/5 3 ratings

What's Your Reaction?

Sebel Sebel
0
Sebel
Pusing Pusing
0
Pusing
Sedih Sedih
0
Sedih
Kocak Kocak
0
Kocak
Terkesan! Terkesan!
0
Terkesan!
Kecewa Kecewa
0
Kecewa
Zapra Gartiast

Hay! Saya Zapra Gartiast, calon Wali Kota Bandung tahun 2024 - 2034. Mohon do'a dari kalian yang membaca :D

1
Berikan Komentar

avatar
0 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
0 Comment authors
Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Choose A Format
Story
Formatted Text with Embeds and Visuals