Tutorial Belajar Dasar-dasar HTML: Hypertext Markup Language

Written by klikkanan.com
riday! "# $ugust %""& "':()
Hyper Text Markup Language *HTML+ merupakan protokol yang digunakan untuk
mentrans,er data atau document dari -eb ser.er ke bro-ser kita */nternet 0xplorer!
1etscape 1a.igator! 1eo2lanet! dll+. 1a3! HTML inila3 yang memungkinkan $nda
menjelaja3 internet dan meli3at 3alaman -eb yang menarik.
4ekarang ini di pasaran terdapat banyak sekali HTML aut3oring *so,t-are yang
digunakan untuk membuat atau mendesain 3alaman -eb+. Macromedia Dream-ea.er!
$dobe 5oLi.e! M4 ront2age sekedar conto3nya. Tetapi tanpa mengeta3ui dasar-
dasarnya $nda tidak akan memperole3 3asil yang maksimal. Mengapa 6 7arena
-alaupun so,t-are-so,t-are tersebut semakin mena-arkan kemuda3an dalam membuat
3alaman -eb! tetapi biasanya seseorang masi3 perlu untuk mengedit 3alaman -eb
tersebut secara manual. Terutama untuk 3alaman -eb yang sangat komplek.
4ekarang ini di pasaran terdapat banyak sekali HTML aut3oring *so,t-are yang
digunakan untuk membuat atau mendesain 3alaman -eb+. Macromedia Dream-ea.er!
$dobe 5oLi.e! M4 ront2age sekedar conto3nya. Tetapi tanpa mengeta3ui dasar-
dasarnya $nda tidak akan memperole3 3asil yang maksimal. Mengapa 6 7arena
-alaupun so,t-are-so,t-are tersebut semakin mena-arkan kemuda3an dalam membuat
3alaman -eb! tetapi biasanya seseorang masi3 perlu untuk mengedit 3alaman -eb
tersebut secara manual. Terutama untuk 3alaman -eb yang sangat komplek.
Dalam tutorial ini $nda akan kami ajak untuk mengeta3ui dasar-dasar dari desain -eb.
8ang dibutu3kan 3anya sebua3 -ord processor. $nda bisa menggunakan 1otepad!
Word2ad! M4 Word atau yang lainnya. Tapi yang paling muda3 adala3 menggunakan
1otepad.
4truktur dasar HTML
HTML *Hypert Text Markup Language+ merupakan ba3asa pemrograman yang
digunakan dalam pembuatan 3alaman -eb. Dalam penggunaannya sebagian besar kode
HTML tersebut 3arus terletak di antara tag kontainer. 8aitu dia-ali dengan 9namatag:
dan diak3iri dengan 9;namatag: *terdapat tanda <;<+. 4ebua3 3alaman -eb minimal
mempunyai empat buat tag! yaitu : 9HTML: 4ebagai tanda a-al dokumen HTML.
9H0$D: 4ebagai in,ormasi page 3eader. Di dalam tag ini kita bisa meletakkan tag-tag
T/TL0! B$40! /4/1D0=! L/17! 4>?/2T! 4T8L0 @ M0T$. 9T/TL0: 4ebagai titel
atau judul 3alaman. 7alimat yang terletak di dalam tag ini akan muncul pada bagian
paling atas bro-ser $nda *pada title bar+.
>onto3 :
9T/TL0:Tips HTML -- ---.klik-kanan.com9;T/TL0:
9BAD8: Di dalam tag ini bisa diletakkan berbagai page attribute seperti -arna latar
belakang! -arna teks! -arna link! -arna .isited link! -arna acti.e link dan lain-lain.
$tribut :
B5>ALA?! B$>75?AB1D! T0=T! L/17! CL/17! $L/17! L0TM$?5/1 @
TA2M$?5/1.
>onto3 :
9BAD8 bgcolorD<E""""""< backgroundD<images;pcb.gi,< textD<E<
linkD<E""""< .linkD<""< alinkD<E""""<:
4ebua3 conto3 seder3ana dokumen HTML :
9HTML:
9H0$D:
9T/TL0:Halaman pembuka
9;T/TL0:
9;H0$D:
9BAD8 bgcolorD<E< backgroundD<images;gambarF.gi,< textD<E""""<:
Letakkan text! images! dan link $nda di sini
9;BAD8:
9;HTML:
2engaturan Teks
Bntuk mendapatkan 3alaman -eb yang baik $nda 3arus melakukan pengaturan ter3adap
teks seperti memili3 jenis dan ukuran 3uru,! perataan! dll. Tag-tag di ba-a3 ini yang
biasa digunakan dalam pengaturan teks :Headers: 9Hn:..9;Hn: Digunakan untuk
mengatur ukuran 3uru, pada 3eader. <n< mempunyai nilai antara F - ' atau antara 9HF:
sampai 9H':! dengan 9HF: merupakan ukuran terbesar dan 9H': merupakan ukuran
terkecil.
>onto3 :
9H%:Tutorial Html9;H%:
Hasilnya akan terli3at seperti :
Tutorial Html
2aragrap3 Baru: 92: Digunakan untuk pinda3 alinea atau paragra,. Tag ini bisa diberi
ak3iran 9;2: tapi juga bisa tidak diberi.
Line Break: 9B?: Digunakan untuk pinda3 ke baris baru.
1o Line Break: 91AB?: Bila digunakan tag ini maka teks yang panjang tidak secara
otomatis pinda3 baris ba-a3nya bila baris pertama suda3 terlalu panjang.
ont 9A1T: Bntuk mende,inisikan berbagai attribut A1T! yaitu : 4/G0! $>0!
>ALA?.
4/G0: Bkuran ,ont yang digunakan! berkisar antara F - & dengan F merupakan ukuran
terkecil dan & merupakan ukuran terbesar.
$>0: Henis atau nama ,ont. $nda bisa memili3 maksimal # jenis ,ont yang masing-
masing dipisa3kan ole3 koma. Bila terdapat spasi yang terletak pada nama ,ont maka
3arus digunakan tanda garis ba-a3 * I +.
Dalam memili3 jenis ,ont ini 3arus dipertimbangkan apaka3 ,ont yang kita gunakan pada
3alaman -eb kita nantinya akan terdapat pada komputer pengguna yang lain *pengakses
-eb kita+. 2endeknya kita tidak usa3 menggunakan ,ont-,ont yang bentuknya ane3-ane3!
gunakan saja ,ont standar. Tapi bila $nda ingin menggunakan ,ont yang sedikit <ane3<
$nda bisa menggunakan grap3ic. >ALA?: Warna ,ont! dide,inisikan dengan
menggunakan nilai ?5B;H0= atau bisa juga langsung menggunakan nama -arna *red
misalnya+. >onto3 : 9A1T 4/G0DJ $>0D<Cerdana! $rial! Hel.etica<
>ALA?D<E""""<:>onto3 teks yang ber-arna mera39;A1T:
Hasilnya akan terli3at seperti :
>onto3 teks yang ber-arna mera3
>onto3 lainnya :
9A1T 4/G0D% $>0D<TimesI1e-I?oman< >ALA?D<E""''>><:
Base ont: 9B$40A1T: Digunakan untuk mende,inisikan <de,ault text<. $ttribut sama
dengan attribut A1T. Tag A1T akan mengo.er-rite setting pada B$40A1T.
>onto3 :
9B$40A1T 4/G0D% $>0D<$rial!Hel.etica< >ALA?D<E""""<:
4elain tag dan atribut di atas! masi3 terdapat lagi tag-tag yang ber3ubungan dengan
pengaturan teks! yaitu :
2er3atian : 4emua tag di ba-a3 ini membutu3kan tap penutup.
9B: Bold text
9/: /talic text
9B: Bnderscore
9TT: Type-riter
94: 4trikeout - dra-s a line t3roug3 t3e text
92?0: 2re,ormatted Text 9D1: De,inition
9BL/17: Text berkedip *lebi3 baik jangan digunakan+
94T?A15: 4trong
9$DD?044:
/talic
9>/T0: Digunakan untuk Kuoting text
9>AD0: Monospaced ,ont *digunakan bila $nda ingin meletakkan *memperli3atkan+
kode HTML pada dokumen HTML $nda+
94$M2: Monospaced ,ont *digunakan bila $nda ingin meletakkan *memperli3atkan+
kode HTML pada dokumen HTML $nda+
97BD: Monospaced ,ont *digunakan bila $nda ingin meletakkan *memperli3atkan+
kode HTML pada dokumen HTML $nda+
9B/5: Bkuran teks akan lebi3 besar satu ukuran
94M$LL: Bkuran teks akan lebi3 kecil satu ukuran
94B2: Membuat tekssuperscript
94BB: membuat tekssub script
9$BB?0C: $bbre.iations
9$>?A18M: Bntuk akronim
920?4A1: Digunakan untuk indexing
9L: Membuat s3ort inline Kuotation
9C$?: Membuat .ariable name! selalu dalam italics.
Lists
Terdapat tiga tipe list yang dapat digunakan! yaitu :
Bnordered Lists: 9BL: Bntuk membuat da,tar item dengan tanda bullet. List entries
dide,inisikan dengan tag 9L/:.
>onto3 :
9BL:
9L/: /tem nomer F
9L/: /tem nomer %
9L/: /tem nomer #
9;BL:
Hasil dari kode di atas adala3:
M /tem nomer F
M /tem nomer %
M /tem nomer #
Dengan atribut T820 $nda dapat mende,inisikan bentuk disc! circle atau sKuare bullet
point.
>onto3 :
9BL >AM2$>T T820DsKuare: N
Ardered Lists: 9AL: Huga digunakan untuk membuat da,tar item! dengan tiap item dapat
menggunakan angka arab atau roma-i. List entries juga dide,inisikan dengan 9L/: tag.
>onto3 :
9AL T820D/:
9L/: /tem nomer F
9L/: /tem nomer %
9L/: /tem nomer #
9;AL: Hasil dari kode di atas adala3 :
F. /tem nomer F
%. /tem nomerr %
#. /tem nomerr #
Bntuk T820 $nda dapat juga menggunakan :
F- De,ault numbers! F! %! #! etc.
$- Huru, besar. $! B! >! etc.
a- Huru, kecil. a! b! c! etc.
/- ?oma-i 3uru, besar. /! //! ///! etc.
i- ?oma-i 3uru, kecil ! i! ii! iii! etc.
De,inition Lists: 9DL:
>onto3 :
9DL:
9DT: /tem pertama.
9DD: 2enjelasan tentang item pertama.
9DT: /tem kedua.
9DD: 2enjelasan tentang item kedua
9;DL:
Hasil dari kode di atas adala3 :
/tem pertama.
2enjelasan tentang item pertama.
/tem kedua.
2enjelasan tentang item kedua
/mages
/mages :
Digunakan untuk menampilkan image atau animasi gi, pada 3alaman -eb $nda.
$tribut : alt! alignD*center! le,t! rig3t+! 3spa.e! .space! border! -idt3 @ 3eig3t
>onto3 :
9/M5 srcD<;logo.gi,< altD</ni adala3 logo 3alaman pembuka< -idt3D%"" 3eig3tDF"":
9/M5 srcD<;logo.gi,< 3spaceDF" .spaceD( alignDrig3t borderD%:
Links :
Digunakan untuk membuat link ke 3alaman lain. Tulisan yang terletak antara 9$: dan
9;$: akan terdapat garis ba-a3.
>onto3 :
9$ 3re,D<;3alaman%.3tml<:7lik di sini9;$: Bntuk membuat link ke 3alaman lain.
9$ 3re,D<mailto: -ebmasterOklik-kanan.com <:7lik di sini9;$: Bntuk membuat link
pada alamat e-mail.
9$ 3re,D<Eaplikasi<:7lik di sini9;$: Bntuk membuat link ke bagian lain pada 3alaman
yang sama.
9$ 3re,D<;3alamanlain.3tmlEaplikasi<:7lik di sini9;$: Bntuk membuat link kebagian
lain pada 3alaman yang berbeda.
9$ 3re,D<;3alaman%.3tml<:9/M5 srcD<;gambar.gi,<:9;$: Bntuk membuat link dengan
menggunakan gambar.
Tabel
Tabel sangat penting artinya dalam desain -eb. 7arena dengan menggunakan tag table
$nda dapat membuat 3alaman -eb <terbagi< pada beberapa kolom atau baris. >onto3nya
seperti pada 3alaman -eb yang sedang $nda baca ini.
Terdapat tiga tag atau elemen utama yang digunakan dalam pembuatan table : 9T$BL0:!
9T?:! dan 9TD:. 8ang perlu diingat adala3 ba3-a tab 9T?: dan 9TD: 3arus terletak di
antara tag 9T$BL0: dan 9;T$BL0:
9T$BL0:
Terdiri dari atribut :
M align - perataan : rata kiri *le,t+! tenga3 *center+ atau kanan *rig3t+.
M bgcolor - -arna latar belakang *background+ dari tabel.
M border - ukuran lebar border tabel *dalam pixel+.
M cellpadding - jarak antara isi cell dengan batas cell *dalam pixel+.
M cellspacing - jarak antar cell *dalam pixel+.
M -idt3 - ukuran tabel dalam pixel atau percent.
>onto3 :
9T$BL0 alignD<center< bgcolorD<E""""< borderD<%< cellpaddingD<(<
cellspacingD<%< -idt3D<P"Q<:
9T?:
Tag ini digunakan untuk membuat baris baru *pada tabel+. Terdiri dari atribut:
M align - perataan : rata kiri *le,t+! tenga3 *center+ atau kanan *rig3t+.
M bgcolor - -arna latar belakang dari baris.
M .align - perataan .ertikal : top! middle atau bottom.
>onto3 :
9T? alignD<rig3t< bgcolorD<E""""< .alignDtop:
9TD:
Tag ini digunakan untuk membuat kolom baru pada tabel.
M align - perataan
M background - image yang digunakan sebagai latar belakang dari kolom.
M bgcolor - -arna latar belakang
M colspan - li3at gambar conto3
M 3eig3t - ukuran tinggi cell dalam pixels.
M no-rap - membuat supaya isi dari kolom tetap berada pada satu baris.
M ro-span - li3at gambar conto3
M .align - perataan .ertikal :top! middle atau bottom.
M -idt3 - ukuran kolom dalam pixel atau percen.
>onto3 :
9TD alignD<rig3t< backgroundD<back.gi,< bgcolorD<E""""< colspanD<#<
3eig3tD<%""< no-rap ro-spanD<%< .alignD<bottom< -idt3D<#""<:

9table -idt3D<F""< borderD<F< cellspacingD<%< cellpaddingD<%<:
9tr:
9td bgcolorD<E""""<: 9;td:
9td bgcolorD<E''<: 9;td:
9td ro-spanD<%< bgcolorD<E##''<: 9;td:
9;tr:
9tr:
9td colspanD<%< bgcolorD<E##>>''<: 9;td:
9;tr:
9tr:
9td colspanD<#< bgcolorD<E>>PP<: 9;td:
9;tr:
9;table:

9table -idt3D<F""< borderD<"< cellspacingD<"< cellpaddingD<"<:
9tr:
9td bgcolorD<E""""<: 9;td:
9td bgcolorD<E''<: 9;td:
9td ro-spanD<%< bgcolorD<E##''<: 9;td:
9;tr:
9tr:
9td colspanD<%< bgcolorD<E##>>''<: 9;td:
9;tr:
9tr:
9td colspanD<#< bgcolorD<E>>PP<: 9;td:
9;tr:
9;table:
rames

F
9?$M040T colsD<M!FJ"<:
9?$M0 srcD<;3omepage.3tm< 1$M0D<rameF<:
9?$M0 srcD<;menu.3tm< 1$M0D<rame%<:
9;?$M040T:
%

9?$M040T colsD<F""!M<:
9?$M0 srcD<;3omepage.3tm< 1$M0D<rameF<:
9?$M0 srcD<;menu.3tm< 1$M0D<rame%<:
9;?$M040T:
#

9?$M040T ro-sD<F""!M<:
9?$M0 srcD<;3omepage.3tm< 1$M0D<rameF<:
9?$M0 srcD<;menu.3tm< 1$M0D<rame%<:
9;?$M040T:
J

9?$M040T ro-sD<M!'"<:
9?$M0 srcD<;3omepage.3tm< 1$M0D<rameF<:
9?$M0 srcD<;menu.3tm< 1$M0D<rame%<:
9;?$M040T:
(

9?$M040T ro-sD<M!'"<:
9?$M0 srcD<;3omepage.3tm< 1$M0D<rameF<:
9?$M040T colsD<("Q!("Q<:
9?$M0 srcD<;menu.3tm< 1$M0D<rame%<:
9?$M0 srcD<;menu%.3tm< 1$M0D<rame#<:
9;?$M040T:9;?$M040T:
'

9?$M040T colsD<M!("Q<:
9?$M0 srcD<;3omepage.3tm< 1$M0D<rameF<:
9?$M040T ro-sD<F(Q!F(Q!&"Q<:
9?$M0 srcD<;menu.3tm< 1$M0D<rame%<:
9?$M0 srcD<;menu%.3tm< 1$M0D<rame#<:
9?$M0 srcD<;menu#.3tm< 1$M0D<rameJ<:
9;?$M040T:9;?$M040T:
&

9?$M040T colsD<("Q!("Q<:
9?$M040T ro-sD<("Q!("Q<:
9?$M0 srcD<;3omepage.3tm< 1$M0D<rameF<:
9?$M0 srcD<;3omepage%.3tm< 1$M0D<rame%<:
9;?$M040T:
9?$M040T ro-sD<("Q!("Q<:
9?$M0 srcD<;menu.3tm< 1$M0D<rame#<:
9?$M0 srcD<;menu%.3tm< 1$M0D<rameJ<:
9;?$M040T:9;?$M040T:
)

9?$M040T ro-sD<F(Q!&"Q!F(Q<:
9?$M0 srcD<;3omepage.3tm< 1$M0D<rameF<:
9?$M040T colsD<F(Q!&"Q!F(Q<:
9?$M0 srcD<;menu.3tm< 1$M0D<rame%<:
9?$M0 srcD<;menu%.3tm< 1$M0D<rame#<:
9?$M0 srcD<;menu#.3tm< 1$M0D<rameJ<:
9;?$M040T:
9?$M0 srcD<;3omepage.3tm< 1$M0D<B/5<:
9;?$M040T:9;?$M040T:
7umpulan Tag HTML
9R-- --:
Memberi komentar atau keterangan. 7alimat yang terletak pada tag kontiner ini tidak
akan terli3at pada bro-ser
9a 3re,:
Membuat link ke 3alaman lain atau ke bagian lain dari 3alaman tersebut
9a name:
Membuat nama bagian yang dide,inisikan pada link pada 3alaman yang sama
9applet:
4ebagai a-al dari Ha.a applets
9area:
Mende,inisikan daera3 yang dapat diklik *link+ pada image map
9b:
Membuat teks tebal
9base,ont:
Membuat atribut teks de,ault seperti jenis! ukuran dan -arna ,ont
9bgsound:
Memberi *suara latar+ background sound pada 3alaman -eb
9big:
Memperbesar ukuran teks sebesar satu point dari de,aultnya
9blink:
Membuat teks berkedip
9body:
Tag a-al untuk melakukan berbagai pengaturan ter3adap text! -arna link @ .isited link
9br:
2inda3 baris
9caption:
Membuat caption pada tabel
9center:
Bntuk perataan tenga3 ter3adap teks atau gambar
9comment:
Meletakkan komentar pada 3alaman -eb tidak tidak akan nampak pada bro-ser
9dd:
/ndents teks
9di.:
?epresents di,,erent sections o, text.
9embed:
Menamba3kan sound or ,ile a.i ke 3alaman -eb
9,n:
4eperti tag 9a name:
9,ont:
Mengganti jenis! ukuran! -arna 3uru, yang akan digunakan utk teks
9,orm:
Mende,inisikan input ,orm
9,rame:
Mende,inisikan ,rame
9,rameset:
Mende,inisikan attribut 3alaman yang akan menggunakan ,rame
93F: ... 93':
Bkuran ,ont
93ead:
Mende,inisikan 3ead document
93r:
Membuat garis 3oriSontal
93tml:
Berarti dokumen 3tml
9i:
Membuat teks miring
9img:
/mage! imagemap atau an animation
9input:
Mende,inisikan input ,ield pada ,orm
9li:
Membuat bullet point atau baris baru pada list *berpasangan dengan tag 9dir:! 9menu:!
9ol: and 9ul: +
9map:
Mende,inisikan client-side map
9marKuee:
Membuat scrolling teks *teks berjalan+ - 3anya pada M4 /0
9nobr:
Mencega3 ganti baris pada teks atau images
9no,rames:
Hika bro-ser user tidak mendukung ,rame
9ol:
Mende,inisikan a-al dan ak3ir list
9p:
5anti paragra,
9pre:
Membuat teks dengan ukuran 3uru, yg sama
9script:
Mende,inisikan a-al script
9table:
Membuat tabel
9td:
7olom pada tabel
9title:
Mende,inisikan title
9tr:
Baris pada tabel