1. DASAR-DASAR HTML
a. Struktur dasar HTML
Secara sederhana sebuah dokumen HTML
haru memiliki 2 tag dasar, yaitu :
<html> dan <body>.
Kedua tag diatas
merupakn tag tertutup, artinya tag tersebut memiliki pasangan sebagai tag
close. Jika tag hanya memiliki tag open saja, maka tag tersebut dapat dikatakan
sebagai tag terbuka. Akan tetapi sebaiknya jika Anda menuliskan sebuah tag
selalu diberikan tag close sebagai penutup tag tersebut. Sehingga semua tag
yang digunakan adalah tag tertutup. Jika disajikan dalam sebuah dokumen HTML
maka akan ditulis seperti berikut ini :
<html>
<body>
. . .
</body>
</html>
Tag-tag lain yang melengkapi tag diatas
adalah :
·
head
·
title
·
body
b. Head
Merupakan tag kedua setelah
<html>. Tag ini digunakan untuk menuliskan keterangan
tentang dokumen web yang akan
ditampilkan.
Contoh :
<html>
<head> Halaman HTML
</head>
</html>
c. Title
Merupakan tag di dalam head yang harus
dituliskan untuk memberikan judul/informasi
pada caption web broser, tentang topik
atau judul dari dokumen web yang ditampilkan
dalam browser.
Contoh :
<html>
<head> Halaman HTML
<title>First HTML</title>
</head>
</html>
d. Body
Merupakan section (bagian) utama dalam
dokumen web. Pada bagian ini semua isi
dokumen yang akan ditampilkan di dalam
browser harus di tuliskan.
Contoh :
<html>
<head> Halaman HTML
<title>First HTML</title>
</head>
<body>
My First HTML
</body>
</html>
Tag body ini
mengandung informasi yang berhubungan dengan properti dasar pada keseluruhan
isi dokumen HTML. Text, Link, Link yang telah dikunjungi, Link yang aktif dan
warna latar belakang (background) dokumen serta image yang akan menjadi
background didefinisikan pada bagian ini. Secara lengkap, tag body beserta
atribut yang ada di dalamnya disajikan seperti di bawah ini.
<body text="white"
link="red" vlink="orange" alink="gray"
bgcolor="black"
background="white-tile.gif"></body>
Atribut Keterangan
Text warna dari keselurhan teks pada
dokumen
Link warna teks yang berupa Link
alink warna teks yang sedang di klik
oleh user
vlink warna teks link yang pernah
dikunjungi oleh user
bgcolor warna latar belakang dokumen
background path (jalur relatif atau
absolut) menuju ke image yang
akan menjadi latar belakang dari dokumen
anda yang
akan muncul lebih dahulu dari bgcolor.
2. MANIPULASI TEKS
Sejauh ini kita
telah membahas hal-hal mendasar yang dibutuhkan untuk menciptakan sebuah
halaman html kosong dengan kode-kode dasar HTML. Yang paling mendasar dari
melakukan format teks adalah tag Heading (berbeda dengan Tag HEAD - tidak ada
kesamaan mendasar di antara keduanya). Selain itu terdapat juga beberapa tag
yang lain, yaitu :
·
paragraf
·
bold, italic, underline, superscipt,
blink dan subscript
·
line break
·
horizontal line
·
blockquote
·
comment
e. Heading
Teks dalam
dokumen umumnya mempunyai judul topik, pada dokumen HTML judul ini disebut
heading. Heding tulisan akan ditampilkan dengan huruf yang lebih besar dan
tebal. Heading juga dimanfaatkan untuk menunjukkan tingkatan keberartian dari
teks yang akan dituliskan. Terdapat 6 tingkatan heading dalam HTML, dinomori
dari 1 sampai dengan 6. Nomor 1 merupakan heading yang terbesar. Dan nomor 6
merupakan heading yang terkecil. Setiap heading dalam dokumen harus diberi tag.
Tag yang digunakan adalalh sebagai berikut:
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Atribut yang ada
pada tag heading adalah align, yang digunakan untuk mengatur posisi dari
heading. Nilai align adalah left, center dan right.
Contoh :
<h1 align=center>Heading 1 di
tengah</h1>
<h2 align=right>Heading 2 di
kanan</h2>
<h3 align=left>Heading 3 di
kiri</h3>
f. Paragraph
Tag ini
digunakan untuk memberikan format pada paragraf dalam informasi yang disampaikan.
Informasi yang disajikan dalam dokumen harus mengikuti kaidah-kaidah dalam
penulisan. Misalnya satu pikiran utama disimpan dalam satu paragraf. Tag yang
digunakan untuk membuat paragraf adalah <p> dan diakhiri dengan
</p> (meskipun hal ini tidak harus diberikan – akan tetapi sebaiknya
digunakan). Setiap pergantian paragraf harus dimulai dengan tag <p> ini. Contoh
:
<html>
<title>Paragraf</title>
</head>
<body>
<p>This is a paragraph</p>
<p>This is another
paragraph</p>
</body> </html>
Pada web browser
diperlihatkan setiap paragraf akan ditampilkan dengan meloncat satu baris. Jika
teks yang akan ditampilkan melebihi lebar window web browser, maka secara otomatis
teks tersebut akan ditampilkan di bawahnya (tanpa meloncati satu baris). Atribut
yang ada pada pargraf adalah align dengan nilai adalah right atau center atau justify.
Contoh :
<html>
<title>Paragraf</title>
</head>
<body>
<p align=center>
Paragraf dapat digunakan dalam HTML ;
Dengan tag paragraph kita dapat mengatur
pembagian alinea dalam
dokumen.</p>
</body>
</html>
g. Bold, Italic, Underline, Superscript,
Blink Dan Subscript
·
Bold
Digunakan untuk membuat teks dalam
dokumen HTML tercetak tebal.
Tag yang digunakan adalah <b> . .
. </b>.
·
Italic
Digunakan untuk membuat teks dalam
dokumen HTML tercetak miring.
Tag yang digunakan adalah <i> . .
. </i>.
·
Underline
Digunakan untuk membuat teks dalam
dokumen HTML tercetak dengan garis di
bawahnya.
Tag yang digunakan adalah <u> . .
. </u>.
·
Contoh Bold, Italic, dan Underline
<html>
<body>
<b>
<h1>
<u>
<i>
<right> Halaman HTML</right>
</i>
</u>
</h1>
</b>
</body>
</html>
·
Blink
Berfungsi untuk membuat teks tampil
berkedip-kedip.
Perhatian!, jika anda mengedipkan
keseluruhan teks, maka teks akan menjadi susah untuk
dibaca!.
Disamping itu, tag blink ini hanya akan
berfungsi dengan baik pada web browser Netscape
Navigator saja.
Contoh :
<html>
<body>
<blink>
Percobaan
</blink>
</body>
</html>
·
Superscript
Digunakan untuk membuat teks dalam dokumen
HTML tercetak lebih kecil dari teks
normal dan terletak lebih di atas dari
teks yang lain.
Tag yang digunakan adalah <sup> .
. . </sup>.
Contoh :
<html>
<head>
<title>Superscript</title>
</head>
<body>
Contoh Penggunaan superscript :
X<sup>y</sup>
</body>
</html>
·
Subscript
Digunakan untuk membuat teks dalam
dokumen HTML tercetak lebih kecil dari teks
normal dan terletak lebih di bawah dari
teks yang lain.
Tag yang digunakan adalah <sub> .
. . </sub>.
Contoh :
<html>
<head>
<title>Contoh Subscript</title>
</head>
<body>
Contoh Teks yang berisi subscript :
X<sub>n+1</sub>
</body>
</html>
h. Line Break
Line break
adalah bentuk format dimana penulisan dilakukan untuk menganti baris (bukan mengganti
paragraf).
Tag yang digunakan adalah tag
<br>. Tag ini merupakan tag terbuka.
Contoh :
<htm>
<head>
<title>Line Break</title>
</head>
<body>
<p>Mengganti
<br>baris<br>dalam satu<br>paragraf</p> </body>
</html>
i. Horizontal Line
Sebuah garis dapat disisipkan dalam
dokumen web, umumnya digunakan sebagai pemisah
antar bagian atau paragraf.
Tag yang digunakan adalah <hr>.
Tag ini merupakan tag terbuka.
Contoh :
<htm>
<head>
<title>Horizontal
Line</title>
</head>
<body>
<hr> </hr>
<p>PERPUSTAKAAN</p>
<hr> </HR>
</body>
</html>
j. Blockquote
Tag blockquote
umum-nya digunakan untuk teks dalam baris panjang berupa material yang dikutip
dan ditujukan untuk memperjelas serta memberi penekanan pada sesuatu point.
Tag blockquote terlihat sebagai berikut
:
<blockquote> . . .
</blockquote>
Contoh :
<html>
<head>
<title>Contoh Tag
Blockquote</title>
</head>
<body>
<blockquote>
<p>
Selama beberapa tahun, Internet dikenal
sebagai
sesuatu yang sulit untuk dipelajari.
Tetapi dengan kemunculan <i>World Wide Web
(WWW)</i> atau biasa disebut Web,
semua pandangan ini menjadi berubah. World
Wide Web menjadikan internet sebagai
suatu sistem berbasiskan <i>Graphical User
Interface (GUI)</i> yang semula
berbasis text.
</P>
</blockquote>
<P>
Pada awal perkembangannya Internet
sebenarnya digunakan oleh pihak militer Amerika
Serikat untuk kepentingannya. Akan
tetapi kemudian pada perkembangannya tidak hanya
untuk digunakan oleh pihak militer saja
tapi juga oleh umum. WWW sebenarnya
merupakan suatu kumpulan informasi pada
beberapa server komputer yang terhubung satu
sama lain dalam jaringan internet.
</P>
</body>
</html>
k. Comment
Tag comment digunakan untuk memberikan
komentar terhadap dokumen HTML yang
sedang di susun.
Tag comment adalah sebagai berikut:
<!-- . . . -->
Tanda . . . di isikan dengan kalimat
komentar.
Browser akan mengabaikan isi apapun yang
berada dalam area tag komentar ini. Tag ini
berguna untuk memberi kemudahan pada
saat anda melakukan perubahan struktur
halaman anda.
Kumpulan Lengkap Tag HTML dan Fungsinya
<!-- --> 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 paragraf
<pre> Membuat teks dengan ukuran
huruf yg sama
<script> Mendefinisikan awal
script
<table> Membuat tabel
<td> Kolom pada tabel
<title> Mendefinisikan title
<tr> Baris pada tabel
<u> Membuat teks bergaris bawah
No comments:
Post a Comment