Modul Ajar Pemprograman Web Statis SMK X RPL - 2

BAB 2 - Hypertext Markup Languange (HTML)
1. Struktur File HTML
Seperti yang sudah di jelaskan dalam BAB 1, file HTML adalah suatu file yang biasa di kenal dengan istilah web page ( halaman web ). Tag HTML dapat di tulis dengan menguunakan Notepad  ataupun aplikasi editor lain seperti Dramweaver dll. ( ada juaga yang open source lho misal Notepad++, PHPedit )
Penamaan File HTML haruslah di akhiri dengan “.htm “ atau “.hmtl” ( Contoh : abc.html ). Hal ini di maksudkan agar supaya file yang kita buat dapat di baca mengggunakan aplikasi web browser.
Secara umum file HTML terdiri dari beberapa elemen sebagai berikut :

Dari gambar diatas dapat kita lihat bahwa file HTML dimulai dengan kode atau dan di akhiri atau .Selain itu HTML terdiri dari dua Elemen Utama yaitu Head dan Body, head dan body juga sama seperti HTML di awali <…> dan di akhiri dengan begitupun elemen – elemen lain seperti Title juga sama, elemen lain kedepannya juga akan kita pelajari juga memiliki prinsip yang sama.

Latihan 1
(Tujuan : Mengenal Struktur File HTML)
  1. Buka aplikasi Web Editor (misal menggunakan Notepad pada Windows XP), Klik Strat - All Programs - Notepad
  2. Setelah Program Notepad muncul, ketikkan kode (tag HTML) dibawah ini
  3. <HTML> 
    <HEAD> 
       <TITLE>Coba 1</TITLE> 
    </HEAD> 
     <BODY> 
       Ini web Pertamaku 
     </BODY> 
    </HTML>
    
  4. Setelah kode diatas selesai diketik semua, kemudian klik menu File - Save
  5. Pilih direktori yang akan digunakan untuk menyimpan file
  6. Setelah itu isikan pada textbox Filename = latihan1.html, dan ubah combobox  Save As Type = All Files
  7. Kemudian tekan tombol Save
  8. Untuk lebih jelas Perhatikan gambar berikut
  9. Setelah semua langkah selesai, selanjutnya kita buka direktori tempat kita menyimpan file tersebut menggunakan windows explorer.
  10. Jika berhasil maka file yang kita buat berupa HTML Document dan dapat dibuka menggunakan web browser
  11. ~~~~Selamat mencoba.~~~

Share this

Related Posts

Previous
Next Post »

Loading...