HTML : Pengertian, Tutorial, Fungsi, Tag Dasar, dan Cara Kerjanya

Serba Serbi, Tips & Tricks / 0 | | 0

Belajar membuat website pada era teknologi seperti sekarang ini dapat menjadi hal yang penting dalam pengembangan keahlian Anda. Hal tersebut dikarenakan website menjadi bagian penting seperti halnya mencari informasi, menjual dan membeli barang, mengiklankan produk usaha yang dilakukan secara online. Tidak menutup kemungkinan bahwa pada masa yang akan datang semua hal dilakukan secara digital.

Untuk belajar membuat website tentunya Anda harus memahami dasar-dasar dari pembuatan website itu sendiri. Terdapat berbagai jenis bahasa pemograman untuk membuat website. Salah satu hal yang dasar dan wajib dipelajari oleh pemula adalah HTML. Ini merupakan sebuah awal untuk mengembangkan kemampuan Anda mempelajari bahasa pemograman yang lebih kompleks. Singkatan dari HTML sendiri adalah Hypertext Markup Language, sangat perlu Anda pelajari tetapi bukan sebatas pengertian HTML saja.

Anda harus mengetahui seluk-beluk dari bahasa pemrograman yang satu ini jika ingin mahir menggunakannya. Hal yang membedakan HTML dengan bahasa pemrograman yang lain adalah HTML tidak memiliki kemampuan untuk membangun fungsionalitas yang dinamis. Namun seperti yang sudah dijelaskan di awal bahwa HTML ini merupakan dasar dari pembelajaran untuk membuat website. Berikut ini akan terdapat mengenai seluk beluk dari HTML itu sendiri.

 

Pengertian HTML

 

 HTML _ Pengertian, Tutorial, Fungsi, Tag Dasar, dan Cara Kerjanya 1
 

HTML dibuat oleh Tim Berners-Lee, seorang ahli fisika di lembaga penelitian CERN yang berlokasi di Swiss. Dia memiliki ide tentang sistem hypertext yang berbasis internet. Hypertext merujuk pada teks yang memuat referensi (link) ke teks lain yang bisa diakses langsung oleh viewer. Tim merilis versi pertama HTML pada tahun 1991, dan di dalamnya terdiri atas 18 HTML tag. Sejak saat itu, setiap kali bahasa HTML merilis versi teranyarnya, selalu ada tag dan atribut (tag modifier) terbaru. HTML adalah singkatan Hyper Text Markup Language, Hyper Text Markup Language dapat Anda kelompokan menjadi dua suku kata yaitu :

 

  • Hypertext berarti teks aktif maksudnya adalah sebuah teks yang memiliki kemampuan dapat terhubung antara teks suatu halaman dengan halaman yang lain.
  • Markup Language menjelaskan bahwa dokumen HTML ini disusun oleh tag- tag markup dan setiap tag pada HTML menjelaskan perintah isi dokumen yang berbeda- beda.

 

Secara singkatnya pengertian dari HTML adalah suatu bahasa yang memungkinkan penggunanya untuk membuat serta menyusun paragraph, link, heading, maupun tautan dan blockquote pada sebuah halaman aplikasi dan web. Fungsi dari HTML ini adalah untuk menampilkan informasi berupa teks, suara, video, gambar, dan lainnya. HTML sebenarnya mirip dengan bahasa yang sering Anda pergunakan dalam kehidupan sehari-hari, namun dalam penulisan di HTML Anda Harus memerlukan kode atau “Tag HTML” sehingga membentuk struktur kode dan halaman HTML yang lengkap.

Baca Juga : Website Tempat Download Software (Aplikasi) GRATIS untuk PC / Laptop 

 

Fungsi HTML

 

0 HTML _ Pengertian, Tutorial, Fungsi, Tag Dasar, dan Cara Kerjanya 1
 

HTML adalah teknologi dasar yang digunakan untuk membuat dasar dari sebuah halaman web dengan menghubungkan teks / link antar halaman, memberi struktur dan memberikan informasi yang terkait dengan sebuah halaman web. Lalu kenapa HTML pada Web bisa menampilkan animasi- animasi dan efek-efek yang bagus? Hal itu dikarenakan konten sebuah web selain teks dapat bermacam- macam seperti video, audio, gambar, dan agar tampilan web Anda semakin menarik biasanya di dalam sebuah web di tambahkan Javascript sebagai animasi, dan CSS (Cascading Style Sheet) sebagai pemberi make-up atau style. Selain itu fungsi atau hal yang dapat dilakukan oleh HTML adalah :

 

  • Membuat struktur dari halaman website.
  • Mengatur tampilan dan isi dari halaman web.
  • Membuat tabel dengan tag HTML Table.
  • Membuat Form HTML.
  • Menambahkan objek-objek penting lainnya seperti: audio, video dan animasi.
  • Membuat gambar dengan Canvas.
  • Mempublikasikan halaman website secara online.

Baca Juga : Cara Membuat Bisnis Plan (Business Plan) yang Baik dan Benar untuk Bisnis dan UMKM 

 

Cara Kerja HTML

Pengertian dari dokumen HTML adalah file dengan ekstensi .html atau .htm. Anda bisa melihat ekstensi file ini dengan memakai web browser apa saja termasuk Mozilla Firefox, Google Chrome, ataupun Safari. Browser tersebut dapat membaca file HTML dan membuat pengguna bisa melihat serta membacanya di internet. Umumnya, situs web menyertakan beberapa halaman HTML yang berbeda. Misalnya, beranda utama, halaman kontak, dan halaman “tentang kami”, yang ketiganya mempunyai dokumen HTML berbeda.

Masing-masing halaman tersebut terdiri dari sejumlah tags atau biasa juga disebut sebagai elements yang merujuk pada building block halaman web. Tag ini juga mempunyai hirarki tersendiri yang menyusun konten menjadi paragraph, heading, dan lainnya. Sebagian besar elemen HTML memiliki tag pembuka dan penutup yang menggunakan syntax .

 

Mengenal Jenis Tag Dalam HTML

Sebagai sebuah bahasa markup, HTML membutuhkan cara untuk memberitahu web browser untuk apa fungsi sebuah text. Apakah text itu ditulis sebagai sebuah paragraf, list, atau sebagai link. Dalam HTML, tanda ini dikenal dengan istilah tag. Tag adalah suatu tanda pengenal dokumen pada html yang terdiri 2 bagian yaitu tag pembuka contoh dan tag penutup contoh , tanda “/” pada tag penutup menandakan bahwa sifat yang dibawa oleh tanda pengenal berakhir. Tag HTML memiliki dua tipe utama: block-level dan inline tags.

 

  • Elemen block-level

    memakai semua space yang tersedia dan selalu membuat line baru di dalam dokumen. Contoh dari tag block adalah heading dan paragraf. Tiga tag block-level yang harus dimiliki oleh setiap dokumen HTML adalah <html>,>head<,>body<.

    • Tag <html>adalah elemen level tertinggi yang menyertakan setiap halaman HTML.
    • Tag<head> menyimpan informasi meta, seperti judul dan charset halaman.
    • Tag <body>tempat dibuatnya semua konten website menggunakan HTML
  • Elemen inline

    hanya memakai space sesuai dengan kebutuhannya dan tidak membuat line baru di halaman. Biasanya elemen ini akan memformat isi konten dari elemen block-level. Contoh dari tag inline adalah link dan emphasized strings. Sebagian besar tag inline digunakan untuk memformat teks. Sebagai contoh, tag akan render elemen ke format bold, sedangkan tag akan ditampilkan dalam format italic. Hyperlink adalah elemen inline yang mewajibkan adanya tag dan attribute href untuk mengindikasi tujuan link. Gambar (image) juga merupakan elemen inline. Anda dapat menambahkan satu gambar dengan menggunakan tanpa harus membubuhkan tag penutup. Hanya saja, Anda disarankan menggunakan attribute src untuk menentukan path gambar.

 

Itu merupakan dua jenis tag dalam HTML. Untuk Anda yang masih ingin belajar dari awal mengenai HTML ini, sebaiknya juga perlu mengetahui tag-tag sederhana yang harus Anda kuasai. Hal tersebut bertujuan agar Anda tidak memahami langkah awal dari pembelajaran tentang HTML. Tag dasar yang harus Anda ketahui adalah :

  • <!DOCTYPE> Tag untuk menentukan tipe dokumen
  • <html> Tag untuk membuat sebuah dokumen HTML
  • <title> Tag untuk membuat judul dari sebuah halaman
  • <body> Tag untuk membuat tubuh dari sebuah halaman
  • <h1> to <h6> Tag untuk membuat heading
  • <p> Tag untuk membuat paragraf
  • <br> Memasukan satu baris putus
  • <hr> Tag untuk membuat perubahan dasar kata di dalam isi
  • <!–…–> Tag untuk membuat komentar

Baca Juga : Mengenal Perbedaan WinRar & WinZip : Keunggulan, Fitur, dan Cara Downloadnya 

 

Langkah Penulisan HTML

Sebelum memulai penulisan HTML, maka yang Anda butuhkan adalah aplikasi text editor. Text editor adalah sebuah aplikasi yang digunakan untuk membuat atau mengedit teks. Ada banyak sekali aplikasi text editor yang dapat digunakan dalam membuat dokumen HTML seperti sublime text, notepad, dreamweaver, notepad++. Setelah itu ada beberapa poin yang harus Anda ingat- ingat dan Anda perhatikan, peraturan pertama di dalam struktur HTML terdapat tag dan atribut. Berikut langkah pembuatan HTML :

 

  • Buka aplikasi text editor, lalu ketikan kode HTML
  • Setelah code HTML dimasukan, Anda akan mulai melakukan save file HTML dengan cara klik “File”, pilih menu “Save As”, Kemudian pilih lokasi sesuai dengan keinginan. Disini yang harus diperhatikan yaitu untuk “File Name” Anda bisa menuliskan nama file bebas, dan untuk “Save as type” Anda ubah menjadi “Hyper Text Markup Language”.
  • Untuk melihat tampilan atau membuka file dokumen HTML, Anda butuh aplikasi Web Browser, contoh Browser : Google Chrome, Mozilla Firefox, Opera, Dll. Jika aplikasi Web browser belum terinstall maka install terlebih dahulu dan jika sudah terinstall di komputer Anda, pertama Anda buka lokasi file HTML yang Anda simpan tadi, lalu klik 2x pada file tersebut.

 

Kesimpulan dan Penutup

Sangat penting untuk mempelajari HTML ini, karena merupakan dasar yang harus dikuasai oleh seseorang yang ingin mahir membuat website bahkan aplikasi. Dibalik semua itu ternyata terdapat kelebihan dari HTML. Salah satu kelebihannya yang paling utama adalah bahasa ini dipakai secara luas dan mempunyai banyak sumber serta komunitas yang besar. Dengan ini, Anda akan lebih dimudahkan saat ingin mempelajari dan mendalami segala hal tentang HTML.

Selain itu, HTML juga dapat dijalankan dengan mudah di setiap web browser. Kemudian, HTML juga mempunyai kelebihan lain yaitu tersedianya learning curve yang sederhana. Bukan hanya itu, bahasa markup ini juga konsisten dan rapi sehingga lebih mudah dipahami. Meskipun hadir dengan berbagai kelebihan, HTML juga mempunyai beberapa kekurangan yang perlu Anda ketahui. Salah satunya adalah HTML tidak memungkinkan penggunanya untuk menjalankan logic.

Sebagai gantinya, semua halaman web wajib dibuat terpisah meskipun memakai elemen yang sama. Selain itu, fitur-fitur baru terkadang tidak dapat dipakai secara cepat di sejumlah browser. Selanjutnya, HTML juga lebih sering dipakai pada halaman web statis saja. Jadi, untuk fitur dinamis biasanya Anda harus memakai bahasa lain seperti JavaScript dan PHP. Bukan hanya itu, terkadang perilaku browser tidak mudah untuk diprediksi.

Related Post :

popup image