Penjelasan HTML Bagi Yang Ingin Belajar Dasar HTML 5

Kepanjangan HTML adalah Hypertext Markup Language, yaitu standar yang digunakan dalam pembuatan halaman website.  Penjelasan HTML sendiri merupakan bahasa markup (modifikasi). Ia berisi instruksi dengan suatu format struktur agar dapat menciptakan suatu tampilan tertentu.

Kedengarannya cukup menarik...

Programmer, dan mereka yang belajar dasar HTML, akan memakai aplikasi text editor seperti sublime, atom, atau notepad++. Kemudian, agar bisa dibaca oleh web browser, hasil olahan dokumen perlu disimpan dengan ekstensi .html.

Apa itu HTML?

HTML adalah singkatan dari Hypertext Markup Language, suatu  standar yang disepakati dalam pembuatan halaman website. Bahasa berbasis hypertext dengan modifikasi HTML tag element membuat suatu teks/dokumen bisa ditampilkan ke dalam perambah internet (web browser).

Nah, mari kita kupas penjelasan HTML. Satu-persatu dari 3 unsur Hypertext Markup Language ini.

Hypertext adalah teks yang memuat suatu tautan (link) yang menghubungkan ke teks lainSistem hyperlink ini teknik yang lumrah dipakai di internet. Hyperlink juga lah yang membuat internet disebut sebagai sebuah 'jaringan'.

Sementara itu, teknik Markup mendefinisikan apa yang dilakukan suatu tag HTML atas teks dimuat di dalamnya. Bayangkan ini sebagai teknik modifikasi teks. Misalnya, elemen HTML <u> ... </u> akan mengubah (me-markup) suatu teks menjadi bergaris bawah (underlined).

Lalu, HTML sebagai Language berarti HTML memiliki standar dan aturan. HTML terstruktur sesuai tata-bahasa bernama syntax.

Maka, jadilah penjelasan HTML seperti di atas.

Hypertext Markup Language (HTML) sampai saat ini masih terus dikembangkan. Ia bahasa yang masih menyerap elemen-elemen baru. Penyebabnya apa lagi kalau bukan dunia WWW (internet) yang terus berkembang dan kebutuhan user yang terus berubah. Para pengembang HTML saat ini berkumpul di bawah sebuah institusi bernama W3C.

HTML 5 CSS 3 JS SApakah ada lagi informasi yang bisa memperkaya penjelasan HTML? Ada. HTML bukan satu-satunya bahasa website.

Fungsi bahasa HTML berdampingan dengan bahasa lain, misal CSS (Cascading Style Sheet) dan Javascript. HTML sendiri bertugas untuk menyusun kerangka halaman web. Sementara, CSS berfungsi merapikan dan memperindah website. Lalu, agar web lebih interaktif, maka bisa dimasukkan juga bahasa Javascript.

Cara kerja HTML

Penjelasan HTML kurang lengkap tanpa deskripsi cara kerjanya. Ini adalah bagian penjelasan tentang interaksi dokumen HTML dengan aplikasi web browser (seperti Firefox atau Chrome)

Dokumen HTML medeskripsikan dengan non-ambigu komponen struktur dan format suatu halaman situs. Kemudian, aplikasi web browser menginterpretasikan (menafsirkan) susunan informasi dalam dokumen menjadi, misalnya, jenis tulisan, warna, garis, dan teks yang dikehendaki pembuat situs.

Contoh penerapan name tage element heading dalam HTML

Kita bisa ambil contoh dari penerapan elemen heading dalam HTML.

Dalam Hypertext Markup Language (HTML), heading merupakan elemen penjudulan di mana teks judul ditempatkan di antara tag elemen heading itu. Misal, heading <H1> ... </H1> membuat teks dalam elemen tersebut sebagai judul utama. Ukuran teks-nya paling besar.

Pemformatan itu bisa dilanjutkan, memakai format subheading <H2>, <H3>, <H4>, <H5> sampai <H6>. Masing-masing akan merepresentasikan teks subheading dengan ukuran berbeda.

Belajar Dasar HTML: Kerangka Dasar

Mereka yang ingin belajar HTML, pertama-tama perlu memahami struktur dasar dokumen HTML. Selain itu, mereka perlu menguasai penggunaan name tag dan penulisan atribut tag.

1. Struktur dasar HTML

Struktur Dasar HTMLDokumen HTML perlu ditulis dalam sebuah ketentuan urutan. Bisa disebut, ini adalah kerangka tulisan dokumen HTML Anda bisa melihat di snapshot ini struktur dasar dari sebuah HTML.

Di situ satu-satunya tambahan adalah baris <H2> Hello World</h2>. Bila Anda menuliskan baris-baris tersebut ke sebuah file Notepad, lalu menyimpannya sebagai file berformat .html, maka Anda akan melihat tulisan "Hello World" terpampang di tengah layar web browser Anda.

Nah, berikut ini elemen dari penjelasan HTML di atas.

<!DOCTYPE HTML>

Tag ini ditulis paling awal di setiap dokumen HTML. <!DOCTYPE HTML> berfungsi untuk menginformasikan pada browser bahwa dokumen yang sedang dibuka adalah dokumen HTML.

<HTML> ... </HTML>

Di bagian ini, isi dari dokumen HTML dimulai. Seluruh kode HTML yang me-markup konten teks dan media situs web Anda perlu ditempatkan di antara tag ini. Tag <HTML> di tulis di awal. Sementara, tag </HTML> di akhir.

<HEAD> ... </HEAD>

Tag Head ini memuat sumber informasi tentang dokumen HTML. Secara tampilan, informasi di sini tidak akan langsung terlihat pada tampilan web browser. Informasi lebih untuk sisi pemrosesan konten atau isi file HTML.

Sebagai contoh, isi tag <TITLE> ... </TITLE> tidak akan nampak dalam halaman browser. Informasi TITLE (atau judul) akan akan tampil pada tjudul browser atau di browser tab.

<BODY> ... </BODY>

Seluruh konten yang tampak dalam halaman website terletak dalam elemen BODY. Elemen ini yang biasanya memuat basic tag HTML yang berfungsi me-markup konten teks atau media yang ingin ditampilkan dalam website Anda.

2. Elemen Hypertext Markup Language (HTML)

Suatu elemen HTML terdiri dari satu start tag (atau tag pembuka) dan satu end tag (atau tag penutup). Penulisan keduanya mengikuti aturan berikut:

  • Start tag: diawali oleh simbol "<", diikuti oleh nama elemen, dan ditutup oleh simbol ">".
  • Nametag elemen boleh memuat atribut, didahului oleh satu atau beberapa karakter spasi.
  • Closing tag: diawali oleh dua simbol "</", diikuti oleh nama elemen, dan ditutup oleh simbol ">".

Ada 2 jenis cara penulisan pada elemen HTML

A. Closing Tags

Closing tags adalah jenis elemen yang bergantung dengan tag penutup agar dapat dieksekusi pada web browser. Dan jenis elemen ini sudah menjadi aturan pada Bahasa HTML itu sendiri.

Berikut adalah contoh elemen HTML yang harus disertai closing tag, beserta fungsinya:

  • <b> ... </b> untuk membuat tulisan tebal (bold)
  • <u> ... </u> untuk membuat tulisan bergaris bawah (underline)
  • <p> ... <p/> untuk membuat suatu paragraf baru
  • <h1> ...   <h1> untuk mendefinisikan heading HTML apa yang dipakai

B. Self-Closing Tags

Elemen dengan Self-Closing tags bisa berdiri sendiri, tidak tergantung pada ada atau tidaknya closing tags. Berikut ini contoh self-closing tag, beserta fungsinya.

  • <img> untuk mendefinisikan suatu gambar
  • <hr> untuk mendefinisikan perubahan tematik dalam konten
  • <input> untuk mendefinisikan kontrol input
  • <br> untuk memasukkan satu line break (ganti baris)

3. Penjelasan HTML Tag Attributes

HTML attribute adalah perekayasa suatu elemen HTML. Atribut ini nantinya memodifikasi fungsionalitas bawaan dari elemen tersebut. Dalam tatabahasa HTML (syntax), attribute ditambahkan ke start tag elemen HTML.

Penulisan HTML tag attribute umumnya memakai model: name = "value". Di sini, name adalah nama atribut, sementara value merupakan nilai atau teks sumber atribut tersebut.

Beberapa contoh HTML tag attribute:

  • href: atribut sumber hyperlink untuk elemen <a>, yaitu elemen link HTML.
  • src: atribut sumber gambar untuk elemen <img>, yaitu elemen gambar HTML.
  • 'width' dan 'height': atribut panjang dan lebar untuk elemen <img>, yaitu elemen gambar HTML.

4. Penggunaan HTML Tags & Attibutes

Barangkali Anda sudah akrab dengan aplikasi seperti Microsoft Word. Nah, elemen HTML, beserta tag dan atribut, mengerjakan apa yang terjadi di belakang layar aplikasi Ms. Word.

Penggunaan Tag

Suatu HTML tag mewakili satu fungsi tertentu.

Sebagai contoh, saya akan memakai elemen <p> ... </p>. Tag ini berfungsi untuk menempatkan suatu teks ke dalam sebuah paragraf terpisah. Jika saya ingin memuat "Contoh Element HTML" dalam satu paragraf terpisah, maka penulisannya adalah:

Mengenal Pengertian HTML dan Belajar HTML Dasar

Masih banyak elemen HTML untuk keperluan formatting teks. Misal, gunakan <i> ... </i> untuk memiringkan teks (italic) atau <li> ... </li> untuk membuat list (daftar).

Perdalam belajar dasar HTML dengan melihat daftar lengkap HTML tag di referensi W3Schools.

Tag dengan Atribut

Atribut ditulis sebagai informasi tambahan dari elemen HTML Misal, atribut 'id' memberi identitas baru bagi suatu elemen HTML. Maka dari itu, secara penulisan, attribute ini ditempatkan sebagai bagian elemen HTML. Secara spesifiknya, atribut ditulis dalam start tag.

Saya ambil contoh atribut 'class', yang fungsinya memberi sebuah tag nama referensi (untuk digunakan dalam CSS atau Javascript). Penulisan atribut adalah sebagai berikut:

Contoh penggunaan atribut HTML

Aturan penulisan sebuah atribut:

  • Nama attribute (class) diikuti oleh simbol "=" (sama dengan).
  • Nilai attribut (contoh-atribut) diapit oleh dua tanda petik pembuka dan penutup (jadi, "contoh-atribut").
  • Dua atribut, atau lebih, dari suatu tag perlu dipisahkan oleh satu buah spasi.

Belajar Dasar HTML lewat Inspector

Inspect Element in Firefox

Semua website yang pernah Anda kunjungi memuat kode HTML. Dan seluruh kode HTML itu bisa Anda lihat melalui satu fitur web browser. Di browser Mozilla Firefox, ia dinamai Inspect Element. Di Google Chrome ia diberi nama Inspect.

Fitur tersebut akan membantu siapapun yang ingin belajar dasar HTML. Misal, Anda buka web Google. Kemudian klik kanan di sembarang tempat di halaman tersebut. Pilihlah menu Inspect Element. 

Anda akan melihat tampilan dari hasil inspect element seperti pada gambar dibawah.

Element inspector in FIrefox

Fitur Inspect Element menunjukkan informasi HTML dari suatu halaman web. Misal, selain bisa untuk melihat syntax dari tampilan web, bisa juga untuk mengetahui di bagian mana web itu berada.

Bila Anda sudah cukup akrab dengan penjelasan HTML, Anda pun bisa mengubah tampilan web tersebut. Anda tinggal mengganti 'value' dari atribut suatu tag (masih ingat posisinya di mana?). Desain web akan berubah secara real-time. Tidak perlu khawatir merusak website orang. Perubahan tampilan itu hanya terjadi di web browser Anda.

Evolusi Hypertext Markup Language (HTML)

Sebagai standar bahasa pemrograman website, HTML terus mengikuti perkembangan dunia internet dan kebutuhan penggunanya. Di Versi 1.0: HTML baru ada kemampuan heading, paragraph, hypertext, bold, italic seta text wrapping. Kemudian, ini dikembangkan denvan pembaruan Versi 2.0, 3.0, 3.2, 4.0, 4.01, XHTML, hingga yang terbaru, HTML 5.

Misal, di Versi 2.0 ditambahkan fitur comment. Ini memajukan pola interaksi pengunjung dan pemilik web, serta menjadi pionir elemen homepage interaktif. Di Versi 3.0 Anda sudah bisa menambahkan tabel ke dalam halaman situs Anda.

Versi terbaru HTML adalah versi 5. Ia rilis pada 22 Januari 2008

Satu masalah yang diatasi HTML adalah interoperabilitas, alias penampilan website di berbagai web browser. Dalam hal ini, HTML 5 memangkas biaya pengembangan dengan membuat aturan yang tepat tentang bagaimana menangani suatu elemen HTML.

HTML 5 Standards

Versi 5 juga mumpuni secara konsep interaktif. Anda punya banyak fitur audio embedding, video, grafik, sisi penyimpanan data client hingga dokumen interaktif. Keuntungan ini salah satunya HTML 5 dikembangkan bersama oleh vendor teknologi terkemuka, seperti AOL, Google, Apple, IBM, Microsoft, Opera, Nokia dan lain-lain.

Cukup asyik bukan belajar dasar HTML? Setelah menyimak penjelasan HTML, Anda bisa melengkapi pengetahuan Anda tentang Pengertian PHP, suatu bahasa program untuk pembuatan aplikasi digital.

Gabriel (Ig: @gb.g.m) antusias mengikuti perkembangan terkini dunia web hosting dan SEO writing. Ia juga menulis cerpen eksperimental, dan esai imajinatif, di blog Tempat Duduk.
Leave a Comment

Dapatkan posting blog baru melalui email: