HTML (Hyper Text Markup Language)
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.
2. Program Editor HTML
Untuk membuat aplikasi web, dalam hal ini menggunakan HTML , maka kita
membutuhkan suatu editor guna mengetikkan,mengedit atau menyimpan dokumendokumen
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.
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 dokumendokumen
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 tagtag
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
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
1. Elemen
Dalam dokumen HTML, elemen dibagi menjadi dua kategori utama, yaitu elemenelemen
<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.
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
teks tag1 <tag1>
<tag2> <tag2>
teks tag 2 teks tag 2
</tag1> </tag2>
</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://devilx7.blogspot.com/> Nama Link Anda </a>
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>
Untuk menampilkan hasilnya, kita buka internet explorer dan buka file html tersebut.
Penjelasan dari elemen dan tag html yang digunakan untuk program diatas :
1. Perintah HTML digunakan sebagai awalan untuk suatu dokumen html.
2. Perintah HEAD digunakan untuk menunjukkan bagian judul dokumen.
Sifatnya opsional (boleh ditulis/tidak)
3. PerintahTITLE digunakan untuk memberikan judul pada masing.masing
dokumen. Judul ini akan ditampilkan dibagian atas web browser.
4. Perintah BODY menunjukkan bagian isi dari dokumen html tersebut.
5. Perintah H1 digunakan untuk penetapan besar huruf (heading). Apabila angka
yang menyertai huruf H semakin besar, maka huruf semakin kecil.
6. Perintah HR digunakan untuk membuat garis
7. Perintah OL digunakan untuk membuat daftar. LI untuk isi daftar.
8. Perintah A HREF digunakan untuk membuat link.
6. Elemen Dasar HTML
HTML tidak hanya menyediakan tek 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.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 paragraph
Atribut Argumen Keterangan
Align Right Digunakan untuk perataan
Center suatu paragraf, apakah rata
Left kiri,kanan, tengah ataupun
Justify 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>
Hasil dapat dilihat pada browser sebagai berikut :
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. 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>
Dari program diatas akan dihasilkan dokumen yang tampak seperti di browser :
Bandingkan hasilnya jika tag pre dihilangkan
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>
Hasilnya dapat dilihat pada browser dibawah ini :
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>
Adapun hasil dari program diatas dapat dilihat pada browser dibawah ini :
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>
Catatan :
• Pada Bab-bab berikutnya tidak dituliskan program HTML secara lengkap,
tetapi hanya tag-tag yang diterangkan saja.
• Untuk dapat membuat dokumen HTML yang baik, adalah dengan
mengkombinasikan tag-yag yang telah dipelajari untuk mendesain dokumen
HTML
0 komentar:
Post a Comment
Jika belum jelas tentang artikel saya di atas silahkan bertanya (berkomentar) karena ada istilah [ Malu bertanya sesat di jalan ]