Pengertian dan Fungsi HTML beserta Contohnya
Sejarah Singkat HTML
Pada tahun 1980, IBM memikirkan pembuatan suatu dokumen yang akan mengenali setiap elemen dari dokumen dengan tanda tertentu. IBM kemudian mengembangkan suatu jenis bahasa yang menggabungkan teks dengan perintah-perintah pemformatan dokumen. Bahasa ini dinamakan dengan Markup Language, sebuah bahasa yang menggunakan tanda-tanda sebagai basisnya. IBM menamakan sistemnya ini sebagai Generalized Markup Language (GML).
Tahun 1986, ISO menyatakan bahwa IBM mempunyai suatu konsep tentang dokumen yang sangat baik, dan kemudian mengeluarkan suatu publikasi (ISO 8879) yang menyatakan markup language adalah sebagai standar untuk pembuatan dokumen-dokumen. ISO membuat bahasa ini dari GML yang dimiliki IBM, tetapi memberinya nama lain, yaitu SGML atau (Standard Generalized Markup Language). ISO dalam publikasinya meyakini bahwa SGML akan sangat berguna untuk pemrosesan suatu informasi teks dan sistem-sistem perkantoran. Tetapi di luar perkiraan ISO, SGML dan terutama subset dari SGML, yaitu HTML juga berguna untuk menjelajahi internet. Khususnya bagi mereka yang menggunakan World Wide Web atau disengkat (www). Versi terakhir dari HTML saat ini ialah HTML5.
Pengertian HTML
HTML merupakan sebuah standar yang digunakan secara luas untuk dapat menampilkan halaman web. Dengan Menggunakan tag-tag tertentu untuk menyatakan kode-kode yang harus ditafsirkan oleh browser agar halaman tersebut bisa ditampilkan di web browser.
HTML sampai saat ini merupakan standar di Internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium atau (W3C). HTML dibuat oleh kolaborasi Caillau TIM dengan Berners-lee Robert ketika mereka bekerja di CERN pada tahun 1989 CERN ialah lembaga penelitian fisika energi tinggi di Jenewa
HTML adalah singkatan dari HyperText Markup Language yaitu bahasa pemrograman standar yang digunakan untuk membuat sebuah halaman web, yang kemudian dapat diakses untuk menampilkan berbagai informasi di dalam sebuah penjelajah web Internet (Browser). HTML dapat juga digunakan sebagai link link antara file-file dalam situs atau dalam komputer dengan menggunakan localhost, atau link yang menghubungkan antar situs dalam dunia internet. Supaya dapat menghasilkan tampilan wujud yang terintegerasi, Pemformatan hiperteks sederhana ditulis dalam berkas format ASCII sehingga menjadi halaman web dengan perintah-perintah HTML.
HTML merupakan sebuah bahasa yang bermula dari sebuah bahasa yang sebelumnya banyak dipakai di dunia percetakan dan penerbitan yang disebut Standard Generalized Markup Language (SGML). Sekarang ini HTML merupakan standar Internet yang dikendalikan dan didefinisikan pemakaiannya oleh World Wide Web Consortium (W3C). Pada tahun 1989, HTML dibuat oleh kolaborasi Berners-lee Robert dengan Caillau TIM pada saat mereka bekerja di CERN (CERN merupakan lembaga penelitian fisika energi tinggi di Jenewa).
HTTP atau Hypertext Transfer Protokol merupakan protokol yang digunakan untuk mentransfer data atau document yang berformat HTML dari web server ke web browser. Dengan HTTP inilah yang memungkinkan Anda menjelajah internet dan melihat halaman web.
Pengertian HTML5
HTML Versi 5.0 (2009) adalah sebuah prosedur pembuatan tampilan web baru yang merupakan penggabungan antara CSS, HTML itu sendiri dengan Java Script. Teknologi ini mulai diluncurkan pada tahun 2009. HTML5 merupakan revisi kelima dari HTML.
Tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin.
Konsep HTML
- Suatu bentuk dokumen ASCII atau teks biasa
- Membaca suatu dokumen tidak secara urut
- Penulisan tanpa tergantung pada suatu platform tertentu
- Isi dokumen HTML dapat ditampilkan secara text maupun grafis
- Diperlukan suatu aplikasi khusus yang disebut Web browser
Seseorang yang ingin mempelajari untuk mempercepat didalam pembuatan web sering menggunakan software HTML authoring (perangkat lunak yang digunakan untuk membuat atau mendesain halaman web), seperti :
Microsoft FrontPages, Macromedia Dreamweaver, Adobe Go Live,
dan lain-lain
Lalu untuk apa Kita perlu mengetahui bahasa HTML tersebut ? jawabannya adalah agar Anda memperoleh hasil yang maksimal. Mengapa ? Karena walaupun software-software tersebut semakin menawarkan kemudahan dalam membuat halaman web, tetapi biasanya seseorang masih perlu untuk mengedit halaman web tersebut secara manual, terutama untuk halaman web yang sangat kompleks.
Dalam penggunaannya sebagian besar kode HTML tersebut harus terletak di antara tag kontainer. Yaitu diawali dengan namatag dan diakhiri dengan namatag (terdapat tanda “/”). Dokumen HTML mempunyai tiga buah tag utama yang membentuk struktur dari dokumen tersebut. Ketiga buah Tag tersebut adalah Tag HTML, HEAD dan BODY.
- HTML Sebagai tanda awal dokumen HTML.
- HEAD Sebagai informasi page header. Di dalam tag ini kita bisa meletakkan tag-tag TITLE, BASE, ISINDEX, LINK, SCRIPT, STYLE & META.
Fungsi HTML
Fungsi dari HTML ialah digunakan untuk membuat sebuah halaman website dan menampilkan berbagai informasi yang di inputkan ke dalam html tersebut seperti gambar, video, teks, dan lainnya sehingga bisa di tempilkan melalui web browser. Selian itu HTML juga dapat digunakan untuk membuat sebuah link yang nantinya menuju ke sebuah halaman website lainnya dengan kode tertentu.
Berdasarkan pengertian dari HTML, banyak hal dan fungsi yang dapat dilakukan antara lain :
- Mengontrol tampilan dari halaman web dan isinya.
- Mempublikasikan dokumen secara online sehingga bisa di akses dari seluruh dunia.
- Membuat list atau penomoran dari sekumpulan hal.
- Menampilkan informasi dalam bentuk tabel.
- Membuat Sebuah link yang digunakan untuk menuju dokument lain.
- Membuat online form yang bisa di gunakan untuk menangani pendaftaran, transaksi secara
- Menambahkan object-object seperti image, audio, video dan juga java applet dalam document HTML.
Kode – Kode Tag HTML
| Tag | Keterangan |
| <!– … –> | Digunakan untuk memberi sebuah komentar atau keterangan. Kalimat yang terletak pada kontiner ini tidak akan terlihat pada browser |
| <!DOCTYPE> | Mendefinisikan informasi tipe dokumen |
| <a> | Mendefinisikan sebuah anchor, tetapi lebih tepat jika diartikan sebagai tautan dikarenakan tautan ini digunakan untuk saling menautkan antara satu dokumen HTML ke dokumen HTML yang lain |
| <abbr> | Digunakan untuk menguraikan satu ungkapan yang disingkat dan Anda dapat memberikan informasi bermanfaat kepada penelusur-penulusur page source(halaman sumber kode) / pembaca layar, sistem terjemahan dan mesin pencari yang berasal dari singkatan yang sudah diuraikan, tetapi saat di browser uraian tersebut tidak akan tampil dan hanya sebagai informasi saja |
| <acronym> | Mendefinisikan akronim / fungsi tag ini kurang lebih sama dengan tag <abbr> |
| <address> | Mendefinisikan informasi kontak untuk penulis/pemilik dokumen |
| <applet> | Digunakan untuk memasukan file java kedalam dokumen HTML |
| <area /> | Mendefinisikan daerah yang dapat diklik (link) pada peta gambar |
| <b> | Membuat teks tebal |
| <base /> | Mendefinisikan URL dasar/target untuk semua URL relatif dalam dokumen |
| <basefont /> | Membuat atribut teks default, seperti warna, ukuran, jenis font untuk semua teks dalam dokumen |
| <bdo> | Digunakan untuk menimpa arah teks |
| <big> | Memperbesar ukuran teks sebesar satu point dari defaultnya |
| <blink> | Membuat teks berkedip |
| <blockquote> | Mendefinisikan sebuah kutipan panjang. Pada saat di browser teks akan tampil menjorok kedalam |
| <body> | Mendefinisikan body/isi dokumen HTML, berfungsi untuk menentukan bagaimana isi suatu dokumen ditampilkan di web browsernya. Isi dokumen tersebut dapat berupa teks, gambar, animasi, link dan seterusnya |
| <br /> | Memberi baris baru/pindah baris |
| <button> | Mendefinisikan sebuah tombol diklik |
| <caption> | Membuat caption pada tabel |
| <center> | Untuk perataan tengah terhadap teks atau gambar |
| <cite> | Mendefinisikan kutipan |
| <code> | Mendefinisikan sebuah bagian dari kode komputer |
| <col /> | Mendefinisikan nilai atribut dari satu kolom atau lebih dalam sebuah tabel |
| <colgroup> | Menentukan kelompok dari satu kolom atau lebih dalam sebuah tabel untuk performatan |
| <dd> | Mendefinisikan deskripsi dari item dalam daftar definisi |
| <del> | Untuk memberi garis tengah pada teks/mencoret teks |
| <dfn> | Mendefinisikan sebuah istilah definisi |
| <dir> | Mendefinisikan sebuah daftar direktori |
| <div> | Mendefinisikan sebuah section dalam dokumen |
| <dl> | Mendefinisikan sebuah daftar definisi |
| <dt> | Mendefinisikan istilah (item) dalam daftar definisi |
| <em> | Membuat teks miring. Fungsi tag ini sama dengan tag <i> tetapi tag <em> yang lebih dianjurkan/ditekankan pada penggunaan untuk teks miring |
| <embed> | Digunakan untuk memasukkan file video atau file musik |
| <fieldset> | Untuk mengelompokkan elemen-elemen yang terkait dalam form / membuat seperti frame-box di dalam form |
| <font> | Mendefinisikan jenis font, warna dan ukuran untuk teks |
| <form> | Mendefinisikan sebuah form HTML untuk input form |
| <frame /> | Mendefinisikan frame dalam fremeset |
| <frameset> | Mendefinisikan satu set frame |
| <h1> to <h6> | Digunakan untuk menunjukkan awal dari suatu header/judul dari dokumen HTML tersebut. |
| <head> | Digunakan untuk memberikan informasi tentang dokumen tersebut |
| <hr /> | Membuat garis horisontal |
| <html> | Mendefinisikan root dari suatu dokumen HTML |
| <i> | Membuat teks miring |
| <iframe> | Mendefinisikan sebuah inline frame |
| <img /> | Berfungsi untuk menampilkan gambar pada dokumen HTML |
| <input /> | Mendefinisikan input field pada form |
| <ins> | Membuat teks bergaris bawah |
| <kbd> | Mendefinisikan teks yang di input dari keyboard |
| <label> | Mendefinisikan label untuk sebuah elemen <input> |
| <legend> | Mendefinisikan sebuah caption untuk elemen <fieldset> |
| <li> | Digunakan untuk menampilkan informasi dalam bentuk item daftar |
| <link /> | Mendefinisikan hubungan antara dokumen dan sumber eksternalnya |
| <listing> | Fungsi tag ini sama dengan tag <pre> dan dianjurkan menggunakan tag <pre> karena tag <listing> tidak layak/diprotes |
| <map> | Mendefinisikan client-side peta gambar |
| <marquee> | Membuat teks berjalan secara vertikal atau horisontal |
| <menu> | Mendefinisikan sebuah daftar menu |
| <meta /> | Mendefinisikan metadata tentang sebuah dokumen HTML |
| <nobr> | Mencegah ganti baris pada teks atau gambar |
| <noframes> | Jika browser user tidak mendukung frame |
| <noscript> | Jika browser user tidak mendukung client-side scripts |
| <object> | meletakkan embed sebuah objek |
| <ol> | Mendefinisikan daftar dalam format penomoran |
| <optgroup> | Menampilkan beberapa pilihan yang sudah dikelompokkan dalam bentuk sebuah daftar drop-down |
| <option> | Menampilkan beberapa pilihan yang berbentuk dalam sebuah daftar drop-down |
| <p> | Membuat sebuah paragraf |
| <param /> | Mendefinisikan sebuah parameter untuk objek |
| <pre> | Membuat teks dengan ukuran huruf yang sama |
| <q> | Mendefinisikan sebuah kutipan singkat |
| <s> | Untuk memberi garis tengah pada teks/mencoret teks, fungsi tag ini sama dengan tag <del> tetapi tag <s> tidak dianjurkan sebagai gantinya menggunakan tag <del> |
| <samp> | Mendefinisikan contoh keluaran dari program komputer |
| <script> | Mendefinisikan client-side script |
| <select> | Membuat daftar drop-down |
| <small> | Memperkecil ukuran teks dari ukuran defaultnya |
| <span> | Mendefinisikan sebuah section dalam dokumen |
| <strike> | Untuk memberi garis tengah pada teks/mencoret teks, fungsi tag ini sama dengan tag <del> |
| <strong> | Membuat teks tebal, fungsi tag ini sama dengan tag <b> |
| <style> | Mendefinisikan informasi style untuk dokumen HTML |
| <sub> | Memberikan efek subscript pada teks |
| <sup> | Memberikan efek superscript pada teks |
| <table> | Membuat tabel |
| <tbody> | Untuk mengelompokkan isi body di dalam sebuah tabel |
| <td> | Mendefinisikan sel di dalam sebuah tabel |
| <textarea> | Mendefinisikan sebuah kontrol input multiline |
| <tfoot> | Untuk mengelompokkan isi footer di dalam sebuah tabel |
| <th> | Mendefinisikan sel header di dalam sebuah tabel |
| <thead> | Untuk mengelompokkan isi header di dalam sebuah tabel |
| <title> | Membuat judul untuk dokumen HTML |
| <tr> | Membuat baris di dalam sebuah tabel |
| <tt> | Mendefinisikan teletype text |
| <u> | Membuat teks bergaris bawah, fungsi tag ini sama dengan tag <ins> tetapi tag <u> tidak dianjurkan untuk kategori HTML text formatting melainkan termasuk kategori HTML Style |
| <ul> | Mendefinisikan daftar dalam format bullet |
| <var> | Mendefinisikan sebuah variabel |
| <xmp> | Mendefinisikan preformatted text, fungsi tag ini sama dengan tag <pre> |
Struktur Dasar HTML
a. Elemen
Elemen terdiri atas tiga bagian, yaitu tag pembuka, isi, dan tag penutup.Contonya untuk menampilkan judul dokumen HTML pada web browser digunakan element title, dimana: <title> ini adalah tag pembuka judul dokumen HTML.
b. Tag
Tag merupakan teks khusus (markup) berupa dua karakter “<” dan “>“, sebagai contoh <body> adalah tag dengan nama body. Tag ditulis secara berpasangan, yang terdiri atas tag pembuka dan tag penutup (ditambahkan karakter “/” setelah karakter “<“), sebagai contoh <body> ini adalah tag pembuka isi dokumen HTML, dan </body> ini adalah tag penutup isi dokumen HTML. Yang merupakan tag-tag dasar dalam HTML adalah:
- <html> </html>
Tag <html> dan </html> digunakan untuk menandai awal dan akhir dari suatu file HTML. - <title> </title>
Tulisan yang berada diantara tag <title> dan </title> akan ditampilkan oleh browser pada bagian title dan merupakan title dari jendela browser. - <head> </head>
Berisi keterangan informasi, seperti title dan jenis dokumen, ditulis diantara <head> </head>. - <body> </body>
Bagian tag <body> </body> menandai awal dan akhir dari badan dokumen HTML. Tag ini memiliki sejumlah attribut yang dapat ditentukan.
Contoh HTML
setelah mempelajari pengertian, sejarah dan fungsi dari html, selanjutnya ialah mempelajari contoh bahasa HTML yang bisa digunakan untuk membuat sebuah website. Dan dibawah ini merupakan salah satu contoh dasar HTML, yang digunakan untuk membuat sebuah website sederhana.
<html>
<head>
<title> ayoksinau</title>
</head>
<body>
<body bgcolor=”red”>
<h1>situs yang ngajak sinau bareng</h1>
<center>
<font size=”13″ color=”black” face=”arial”>
<p>ayok belajar bersama kami</p>
<b>ini adalah wab kami</b>
<i>Fungsi adalah memberikan pelajaran dan wawasan</i>
<u>Itu semua mudah jika anda serius mempelajarinya :)</u>
</font>
<br>
<marquee>
<img src=”image.jpg atau bisa juga menginputkan alamat URL dari gambar yang kita inginkan”> //* Satukan File HTML dengan gambar yg anda masukan agar dapat dibaca
</marquee>
</center>
</body>
</html>
Keterangan :
- <html> :adalah Untuk memulai sebuah HTML
- <title>:ialah Untuk memberi judul pada yang nantinya akan muncul di TabBrowser
- <head>: ialah Untuk Bagian Header atau Atas
- </head>:ialah Untuk Penutup Header dan diawali dengan garis miring “/”
- <body> : ialah Untuk Bagian Body atau Isi dalam HTML
- </body>: ialah Untuk Penutup/menutup Body dan diawali dengan garis miring “/”
- </html>: ialah Untuk Menutup Sebuah HTML dan diawali juga dengan garis miring “/”
diatas merupakan kode-kode Dasar untuk membuat sebuah HTML
Dalam HTML juga terdapat Tag-tag tertentu untuk mendukung membuat website yang ada dibawah ini, ada beberapa Tag dasar yang harus anda ketahui dalam HTML.
- <h1> : ini ialah Tag Heading, yang berlevel 1, selain <h1> ada juga <h2>, <h3>, <h4>, <h5>, <h6>
- <b> : (Bold) Fungsinya adalah untuk membuat Huruf menjadi Tebal
- <i> : (Italic) Fungsinya adalah untuk membuat Huruf menjadi Miring
- <u> : (Underline) Fungsinya adalah untuk membuat dibawah huruf berisi garis
- <p> :ialah Untuk membuat sebuah Paragraf
- <br> :ialah untuk Membuat sebuah baris baru atau enter
- <hr> : ialah untuk membuat sebuah garis Horizontal
- <center> :ialah untuk membuat tulisan atau gambar berada di tengah-tengah
- <img src=”gambar-anda.jpg atau Url gambar anda”> : fungsinya adalah untuk memasukan sebuah gambar
- <body bgcolor=”black”> : Fungsinya adalah untuk memberi warna untuk background atau latar belakang dan “black” bisa diganti sesuai keinginan anda, misalnya “red”, “yellow”
- <font color=”red”> :ialah Untuk mengatur warna Text dan ditutup dengan </font>
- <font size=”12″> :ialah untuk mengatur Ukuran Sebuah Text dan ditutup dengan </font>
- <font face=”arial”> :ialah Untuk mengatur jenis Font atau Text yang akan digunakan
- <marquee> : ialah untuk membuat sebuah text ataupun gambar bergerak
