Dasar - Dasar HTML (Bagian Pertama)
Kali ini kita membahas dasar-dasar HTML, ingat ya kali bukanlah bahasa pemrograman dia seperti frameatau istilahnya kanvas dalam lukisan, untuk menaruh program, seperti php, atau asp.
HTML atau Hyper Text Markup Language bertugas membangun sebuah halaman website, untuk menandai teks menentukan format atau style.
Secara lengkap file HTML mempunyai kepala dan badan, begini struktur lengkapnya.
<HTML>
<HEAD>
<!---------------------------->
</HEAD>
<BODY>
<!---------------------------->
</BODY>
</HTML>
Bagian kepala atau Head, umumnya berisi informasi dokumen, misalnya judul dokumen, versi HTML, penggunaan script dan lain-lain
Sedangkan bagian Tubuh atau Body, banyak berisi tentang layout atau desain halaman Web.
Untuk membuat halaman web, gunakan teks editor seperti notepad, coba tuliskan kode dibawah ini
<HEAD>
<TITLE> Tes HTML </TITLE>
<BODY>
Halaman Web Sederhana
</BODY>
</HTML>
Pilih save as kemudian pilih All Files, pilih save as kemudian pilih All Files, simpan dengan Tes.htm.
Coba jalankan pada browser anda, jika nampak tulisan Halaman Web Sederhana berarti anda sudah berhasil.
Bagian <HEAD>
Bagian Head, biasanya bagian yang tersembunyi, bagian ini tidak terlihat pada saat anda membukanya di browser anda.
Tugas Head sendiri antara lain, tempat menaruh judul web, menaruh script seperti javascript atau vbscript, masih banyak lagi.
Tugas Head sendiri antara lain, tempat menaruh judul web, menaruh script seperti javascript atau vbscript, masih banyak lagi.
Elemen-elemen yang umumnya terfapat pada bagian HEAD adalah :
Tag <TITLE>
Tag <BASE>
Tag <LINK
Tag <META>
Tag <TITLE>
Tag <TITLE> ini untuk memberi judul web, format penggunaaannya sebagai berikut :
<TITLE>Judul</TITLE>
Tag <BASE>
Tag <BASE> berfungsi untuk basis sebuah URL atau alamat web tertentu, contoh :
<BASE Href=http://www.alamat.com/direktori
Tag <LINK>
Tag <LINK> digunakan sebagai relasi antar halaman, atau antar dokumen. Tag ini dilengkapi bebrapa atribut yang memiliki spesifikasi fungsi masing-masing.
| Atribut | Fungsi |
| HREF | Menunjuk pada URL Dokumen atau Halaman lain |
| REL | Mendefinisikan relasi terhadap dokumen dan dokumen lain yang memberi informasi yang berguna |
| REV | Mendefinisikan relasi sebuah dokumen HTML dengan dokumen lain |
| TYPE | Menentukan tipe dan parameter dari relasi |
Formatnya sebagai berikut :
<LINK [{REVIREL}=”TEKS”]HREF=”URL”>
Untuk contoh penggunaan bisa dilihat seperti dibawah ini:
<LINK REV=”Irvan” HREF=mailto:nama@alamat.com>
<LINK REV=”index” HREF=”index.htm”>
Tag <META>
Tag <META> digunakan untuk mendefiniskan informasi-informasi di luar HTML.
Informasi META dapat digunakan oleh browser untuk menjalankan suatu aktivitas yang belum didukung oleh HTML.
Informasi META dapat digunakan oleh browser untuk menjalankan suatu aktivitas yang belum didukung oleh HTML.
Tag <META> mempunyai atribut-atribut sebagai berikut :
| Atribut | Fungsi |
| HTTP-EQUIV | Mndefiniskan properti dari elemen |
| NAME | Menyediakan deskripsi tambahan dari elemen |
| URL | Mendefiniskan target dokumen dari sebuah properti |
| CONTENT | Menyediakan nilai respon dari properti |
Contoh penggunaan Tag <META>
<META HTTP-EQUIV=refresh” CONTENT=”60” URL=www.alamat.com>
<HTML>
<HEAD>
<meta charset="UTF-8">
<meta name="description" content="Tutorial Dasar">
<meta name="keywords" content="HTML, PHP, Visual Basic">
<meta name="penulis" content="Ferry Murago">
</HEAD>
Bagian BODY
Bagian body merupakan isi dari dokumen HTML. Semua informasi yang akan ditampilkan, sepeerti gambar, teks dan lain-lain.
Struktur Body adalah sebagai berikut
<BODY>
………………
</BODY>
Tag <BODY> memiliki atribut-atribut digunakan dalam mengatur tampilan web, berikut ini atribut-atribut tersebut
Untuk lebih memahamai penggunaan tag body, buat sebuah file HTML, seperti contoh dibawah ini:
<HTML>
<HEAD>
<TITLE> Contoh Penggunaan Body </TITLE>
VLINK=#FF0000 LINK=”GREEN”>
Ini adalah contoh penggunaan body <BR>
Ini adalah sebuah <A HREF=””>Link</A>
</BODY>
</HTML>
Simpan file tersebut dengan nama body.htm. Coba anda jalankan dengan browser anda.
Memberi Komentar
<!--- Komentar --- >
Contoh penggunaan dalam kode HTML.
<HTML>
<HEAD>
<!—ini adalah bagian head --->
</HEAD>
<BODY BGCOLOR=#FF0000>
<!—Warna latar belakang dokumen adalah merah -- >
</BODY>
</HTML>
Format Dokumen HTML
Dalam HTML terdapat tag-tag digunakan untuk menformat dokumen. Tag-tag tersebut diantaranya adalah:
Tag <BR> :
Tag ini digunakan untuk membuat baris baru, setara dengan tombol enter
Tag <P>
Tag ini digunakan untuk memulai paragraf baru dan memishakan tiap paragraf agar tidak terlihat tumpang tindih
Tag <HR>
Tag ini digunakan membuat garis horizontal, tag <HR> mempunyai atribut –atribut sebagai berikut :
Tag <HN>
Tag ini digunakan sebagai heading sebuah dokumen, untuk mengatur besar kecil huruf heading
Tag <PRE>
Tag ini digunakan membuat tampilan tulisan dokumen mirip seperti tulisan di teks editor. Tag ini mempunyai struktur sebagai berikut
<BODY
<PRE>
TEKS TEKS TEKS TEKS TEKS
</BODY>
Tag <CENTER>
<BODY>
<CENTER>
TEKS TEKS TEKS TEKS TEKS
</CENTER>
</BODY>
<META HTTP-EQUIV=refresh” CONTENT=”60” URL=www.alamat.com>
Perintah diatas diterjemahkan oleh browser sebagai “Tunggu60 detik, kemudian panggil dokumen baru pada www.alamat.com ”.
Jika atribut URL tidak disertakan, maka halaman itu sendiri yang akan dipanggil, jadi setara dengan mengklik tombol refresh/reload pada browser.
Jika atribut URL tidak disertakan, maka halaman itu sendiri yang akan dipanggil, jadi setara dengan mengklik tombol refresh/reload pada browser.
Penggunaaan elemen <META> yang paling populer adalah penggunaaan properti Keyword dan Description.
Kedua properti ini sangat berguna untuk mmbantu kerja search engine.
Biasanya search engine akan menggunakan teks yang disebutkan pada properti Keyword untuk mengindeks dokumen,
dan menggunakan teks yang yang terdapat pada properti Description untuk mendeskripsikan indeks tersebut. Contoh:
Kedua properti ini sangat berguna untuk mmbantu kerja search engine.
Biasanya search engine akan menggunakan teks yang disebutkan pada properti Keyword untuk mengindeks dokumen,
dan menggunakan teks yang yang terdapat pada properti Description untuk mendeskripsikan indeks tersebut. Contoh:
<HEAD>
<meta charset="UTF-8">
<meta name="description" content="Tutorial Dasar">
<meta name="keywords" content="HTML, PHP, Visual Basic">
<meta name="penulis" content="Ferry Murago">
</HEAD>
Bagian BODY
Bagian body merupakan isi dari dokumen HTML. Semua informasi yang akan ditampilkan, sepeerti gambar, teks dan lain-lain.
Struktur Body adalah sebagai berikut
<BODY>
………………
</BODY>
Tag <BODY> memiliki atribut-atribut digunakan dalam mengatur tampilan web, berikut ini atribut-atribut tersebut
| Atribut | Fungsi |
| ALINK | Menentukan warna dari link aktif |
| BACKGROUND | Merujuk pada URL atau direktori dari file gambar yang digunakan sebagai latar belakang |
| BGCOLOR | Menentukan warna latar belakan dokumen |
| BGPROPERTIES | Jika nilai atribut ini diisi “FIXED”, maka gambar latar belakang tidak ikut tergulung. |
| LEFTMARGIN | Menetukan batas kiri dokumen dalam pixel |
| LINK | Menentukan warna dari link yang belum dikunjungi |
| TEXT | Menentukan warna teks |
| TOP MARGIN | Menentukan batas atas dokumen dalam pixel |
| VLINK | Menentukan warna link yang sudah dikunjungi |
Untuk lebih memahamai penggunaan tag body, buat sebuah file HTML, seperti contoh dibawah ini:
<HTML>
<HEAD>
<TITLE> Contoh Penggunaan Body </TITLE>
VLINK=#FF0000 LINK=”GREEN”>
Ini adalah contoh penggunaan body <BR>
Ini adalah sebuah <A HREF=””>Link</A>
</BODY>
</HTML>
Simpan file tersebut dengan nama body.htm. Coba anda jalankan dengan browser anda.
Memberi Komentar
Untuk mempermudah apa maksud kode-kode HTML, biasanya ditambahkan komentar.
Agar komentar tidak ikut terbaca biasanya digunakan tanda khusus,contoh formatnya sebagai berikut :
Agar komentar tidak ikut terbaca biasanya digunakan tanda khusus,contoh formatnya sebagai berikut :
<!--- Komentar --- >
Contoh penggunaan dalam kode HTML.
<HTML>
<HEAD>
<!—ini adalah bagian head --->
</HEAD>
<BODY BGCOLOR=#FF0000>
<!—Warna latar belakang dokumen adalah merah -- >
</BODY>
</HTML>
Format Dokumen HTML
Dalam HTML terdapat tag-tag digunakan untuk menformat dokumen. Tag-tag tersebut diantaranya adalah:
Tag <BR> :
Tag ini digunakan untuk membuat baris baru, setara dengan tombol enter
Tag <P>
Tag ini digunakan untuk memulai paragraf baru dan memishakan tiap paragraf agar tidak terlihat tumpang tindih
Tag <HR>
Tag ini digunakan membuat garis horizontal, tag <HR> mempunyai atribut –atribut sebagai berikut :
| Atribut | Fungsi |
| ALIGN | Merupakan posisi vertikas garis pemisah. Nilainya adalah LEFT, RIGHT, dan CENTER |
| WIDTH | Lebar dari garis batas. Nilai yang dimasukan dapat berupa pixel maupun persen dari jendela browser |
| SIZE | Menentukan tebal garis |
| NOSHADE | Menonaktifkan efek 3 dimensi |
| COLOR | Menetukan warna garis |
Tag <HN>
Tag ini digunakan sebagai heading sebuah dokumen, untuk mengatur besar kecil huruf heading
Tag <PRE>
Tag ini digunakan membuat tampilan tulisan dokumen mirip seperti tulisan di teks editor. Tag ini mempunyai struktur sebagai berikut
<BODY
<PRE>
TEKS TEKS TEKS TEKS TEKS
</BODY>
Tag <CENTER>
Tag ini digunakan untuk menampilkan posisi teks rata tengah, berikut strukturnya di HTML
<CENTER>
TEKS TEKS TEKS TEKS TEKS
</CENTER>
</BODY>
Tag <Blockquote>
Tag ini digunakan untuk menandai bagian yang dikhususkan pada sebuah dokumen, misalnya kutipan dari kitab suci atau kata-kata mutiara. Biasanya tag yang diberi tag akan lebih menjorok ke dalam.
<HTML>
<HEAD>
<TITLE> Penggunaan Blockquote </TITLE>
</HEAD>
<BODY>
<PRE>
Penggunaaan elemen <META> yang paling populer adalah :
<BLOCKQUOTE>Penggunaaan properti Keyword dan Description. Kedua properti ini sangat berguna untuk mmbantu kerja search engine. Biasanya search engine akan menggunakan teks yang disebutkan pada properti Keyword untuk mengindeks dokumen, dan menggunakan teks yang yang terdapat pada properti Description untuk mendeskripsikan indeks tersebut
<BLOCKQUOTE>
</BODY>
</HTML>
Coba jalankan dengan browser anda, jika tulisan anda seperti bentuk format dibawah ini:
Penggunaaan elemen <META> yang paling populer adalah :
Penggunaaan properti Keyword dan Description. Kedua properti ini sangat berguna untuk mmbantu kerja search engine. Biasanya search engine akan menggunakan teks yang disebutkan pada properti Keyword untuk engindeks dokumen, dan menggunakan teks yang yang terdapat pada properti Description untuk mendeskripsikan indeks tersebut
Selamat anda sudah bisa menggunakan properti tag <BLOCKQUOTE>.
Tag <FONT>
Tag ini digunakan untuk mengatur jenis, ukuran dan warna dari huruf. Penggunaan dari tag ini adalah sebagai berikut :
<FONT [FACE=”NamaFont”] [COLOR=Warna] [SIZE=Ukuran]>
NamaFont anda bisa memilih jenis font yang menjadi standar di Microsoft Words,
penggunaan atribut tanda kutip boleh dihilangkan asal jangan namafont tidak mengandung spasi.
Ukuran font bernilai 1 sampai dengan 7. Untuk penggunaan warna anda bisa lihat di Tabel 16 Warna Standar yang juga ada di blog ini.
penggunaan atribut tanda kutip boleh dihilangkan asal jangan namafont tidak mengandung spasi.
Ukuran font bernilai 1 sampai dengan 7. Untuk penggunaan warna anda bisa lihat di Tabel 16 Warna Standar yang juga ada di blog ini.
Contoh :
<HTML
<HEAD>
<TITLE> Penggunaaan Tag <FONT> </TITLE>
</HEAD>
<BODY>
<PRE>
<FONT FACE=Arial SIZE=1 COLOR=#FF0080>Arial </FONT>
<FONT FACE=”Monotype Corsiva” SIZE=3 COLOR=Red>Ini Contoh Huruf Monotype Corsiva</FONT>
<FONT FACE=”Times New Roman” SIZE=7 COLOR=Blue>Ini Contoh Huruf Times New Roman</FONT>
</BODY>
</HTML>
Jika contoh dijalankan dibrowser hasilnya akan seperti ini:
Arial
Ini Contoh Huruf Monotype Corsiva
Ini Contoh Huruf Times New Roman
Tag <IMG> atau Tag Gambar
Tag ini digunakan menambahkan gambar ke dalam HTML, dengan format gambar seperti : GIF, JPEG, PCX, PNG dan WMF.
Contoh format memasukan gambar ke HTML adalah sebagai berikut :
Contoh format memasukan gambar ke HTML adalah sebagai berikut :
<HTML>
<HEAD>
<TITLE> Menambahkan Gambar </TITLE>
<BODY>
<IMG SRC=”Path Gambar” ALT=”NamaGambar”>
</BODY>
</HEAD>
</HTML>
Menggunakan Link
Atribut Link merupakan sebuah penanda atau peloncat untuk berpindah ke sebuah alamat atau gambar antar halaman bisa juga hanya untuk berpindah ke bagian halaman tersebut.
Tag yang digunakan atribut Link ini adalah tag <A>. Tag <A> ini mempunyai atribut HREF dan Name. Contoh penggunaan Link di halaman web.
Tag yang digunakan atribut Link ini adalah tag <A>. Tag <A> ini mempunyai atribut HREF dan Name. Contoh penggunaan Link di halaman web.
<HTML>
<HEAD>
<TITLE> Ini Contoh Menggunakan Link </TITLE>
<BODY
<A HREF=”http://www.yahoo.com”> Klik Disini </A> atau Klik Gambar berikut <A HREF=”http://www.yahoo.com” ><IMG SRC=”C:\WINDOWS\Gambar.jpeg” ALT=http://www.yahoo.com></A>
<BR> <BR>
<A HREF=”Tengah Halaman”>Klik Disini untuk berpindah ke tengah Halaman</A>
<BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR><BR> <BR> <BR> <BR>
<BR> <BR>
<A Name=”Tengah Halaman”> Ini loh bagian tengah halaman </A>
</BODY>
</HTML>
</HEAD>
Menggunakan TABEL
Dokumen tabel terkadang tidak hanya berbentuk teks saja, kadang berhubungan juga dengan database.
Kegunaan tabel pada umumnya untuk menampilkan data. Tabel mempunyai beberapa atribut tag, berikut tag-tag tersebut:
Kegunaan tabel pada umumnya untuk menampilkan data. Tabel mempunyai beberapa atribut tag, berikut tag-tag tersebut:
- Tag <TABLE>
- Tag <TR>
- Tag <TH>
- Tag <TD>
