Materi PW Kelas X Semester 1

Materi PW Kelas X Semester 1

Materi Pemrograman Web (PW) Kelas X Semester 1

1. Struktur Dasar HTML
    HTML (Hypertext Markup Language) mempunyai beberapa struktur dasar untuk membangun sebuah webpage. Berikut adalah struktur dasar tersebut:
<html>[Pembuka script halaman]
   <head>[kepala/head halaman]
    <title> [Judul halaman]
   </head>
     <body>[Pembuka isi halaman]
     [Masukkan isi di sini]
     </body>[Penutup isi halaman]
 </html>[Penutup script halaman]

2. Menyisipkan gambar/foto
    Untuk menyisipkan gambar HTML menggunakan tag <img> tanpa tutup. Contoh saat akan menambahkan file foto bernama "december.jpg" maka script yang disisipkan adalah <img [tag dasar] src="[file target]december.jpg">

3. Pembuatan Hyperlink/Tautan pada HTML

    Untuk membuat hyperlink diperlukan tag <a>, target, serta nama yang akan ditampilkan. Contoh untuk membuat halaman menuju home maka script yang disisipkan adalah <a href="[nama file target]home.html">[Nama yang ditampilkan]Home</a>.












4. Pembuatan List/Daftar
    Pembuatan daftar pada HTML menggunakan tag <ol>,</ol> untuk ordered list dan <ul>,</ul> untuk unordered list. Sedangkan untuk isi list diperlukan tag <li> tanpa penutup tag.
Contoh untuk membuat list "Daftar Menu Nasi Goreng" maka digunakan tag-tag sebagai berikut.
<ul type="circle"> [Unordered list, tipe bullet lingkaran]
    <li>Nasi goreng balita (Rp10.000)[daftar]
    <li>Nasi goreng desa(Rp12.000)[daftar]
    <li>Nasi goreng rakyat(Rp8.000)[daftar]
    <li>Nasi goreng kampung(Rp10.000)[daftar]
   </ul>[penutup]

5. Pembuatan Tabel
    Struktur/tag dasar untuk membuat tabel adalah <table>,</table;<tr>,</tr>;<td>,</td>;dan <th>,</th>. Contoh untuk membuat tabel jadwal kegiata pribadi pada hari senin dan selasa. Lihatlah rangkaian script di bawah ini. (dengan struktur dasar HTML tentu saja)
<table border="1px"> [pembuka tabel dan atribut garis tepi 1 pixel]
  <tr> [Table row/baris pada tabel]
    <th>Senin</th> [Table header/kepala tabel]
    <th>Selasa</th>
  <tr>
    <td>Sarapan</td> [Isi tabel]
    <td>Sarapan</td>
  </tr>
  <tr>
    <td>Sekolah</td>
    <td>Sekolah</td>
  </tr>
  <tr>
     <td>Istirahat</td>
     <td>Ekstrakulikuler</td>
</table>.
Maka akan menjadi seperti gambar di bawah ini.
 
6. Desain Webpage dengan Cascading Style Sheet (CSS)
    CSS adalah scipt berbasis HTML untuk mendesain sebuah halaman web menjadi lebih menarik dan menambah fitur-fitur di dalamnya seperti memasukkan musik, video, dll. Script CSS dapat disisipkan secara langsung pada HTML dengan tag <style> maupun secara eksternal dengan file berekstensi *.css. Berikut ini adalah contoh script CSS untuk membuat Music Player pada sebuah webpage.
<audio [tag dasar] width="700" [lebar] height="500" [tinggi] controls="controls" [pengatur player] ><[file target] source src="Bon Jovi - Bed of Roses.mp3" [tipe file] type="audio/mp3"></audio> [nama yang ditampilkan ]Bon Jovi - Bed of Roses
Maka akan menjadi