Saatnya Yang Muda Berbicara: Panduan Belajar Pemrograman HTML

DASARHTML

HTML atau Hypertext Markup Language merupakan protokol yang digunakan untuk mentransfer data atau document dari web server ke browser,seperti Internet Explorer, Opera, Mozilla Firefox, Netscape Navigator, NeoPlanet,Google Chrome, Safari, Maxthon, Flock, Avant Browser, Deepnet Explorer,Phaseout dll. HTML inilah yang memungkinkan kita menjelajah internet dan melihat halaman web yang menarik.

HTML digunakan untuk membangun suatu halaman web. Sekalipun banyak orang menyebutnya sebagai suatu bahasa pemrograman, HTML sama sekali bukan bahasa pemrograman, tapi merupakan bahasa markup (penandaan), terhadap sebuah dokumen teks.Simbol markup yang digunakan oleh HTML ditandai dengan tanda lebih kecil ( < ) dan tanda lebih besar ( > ) , dan disebut tag.

Sekarang ini di pasaran terdapat banyak HTML authoring (software yang digunakan untuk membuat atau mendesain halaman web). MacromediaDreamweaver, Adobe GoLive, MS FrontPage contohnya. Tetapi tanpa mengetahui dasar-dasarnya, kita 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

I. STRUKTUR DASAR HTML

Sebuah file HTML merupakan file teks biasa yang mengandung tag-tag HTML. Karena merupakan file teks, maka HTML dapat dibuat dengan menggunakan teks editor yang sederhana, misalnya Notepad. Dapat juga menggunakan HTML editor yang bersifat Visual, misalnya Frontpage. Untuk menandai bahwa sebuah file teks merupakan file HTML, maka ciri yang paling nampak jelas adalah ekstensi filenya, yaitu .htm atau .html.

Dalam penggunaannya sebagian besar kode HTML tersebut harus terletak di antara tag kontainer. Yaitu diawali dengan <namatag> dan diakhiri dengan </namatag> (terdapat tanda "/"). Tag sifatnya incase sensitive, artinya penulisan tag boleh menggunakan huruf besar atau kecil

Sebuah halaman web minimal mempunyai empat buah tag, yaitu :

a. <HTML>

Sebagai tanda awal dokumen HTML.

b. <HEAD>

Sebagai informasi page header. Di dalam tag ini kita bisa meletakkan tag-tag TITLE, BASE, ISINDEX, LINK, SCRIPT, STYLE & META.

c. <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>Belajar HTML</TITLE>

d. <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 :

TEXT : memberikan warna pada teks

BGCOLOR : memberikan warna pada latarbelakang dokumen HTML

BACKGROUND : memberikan latarbelakang dokumen HTML dalam bentuk gambar

LINK : memberikan warna untuk link

ALINK : memberikan warna untuk link yang sedang aktif

VLINK : memberikan warna untuk link yang telah dikunjungi.

LEFTMARGIN : Batas kiri dokumen

TOPMARGIN : Menentukan batas atas

BGPROPERTIES : Jika nilai atribut ini diisi “FIXED”, maka gambar latar belakang tidak ikut tergulung. Jika diisi “SCROLL” maka gambar latar belakang ikut tergulung

Ø Jika attribute bgcolor dan background keduanya dispesifikasikan maka attribute background yang akan digunakan, akan tetapi jika nilai attribute background (gambar) tidak ditemukan pada dokumen HTML maka attribute bgcolor yang akan digunakan.

Ø Penggunaan warna bisa menggunakan nama warna atau kode warna(RGB/HEX), berikut tabel warna beserta kodenya yang bisa dipakai dalam HTML

Di bawah ini adalah struktur dasar suatu file html,

<html>

<head>

<title>Sedang Belajar</title>

</head>

<body>

aku belajar html nih ..

</body>

</html>

Sebuah contoh sederhana dokumen HTML :

<HTML>

<HEAD>

<TITLE> Belajar HTML </TITLE>

</HEAD>

Letakkan text, images, dan link Anda di sini

</BODY>

</HTML>

II. 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 :

A. Headers:

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.

Contoh :

<H2>Belajar HTML</H2>

B. Paragraph Baru:

<P>

Digunakan untuk pindah alinea atau paragraf. Tag ini bisa diberi akhiran </P> tapi juga bisa tidak diberi.Mempunyai Attribute ALIGN berguna untuk mengatur perataan penulisan pada paragraf. Contoh :

<P ALIGN=RIGHT>All You can Learn !!</P>

Nilai ALIGN dapat diisi LEFT, RIGHT atau CENTER. Secara default apabila kita tidak menentukan perataan paragraf, maka penulisan akan secara otomatis menjadi rata kiri.

C. Line Break:

<BR>

Digunakan untuk pindah ke baris baru.

D. No Line Break:

<NOBR>

Bila digunakan tag ini maka teks yang panjang tidak secara otomatis pindah baris bawahnya bila baris pertama sudah terlalu panjang.

E. 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. 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 anehaneh,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" COLOR="#FF0000">Contoh teks yang berwarna merah</FONT>

Contoh lainnya :

F. Base Font:

Digunakan untuk mendefinisikan "default text". Attribut sama dengan attribut FONT. Tag FONT akan mengoverwrite setting pada BASEFONT.

Contoh :

G. MARQUEE

Marquee adalah suatu program HTML untuk membuat teks bisa bergerak atau berjalan

Marquee ini bisa di buat dengan menggunakan tag <marquee>...</marquee>

Atribut yang sering di gunakan adalah :

§ BGCOLOR="warna" Untuk mengatur warna background (latar belakang) teks

§ DIRECTION="left/right/up/down" Mengatur arah gerakan teks

§ BEHAVIOR="scroll/slide/alternate" Untuk mengatur perilaku gerakan

@ Scroll : teks bergerak berputar

@ Slide : teks bergerak sekali lalu berhenti

@ Alternate : teks bergerak dari kiri ke kanan lalu balik lagi (bolak-balik)

§ TITLE="pesan" Pesan akan muncul saat mouse berada di atas teks

§ SCROLLAMOUNT="angka" Mengatur kecepatan gerakan dalam pixel, semakin besar angka semakin cepat gerakannya.

§ SCROLLDELAY="angka" Untuk mengatur waktu tunda gerakan dalam mili detik

§ LOOP="angka" Mengatur jumlah loop

§ WIDTH="lebar" Mengatur lebar blok teks dalam pixel atau persen

§ HEIGHT="tinggi" Mengatur tinggi blok teks dalam pixel atau persen

Contoh penggunaan marquee

<MARQUEE align="center" direction="right" height="200" scrollamount="2" width="30%">

marquee dari kanan ke kiri

</MARQUEE>

Selain tag dan atribut di atas, masih terdapat lagi tag-tag yang berhubungan dengan pengaturan teks, yaitu :

TAG	KETERANGAN
<STRONG> isi tulisan </STRONG> Atau <B>isi tulisan</B>	Untuk menebalkan tulisan
<U>isi tulisan</U>	Membuat garis bawah tulisan
<I>isi tulisan</I>	Membuat tulisan miring
<big>isi tulisan</big>	Membuat tulisan menjadi sedikit lebih besar
<small>isi tulisan</small>	Membuat tulisan menjadi sedikit lebih kecil
<S>isi tulisan</S>	Membuat ~~garis mencoret~~ pada tulisan
<pre>isi tulisan</pre>	Membuat tulisan tetap pada keadaan yang kita inginkan,misalnya untuk urutan berjejer kebawah
<center>isi tulisan</center>	Membuat tulisan berada di tengah halaman
<blink>isi tulisan</blink>	Membuat tulisan tampak berkedip
<TT>isi tulisan</TT>	Menampilkan huruf seperti huruf mesin ketik
<SUP>isi tulisan</SUP>	Menampilkan superscript
<SUB>isi tulisan</SUB>	Menampilkan subscript

III. MENAMBAHKAN GAMBAR/IMAGE

Dokumen HTML akan menarik bila ditambah gambar. Format gambar yang dapat ditampilkan : GIF, JPEG, PCX, PNG, WMF, dll. Format gambar yang dikenal oleh hampir semua browser adalah GIF dan JPEG.

Untuk menambah gambar digunakan tag <IMG>.

Tag <IMG> mempunyai atribut :

ATRIBUT	KETERANGAN
SRC	Merujuk URL atau direktori file gambar
ALIGN	Posisi teks di sekitar gambar, nilainya adalah TOP, MIDDLE, BOTTOM, LEFT,RIGHT
WIDTH	Lebar gambar dalam pixel
HEIGHT	Tinggi gambar dalam pixel
ALT	Menampilkan teks pengganti gambar jika gambar tidak dapat ditampilkan.
HSPACE	Mengatur jarak kiri dan kanan gambar dengan objek lain
VSPACE	Mengatur jarak atas dan bawah gambar dengan objek lain
BORDER	Memberi efek bingkai pada gambar.Diisi dengan angka 1, 2, 3 dst

IV. MENGGUNAKAN LINK/TAG ANCHOR DAN ATRIBUTNYA

Link merupakan suatu gambar atau teks yang terkait dengan suatu alamat tertentu. Jika Link diklik maka dokumen HTML akan menuju ke alamat tersebut. Ditandai dengan Anchor, yaitu tag <A>.

Tag ini merupakan tag yang paling umum digunakan pada dokumen HTML. A adalah Singkatan dari Anchor yang dalam bahasa Indonesia berarti jangkar, tetapi akan lebih tepat jika diartikan sebagai tautan/link dikarenakan tag ini digunakan untuk saling menautkan antara satu dokumen HTML ke dokumen HTML yang lain.

Tag <A> mempunyai atribut, yaitu:

§ HREF

Atribut ini merupakan atribut yang wajib digunakan pada tag Anchor karena atribut ini digunakan untuk menentukan arah tautan yang dimaksud. Jika kita ingin menautkan ke halaman tujuan.html maka kita tinggal tulis HREF="tujuan.html". Begitu juga bila kita ingin menautkan ke halaman http://google.com maka kita tinggal menuliskan HREF="http://google.com".

<A HREF="http://tiksmadaska.blogspot.com">Tautan ini menuju halaman awal</A>

Jika tulisan tersebut di-klik maka akan mengarah ke halaman awal, http://tiksmadaska.blogspot.com.

Contoh lain dari penggunaan tag Anchor dapat digunakan untuk menautkan dua dokumen HTML yang telah dibuat. Jika kamu membuat dua dokumen HTML yang masing-masing bernama : klik.html dan belajar.html

Maka bila ingin memberikan tautan dari klik.html ke belajar.html kita dapat menuliskan tag sebagai berikut pada dokumen klik.html

<A HREF="belajar.html">Tautan ini menuju halaman belajar</A>

Catatan : dua dokumen tersebut harus ditempatkan pada direktori yang sama.

§ NAME

Atribut ini digunakan untuk memberikan nama dari suatu tautan. Atribut ini berbeda dengan atribut HREF yang akan mengubah warna teks menjadi biru dan teks tersebut akan memiliki garis bawah, atribut NAME tidak akan mengubah tampilan teks sama sekali dengan teks yang lain. Penggunaannya pun berbeda dengan atribut HREF yang digunakan untuk mengarahkan ke halaman lainnya, atribut NAME hanya berguna untuk memberikan nama dari suatu tautan. Penggunaannya adalah

<A href="#MATEMATIKA">MATEMATIKA</A>

akan menuju ke

<A name="MATEMATIKA">MATEMATIKA</A>

§ TARGET

TARGET adalah pilihan cara pembukaan suatu link dalam browser. Link tersebut akan dibuka di jendela baru atau di halaman yang sedang dibuka saat itu dapat di setting melalui atribut TARGET

Untuk membuat suatu link di buka di jendela baru kita dapat memasukkan"_blank" dalam atribut target.

Contoh :

Klik disini untuk membuka tiksmadaska.blogspot.com

</a>

Sedangkan untuk membuat suatu link dibuka di halaman yang sedang dilihat saat itu juga gunakan "_self"

Contoh :

Klik disini untuk membuka Tiksmadaska.blogspot.com

</a>

§ TITLE

<a href="http://tiksmadaska.blogspot.com" title="kembali ke halaman awal">Tautan ini menggunakan title

</a>

Atribut ini digunakan untuk memberikan keterangan tambahan dari sebuah tautan. Atribut ini akan menampilkan keterangan apabila mouse berada diatas tautan yang akan di-klik.

Contoh :

§ ACCESSKEY

Atribut ini digunakan untuk memberikan tombol shortcut dari sebuah tautan, jadi tautan yang menggunakan atribut ACCESSKEY ini dapat diakses dengan tombol shortcut

ALT +[ yang diinginkan]..

<A HREF="http://tiksmadaska.blogspot.com/ujian" ACCESSKEY="U"> Ujian Online

</A>

Contoh :

Untuk mengaksesnya kita bisa menekan tombol : ALT + U untuk mengakses ujian online

V. MEMBUAT TABEL

1. TAG < TABLE> DAN ATRIBUTNYA

Tag <TABLE> digunakan untuk membuat tabel pada dokumen HTML. Sebelumnya kita akan membahas tentang guna tabel itu sendiri. Tabel sangat berguna untuk membuat susunan halaman HTML kita menjadi lebih rapi. Dengan tabel kita dapat dengan leluasa menempatkan tulisan atau gambar dengan tatanan yang sangat teratur. Penggunaan tag ini selalui disertai dengan penggunaan tag <TR> dan <TD>. Tag <TR> untuk menyatakan baris dari tabel dan tag <TD> untuk menyatakan kolom dari tabel.

<tr>

<td>

Tabel ini memiliki dua kolom. Ini kolom pertama

</td>

<td>

Tabel ini memiliki dua kolom. Ini kolom kedua

</td>

</tr>

</table>

Contoh penulisan :

Hasilnya :

Atribut dari tag <Table>, antara lain :

§ BORDER

Atribut ini berguna untuk memberikan garis tepi pada tabel, semakin besar angka yang dimasukkan maka semakin tebal bordernya

§ CELLPADDING

Atribut untuk menentukan jarak antara isi sel dengan tepi kolom.

§ CELLSPACING

Atribut untuk menentukan jarak antar kolom

§ BGCOLOR

Atribut ini berguna untuk menentukan warna latar dari tabel

2. TAG <TR>

Tag ini merupakan kepanjangan dari Table Row yang berarti baris dari suatu tabel. Di dalam tag ini biasanya diisi dengan beberapa tag <TD..>, sehingga akan membentuk tabel yang memiliki beberapa baris dan beberapa kolom. Tag ini tidak dapat berdiri sendiri, penggunaannya selalu beriringan setelah tag <Table>.

Atribut dari tag <TR> antara lain:

§ ALIGN

Atribut ini digunakan untuk menentukan posisi dari isi tabel apakah rata kanan, tengah, atau rata kiri. Berbeda dengan atribut ALIGN pada tag <Table..> yang berguna untuk menentukan posisi dari tabel pada sebuah dokumen, atribut ini hanya akan menentukan posisi dari isi setiap sel yang berada di dalam sebuah tabel. Atribut ini dapat diatur menjadi LEFT, CENTER, RIGHT.

<td>

Belajar

</td>

<td>

HTML

</td>

</tr>

</table>

Hasilnya :

§ VALIGN

Atribut ini merupakan singkatan dari vertical align yang berarti perataan vertical dari isi suatu sel. Atribut ini dapat diatur menjadi TOP, MIDDLE, BOTTOM, atau BASELINE.

<td>

Belajar

</td>

<td>

HTML

</td>

</tr>

</table>

Hasilnya :

3. TAG <TD>

Tag <TD> kepanjanganya Table Data. Tag ini digunakan beriringan dengan tag <Table..> dan tag <TR..>. Tag ini berguna untuk membuat satu sel tabel. Tag ini tidak dapat berdiri sendiri.

Atribut dari tag <TD> antara lain:

§ ALIGN

Atribut ini berguna seperti layaknya atribut align pada tag <TR..> yang digunakan untuk menentukan posisi dari setiap isi sel, apakah ingin rata kiri, tengah, atau rata kanan. Bedanya penggunaan atribut ini pada tag <TD..> hanya akan mempengaruhi untuk satu isi sel saja, tidak seperti tag <TR..> yang dapat mempengaruhi satu baris dari tabel.

§ WIDTH

Atribut ini berguna untuk menentukan lebar dari tag <TD..>. Ukuran yang dapat digunakan adalah pixel dan persen.

§ BGCOLOR

Sama seperti atribut BGCOLOR pada tag <TABLE..> dan tag <TR..> atribut ini berguna untuk menentukan warna latar dari sel. Bedanya penggunaan atribut BGCOLOR pada tag <TD..> hanya akan mempengaruhi satu sel saja.

§ COLSPAN

Atribut ini digunakan untuk menggabungkan dua atau lebih sel dalam baris yang sama. Fungsinya sama seperti penggunaan 'Merge' dalam Microsoft Excel. Untuk lebih jelasnya lihat penggunaannya dalam beberapa contoh berikut ini :

<TR>

<TD>Belajar</TD>

</TR>

<TR>

<TD>Mudah</TD>

<TD>Menyenangkan</TD>

</TR>

</TABLE>

Hasilnya:

§ ROWSPAN

<TR>

<TD>Belajar</TD>

</TR>

<TR>

<TD>Mudah</TD>

<TD>Menyenangkan</TD>

</TR>

</TABLE>

Penggunaannya sama seperti COLSPAN hanya saja yang digabungkan adalah sel-sel dalam kolom yang sama. Untuk lebih jelas langsung saja melihat contoh-contoh berikut ini :

Hasilnya :

4. TAG <CAPTION>

Tag ini digunakan untuk mendefinisikan tulisan untuk judul tabel. Posisi default dari judul adalah pada bagian tengah atas dari tabel. Tag ini memiliki atribut align yang digunakan untuk mengatur posisinya. Nilai atribut align adalah “top” dan “bottom”

<CAPTION> MEMBUAT TABEL</CAPTION>

<TR>

<TD>Belajar</TD>

</TR>

<TR>

<TD>Mudah</TD>

<TD>Menyenangkan</TD>

</TR>

</TABLE>

Hasilnya :

5. TAG HEADER

Tag yang digunakan adalah <th> . . . </th>.

Tag ini digunakan untuk mendefinisikan sel header tabel. Secara default teks dalam sel ini akan ditebalkan dan ditampilkan di tengah

<CAPTION> DATA SISWA</CAPTION>

<TH>NAMA SISWA</TH>

<TR>

<TD>BEJO SUTIMBUL</TD>

</TR>

<TR>

<TD>UNTUNG SEJAHTERA</TD>

</TR>

</TABLE>

Hasilnya :

VI. LIST ITEM

List item merupakan salah satu tag HTML yang digunakan untuk membuat proses pengurutan secara otomatis. Dalam Ms. Office biasanya dikenal dengan istilah bulletdan numbering, tentunya Anda sudah tidak asing dengan istilah ini.

List item dalam HTML dituliskan sebagai berikut:

<li> teks </li>

Dua jenis list item yang sering digunakan dalam HTML adalah

@ Ordered List

@ Unordered List

1. ORDERED LIST

Tag ini mendaftarkan suatu barang secara berurutan. <OL> sendiri merupakan singkatan dari Ordered List yang berarti daftar yang berurut. Tag ini bekerja bersama dengan Tag <Li>. <OL..> mendefinisikan daftarnya sedangkan <Li> mendefinisikan setiap barang yang ada di daftar tersebut.

<OL>

<LI>Input Device

<LI>Process Device

<LI>Storage Device

<LI>Output Device

</OL>

Hasilnya :

Atribut dari tag <OL> antara lain:

§ TYPE

Ada banyak jenis pengurutan pada OL. Dengan atribut type kita dapat membuat urutan berdasarkan beberapa jenis urutan seperti dibawah ini.

<LI>Input Device</LI>

<LI>Process Device</LI>

<LI>Storage Device</LI>

<LI>Output Device</LI>

</OL>

Hasilnya :

§ START

Atribut ini digunakan untuk menentukan angka untuk memulai daftar yang akan kita buat. Coba perhatikan contoh berikut :

<LI>Persatuan Indonesia</LI>

<LI>Kerakyatan yang dipimpin oleh Hikmat Kebijaksanaan dalam Permusyawaratan Perwakilan</LI>

<LI>Keadilan Sosial bagi Seluruh Rakyat Indonesia</LI>

</OL>

Hasilnya :

2. UNORDERED LIST

Tag ini merupakan singkatan dari Unordered List, yang berarti daftar yang tidak terurut. Tag ini bekerja bersama dengan Tag <Li>. <UL..> mendefinisikan daftarnya sedangkan <Li> mendefinisikan setiap barang yang ada di daftar tersebut.

<UL>

<LI>Ilmu pengetahuan</LI>

<LI>Hiburan</LI>

<LI>Teman</LI>

<LI>Informasi menarik</LI>

</UL>

Hasilnya :

Atribut dari tag <UL> :

§ TYPE

Atribut ini digunakan untuk menentukan bentuk penanda pada setiap barang yang didaftar. TYPE dibagi menjadi 3, yaitu DISC (lingkaran berisi), CIRCLE (lingkaran kosong), dan SQUARE (persegi)

2. DEFINITION LIST

Tag ini digunakan untuk membuat daftar dari arti suatu kata. Cara kerjanya hampir sama dengan tag <UL> dan <OL>, tapi terdapat sedikit perbedaan akan tag <DL> ini dikarenakan tag ini akan menghasilkan tampilan yang tidak memiliki tanda pengurut daftar.

<DL>

<DT>Klik

<DD>Suatu aktifitas yang mengisyaratkan untuk memasuki suatu daerah pada layar komputer

<DT>Belajar

<DD>Proses dari tidak bisa menjadi bisa.

</DL>

Hasilnya :

Tag <DL> digunakan beriringan dengan tag <DT> dan <DD> untuk membuat daftar dari arti suatu kata tersebut. Tag <DL> hanya digunakan sebagai penanda bahwa suatu daftar tentang arti dari suatu kata sedang dibentuk.

Tag<DT> (Definition Term) digunakan untuk membentuk susunan yang menandakan bahwa kata yang ditulis setelah tag <DT> merupakan kata yang akan diartikan.

Tag<DD> (Definition Data) digunakan untuk membentuk susunan yang menandakan bahwa kata yang ditulis setelah tag <DD> merupakan arti dari kata yang tertulis pada tag <DT>.

Saatnya Yang Muda Berbicara

Minggu, 15 September 2013

Panduan Belajar Pemrograman HTML

Tidak ada komentar:

Posting Komentar

Blog Archive

Labels