Materi HTML ( Dasar )
|
HTML (Hyper Text Markup
Language)
 |
6.1 Definisi HTML
HTML (Hyper Text Markup
Languange) adalah bahasa pengkodeaan
untuk menghasilkan dokumen-dokumen hypertext untuk digunakan di World Wide Web.
HTML terlihat seperti bahasa pengkodean lama, yang di awali dan diakhiri dengan
kode-kode html dimana menunjukkan bagaimana keluarannya pada saat di jalankan
pada sebuah web browser.
6.2 Program Editor
HTML
Untuk membuat aplikasi web, dalam
hal ini menggunakan HTML , maka kita membutuhkan suatu editor guna mengetikkan,mengedit
atau menyimpan dokumen-dokumen HTML. Editor
untuk memdesain suatu web dibagi 2 yaitu yang bersifat text murni dan yang
WYSIWYG (Graphic) Editor untuk text,
anatara lain Notepad dan Ultra Edit. Sedang editor WYSIWYG adalah Netscape dan
Front Page.
6.3 Struktur Dasar
HTML
Seperti umumnya dokumen lain,
dokumen HTML terdiri dari teks-teks dan bahkan lebih dari dari itu. Dokumen
HTML juga dapat mengandung suatu gambar, suara, ataupun video. Satu hal yang
membedakan dokumen HTML dengan dokumen-dokumen lainnya adalah adanya
elemen-elemen HTML beserta tag-tagnya. Elemen dan tag HTML berfungsi untuk
menformat atau menandai suatu bagian tertentu dari dokumen HTML dan juga untuk
menentukan struktur bagian tersebut dalam dokumen HTML. Elemen dan Tag inilah
yang merupakan ciri utama dari suatu dokumen HTML. Secara garis besar, untuk
menulisakn sebuah dokumen HTML dibutuhkan kerangka penulisan dengan tag-tag
dasar sebagai berikut HTML, HEAD,TITLE dan BODY.
Sebagai contoh berikut ini adalah
penulisan HTML minimal yang menggunakan tag-tag dasar tersebut
<HTML>
<HEAD>
<TITLE> Judul dokumen </TITLE>
</HEAD>
<BODY>
data-data yang akan di
tampilkan
</BODY>
</HTML>
TAG
|
FUNGSI
|
HTML
|
Untuk penenda bahwa dokumen
yang dibuat adalah dokumen web
|
HEAD
|
Untuk bagian judul, boleh ada
atau tidak
|
TITLE
|
Judul untuk masing-masing
halaman, ditampilkan diatas browser
|
BODY
|
Informasi yang ingin
dimunculkan diletakkan di bagian ini
|
6.4 Elemen dan Tag
HTML
Dua komponen utama pembentuk
dokumen HTML adalah Elemen dan Tag
Dengan adanya dua komponen ini, maka kita dapat membuat dokumen HTML dengan
baik
6.4.1 Elemen
Dalam dokumen HTML, elemen dibagi
menjadi dua kategori utama, yaitu elemen-elemen <HEAD> yang berikan
informasi tentang dokumen tersebut, seperti judul dokumen astau hubungannya
dengan dokumen lain. Elemen-elemen <BODY> yang menentukan bagaimana isi
suatu dokumen ditampilkan oleh browser, seperti paragraf, list (daftra), tabel
dan lain-lain. Di dalam elemen HTML terdiri dari tag-tag beserta teks yang ada
dalam tag-tag tersebut.
6.4.2 Tag
Pada saat web browser menampilkan
suatu web page, browser tersebut akan membaca teks-teks pada dokumen HTML, dan
mencari kode khusus yang disebut tag. Tag diapit oleh tanda <>. Tag
biasanya merupakan pasangan, yang disebut tag awal dan tag akhir. Tag awal
dinyatakan dalam bentuk <nama tag>
sedang tag akhir dinyatakan dalam bentuk </nama
tag>.
Format umum suatu tag berpasangan
adalah :
<nama tag> Teks yang
akan ditampilkan </nama tag>
Catatan :
§
HTML tidak membedakan penulisan huruf besar
dan huruf kecil pada penulisan elemen maupun tag. Penulisan <i> dan
<I> dianggap sama, campuran antara huruf besar dan kecil pun tidak
berpengaruh <i>text</I>
§
Tidak semua tag didukung oleh semua browser.
Jika suatu browser tidak mengenali suatu tag tertentu, browser tersebut akan
mengabaikan tag yang tidak dikenalnya dan menuliskan isi di dalam tag
tersebut sebagai teks biasa.
|
Sebagai contoh untuk menampilkan
teks dalam format miring digunakan elemen I (italic), seperti contoh di bawah
ini:
<i> Teks ini
akan tercetak miring bila dilihat di browser </i>
Penulisan program yang baik
adalah secara terstruktur. Artinya antara tag pertama dan tag berikutnya tidak
saling tumpang tindih.
Penulisan tag yang
tumpang tindih :
|
Penulisan tag yang
benar :
|
<tag1>
teks tag1
<tag2>
teks tag 2
</tag1>
</tag2>
|
<tag1>
teks tag1
<tag2>
teks tag 2
</tag2>
</tag1>
|
Kemungkinan kesalahan yang
terjadi adalah lupa memberi tag awal atau tag akhir sehingga web page yang
dihasilkan akan terlihat lain dari yang diinginkan.
Tidak semua tag mengikuti aturan
seperti diatas, terdapat beberapa macam bentuk tag yang dikenal oleh HTML, di
mana umumnya tag-tag dalam HTML muncul dalam bentuk seperti berikut :
<nama tag>teks</nama tag>
<nama tag>
<nama tag atribut1=argumen atribut2=argumen dst>
<nama tag antribut=argumen>teks</nama tag>
Sebagai contoh :
<Title> Home Page Irawan </Title>
<BR>
<HR Width=10 color=”red”>
<A Href=http://www.unikom.ac.id/>WebSite
UNIKOM </a>
6.5 Desain HTML
Untuk mempermudah pemahaman
diberikan contoh dalam bentuk file HTML
<html>
<head>
<title>Modul Pengantar Ilmu Komputer</title>
</head>
<body>
<h1>Klasifikasi dan Kegunaan Komputer</h1>
Komputer berasal dari kata <i>to compute</i> yaitu
menghitung.Jadi pada awalnya komputer hanya digunakan sebagai alat hitung,
namun perbedaan yang mendasar dengan kalkulator adalah bahwa komputer mempunyai
perkembangan zaman, komputer digunakan manusia untuk memproses pemecahan
masalah.
<hr>
Untuk lebih jelas tentang kegunaan komputer, komputer dibagi
dalam beberapa klasifikasi, yaitu :
<h5>
<ol>
<li><a
href="jenis_data.html">Berdasarkan Jenis Data Yang Diolah </a>
</li>
<li><a
href="kemampuan.html">Berdasarkan Kemampuan Komputer </a> </li>
<li><a
href="ukuran_fisik.html>Berdasarkan Ukuran Fisik</a></li>
<li><a
href="bidang_masalah.html> Berdasarkan Bidang Masalah </a> </li>
</ol>
</h5>
</body>
</html>
Penjelasan dari elemen dan tag
html yang digunakan untuk program diatas :
- Perintah HTML digunakan sebagai awalan untuk suatu
dokumen html.
- Perintah HEAD digunakan untuk menunjukkan bagian
judul dokumen. Sifatnya opsional (boleh ditulis/tidak)
- PerintahTITLE digunakan untuk memberikan judul pada
masing.masing dokumen. Judul ini akan ditampilkan dibagian atas web
browser.
- Perintah BODY menunjukkan bagian isi dari dokumen html
tersebut.
- Perintah H1 digunakan untuk penetapan besar huruf
(heading). Apabila angka yang menyertai
huruf H semakin besar, maka huruf semakin kecil.
- Perintah HR digunakan untuk membuat garis
- Perintah OL digunakan untuk membuat daftar. LI untuk
isi daftar.
- Perintah A HREF digunakan untuk membuat link.
6.6 Elemen Dasar HTML
HTML tidak hanya menyediakan teks
saja dalam dokumennya, tetapi juga mampu menampilkan objek-objek multimedia
seperti gambar, suara, video, dan bahkan telah merambah lebih jauh dengan
adanya VRML serta applet-applet Java. Untuk informasi yang berupa teks, HTML
telah menyediakan bermacam-macam elemen, seperti :
- PARAGRAPH untuk membuat suatu paragraf
- BLOCKQUOTE untuk membuat suatu kutipan teks
- PREFORMATTED TEXTuntuk menampilkan teks seperti yang
dituliskan
- DIVIDER digunakan untuk mengelompokkan suatu teks
tertentu
6.6.1 Paragraf
Elemen <P>………..</P>
digunakan untuk menandai sekumpulan teks sebagai suatu paragraf.Tag <P>
untuk awal paragraf dan tag </P> digunakan untuk mengakhiri paragraf.
Tag paragraf memiliki atribut
yang dapat dipakai sebagai tambahan untuk pemformatan paragraf
Atribut
|
Argumen
|
Keterangan
|
Align
|
Right
Center
Left
Justify
|
Digunakan untuk perataan suatu
paragraf, apakah rata kiri,kanan, tengah ataupun rata kiri/kanan (justify)
|
Berikut, diberikan contoh-contoh
kode HTML untuk menampilkan paragraf
<html>
<body>
<p>Paragraf satu.</p>
<p>Paragraf dua.</p>
<p>Paragraf tiga.</p>
<p>Elemen paragraf didefinisikan dengan menggunakan tag P.</p>
</body>
</html>
Contoh kode HTML dengan tambahan
atribut :
<html>
<body>
<p align="right">Paragraf dengan perataan kanan.</p>
<p align="center">Paragraf dengan rata tengah.</p>
<p align="left">Paragraf tiga.</p>
<p align="justify">Paragraf dengan perataan
justify.</p>
</body>
</html>
6.6.2 Blockqoute
Tag <BLOCKQUOTE> digunakan
untuk menuliskan suatu kutipan teks. Browser biasanya menampilkan kutipan teks
dengan mengidentifikasikan teks tersebut atau dengan mengabaikan spasi dalam
teks seperti tag paragraf . kutipan teks dinyatakan dengan indentasi yang
menjorok ke dalam dan berbeda dalam satu paragraf.
Berikut ini, contoh dokumen HTML
yang menggunakan tag blockquote :
<html>
<body>
<h3>Teknologi Universal Serial Bus (USB)</h3>
<blockquote>
Pada awal tahun 1977 tepatnya komputer dengan prosesor Pentium,
beberapakomputer sudah mempunyai piranti baru untuk memudahkan pengguna
komputer dalam menangani masalah kabel yang bayak.<br>
Teknologi baru tersebut dinamalan Universal Serial Bus atau yang
lebih
dikenal dengan USB. Memang masih bayak yang tidak mengetahui apa
dan
fungsi teknologi ini. Oleh sebab itu bab ini akan memperkenalkan
apa yang
dimaksud dengan USB dan kegunaannya.
</blockquote>
<h5>Disadur dari Buku " Pengantar Sistem
Komputer" Hal:134 <h5>
</body>
</html>
6.6.3 Preformatted Text
Pada tag paragraf, penekanan
tombol ENTER, Tab, Spasi tidak memberikan pengaruh pada web page yang kita
buat. Bagaimana jika misalnya kita betul-betul ingin menambahkan spasi dan
enter pada teks dalam web page kita. Masalah ini dapat dipecahkan dengan
menggunakan tag <PRE>…..</PRE>. Sehingga teks yang berada di dalam
tag pre akan mengikuti sesuai dengan pengetikan yang kita lakukan. Berikut ini
adalah contoh dokumen HTML yang menggunakan Tag <PRE>
<html>
<body>
<h3>CONTOH PENGGUNAAN TAG PRE </h3>
<pre>
Teks ini menggunakan s p a s i dan ENTER
untuk berpindah ke baris ini.
</pre>
<p>Tag pre juga sangat cocok untuk menampilkan baris-baris
kode program
seperti dibawah ini</p>
<pre>
<b>for i = 1 to 10
print i
next i
</pre></b>
<p>Kita Juga dapat membuat gambar dengan format teks
seperti berikut :</p>
<pre>
/\_/\
( o o )
- meooongg........
</pre>
</body>
</html>
6.6.4 Divider
dan Center
Elemen DIV digunakan untuk
membagi-bagi dokumen HTML dalam suatu hieraki yang terstruktur. Teks yang
dikelilingi oleh tag <DIV>……..</DIV> akan diformat menurut nilai
atribut ALIGN yang ditentukan di dalamnya. Nilai atribut ALIGN yaitu, Left,
Center dan Right.
Penggunaan DIV dengan
Align=”center” dapat diganti dengan tag <CENTER>….<CENTER>.
Keduanya menghasilkan hasil yang sama
<html>
<body>
<div align="left">Teks rata kiri dalam tag DIV</div>
<div align="right">Teks rata kanan dalam tag DIV</div>
<div align="center">Teks rata tengah dalam tag
DIV</div>
<br>
<center>
teks ini menggunakan perintah center sebagai pengganti align
center pada div
</center>
</body>
</html>
6.6.5 Karakter Spesial
Karakter-karakter spesial adalah
karakter-karakter yang penggunaannya dalam HTML harus menggunakan kode-kode
tertentu. Tanda < dan > adalah salah satu contoh dari karakter spesial.
Karakter-karakter ini merupakan karakter khusus yang digunakan untuk menandai
suatu tag HTML. Untuk menampilkan karakter-karakter ini dalam suatu web page
diperlukan suatu kode khusus yang disebut entity
. Terdapat dua macam entity dalam HTML, yaitu karakter entity dan numerik
entity yang menggunakan suatu kode angka untuk mewakili suatu karakter spesial.
Karakter entity menggunakan suatu
nama tertentu sebagai ganti karakter spesial dan diawali dengan tanda &
serta diakhiri dengan tanda ;. Beberapa contoh karakter entity adalah :
<
|
Mewakili karakter <
|
>
|
Mewakili karakter >
|
©
|
Mewakili karakter ©
|
Numerik entity menggunakan suatu
kode angka untuk mewakili suatu karakter spesial dan diawali dengan tanda
&# dan diakhiri dengan tanda ;. Salah satu contoh numerik entity adalah
» yang mewakili karakter >>. Berikut ini adalah contoh penggunaan
karakter-karakter spesial dalam HTML.
<html>
<body>
<h1>Contoh Penggunaan Karakter Spesial</h1>
<hr>
<pre>
» Tag<i><I></i> digunakan
untuk memiringkan teks
» Kurt Gödel
adalah seorang ahli matematika Jerman
» Menggunakan karakter Spesial
¹
<b>&copy;</b> untuk membuat tanda ©
²
<b>&reg;</b> untuk membuat tanda ®
³ <b>&trade</b>
untuk membuat tanda ™
</pre>
</body>
</html>
6.6.6 Komentar
Komentar digunakan untuk
memberikan suatu penjelasan perintah HTML yang tidak akan ditampilkan di dalam
browser. Untuk membuat komentar suatu teks diapit oleh tanda <!-- dan
ditutup dengan -->.
Sebagai contoh dapat dilihat pada
dokumen HTML berikut :
<html>
<body>
<!--komentar ini tidak akan dimunculkan di browser-->
<p>Contoh penulisan teks biasa</p>
</body>
</html>
Komentar
Posting Komentar