Apa itu HTML? Dasar-Dasar Tentang Bahasa Markup Hypertext

Apa itu HTML? Dasar-Dasar Tentang Bahasa Markup Hypertext - Sejauh ini kami belum memahami tentang apa itu HTML, dan sampai saat ini pun kami masih mempelajari lebih dalam lagi tentang HTML tersebut

Daftar isi

Baca Juga

Apa itu HTML? Dasar-Dasar Tentang Bahasa Markup Hypertext - Sejauh ini kami belum memahami tentang apa itu HTML, dan sampai saat ini pun kami masih mempelajari lebih dalam lagi tentang HTML tersebut. Dan melalui artikel ini, kami coba memberikan penjelasan secara mudah dengan bahasa yang sederhana, jujur saja, pembahasan mengenai HTML ini lebih rumit dari yang kami bayangkan, meskipun dalam penampakannya HTML tersebut ditulis dalam teks yang mudah dipahami.

Yang kami ketahui, HTML bukan bahasa pemograman yang biasanya sering disebut-sebut di berbagai artikel yang membahas tentang bahasa pemograman. Jika di lihat dari kepanjangan, Hypertext Markup Language maka HTML bukan lah bahasa pemograman tapi bahasa markup yang mencakup pada teks yang saling berhubungan satu sama lain (hypertext) dan bisa terhubung dalam sebuah link (hyperlink).

Sehingga dengan adanya hypertext ini, pengguna bisa membuat sebuah halaman HTML dengan menggunakan struktur kode sederhana dengan menggunakan tag (tagline) atau atribut sebagai markup (tanda) pemisah antara halaman satu dengan halaman yang lainnya. Sebagai contoh dalam pembuatan halaman untuk heading, paragrap, link, blockquote, dan tampilan halaman lainnya bisa menggunakan markup HTML langsung.

Contoh sederhananya adalah ketika Anda membuat sebuah paragrap, maka dalam penulisan teks dari paragrap tersebut ada markup <p> sebagai pembuka teks dan markup </p> sebagai penutup teks. Seperti yang terlihat pada contoh berikut ini:

<p>Ini adalah paragrap pertama</p>
<p>Ini adalah paragrap kedua</p>

Penulisan sederhana tersebut disebut sebagai markup HTML pada sebuah paragrap halaman artikel. Begitu juga dengan penulisan teks HTML untuk heading, link, atau blockquote. Namun dalam perkembangannya, untuk memperbaiki tampilan dari masing-masing markup ini, dihubungkanlah HTML dengan CSS. Dengan bantuan dari kode CSS ini, semua markup HTML bisa memiliki tampilan yang baik.

Baca Juga Apa itu CSS?

Bagaimana Cara Kerja HTML?
HTML biasanya disimpam dalam bentuk file dengan ekstensi .html atau .htm yang tersimpan dalam sebuah folder pada sebuah hosting. Bahkan dokumen HTML ini bisa di simpan didalam folder penyimpanan di laptop atau komputer. Dan dokumen HTML ini bisa di bukan dan dibaca menggunakan browser apapun seperti Chroem atau Firefox.

Sedangkan dalam penggunaannya di blog atau website, dokumen HTML digunakan secara tertutup dengan menggunakan ekstensi .html dan digunakan secara terbuka dalam bentuk markup HTML langsung.

Contoh:
HTML Dengan Ekstensi .html

<link rel="stylesheet" type="text/css" href="https://www.digitalpoin.com/main.html" />

HTML Dengan Markup

<p>Ini adalah paragrap pertama</p>

Sedangkan dalam penerapannya pada sebuah halaman blog atau wesbite, HTML ditulis secara langsung dalam bentuk markup sesuai dengan atribut tag atau elemen yang mengacu struktur kode. Bagian-bagian tag atau elemen ini merupakan penyusun sebuah halaman blog yang meliputi bagian heading, paragrap, body, footer dan sidebar, seperti yang terlihat pada contoh sederhana berikut ini:

<div><!-- tag pembuka -->
  <h1>Judul Blog</h1> 
  <h2>Judul Artikel Blog</h2>
  <p>Paragrap Pertama Artikel Blog</p> 
  <img src="/" alt="Image"> 
  <p>Paragrap Kedua Dengan Menyertakan <a href="https://www.digitalpoin.com">hyperlink</a></p>
</div><!-- tag penutup -->

Struktur kode HTML diatas adalah struktur sederhana namun sudah mewakili tampilan sebuah halaman. Pada contoh diatas, terdapat beberapa elemen yaitu:

• Division sederhana dari sebuah elemen yang digunakan sebagai pembagi antar halaman yang disebut sebagai markup elemen pada HTML yang selalu dimulai dengan kode pembuka <div> dan kode penutup </div>
• Heading yang merupakan markup dari judul utama dengan ditandai tag <h1></h1>
• Subhedaing yang ditandai dengan markup tag <h2></h2>
• Paragrap pertama yang ditandai dengan markup <p></p> dan dilengkapi dengan gambar <img>
• Paragrap kedua menyertakan hyperlink yang terhubung dengan teks yang lainnya atau dalam teks itu sendiri yang ditandai dengan markup link.

Sedangkan dalam penerapannya, tag HTML memiliki 2 macam bentuk yaitu:

1. Block Level HTML
2. Inline Tags HTML

Kedua macam HTML ini, hampir sama dengan saat kita belajar tentang macam-macam CSS yaitu CSS Internal, External dan Inline. Namun pada HTML cakupan lebih luas karena HTML sendiri mencakup semua tampilan halaman blog atau website.

Block Level HTML
Didalam block level HTML ini menggunakan semua tag HTML dan selalu membuat line baru dengan cakupan yang luas yang meliputi tiga tag block level HTML yaitu tag <html>, <head>, dan <body> dengan pembagian elemen dari masing-masing tag sebagai berikut:

• Tag <html></html> meruapakan elemen level tertinggi yang berisi tag halaman HTML.
• Tag <head></head> berisi informasi meta tag dan charset halaman.
• Tag <body></body> berisi semua konten suatu halaman sesuai dengan markup tag.

Contoh Block Level HTML
Dibawah ini adalah contoh sederhana pada HTML dengan block level

<html>
  <head>
    <!-- META INFORMATION -->  
  </head>
  <body>
    <!-- PAGE CONTENT -->
  </body>
</html>

Atau untuk contoh lengkapnya bisa Anda lihat di halaman kode template blog Anda, bisa dilihat di menu admin atau dashboard atau dengan menggunakan view-source untuk melihat kode HTML blog secara keseluruhan.

Inline Tags HTML
Digunakan secara langsung pada teks, baik itu yang ada didalam kode HTML atau yang ada di halaman posting. Sebagai contoh penggunaan inline tgas ini yaitu tag <strong></strong> yang merender teks menjadi bold atau tag <em></em> yang merubah teks normal menjadi format italic atau teks miring.

Begitu juga dengan penggunaan hyperlink dan gambar, masing-masing menggunakan tag <a></a> dengan atribut href untuk mendeklarasikan tujuan dari link tersebut. Sedangkan pada gambar menggunakan tag <img> dengan atribut scr. Contoh dari kedua tag ini yaitu:

<a href="https://www.digitalpoin.com/">Digital Poin</a>
<img src="/images/example.jpg" alt="Title Image">

Dari tampilan sederhana HTML tersebut bisa dikembangkan lebih baik lagi dengan menggunakan bahasa prmograman lainnya yaitu CSS atau menggunakan JavaScript. Namun pada prakteknya, penggunaan CSS lebih dianjurkan agar optimasi blog tetap bekerja dengan baik. Dengan adanya CSS ini, tampilan dari markup HTML akan jadi lebih baik.

Itulah sekilas tentang Apa itu HTML. Memang kalau membahas tentang HTML, terlalu rumit pembahasannya jika dibandingkan dengan CSS. Apalagi jika membahas HTML lebih lanjut ke arah HTML5 yang cakupannya lebih luas lagi. Semoga sedikit pembahasan tentang HTML ini bisa memberikan manfaat, Terimakasih.