DASAR-DASAR HTML
1. Pengertian html
HTML (Hyper Text Markup Language) adalah sebuah bahasa markup yang digunakan
untuk membuat sebuah halaman web dan menampilkan berbagai informasi di dalam
sebuah browser Internet. 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 berupa kode-kode tag yang menginstruksikan browser untuk menghasilkan
tampilan sesuai dengan yang diinginkan. Sebuah file yang merupakan file HTML dapat
dibuka dengan menggunakan browser web seperti Mozilla Firefox, Microsoft Internet
Explorer,Opera, Googlr Chrome, Safari dan lain-lain.
2. Struktur html
Dokumen HTML dapat terdiri dari teks, gambar, suara ataupun video. Satu hal yang
membedakan dokumen HTML dengan dokumen lainnya adalah adanya elemen-elemen
HTML beserta tag-tagnya. Elemen dan tag ini berfungsi untuk memformat atau menandai
suatu bagian tertentu dari dokumen HTML dan juga menetukan struktur bagian tersebut
dalam dokumen HTML. Struktur dasar HTML dapat dilihat seperti gambar dibawah.
File HTML
Bagian
Header
Bagian
Body
1
3. Elemen html
Pada dasarnya elemen HTML terdiri dari 2 kategori:
1. Elemen <HEAD> berfungsi untuk memberikan informasi atau mendeklarasikan
dokumen tersebut.
2. Elemen <BODY> berfungsi untuk menentukan bagaimana isi suatu dokumen
ditampilkan pada browser.
4. Tag
Pada dokumen HTML sebuah teks bisa memuat instruksi yang ditandai dengan kode atau
lebih dikenal dengan TAG. Tag ini dinyatakan dengan sebuah tanda lebih kecil dan lebih
besar (< >). Tag biasanya merupakan sebuah pasangan yang disebut tag awal
yang berfungsi untuk membuka dan tag akhir yang berfungsi untuk menutup. Tag awal
dinyatakan dalam bentuk <nama tag> sedangkan tag akhir dinyatakan dalam bentuk
</nama tag>. Sebagai contoh jika ingin membuat teks 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 teks yang ingin
ditebalkan, dan diakhiri dengan tanda </b> untuk menonaktifkan cetak tebal tersebut.
Contoh penulisan tag yang benar :
<tag 1>
Teks untuk tag ke 1
<tag 2>
Teks untuk tag ke 2
</tag 2>
</tag 1>
5. Html entities
Dalam xHTML terdapat karakter-karakter yang ilegal bila dituliskan langsung misalnya
ketika menuliskan lebih besar “>”, maka tulisan selanjutnya akan dianggap sebagi suatu
tag. Oleh karena itu, untuk mengatasi masalah ini HTML menyediakan HTML entities.
Contoh :
akan menampilkan tulisan “ ini memakai <BR /> saja.”. Jika tulisan tersebut dituliskan secara
biasa, maka tulisan “<BR/> akan hilang. Oleh karen itu penulisannya harus menggunakan
HTML entities sebagai berikut : “ini memakai <BR/> saja”.
2
Tabel HTML Entities
Characte Entity Number Entity Name Character Entity Number Entity Name
r " " " À À À
' ' ' Á Á Á
& & & Â Â Â
< < < Ã Ã Ã
> > > Ä Ä Ä
  Å Å Å
¡ ¡ ¡ Æ Æ Æ
¢ ¢ ¢ Ç Ç Ç
£ £ £ È È È
¤ ¤ ¤ É É É
¥ ¥ ¥ Ê Ê Ê
¦ ¦ ¦ Ë Ë Ë
§ § § Ì Ì Ì
¨ ¨ ¨ Í Í Í
© © © Î Î Î
ª ª ª Ï Ï Ï
« « « Ð Ð Ð
¬ ¬ ¬ Ñ Ñ Ñ
­ ­ Ò Ò Ò
® ® ® Ó Ó Ó
¯ ¯ ¯ Ô Ô Ô
° ° ° Õ Õ Õ
± ± ± Ö Ö Ö
² ² ² Ø Ø Ø
³ ³ ³ Ù Ù Ù
´ ´ ´ Ú Ú Ú
µ µ µ Û Û Û
¶ ¶ ¶ Ü Ü Ü
· · · Ý Ý Ý
¸ ¸ ¸ Þ Þ Þ
¹ ¹ ¹ ß ß ß
º º º à à à
» » » á á á
¼ ¼ ¼ â â â
½ ½ ½ ã ã ã
¾ ¾ ¾ ä ä ä
¿ ¿ ¿ å å å
× × × æ æ æ
÷ ÷ ÷ ç ç ç
3
Character Entity Number Entity Name
è è è
é é é
ê ê ê
ë ë ë
ì ì ì
í í í
î î î
ï ï ï
ð ð ð
ñ ñ ñ
ò ò ò
ó ó ó
ô ô ô
õ õ õ
ö ö ö
ø ø ø
ù ù ù
ú ú ú
û û û
ü ü ü
ý ý ý
þ þ þ
ÿ ÿ ÿ
5
6. Membuat dokumen html
Dokumen HTML dimulai dengan perintah awal <HTML>, kemudian <HEAD> dan
<TITLE>. Antara perintah <TITLE> dengan </TITLE> merupakan bagian judul dokumen yang
akan di buat. Misalnya beri judul “Web Pertamaku”, kemudian ditutup denga perintah
<HEAD>. Ini merupakan bagian pertama dari dokumen HTML. Bagian kedua atau isi dimulai
dengan perintah <BODY> dan </BODY>. Antara kedua perintah tersebut berisi terdapat
isi dokumen HTML. Pada bagian akhir dokumen ditutup dengan perintah
</HTML>.
Contoh Program
<HTML>
<HEAD>
<TITLE>
Web Pertamaku
</TITLE>
</HEAD>
<BODY>
Selamat Datang di Web Pertamaku
</BODY>
</HTML>
Hasil Tampilan :
6
7. Menambahkan Komentar
HTML menyediakan fasilitas untuk menuliskan komentar, komentar ini berguna bila nantinya
anda atau orang lain membaca program. Penulisan komentar dalam HTML diawali dengan
tanda <!-- dan diakhiri dengan tanda -->, contoh :
<!-- ini komentar adalah komentar -->
2.3. Menambahkan Background pada Halaman WEB
Halaman HTML dapat ditambahkan Background baik berupa warna ataupun gambar.
Untuk menambahkan background dilakukan dengan menambahkan perintah pada tag
perintah <BODY> . untuk menambahkan backround warna perintahnya adalah :
<BODY BGCOLOR=”warna”>
Sedangkan untuk menambahkan background gambar perintahnya adalah
:
<BODY BACKGROUND=”nama_gambar.ext”>
Contoh Program
<HTML>
<HEAD>
<TITLE>
Web Pertamaku
</TITLE>
</HEAD>
<BODY BGCOLOR=”purple”>
Selamat Datang di Web Pertamaku
</BODY>
</HTML>
Contoh Program
<HTML>
<HEAD>
<TITLE>
Web Pertamaku
</TITLE>
</HEAD>
<BODY BACKGROUND=”[Link]”> Selamat
Datang di Web Pertamaku
</BODY>
</HTML>
7
8. Mengganti Warna Text
Untuk mengganti warna pada text di tambahkan perintah <FONT COLOR=”warna”> pada
text yang akan di ganti warnanya dan diakhiri dengan perintah </FONT>.
Contoh Program
<HTML>
<HEAD>
<TITLE>
Mengganti Warna
</TITLE>
</HEAD>
<BODY BGCOLOR=”yellow”>
<FONT COLOR=”BLUE”>Tulisan ini berwarna Biru</FONT>
<BR>
<FONT COLOR=”RED”>Tulisan ini berwarna Merah</FONT>
<BR>
<FONT COLOR=”GREEN”>Tulisan ini berwarna Hijau</FONT>
<BR>
<FONT COLOR=”WHITE”>Tulisan ini berwarna Putih</FONT>
<BR>
<FONT COLOR=”BLACK”>Tulisan ini berwarna Hitam</FONT>
</BODY>
</HTML>
8
Perhatikan perintah berikut ini
P pada perintah di atas disebut dengan tag, sedangkan align disebut dengan
atribut. Atribut merupakan perintah yang menyertai tag.
Berikut beberapa perintah HTML dan fungsinya:
Tag Atribut/Contoh penulisan Fungsi
<body> <body bgcolor=”red”> Backgorund halaman berwarna
<body bgcolor=”#FF0000”> merah
text=” ... “ Memberi warna pada teks
link=” ...” Warna link
vlink=”...” Warna link yang sudah dikunjungi
alink=”...” Warna link yang aktif
<body background=”D:\[Link]”> Memberi background gambar
pada halaman
<a> ... </a> <a href=”D:\[Link]”>Home</a> Membuat hyperlink/link
<a href="[Link]
hoo!</a>
<a href="[Link]
>here</a> to email me!
<img> <img src="[Link]" width="50" Memasukkan gambar dengan
height="50" border="0" nama file gambar [Link],
alt="Person" align="left"> lebar 50px, tinggi 50px, border
0, rata kiri, dan jika gambar
tidak muncul akan keluar teks
Person
<img src=”C:\Documents and
Settings\All Users\Documents\My
Pictures\Sample
Pictures\ S un s et . j pg >
<font>... /font> <FONT size="2" color="#FFFF00" Mengatur font dengan ukuran 2,
face="arial">...</font> warna kuning, jenis huruf Arial
<BIG>...</BIG <BIG>Contoh </BIG> Membuat teks Contoh menjadi
> lebih besar
<SMALL>...</S <SMALL> Contoh</SMALL> Membuat teks Contoh menjadi
MALL> lebih kecil
<b>...</b> Teks bold/dicetak lebih tebal
<i>…</i> Teks italic/miring
<strike>...</stri Teks tercoret
ke>
<u>...</u> Teks underlined
9
<h1>...</h1> Teks heading 1. Tingkat heading bisa
sampai tingkat 6. Semakin
besar tingkar heading, maka teks aka
dicetak semakin kecil
<hr> <hr width=”600”> Garis dengan lebar 600. Tag <hr>
tidak perlu ditutup
<hr align=”center” size=”5” Garis dengan tinggi 5, lebar 80%
width=”80%” dari lebar layar browser dan rata
tengah
<p Paragraf rata tengah. Perintah ini juga
align=”center’> dapat ditulis dengan tag
... <center>...</center>
</p>
<br> Tag untuk ganti baris Tag <br> tidak perlu ditutup
<sup>...</sup> Teks superscript
<sub>...</sub> Teks subscript
<marquee> .... Teks berjalan. Memiliki atribut
</marquee> direction, behavior dan lain-lain.
Contoh:
<marquee direction=”right”>
....</marquee>
<marquee behavior=”alternate”>
... </marquee>
9. Hyperlink
Untuk Membuat Hyperlink sederhana pada web digunakan perintah
<A HREF=”nama_file_html_yang_dituju.html”>Keterangan link</A>.
Contoh Program
Nama File : [Link]
<HTML>
<HEAD>
<TITLE>
Hyperlink
</TITLE>
</HEAD>
<BODY>
Ini Bagian pertama dari Web saya.
<BR>Silahkan membaca halaman kedua
<BR><CENTER>
<A HREF=”[Link]”>Ke Halaman 2</A>
</CENTER></BODY>
</HTML>
Nama File : [Link]
<HTML>
<HEAD>
<TITLE>
Hyperlink2
</TITLE> 10
</HEAD>
<BODY>
Ini Bagian kedua dari Web saya.
<BR><CENTER>
<A HREF=”[Link]”>kembali Ke Halaman 1</A>
</CENTER></BODY>
</HTML>
11
10. Memberikan warna pada Hyperlink
Tulisan Hyperlink dapat diberikan warna sesuai dengan keingainan dengan
menggunakan perintah LINK, ALINK dan VLINK yang disisipkan pada perintah
<BODY> sebagai
berikut : <BODY LINK=”Purple” ALINK=”yellow” VLINK=”almond”>
Contoh Program
Nama File : [Link]
<HTML>
<HEAD>
<TITLE>
Hyperli
nk
</TITL
E>
</HEAD>
<BODY LINK=”Purple” ALINK=”yellow” VLINK=”almond”> Ini
Bagian pertama dari Web saya.
<BR>Silahkan membaca halaman kedua
<BR><CENTER>
<A HREF=”[Link]”>Ke Halaman 2</A>
</CENTER></BODY>
</HTML>
12
Latihan
Buatlah homepage pribadi sederhana sesuai dengan tampilan dibawah :
Halaman awal, nama file : [Link]
Halaman Sejarah Hidup Halaman Study
Halaman Keluarga Halaman cita-cita
11. Membuat Tabel
Beberapa perintah penting untuk membuat tabel:
13
1. <table border=”1”> .... </table> merupakan perintah utama dalam
pembuatan tabel, tabel dengan ketebalan 1px
2. <tr> ... </tr> tag untuk membuat baris
3. <td> ... </td> tag untuk membuat kolom/cell
4. colspan merge/melebarkan kolom/cell
5. rowspan merge/melebarkan baris
Atribut tabel dan fungsinya
Tag Atribut/Contoh penulisan Fungsi
<table> border=”...” Ketebalan tabel.
... Contoh:
</table> <table border=”1”>
align=”...” Pengaturan tabel (rata tengah,
kanan atau kiri)
width=”...” Lebar tabel. Bisa diisi dengan
satuan pixel atau persen. Contoh:
<table width=”80%”> atau
<table width=”600”>
valign=”...” Perataan secara vertikal dari suatu
cell.
(top, middle, bottom)
bordercolor=”...” Warna border
bgcolor=”...” Warna background tabel, baris
atau cell
Agar cell dalam tabel kosong, maka dapat digunakan perintah
Contoh 1:
Tulislah perintah HTML untuk membuat tabel seperti berikut ini:
Satu Dua
Tiga Empat
Jawab:
<html>
<head>
<title> Latihan Table </title>
</head>
<body>
<table border=”1”>
<tr>
<td align=”center”>Satu</td>
<td align=”center”>Dua</td>
</tr>
<td align=”center”>Tiga</td>
<td align=”center”>Empat</td>
</table>
</body>
</html>
14
Contoh 2:
Tulislah perintah HTML untuk membuat tabel seperti berikut ini:
Satu
Dua Tiga
Jawab:
<html>
<head>
<title> Latihan Table Dua </title>
</head>
<body>
<table border=”1”>
<tr>
<td colspan=” 2” align=”center”>Satu</td>
</tr>
<tr>
<td align=”center”>Dua</td>
<td align=”center”>Tiga</td>
</tr>
<td align=”center”>Tiga</td>
</table>
</body>
</html>
15
Latihan Pertemuan 1
Tulislah perintah-perintah HTML-nya agar diperoleh bentuk tabel seperti berikut (1 tabel =
1 file):
1
.
1 2 3
4 5 6
7 8 9
2.
1 2
3 4 5
6 7
3.
1
2 3
4 5 6
4.
2
1
3
5.
1
2
3
6.
1 2
4
3 5 6
8
7
9 10