Pengertian HTML Dan Fungsi HTML Lengkap dengan Contohnya (HyperText Markup)

Pengertian HTML – Mungkin anda sudah tidak asing lagi dengan istilah yang satu ini. Benar sekali, bagi anda yang akan atau sedang bergelut dengan cara pembuatan website, HTML menjadi hal pertama yang wajib anda kuasai. Dikenal sebagai bahasa dasar bagi sebuah website, HTML sekarang sudah menjadi standar seluruh website yang ada di dunia setelah World Web Consortium (W3C) meresmikannya pada tahun 1989.

HTML merupakan pengembangan dari versi sebelumnya yaitu xHTML yang cenderung lebih sulit digunakan. Hingga kini, HTML sudah masuk ke versi kelima dengan berbagai penyempurnaan yang dibawanya. Jika anda belum mengerti secara jelas apa itu sebenarnya pengertian HTML, cara kerja atau fungsinya, struktur HTML, serta bagaimana bentuk perintah HTML dalam sebuah website, maka anda bisa mendapatkannya di bawah ini.

 

Pengertian HTML dan Fungsinya

Pengertian HTML Dan Fungsi HTML Lengkap dengan Contohnya

Pengertian HTML Dan Fungsi HTML Lengkap dengan Contohnya

 

HTML merupakan singkatan dari Hypertext Markup Language. Mungkin akan lebih mudah untuk memahami apa itu HTML dengan mengupas satu persatu istilah di dalamnya. Di mulai dengan Hypertext. Hypertext adalah sebuah teks atau tulisan yang memiliki fungsi lebih dari sekedar di tuliskan atau di baca. Maksudnya, setiap teks yang ditulis di HTML mempunyai tujuan masing-masing seperti membuatnya menjadi link supaya terhubung dengan website lain.

Nah, kemampuan inilah yang mendasari penyebutan Hyperlink, meskipun nantinya kemampuan HTML tidak hanya itu saja. Selanjutnya adalah Markup. Mengapa disebut markup? Karena HTML membutuhkan tanda (Mark) atau kode tertentu untuk menjalankan fungsinya. Anda bisa membuat tebal sebuah teks dengan menambahkan tanda atau kode khusus di dalamnya dan juga berbagai fungsi lainnya.

Mungkin untuk melihat seperti apa wujud dari HTML, anda bisa mencoba mengklik kanan pada halaman browser yang anda gunakan di desktop lalu pilih View Page Source untuk melihat HTML yang digunakan dalam website tersebut.

Lalu bagaimana cara kerja HTML dan apa fungsinya?

 

Cara Kerja dan Fungsi HTML

Secara sederhana, cara kerja HTML bisa di ibaratkan seperti sebuah jembatan. Benar sekali, HTML berfungsi sebagai jembatan yang menerjemahkan serangkaian data atau dokumen dari internet supaya bisa diakses oleh komputer atau perangkat lain dari komputer server. Sebagai pengingat, internet merupakan jaringan yang mengizinkan pengguna melihat dan mengakses data yang sudah tersimpan di server. Nah, HTML ini sebagai jembatan bagi pengguna. Sedangkan fungsinya, HTML memiliki fungsi spesifik sebagai berikut:

  1. Membangun halaman website.
  2. Mengontrol tampilan dari halaman web dan isinya.
  3. Memublikasikan dokumen supaya bisa diakses dari seluruh dunia.
  4. Membuat link yang bisa menghubungkan dengan website lain (Hypertext), menambahkan objek-objek dalam website seperti gambar, audio, dan juga video.

Setelah mengetahui pengertian HTML, cara kerja dan fungsinya, maka selanjutnya anda harus mengetahui struktur HTML pada sebuah website.

Baca Juga: Perbedaan HTTP HTTPS, dan FTP Secara Singkat

Struktur HTML Website

Ada tiga struktur dasar yang mendasari sebuah HTML, yaitu elemen, tag, dan atribut. Berikut adalah penjelasan detailnya.

  1. Elemen

Struktur pertama adalah elemen yang terdiri dari tiga bagian yaitu tag pembuka, isi, dan tag penutup. Misal, untuk menampilkan judul dokumen HTML pada web browser, maka diperlukan elemen tag titel. Jadi nanti bentuknya menjadi <titel>.

  1. Tag

Struktur selanjutnya adalah Tag. Tag merupakan teks khusus atau tanda berupa dua karakter yaitu < dan >. Sebagai contoh <body> adalah tag dengan nama body. Tag ditulis secara berpasangan dan terdiri dari tag pembuka yaitu < dan > dan tag penutup yaitu </ dan >. Jadi ketika <body> merupakan tag pembuka, maka </body> adalah penutup. Tag-tag dasar dari sebuah HTML meliputi:

  • <html> </html>

Tag tersebut digunakan untuk menandai awal dan akhir dari sebuah file HTML.

  • <title> </title>

Digunakan untuk bagian titel atau judul pada sebuah website.

  • <head> </head>

Berisi informasi tentang titel dan jenis dokumen, ditulis di antara <head> </head>.

  • <body> </body>

Menandai awal dan akhirnya dari sebuah badan dokumen HTML.

  1. Atribut

Struktur terakhir adalah atribut. Atribut terdapat di dalam script sebuah elemen dan memberikan informasi tambahan tentang elemen tersebut. Atribut selalu ditandai dengan tag dalam awalan sebuah elemen yang dipasangkan dengan nilai di dalamnya. Ada beberapa jenis atribut yang bisa diketahui secara dasar yaitu,

  • Class

Digunakan untuk menentukan satu atau dua classname untuk sebuah elemen.

  • Id

Digunakan untuk menentukan Id unik dalam sebuah elemen.

  • Style

Menentukan inline CSS style untuk elemen.

  • Title

Digunakan untuk menentukan informasi tambahan mengenai elemen.

Anda bisa berkreasi dengan mencoba kode-kode dasar di atas dan mengembangkannya. Unutk selanjutnya, anda akan masuk dalam tahap memasukkan objek ke dalam HTML. Objek yang bisa di masukkan bisa berupa gambar, audio, ataupun video. Berikut adalah caranya.

Baca Juga: Pengertian IP Address, Jenis, Kelas dan Fungsinya

Memasukkan Objek dalam HTML

  1. Menyisipkan Gambar

Anda bisa menggunakan <img src=””> untuk memasukkan objek gambar dari sumber lain. Sebagai contoh: <img src=”https://snag.gy/yT0m0b.jpg”>. Huruf yang dicetak tebal merupakan sumber di mana anda mendapatkan gambar. Cara di atas adalah jika gambar berada secara online. Berbeda ketika anda ingin memasukkan gambar di penyimpanan komputer anda. maka anda perlu mengetikkan <img src=”images/contoh gambar.jpg”> jika gambar yang dimaksud berada di folder images/contoh gambar.

  1. Menyisipkan Audio

Untuk menyisipkan audio, maka anda hanya perlu mengetikkan tag <audio> dan <source>. Anda hanya perlu menambahkan tipe audio yang anda masukkan supaya nantinya bisa diputar di browser demam baik. Contoh:

<audio control>

<source

src=”contoh audio.mp3”

type=”audio/mp3”>

</audio>

  1. Menyisipkan Video

Untuk caranya tidak jauh berbeda dengan cara menyisipkan audio di atas. Tentu saja anda bisa memilih untuk memberikan Control supaya ada tombol play, pause, dan juga volume. Cukup dengan mengetikkan <video> <source> </video>.

Situs Untuk Belajar HTML Gratis

Situs Untuk Belajar HTML Gratis

 

 

Situs Untuk Belajar HTML Gratis

Meskipun di sekolah atau di kampus Anda diajarkan HTML, namun untuk lebih mengupgrade ilmu, Anda harus belajar juga seara otodidak dan salah satunya melalui website online. Ada banyak situs yang memberikan pelayanan untuk belajar HTML dan pemerograman lainnya. Salah satu situs yang paling populer adalah w3schools.com. Disana Anda dapat mencoba berbagai fungsi dari HTML ini. Selain itu situs ini memberkan contoh HTML, penjelasan fungsi HTML dan mencoba secara online.

Nah itulah yang bisa anda ketahui seputar pengertian HTML, cara kerja, struktur, serta cara menyisipkan objek di dalam HTML. Semoga bermanfaat.

Add Comment