Pengertian dan Struktur Dasar Hypertext Markup Language

Apakah Anda sering browsing di internet?
Mencari informasi sesuatu misalnya. Ketika Anda membuka sebuah halaman web, apakah pernah terbayangkan oleh Anda bagaimana caranya seseorang membuat website? Atau bagaimana bentuk sebenarnya dibalik tampilan halaman web yang Anda lihat?

Jika Anda penasaran, silahkan klik kanan pada halaman web tersebut atau pada halaman ini melalui komputer Anda, Kemudian pilih View Page Source. Setelah itu akan muncul sebuah halaman baru yang berisi kode-kode unik dan aneh.

Kode-kode unik ini disebut dengan Kode HTML yang merupakan struktur atau bahasa utama untuk membuat sebuah website.

Apa itu HTML? Siapa yang menemukannya? Bagaimana cara membuatnya?
Untuk menjawab ketiga pertanyaan ini, fokuskan mata dan pikiran Anda pada poin-poin berikut ini!

1. Pengertian HTML

HTML adalah singkatan dari Hypertext Markup Language, yang merupakan bahasa web tingkat standar untuk membuat sebuah halaman website sehingga bisa diakses dan dipahami oleh semua pengguna internet.

Sebuah halaman web, katakan saja halaman yang sedang Anda lihat atau tulisan yang sedang Anda baca saat ini merupakan rangkaian dari beberapa kode dan tag HTML yang disusun dengan aturan-aturan tertentu dalam sebuah file berformat .html kemudian diterjemahkan oleh browser sehingga dapat ditampilkan pada layar komputer Anda.

HTML merupakan bahan dasar pembuatan sebuah website, karena pada umumnya setiap website pasti mengandung kode dan tag HTML. Bahkan di beberapa website ada juga yang memanipulasi kode HTML ini dengan bahasa pemrograman web, seperti PHP dan Javascript.

Apakah HTML termasuk bahasa pemrograman?
Seperti dikutip dari duniailkom, HTML bukanlah bahasa pemrograman (programming language), melainkan bahasa markup (markup language) atau sebuah standar yang digunakan secara luas untuk menampilkan halaman web.

HTML saat ini merupakan standar internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C).

hal ini terdengar sedikit aneh memang, karena banyak yang beranggapan bahwa HTML merupakan bahasa pemrograman web. Padahal, jika Anda telah mengenal bahasa pemrograman lain, ternyata didalam HTML tidak akan Anda temukan struktur yang biasa di temukan dalam bahasa pemrograman seperti IF, LOOP, maupun Variabel.

HTML hanyalah sebuah bahasa struktur yang fungsinya untuk menandai bagian-bagian tertentu dalam sebuah halaman web.

Jika kita menggali lebih dalam, ternyata HTML atau Hypertext Markup Language ini berasal dari dua kata, yaitu: Hipertext dan Markup Language.

  • Hypertext
    Hypertext atau Hyperlink adalah metode yang digunakan untuk berpindah-pindah dari suatu halaman web ke halaman yang lain, baik itu halaman internal maupun halaman eksternal (halaman di situs web lain) dengan cara mengklik suatu tulisan atau simbol tertentu, hal ini disebut juga dengan istilah link atau pranala.
  • Markup Language
    Istilah markup pada HTML ini dapat diartikan sebagai bahasa tanda atau suatu teknik untuk menandai teks tertentu yang ada didalam halaman web tersebut.

    Misalnya, jika Anda ingin membuat teks dengan huruf miring maka Anda akan menggunakan tag HTML <i> atau teks yang bergaris bawah maka Anda akan menggunakan tag HTML <u>, dan lain sebagainya.

Selain HTML, ada juga istilah XHTML yang merupakan singkatan dari eXtensible Hypertext Markup Language. XHTML ini merupakan penyempurnaan versi lama dari HTML 4.01 (sebelum adanya HTML5 seperti saat ini).

Tujuan XHTML adalah untuk menggantikan HTML. XHTML adalah bentuk HTML yang didefinisikan sebagai aplikasi XML yang berarti XHTML berisi semua elemen dalam HTML 4.01 dikombinasikan dengan sintaks XML.

Sekarang ini, versi terbaru dari HTML adalah HTML5 yang berisi beberapa fitur-fitur baru, akan tetapi versi ini tetap saja membawa mayoritas fitur dari versi HTML sebelumnya, yakni HTML 4.01 dan XHTML.

Seiring dengan bertambahnya pengguna internet dari waktu ke waktu, bahasa HTML pun terus dikembangkan dan ditingkatkan agar bisa menciptakan halaman web yang lebih berkualitas.

2. Sejarah HTML

Pada tahun 1980, fisikawan Tim Berners-Lee, seorang kontraktor di CERN, mengusulkan dan membuat prototype Enquire, yaitu sebuah sistem bagi peneliti di CERN untuk menggunakan dan berbagi dokumen.

Pada tahun 1989, Berners-Lee menulis sebuah memo yang mengusulkan sistem hypertext berbasis internet.


Berners-Lee menulis browser dan perangkat lunak server HTML pada akhir tahun 1990. Tahun itu, Berners-Lee dan CERN data sistem insinyur Robert Cailliau berkolaborasi pada permintaan bersama untuk pendanaan, tetapi proyek ini tidak secara resmi diadopsi oleh CERN.

Dalam catatan pribadinya dari tahun 1990 "beberapa dari bagian hypertext digunakan" dan menempatkan sebuah ensiklopedia pertama.

Deskripsi pertama yang tersedia untuk publik dari HTML adalah sebuah dokumen yang disebut "HTML Tag", pertama kali disebutkan di Internet oleh Tim Berners-Lee pada akhir 1991.

Ini menggambarkan 18 elemen yang terdiri dari desain relatif sederhana HTML, kecuali untuk tag hyperlink, ini sangat dipengaruhi oleh SGMLguid, in-house Standard Generalized Markup Language (SGML) berbasis format dokumen di CERN. Sebelas elemen ini masih ada di HTML 4.

Berners-Lee menganggap HTML menjadi aplikasi SGML. Ini secara resmi didefinisikan oleh Internet Engineering Task Force (IETF) dengan publikasi pertengahan 1993 dari proposal pertama untuk spesifikasi Hypertext Markup Language (HTML).

Internet Draft oleh Berners-Lee dan Dan Connolly, yang termasuk sebuah SGML Document Type Definition untuk mendefinisikan tata bahasa, draft berakhir setelah enam bulan, tapi itu terkenal dengan pengakuan atas tag kustom browser NCSA Mosaic untuk embedding gambar in-line, mencerminkan filosofi IETF tentang mendasarkan standar pada prototipe sukses.

Demikian pula, Dave Raggett bersaing internet Draft, "HTML + (Hypertext Markup Format)", dari akhir tahun 1993, menyarankan standardisasi fitur yang sudah diimplementasikan seperti tabel dan mengisi formulir.

Setelah HTML dan draf HTML berakhir pada awal 1994, IETF menciptakan Kelompok HTML Working, yang pada tahun 1995 selesai "HTML 2.0", spesifikasi HTML pertama dimaksudkan untuk diperlakukan sebagai standar yang implementasi di masa mendatang.

3. Perkembangan HTML

Sebelum suatu HTML disahkan sebagai suatu dokumen HTML standar, maka harus disetujui terlebih dahulu oleh W3C untuk dievaluasi secara ketat.

Dengan demikian, setiap terjadi perkembangan level, HTML memiliki suatu kelebihan yang baru dalam hal penampilannya ketimbang versi-versi sebelumnya. Jika ada bug pada perintah-perintah tertentu dapat dihindari.

Setiap terjadi perkembangan suatu versi HTML, maka mau tak mau browser pun harus memperbaiki diri agar bisa mendukung kode-kode HTML yang baru tersebut.

Seperti dikutip dari Global Komputer, HTML telah mengalami berbagai perkembangan dari tiap-tiap versinya. Berikut adalah versi-versi dari perkembangan HTML tersebut:
  1. HTML Versi 1.0
  2. HTML Versi 1.0 merupakan pionir yang di dalamnya masih terdapat banyak sekali kelemahan hingga wajar jika tampilan yang dihasilkan sangat sederhana.

    Kemampuan yang dimiliki versi 1.0 ini antara lain heading, paragraf, hypertext, list, serta cetak tebal dan miring pada teks. Versi ini juga mendukung peletakan image pada dokumennya tanpa memperbolehkan teks di sekelilingnya (wraping)

  3. HTML Versi 2.0
  4. Pada HTML Versi ini, penambahan kualitas HTML terletak pada kemampuannya untuk menampilkan suatu form pada dokumen.

    Dengan adanya form ini, kita dapat memasukkan nama, alamat, serta saran dan kritik. HTML versi 2.0 ini merupakan pionir dari adanya web interaktif.

  5. HTML Versi 3.0
  6. Versi HTML 3.0 menambahkan beberapa fasilitas baru seperti FIGURE yang merupakan perkembangan dari IMAGE untuk meletakkan gambar dan tabel.

    Selain itu, HTML ini juga mendukung adanya rumus-rumus matematika dalam dokumennya. Versi yang disebut HTML+- ini tidak bertahan lama dan segera digantikan dengan versi 3.2.

  7. HTML Versi 3.2
  8. HTML versi ini merupakan HTML yang sering digunakan. Di dalamnya terdapat suatu teknologi untuk meletakkan teks di sekeliling gambar, gambar sebagai latar belakang, tabel, frame, style sheet dan lain-lain.

    Selain itu pada HTML versi ini Kita bisa menggunakan script di luar HTML untuk mendukung kinerja HTML tersebut, seperti Javascript, VBScript dan lain-lain.

  9. HTML Versi 4
  10. HTML ini memuat banyak sekali perubahan dan revisi dari pendahulunya yaitu HTML 3.2. Perubahan ini hampir terjadi di segala perintah HTML seperti tabel, image, link, text, meta, imagemaps, form dan lain-lain.

  11. HTML Versi 4.01
  12. HTML versi 4.01 merupakan revisi dari HTML 4.0. Versi terbaru ini memperbaiki kesalahan-kesalahan kecil (minor errors) pada versi terdahulunya. HTML 4.01 ini juga menjadi standarisasi untuk elemen dan atribut dari script XHTML 1.0.

  13. HTML Versi 5.0
  14. Teknologi ini mulai diluncurkan pada tahun 2009, tetapi pada tanggal 4 Maret 2010 terdapat sebuah informasi bahwa W3C (World Wide Web Consortium) dan IETF (Internet Engineering Task Force) yaitu sebuah organisasi yang menangani HTML sejak versi 2.0 telah mengembangkan versi HTML terbaru, yaitu versi 5.0.

    HTML 5 adalah sebuah prosedur pembuatan tampilan web baru yang merupakan penggabungan antara CSS, HTML itu sendiri dengan JavaScript.

    Versi yang ke-5 ini membawa banyak sekali perubahan terhadap versi sebelumnya. Banyak tag baru yang diperkenalkan, seperti <header>,<aside>,<section>,<footer>, dan tag menarik lainnya. Selain itu, HTML 5 sudah mendukung streaming video tanpa menggunakan flash.


4. Fungsi HTML

Apa fungsi dan kegunaan HTML?
Jika dilihat dari berbagai faktor, maka HTML memiliki beberapa fungsi, antara lain:
  1. Untuk membuat suatu halaman website supaya bisa dibaca dan dipahami dengan mudah oleh pengguna internet. Pada umumnya, seluruh halaman website yang ada di internet dibuat dengan kode atau struktur html.
  2. Sebagai bahan dasar pembuatan website, misalnya website yang menggunakan Javascript (untuk mengatur perilaku web), implementasi bahasa pemrograman server PHP (Hypertext Prepocessor), dan mendesain web menggunakan CSS (Cascading Style Sheet). Semua bahasa tersebut dapat diaplikasikan jika web memiliki bahasa html sebagai dasarnya.
  3. Untuk me-markup atau menandai teks tertentu pada halaman website. Seperti membuat teks dengan huruf tebal (bold) dengan menggunakan tag HTML <b> atau teks dengan huruf miring (italic) dengan menggunakan tag HTML <i>, dan lain-lain.
  4. Untuk menampilkan tabel, gambar, video, audio dan multimedia lainnya. Biasanya kita tidak bisa langsung menyisipkan gambar, video maupun tabel pada sebuah halaman website. Karena diperlukan tag HTML tertentu supaya komponen tersebut bisa diterjemahkan oleh browser dan bisa dibaca oleh pengunjung web tersebut.
  5. Untuk menyunting tampilan atau format berkas yang akan dikirimkan melalui media daring, seperti menampilkan suatu kelompok kata dalam beberapa ukuran yang dapat digunakan untuk judul, heading dan sebagainya. Selain itu, HTML juga digunakan untuk mengubah-ubah ukuran tulisan untuk suatu karakter tertentu.
  6. Untuk menampilkan elemen widget yang membuat objek-objek lain seperti tombol (<button>), daftar (<li>), dan garis horizontal (<hr>). Selain itu, HTML juga digunakan untuk membuat Form (formulir) digital.
  7. Dan lain-lain.

5. Struktur dasar HTML

Sebelum mempelajari struktur dari HTML, ada beberapa istilah penting didalam struktur kode HTML ini yang harus Anda ketahui supaya bisa menjalankan file HTML.

  • TAG
  • HTML tidak membedakan penggunaan huruf besar maupun huruf kecil dari suatu elemen. Suatu elemen HTML terdiri dari tag-tag beserta teks yang ada dalam tag-tag tersebut.

    Tag ini dinyatakan dengan tanda lebih kecil (<) dan tanda lebih besar (>).

    Tag biasanya merupakan suatu pasangan artinya memiliki pembuka dan penutup. Jika tag pembukanya dinyatakan dalam bentuk <nama tag>, maka tag penutupnya dinyatakan dalam bentuk </nama tag>.

    Contoh: untuk menampilkan teks dengan format bergaris bawah, Teks ini terlihat bergaris bawah di browser Anda maka perintah HTML nya adalah
    <u>Teks ini terlihat bergaris bawah di browser Anda</u>

  • ATRIBUT
  • Biasanya tag awal bisa memiliki beberapa buah atribut untuk menyatakan karakteristik dari tag tersebut. Misalnya untuk format teks dalam suatu paragraf,
    <P STYLE="text-align:center">
    digunakan untuk membuat teks rata di tengah dalam suatu paragraf. Tag yang digunakan adalah <P> dan atribut yang menyertainya adalah STYLE dengan nilai "text-align:center".

    Akan tetapi, nilai atribut STYLE ini biasanya ditulis dalam bahasa CSS atau Template suatu website.

    Setiap nilai dari suatu atribut haruslah diapit oleh tanda petik satu (') atau dua (")


Bagaimana struktur dasar dari sebuah file HTML?
Setiap halaman HTML seharusnya memiliki struktur dasar yang terdiri dari : Tag DTD atau <!DOCTYPE HTML>, tag <HTML>, tag <HEAD>, dan tag <BODY>.

Inilah yang merupakan struktur paling dasar dari HTML, walaupun dalam file HTML tersebut berisi tag-tag lainnya seperti: <title>, <p>, dan lain-lain.

Contoh dokumen HTML sederhana:
<!DOCTYPE HTML>
<html>
 <head style="background-color: #fbfbfb; color: #333333;">
  <title>Judul website Anda</title>
 </head>
 <body>
  <p>Konten atau isi dari website yang ingin Anda tampilkan!</p>
 </body>
</html>

Supaya lebih mudah dipahami, siapkan Notepad atau text editor lainnya di komputer Anda kemudian ketikkan kode diatas sebagai bahan praktek.

Berikut ini adalah penjelasan singkat mengenai struktur dari dokumen HTML diatas:

1. Tag DTD atau <!DOCTYPE HTML>
Tag yang pertama dari contoh dokumen HTML diatas adalah DTD atau DOCTYPE. DTD adalah singkatan dari Document Type Declaration, yang berfungsi untuk memberitahukan kepada web browser bahwa dokumen yang akan diproses adalah HTML.

DTD memiliki banyak jenis tergantung pada versi HTML yang digunakan. Pada contoh diatas, saya menggunakan DTD versi HTML 5. Sebelum HTML 5, tag DTD ini sangat susah untuk dihafal karena terlalu panjang. Seperti tag DTD pada versi 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">

2. Tag <HTML>
Setelah DTD, tag berikutnya adalah tag <HTML>

Tag ini adalah tag pembuka dari keseluruhan halaman web. Semua kode HTML harus berada di dalam tag ini. Tag html dimulai dengan <html> dan diakhiri dengan </html>

3. Tag <HEAD>
Setelah tag HTML, tag berikutnya adalah tag <head> atau tag kepala.

Pada umumnya, elemen yang ada didalam tag ini berisi berbagai definisi halaman, seperti tag META, kode CSS, JavaScript, dan kode-kode lainnya yang tidak tampil di browser.

Tag <title> seperti pada contoh diatas juga berada didalam tag HEAD. Tag <title> digunakan untuk menampilkan Judul dari sebuah halaman web. Judul ini biasanya ditampilkan pada bagian paling atas browser.

Pada contoh diatas, tag <head> memiliki atribut style dengan nilai style="background-color: #fbfbfb; color: #333333;". Ini berfungsi untuk memberi warna latar dan warna teks pada halaman web. Kode warna tersebut bisa Anda ganti dengan Kode warna HTML lain sesuai dengan kebutuhan Anda.

Akan tetapi, atribut style pada tag head ini sudah jarang dipakai. Karena kebanyakan web designer lebih memilih untuk mengaplikasikannya langsung pada CSS.

4. Tag <BODY>
Tag <body> merupakan tag yang didalamnya akan diisi dengan elemen-elemen untuk ditampilkan pada halaman web, seperti paragraf, tabel, link, gambar, dll. Tag body ini ditutup dengan </body>.

Stuktur HTML yang sudah kita bahas diatas adalah struktur yang sangat sederhana. Sedangkan sebuah halaman web bisa memiliki ratusan bahkan ribuan baris, yang ditulis dengan berbagai tag HTML.

Apakah Anda masih tertarik untuk membuat website?
Pada dasarnya, jika Anda baru pertama kali mengenal bahasa HTML, Anda akan merasa terintimidasi dengan tag-tag yang ada didalam HTML dan merasa berat untuk membuat sebuah halaman web.

Akan tetapi, jika Anda sudah memahami tentang HTML dan aturan-aturan penulisannya, otomatis membuat website merupakan hal sangat mudah dilakukan.

Apakah seorang blogger harus mampu menguasai HTML?
Sebagai seorang blogger, memang tidak diwajibkan untuk menguasai semua bahasa web agar bisa melakukan aktivitas blogging.

Akan tetapi, sebuah blog atau website akan menjadi sempurna jika dikelola oleh Admin yang mempunyai pengetahuan seputar bahasa markah HTML.

Memang, sekarang ini Anda sudah bisa membuat sebuah blog dan memposting beberapa artikel, walaupun Anda tidak memahami dengan istilah HTML ini.

Akan tetapi blog Anda akan menjadi hambar, karena bisa dibilang tag-tag HTML ini merupakan bumbu penyedap sebuah blog.

Bayangkan saja, misalnya ada sepiring makanan yang sudah terhidangkan dihadapan Anda, tapi makanan tersebut tidak diberi bumbu, sehingga tidak ada rasa sama sekali. Saya yakin, Anda tidak akan sanggup menghabiskan makanan tersebut.

Begitu pula dengan blog. Para pengunjung pastinya tidak akan bisa menikmati blog Anda, karena blog tersebut tidak Anda taburi bumbu-bumbu HTML, seperti link, gambar, tabel, list, dan lain-lain.

Tampilan blog Anda bagaikan sayur tanpa garam bahkan pengunjung yang nyasar ke blog Anda akan cepat-cepat pindah dan mencari referensi di situs lain.

Oleh karena itu, jika Anda adalah seorang blogger ataupun web designer lebih-lebih jika blog Anda berbasis premium, maka sangat direkomendasikan untuk Anda supaya mampu menguasai HTML, walaupun hanya tag-tag dasarnya saja.

Demikianlah sedikit ulasan mengenai pengertian, fungsi, sejarah dan struktur dasar HTML. Kotak komentar selalu terbuka jika Anda ingin menambahkannya. Terimakasih

0 Response to "Pengertian dan Struktur Dasar Hypertext Markup Language"

Post a Comment

Kata-kata dan bahasa yang Anda keluarkan adalah gambaran kualitas diri Anda...