Dasar-Dasar HTML

Apa sih HTML itu?

Pada masa sekarang ini HTML merupakan interface standard Internet. Halaman-halaman HTML ini bisa mengandung animasi, suara, video, bahkan sampai program interaktif yang kompleks. Jataan halaman HTML setiap hari diakses dari WEB server – WEB server di seluruh dunia.

Sudah menjadi trend memang sekarang ini perusahaan-perusahaan melakukan pertukaran informasi bisnis dan informasi intern pegawai dan pelanggan-pelanggan mereka. HTML sekarang menjadi pilihan untuk presentasi. Bahkan Microsoft sendiri telah mengintegrasikan HTML ke system operasi Windows-nya. Pendeknya HTML terdapat di mana-mana.

Pengertian HTML

HTML adalah bahasa markup yang umum digunakan. Kepopuleran HTML disebakan karena HTML ini mudah digunakan. Pembuatan dokument WEB dengan HTML dapat dilakukan dengan mudah dan cepat. Dokumen WEB dapat tersaji dengan cepat ke banyak pembaca di seluruh dunia sekaligus. HTML mudah melakukan kontrol terhadap tampilan halaman WEB baik berupa teks, gambar, suara, animasi maupun video.

HTML merupakan singkatan dari Hypertex Markup Language. HTML digunakan untuk membangun halaman WEB. Sekalipun banyak orang menyebutnya sebagai bahasa pemrograman, HTML sebenarnya sama sekali bukan bahasa pemrograman, hal ini terlihat dari namanya, HTML adalah suatu bahasa Markup. HTML digunakan untuk melakukan mark-up (penandaan) terhadap sebuah dokumen teks. Tanda tersebut digunakan untukmenentukan format atau style dari teks yang ditandai

halaman web dibangun oleh kode-kode HTML yang disebut juga dengan tag-tag HTML
Tag yang harus di miliki oleh halaman WEB adalah:

<HTML>
<HEAD>
<TITLE>Halaman WEB pertama saya</TITLE>
</HEAD>
<BODY>
Halo Dunia!
</BODY>
</HTML>

Di antara kedua tag tadi adalah tempat memasukkan apa saja ke dalam halaman web.
Pada bagian HEAD, kita memberikan data mengenai dokumen kita. Tag penutup selalu ada pada halaman tersebut.

Paragraph/Baris Baru:
 

Contoh:

<HTML>
<HEAD>
<TITLE>Halaman WEB pertama saya</TITLE>
</HEAD>
<BODY>
Halo Dunia!
Halo semuanya 
Ini adalah halaman WEB saya. 
Saya sedang belajar membuat halaman WEB dengan kode HTML
Salam!
</BODY>
</HTML>

Hyperlink
Hyperlynk dapat dipergunakan untuk mengkaitkan dokumen HTML ke dokumen HTML pada URL (situs) yang berbeda, mengkaitkan antar dokumen HTML pada URL yang sama atau pengkaitan penunjukan tempat pada URL, dokumen HTML yang sama.

1. Mengkaitkan Halaman WEB pada URL yang Berbeda
contoh:
<HTML>
<HEAD>
<TITLE>Utama</TITLE>
</HEAD>
<BODY>
Halo Dunia!
Halo semuanya 
Ini adalah halaman WEB saya. 
<A hreff=”http://www.xbasicpro.com/pribadi.htm”>Klik di sini</a>untuk melihat data pribadi saya.
</BODY>
</HTML>

simpan dokumen di atas dengan nama utama.htm kemudian buatlah file lain dengan nama pribadi.htm, lalu ketik kode-kode HTML di bawah ini:

<HTML>
<HEAD>
<TITLE>Data Pribadi</TITLE>
</HEAD>
<BODY>
Nama: Hartoto 
Alamat: Jl. Denai gg. Muslimin 35 Medan 
Pekerjaan: WEB Developer 
<A hreff=”utama.htm”>klik di sini</a>untuk kembali
<A hreff=”pribadi.htm”>Klik di sini</a>untuk melihat data probadi saya.
</BODY>
</HTML>

2. Mengkaitkan Halaman WEB pada URL yang sama dan Dokumen yang Berbeda
contoh:

<HTML>
<HEAD>
<TITLE>Utama</TITLE>
</HEAD>
<BODY>
Halo Dunia!
Halo semuanya 
Ini adalah halaman WEB saya. 
<A hreff=”pribadi.htm”>Klik di sini</a>untuk melihat data pribadi saya.
</BODY>
</HTML>

simpan dokumen di atas dengan nama utama.htm kemudian buatlah file lain dengan nama pribadi.htm, lalu ketik kode-kode HTML di bawah ini:

<HTML>
<HEAD>
<TITLE>Data Pribadi</TITLE>
</HEAD>
<BODY>
Nama: Hartoto 
Alamat: Jl. Denai gg. Muslimin 35 Medan 
Pekerjaan: WEB Developer 
<A hreff=”utama.htm”>klik di sini</a>untuk kembali
<A hreff=”pribadi.htm”>Klik di sini</a>untuk melihat data probadi saya.
</BODY>
</HTML>

simpan dengan nama pribadi.htm

3. Mengkaitkan Halaman WEB pada URL yang sama dan Dokumen yang Sama
contoh:

<HTML>
<HEAD>
<TITLE>Utama</TITLE>
</HEAD>
<BODY>
Halo Dunia!
Halo semuanya 
Ini adalah halaman WEB saya. 
<A href="http://xbasicpro.com/latihan.htm#bab1">klik di sini </A> untuk mulai ke BAB I 
Kode HTML adalah kode-kode pembagun halaman web 
Kode tersebut biasanya dibentuk dalam file teks biasa 
Membuat kode-kode HTML dapat dilakukan dengan teks editor biasa seperti notepad 
Ada juga software khusus yang dirancang untuk memudahkan membangun kode-kode HTML seperti Microsoft FrontPage, Macromedia DreamWeaver lain-lain 

Aplikasi pengolah kata Microsoft Word 
juga dapat dipergunakan untuk 
membuat dokument HTML. 
Coba Lihat fasilitas Save AS WEB Page... 

Halaman WEB yang dibentuk oleh kode-kode HTML 
dapat menampilkan Teks, Gambar, animasi, Video, Suara 

Dengan WEB pertukaran informasi menjadi lebih cepat 

<A name=bab1>BAB I. HTML Sebagai Pembentuk Halaman WEB</A>

</BODY>
</HTML>

Font
Speksifikasi dari Huruf (Font) :  tag ini menerangkan bahwa sebuah tulisan mempunyai beberapa pelengkap.
Pelengkapnya adalah: Ukuran (SIZE), FACE, dan Warna (COLOR)

Ukuran (SIZE): Menerangkan ukuran dari tulisan antara angka 1-7, tergantung kepada . angka 1 adalah yang terkecil dan angka 7 adalah yang terbesar.

FACE: Menerangkan huruf aktual yang Anda mau tampilkan jika huruf ini terinstal pada komputer pengguna. Anda diperbolehkan mempunyai 3 pilihan huruf, dengan dibatasi oleh koma. Semua batasan (spaces) pada nama huruf harus diganti dengan "garis bawah" ( _ ). Huruf yang Anda pilih harus ada pada komputer si pengunjung. Jika tidak, maka komputer akan lanjut ke pilihan huruf yang kedua (jika ada). Jika tidak ada huruf yang ditemukan, maka huruf yang menjadi default yang akan ditampilkan oleh komputer. Untuk menjamin gabungan tulisan itu agar terlihat adalah merubahnya menjadi grafik. Ini adalah huruf-huruf yang populer

Warna (COLOR): Menerangkan warna dari huruf dengan namanya atau dengan angka RGB/HEX.

Contoh: Tulisan ini akan berbeda dengan yang lain. Kode tersebut akan terlihat seperti ini: Tulisan ini akan berbeda dengan yang lainnya.

Huruf Dasar (Base Font): Tag ini ditempatkan disebelah kanan bawah dari BODY tag Anda dan tag ini menerangkan "default text" yang akan digunakan pada seluruh bagian dari halaman tersebut. Perlengkapan yang jadi satu bagian dari FONT tag dapat diterima. FONT tag tersebut akan me-overwrite setting dari BASEFONT.
Contoh: <BASEFONT SIZE=2 FACE="Arial" COLOR="red">

Font Tag lainnya:

Catatan: Semua tag di bawah ini juga memerlukan sebuah tag penutup.

 Tulisan Tebal
 Tulisan Italic
 Underscore
<S> Strong
<S> Strikeout ~~Strikeout - menggambar sebuah garis sepanjang tulisan~~
<PRE> Preformatted Text
 ^{Renders text sebagai
superscript}
_{Renders test sebagai sub
script}

Membuat Tabel

Tabel adalah tag yang sangat penting dalam bahasa HTML. Untuk menjadi seorang web designer yang efektif Anda harus mengetahui dan mengerti bagaimana cara kerja dari sebuah tabel.

Ada tiga elemen pada tabel. tag dari <TABLE> tag dari row table <TR> dan tag dari sel tabel <TD>. Setiap Anda menambahkan sebuah tag <TR>, ini berarti Anda menambah 1 baris (row) ke bawah terhadap baris (row) berikutnya. Setiap Anda menambahkan sebuah tag <TD>, berarti Anda menambah sel baru disamping baris (row) yang sebelumnya. Elemen utama ada di bawah ini, bersama dengan pelengkapnya yang umum lainnya.

<TABLE> Pelengkapnya:

align - meratakan tabel ke kiri, ke tengah atau ke kanan.
bgcolor - menunjukkan warna background untuk semua tabel.
border - menunjukkan lebarnya batas (border) dalam satuan pixel.
cellpadding - luas yang tak terlihat diantara isi sel dan aktual dinding sel.
cellspacing - luas yang aktual (dalam pixel) diantara dua sel.
width - menunjukkan luas dari tabel dalam satuan pixel atau persentase

Contoh: <TABLE align="center" bgcolor="blue" border="2" cellpadding="5" cellspacing="2" width="90%">

<TR> Pelengkapnya:

align - meratakan isi dari baris (row) yaitu ke kiri, tengah atau ke kanan.
bgcolor - menunjukkan warna background dari baris (row).
valign - meratakan secara vertikal isi dari baris (row) ke atas, ke tengah atau ke bawah.

Contoh: <TR align="right" bgcolor="red" valign=top>

<TD> Pelengkapnya:

align - meratakan isi dari row yaitu ke kiri, tengah atau ke kanan.
background - tempat dari gambar background di dalam sel.
bgcolor - menunjukkan warna background untuk semua tabel.
height - menunjukkan tinggi dari sel dalam satuan pixel.
nowrap - perlengkapan untuk mengunci isi yang kita buat agar tetap pada garis yang sama.
valign - meratakan secara vertikal isi dari baris (row) ke atas, ke tengah atau ke bawah.

Latihan: Membuat Tabel 3 baris 4 kolom
<TABLE width="75%" border=1>
 <TR>
 <TD></TD>
 <TD></TD>
 <TD></TD>
 <TD></TD>
 </TR>
 <TR>
 <TD></TD>
 <TD></TD>
 <TD></TD>
 <TD></TD>
 </TR>
 <TR>
 <TD></TD>
 <TD></TD>
 <TD></TD>
 <TD></TD>
 </TR>
</TABLE>

ini adalah hasilnya:

Menyatukan Baris

<TABLE width="75%" border=1>
<TR>
 <TD ROWSPAN=2></TD>
 <TD></TD>
 <TD></TD>
 <TD></TD>
 </TR>
<TR>
 <TD></TD>
 <TD></TD>
 <TD></TD>
</TR>
<TR>
 <TD></TD>
 <TD></TD>
 <TD></TD>
 <TD></TD>
</TR>
</TABLE>

ini hasilnya (lihat baris yang disatukan)

Menyatukan Kolom

ini hasilnya (lihat kolom yang disatukan)