BELAJAR WEB ONLINE

BAHASA HTML
(Hypertext Markup
Language)
HTML Merupakan suatu script dimana kita bisa menampilkan informasi dan daya
kreasi kiata lewat Internet.HTML memiliki perbedaan dengan dokumen teks
biasa.misalnya:perbedaan yang paling men-colok adalah pada dokumen
word,banyaknya karakter akan terbatasi oleh besarnya kertas.Sedangkan HTML tak
memiliki batasan teks.

HTML adalah Bahasa pemrograman yang fleksibel di mana kita bisa meletakkan
skrip dari bahasa pemrograman lain seperti JAVA,Visual Basic,C dan lain-lain.jika
HTML tersebut tidak dapat mendukung suatu perintah pemrograman
tertentu.Browser tidak akan menampilkan kotak dialog”Syntax Error” jika terdapat
penulisan kode yang keliru pada skrip HTML sepanjang kode-kode yang kita tuliskan
merupakan kode-kode HTML tanpa penambahan kode-kode dari luar seperti java.
Oleh karena itu,jika terjadi syntax error pada skrip HTML ,efek yang paling jelas
adalah HTML tersebut tak akan ditampilkan pada halaman jendela Browser.

1. Sejarah HTML

Konsep hypertext bagi kebanyakan orang merupakan sesuatu yang baru.ide

pembuatan Hypertext itu sendiri muncul tatkala kita akan memberikan
suatu penjelasan khusus terhadap dokumen lainnya lewat suatu link.HTML
memiliki arti bahwa dalam suatu dokumen teks terdapat dua bagian yang
khusus,yaitu bagian teks itu sendiri dan bagian elemen-elemen yang
menjelaskan teks-teks itu.Konsep HTML diciptakan pertama kali oleh IBM
pada tahun 1980 pada saat tercetus ide untuk meletakkan elemen-elemen
yang menandai bagian suatu dokumen seperti judul,alamat,dan isi
dokumen.Lalu ,pada akhirnya elemen-elemen itu menjadi suatu program
untuk melakukan pemformatan dokumen secara otomatis.Bahasa
pemrograman untuk melakukan tugas tersebut disebut markup
Language,atau lebih lengkapnya IBM menamai program tersebut Generalized
Markup Language(GML)

a. SGML KE HTML

HTML dulu merupakan salah satu bagian dari SGML ini.Seorang peneliti
yang bernama Tim Berners-Lee dari CERN-yang kini menjadi direktur
W3C mengemukakan suatu ide tentang pembuatan suatu skrip bahasa
pemrograman dan dokumen yang bisa diakses oleh seluruh komputer
tanpa melihat jenis platform-nya apakah windows,UNIX,Linux,dan
sebagainya.Semenjak itu HTML justru lebih populer daripada SGML
2. Perkembangan HTML

Hingga kini HTML telah mencapai versi 3.02 yang telah kita pakai sekarang
ini

I. HTML VERSI 1.0

HTML Versi 1.0 merupakan HTML Pionir yang di dalamnya masih

terdapat banyak sekali kelemahan sehingga wajar jika tampilanyang di
hasilkan sangat sederhana.Kemampuan yang dimiliki versi 1.0 ini
antara lain heading,paragraf,hyper-

Text,list,serta cetak tebal dan miring pada teks.Versi ini juga

mendukung peletakan image pada dokumennya tanpa
memperbolehkan meletakkan text di sekelilingnya.

II. HTML VERSI 2.0

Pada versi ini,penambahan kualitas HTML terletak pada kemampuan

untuik menampilkan suatu form pada dokumen.Dengan adanya form
ini ,maka kita dapat memasukkan nama,alamat,serta saran dan
kritikan.HTML Versi 2.0 ini merupakan pionir dari adanya Homepage
interaktif.

III. HTML VERSI 3.0

Versi HTML 3.0 menambahkan beberapa fasilitas baru seperti FIGURE

yang merupakan perkembangan dari IMAGE untuk meletakkan gambar
dan tabel.selain itu,HTML ini mendukung adanya rumus-rumus
matematika dalam dokumennya.

IV. HTML VERSI 3.2

HTML Versi 3.2 merupakan HTML yang sering kita gunakan saat ini.Di
dalamnya terdapat suatu teknologi untuk meletakkan teks di sekeliling
gambar,gambar sebagai latar belakang,tabel,frame stylesheet,dan
lain-lain.Selain itu pada HTML Versi ini,kita bisa menggunakan script di
luar HTML untuk mendukung kinerja HTML kita tersebut seperti
JAVASCRIPT,VBSCRIPT,dan lain-lain

V. HTML VERSI 4.0

HTML Versi 4.0 ini merupakan HTML Versi terakhir pada saat buku ini
dibuat.HTML ini memuat banyak sekali perubahan dan revisi dari
pendahulunya .Perubahan ini hampir terjadi di segala perintah-
perintah HTML seperti table,image,link,text,meta,imagemaps,form,dan
lain-lain.Selain Itu versi ini menambahkan beberapa perintah seperti
ABBR,ACRONYM,BDO,BUTTON,FIELDSET,INS,LABEL,LEGEND,OBJECT,OP
TGROUP,PARAM,TBODY,TFOOT,THEAD,dan Q.

3. Mendesain HTML
 Mendesain HTML berarti melakukan suatu tindakan pemrograman.itu
berarti jika anda desainer Homepage,maka anda adalah seorang
programmer.Mendesain Homepage tidaklah hanya sebatas menuliskan
perintah-perintah tertentu agar HTML kita dapat di akses di
Browser.Mendesain Homepage adalah suatu seni tersendiri.Homepage-
yang merupakan implementasi dari HTML-merupakan refleksi dari
orang yang membuatnya.Untuk itu kita perlu mendesainnya denagn
baik agar para netter merasa tertarik dan betah untuk
mengunjunginya(bahkan kalau bisa memboookmark-nya).Mendesain
HTML dapat dilakukan dengan dua cara,yaitu dengan menggunakan
HTML Editor,seperti Netcape Navigator Gold,microsoftword,dan lain-
lain,atau menuliskan script sendiri.Ada kelebihan dan kekurangan dari
dua caradiatas.Kelebihan cara pertama,proses desain homepage dapat
langsung di lihat dan energi kita tidak banyak di keluarkan.Namun
kelemahanny6a dengan HTML Editor ,kita tidak bisa mensisipi suatu
perintah tertentu seperti frame,form,dan lain-lain.Sedangkan dengan
perintah script sendiri,energikita cukup banyak terkuras,dan hasilnya
tak langsung dapat di lihat.script tersebut harus di buka oleh web
Browser.Namun kelebihannya kita bebas menyisipi suatu perintah-
bahkan perintah yang bukan merupakan default HTML,seperti
JAVASCRIPT.

Beberapa web Browser ,Seperti Netscape Navigator,memiliki suatu

fasilitas untuk mendesain Homepage lewat HTML Editornya.Cara
mendesain seperti ini akan terasa lebih menyenangkan di mana kita
tidak perlu menghafal kode-kode perintah dan untuk HTML Editor yang
mendukung kemampuan WYSIWYG.hasil desain homepagenya dapat
langsung kita lihat.HTML Editor ini bisa dimanfaatkan bagi mereka
yang masih awam terhadap bahasa pemrograman HTML
ini.caranya,setelah mendesain suatu Homepage tertentu.htm tersebut
kita buka lewat text-editor,seperti Notepad for windows.

4. Bagian-Bagian pada HTML

HTML terdiri dari beberapa bagian fungsinya sebagai tanda suatu kelompk
perintah tertentu,misalnya perintah form,frame.

1) Elemen dan Tag

Elemen pada HTML dapat didefinisikan sebagai suatu

kode tertentu yang akan menyediakan tempat untuk
meletakkan beberapa kode di dalamnya.Berbeda dengan
Tag yang menangani satu kode saja.Untuk lebih jelasnya
perhatikan skema elemen di bawah ini.

<HTML>

.......elemen Pembuka..........

<HEAD>
 .......di sini dapat anda masukkan kode-kode untuk untuk
menuliskan keterangan tentang dokumen anda........

</HEAD>

<BODY>

.....DISINI DAPAT ANDA MASUKKAN KODE-KODE UNTUK

ME-LAYOUT TAMPILAN Homepage anda..........

</BODY>

</HTML>

......ELEMEN PENUTUP.............

2) Referensi Perintah –perintah HTML

Referensi Tag-tag HTML

Tag PENJELASAN NN IE DTD
<!--...--> Memberi komentar 3.0 3.0
<!DOCTYPE> Difinisi dokumen
<a> Membuat link 3.0 3.0
<abbr> abbr 6.2
<acronym> akronim 6.2 4.0
<address> Menuliskan Alamat 4.0 4.0
<applet> Menuliskan applet 2.0 3.0
<area> Menjadi area 3.0 3.0
<b> Menebalkan huruf 3.0 3.0
<base> Link ke suatu dokumen 3.0 3.0
<basefont> Default ukuran,warna ,jenis font 3.0 3.0 TF
<bdo> bdo 6.2 5.0 STF
<big> Membesarkan teks 3.0 3.0 STF
<blockquote> Menuliskan teks khusus 3.0 3.0 STF
<body> Menyatakan isi suatu dokumen 3.0 3.0 STF
<br> Menuliskan baris baru 3.0 3.0 STF
<button> Memberikan tombol 6.2 4.0 STF
<caption> Menuliskan judul pada tabel 3.0 3.0 STF
<center> Menegahkan teks 3.0 3.0 TF
<cite> Referensi teks ke sumber yang lain 3.0 3.0 STF
<code> Menuliskan suatu teks sebagai kode program 3.0 3.0 STF
<col> Membuat kolom 3.0 STF
<colgroup> colgoup 3.0 STF
<dd> dd 3.0 3.0 STF
<del> Menghapus teks 6.2 4.0 STF
<dir> Menampilkan daftar list 3.0 3.0 TF
<div> Mensetting suatu kelompok teks menjadi perataan teks 3.0 3.0 STF
<dfn> mendefinisi 3.0 STF
<dl> Menampilkan list 3.0 3.0 STF
<dt> dt 3.0 3.0 STF
<em> em 3.0 3.0 STF
<fieldset> Menampilkan fieldset 6.2 4.0 STF
<font> Mengatur font,ukuran,warna 3.0 3.0 TF
<form> Membuat form 3.0 3.0 STF
<frame> Membuat frame 3.0 3.0 F
<frameset> Mensetting file-file sebagai frame 3.0 3.0 F
<h1> to header 3.0 3.0 STF
<h6>
<head> Membuat header 3.0 3.0 STF
<hr> Membuat suatu garis 3.0 3.0 STF
<html> Dokumen html 3.0 3.0 STF
<i> Membuat suatu teks miring 3.0 3.0 STF
<iframe> Membuat i-frame 6.0 4.0 TF
<img> Menampilkan gambar 3.0 3.0 STF
<input> Memasukkan data 3.0 3.0 STF
<ins> Memasukkan teks 6.2 4.0 STF
<isindex> isindex 3.0 3.0 TF
<kbd> Memasukkan teks pada keyboard 3.0 3.0 STF
<label> Membuat label 6.2 4.0 STF
<legend> legend 6.2 4.0 STF
<li> li 3.0 3.0 STF
<link> Membuat link 4.0 3.0 STF
<map> Link ke map 3.0 3.0 STF

Color Name Color HEX Color

AliceBlue #F0F8FF
AntiqueWhite #FAEBD7
Aqua #00FFFF
Aquamarine #7FFFD4
Azure #F0FFFF
Beige #F5F5DC
Bisque #FFE4C4
Black #000000
BlanchedAlmond #FFEBCD
Blue #0000FF
BlueViolet #8A2BE2
Brown #A52A2A
BurlyWood #DEB887
CadetBlue #5F9EA0
Chartreuse #7FFF00
Chocolate #D2691E
Coral #FF7F50
CornflowerBlue #6495ED
Cornsilk #FFF8DC
Crimson #DC143C
Cyan #00FFFF
DarkBlue #00008B
DarkCyan #008B8B
DarkGoldenRod #B8860B
DarkGray #A9A9A9
DarkGrey #A9A9A9
DarkGreen #006400
DarkKhaki #BDB76B
DarkMagenta #8B008B
DarkOliveGreen #556B2F
Darkorange #FF8C00
DarkOrchid #9932CC
DarkRed #8B0000
DarkSalmon #E9967A
DarkSeaGreen #8FBC8F
DarkSlateBlue #483D8B
DarkSlateGray #2F4F4F
DarkSlateGrey #2F4F4F
DarkTurquoise #00CED1
DarkViolet #9400D3
DeepPink #FF1493
DeepSkyBlue #00BFFF
DimGray #696969
DimGrey #696969
DodgerBlue #1E90FF
FireBrick #B22222
FloralWhite #FFFAF0
ForestGreen #228B22
Fuchsia #FF00FF
Gainsboro #DCDCDC
GhostWhite #F8F8FF
Gold #FFD700
GoldenRod #DAA520
Gray #808080
Grey #808080
Green #008000
GreenYellow #ADFF2F
HoneyDew #F0FFF0
HotPink #FF69B4
IndianRed #CD5C5C
Indigo #4B0082
Ivory #FFFFF0
Khaki #F0E68C
Lavender #E6E6FA
LavenderBlush #FFF0F5
LawnGreen #7CFC00
LemonChiffon #FFFACD
LightBlue #ADD8E6
LightCoral #F08080
LightCyan #E0FFFF
LightGoldenRodYello
#FAFAD2
w
LightGray #D3D3D3
LightGrey #D3D3D3
LightGreen #90EE90
LightPink #FFB6C1
LightSalmon #FFA07A
LightSeaGreen #20B2AA
LightSkyBlue #87CEFA
LightSlateGray #778899
LightSlateGrey #778899
LightSteelBlue #B0C4DE
LightYellow #FFFFE0
Lime #00FF00
LimeGreen #32CD32
Linen #FAF0E6
Magenta #FF00FF
Maroon #800000
MediumAquaMarine #66CDAA
MediumBlue #0000CD
MediumOrchid #BA55D3
MediumPurple #9370D8
MediumSeaGreen #3CB371
MediumSlateBlue #7B68EE
MediumSpringGreen #00FA9A
MediumTurquoise #48D1CC
MediumVioletRed #C71585
MidnightBlue #191970
MintCream #F5FFFA
MistyRose #FFE4E1
Moccasin #FFE4B5
NavajoWhite #FFDEAD
Navy #000080
OldLace #FDF5E6
Olive #808000
OliveDrab #6B8E23
Orange #FFA500
OrangeRed #FF4500
Orchid #DA70D6
PaleGoldenRod #EEE8AA
PaleGreen #98FB98
PaleTurquoise #AFEEEE
PaleVioletRed #D87093
PapayaWhip #FFEFD5
PeachPuff #FFDAB9
Peru #CD853F
Pink #FFC0CB
Plum #DDA0DD
PowderBlue #B0E0E6
Purple #800080
Red #FF0000
RosyBrown #BC8F8F
RoyalBlue #4169E1
SaddleBrown #8B4513
Salmon #FA8072
SandyBrown #F4A460
SeaGreen #2E8B57
SeaShell #FFF5EE
Sienna #A0522D
Silver #C0C0C0
SkyBlue #87CEEB
SlateBlue #6A5ACD
SlateGray #708090
SlateGrey #708090
Snow #FFFAFA
SpringGreen #00FF7F
SteelBlue #4682B4
Tan #D2B48C
Teal #008080
Thistle #D8BFD8
Tomato #FF6347
Turquoise #40E0D0
Violet #EE82EE
Wheat #F5DEB3
White #FFFFFF
WhiteSmoke #F5F5F5
Yellow #FFFF00
YellowGreen #9ACD32