EKO HERMANTO

TEKNIK ELEKTRO
3332081493

HyperText Markup Language (HTML)

Apa yang dimaksud dengan file HTML?
HTML merupakan kependekan dari Hyper Text markup Language
Sebuah file HTML merupakan sebuah file teks yang berisi tag-tag markup
Tag markup memberitahukan browser bagaimana harus menampilkan
sebuah halaman
File HTML harus memiliki ekstensi htm atau html
File HTML dapat dibuat menggunakan editor teks yang biasa kamu pakai
HyperText Markup Language (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).
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 perintahperintah 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 dokumendokumen. 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.

EKO HERMANTO
TEKNIK ELEKTRO
3332081493

Pendahuluan
HTML berupa kode-kode tag yang menginstruksikan penjelajah web untuk
menghasilkan tampilan sesuai dengan yang diinginkan. Sebuah file yang merupakan
file HTML dapat dibuka dengan menggunakan penjelajah web seperti Mozilla Firefox
atau Microsoft Internet Explorer. HTML juga dapat dikenali oleh aplikasi pembuka
surel ataupun dari PDA dan perangkat lunak lain yang memiliki kemampuan
browser. Dengan menggunakan perintah-perintah HTML memungkinkan pengguna
untuk melakukan tugas-tugas berikut:
Menentukan ukuran dan alur tulisan.
Mengintegerasikan gambar dengan tulisan.
Membuat Pranala.
Mengintegerasikan berkas suara dan rekaman gambar hidup.
Membuat form interaktif.
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 formating 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 kita untuk menyunting tampilan atau format berkas yang
akan kita kirimkan melalui media daring. Beberapa hal yang dapat dilakukan dalam
menentukan format berkas adalah :
Kita dapat menampilkan suatu kelompok kata dalam beberapa ukuran
yang dapat digunakan untuk judul, heading dan sebagainya.
Kita dapat menampilkan tulisan dalam bentuk cetakan tebal
Kita dapat menampilkan sekelompok kata dalam bentuk miring
Kita dapat menampilkan naskah dalam bentuk huruf yang mirip dengan
hasil ketikan mesin ketik
Kita dapat mengubah-ubah ukuran tulisan untuk suatu karakter tertentu.

EKO HERMANTO
TEKNIK ELEKTRO
3332081493

Markup/Tanda
Secara garis besar, terdapat 4 jenis elemen dari HTML:
1. structural. tanda yang menentukan level atau tingkatan dari sebuah tulisan
(contoh, <h1>Golf</h1> akan memerintahkan browser untuk menampilkan
"Golf" sebagai tulisan tebal besar yang menunjukkan sebagai Heading 1.
2. presentational. tanda yang menentukan tampilan dari sebuah tulisan tidak
peduli dengan level dari tulisan tersebut (contoh, <b>boldface</b> akan
menampilkan bold. Tanda presentational saat ini sudah mulai digantikan oleh
CSS dan tidak direkomendasikan untuk mengatur tampilan tulisan.
3. hypertext. tanda yang menunjukkan pranala ke bagian dari dokumen tersebut
atau
pranala
ke
dokumen
lain
(contoh,
<a
href="http://okeponsel.blogspot.com/">OKEPONSEL</a> akan menampilkan
OKEPONSEL sebagai sebuah hyperlink ke URL tertentu).
4. Elemen widget yang membuat objek-objek lain seperti tombol (<button>), list
(<li>), dan garis horizontal (<hr>), Konsep hypertext pada HTML
memungkinkan kita untuk membuat link pada suatu kelompok kata atau frase
untuk menuju ke bagian manapun dalam World Wide Web.
Ada tiga macam link yang dapat kita gunakan :
1. Link menuju bagian lain dari page
2. Link menuju page lain dalam satu web site
3. Link menuju resource atau web site yang berbeda.
Selain markup presentational , 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.
Contoh dokumen HTML sederhana
<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman</title>
</head>
<body>
Ini halaman pertama saya. <b>Teks ini ditebalkan</b>
</body>
</html>
HEAD
Bagian header dari document HTML di apit oleh tag <HEAD></HEAD> di
dalam bagian ini biasanya dimuat tag TITLE yang menampilkan judul dari halaman
pada titlenya browser. Selain itu Bookmark juga megunakan tag TITLE untuk
memberi mark suatu web site. Browser menyimpan titile sebagai bookmark dan

EKO HERMANTO
TEKNIK ELEKTRO
3332081493

juga untuk keperluan pencarian (searching) biasanya title di gunakan sebagai

keyword. Header juga memuat tag META yang biasanya di gunakan untuk
menentukan informasi tertentu mengenai document HTML, anda bisa menentukan
author name, keywords, dan lainyan pada tag META.
Contoh:
<meta name="author" content="ubuntu-online">
Elemen Body
Bagian BODY, yang dinyatakan dengan tag <BODY></BODY>, merupakan
tubuh atau isi dari dokumen HTML dimana anda meletakan informasi yang akan
ditampilkan pada browser.
Elemen HTML ini dimulai dengan tag pembuka: <b>, isi dari elemen HTML
adalah teks ini ditebalkan, elemen HTML diakhiri dengan tag penutup: </b>. Fungsi
tag <b> adalah untuk mendefinisikan sebuah elemen HTML yang harus ditampilkan
dengan huruf tebal.
Tag
Berikut poin-poin yang akan membantu kamu mengingat dan memahami
pengertian Tag HTML:
Tag HTML digunakan untuk menandai (mark-up) elemen HTML
Tag HTML berada di antara dua karakter penanda berikut < dan >
Karakter penanda itu disebut dengan tanda kurung siku
Tag HTML umumnya selalu berpasangan seperti <b> dan </b>
Tag pertama adalah tag pembuka, dan tag kedua adalah tag penutup
Teks di antara kedua tag tersebut disebut isi elemen
Tag HTML tidak bersifat case sensitif, <b> memiliki arti yang sama dengan
<B>
HTML tidak membedakan penggunaan huruf besar ataupun huruf kecil dari
suatu elemen. Suatu elemen HTML terdiri dari tag-tag beserta teks yang ada dalam
tag-tag tersebut. Tag ini dinyatakan dengan tanda lebih kecil (<) dan tanda lebih
besar (>). Tag biasanya merupakan suatu pasangan yang disebut dengan : 1. Tag
awal, dinyatakan dalam bentuk <nama tag> 2. Tag akhir, dinyatakan dalam bentuk
</nama tag>
Format : <nama tag> teks yang ditampilkan </nama tag> Contoh : untuk
menampilkan teks dalam format teks miring Teks ini terlihat miring di browser anda
dengan perintah HTML <i>Teks ini terlihat miring di browser Anda</i>.
Tag HTML yang paling penting adalah tag-tag yang mendefinisikan judul,
paragraf dan ganti baris.
Judul
Judul didefinisikan dengan menggunakan tag <h1> sampai >h6>. <h1>
mendefinisikan huruf judul yang paling besar, dan <h6> yang terkecil. HTML
secara otomatis akan menambahkan baris kosong sebelum dan sesudah
judul. Contoh:

EKO HERMANTO
TEKNIK ELEKTRO
3332081493

<h1>Ini Judul</h1>
<h2>Ini Judul</h2>
<h3>Ini Judul</h3>
<h4>Ini Judul</h4>
<h5>Ini Judul</h5>
<h6>Ini Judul</h6>
Paragraf
Paragraf didefinisikan dengan menggunakan tag <p>. Sama seperti
judul, HTML secara otomatis akan menambahkan baris kosong sebelum dan
sesudah paragraf. Contoh:
<p>Ini adalah sebuah paragraf</p>
<p>Ini paragraf lainnya</p>
Ganti Baris
Tag <br> digunakan pada saat kamu ingin membuat baris baru, tapi
belum ingin ganti paragraf. Tag <br> akan membuatkan sebuah baris baru
buat kamu dimanapun kamu letakkan tag itu. Tag <br> adalah tag yang
kosong. Nah, karena itu dia tidak punya tag penutup seperti misalnya </br>.
Contoh:
<p>Ini <br> adalah sebuah pa<br>ragaraf dengan ganti baris </p>
Kamu akan makin sering melihat penulisan tag <br> dengan cara begini:
<br />. Karena tag <br> tidak memiliki tag penutup, maka tag tersebut
melanggar salah satu aturan dasar dalam penulisan HTML ke depannya
(XHTML yang berbasis XML), di mana semua elemen harus ditutup.
Menuliskan penggantian baris dengan cara <br/> ini menjamin bahwa
file HTML kamu akan kompatibel dengan XML maupun cara penulisan HTML
di masa datang.
Menuliskan Komentar dalam HTML
Tag komentar digunakan untuk menyisipkan sebuah komentar dalam
kode sumber HTML. Sebuah komentar akan diabaikan oleh browser. Kamu
bisa menggunakan komentar untuk menjelaskan kode yang kamu bikin, dan
tentu saja hal ini akan membantu kamu saat kamu perlu melakukan
perubahan pada kode kamu kapan-kapan. Perhatikan bahwa kamu perlu
menuliskan tanda seru setelah kurung buka, tetapi tidak sebelum kurung
tutupnya. Contoh:
<!-- Ini adalah sebuah komentar -->
Ingat hal-hal berikut!
Setiap tag HTML memiliki sebuah nama elemen (body, h1, p, br)
Tag pembuka adalah nama yang dilingkupi oleh tanda kurung siku: <h1>
Tag penutup adalah tanda garis miring dan nama yang dilingkupi oleh tanda
kurung siku </h1>
5

EKO HERMANTO
TEKNIK ELEKTRO
3332081493

Isi elemen berada di antara tag pembuka dan tag penutup

Beberapa elemen HTML tidak memiliki isi elemen
Beberapa elemen HTML tidak memiliki tag penutup
Tag HTML Dasar
Berikut adalah tag-tag penting yang akan sangat sering kamu pakai. Dan kamu
akan mempelajari masing-masing secara lebih detil terutama yang menyangkut
atributnya.
Tag - Description
<html>
- Mendefinsikan sebuah dokumen HTML
<body>
- Mendefinisikan isi utama
<h1> to <h6> - Mendefinisikan judul 1 sampai 6
<p>
- Mendefinisikan paragraf
<br>
- Menyisipkan sebuah baris
<hr>
- Mendefinisikan garis horisontal
<!-->
- Bikin komentar
Atribute
Tag awal bisa memiliki beberapa buah atribut yang menyatakan karakteristik
dari tag tersebut. Misalnya : digunakan untuk membuat rata kiri suatu paragraf. Tag
yang digunakan adalah dan atribut yang menyertainya adalah ALIGN dengan nilai
left. Nilai atribut ALIGN hanya bisa berupa center, left, right atau justify.
Entitas karakter
Beberapa karakter memiliki arti khusus dalam HTML, seperti tanda lebih kecil
(<) yang mendefinisikan awal dari sebuah tag HTML. Kalau kita ingin agar browser
menampilkan tanda lebih kecil itu (<), kita harus menyisipkan entitas karakter dalam
kode HTML kita. Entitas karakter memiliki 3 komponen: sebuah tanda dan (&), nama
entitas atau sebuah # yang diikuti nomor entitas dan diakhiri dengan tanda titik koma
(;).
Untuk menampilkan tanda lebih kecil dalam halaman HTML kita, maka kita
harus menuliskan : &lt; atau &#60;. Keuntungan menggunakan nama dibandingkan
nomor adalah bahwa nama lebih mudah untuk diingat. Kekurangannya adalah
bahwa tidak semua browser mendukung nama-nama entitas yang baru, namun
demikian hampir semua browser mendukung nama entitas standar.
Catatan: entitas bersifat case sensitif.
Spasi berurutan
Entitas karakter yang mungkin akan paling sering kamu pakai adalah spasi.
HTML akan menghilangkan spasi dalam teks HTML kamu. Kalau kamu menuliskan
10 spasi pada kode HTML kamu, maka HTML akan menghapus 9 spasi. Nah, untuk
menambahkan spasi pada dokumen HTML kamu, gunakan entitas karakter &nbsp;

EKO HERMANTO
TEKNIK ELEKTRO
3332081493

Beberapa entitas karakter yang sering dipakai:

Berikut beberapa tag untuk mengubah tampilan huruf yang sering digunakan:

Link HTML
Sebuah link adalah sebuah alamat yang merujuk ke dokumen atau alamat
lainnya di Internet. Menurut saya sebenarnya konsep link inilah yang akhirnya benarbenar membuat web menjadi sangat bermanfaat dan akhirnya menjadi sangat besar
seperti sekarang ini. Orang sangat mudah merujuk ke referensi lain yang semuanya
tersedia online.
Hyperlinks, Anchors, dan Links
Dalam istilah web, hyperlink adalah referensi (sebuah alamat) ke sumbersumber informasi lain di Internet.Hyperlink biasanya merujuk ke sebuah halaman
HTML, sebuah gambar, file suara, movie, dll. Sedangkan anchor (bahasa
Indonesianya Jangkar) adalah istilah yang digunakan untuk mendefinisikan
tujuan hyperlink dalam sebuah dokumen. Untuk membuat hyperlink dan anchor
kita menggunakan elemen HTML anchor <a>.Contoh sintaks Link:
<a href="/caramembuatwebsite/url">Teks Link</a>
Tag pembuka berisi atribut link tersebut. Isi elemen (Teks link)
mendefinisikan apa yang ingin anda tampilkan ke pengunjung.

EKO HERMANTO
TEKNIK ELEKTRO
3332081493

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 masih dalam draft pengerjaan Januari 2008.
Referensi
Wendy willard (2006). HTML. ISBN 979-0-07-226378-7.
David willard (2005). Crash Course. ISBN 0-07-142242-0.
Andi (2001). Desain Web dengan Microsoft FrontPage 97. Wahana Komputer
& Andi Yogyakarta. ISBN 979-533-521-9.
Shelly woods (2001). Introductory Concepts and Techniques. Gex publising
service. ISBN 978-1429-2720-6.
Steven E. Callihan (2006). HTML 4 in a Weekend. USA. ISBN 1-59200-059-2.
http://prothelon.com/caramembuatwebsite/tutorial-html/
http://id.wikipedia.org/wiki/Hypertext_markup_language