MATERI HTML
PENGERTIAN
HTML
Sebelum
kita melangkah lebih jauh ada baiknya Anda tahu apa itu HTML. HTML atau
Hypertext Markup Language merupakan protokol yang digunakan untuk mentransfer
data atau document dari web server ke browser kita (Internet Explorer, Netscape
Navigator, NeoPlanet, dll). Nah, HTML inilah yang memungkinkan Anda menjelajah
internet dan melihat halaman web yang menarik.
Sekarang ini
di pasaran terdapat banyak sekali HTML authoring (software yang digunakan untuk
membuat atau mendesain halaman web). Macromedia Dreamweaver, Adobe GoLive, MS
FrontPage sekedar contohnya. Tetapi tanpa mengetahui dasar-dasarnya Anda tidak
akan memperoleh hasil yang maksimal. Mengapa ? Karena walaupun
software-software tersebut semakin menawarkan kemudahan dalam membuat halaman
web, tetapi biasanya seseorang masih perlu untuk mengedit halaman web tersebut
secara manual. Terutama untuk halaman web yang sangat komplek.
Dalam
tutorial ini Anda akan kami ajak untuk mengetahui dasar-dasar dari desain web.
Yang dibutuhkan hanya sebuah word processor. Anda bisa menggunakan Notepad,
WordPad, MS Word atau yang lainnya. Tapi yang paling mudah adalah menggunakan
Notepad.
HTML
sekarang sudah mencapai versi 4.0 (saat artikel ini ditulis). Sebelum
digunakan, HTML harus diuji secara ketat oleh suatu badan yang bernama World
Wide Web Concortium (W3C). Setiap penambahan/peningkatan versi, terdapat
beberapa tambahan-tambahan tag dan fasilitas yang tidak dimiliki oleh
versi sebelumnya. Tentunya versi yang telah dikeluarkan ini harus menjadi
standar bagi browser. Bilamana browser ini tidak mendukung versi
tertentu, maka browser tersebut tidak dapat menampilkan format HTML yang
kita buat. Oleh karena itu, untuk melihat halaman web yang diformat dengan HTML
versi baru, harus memiliki browser yang sudah mendukung versi HTML
tersebut
Seperti yang
kita tahu bahwa, setiap bahasa dan program mempunyai kelebihan dan Kekurangan.
Ada baiknya kita mengetahui kelebihan dan kekurangan dari HTML sehingga kita
bisa memaksimalkan pengetahuan dan wawasan kita dalam mengeksplorasi dunia
browser.
Kelebihan-kelebihan
HTML antara lain:
Merupakan
bahasa penkodean yang lintas platform (cross platform), maksudnya HTML dapat
digunakan pada berbagai jenis mesin komputer yang berbeda dan berbagai macam
sistem operasi yang berbeda. Jadi bersifat fleksibel karena ditulis cukup
dengan menggunakan editor karakter ASCII.
Dapat
disisipi gambar baik gambar statis atau dinamis (animasi) termasuk menggunakan
gambar untuk dijadikan hyperlink. Gambar di sini digunakan untuk merujuk pada
suatu halaman web, dimana setiap titik-titik yang sudah didefinisikan berupa
rectangular (kotak), poligon (kurva tak beraturan) atau lingkaran digunakan
untuk 'jump' ke halaman lain, atau link ke halaman di luar web yang
bersangkutan.
Dapat
disisipi animasi berupa Java Applet atau file-file animasi dari Macromedia
Flash atau Macromedia Shockwave (untuk keperluan ini, browser harus memiliki
plug-in khusus untuk menjalankan file-file animasi ini).
Dapat
disisipi bahasa pemrograman untuk mempercantik halaman web seperti Javascript,
VBScript, Active Server Pages, Perl, Tcl, PHP dan sebagainya.
Bukan
merupakan bahasa pemrograman jadi tidak memerlukan kompiler. Cara
menjalanakannya cukup dengan menggunakan browser.
Adapun kekurangan
dari HTML ini adalah:
Menghasilkan
halaman yang statis, untuk memperoleh halaman yang dinamis harus menggunakan
bahasa pemrograman tertentu seperti Javascript atau VBScript dan animasi
seperti Flash atau Shockwave.
Memiliki
tag-tag yang begitu banyak sehingga susah dipelajari untuk yang masih awam.
Tidak
dapat menghasilkan halaman yang interaktif. Interaktif di sini maksudnya client
dapat berinteraksi dengan server. Untuk keperluan itu, HTML harus disisipi
bahasa pemrograman yang dapat menangani hal tersebut, contohnya Perl atau Tcl.
STRUKTUR DASAR HTML
HTML
(Hypert Text Markup Language) merupakan bahasa pemrograman yang digunakan dalam
pembuatan halaman web. Dalam penggunaannya sebagian besar kode HTML tersebut
harus terletak di antara tag kontainer. Yaitu diawali dengan <namatag>
dan diakhiri dengan </namatag> (terdapat tanda "/").
Sebuah
halaman web minimal mempunyai empat buat tag, yaitu :
<HTML>
Sebagai tanda awal dokumen HTML.
<HEAD>
Sebagai informasi page header. Di dalam tag ini kita bisa meletakkan tag-tag
TITLE, BASE, ISINDEX, LINK, SCRIPT, STYLE & META. <TITLE> Sebagai titel atau judul halaman. Kalimat yang terletak di dalam tag ini akan muncul pada bagian paling atas browser Anda (pada title bar).
Contoh :
<TITLE>Tips
HTML -- www.klik-kanan.com</TITLE>
<BODY> Di dalam tag ini bisa diletakkan berbagai page attribute seperti warna latar belakang, warna teks, warna link, warna visited link, warna active link dan lain-lain.
<BODY> Di dalam tag ini bisa diletakkan berbagai page attribute seperti warna latar belakang, warna teks, warna link, warna visited link, warna active link dan lain-lain.
Atribut :
BGCOLOR,
BACKGROUND, TEXT, LINK, VLINK, ALINK, LEFTMARGIN & TOPMARGIN.
Contoh :
<BODY
bgcolor="#000000" background="images/pcb.gif"
text="#FFFFFF" link="#FF0000" vlink="FFFF00"
alink="#0000FF">
Sebuah
contoh sederhana dokumen HTML :
<HTML>
<HEAD>
<TITLE>Halaman pembuka
</TITLE>
</HEAD>
<HEAD>
<TITLE>Halaman pembuka
</TITLE>
</HEAD>
<BODY
bgcolor="#FFFFFF" background="images/gambar1.gif"
text="#FF0000">
Letakkan
text, images, dan link Anda di sini
</BODY>
</HTML>
</BODY>
</HTML>
PENGATURAN TEKS
Untuk
mendapatkan halaman web yang baik Anda harus melakukan pengaturan terhadap teks
seperti memilih jenis dan ukuran huruf, perataan, dll. Tag-tag di bawah ini
yang biasa digunakan dalam pengaturan teks :
Contoh :
<H2>Tutorial
Html</H2>
Paragraph
Baru: <P> Digunakan untuk pindah
alinea atau paragraf. Tag ini bisa diberi akhiran </P> tapi juga bisa
tidak diberi.
Line Break:
<BR> Digunakan untuk pindah ke baris baru.
No Line
Break: <NOBR> Bila digunakan tag
ini maka teks yang panjang tidak secara otomatis pindah baris bawahnya bila
baris pertama sudah terlalu panjang.
Font
<FONT> Untuk mendefinisikan
berbagai attribut FONT, yaitu : SIZE, FACE, COLOR.
SIZE:
Ukuran font yang digunakan, berkisar antara 1 - 7 dengan 1 merupakan ukuran
terkecil dan 7 merupakan ukuran terbesar.
FACE:
Jenis atau nama font. Anda bisa memilih maksimal 3 jenis font yang
masing-masing dipisahkan oleh koma. Bila terdapat spasi yang terletak pada nama
font maka harus digunakan tanda garis bawah ( _ ). Dalam memilih jenis font ini
harus dipertimbangkan apakah font yang kita gunakan pada halaman web kita
nantinya akan terdapat pada komputer pengguna yang lain (pengakses web kita).
Pendeknya kita tidak usah menggunakan font-font yang bentuknya aneh-aneh,
gunakan saja font standar. Tapi bila Anda ingin menggunakan font yang sedikit
"aneh" Anda bisa menggunakan graphic.
COLOR:
Warna font, didefinisikan dengan menggunakan nilai RGB/HEX atau bisa juga
langsung menggunakan nama warna (red misalnya).
Contoh :
<FONT
SIZE=4 FACE="Verdana, Arial, Helvetica"
COLOR="#FF0000">Contoh teks yang berwarna merah</FONT>
Contoh
lainnya :
<FONT
SIZE=2 FACE="Times_New_Roman" COLOR="#0066CC">
Base Font:
<BASEFONT> Digunakan untuk
mendefinisikan "default text". Attribut sama dengan attribut FONT.
Tag FONT akan mengoverwrite setting pada BASEFONT.
Contoh :
<BASEFONT
SIZE=2 FACE="Arial,Helvetica" COLOR="#FF0000">
Selain tag
dan atribut di atas, masih terdapat lagi tag-tag yang berhubungan dengan
pengaturan teks, yaitu :
Perhatian :
Semua tag di bawah ini membutuhkan tap penutup.
<B>
Bold text
<I> Italic text
<U> Underscore
<TT> Typewriter
<S> Strikeout - draws a line through the text
<PRE> Preformatted Text <DFN> Definition
<BLINK> Text berkedip (lebih baik jangan digunakan)
<STRONG> Strong
<ADDRESS>
<I> Italic text
<U> Underscore
<TT> Typewriter
<S> Strikeout - draws a line through the text
<PRE> Preformatted Text <DFN> Definition
<BLINK> Text berkedip (lebih baik jangan digunakan)
<STRONG> Strong
<ADDRESS>
<CITE>
Digunakan untuk quoting text
<CODE> Monospaced font (digunakan bila Anda ingin meletakkan (memperlihatkan) kode HTML pada dokumen HTML Anda)
<SAMP> Monospaced font (digunakan bila Anda ingin meletakkan (memperlihatkan) kode HTML pada dokumen HTML Anda)
<KBD> Monospaced font (digunakan bila Anda ingin meletakkan (memperlihatkan) kode HTML pada dokumen HTML Anda)
<BIG> Ukuran teks akan lebih besar satu ukuran
<SMALL> Ukuran teks akan lebih kecil satu ukuran
<SUP> Membuat tekssuperscript
<SUB> membuat tekssub script
<ABBREV> Abbreviations
<ACRONYM> Untuk akronim
<PERSON> Digunakan untuk indexing
<Q> Membuat short inline quotation
<VAR> Membuat variable name, selalu dalam italic
<CODE> Monospaced font (digunakan bila Anda ingin meletakkan (memperlihatkan) kode HTML pada dokumen HTML Anda)
<SAMP> Monospaced font (digunakan bila Anda ingin meletakkan (memperlihatkan) kode HTML pada dokumen HTML Anda)
<KBD> Monospaced font (digunakan bila Anda ingin meletakkan (memperlihatkan) kode HTML pada dokumen HTML Anda)
<BIG> Ukuran teks akan lebih besar satu ukuran
<SMALL> Ukuran teks akan lebih kecil satu ukuran
<SUP> Membuat tekssuperscript
<SUB> membuat tekssub script
<ABBREV> Abbreviations
<ACRONYM> Untuk akronim
<PERSON> Digunakan untuk indexing
<Q> Membuat short inline quotation
<VAR> Membuat variable name, selalu dalam italic
LISTS
Terdapat
tiga tipe list yang dapat digunakan, yaitu :
Unordered
Lists: <UL> Untuk membuat daftar item
dengan tanda bullet. List entries didefinisikan dengan tag <LI>.
Contoh :
<UL>
<LI> Item nomer 1
<LI> Item nomer 2
<LI> Item nomer 3
</UL>
<UL>
<LI> Item nomer 1
<LI> Item nomer 2
<LI> Item nomer 3
</UL>
Dengan
atribut TYPE Anda dapat mendefinisikan bentuk disc, circle atau square
bullet point.
Contoh
: <UL COMPACT TYPE=square> …
Ordered
Lists: <OL> Juga digunakan untuk membuat
daftar item, dengan tiap item dapat menggunakan angka arab atau romawi. List
entries juga didefinisikan dengan <LI> tag.
Contoh
: <OL TYPE=I>
<LI> Item nomer 1
<LI> Item nomer 2
<LI> Item nomer 3
</OL>
Untuk TYPE
Anda dapat juga menggunakan :
1- Default numbers, 1, 2, 3, etc.
A- Huruf besar. A, B, C, etc.
a- Huruf kecil. a, b, c, etc.
I- Romawi huruf besar. I, II, III, etc.
i- Romawi huruf kecil , i, ii, iii, etc.
1- Default numbers, 1, 2, 3, etc.
A- Huruf besar. A, B, C, etc.
a- Huruf kecil. a, b, c, etc.
I- Romawi huruf besar. I, II, III, etc.
i- Romawi huruf kecil , i, ii, iii, etc.
Definition
Lists: <DL>
Contoh
:
DL>
<DT> Item pertama.
<DD> Penjelasan tentang item pertama.
<DT> Item kedua.
<DD> Penjelasan tentang item kedua
</DL>
<DT> Item pertama.
<DD> Penjelasan tentang item pertama.
<DT> Item kedua.
<DD> Penjelasan tentang item kedua
</DL>
IMAGES
Images :
Digunakan
untuk menampilkan image atau animasi gif pada halaman web Anda.
Atribut :
alt, align=(center, left, right), hspave, vspace, border, width & height
Contoh
: <IMG SRC="logo.gif" alt="Ini adalah logo halaman
pembuka" width=200 height=100>
<IMG SRC="logo.gif" hspace=10 vspace=5 align=right border=2>
Links :
Digunakan untuk membuat link ke halaman lain. Tulisan yang terletak antara <A> dan </A> akan terdapat garis bawah.
Digunakan untuk membuat link ke halaman lain. Tulisan yang terletak antara <A> dan </A> akan terdapat garis bawah.
Contoh
:
<A HREF="halaman2.html">Klik di sini</A> Untuk membuat
link ke halaman lain.
<A HREF="mailto:webmaster@klik-kanan.com">Klik di
sini</A> Untuk membuat link pada alamat e-mail.
<A HREF="#aplikasi">Klik di sini</A> Untuk membuat link
ke bagian lain pada halaman yang sama.
<A HREF="halamanlain.html#aplikasi">Klik di sini</A>
Untuk membuat link kebagian lain pada halaman yang berbeda.
<A HREF="halaman2.html"><IMG
SRC="gambar.gif"></A> Untuk membuat link dengan menggunakan
gambar.
TABEL
Tabel
sangat penting artinya dalam desain web. Karena dengan menggunakan tag table
Anda dapat membuat halaman web "terbagi" pada beberapa kolom atau
baris. Contohnya seperti pada halaman web yang sedang Anda baca ini.
Terdapat
tiga tag atau elemen utama yang digunakan dalam pembuatan table :
<TABLE>, <TR>, dan <TD>. Yang perlu diingat adalah bahwa tab
<TR> dan <TD> harus terletak di antara tag <TABLE> dan
</TABLE>
<TABLE>
Terdiri dari atribut :
Terdiri dari atribut :
- align - perataan : rata kiri (left), tengah (center) atau kanan (right).
- bgcolor - warna latar belakang (background) dari tabel.
- border - ukuran lebar border tabel (dalam pixel).
- cellpadding - jarak antara isi cell dengan batas cell (dalam pixel).
- cellspacing - jarak antar cell (dalam pixel).
- width - ukuran tabel dalam pixel atau percent.
Contoh
: <TABLE align="center" bgcolor="#0000FF"
border="2" cellpadding="5" cellspacing="2"
width="90%">
<TR>
Tag ini digunakan untuk membuat baris baru (pada tabel). Terdiri dari atribut:
Tag ini digunakan untuk membuat baris baru (pada tabel). Terdiri dari atribut:
- align - perataan : rata kiri (left), tengah (center) atau kanan (right).
- bgcolor - warna latar belakang dari baris.
- valign - perataan vertikal : top, middle atau bottom.
Tag ini digunakan untuk membuat kolom baru pada tabel.
- align - perataan
- background - image yang digunakan sebagai latar belakang dari kolom.
- bgcolor - warna latar belakang
- colspan - lihat gambar contoh
- height - ukuran tinggi cell dalam pixels.
- nowrap - membuat supaya isi dari kolom tetap berada pada satu baris.
- rowspan - lihat gambar contoh
- valign - perataan vertikal :top, middle atau bottom.
- width - ukuran kolom dalam pixel atau percen.
KUMPULAN TAG HTML
<!--
-->
|
Memberi
komentar atau keterangan. Kalimat yang terletak pada tag kontiner ini tidak
akan terlihat pada browser
|
<a
href>
|
Membuat
link ke halaman lain atau ke bagian lain dari halaman tersebut
|
<a
name>
|
Membuat
nama bagian yang didefinisikan pada link pada halaman yang sama
|
<applet>
|
Sebagai
awal dari Java applets
|
<area>
|
Mendefinisikan
daerah yang dapat diklik (link) pada image map
|
<b>
|
Membuat
teks tebal
|
<basefont>
|
Membuat
atribut teks default seperti jenis, ukuran dan warna font
|
<bgsound>
|
Memberi
(suara latar) background sound pada halaman web
|
<big>
|
Memperbesar
ukuran teks sebesar satu point dari defaultnya
|
<blink>
|
Membuat
teks berkedip
|
<body>
|
Tag awal
untuk melakukan berbagai pengaturan terhadap text, warna link & visited
link
|
<br>
|
Pindah
baris
|
<caption>
|
Membuat
caption pada tabel
|
<center>
|
Untuk
perataan tengah terhadap teks atau gambar
|
<comment>
|
Meletakkan
komentar pada halaman web tidak tidak akan nampak pada browser
|
<dd>
|
Indents
teks
|
<div>
|
Represents
different sections of text.
|
<embed>
|
Menambahkan
sound or file avi ke halaman web
|
<fn>
|
Seperti
tag <a name>
|
<font>
|
Mengganti
jenis, ukuran, warna huruf yang akan digunakan utk teks
|
<form>
|
Mendefinisikan
input form
|
<frame>
|
Mendefinisikan
frame
|
<frameset>
|
Mendefinisikan
attribut halaman yang akan menggunakan frame
|
<h1>
... <h6>
|
Ukuran
font
|
<head>
|
Mendefinisikan
head document.
|
<hr>
|
Membuat
garis horizontal
|
<html>
|
Bararti
dokumen html
|
<i>
|
Membuat
teks miring
|
<img>
|
Image,
imagemap atau an animation
|
<input>
|
Mendefinisikan
input field pada form
|
<li>
|
Membuat
bullet point atau baris baru pada list (berpasangan dengan tag <dir>,
<menu>, <ol> and <ul> )
|
<map>
|
Mendefinisikan
client-side map
|
<marquee>
|
Membuat
scrolling teks (teks berjalan) - hanya pada MS IE
|
<nobr>
|
Mencegah
ganti baris pada teks atau images
|
<noframes>
|
Jika
browser user tidak mendukung frame
|
<ol>
|
Mendefinisikan
awal dan akhir list
|
<p>
|
Ganti paragraph
|
<pre>
|
Membuat
teks dengan ukuran huruf yg sama
|
<script>
|
Mendefinisikan
awal script
|
<table>
|
Membuat
tabel
|
<td>
|
Kolom pada
table
|
<title>
|
Mendefinisikan
title
|
<tr>
|
Baris pada
table
|
<u>
|
Membuat
teks bergaris bawah
|
Tidak ada komentar:
Posting Komentar