SMA Katolik St. Albertus Malang
Jalan Talang No. 1 Malang 65112 - Telp. 0341-564556 - Fax. 0341-552017
WebPage  :  http://www.st-albertus.sch.id    email : sma@dempoku.com
e-Learning :  http://ajar.st-albertus.sch.id

Bidang Studi: Prakarya dan Kewirausahaan Pilihan: Desain Web (PK 1 & PK 2)
Pertemu
an ke
BAB / KD Materi Pertemu
an KD
Penjelasan Guru Tugas Siswa
SMA Katolik St. Albertus
Bidang Studi: Prakarya dan Kewirausahaan Pilihan: Teknologi Informasi dan Komunikasi
Pertemu
an ke
BAB / KD Materi Pertemu
an KD
Penjelasan Guru Tugas Siswa
1 BAB I
Pengetahuan Dasar Web Design

KD 1:
Menghayati keberhasilan dan kegagalan pembuatan web design sebagai anugerah Tuhan.
KD 2:
Menghayati perilaku jujur, percaya diri dan mandiri dalam membuat web design.
KD 3:
Mengetahui dan mengidentifikasi sejarah web design, interpreter, script, world wide web, browser, server dan client.
- Sejarah Web Design

- Interpreter dan Script

- World Wide Web

- Browser

- Server dan Client
1

4 jp
- Perkenalan
Logo SMA Katolik St. Albertus Malang    
Yohanes Karel Pangau (Guru TIK)


- Nilai Pengetahuan (Kognitif):
  • Hasil kertas kerja
  • Hasil akhir tugas
  • Ulangan
  • Kemampuan

- Nilai Ketrampilan (Psikomotor):
  • Ketrampilan kerja
  • Logika
  • Proses Pengerjaan tugas

- Nilai Sikap (Afektif):
  • Kedisiplinan
  • Antusiasme
  • Ketrampilan
  • Sikap terhadap teman
  • Sikap terhadap guru
  • Perlakuan pada peralatan (komputer)

- Prosedur di Lab. Komputer Memulai aktivitas di Laboratorium Komputer:
  • Masuk Lab. Komputer dengan tenang.
  • Berilah salam pada Guru/Petugas Lab. Komputer.
  • Awali kegiatan dengan berdoa.
  • Tempat duduk boleh dipilih.
  • Hidupkan komputer.
Melakukan aktivitas di Laboratorium Komputer:
  • Dengar dan perhatikan penjelasan awal.
  • Kerjakan tugas dengan penuh tanggungjawab.
  • Silahkan saling membantu dalam mengerjakan tugas.
Mengakhiri aktivitas di Laboratorium Komputer:
  • Simpan pekerjaan.
  • Kirimkan tugas ke server jika sudah tersedia.
  • Close semua aplikasi.
  • Matikan komputer dengan prosedur yang benar.
  • Bersihkan dan rapikan meja.
  • Rapikan kursi.
  • Berilah salam pada Guru/Petugas Lab. Komputer.
  • Tinggalkan Lab. Komputer.


- Bantuan [HTML]
HTML Reference - Web Design Group
HTML Tutorial tizag.com
Panduan HTML



- Bantuan [Warna]
[Warna] Hexa Desimal
[Warna] Nama Warna
[Warna] Warna Lengkap
[Warna] http://html-color-codes.info/
[Warna] http://html-color-codes.info/web-safe-colors/
[Warna] http://html-color-codes.info/color-names/



- Bantuan [Image Background]
http://ajar.st-albertus.sch.id
http://www.backgroundcity.com
http://www.fg-a.com/backgrounds.htm



- Bantuan [Graphics Builder]
Glitterfy
Glittermaker
Button Generator
GRSites Web Designing
Cool Text Graphics Generator
http://www.glitter-graphics.com



- Menjalankan HTML Script
    Silahkan klik disini !    




- Pengantar

Tulislah/ketiklah ulang tentang:

- Memulai aktivitas di Laboratorium Komputer

Jelaskan tentang:

- Internet
- Browser
- Server
- Client
- Program
- HTML Programming
- Sejarah Web Design

Kerjakan di Microsoft Word
Nama file: XA8_45_Tugas1.docx
2 BAB II
Dasar-dasar HTML Programming

KD 1:
Menghayati keberhasilan dan kegagalan pembuatan HTML programming sebagai anugerah Tuhan.
KD 2:
Menghayati perilaku jujur, percaya diri dan mandiri dalam membuat HTML programming.
KD 3:
Memahami editor dan struktur HTML progrramming.
KD 4:
Mendesain web dengan menggunakan tag-tag dasar HTML programming.
- Editor
  HTML Programming

- Struktur
  HTML Programming

- Tag-tag dasar
  HTML Programming
1

4 jp
- Hubungan Editor dengan
  Web Design

- Langkah-langkah membuat
  web


- Tanda dalam penulisan tag

- Akibat penulisan tag
  yang salah
Cari dan tulislah: (nama file: XA8_45_Tugas2.docx )
- 10 editor HTML Programming dan alamat web-nya
- 5 Browser dan alamat web-nya

Membuat web:  (nama file: XA8_45_Latih01.html )
Isi web :
- Nama dan Kelas
- Judul (yang menarik)
- Gambar-gambar
- Lain-lain
Catatan:
Elements / tag cari di internet / buku
3 2

4 jp
- Struktur penulisan
  HTML Programming


- Fungsi dan perbedaan
  <head> ..... </head>
  dengan
  <body> ..... </body>

- Penulisan tag yang benar
Jelaskan fungsi tag di bawah, tulis juga atribut dan fungsinya:
 (nama file: XA8_45_Tugas3.docx )
- <head>    <title>
- <body> dan 3 atributnya
- <font> dan 3 atributnya
- <img> dan 3 atributnya
- <br>    <i>    <b>    <u>    <center>
- <hr> dan 3 atributnya
- <strike>    <sub>    <sup>    <tt>
- <big>    <small>

Buat web tentang tempat wisata dikotamu:  
(nama file: A8_45_Latih02.html )
Isi web:
- Nama dan kelas
- Judul (yang menarik)
- Gambar-gambar dan penjelasannya
- Lokasi (termasuk jalur menuju lokasi)
- Fasilitas yang ada
- Fasilitas yang menunjang
- Keunggulan/kelebihan
- Sejarah
- dan lain-lain
[.Lihat contoh.]
4 3

4 jp
- Atribut tag gambar

- Tulisan disekeliling gambar Menggunakan tag <img>:
 <img src="gambar.jpg" align=left>
Supaya ada jarak antara gambar dan tulisan:
 <img src="gambar.jpg" align=left hspace=15>

Menggunakan CSS: (dianjurkan)
 <img src="gambar.jpg" style="float:left;">
Supaya ada jarak antara gambar dan tulisan:
 <img src="gambar.jpg" style="float:left; margin: 0px 9px 0px 0px;">  


- Tulisan rata kanan kiri

- Google Maps

  https://maps.google.com/  



- Gambar di server lokal
  ( Internet vs Lokal )  Situs e-Learning SMA Katolik St.Albertus Malang 
 Internet:
      http://ajar.st-albertus.sch.id  
 Lokal:
      http://10.2.9.10/  
      http://192.168.1.51/  


- Gambar yang dimuat
  ( Besar vs Kecil )

- Tag Link
Buat web Data Pribadi:  (nama file: XA8_45_Latih03.html )

Isi web:
- Nama lengkap
- Nama panggilan
- Kelas
- Foto-foto pribadi dan keterangannya
- Data pribadi yang lain (jika bersedia)
  (Alamat, HP, Nama Ortu, Saudara, Tgl Lahir dsb)
- Hobi dan cita-cita
- Kata-kata mutiara
- Sejarah pendidikan ( PAUD TK SD SMP SMA dsb)
  (Alamat, Foto, Penjelasan/Keterangan)
- Kota Asal (Foto, Logo Kota, Penjelasan/Keterangan)
- Tanggal web dibuat
- dan lain-lain
[.Lihat contoh.]

Tugas kelompok: (dikerjakan dirumah)
- Buatlah tulisan/karangan
- Isi tulisan:
  - Sejarah Web Design (HTML Programming)
  - Element/Tag HTML Programming
- Bentuk karangan: Tulisan praktis (bukan ilmiah)
- Dibendel dan digandakan sesuai kebutuhan ( 2 x jumlah kelompok)
- Buat ringkasan untuk dipresentasikan
  (dengan Power Point atau yang lain)
5 4

4 jp
- Presentasi

- Diskusi

- Penilaian
  Kolektif dan Perorangan
Presentasi dan Diskusi:
- Setiap kelompok mendapatkan 2 bendel tulisan kelompok lain
- Mempelajari tulisan kelompok yang akan presentasi
- Setiap kelompok mempresentasikan tugasnya
- Tanya jawab dan diskusi
- Audience/pendengar memberikan penilaian [ form penilaian ]
- Guru juga memberi penilaian pada siswa yang bertanya
6 BAB III
HTML Programming Tingkat Lanjut

KD 1:
Menghayati keberhasilan dan kegagalan pembuatan HTML programming sebagai anugerah Tuhan.
KD 2:
Menghayati perilaku jujur, percaya diri dan mandiri dalam membuat HTML programming.
KD 3:
Mendesain web dengan menggunakan tag table.
KD 4:
Mendesain web dengan menggunakan tag frame dan form.
- Membuat Tabel

- Membuat Frame

- Membuat Form
1

4 jp
- Struktur penulisan Tabel
- <table>
- <tr>
- <td>
Jelaskan fungsi tag di bawah, tulis juga 2 atribut dan fungsinya:
 (nama file: XA8_45_Tugas4.docx )
- <table>
- <tr>
- <td>
- <th>
- <thead>
- <tbody>
- <tfoot>
- <caption>

Membuat web (Tabel):  (nama file: XA8_45_Latih04.html )
Isi web :
- Nama dan Kelas
- Judul (yang menarik)
- Buatlah tabel seperti contoh [klik disini]
- Tambahkan data menjadi minimal 15 data temanmu
- Berilah warna dan gambar sehingga menarik

Pada file yang sama, tambahkan:
- Buatlah tabel seperti contoh [klik disini]
- Tambahkan item-item sbb:
  Mesin cuci --> 3 merek --> harga dan jumlah isi sendiri
  Handphone --> 5 merek --> harga dan jumlah isi sendiri
  Meja --> 2 merek --> harga dan jumlah isi sendiri
- Berilah warna dan gambar sehingga menarik
7 2

4 jp
- <td colspan=2>
- <td rowspan=2>

- <th>
- <thead>
- <tbody>
- <tfoot>
- <caption>
Lanjutkan pembuatan tabel:

- Lanjutan pembuatan tabel seperti contoh [klik disini]
- Tambahkan item-item sbb:
  Mesin cuci --> 3 merek --> harga dan jumlah isi sendiri
  Handphone --> 5 merek --> harga dan jumlah isi sendiri
  Meja --> 2 merek --> harga dan jumlah isi sendiri
- Berilah warna dan gambar sehingga menarik
8
dan
9
3
dan
4

2 x 4
jp
- cellpadding pada tag table
- cellspacing pada tag table

- tabel didalam tabel

- tabel tingkat lanjut,
  contoh: http://detik.com

- Penjelasan/ilustrasi
- Penjelasan/ilustrasi tambahan
Buat Layout web dengan menggunakan Microsoft Excel
     (nama file: XA8_45_Latih05.xlsx ) contoh: Latih05.xlsx
Buat program HTML dengan memanfaatkan tabel:
     (nama file: XA8_45_Latih05.html )

- Contoh tampilan web
- Perbedaan warna hanya menunjukkan area kerja
- Warna boleh diubah
- Isi sesuaikan dengan web anda
- Layout boleh diubah sesuai kebutuhan
10 5

4 jp
- File Pendefinisi
  (Frameset Document)
  • File HTML utama pada sebuah frame (Frameset Document). File tersebut dibutuhkan untuk menampilkan halaman web dalam bentuk frame

- File Pengisi (HTML Document)
  • Beberapa File HTML yang merupakan pengisi dalam sebuah frame

- Tag Link (atribut target)
Buatlah web dengan memanfaatkan FRAME:

Nama File Pendefinisi (Frameset Document):
    XA8_45_Latih06_Frame.html    HTML Frame - Pengantar (swf)   
[ klik disini ]


Nama File Pengisi (HTML Document):
   XA8_45_Latih06_Judul.html
   XA8_45_Latih06_Menu.html

Contoh tugas [klik disini]
11 6

4 jp
- Lanjutan pembuatan Frame

- Atribut target pada
  <a href="URL"> :
   target=_blank
   target=_self
   target=_parent
   target=_top
   target=framename
Perbaiki pembuatan frame

Tambahkan pada MENU dengan tujuan link ke:

- Friendster
- Facebook
- Twitter
- Instagram
- dan lain-lain
 
12 7

4 jp
- Pengantar Form    HTML Form - Pengantar   
[ klik disini ]


- Input (masukkan)

- <input type="text">
- <input type="checkbox">
- <input type="radio">
- <input type="file">
- <input type="submit">
- <input type="reset">
- <textarea>
- <select> dan <option>

Buatlah formulir pendaftaran online:

Nama File : XA8_45_Latih07.html

Contoh tugas [klik disini]

- Model formulir bisa diubah
    HTML Dasar oleh Karel Pangau
Daftar kumpulan tag HTML
13 BAB IV
CSS Programming

KD 1:
Menghayati keberhasilan dan kegagalan pembuatan CSS programming sebagai anugerah Tuhan.
KD 2:
Menghayati perilaku jujur, percaya diri dan mandiri dalam membuat CSS programming.
KD 3:
Mengetahui dan memahami pengetahuan dasar CSS programming.
KD 4:
Mendesain web dengan memanfaatkan pengaturan latar belakang, teks dan tabel pada CSS programming.
- Pengetahuan Dasar

- Style
- Selector
- Property
- Value

- Selector Bebas
- Selector Class
- Selector ID

- Inline Style Sheet
- Internal Style Sheet
- External Style Sheet

- Mengatur Background
- Mengatur Teks
- Mengatur Tabel
1

4 jp
- Inline Style Contoh Inline Style:
Latar belakang berwarna:
 <body style="background-color: blue;">
Latar belakang gambar:
 <body style="background-image: url('dempo.jpg');">
Latar belakang gambar tunggal:
 <body style="background-image: url('dempo.jpg'); background-repeat: no-repeat;">
Latar belakang gambar diulang:
 <body style="background-image: url('dempo.jpg'); background-repeat: repeat-y;">
Mengatur huruf:
 <font style="font-family: helvetica; font-size: 50px;">


- Internal Style Contoh Internal Style:



- External Style Contoh Inline Style:

<link type="text/css" href="coba.css" rel="stylesheet" />
 


- Selector
- Property
- Value Cara penulisan:

 selector { property : value; property : value; }

Keterangan:
selector ----> ada kesamaan dengan tag pada HTML
property ----> ada kesamaan dengan attribute pada HTML
value ----> ada kesamaan dengan value pada HTML

Contoh:
 h1 { color : blue; }
 



Buku pendamping

CSS oleh Karel Pangau
CSS Help Sheet
CSS Tutorial 1
CSS Tutorial 2
CSS Quick List
 
Jawablah pertanyaan di bawah pada kertas yang disediakan:
  1. Jelaskan secara singkat tentang CSS (apa, mengapa, tujuan dll.)
  2. Jelaskan hubungan antara selector, property dan value (berikan juga contoh dan pembanding pada HTML)
  3. Jelaskan perbedaan pokok dari inline style, internal style dan external style
  4. Jelaskan juga mana yang paling mudah dibuat dengan alasannya (lihat no. 3 )
  5. Cari dan tulisah property untuk selector body, jelaskan kegunaannya.
  6. Cari dan tulisah property untuk selector font, jelaskan kegunaannya.

Tugas:

Buatlah web tentang SMA Dempo ( fokus tulisan terserah ),
gunakan perintah CSS untuk memperindah tampilan.
Metode penulisan CSS yang digunakan adalah Internal Style

Nama file: Latih08.html
 
14 2

4 jp
- Selector Bebas Selector Bebas:
<html>
    <head><title>Latihan CSS - Selector</title>
        <style type="text/css">
            huruf { font-family : verdana; font-size : 30px; color : blue; }
        </style>
    </head>
    <body>
    
        SMA <huruf>Dempo</huruf> Malang - Selector Bebas
 
    </body>
</html>    
    

- Selector Class Selector Class:
<html>
    <head><title>Latihan CSS - Selector</title>
        <style type="text/css">
            .huruf { font-family : verdana; font-size : 30px; color : blue; }
        </style>
    </head>
    <body>
    
        SMA Dempo Malang - Selector Class
        <p class="huruf">
        SMA Dempo Malang - Selector Class
        </p>
 
    </body>
</html>    
    

- Selector ID Selector ID:
<html>
    <head><title>Latihan CSS - Selector</title>
        <style type="text/css">
            #huruf { font-family : verdana; font-size : 30px; color : blue; }
        </style>
    </head>
    <body>
    
        SMA Dempo Malang - Selector ID
        <p ID="huruf">
        SMA Dempo Malang - Selector ID
        </p>
 
    </body>
</html>    
    


- Styling Links Styling Links:
<html>
    <head><title>Latihan CSS - Links</title>
        <style type="text/css">
            a { font-family: verdana; font-size: 30px; }
            a:link    { color: blue;  background-color: red  ; text-decoration: none;}
            a:visited { color: red;   background-color: green; text-decoration: none;}
            a:hover   { color: green; background-color: blue ; text-decoration: none;}
            a:active  { color: black; background-color: green; text-decoration: none;}
        </style>
    </head>
    <body>
    
        <a href="http://yahoo.com">Yahoo</a><br><br>
        <a href="http://google.com">Google</a><br><br>
        <a href="http://facebook.com">Facebook</a><br>
 
    </body>
</html>
    

   a:link
   a:visited
   a:hover
   a:active

- Text hover
<html>
  <head><title>SMA Dempo</title>
    <style type="text/css">
      tulisan:hover { color: red; font-size: 30px;}
    </style>
  </head>
  <body>
    <tulisan>Ini Albert Einstein</tulisan>>
  </body>
</html>

Contoh text hover:

 Ini foto Albert Einstein




- Styling Text
- Styling Font
- Styling Box

Buatlah sebuah web:

Ketentuan:
  • Nama File : Latih09.html
  • Isi web desain bebas (lengkap dengan background dan gambar-gambar)
  • Di bagian awal tertulis secara mencolok nama, kelas/no, sekolah dan tanggal pembuatan
  • Pengaturan menggunakan CSS (Inline Style dan atau Internal Style)
  • Di dalam web desain harus disertakan (minimal):
    • 5 link dengan menggunakan Styling Link yang berbeda-beda (unik)
    • 5 hover dengan styling yang berbeda-beda (unik)
    • 5 text styling dan font styling
    • 5 box shadow styling yang berbeda-beda (unik)
    • 10 font shadow styling yang berbeda-beda (unik)
  • Beberapa styling boleh digabung menjadi satu
15 3

4 jp
  • Struktur Penulisan CSS yang baik
  • Class / Id untuk Link yang berbeda styling
  • Hover tulisan bervariasi (mis: gambar)
  • Perbedaan pemakaian div dengan span
  • Penggabungan beberapa styling

Lanjutan pembuatan: Latih09.html

16 2

4 jp
Background Gradient Color
  • Linear Gradient
  • Radial Gradient


Buatlah sebuah web:

Ketentuan:
  • Nama File : Latih10A.html, Latih10B.html, Latih10C.html
  • Isi web desain bebas
  • Di bagian awal tertulis secara mencolok nama, kelas/no, sekolah dan tanggal pembuatan
  • Pengaturan menggunakan CSS (Inline Style dan atau Internal Style)
  • Setiap file, tampilan background-nya berbeda
  • Memanfaatkan Linear dan Radial Gradient
17 2

4 jp
Mengatur Table dengan CSS
  • .dempo table
  • .dempo tr
  • .dempo th
  • .dempo td
  • .dempo tr:nth-child


Buatlah sebuah tabel:

Ketentuan:
  • Nama File : Latih11.html
  • Di bagian awal tertulis secara mencolok nama, kelas/no, sekolah dan tanggal pembuatan
  • Isi data tabel bebas (minimal 4 kolom)
  • Pengaturan menggunakan CSS (Internal Style)
  • Buatlah sebagus mungkin

 
Penyelenggaraan pendidikan dilaksanakan dengan  
Sistem Kredit Semester (SKS).  
Dibuat oleh: Yohanes Karel Pangau   
Guru SMA Katolik St.Albertus Malang  
Januari 2014