Dasar-Dasar HTML ~ Information Technology For A Better Future

1. Pendahuluan

Salah satu fasilitas Internet yang banyak dimanfaatkan oleh para pengguna Internet adalah Web (sebutan singkat untuk World Wide Web = WWW). Untuk dapat membuat/mendisain halaman web (webpage) perlu mengetahui bahwa sebuah halaman web merupakan sebuah dokumen HTML (HTML : HyperText Markup Language). Hal tersebut ditandai dengan ciri bahwa sebuah file dokumen web akan selalu mempunyai extension .htm atau .html (untuk mesin ber-operating system UNIX).

Hypertext Markup Language (HTML) adalah bahasa standar dalam menulis halaman web, HTML merupakan pengembangan dari standar pemformatan dokumen teks. HTML sebenarnya adalah dokumen dalam bentuk ASCII atau teks biasa yang dapat diterjemahkan oleh browser web menjadi suatu halaman yang menarik.

2. Struktur Dokumen Html

Sesuai dengan namanya yaitu Hypertext Markup Language (HTML) maka dokumen HTML terdiri dari tanda-tanda (markup) untuk menandai perintah-perintahnya (yang selanjutnya akan kita sebut sebagai tag).

Tag HTML biasanya adalah tag-tag yang berpasangan dan ditandai dengan simbol < dan >, sedangkan ‘pasangan’ atau akhir perintah dari sebuah tag ditandai dengan tanda ‘/’, misalnya pasangan dari tag <tag> adalah </tag>.

Setiap dokumen HTML memiliki struktur sbb :

Listing latihan1.htm

untuk lebih jelasnya, anda buka editor NOTEPAD anda (Klik: Start à Program à Accesoris à NotePad ) lalu ketikkan baris perintah HTML diatas simpan dengan nama file latihan1.htm dan panggil melalui browser web anda.

Gambar 1. Tampilan Latihan 1

3. Heading

Tag yang pertama kali akan kita pelajari adalah tag heading, yang berfungsi untuk memformat Heading (Judul/sub judul) dalam sebuah dokumen. Ada 7 buah heading yang dikenal dalam HTML yaitu <H1> sampai <H7>. Untuk mengetahui ukuran tiap heading, anda dapat mencoba baris-baris berikut :

Listing Latihan2.htm

4. Paragraf

Untuk memformat paragraf kita bisa menggunakan tag <P>. Dengan tag ini kita bisa menentukan alignment (posisi) dari dokumen HTML. Untuk mengatur posisi tulisan kita menggunakan atribut ALIGN. Atribut ALIGN diikuti dengan posisi yang diinginkan.

Selain tag <P> ada pula tag <BR> untuk pindah baris, <HR> untuk membuat garis, <BLOCKQUOTE> untuk membuat kutipan, <PRE> untuk menampilkan text sama dengan yang anda ketikkan dalam dokumen HTML, misal anda mengetikkan :

Text Box: <HTML>
<HEAD>
<TITLE>TEST</TITLE>
</HEAD>
<BODY>
Hallo
Hallo
Hallo
</BODY>
</HTML>

Listing Latihan3.htm

Maka yang akan ditampilkan oleh browser adalah

HalloHalloHallo

Hal itu terjadi karena HTML tidak mengenali tombol Enter sehingga tombol tersebut diabaikan. Untuk mengatasi hal tersebut maka kita menggunakan tag <PRE> tersebut.

Text Box: <HTML>
<HEAD>
<TITLE>Latihan Menggunakan Paragraf</TITLE>
</HEAD>
<P ALIGN=”right”>
Tulisan ini rata kanan.
<P ALIGN=”center”>
Tulisan ini akan berada di tengah dokumen
<P ALIGN=”left”>
Tulisan ini rata kiri
<P align=”left”>
Hallo,<BR>Apakah anda sudah bisa HTML<BR>
Kalau sudah bisa, baguslah<BR>
<PRE>
<--------->
| u u |
| u |
| --- |
<--------->
</PRE>
</BODY>
</HTML>

Listing Latihan4.htm

Gambar 2. Tampilan Latihan 4

5. Font

Untuk mengatur jenis, ukuran, warna suatu font, kita bisa menggunakan tag <FONT>, tag <FONT> ini memiliki beberap atribut diantaranya FACE dan COLOR.

Atribut FACE digunakan untuk menentukan jenis font yang akan kita gunakan, semisal kita akan menggunakan jenis font Comic Sans MS, maka kita dapat menuliskan <FONT FACE=”Comic Sans MS”>. Sedangkan COLOR berfungsi untuk menentukan warna font, bisa dengan cara menyebutkan nama warna seperti red, green dan blue atau menggunakan nilai RGB (Red Green Blue) dari suatu warna, misalnya FF0000 untuk red, 00FF00 untuk green dan 0000FF untuk blue. Ada juga atribut SIZE untuk menentukan ukuran font

Text Box: <HTML>
<HEAD>
<TITLE>Latihan Font</TITLE>
</HEAD>
<BODY>
<FONT FACE=”Comic Sans MS” COLOR=”red” SIZ=1>
Ini Menggunakan Font Comic Sans,
warna merah dan ukurannya 1
</FONT><BR>
<FONT FACE=”Monotype Corsiva” COLOR=”blue” SIZE=3>
Ini menggunakan Font Monotype Corsiva,
warna biru dan ukurannya 3
</FONT>
</BODY>
</HTML>

Listing Latihan5.htm

Gambar 3. Contoh Latihan Font

6. Warna Dokumen

Suatu dokumen web akan terlihat lebih menarik jika diberi warna-warna atau gambar sebagai backgroundnya. Untuk itu, pada HTML tersedia atribut-atribut untuk mengatur hal tersebut, atribut tersebut diletakkan pada tag <BODY> sehingga efeknya akan dapat dilihat di seluruh dokumen. Atribut yang digunakan dalam tag <BODY> yaitu :

Atribut	Fungsi
BGCOLOR	Menentukan warna background suatu halaman web
BACKGROUND	Menentukan gambar/images yang akan dipasang sebagai background halaman web
TEXT	Menentukan warna teks normal
LINK	Menentukan warna teks yang berfungsi sebagai link
ALINK	Menentukan warna teks link ketika diklik
VLINK	Menentukan warna teks link ketika selesai diklik

Link

Dalam web, selalu ada yang dinamakan link, link berfungsi menghubungkan antara satu halaman dengan halaman lainnya. Untuk link ini HTML menyediakan tag <A> (Anchor). Tag <A> memiliki beberapa atribut mis : HREF untuk menghubungkan antara satu halam dengan halaman lainnya, dan NAME untuk memberikan nama pada suatu paragraf/tulisan dalam dokumen HTML, sehingga mempermudah navigasi dalam suatu halaman web.

<HTML>

<HEAD>

<TITLE>Latihan Link</TITLE>

</HEAD>

<BODY>

<A HREF=”latihan1.html”>Link ke latihan1.html</A>

</BODY>

</HTML>

7. List

Terkadang dalam website yang kita buat, kita ingin membuat sebuah daftar, misalnya saja kita membuat daftar barang inventaris sbb :

Meja
Kursi
Komputer

HTML menyediakan tag untuk membuat list seperti diatas. Jenis list dalam HTML dibagi menjadi :

Ordered List
Unordered List
Directory List
Menu List
Definition List

List yang paling sering dipakai adalah Ordered List dan Unordered List, untuk Directory List, Menu List dan Definition List jarang sekali dipakai.

Ordered List

Ordered list adalah daftar yang tiap bagiannya disertai dengan penomoran. Ordered list diawali dengan tag <OL> dan setiap item dalam list selalu diawali dengan <LI>. List yang memakai tag <OL> ini tidak harus 1,2,3,dst tetapi bisa saja a,b,c,dst, i,ii,iii,dst, tergantung pada atribut TYPE yang dituliskan dalam tag <OL>.

Tipe penomoran yang dimiliki oleh tag <OL> yaitu :

1 -> 1,2,3,…
A -> A,B,C,…
A -> a,b,c,…
I -> I,II,III,…
I -> i,ii,iii,…

Unordered List

Unordered list biasanya ditandai dengan pemakaian bullet untuk menandai setiap item dalam list. Unordered list diawali dengan tag <UL>. Sama seperti dalam Ordered list, pada Unordered list setiap item dalam list selalu diawali dengan <LI> dan juga memiliki beberapa type, yaitu :

TYPE = circle -> Tanda lingkaran
TYPE = disk -> Tanda cakram
TYPE = square -> Tanda kotak

<HTML>

<HEAD>

<TITLE>Latihan menggunakan List</TITLE>

<HEAD>

<BODY>

Dibawah ini menggunakan Ordered List

<LI>Apel

<LI>Mangga

<LI>Semangka

</OL>

Dibawah ini menggunakan Unordered List

<LI>Apel

<LI>Mangga

<LI>Semangka

</UL>

Dibawah ini menggunakan Ordered List mulai 10

<LI>Sepuluh

<LI>Sebelas

<LI>Duabelas

</OL>

</BODY>

</HTML>

Gambar 4. Contoh Penggunaan List

8. MENAMPILKAN GAMBAR

Suatu situs web yang bagus, biasanya menampilkan gambar-gambar untuk menarik pengunjung masuk kedalamnya, bayangkan saja jika situs tersebut hanya menampilkan tulisan saja, tentu amat membosankan. HTML menyediakan fasilitas untuk menampilkan gambar di halaman web kita menggunakan tag <IMG>.

Tag <IMG> memiliki bermacam atribut seperti SRC yang digunakan untuk menentukan lokasi gambar yang akan ditampilkan, ALT sebagai teks pengganti apabila ada browser yang tidak mendukung grafik, BORDER berfungsi untuk memberikan suatu border di sekeliling gambar, Height dan weight berfungsi untuk menentukan tinggi atau lebar suatu gambar dalam halaman web kita (dalam ukuran pixel), HSPACE dan VSPACE berfungsi menentukan jarak spasi dengan objek disekitar gambar secara horiontal maupun vertikal.

<HTML>

<HEAD>

<TITLE>Latihan Penggunaan IMG</TITLE>

</HEAD>

<BODY>

<A HREF="http://cnrc.dk3.com">CNRC – UNSRI Go to Cyber Campus</A>

adalah Organisasi mahasiswa tingkat universitas yang bergerak dibidang pendidikan dan pelatihan teknologi informasi.<BR>

</BODY>

</HTML>

9. TABEL

Untuk membuat tampilan website yang bagus, kebanyakan para desainer web menggunakan tabel untuk mempermudah pengerjaan mereka, coba saja lihat situs www.detik.com, www.kompas.com, www.astaga.com, dan masih banyak lagi situs yang menggunakan tabel untuk mempercantik website-nya.

Untuk membuat tabel, HTML menyediakan tag <TABLE>. Dalam tag <TABLE> terdapat banyak atribut, yaitu :

Atribut	Fungsi
BORDER	Menentukan ukuran border/garis tabel
WIDTH	Menentukan lebar tabel
HEIGHT	Menentukan tinggi tabel
BGCOLOR	Menentukan background tabel
BACKGROUND	Menentukan gambar yang digunakan untuk background tabel

Untuk membuat baris, setelah menuliskan tag <TABLE> maka digunakan tag <TR>. Sedangkan untuk membuat kolom digunakan tag <TD>. Sebagian besar atribut dalam tag <TABLE> dapat digunakan dalam tag <TR> maupun dalam tag <TD>.

Penggabungan baris/kolom

Untuk menggabungkan baris/kolom (merge) digunakan atribut COLSPAN dan ROWSPAN. COLSPAN digunakan untuk menggabungkan beberapa kolom menjadi 1 sedangkan ROWSPAN menggabungkan beberapa baris menjadi 1.

CELLPADING dan CELLSPACING

CELLPADING digunakan untuk mengatur spasi antara border dengan tulisan, sedangkan CELLSPACING digunakan untuk mengatur spasi antar dua buah sel.

<HEAD>

<TITLE>Contoh Penggunaan Tabel</TITLE>

</HEAD>

<BODY>

<TABLE BORDER="2" CELLSPACING="3"

CELLPADING="2" WIDTH="100%">

<TR>

<TD BGCOLOR="blue"

COLSPAN="2" ALIGN="center">Kelas</TD>

<TD BGCOLOR="red"

ALIGN="center" ROWSPAN="2">Ket</TD>

</TR>

<TR>

</TR>

<TR>

<TD>Lunas</TD>

</TR>

</TABLE>

</BODY>

</HTML>

Gambar 6. Contoh Penggunaan Tabel

1. Form

Untuk melakukan interaksi dengan user, biasanya suatu situs menggunakan form untuk menerima masukan/input dari user dan memproses hasil inputan tersebut di server.

Misalkan saja :

Gambar 7. Web dengan Form

Dalam gambar diatas dapat dilihat untuk nama, kita menggunakan tipe textbox, password menggunakan tipe password, untuk jenis kelamin menggunakan radio button dan untuk hobi menggunakan checkbox. Untuk mengatur tipe form, menggunakan atribut TYPE, struktur form dapat dibuat sbb :

</FORM>

Untuk membuat form seperti pada gambar.7 dalam HTML dapat ditulis :

<HTML>

<HEAD>

<TITLE> Penggunaan Form </TITLE>

</HEAD>

<BODY>

Nama :

Password :

Jenis Kelamin <BR>

<INPUT TYPE="Radio"

NAME="kelamin" VALUE="pria">Pria

<INPUT TYPE="Radio"

NAME="kelamin" VALUE="wanita">Wanita<BR>

Hobi : <BR>

<INPUT TYPE="Checkbox"

NAME="hobi" VALUE="tidur">Tidur<BR>

<INPUT TYPE="Checkbox"

NAME="hobi" VALUE="bersepeda">Bersepeda</BR>

<INPUT TYPE="Checkbox"

NAME="hobi" VALUE="lain">Lainnya</BR>

</BODY>

</HTML>

Atribut-atribut diatas dapat dijelaskan sbb :

Atribut	Fungsi
METHOD	Metode pengiriman data ke file tujuan. Ada 2 yaitu POST dan GET
ACTION	Aksi yang akan dilakukan jika user menekan tombol Submit
NAME	Memberikan nama tiap input
VALUE	Memberikan nilai suatu input
TYPE	Tipe form yang akan kita gunakan.

Setiap form harus memiliki minimal tombol Submit atau tombol reset. Tombol Submit berfungsi ketika user telah mengisi form yang telah disediakan dan ingin mengirimkan ke server, maka user dapat menekan tombol submit. Sedangkan tombol reset berfungsi jika user ingin mengosongkan kembali form. Untuk membuat tombol submit, pada TYPE kita tuliskan “Submit” dan untuk membuat tombol reset, kita menuliskan “Reset”.

2. Frame

Frame HTML dapat digunakan untuk membuat tampilan halaman HTML yang terbagi dalam beberapa bagian, dan setiap bagian adalah 1 halaman web. Biasanya frame digunakan jika salah satu bagian dalam halaman web tetap dan halaman yang lainnya berubah (mis : Menu) sehingga dapat mempercepat proses, karena hanya satu bagian saja yang diload dari server.

Untuk membuat frame, digunakan tag <FRAMESET> … </FRAMESET> dalam tag ini terdapat tag <FRAME> yang menentukan isi dari frame yang ditentukan dalam tag <FRAMESET>, struktur dari tag ini adalah :

…

</FRAMESET>

pada tag <FRAMESET> terdapat atribut COLS atau ROWS, atribut COLS jika kita ingin membuat frame yang terbagi dalam kolom-kolom, sedangkan atribut ROWS digunakan jika kita ingin membuat frame yang terbagi dalam beberapa baris.

Gambar 8. Frame

Dalam tag <FRAME> terdapat atribut SRC yang menunjukkan lokasi/nama file yang digunakan dalam frame tersebut, sedangkan atribut NAME berfungsi sebagai identifikasi frame tersebut.

A. Membuat Homepage pribadi

Pada pelatihan kali ini kita akan membuat homepage dengan HTML, ikuti langkah-langkah berukit

a. Membuat halaman utama (index.htm)

Ketiklah kode HTML ini dengan menggunakan NotePad dan simpan dengan nama file index.htm di Folder baru (misalnya nama anda) di MyDocument ( C:\MyDocument\nama_anda\ )

<html>

<head>

<title>Welcome to My Home Page</title>

</head>

<img src="homejump.gif" > Welcome to Apeng Home Page

<a href="biodata.htm">[Biodata]

<a href="link.htm"> [Links Situs Favorit]</a>

<a href="mailto:apeng@cnrc-unsri.8m.net">[Email]</a>

</p>

<marquee style="color: yellow">Assalamualaikum wr.wb</marquee></p>

<font size="4" color="white">Selamat datang di home page pribadi saya. Saya berharap melalui home page ini anda bisa

mengenal saya dan kita bisa saling berkenalan. Saya dapat dihubungi melalui

email, telepon atau lewat surat biasa. </font></p>

<p><font size="4" color="yellow">Sekarang saya kuliah di

Universitas Sriwijaya . Hoby saya banyak namun kegemaran yang paling

saya sukai adalah surfing , saya juga hoby membaca

terutama majalah Annida dan novel-novel Islami. </font></p>

<p><font size="4" color="yellow"> Moto hidup

yang selalu saya ingat adalah kerjakan apa yang bisa dikerjakan sekarang, jangan

menunda pekerjaan.</font></p>

<p align="justify"><font size="4" color="yellow">Wassalam</font></p>

<hr>

2001</font></p>

</body>

</html>

b. Membuat halaman biodata.htm

Buatlah satu halaman lagi untuk biodata

<html>

<head>

<title>Biodata</title>

</head>

<font size="6" color="blue">My Biodata</font>

<a href="biodata.htm">[Biodata]

<a href="link.htm"> [Links Situs Favorit]</a>

<a href="mailto:apeng@cnrc-unsri.8m.net">[Email]</a>

</p>

<ul>

<li>Nama : Joko Sitorus</li>

<li>Nama Panggilan : Joko</li>

<li>Tempat tanggal lahir : Palembang, 18 Juni 1980</li>

<li>Umur : 21 tahun </li>

<li>Agama : Islam </li>

<li>Alamat : Jl. Dwikora Palembang </li>

<li>Email : <a href="mailto:ketua@cnrc-unsri.8m.net">ketua@cnrc-unsri.8m.net</a> </li>

<li>Homepage : <a href="http://www.apeng.scriptmania.com"> http://www.apeng.scriptmania.com</a> </li>

<li>Pendidikan

<ul>

<li>SD Negeri 252</li>

<li>SMP Negeri 3 Palembang </li>

<li>SMU Negeri 3 Palembang </li>

<li>Fakultas Teknik Jurusan Elektro UNSRI </li>

</ul>

</li>

<li>Pengalaman organisasi

<ul>

<li>Rohis </li>

<li>KAMMI</li>

</ul>

</li>

<hr>

2001

</body>

</html>

c. Membuat halaman link.htm

<html>

<head>

<title>Links Favorite</title>

</head>

My Link Favorite</font>

<a href="biodata.htm"> [ Biodata ] </a>

<a href="link.htm">[ Links Situs Favorit ]</a>

<a href="mailto:apeng@cnrc-unsri.8m.net">[ Email ] </a>

</font></p>

<p align="left"><font size="2" >Ini adalah link situs yang sering saya kunjungi :</p>

<ul>

<li><a href="http://mail.telkom.net">Telkom Mail </a> </li>

<li><a href="http://www.unsri.ac.id">Universitas Sriwijaya</a> </li>

<li><a href="http://www.palembang.linux.or.id">KPLI palembang</a> </li>

<li><a href="http://www.google.com">Search Enggine Google</a> </li>

<li><a href="http://www.cnrc-unsri.8m.net">CNRC UNSRI</a></li>

<li><a href="http://www.republika.co.id">Harian Umum Republika</a> </li>

<li><a href="http://www.ukhuwah.or.id">Ukhuwah.or.id</a> </li>

</ul>

<hr>

2001</p>

</body>

</html>

jadi sekarang anda telah membuat homepage pribadi dengan halaman.

Information Technology For A Better Future

Dasar-Dasar HTML

0 komentar:

Posting Komentar

Game Development

Android Technology

Masa Depan Teknologi Informasi

Arsip Blog

Mikrocontroller

Live Traffic

Visitor My blog

kode rahasia andoid

software development

Statistik

halaman