Pengertian HTML
HTML ( Hyper Text Markup Language ) didefiniskan sebagai sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web dan menampilkan berbagai informasi dalam sebuah browser internet. Bermula dari sebuah bahasa yang sebelumnya banyak digunakan didunia penerbitan dan percetakan yang disebut dengan SGML ( Standard generalized Markup Language ), HTML adalah sebuah standard yang digunakan secara luas untuk menampilkan halaman web. HTML saat ini merupakan standard internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C).
HTML berupa kode-kode tag yang menginstrusikan browser untuk
menghasilkan tampilan sesuai yang diinginkan. Sebuah file yang merupakan file
HTML dapat dibuka dengan menggunakan browser web seperti Mozilla firefox atau
aplikasi pembuka email ataupun dari PDA dan program lain yang memiliki
kemampuan browser.
HTML dokumen tersebut mirip dengan dokumen teks biasa, hanya
dalam dokumen ini sebuah teks biasa memuat instruksi yang ditandai dengan kode
atau lebih dikenal dengan TAG tertentu.
Sejarah HTML
Hypertext Markup Language atau yang biasa disingkat HTML pertama
kali diciptakan dan dikembangkan oleh Tim Berners-Lee pada awal tahun 1990-an
yang pada saat itu masih bekerja di CERN.
HTML diciptakan dengan tujuan sebagai cara sederhana namun efektif untuk
mengkodekan dokumen elektronik. HTML pertama kali dipopulerkan dengan menggunakan browser Mosaic.
Perkembangan HTML
·
HTML versi 1.0 adalah versi pertama sejak
lahirnya nama html tersebut. Versi ini memiliki kemampuan untuk heading,
paragraph, hypertext, bold dan italic text, wrapping serta memiliki dukungan dalam
peletakkan sebuah gambar.
·
HTML versi 2.0 ( 14 Januari 1996 ). Pada versi
ini ada beberapa tambahan kemampuan diantaranya penambahan form comment, hal ini
menyebabkan adanya sebuah interaktif dan mulai dari versi ini yang menjadikan
sebuah pionner dalam perkembangan homepage interaktif.
·
HTML versi 3.0 ( 18 Desember 1997 ). HTML versi
3.0 juga disebut-sebut HTML+ yang mempunyai kemampuan dalam beberapa fasilitas
diantaranya adalah penambahan fitur table dalam paragraph, akan tetapi versi
ini tidaj bertahan lama.
·
HTML versi 3.2 ( 14 Januari 1997 ). HTML versi
ini adalah penyempurnaan dari HTML versi 3.0. keluarnya versi ini dikarenakan
adanya beberapa kasus yang timbul pada pengembang browser yang telah melakukan
pendekatan dengan cara lain yang justru hal tersebut menjadi popular. Maka
dibakukan versi 3.2 untuk mengakomodasi praktek
yang banyak digunakan oleh pengembang browser dan diterima secara umum.
Dapat dikatakan versi 3.2 ini merupakan versi 3.2 yang dikembangkan oleh
beberapa pengembang browser seperti Netscape dan Microsoft.
·
HTML versi 4.0 ( 18 Desember 1997). Versi ini
sudah terdapat penambahan pada link, meta, image dan lain-lain sebagai
penyempurnaan versi 3.2.
·
HTML versi 4.01 ( 24 Desember 1999 ). HTML versi
4.01 menjadi rekomendasi W3C. HTML 4.01 adalah minor update-koreksi dan
perbaikan bug dari HTML 4.0.
·
XHTML versi 1.0 ( 20 Januari 2000 ). XHTML 1.0
merumuskan HTML 4.0 dalam XML.
·
HTML 5 ( 22 Januari 2008 ). HTML 5 meningkatkan
interoperabilitas dan mengurangi biaya pengembangan dengan membuat aturan yang
tepat tentang bagaiman untuk menangani semua elemen HTML, dan bagaimana
memulihakan dari kesalahan. Beberapa fitur dalam HTML 5 adalah fungsi untuk
audio embedding, video, grafik, sisi penyimpanan data klien, dan dokumen
interaktif. HTML 5 juga mengandung unsur-unsur baru seperti <nav>,
<header><footer>, dan <figure>. Yang termasuk kelompok kerja
diantaranya AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia, Opera dan
banyak lagi vendor lainnya.
Ini adalah script html.
<html>
<head>
<title> Design-web11</title>
<body text=#000000 bgcolor=##0009>
<h1 align=center>Design-web11</h1>
<hr size=5 width=50% align=center>
</hr>
</head>
</html>
Hasil
Penjelasan
- Tulisan Design-web11 berwarna hitam dikarenakan pada tag body
atribute text diberi nilai=#000000 yang berarti seluruh text akan
berwarna hitam.
- tulisan Design-web11 berukuran besar dikarenakan terdapat tag
<h1> / heading dan posisi tulisan berada ditengah dikarenakan
terdapat atribute align diberi nilai=center.
- Membuat garis horisontal menggunakan tag <hr> diberikan tebal
garis dengan nilai 5 dan panjang garis dengan nilai 50% dari ukuran
monitor ( panjang garis adalah 1/2 dari layar monitor ).
Sebelum kita mulai pada materi script HTML, ada beberapa
hal yang harus teman-teman persiapkan terlebih dahulu yakni :
1.
Text
Editor ( Software Penyunting Kode ): Software yang membantu kita dalam
penulisan script HTML. Contoh text Editor adalah : Crimson Editor, PHP Coder,
Notepad dll.
2.
Web Browser : Browser yang biasa kita gunakan. Contoh : Mozilla, Google Chrome,
Internet Explorer dll.
Setelah semua sudah siap, mari kita sama-sama mulai belajar
script HTML.
Hal pertama yang harus kita ketahui dalam scrip HTML
adalah elemen-elemen dasar dari script
HTML, yaitu :
· Tag
HTML
-
Tag HTML adalah kata kunci dikelilingi dengan sudut
kurung. Contoh <html>.
-
Tag HTML biasanya dibuat berpasangan. Contoh <html>
dan </html>.
-
Tag pertama disebut tag pembuka <html> dan Tag
akhir disebut tag penutup </html>.
·
Elemen HTML adalah isi dari tag awal dan tag akhir. Termasuk
tag HTML itu sendiri.
Bentuk umum dokumen HTML adalah
sebagai berikut :
<html>
<head>
<title>
Website Ku </title>
</head>
<body>
Ini
adalah dokumen HTML pertamaku
</body>
</html>
Jenis-jenis Tag html :
Sebelum teman-teman belajar tag html,
buatlah dahulu folder sebuah belajar tag html dimana saja. Agar memudahkan
teman-teman dalam pembelajaran materi ini. Di folder itulah nantinya
teman-teman menyimpan script-script html yang saya berikan ini. Di dalam folder
tersebut, buatlah folder gambar. Disana tempat kita menyimpan gambar-gambar
yangberhubungan dengan materi ini.
1. Memberikan Komentar atau keterangan pada script html.
·
Teori
<!--
--> adalah tag untuk Memberi
komentar atau keterangan. Kalimat yang terletak pada
tag kontiner
ini tidak akan ditampilkan pada browser.
·
Praktek
Ketikkan Script dibawah ini pada Text editor, setelah itu
simpan dengan nama komentar.html pada folder belajar tag html yang
telah kita buat.
Kemudian buka file komentar.html tersebut menggunakan browser teman-teman dan
lihat hasilnya.
<html>
<head>
<title> Design-web11 </title>
</head>
<body>
<!-- Ini
adalah script untuk menampilkan kalimat pada browser -->
Design-web11
</body>
</html>
2. Membuat link pada script html.
·
Teori
<a href> adalah
tag untuk Membuat
link ke halaman lain atau ke bagian lain dari halaman
Tersebut
·
Praktek
Ketikkan Script dibawah
ini pada Text editor, setelah itu simpan dengan nama link.html
pada folder belajar tag html yang telah kita buat. Kemudian buka file komentar.html tersebut menggunakan
browser teman-teman klik tulisan test dan lihat hasilnya. Teman-teman akan
dibawa ke halaman komentar.html yang pertama kali teman-teman buat .
<html>
<head>
<title>
Design-web11</title>
</head>
<body>
<a
href="komentar.html">test</a>
</body>
</html>
3. Mendefinisikan daerah link pada script html.
·
Teori
<area> Mendefinisikan daerah yang dapat diklik
(link) pada image map.
·
Praktek
Ketikkan Script dibawah
ini pada Text editor, setelah itu simpan dengan nama area.html
pada folder belajar tag html yang telah kita buat. Setelah itu download file gambar
menggunakan link dibawah ini, simpan file gambar didalam folder gambar. Setelah
teman-teman membuat script ini, teman-teman mengganti tulisan yang dicetak
tebal sesuai dengan letak gambar yang teman-teman tadi download. Kemudian buka file
area.html tersebut menggunakan browser teman-teman dan lihat hasilnya.
<html>
<body>
<p>Klik gambar planet yang ingin kamu perbesar</p>
<img src="planets.gif"
width="145" height="126" alt="Planets"
usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126"
alt="Sun" href="sun.gif">
<area shape="circle" coords="90,58,3"
alt="Mercury" href="mercur.gif">
<area shape="circle" coords="124,58,8"
alt="Venus" href="venus.gif">
</map>
</body>
</html>
4. Membuat teks tebal (Bold) pada script html.
·
Teori
<b> Membuat teks tebal.
·
Praktek
Ketikkan Script dibawah
ini pada Text editor, setelah itu simpan dengan nama bold.html pada folder belajar tag html yang telah kita buat. Kemudian buka file bold.html tersebut
menggunakan browser teman-teman dan lihat hasilnya.
<html>
<head>
<title>
Design-web11</title>
</head>
<body>
<b>Design-web11</b>
</body>
</html>
5. Membuat atribut teks default pada script html.
·
Teori
<basefont> Membuat atribut teks default
seperti jenis, ukuran dan warna font
·
Praktek
Ketikkan Script dibawah
ini pada Text editor, setelah itu simpan dengan nama basefont.html pada folder belajar tag html yang telah kita buat. Kemudian buka file basefont.html
tersebut menggunakan browser teman-teman dan lihat hasilnya.
<html>
<head>
<title>
Design-web11</title>
<basefont
color=”red” size=”5”>
</head>
<body>
Design-web11
</body>
</html>
6. Memperbesar ukuran teks pada script html.
·
Teori
<big> Memperbesar ukuran teks sebesar satu
point dari defaultnya
·
Praktek
Ketikkan Script dibawah
ini pada Text editor, setelah itu simpan dengan nama big.html pada folder belajar tag html yang telah kita buat. Kemudian buka file big.html
tersebut menggunakan browser teman-teman dan lihat hasilnya.
<html>
<head>
<title>
Design-web11</title>
</head>
<body>
Desing-web11
<big>Design-web11</big>
</body>
</html>
7. Pindah baris pada script html.
·
Teori
<br> Pindah baris
·
Praktek
Ketikkan Script dibawah
ini pada Text editor, setelah itu simpan dengan nama br.html pada folder belajar tag html yang telah kita buat. Kemudian buka file br.html
tersebut menggunakan browser teman-teman dan lihat hasilnya.
<html>
<head>
<title>
Design-web11</title>
</head>
<body>
Design-web11<br>Sedang
Belajar HTML
</body>
</html>
8. Membuat caption table pada script html.
·
Teori
<caption>
Membuat caption
pada tabel
·
Praktek
Ketikkan Script dibawah
ini pada Text editor, setelah itu simpan dengan nama caption.html pada folder belajar tag html yang telah kita buat. Kemudian buka file caption.html
tersebut menggunakan browser teman-teman dan lihat hasilnya.
<html>
<head>
<title>
Design-web11</title>
</head>
<body>
table
border="1">
<caption>Monthly
savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
</body>
</html>
9. Perataan tengah teks atau gambar pada script html.
·
Teori
<center> Untuk perataan tengah terhadap teks
atau gambar
·
Praktek
Ketikkan Script dibawah
ini pada Text editor, setelah itu simpan dengan nama center.html pada folder belajar tag html yang telah kita buat. Kemudian buka file center.html
tersebut menggunakan browser teman-teman dan lihat hasilnya.
<html>
<head>
<title>
Design-web11</title>
</head>
<body>
<center>Design-web11</center>
</body>
</html>
10. Membuat jarak indent pada script html.
·
Teori
<dd> Indents teks.
·
Praktek
Ketikkan Script dibawah
ini pada Text editor, setelah itu simpan dengan nama indent.html pada folder belajar tag html yang telah kita buat. Kemudian buka file center.html
tersebut menggunakan browser teman-teman dan lihat hasilnya.
<html>
<head>
<title>
Design-Web11</title>
</head>
<body>
<dl>
<dt>Coffe</dt>
<dd>Black Hot Drink</dd>
<dt>Milk</dt>
<dd>White Cold Drink</dd>
</dl>
<dt>Coffe</dt>
<dd>Black Hot Drink</dd>
<dt>Milk</dt>
<dd>White Cold Drink</dd>
</dl>
</body>
</html>
No comments:
Post a Comment