Tuesday, May 14, 2013

Materi Ke 1 HTML : "HELLO WORD !!!"

Mengawali materi ke 1 Pemrograman HTML yang perlu dipersiapkan: adalah PC/ Laptop yang sudah terinstall Notepad++ (download notepad++ disini) dan Appserv (untuk instalasi Appserv lihat disini). Dalam materi ke 1 kita mencoba menampilkan tulisan "Hello Word !!!" pada halaman web yang akan kita buat.

Pertama-tama sebelum kita masuk ke coding kita harus mengenal dulu tentang Fungsi Appserv yang sudah kita install. Halaman2 web yang akan kita buat nantinya akan kita simpan dalam folder WWW di C:\AppServ\www\ (tergantung dimana kita menginstall Appserv).



1. Kita mulai dengan membuat folder "coba" di C:\AppServ\www seperti gambar berikut:

2. Buka Notepad++

3. Ketikkan kode berikut di Notepad++ :
<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">
<HTML>
   <HEAD>
      <TITLE>
         Latihan 1 HTML
      </TITLE>
   </HEAD>
<BODY>
   <H1>Hai Kawan !!!!</H1>
   <P>Ini halaman pertamaku "HELLO WORD !!!"</P>
</BODY>
</HTML>

4. Setelah itu simpan di Folder yang telah kita buat tadi C:\AppServ\www\coba simpan dengan nama index.html

5. Selanjutnya untuk melihat hasilnya buka webbrowser ketikkan localhost/coba (disini saya menggunakan mozilla firefox)


Sekarang kita mulai membahas satu persatu kode2/tag2 yang telah kita ketikkan tadi:
<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">
<! ..... > adalah tag untuk komentar/ keterangan yang tidak ditampilkan hasilnya di halaman yang kita buat kedepan nanti  kita coba buat contoh lagi penggunaan tag ini.
<HTML>...... </HTML>
HTML menandakan bahwa halaman yang kita buat adalah dokumen web dengan menggunakan HTML. Tag2 dalam HTML biasanya ditulis dengan format:  awal <tag> dan akhir </tag>.
<HEAD> ...... <HEAD>
HEAD menandakan kepala dari dokumen HTML
      <TITLE>
         Latihan 1 HTML
      </TITLE>
TITLE digunakan untuk memberi judul dokumen HTML yang tampil di jendela browser. Hasilnya adalah sebagai berikut:
 

Demikian pengenalan HTML dalam Materi Ke 1 Sebelum ke Materi Ke 2 disarankan untuk Mengenal Tag-Tag HTML dan Fungsinya disini.


No comments:

Post a Comment