course-net
Search
Close this search box.

Html Adalah : Pengertian, Sejarah, Fungsi, dan Contoh Penggunaan

Minet

October 7, 2022

Html Adalah : Pengertian, Sejarah, Fungsi, dan Contoh Penggunaan

Html Adalah : Pengertian, Sejarah, Fungsi, dan Contoh Penggunaan – Apa itu HTML? Pastinya kita sering mendengar kata HTML, dalam benak orang-orang selalu ada hubungannya dengan internet atau programmer. Pada sebuah website, HTML memiliki peran penting. HTML memiliki susunan seperti coding namun nyatanya HTML bukanlah bahasa pemrograman.

HTML Adalah ? Cari Tahu Pengertian , Sejarah & Contohnya

HTML Adalah ? Cari Tahu Pengertian , Sejarah & Contohnya

Sejarah HTML

HTML dicetuskan oleh Tim Berners Lee seorang fisikawan pada tahun 1991 di Lembaga penelitian CERN ( Conseil Européen pour la Recherche Nucléaire) di kota Swiss. Awalnya hanya memiliki ide hypertext berbasis internet. Seiring perkembangannya muncul beberapa versi, berikut penjelasan singkat

1. HTML versi 1.0

Pada versi 1.0 masih memiliki kelemahan dengan tampilan yang sederhana. HTML versi 1.0 hanya dapat membuat heading, list, paragraf, cetak tebal atau miring, dan hypertext.

2. HTML versi 2.0

HTML versi 2.0 memiliki kemampuan menampilkan form atau data pada dokumen.

3. HTML versi 3.0

Versi 3.0 memiliki kemampuan untuk meletakkan gambar serta tabel bahkan adanya rumus matematika

4. HTML versi 3.2

Versi 3.2 memiliki kemampuan untuk meletakkan teks pada sekeliling gambar, sehingga gambar lebih menarik. Pada versi 3.2 dapat menggunakan script sebagai pendukung HTML sehingga versi ini paling sering digunakan.

5. HTML versi 4.0

Versi ini memiliki perubahan yaitu dapat menampilkan tabel, image, link dan lainnya.

6. HTML versi 4.01

HTML versi 4.01 merupakan perubahan dari versi 4.0, versi ini menjadi standar untuk atribut pada HTML.

7. HTML versi 5.0

Versi 5.0 merupakan versi dengan fitur paling lengkap. Versi 5.0 merupakan penggabungan antara CSS, JavaScript, dan HMTL. Tahun 2014 mengalami perbaikan oleh World Wide Web Consortium (W3C) untuk memudahkan dalam menyusun kode. Dengan menggunakan versi ini dapat memasukkan video dan audio ke dalam halaman website. HTML5 menjadi beberapa versi yaitu HTML5.0, HTML5.1, HTML5.2, HTML5.3. HTML5 dijadikan web standard resmi dalam dunia pemprograman.

HTML adalah bahasa markup yang digunakan untuk membuat halaman website. Dalam sebuah dokumen atau file berisi kumpulan kode dan simbol yang sudah tersusun. File HTML diakhiri dengan .htm atau .html.

Kelebihan HTML adalah mudah dipelajari, gratis, dan dijalankan secara alami di setiap web browser. Kekurangannya adalah hanya digunakan dengan halaman web yang statis. Jika ingin memiliki halaman web yang dinamis maka gunakan PHP, tidak bisa digunakan secara cepat pada fitur baru, dan semua halaman harus dibuat terpisah atau tidak bisa menjalankan logic.

Baca Juga : Perbedaan PHP dan HTML yang Wajib Anda Ketahui

Tools HTML Adalah

html tools

Sebagai alat yang bertujuan untuk memudahkan web developer dalam bekerja

A. Menulis HTML dengan teks editor

Dalam menulis kode HTML gunakan teks editor bisa menggunakan sublime text, atom, notepad++, notepad, visual studio code, dan sebagainya.

B. Membuka HTML dengan web browser

Dalam membuka HTML gunakan web browser, bisa menggunakan web seperti safari, Mozilla, Edge, Chrome, dan sebagainya.

Kepanjangan HTML adalah HyperText Markup Language. Dalam HTML berkaitan dengan tag, elemen dan atribut. Tag adalah tanda perintah dalam HTML pada posisi awal dan akhir yang bisa dibaca oleh web. Tag dibuat dengan tanda kurung siku <….>. Ini dibagi menjadi dua yaitu

  1. Block level : Membuat line baru dalam dokumen. Contoh : paragraf dan heading
  2. Inline tags : Tidak perlu membuat line baru dalam dokumen. Contohnya emphasized strings.

Elemen adalah kumpulan kode dari tag pembuka (<>) dan tag penutup (/<>). Atribut dalam HTML akan menentukan makna dari elemen. Semua elemen dapat ditambahkan atribut. Namun yang wajib menggunakan atribut yaitu elemen <a>,<video>,<img>, dan lain-lain.

Baca Juga : Visual Studio Code : Cara Install dan Fitur-Fiturnya

Kerangka inti HTML Adalah

Kerangka inti HTML

Dari bentuk dokumen HTML disederhanakan menjadi kerangka inti

  • <!DOCTYPE html> tag yang berguna untuk memberitahu pada PC Anda bahwa Anda akan menuliskan kata perintah dalam kode HTML.
  • <html></html> tag yang berfungsi untuk menandakan bahwa Anda memulai dan mengakhiri dokumen dalam kode HTML.
  • <head><head> tag yang berfungsi untuk memasukkan meta data ke dalam dokumen HTML. Seperti judul tab, deskripsi, dan lain-lain.
  • <body></body> tag yang berfungsi untuk mengisi konten pada HTML.

Script HTML dapat berupa angka dan huruf jika dibaca oleh program tertentu. Script pada HTML merujuk pada file script eksternal. Ini bisa ditulis langsung dalam elemen atau merujuk sumber eksternal dengan attribute src saat mendefinisikan script sisi clien.

Fungsi HTML adalah membuat link atau dokumen elektronik, membuat halaman website, membuat simbol atau tag menjadi miring, tebal, dan lainnya atau dengan kata lain menandai teks suatu laman, menandai main, navigation, header, footer, dan lainnya dalam website, pondasi website dengan adanya CSS, menampilkan berbagai macam multimedia.

Berikut contoh HTML yang mudah dilakukan bagi pemula :

1. Heading

Heading untuk sub-judul dalam website. Ukuran heading yang kecil maka semakin spesifik info dan pemilihan sub-judulnya.

<h1> Heading 1 <h1>

<h2> Heading 2 <h2>

<h3> Heading 3 <h3>

2. Paragraf

Adanya paragraf dalam website agar tidak melelahkan pembaca sehingga ada jeda dalam penglihatan. Untuk membuat paragraf dalam website gunakan tag ‘<p’>

3. Font

Bentuk tulisan sangat penting dalam isi website, biasanya selalu menggunakan font Times New Roman, namun nyatanya bisa diubah sesuai yang kita inginkan baik di header, footer, paragraf, atau yang lainnya. Caranya masukkan property style ke dalam tag.

Contoh : <h2 style=”font-class:Arial Black;”>text</h2>

      <p style=”font-class:Arial;”>text</p>

4. Ukuran teks

Untuk memudahkan perbedaan antara header dan paragraf selain dari jenis font bisa dari ukuran teks. Berikut contohnya :

<h2 style=”font-size:436px;”>text</h2>

<p style=”font-size:18px;”>text</p>

5. Bold dan Strong

Bold untuk menebalkan tulisan sedangkan strong memiliki pengaruh bagi web crawling.

Tag yang digunakan membuat teks bold pada HTML menggunakan tag ‘<b>’ dan ‘<strong>’ untuk tag strong. Tag bold dan strong sama-sama membuat teks menjadi tebal, namun menggunakan tag strong menandakan keyword penting.

6. Teks coret

Fungsi teks coret untuk menandakan bahwa teks tersebut tidak dipakai. Tag yang digunakan yaitu tag ‘<s>’ (strikethrough) atau ‘<del>’ (delete).

7. Italic dan Emphasize

Italic dan emphasize sama-sama untuk memiringkan huruf. Namun, italic hanya membuat tulisan menjadi miring sedangkan emphasize jika kata atau kalimat ditekan akan memudahkan Google untuk mengindeks konten. Gunakan tag ‘<I>’ untuk italic, tag ‘<em>’ untuk emphasize.

8. Gambar

Website yang menggunakan gambar dapat menarik para pembaca, maka gunakan tag ‘<img>’ (image). Gunakan atribut alt text untuk mengantisipasi jika gambar invalid.

9. Penandaan dalam teks

Dalam membaca website pasti sering melihat mark atau penandaan dalam teks yang menunjukkan kata kunci. Gunakan tag ‘<mark>’ untuk membuat marker di HTML.

10. Subscript

Subscript adalah format tulisan dengan ukuran lebih kecil berada di bawah atau kebalikan dari superscript. Ini biasa digunakan untuk menulis senyawa atau molekul kimia. Contohnya H2O. Jika ingin menggunakan di website gunakan tag’<sub>’.

11. Superscript

Format tulisan dengan ukuran lebih kecil berada diatas, seperti Creatable WorldTM, jika ingin menggunakan dalam website maka gunakan tag ‘<sup>’.

12. Form

Untuk membuat form, gunakan tag ‘<form>’

Itulah informasi seputar HTML beserta contohnya. Agar website yang dibuat mudah diakses oleh banyak orang maka buatlah website secara online.

Mau Belajar IT Bareng Coach Praktisi Ahli ? Yuk Konsultasi Dengan Tim Konsultan Kami

Belajar di Course-Net! Dapatkan skill langsung oleh coach praktisi ahli yang berpengalaman dibidangnya. Gratis Re-Coaching selamanya tanpa BATAS. Segera cek jadwal kelas terdekat.

Artikel Lainnya

Facebook
Twitter
LinkedIn
Pinterest
Tumblr
Telegram
WhatsApp
Email
Print

Subscribe Sekarang!

Dapatkan berita & artikel terbaru seputar IT Gratis!