Sebuah dokumen HTML berisi
elemen-elemen kode HTML yang disebut HTML Tag. Penulisannya diapit oleh apa
yang disebut delimiter (pembatas). Delimiter adalah suatu karakter atau kumpulan
karakter yang mengawali dan mengakhiri suatu tag. Untuk HTML delimiter yang
dipakai adalah dengan karakter < dan
> . Sebuah kode program HTML selalu diawali dan diakhiri dengan
sebuah tag. Tag pada awal kode disebut opening tag, dan pada akhir kode disebut
ending tag. Ending Tag ditandai dengan karakter / diikuti dengan opening Tag.
Contoh tag :
<HTML>
-----------codingan program
</HTML>
Sebuah dokumen HTML dibagi
menjadi 2 bagian yaitu body (badan) dan head (kepala). Bagian head ditandai
dengan tag <HEAD> sedangkan bagian body ditandai dengan tag <BODY>.
Bagian head digunakan untuk menyimpan informasi mengenai dokumen tersebut ,
misalnya judul, nama penulis, komentar-komentar ,dan lain-lain. Sedangkan
bagian body digunakan untuk menuliskan isi utama dari dokumen web tersebut.
Contoh dari tag dokumen web sederhana :
<HTML>
<HEAD>
<TITLE>Latihan
Web Sederhana</TITLE>
</HEAD>
<BODY>
<H1>Latihan
Web</H1>
Selamat
datang di web pertamaku.!!!
</BODY>
</HTML>
Hasilnya akan seperti ini :
Berikut ini adalah beberapa tag
dasar yang penting dari HTML (penulisan tidak case sensitive, boleh huruf besar
atau kecil.)
1.
<HTML> … </HTML>. Menjelaskan bahwa
teks file adalah merupakan HTML format. Diletakkan pada awal dan akhir dari
setiap halaman web.
2.
<HEAD> … </HEAD> Diantaranya adalah
area dari heading halaman. Digunakan untuk script/perintah khusus yang tidak
mempunyai hubungan dengan format dari halaman.
3.
<TITLE> … </TITLE> Memberi judul
yang ditampilkan pada ujung kiri atas dari browser window.
4.
<BODY> … </BODY> Setelah tag
<HEAD> dan digunakan untuk area dimana yang dilihat adalah merupakan
tampilan dari web/ isi dari halaman. Pada tag <BODY> di dalamnya dapat
ditambahkan beberapa atribut seperti tampak di bawah ini
o bgcolor=”…” -> memberikan warna latar/ background halaman.
o text=”…” -> memberikan warna tulisan / teks.
o link=”…” -> memberikan warna pada hyperlinks (link halaman)
o vlink=”…” -> memberi warna pada hyperlink yang telah dimasuki/
diklik.
o alink=”…” -> memberi warna pada link yang aktif.
Warna yang diberikan merupakan kode hexadecimal .
contoh #000000 warna putih, #FF0000 warna merah, #00FF00 warna hijau dan
#0000FF warna biru.
5.
<B> … </B> Membuat tulisan tebal
(Bold Text )
6.
<P> … </P> Merupakan perintah
paragraph yang termasuk diantaranya pengaturan posisi tulisan, indentansi dan
jarak. Antara lain seperti berikut <P ALIGN=”left”> … </P> -> untuk pengaturan paragraph rapat kiri
(left). <P ALIGN=”center”> … </P>
-> untuk pengaturan paragraph di tengah (center) <P
ALIGN=”right”> … </P> ->
untuk pengaturan paragraph rapat kanan (right) <P NOWRAP> … </P> ->
untuk membuat penulisan paragraph tanpa pemotongan batas pinggir halaman untuk berganti baris,
dan hanya bisa berganti baris dengan tag <BR>
7.
<BR> Untuk memberikan baris baru /
pergantian baris. Diletakkan pada bagian teks yang mau berganti baris.
8.
<A>
…. </A> Membuat link antar dua halaman web. Tag <A> adalah
merupakan tag penghubung (anchor tag). Biasanya dituliskan dengan <A HREF
link file > … </A>. Tatacara penulisan letak file ini juga bergantung
dari letak filenya dimana. Untuk itu disini akan dijelaskan beberapa cara
penulisan letak relative dari link file sbb( file web referensi adalah file
dimana kita menuliskan link halaman) :
o HREF=”file.html” -> file.html terletak di
direktori yang sama dengan file web referensi.
o HREF=”dir/file.html” -> letak file.html di
dalam direktori dir dan direktori dir terletak pada direktori yang sama dengan
file web referensi
o HREF=”dir/dir2/file.html” -> letak file.html di
dalam direktori dir2 dimana direktori ini di dalam direktori dir.
o HREF=”../file.html” -> letak file.html di
direktori yang berada satu level di atas direktori posisi file web referensi
sekarang.
o HREF=”../../dir/file.html” -> letak file.html pada
dua level di atas.
Untuk beberapa tambahan pada
penulisan alamat adalah sbb:
o <A
HREF=mailto:email@yahoo.com> … <A> Penulisan seperti ini adalah untuk
memberikan link email dari seseorang/ perusahaan.
o <A
HREF=http://www.satu.com> … <A> Memberikan link ke website lainnya.
o <A
NAME=”nama”> dan <A
HREF=”#nama”> … <A> Kedua tag di atas memberikan hubungan saling
terkait, dimana jika kita meletakkan tag pertama di atas dari halaman (top) dan
tag kedua merupakan link yang diletakkan pada paling bawah halaman sendiri,
jika link diklik, maka posisi kursor langsung menuju pada letak pemberian tag
pertama. Hal ini biasa dibuat untuk membuat link ke atas dan ke bawah dari satu
halaman.
9.
<IMG SRC=”gambar.jpg” … >…</IMG>
Jika Anda ingin meletakkan gambar / file photo di web Anda, maka dapat
dilakukan dengan memberikan tag ini. Perlu diingat bahwa tag ini juga mempunyai
beberapa atribut yang dituliskan di belakang keterangan nama file seperti:
o width=”...” -> memberikan
lebar dari gambar.
o height=”…” -> tinggi dari gambar.
o border=”…” -> memberikan ketebalan dari bingkai gambar.
o alt=”…” -> memberi nama dari gambar.
o
align=”…” -> memberikan posisi dari gambar.
Pemberian link web/ dokumen
dengan gambar juga bisa dilakukan. Contohnya jika kita mempunyai file gambar :
web.gif dan kita ingin membuat link dengan file tersebut. Maka cara
penulisannya adalah dengan :
<A HREF=”link.html”>
<IMG
SRC=”web.gif”>
Komentar ini telah dihapus oleh pengarang.
BalasHapusMakasi tutornya gan..
BalasHapusBagi agan yang ingin menambah ilmu dalam pembuatan website bisa dilihat di situs berikut ini Kursus Web Design dan SEO di Denpasar