HTML (Hypertext
Markup Language)
HTML atau Hypertext
Marksup Language merupakan salah satu format yang digunakan dalam pembuatan
dokumen dan aplikasi yang berjalan dihalaman web. Sebenarnya, dokumen HTML
hanyalah sebuah dokumen teks biasa dan disebut sebagai Markup Language yakni bahasa yang mengandung tanda (tag) tertentu yang digunakan untuk
mengatur format tampilan suatu dokumen.
HTTP atau Hypertext
Transfer Protokol merupakan protokol yang digunakan untuk mentransfer data
atau document yang berformat HTML dari web server ke browser (Internet
Explorer, Netscape Navigator, NeoPlanet, dll). Dengan HTTP inilah yang memungkinkan Anda menjelajah internet dan melihat halaman
web.
Untuk membuat dokumen HTML hanya dibutuhkan sebuah
aplikasi teks editor biasa. Namun 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. Setelah anda memahami betul semua tag-tag
dasar html, diakhir nanti kita akan belajar membuat halaman web dengan
menggunakan web tool.
Struktur Dasar Html
Dalam penggunaannya, sebagian besar kode HTML harus
terletak di antara tag kontainer. Yaitu diawali dengan <namatag> dan
diakhiri dengan </namatag> (terdapat tanda "/"). Struktur dasar
dokumen HTML berisi elemen-elemen atau tag sebagai berikut:
<html>
<head>
<title>Judul
Form/Caption</title>
</head>
<body>
ISI
WEB
</body>
</html>
Keterangan:
<html> .. </html> Mendefinisikan bahwa teks yang berada diantara kedua tag tersebut
adalah file HTML.
<head> ..
</head> Sebagai informasi page header. Di dalam tag ini kita bisa meletakkan tag-tag TITLE, BASE, ISINDEX, LINK,
SCRIPT, STYLE & META.
<title> .. </title> Sebagai titel atau judul halaman/form. Kalimat
yang terletak di dalam tag ini akan muncul pada bagian paling atas browser Anda
(pada title bar).
<body> .. </body> Mendefinisikan teks beserta formatnya yang hendak
ditampilkan sebagai isi halaman web. Di dalam tag ini bisa diletakkan berbagai page
attribute seperti bgcolor,
background, text, link, vlink, alink, leftmargin dan topmargin.
Sekarang untuk latihan pertama kita, mari kita buat
dokumen HTML sederhana. Ikuti langkah-langkah berikut ini:
1. Buat direktori dengan nama latihan di drive C:.
Dan selanjutnya dalam direktori ini kita akan menyimpan semua file-file latihan
kita.
2. Buka Browser,
misalnya Internet Explorer atau Netscape Navigator.
3. Buka program aplikasi teks editor misalnya dalam
latihan ini adalah Notepad.
4. Mulai baris paling atas, tuliskan:
<html>
<head>
<title>halaman
pembuka</title>
</head>
</head>
<body>
Proyek
latihan pertama saya.
</body>
</html>
</html>
5. Simpan file anda dengan cara klik menu File
- Save:
6. Selanjutnya pilih direktori latihan yang tadi
kita buat.
7. Pada box File name, isikan nama filenya
dengan index.html
8. Pada drop down list di Save as type, pilih All Files.
Sehingga tampilannya seperti berikut:
9. Simpan proyek anda dengan meng-klik pada tombol Save
Untuk
menjalankan kode-kode tersebut, silahkan buka browser seperti Internet
Explorer, Netscape Navigator dan lain-lain.
1.
Klik menu File à
Open
Tip: Jika anda menggunakan Netscape Navigator,
klik Open Page kemudian Choose File
2.
Setelah jendela Open terbuka, klik tombol Browse
3.
Ketika jendela baru terbuka, pilih direktori
Latihan dan pilih file index.html.
4.
Klik tombol Open lalu tekan tombol Ok,
halaman web yang ditampilkan dalam browser adalah seperti berikut:
Catatan:
1 Semua dokumen HTML mempunyai ekstensi .html (atau .htm)
1 Semua halaman web (homepage) mempunyai file index.html.
File index.html secara otomatis akan dipanggil ketika alamat sebuah domain atau
direktori tempat menyimpan file tersebut di buka di browser. Terdapat pengecualian pada microsoft yang
menggunakan web server IIS, file yang dipanggil adalah default.html
Kode
Warna
Pengaturan warna dalam dokumen HTML
menggunakan mode kombinasi RGB (red,
green, blue). Setiap warna ditampilkan dalam dua digit nilai heksadesimal
(0, 1, 2, ..., F). Setiap bagian dua digit kode menunjukkan banyaknya
intensitas dari kombinasi warna merah, hijau dan biru. Misalnya untuk warna
kuning, dibuat dengan pencampuran warna sebagai berikut:
|
Red
|
Green
|
Blue
|
|
FF
|
FF
|
00
|
Berarti untuk warna kuning dapat dibuat
dengan kode #ffff00. Disamping itu, pembuatan warna dapat juga dibuat dengan
langsung menggunakan nama warna dalam bahasa inggris, misalnya kuning=”yellow”.
Berikut
ini warna-warna yang dapat digunakan dalam halaman HTML.
|
Warna
|
Heksadesimal
|
|
White
|
#FFFFFF
|
|
Black
|
#000000
|
|
Red
|
#FF0000
|
|
Green
|
#00FF00
|
|
Blue
|
#0000FF
|
|
Magenta
|
#FF00FF
|
|
Cyan
|
#00FFFF
|
|
Yellow
|
#FFFF00
|
Anda dapat juga
membuat campuran sendiri warna-warna berdasarkan emajinasi anda. Yang penting
anda mengikuti aturan diatas.
2. Pengaturan Halaman Web dan Teks
Untuk mendapatkan halaman web yang baik anda harus
melakukan pengaturan terhadap halaman web dan teks-teks didalamnya seperti mengatur
warna latar belakang halaman, memilih jenis dan ukuran huruf, perataan, warna
teks, menambahkan gambar dll. Tag-tag di bawah ini
yang biasa digunakan dalam pengaturan halaman web dan teks :
a.
<body>, digunakan mendefinisikan teks
beserta formatnya yang hendak ditampilkan sebagai isi halaman web. Di dalam tag
ini bisa diletakkan berbagai page attribute seperti bgcolor, background, text, link, vlink, alink, leftmargin dan topmargin.
1 Background = digunakan
untuk mengatur latar belakang dengan gambar/image.
1 Bgcolor = digunakan untuk mengatur warna
latar belakang dokumen, dengan warna putih sebagai default-nya.
1 Teks = digunakan untuk mengatur warna teks
dokumen, dengan warna hitam sebagai warna default.
1 Link = Untuk mengatur warna link dokumen
dengan warna biru sebagai warna default
1 Vlink = Untuk mengatur warna visited link
dokumen dengan default ungu
1 Alink = digunakan untuk mengatur warna
active link dokumen dengan default merah.
b.
Heading:
<Hn>..</Hn> Digunakan untuk
mengatur ukuran huruf pada header. "n" mempunyai nilai antara 1 - 6
atau antara <H1> sampai <H6>, dengan <H1> merupakan ukuran
terbesar dan <H6> merupakan ukuran terkecil.
contoh1_1.html
<html>
<head>
<title>:::
Heading Dokumen HTML :::</title>
</head>
<body
bgcolor=#ffffcc text=#003399>
<h1>Headng
Tingkat 1 </h1>
<h2>Headng
Tingkat 2 </h2>
<h3>Headng
Tingkat 3 </h3>
<h4>Headng
Tingkat 4 </h4>
<h5>Headng
Tingkat 5 </h5>
<h6>Headng
Tingkat 6 </h6>
</body>
</html>
Hasilnya
akan terlihat seperti :
c.Paragraph Baru:
<P> Digunakan untuk pindah alinea atau membuat
paragraf baru. Tag ini bisa diberi akhiran </P> tapi juga
bisa tidak diberi. Dalam tag ini juga bisa digunakan untuk mengatur perataan
kiri, tengah, kanan dan kiri-kanan, yaitu dengan attribut ALIGN. Attribut align mempunyai nilai: LEFT, RIGHT, CENTER dan
JUSTIFY.
d. Line Break:
<BR>
Digunakan untuk pindah ke baris baru.
e.
No Line Break:
<NOBR> Bila digunakan tag ini maka teks yang panjang tidak
secara otomatis pindah baris bawahnya bila baris pertama sudah terlalu panjang.
f. Font <FONT> Digunakan untuk mengatur huruf dokumen HTML. Tag
FONT mempunyai attribut, yaitu: SIZE, FACE, COLOR.
e SIZE: Digunakan untuk mengatur ukuran font. Ukuran font yang
digunakan berkisar antara 1 - 7 dengan 1 merupakan ukuran terkecil dan 7
merupakan ukuran terbesar.
e FACE: Digunakan untuk mengatur 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.
e COLOR: Digunakan untuk mengatur warna font. Didefinisikan
dengan menggunakan nilai RGB/HEX atau bisa juga langsung menggunakan nama warna
(red misalnya).
contoh1_1.html
<html>
<head>
<title>::: Ukuran,
Jenis dan Warna Font :::</title>
</head>
<body>
<font size=1 Face=arial
color=red>Ukuran font 1</font><br>
<font size=2 Face=arial
color=green>Ukuran font 2 </font><br>
<font size=3 Face=arial
color=blue>Ukuran font 3 </font><br>
<font size=4 Face=verdana
color=red>Ukuran font 4 </font><br>
<font
size=5 Face=verdana color=blue>Ukuran font 5 </font><br>
<font
size=6 Face=tahoma color=green>Ukuran font 6 </font><br>
<font size=7 Face=tahoma color=red>Ukuran
font 7 </font><br>
</body>
</html>
Hasilnya
akan terlihat
Contoh
lainnya :
<font size=2 face="times_new_roman"
color="#0066cc">
g.
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 diatas,
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>
Italic
<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 teks superscript
<SUB> membuat teks sub script
<ABBREV> Abbreviations
<ACRONYM> Untuk
akronim
<PERSON> Digunakan untuk indexing
<Q> Membuat
short inline quotation
<VAR> Membuat variable name, selalu dalam italics.
h.
<HR>, digunakan untuk
membuat garis horisontal. Tag ini mempunyai atribut SIZE, WIDTH, ALIGN dan
NOSHADE.
Atribut
SIZE digunakan untuk menentukan panjang garis dalam satuan pixel.
Atribut WIDTH digunakan untuk menentukan ketebalan garis. Atribut NOSHADE
akan menyatakan bahwa garis tersebut ditampilkan tanpa bayang-bayang 3-D.
contoh1_1.html
<html>
<head>
<title>:::
Membuat Garis Horisontal :::</title>
</head>
<body
bgcolor=#ffffcc>
<font
size=1 Face=tahoma color=blue>Selamat Datang</font>
<hr
size=1 width=150 align=left>
<h1><center>www.smkpgri3-mlg.sch.id</h1>
<hr
size=5 align=center noshade>
</body>
</html>
Hasilnya
tampak sebagai berikut:
i.
LISTS
Daftar/list adalah merupakan
kumpulan teks yang disusun sedemikian rupa sehingga item-item yang ada memiliki
nomor urut atau bisa juga berupa tanda-tanda khusus/symbol.
Terdapat tiga tipe list yang dapat digunakan, yaitu :
þ Unordered Lists: <UL> Untuk membuat daftar
item dengan tanda bullet (tidak bernomor). List entries didefinisikan dengan
tag <LI>. Pada jenis ini tidak
memerlukan pengurutan data.
contoh1_1.html
<html>
<head>
<title>:::
Undordered List :::</title>
</head>
<body>
<b><font
size=3 Face=tahoma color=blue>
Hobi
saya adalah : </b>
<hr
size=2 width=150 align=left>
<ul type=circle>
<li>Olahraga
</ul>
<ul type=square>
<li>Shurfing
</ul>
<ul type=disc>
<li>Makan Bakso
</ul>
</font>
</body>
</html>
Hasil dari kode di atas adalah:
þ
Ordered Lists:
<OL> Juga digunakan untuk membuat daftar item bernomor,
dengan tiap item dapat menggunakan angka arab atau romawi. List entries juga didefinisikan dengan <LI> tag. Atribut yang ada pada Ordered List adalah TYPE
dan START.
contoh1_1.html
<html>
<head>
<title>::: Ordered List :::</title>
</head>
<body>
<b><font size=2 Face=tahoma color=black>
Pendidikan saya adalah : </b>
<hr size=2 width=150 align=left>
<ol type=1>
<li>Sekolah
Dasar
<li>Sekolah
Lanjutan Pertama
<li>Sekolah
Lanjutan Atas
</ol>
<hr
size=3 width=500>
<ol start=4>
<li>Universitas Muhammadiyah Malang
<li>Universitas
PGRI Malang
</ol>
</font>
</body>
</html>
Hasil dari kode di atas adalah :
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.
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>, digunakan untuk menjelaskan
istilah-istilah. Definition List
dinyatakan dengan tag <DL> dan diantara tag tersebut ditambahkan tag
<DT> Definition Term yaitu bagian istilah yang dijabarkan dan tag <DD> Definition Data yang
merupakan penjabaran dari istilah.
contoh1_1.html
<html>
<head>
<title>::: definition List
:::</title>
</head>
<body>
<dl>
<dt> Bagian Pertama.
<dd> Sub Bagian Pertama.
<dt> Bagian Kedua.
<dd> Sub Bagian Kedua
</dl>
</body>
</html>
Hasil dari kode di atas adalah :
contoh1_1.html
<html>
<head>
<title>the
<pre> tag</title>
</head>
<body>
<h3>without the <pre> tag:</h3>
here's
some ditty
specially done
to
lay it out all
formatted and pretty.
unfortunately, that is all
this
junk really means
because i admit i
couldn't scrawl
poetry for
beans.
<p><h3>with the <pre> tag:</h3>
<pre>
here's
some ditty
specially done
to
lay it out all
formatted and pretty.
unfortunately, that is all
this
junk really means
because i admit i
couldn't scrawl
poetry for
beans.
</pre>
</body>
</html>
Hasil dari kode di atas adalah :
þ
Extended Quotations:
<BLOCKQUOTE>,
digunakan untuk membuat kutipan panjang, sehingga hasilnya menjorok ke dalam.
contoh1_1.html
<html>
<head> <title>:::
Blockquote :::</title>
</head>
<body>
<h3>2. Pengaturan Teks</h3>
<blockqoute>
Untuk mendapatkan halaman web
yang baik Anda harus melakukan pengaturan terhadap teks seperti memilih jenis
dan ukuran huruf, perataan, dll.
</blockqoute>
</body>
</html>
Hasilnya tampak seperti bnerikut ini:
Ok Guys segitu dulu yang kita bahas ,untuk selanjutnya akan ada Hypertext Link
:) :) :)
