Penggunaan HTML ~ Syahril Phantom

A. Tool yang digunakan

1. Notepad++

B. DASAR TEORI

Pada hari yang pertama ini kita akan mempelajari HTML. HTML merupakan format tampilan untuk sebuah website. HTML sangat mudah dipelajari karena kita tidak memerlukan programming skill untuk menguasai HTML. Setelah membaca materi ini diharapkan anda dapat menguasai bagaimana:

ƒ Menggunakan HTML

ƒ Manipulasi Font dan Link

ƒ Membuat Tabel

ƒ Membuat Form HTML

1. Menggunakan HTML

Sebuah halaman website yang valid akan selalu diapit tanda <html>...</html>. File-file HTML selalu berakhiran dengan ekstensi *.htm atau *.html. Tag-tag HTML selalu diawali dengan tanda <x> dan diakhiri dengan </x> dimana x adalah nama tag seperti b, i, u dan sebagainya. Namun ada juga tag yang tidak diakhiri dengan </x> seperti <br> dan <input>.

Dibawah ini adalah tabel tag-tag HTML yang sering digunakan.

C. PRATIKUM

Latihan 1 : website pertamaku

Pertama jalankan program Notepad++ , klik FILE lalu klik NEW. Lalu ketikan source code dibawah ini:

Simpan mengklik File-Save lalu simpan dengan nama pertama.html di folder Project WEB. Untuk mengetesnya double klik pada file pertama.html maka akan muncul tampilan seperti di bawah ini:

2. Manipulasi Font dan Link

Untuk memanipulasi font di HTML kita gunakan tag <font></font>. Tag font tidak hanya sesederhana itu. Tag ini memiliki atribut didalamnya. Dimana atribut inilah yang memiliki peranan penting dalam menentukan tampilan teks. Lihat Tabel 1.1 untuk daftar atribut tag font.

Contoh jika kita ingin membuat teks yang menggunakan huruf Arial ukurannya 12pt dan warnanya merah. Kita dapat menuliskannya seperti berikut :

Untuk size 3 sama dengan 12pt, 4 sama dengan 14pt, 5 sama dengan 18pt, 6 sama dengan 24pt dan 7 sama dengan 36pt. Lalu bagaimana jika ingin membuat teks yang hurufnya tebal, miring dan bergaris bawah, kita cukup apit teks tersebut menggunakan tag <b></b>, <i></i> dan <u></u>.

Lihat contoh berikut :

Teks diatas akan mempunyai efek tebal, miring dan bergaris bawah. Selain font ada juga <h1></h1>, <h2></h2>, dan seterusnya yang digunakan untuk mencetak heading. <h1> akan mencetak heading dengan ukuran font yang terbesar, <h2> akan semakin mengecil dan seterusnya.

Anda tentu sering mengklik suatu tulisan atau gambar pada website yang menuju ke halaman lainnya. Yang anda klik itu adalah link. Link merupakan teks atau gambar yang membuka halaman website lainnya. Untuk membuat link kita dapat menggunakan tag <a></a>. Seperti halnya tag font tag a juga memiliki attribut. Tabel 1.2 akan menunjukkan pada anda daftar attribut pada tag a.

Contoh jika kita ingin membuka www.google.com pada window yang sama.

Link diatas akan membuka alamat www.google.com dengan teks Google sebagai teks yang akan diklik.

Latihan 2 : PENERAPAN TEORI MANIPULASI FONT DAN LINK

klik FILE lalu klik NEW. Lalu ketikan source code dibawah ini:

Ketikan source code dibawah ini :

Simpan dengan nama font_link.html.

Hasilnya :

Karena file pertama.html berada satu direktori dengan file font_link.html. Maka isi dari href cukup kita tulis “pertama.html”.

3. Membuat Tabel

Tabel memiliki peranan yang cukup penting dalam pendesainan suatu tampilan. Dengan menggunakan tabel kita dapat dengan mudah menentukan letak suatu objek. Untuk membuat tabel digunakan <table></table>. Atribut dari tag table boleh dibilang cukup banyak. Daftar atribut tag table dapat anda lihat pada table dibawah ini :

Daftar atribut dari tag table

Jika kita hanya menggunakan tag <table></table> saja maka tabel tidak akan pernah terbentuk karena belum memiliki baris dan kolom. Untuk membuat baris kita gunakan tag <tr></tr> dan untuk membuat kolom digunakan tag <td></td>. Terdapat juga tag <th></th> tag ini digunakan untuk membuat header tabel. Ketiga tag tersebut memiliki atribut yang hampir sama.

Daftar atribut tag tr, td, dan th

Contoh dibawah ini mengilustrasikan kita akan membuat tabel dengan dua baris dan satu kolom.

Latihan 3 : PENERAPAN TEORI MEMBUAT TABEL

Simpan dengan nama tabel.html

Hasilnya :

Coba perhatikan pada tag td yang ada pada baris ke tiga. Disini kita menuliskan attribut colspan=”3” yang artinya kita menghilangkan 3 kolom dan menggantinya hanya dengan satu kolom.