Penjelasan dan Sejarah Tentang HTML

HyperText Markup Language (HTML)

HTML adalah sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah Penjelajah web Internet dan formating hypertext sederhana yang ditulis kedalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan kedalam format ASCII normal sehingga menjadi home page dengan perintah-perintah HTML. Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML (Standard Generalized Markup Language), HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web. HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C). HTML dibuat oleh kolaborasi Caillau TIM dengan Berners-lee robert ketika mereka bekerja di CERN pada tahun 1989 (CERN adalah lembaga penelitian fisika energi tinggi di Jenewa). [1]

Tahun 1980, IBM memikirkan pembuatan suatu dokumen yang akan mengenali setiap elemen dari dokumen dengan suatu tanda tertentu. IBM kemudian mengembangkan suatu jenis bahasa yang menggabungkan teks dengan perintah-perintah pemformatan dokumen. Bahasa ini dinamakan Markup Langiage, sebuah bahasa yang menggunakan tanda-tanda sebagai basisnya. IBM menamakan sistemnya ini sebagai Generalized Markup Language atau GML.

Tahun 1986, ISO menyatakan bahwa IBM memiliki suatu konsep tentang dokumen yang sangat baik, dan kemudian mengeluarkan suatu publikasi ( ISO 8879 ) yang menyatakan markup language sebagai standar untuk pembuatan dokumen-dokumen. ISO membuat bahasa ini dari GML milik IBM, tetapi memberinya nama lain, yaitu SGML ( Standard Generalized Markup Language ).

ISO dalam publikasinya meyakini bahwa SGML akan sangat berguna untuk pemrosesan informasi teks dan sistem-sistem perkantoran. Tetapi diluar perkiraan ISO, SGML dan terutama subset dari SGML, yaitu HTML juga berguna untuk menjelajahi internet. Khususnya bagi mereka yang menggunakan World Wide Web. Versi terakhir dari HTML adalah HTML 4.01, meskipun saat ini telah berkembang XHTML yang merupakan pengembangan dari HTML.

Dasar-Dasar HTML

HTTP (Hypertext transfer protocol) merupakan protokol yang digunakan untuk mentransfer data antara web server ke web browser. Protocol ini mentransfer dokumen-dokumen web yang ditulis atau berformat HTML (Hypertext Markup Language). Dikatakan markup language karena HTML berfungsi untuk ‘memperindah’ file teks biasa untuk ditampilkan pada program web browser hal ini dilakukan dengan menambahkan elemen atu sering disebut sebagai tag-tag pada file teks biasa tersebut. Saat ini sudah dikenal HTML5 yang menawarkan berbagai fitur menarik yang tidak didukung oleh HTML sebelumnya. Beberapa fitur yang tersedia pada HTML5 antara lain sebagai berikut.

· Canvas. Memungkinkan pembuatan gambar dalam kanvas. Jadi, gambar tidak lagi diambil dari gambar utuh, melainkan bisa disusun sendiri, bak menggunakan program Paint.

· Header. Berguna untuk menyatakan suatu judul, yang bisa diisi dengan elemen logo dan nama perusahaan.

· Footer. Merupakan kebalikan dari header. Sebagai catatan kaki, elemen ini berguna untuk menaruh informasi di bagian bawah halaman web.

· Time. Elemen ini berguna untuk menyajikan informasi tentang waktu.

· Audio. Memungkinkan penyajian player untuk memutar suara.

· Video. Memungkinkan player untuk memainkan film.

Secara prinsip, fitur pada HTML dapat dikelompokkan ke dalam :

Ø Struktur halaman ;

Ø Presentasi visual ;

Ø Peranti penyaji gambar ;

Ø Pendukung media ; dan

Peningkatan koneksi dengan JavaScript.

Sejarah dari standar HTML

HTML 2.0—(RFC 1866) disetujui sebagai standar 22 September 1995,
HTML 3.2—14 Januari 1996,
HTML 4.0—18 Desember 1997,
HTML 4.01 (minor fixes)—24 Desember 1999,
ISO/IEC 15445:2000 ("ISO HTML", berdasar pada HTML 4.01 Strict)—15 Mei 2000.
HTML 5 — Januari 2008 - sekarang.

Kegunaan HTML

HTML dokumen tersebut mirip dengan dokumen tulisan biasa, hanya dalam dokumen ini sebuah tulisan bisa memuat instruksi yang ditandai dengan kode atau lebih dikenal dengan TAG tertentu. Sebagai contoh jika ingin membuat tulisan ditampilkan menjadi tebal seperti: TAMPIL TEBAL, maka penulisannya dilakukan dengan cara: < b> TAMPIL TEBAL</b>. Tanda < b> digunakan untuk mengaktifkan instruksi cetak tebal, diikuti oleh tulisan yang ingin ditebalkan, dan diakhiri dengan tanda </b> untuk menonaktifkan cetak tebal tersebut. HTML lebih menekankan pada penggambaran komponen-komponen struktur dan format di dalam halaman web daripada menentukan penampilannya. Sedangkan penjelajah web digunakan untuk menginterpretasikan susunan halaman ke gaya built-in penjelajah web dengan menggunakan jenis tulisan, tab, warna, garis, dan perataan text yang dikehendaki ke komputer yang menampilkan halaman web. Salah satu hal Penting tentang eksistensi HTML adalah tersedianya Lingua franca (bahasa Komunikasi) antar komputer dengan kemampuan berbeda. Pengguna Macintosh tidak dapat melihat tampilan yang sama sebagaimana tampilan yang terlihat dalam pc berbasis Windows. Pengguna Microsoft Windows pun tidak akan dapat melihat tampilan yang sama sebagaimana tampilan yang terlihat pada pengguna yang menggunakan Produk-produk Sun Microsystems. namun demikian pengguna-pengguna tersebut dapat melihat semua halaman web yang telah diformat dan berisi Grafika dan Pranala.

Menyunting format tulisan

HTML memungkinkan seseorang untuk menyunting tampilan atau format berkas yang akan dikirimkan melalui media daring. Beberapa hal yang dapat dilakukan dalam menentukan format berkas adalah:

Menampilkan suatu kelompok kata dalam beberapa ukuran yang dapat digunakan untuk judul, heading dan sebagainya.
Menampilkan tulisan dalam bentuk cetakan tebal
Menampilkan sekelompok kata dalam bentuk miring
Menampilkan naskah dalam bentuk huruf yang mirip dengan hasil ketikan mesin ketik
Mengubah-ubah ukuran tulisan untuk suatu karakter tertentu.

Markah/Tanda

Secara garis besar, terdapat 4 jenis elemen dari HTML:

Struktural. Tanda yang menentukan level atau tingkatan dari sebuah tulisan (contoh, < h1> Golf</h1> akan memerintahkan peramban untuk menampilkan "Golf" sebagai tulisan tebal besar yang menunjukkan sebagai Heading 1
Presentasional. Tanda yang menentukan tampilan dari sebuah tulisan tidak peduli dengan level dari tulisan tersebut (contoh, < b> boldface</b> akan menampilkan bold. Tanda presentasional saat ini sudah mulai digantikan oleh CSS dan tidak direkomendasikan untuk mengatur tampilan tulisan,
Hiperteks. Tanda yang menunjukkan pranala ke bagian dari dokumen tersebut atau pranala ke dokumen lain (contoh, < a href="http://www.wikipedia.org/"> Wikipedia</a> akan menampilkan Wikipedia sebagai sebuah hyperlink ke URL tertentu),
Elemen widget yang membuat objek-objek lain seperti tombol (< button>), list (< li>), dan garis horizontal (< hr>). Konsep hypertext pada HTML memungkinkan pembuatan link pada suatu kelompok kata atau frasa untuk menuju ke bagian manapun dalam World Wide Web,

Ada tiga macam pranala (link) yang dapat digunakan:

Pranala menuju bagian lain dari page.
Pranala menuju page lain dalam satu web site.
Pranala menuju resource atau web site yang berbeda.
Selain markup presentasional, markup yang lain tidak menentukan bagaimana tampilan dari sebuah tulisan. Namun untuk saat ini, penggunaan tag HTML untuk menentukan tampilan telah dianjurkan untuk mulai ditinggalkan, dan sebagai gantinya digunakan Cascading Style Sheets(CSS).

Kelebihan dari HTML

1. Merupakan bahasa penkodean yang lintas platform (cross platform), maksudnya HTML dapat digunakan pada berbagai jenis mesin komputer yang berbeda dan berbagai macam sistem operasi yang berbeda. Jadi bersifat fleksibel karena ditulis cukup dengan menggunakan editor karakter ASCII.

2. Dapat disisipi gambar baik gambar statis atau dinamis (animasi) termasuk menggunakan gambar untuk dijadikan hyperlink. Gambar di sini digunakan untuk merujuk pada suatu halaman web, dimana setiap titik-titik yang sudah didefinisikan berupa rectangular (kotak), poligon (kurva tak beraturan) atau lingkaran digunakan untuk ‘jump’ ke halaman lain, atau link ke halaman di luar web yang bersangkutan.
3. Dapat disisipi animasi berupa Java Applet atau file-file animasi dari Macromedia Flash atau Macromedia Shockwave (untuk keperluan ini, browser harus memiliki plug-in khusus untuk menjalankan file-file animasi ini).

4.Dapat disisipi bahasa pemrograman untuk mempercantik halaman web seperti Javascript, VBScript, Active Server Pages, Perl, Tcl, PHP dan sebagainya.
Bukan merupakan bahasa pemrograman jadi tidak memerlukan kompiler. Cara menjalanakannya cukup dengan menggunakan browser.

Kekurangan dari HTML

1. Menghasilkan halaman yang statis, yang saya tahu untuk memperoleh halaman yang dinamis harus menggunakan bahasa pemrograman tertentu seperti Javascript atau VBScript dan animasi seperti Flash atauShockwave.

2. Memiliki tag-tag yang begitu banyak sehingga susah dipelajari untuk yang masih awam.
Tidak dapat menghasilkan halaman yang interaktif. Interaktif di sini maksudnya client dapat berinteraksi dengan server. Untuk keperluan itu, HTML harus disisipi bahasa pemrograman yang dapat menangani hal tersebut, contohnya Perl atau Tcl.

Pemahaman HTML
secara konsep html menggunakan sistem buka tutup, ambil contoh <b>Tulisan Tebal</b> .
coba kita lihat..., dibuka dengan tag <b> lalu di tutup dengan tag </b>, namun ada juga yang seperti ini, baris 1 <br /> baris 2 . tag br di tutup dengan ..../> , jelasnya :

Code:

atau

Code:

Pengertian Jenis-Jenis Tag Form dalam HTML

Form
Adalah salah satu type pemrograman web HTML yang biasanya digunakan untuk pendaftaran akun, log in akun, pengumpulan data, dll pada sebuah situs web.
Disini kita akan membahas penggunaan Tag Form pada pemrograman HTML.

Pengertian Tag Form
Sebuah form dalam HTML harus berada di dalam tag form, yang diawali dengan <form> dan diakhiri dengan </form>. Tag form akan membutuhkan beberapa atribut untuk dapat berfungsi.
Perintah <form> memiliki beberapa atribut yaitu :

· Action : digunakan untuk menentukan tujuan form dikirim dan diproses

· Method : digunakan untuk menentukan cara pengiriman data bisa post atau get

· Name dan ID : digunakan sebagai identitas unik form dalam sebuah halaman

diantara perintah form disisipkan elemen input yang berfungsi sebagai objek visual untuk menerima masukan dari pengguna

Mengenal Tentang Tag Input
Tag input merupakan tag paling banyak digunakan di dalam form, dan memiliki banyak bentuk, mulai dari isian text biasa, text password, checkbox, radio, sampai dengan tombol submit, dll. semuanya dalam bentuk tag input.

Contoh bentuk-bentuk Tag Input adalah sebagai-berikut :

1. <input type=”text” /> atau bisa juga <input /> adalah textbox inputan biasa yang menerima input berupa text, contohnya digunakan untuk inputan nama, username, dan inputan yang berupa text pendek. Input type text ini juga bisa memiliki atribut value yang bisa diisi nilai tampilan awal dari text.

2. <input type=”password” /> dalam tampilannya sama dengan type text, namun teks yang diinput tidak akan terlihat, akan berupa bintang atau bulatan. Biasanya hanya digunakan untuk inputan yang sensitif seperti password.

3. <input type=”checkbox” /> adalah inputan berupa checkbox yang dapat diceklist atau di centang oleh user. User dapat memilih atau tidak memilih checkbox ini. Type checkbox memiliki atribut checked yang jika ditulis atau diisi dengan nilai checked, akan membuat chexkbox langsung terpilih pada saat pertama kali halaman ditampilkan. Contoh inputan checkbox berupa hobi, yang oleh user dapat dipilih beberapa hobi.

4. <input type=”radio” /> mirip dengan checkbox, namun user hanya bisa memilih satu diantara pilihan group radio.Type radio ini berada dalam suatu grup dan user hanya bisa memilih salah satunya. Contoh inputan type radio adalah jenis kelamin.

5. <input type=”submit” /> akan menampilkan tombol untuk memproses form. Biasanya diletakkan pada baris terakhir dari form.
Setiap elemen form membutuhkan tombol submit untuk mengirimkan nama dan nilainya ke suatu aplikasi yang di tentukan dlam atribut ACTION dlam elemen FORM.
Atribut value jika diisi akan membuat text tombol submit berubah sesuai inputan nilai value.

6.        <input type"hidden"> Digunkan untuk mengirim data ke suatu aplikasi yang tidak dingginkan untuk dilihat oleh browser.
Name                  = nama dari variable yang dikirim ke suatu aplikasi
Value                  = nilai dari variable

7.        Push Button<input type="button">
Elemen ini biasanya digunakan dengan JavaScript atau VBScript untuk menghasilkan suatu aksi.
Name                    = nama dari variable yang dikirim ke suatu aplikasi
Value                    = label teks di atas tombol

8. Image Submit Button<input type="image" src="url">
Digunakan untuk menggantikan tombol standar submit dengan image.
Name = nama dari variable ayng dikirim ke suatu aplikasi

9. Reset<input type="reset">
Digunakan untuk mereset semua masukan dalam form.
Value = label teks di button

Jadi form yang tersedia rasanya sudah cukup lengkap untuk semua keperluan jika kita mau bikin aplikasi web ataupun hanya sekedar fasilitas dihalaman web. Tinggal tampilan saja yang perlu kita buat sebagus mungkin agar menarik.

Kerangka HTML

Dasar utamanya HTML memiliki Rangka :

Code:

<!DOCTYPE HTML >

<html>

<head>

<title>Judul HTML</title>

</head>

<body>

<p>Ini Sebuah Paragraf</p>

</body>

</html>

Penjelasan Tentang Dokumen HTML5

· Sebuah dokumen HTML5 diawali dengan<!DOCTYPE HTML>.

· Beberapa tag berpasangan. Sebagai contoh,<head> berpasangan dengan</ head > .

· Namun, tidak semua tag berpasangan. Sebagai contoh ,<br>
tidak punya pasangan. Khusus untuk tag seperti ini, tidak ada keharusan untuk menyertakan tanda / sebelum >. Pada XHTML, tanda seperti / memang diharuskan untuk ditulis.

· Pasangan <html >..</html>menyatakan awal dokumen HTML.

· Pasangan< head >..</head > .. menyatakan bagian judul dokumen HTML. Isinya paling tidak berupa pasangan<tittle>..</ tittle>

Atribut - Atribut HTML

Atribut - atribut menyediakan informasi tambahan tentang elemen - elemen HTML.

· Elemen HTML bisa memiliki atribut

· Atribut menyediakan informasi tambahan tentang elemen

· Atribut selalu ditulis di tag pembuka

· Atribut ditulis dalam pasangan nama/nilai seperti : nama="nilai"

v Atribut Lang

Atribut lang digunakan untuk mendeklarasikan bahasa yang digunakan.

Atribut lang ditulis didalam tag pembuka <html>.

Contoh :

<!DOCTYPE html>

<html lang=id>

<body>

<h1>Heading Pertama Saya</h1>

<p>Paragraf pertama saya.</p>

</body>

</html

v Atribut title

Atribut title ditulis didalam tag <p>.

Ketika anda memindahkan mouse ke elemen, judul akan ditampilkan sebagai tooltip.

Contoh :

<p title="Judul Paragraf">Contoh penggunaan atribut title.</p>

v Atribut href

Atribut href digunakan untuk menentukan alamat link

Contoh :

<a href="http://tajak-meurunoe.blogspot.com">Ini adalah sebuah tautan</a>

v Atribut size

Atribut size digunakan dalam tag <img> untuk menentukan ukuran tampilan gambar.

Atribut size ditulis dengan width untuk menentukan lebar, atau height untuk menentukan tinggi dengan satuan piksel.

Contoh :

<img src="../../../resources/images/Logo.png" width="150" height="224"/>

v Atribut alt

Atribut alt menentukan teks alternatif yang akan digunakan ketika elemen HTML tidak bisa ditampilkan.

Contoh :

<img src="../../../resources/images/Logo.png" alt="Logo muhammadsyarifwicaksono.web.id">