PERTEMUAN 1

WEB PROGRAMMING 1
 TUJUAN PEMBELAJARAN
• Tujuan pembelajaran matakuliah praktikum
Web Programming 1 adalah mahasiswa
diharapkan dapat memahami dan mengerti
konsep dasar dalam pembuatan web dan
mampu membuat sebuah Web Informasi
dengan penggunaan HTML, PHP, JAVASCRIPT
dan CSS
 Kontrak Perkuliahan
• Di pertemuan 1 mahasiswa diminta untuk
membuat kelompok untuk tugas pembuatan web
informasi.
• Setiap kelompok dapat beranggotakan 4
anggota.
• Setiap kelompok diharuskan untuk membuat
sebuah web informasi sederhana.
• Setiap kelompok akan diminta untuk
mempresentasikan tugas yang sudah dibuat di
pertemuan 14 dan pertemuan 15
 Silabus
Minggu
Pokok Bahasan
Ke-
Pengenalan Deskripsi Mata kuliah, kontrak kuliah, Materi Teknologi
1
Pemrograman Web, Struktur Navigasi
2 HTML
3 PHP
4 Operator
5 Penggunaan Form & HTTP Server ( Method Get dan Post)
6 Form Lanjutan
7 Percabangan
8 Ujian Tengah Semester (UTS)
9 Perulangan
10 J AVA Script
11 CSS
12 Membuat Layout Penggunaan gabungan HTML, PHP, CSS dan Java Script
13 Membuat Layout Penggunaan gabungan HTML, PHP, CSS dan Java Script
14 Membuat Layout Penggunaan gabungan HTML, PHP, CSS dan Java Script
15 Membuat Layout Penggunaan gabungan HTML, PHP, CSS dan Java Script
16 Ujian Akhir Semester (UAS)
 Tema Web
• Web Informasi Sekolah
• Web Informasi Toko Kue
• Web Informasi Toko Baju
• Web Informasi Universitas
• Web Informasi Perpustakaan
• Web Informasi Toko Bunga
• Web Informasi Komunitas
 Konsep Dasar Web
• Internet
Internet merupakan “kependekan dari kata
“internetwork”, yang berarti rangkaian komputer
yang terhubung menjadi beberapa rangkaian
jaringan”. Sistem komputer terhubung secara global
dan menggunakan TCP/IP sebagai protocol. Secara
umum internet dapat diartikan sebagai pertukaran
informasi dan komunikasi. Semua informasi bisa
didapatkan dengan mudah dan bebas di internet
tanpa ada batasan.
 Ada beberapa istilah yang sering digunakan apabila
anda bekerja dengan internet diantaranya yaitu:
• World Wide Web (WWW)
• Website
• Web Pages (Halaman Web)
• Home Page (Halaman Muka)
• Browser
• URL (Universal Resource Locator)
• HTTP (Hypertext Transfer Protocol)
 Lanjutan…
• DNS (Domain Name System)
• TCP/IP (Transmission Control Protocol /
Internet Protocol)
• IP (Internet Protocol)
• Hyperlink
• Web Browser
 Perangkat Lunak Web Server
• Web Server adalah sebuah perangkat lunak
server yang berfungsi menerima permintaan
HTTP atau HTTPS dari Client yang dikenal
dengan web browser dan mengirimkan
kembali hasilnya dalam bentuk halaman-
halaman web yang umumnya berbentuk
dokumen HTML. Server web yang terkenal
diantaranya adalah:
 Lanjutan…
• Apache, web server antar platform
XAMPP
PHPTriad; discontinued
Apache2Triad
• Internet Information Service (IIS), hanya dapat
berjalan di sistem operasi MS Windows
 Struktur Navigasi
• Struktur Navigasi adalah “Susunan menu atau
hirarki dari suatu situs yang menggambarkan
isi dari setiap halaman dan link atau navigasi
tiap halaman pada suatu situs web”.
• Ada 4 macam bentuk dasar dari peta navigasi
yang biasa digunakan dalam proses
pembuatan aplikasi multimedia, yaitu:
Ada 4 macam bentuk dasar dari peta navigasi
yang biasa digunakan dalam proses
pembuatan aplikasi web, yaitu:
• Struktur Navigasi Linier
• Struktur Navigasi Hirarki
• Struktur Navigasi Non-Linier
• Struktur Navigasi Campuran
BAHAN DISKUSI

Amatilah sebuah halaman website, lalu coba

buatkan struktur Navigasi dari halaman
tersebut
INSTALASI SOFTWARE PENDUKUNG
• Web server : XAMPP
• Editor : Notepad, Notepad ++, Sublime
Text, Atom
• Untuk editor di pilih salah satu saja, tidak
perlu di install semua
 PERTEMUAN 2
WEB PROGRAMMING 1
 PENGENALAN HTML
• Hypertext Markup Language (HTML) adalah
sebuah bahasa untuk menampilkan konten di
web. HTML sendiri adalah bahasa
pemrograman yang bebas, artinya tidak
dimiliki oleh siapapun, pengembangannya
dilakukan oleh banyak orang di banyak Negara
dan bisa dikatakan sebagai sebuah bahasa
yang dikembangkan bersama-sama secara
global.
Struktur Dasar HTML
 Contoh penggunaan script HTML
• Contoh01.php

Judul Web

Perintah dibuat di antara

<body> dan <body>
 Lanjutan…
• simpan file di atas di dalam folder
c:\XAMPP\htdocs\ buat folder baru untuk
menyimpan file di dalam folder htdocs.
Simpan file dengan nama contoh01.html.
• Untuk melihat hasil dari file di atas dapat
menggunakan browser Mozilla, google
chrome, internet explorer atau jenis browser
lain. Ketikkan pada address bar
“Localhost\Nama Folder Penyimpanan\”,
kemudian pilih file contoh01.html
 Hasil Contoh 01
• Hasilnya :
 TAG
• Tag adalah bagian dari struktur html yang di
tuliskan diapit oleh tanda < tag >, dan tag
dituliskan berpasangan, dengan maksud < tag >
➔ tag pembuka dan < /tag > ➔ tag penutup.
• Tag terbagi menjadi beberapa fungsi
– Formating - List
– Link - cititation
– Image - dll
 Struktur TAG
<nametag atribut = nilai>

Contoh :
<body bgcolor=“lightblue”>
Penjelasannya :
Body = nama tag
Bgcolor = atribut
Lightblue = nilainya
➔ Buat body berlatar belakang warna biru muda
 TAG (Lanjutan)
• Dari berbagai jenis tag tersebut dapat di ringkas
menjadi 2, yaitu
– Tag yang di tuliskan diantara <head> dan </head>
– Tag yang di tuliskan diantara <body> dan </body>
• Tag diantara <head> dan </head>
– Judul halaman <title> </title>
– CSS <style><style>
– Javascript <script></script>
– Metadata <meta></meta>
 TAG (Lanjutan)
• Tag yang di tuliskan diantara <body> dan </body>
– Teks <h1>,<h2>, …….. <h6>, <p>, ...
– Pendukung teks <br>, <hr>, <strong>, …
– Gambar <image>
– Hyperlink <a>
– List (bullets & numbering) <ul>,<ol>,<li>,<dl>,<dt>
– Table <table>, <thead>, <tbody>
– Form <form>, <input>, <select>,<button>
– Grouping <div>, <span>
– Dll ( dapat di lihat di http:www.w3school.com/tags )
 Contoh script penggunaan Tag
• Contoh02.html HTML
 Hasil Contoh 02
• Hasilnya :

• Perhatikan tulisan merah dalam box navy

 Pembuatan Tabel Menggunakan
• Contoh03.html HTML
Hasil Contoh 03
 Penggunaan Cellpadding & Cellspacing
• tabelcell.html
 Hasil tabelcell.html

• Coba di ganti-ganti angka cellpadding dan

cellspacingnya, lihat perbedaannya
 Penggunaan Colspan & Rowspan
• tabelspan.html
Hasil tabelspan.html
 TUGAS 01
• Buat script HTML untuk bentuk tampilan di
bawah ini :
 PERTEMUAN 3
DASAR – DASAR PHP
 Struktur PHP

• Tidak seperti halaman HTML biasa, kode PHP tidak akan diberikan oleh
server secara langsung ketika ada permintaan dari client (browser), namun
melalui pemrosesan dari sisi server, makanya PHP disebut skrip server-
side.
• Sehingga bila kita ingin mengakses file dengan extension .php harus
menyebutkan dahulu folder dalam local servernya
 Contoh penulisan skrip PHP
Contoh04.php

Hasil di browser Contoh04.php

 Variabel
• Variabel ditandai dengan adanya tanda dolar
($) yang kemudian bisa diikuti dengan angka,
huruf, dan underscore. Namun variable tidak
bisa mengandung spasi. Berikut ini contoh
pendefinisian variable. Untuk mendefinisikan
variable, hanya perlu menuliskannya maka
otomatis variable dikenali oleh PHP.
• Contoh : $nama, $no_telp, $_pekerjaan
 Contoh Soal
• Contoh05.php:
 Hasil Contoh 05
• Hasil :
 Tipe Data
• Berbeda dengan bahasa pemrograman lain,
variable di PHP lebih fleksibel. Kita tidak perlu
mendefinisikan jenisnya ketika mendefinisikan
pertama kali. Ada 6 tipe data dasar yang dapat
diakomodasi di PHP, seperti terlihat di tabel.
Tipe Contoh Penjelasan
Integer 134 Semua angka bukan pecahan
Double 5.1234 Nilai pecahan
String “asep” Kumpulan karakter
Boolean False Salah satu nilai True atau False
Object Sebuah instance dari class
Array Larik
 Contoh Soal
• Contoh06.php:
 Konstanta
• Selain variable, sebuah program umumnya
juga memungkinkan adanya konstanta.
Konstanta fungsinya sama seperti variable
namun nilainya statis/konstan dan tidak bisa
berubah. Cara untuk mendefinisikan
konstanta adalah :
• Define (“NAMA_KONSTANTA”, nilai_konstanta);
 Komentar
• Program merupakan kegiatan menuliskan
bahasa yang dipahami oleh mesin. Walaupun
bahasa yang digunakan adalah bahasa tingkat
tinggi, namun tent masih tidak semudah
dipahami oleh bahasa biasa. Untuk itu kita
bisa menggunakan komentar. Berikut ini
contoh pembuatan komentar di php.
 Lanjutan…
//komentar satu baris
#ini juga komentar satu baris
/*komentar
Banyak baris
Kode di sini tidak
Dieksekus oleh parser */
 Contoh script konstanta & komentar
• Contoh07.php

Deklarasi komentar

Deklarasi konstanta
 Hasil Contoh 07

• Hasil :
 Perbedaan HTML dengan PHP
• HTML dapat diakses langsung tanpa melalui akses server saat
ada permintaan dari client(browser)
• PHP harus di akses melalui server saat ada permintaan dari
client(browser)

• Dari 2 contoh diatas, kalian bisa menebak mana yang html,

mana yang php, tanpa melihat extension dari nama filenya?
 Tugas 02
• Buatlah Script program sehingga muncul
tulisan seperti di gambar berikut
PERTEMUAN 4

OPERATOR
 Operator
• Sebuah bahasa pemrograman juga wajib untuk
mampu mengolah nilai operand (variable atau
konstanta yang dioperasikan) menggunakan
operator, seperti menjumlah, membagi, dan
sebagainya.
 Lanjutan…
• Operator merupakan symbol yang berfungsi
untuk melakukan aksi / operasi tertentu
terhadap nilai operand yang pada umumnya
dari hasil operasi tersebut menghasilkan nilai
baru. Sementara operand adalah nilai yang
dilibatkan dalam operasi oleh operator.
 Jenis-Jenis Operator
• Operator Aritmatika
Operator ini digunakan untuk melakukan perhitungan
matematika, sebagian berikut :

Operator Nama Contoh Hasil

+ Penambahan 1+4 5
- Pengurangan 1-4 -3
/ Pembagian ¼ 0.25
* Perkalian 1*4 4
% Sisa Pembagian 5%2 1
++ Inkremen X=5; X++ X=6
- Dekremen X=5; X- X=4
Contoh operatoraritmatika.php
Hasilnya :
 Operator Perbandingan
Operator perbandingan digunakan untuk menghasilkan 2
nilai yang hasil akhirnya adalah nilai Boolean true dan false.
Operator ini sangat berguna dalam pemrograman karena
bisa menentukan arah pemrograman. Operator
perbandingan di PHP adalah :
Operator Nama Contoh Hasil
== Sama dengan 6==6 False
!= Tidak sama dengan 3!=3 False
> Lebih besar 1>5 False
>= Lebih besar atau sama dengan 3>=4 False
< Lebih kecil 2<4 True
<= Lebih kecil atau sams dengan 5<=4 False
 Contoh
operatorperbandingan.php
Hasil :
 Operator Logika
Operator untuk menyusun kalimat ekspresi/ungkapan logika.
Hasil operasi ini akan didapatkan nilai satu jika benar dan nol
jika salah.

Operator Fungsi
AND atau && Operasi logika AND
OR atau || Operasi logika OR
XOR Operasi logika eksklusife OR
! Ingkaran/negasi
Contoh operatorlogika.php
Hasilnya :
 Operator String

Dalam PHP juga tersedia operator string, yaitu digunakan

untuk operasi penggabungan teks. Adapun symbol yang
digunakan yaitu berupa karakter titik (.).
 Contoh operatorstring.php

Hasilnya :
 Latihan Operator
• Buat script menggunakan bahasa pemrograman PHP untuk
menghitung volume Kubus menggunakan fungsi operator
aritmatika dan operator string dengan ketentuan sebagai
berikut :
• Panjang sisi kubus = 15cm
• Hitung volume balok dengan rumus = sisi x sisi x sisi
• Buat variable teks1 yang berisi = “Belajar Menghitung” dan
teks2 yang berisi = “Volume Kubus”. Buat perintah untuk
menggabungkan nilai dari variable teks1 dan teks2
menggunakan operator string.
Tampilan Hasil
 PERTEMUAN 5

PENGENALAN FORM
 Komponen Form
• Dalam FORM HTML terdapat beberapa
komponen yang bisa digunakan, antara lain :
Lanjutan…
Lanjutan…
ContohForm.php
 Hasil ContohForm.php

• Ketika anda input nama dan ada klik proses, maka tampilannya menjadi

Contoh kita inputkan nama Bima Bintang Galaxy, lalu kita klik tombol proses
Maka nama yang di inputkan di tampilkan pada web browser.
Nah bagaimana jika kita dapat membuat nama yang kita input dapat di
tampilkan dihalaman web lain ???
 HTTP Server
• Dari contohform.php, maka kita akan mempelajari atribut
action dan method. Action menjelaskan ke halaman yang
digunakan untuk memproses input, sementara method
digunakan untuk mengatur cara mem-parsing konten
• Web menerima input dari user atau pengunjung
menggunakan metode GET dan POST. GET akan mengirimkan
data bersama dengan URL, sedangkan POST akan
mengirimkannya secara terpisah. User mengirimkan data
input dengan mengisi teks atau pilihan pada attibut form
html.
• Methode GET dan POST inilah yang merupakan bagian dari
HTTP Server dimana kita bisa mengirimkan dan menerima
data antar halaman web
 Proses Form menggunakan Metode GET
• metodeget.php

Hasilnya :
 Lanjutan…
• Buat file untuk memproses variable yang diberikan
oleh file metodeget.php, beri nama filenya :
metodegetproses.php
 HASIL

Karena menggunakan
metode GET, data
dikirmkan bersama
dengan URL
 Proses Form menggunakan metode : POST

• Untuk membuat inputan, dan beri nama file :

metodepost.php
 Lanjutan…
• Buat file untuk
memproses variable
yang diberikan oleh
file metodepost.php
beri nama filenya :
metodepostproses.p
hp
Karena
menggunakan
metode POST, data
tidak dikirmkan
bersama dengan URL
 Latihan
• Buat file untuk menampilkan form input dan output
seperti gambar di bawah ini. Simpan dengan nama :
forminputkomentar.php dan tampilkomentar.php
Form Input :
 Output
Form Output :
 PERTEMUAN 6

FORM LANJUTAN
 Latihan Pembuatan Form 2
Form input :
 Latihan Pembuatan Form 2
Script forminputmahasiswa.php :
FORM OUTPUT
 FORM OUTPUT
Script tampilmahasiswa.php :
 Contoh Pembuatan Form dengan Input, Proses, dan
Output Dalam Satu File

Contoh formdatadiri.php
 Lanjutan….

Contoh formdatadiri.php
Tampilan Input
Tampilan Output
 TUGAS 03
•Buat script program untuk membuat form input dengan data sbb :
 PERTEMUAN 7
PERCABANGAN
 Pernyataan Seleksi
• Sebagian besar bahasa pemrograman
mengandung pernyataan seleksi. Pada
dasarnya pernyataan seleksi adalah suatu
mekanisme yang menjelaskan apakah
pernyataan akan dikerjakan atau tidak, hal ini
tergantung kondisi yang dirumuskan. Dalam
bahasa pemrograman PHP pernyataan seleksi
diterapkan dengan menggunakan statement IF
dan Switch Case.
 Statement IF
• If Tunggal
Bentuk umun Statement IF adalah sebagai berikut :
If ( kondisi )
{
Statement;
}
Prinsip kerjanya adalah perintah di atas akan
dikerjakan apabila kondisi bernilai TRUE atau benar,
sedangkan jika kondisi salah / FALSE maka statement di
atas tidak akan dikerjakan
 IF… ELSE
• Pernyataan IF dan Else
Pernyataan ELSE merupakan bagian dari pernyataan if.
Else digunakan untuk memberikan alternative perintah
apabila kondisi bernilai salah / FALSE.
Bentuk umum :
If ( kondisi )
{
Statement_1;
}
Else
{
Statement_2;
}
 Percabanganifelse.php

Hasilnya :
 IF Majemuk
• Pernyataan IF , ElseIf dan Else
Jika pernyataan else memberikan alternative pilihan kedua, maka
untuk pernyataan ElseIf dapat digunakan untuk meumuskan banyak
alternative pilihan (lebih dari dua pilihan).
Bentuk umum :
Elseif ( kondisi_3)
If ( kondisi_1 )
{
{
Statement_3;
Statement_1;
}
}
Else
Elseif ( kondis_2)
{
{
Statement_n;
Statement_2;
}
}
Percabanganifmajemuk.php
 Statement Switch
• Statement untuk pengatur alur program
berikutnya adalah switch. Salah satu keuntungan
switch adalah ada bisa langsung mengevaluasi
satu statement dan memerintahkan aksi dalam
jumlah yang lebih banyak.
Bentuk umum :
Switch ( nilai_ekspresi ){
Case nilai_1 : statement_1; break;
Case nilai_2 : statement_2; brea;
Default: statement_n;}
Percabanganswitchcase.php
 TUGAS 04
Tampilan Input Tampilan Output

Ketentuan Soal :
Jika Nilai 1 dan 2 = 0 maka tidak ada hasil perhitungan
Jika Nilai 1 dan 2 terisi nilai maka
Jika memilih perhitungan rumus Segitiga (1/2*(nilai 1*nilai2))
Jika memilih perhitungan rumus Persegi Panjang (nilai 1*nilai2)
PERTEMUAN 9

PERULANGAN /
LOOPING
• Perulangan / looping (kadang juga disebut
iterasi) adalah sebuah instruksi program yang
memerintahkan suatu tugas diulang – ulang
berdasarkan kondisi tertentu.
 FOR
• Merupakan bentuk perulangan yang sangat
sederhana, dengan menggunakan fungsi ini,
anda dapat melakukan pengulangan data
sampai melampaui batas yang diinginkan.
• Bentuk Umum :
 ContohForForm.php
ContohFor.php
 WHILE
• Pada bentuk perulangan ini, pernyataan akan
terus dikerjakan apabila masih belum
mencapai batas perulangan.
• Bentuk Umum :
ContohWhile.php
 DO… WHILE
• pernyataan akan dikerjakan terlebih dahulu
sebelum melakukan pengecekan batas
perulangan. Apabila masih belum mencapai
batas perulangan maka pengulangan akan
terus dilakukan.
• Bentuk Umum :
ContohDoWhile.php
 FOREACH
• perulangan yang dilakukan untuk blok kode
dari setiap elemen yang ada di array.
• Bentuk Umum :
ContohForeach.php
PERTEMUAN 10

JAVASCRIPT
• Javascript adalah bahasa script yang populer di internet dan
dapat bekerja di sebagian besar penjelajah web browser
seperti Internet Explorer (IE), Mozilla Firefox, Netscape, opera
dan web browser lainnya. Kode javascript biasa dituliskan
dalam bentuk fungsi (Function) yang ditaruh di bagian dalam
tag <head> yang dibuka dengan tag <script language =”
javascript”>
• Isi dari script javascript sama dengan konsep yang sudah
dipelajari dalam materi PHP, yakni ada deklarasi variabel,
penggunaan operator, percabangan, looping, dan fungsi. Di
dalam java script juga sebuah komponen Alert yang digunakan
untuk menampilkan kotak pesan pada browser ketika
fungsinya di jalankan.
 Latihan Javacsript :
•Menuliskan teks = contohjs1.html

•Memformat teks dengan tag HTML = contohjs2.html

•JavaScript yang diletakkan pada bagian HEAD = contohjs3.html

•JavaScript yang diletakkan pada bagian BODY = contohjs4.html

• Fungsi = contohjs5.html
•Fungsi dengan argumen = contohjs6.html
•Memunculkan tanggal lengkap = contohjs7.html
 PERTEMUAN 11

CSS
CASCADING STYLE SHEET
 CSS
• CSS = Cascading Style Sheets ( Bahasa lembar
Gaya ). CSS merupakan bahasa yang
• digunakan untuk mengatur tampilan suatu
dokumen yang ditulis dalam bahasa markup /
markup language. Jika kita berbicara dalam
konteks web, bisa di artikan secara bebas
sebagai : CSS merupakan bahasa yang
digunakan untuk mengatur tampilan / desain
suatu halaman HTML.
Beberapa hal yang dapat dilakukan dengan CSS.
• Perancangan desain text dapat dilakukan dengan
mendefinisikan fonts (huruf) , colors (warna),
margins (ukuran), latar belakang (background),
ukuran font (font sizes) dan lain-lain. Elemen-
elemen seperti colors (warna) , fonts (huruf),
sizes (ukuran) dan spacing (jarak) disebut juga
“styles”.
• Cascading Style Sheets juga bisa berarti
meletakkan styles yang berbeda pada layers
(lapisan) yang berbeda
Ada 3 cara untuk memasang CSS pada dokumen
HTML yaitu:
1. External Style Sheet
Aturan CSS disimpan pada suatu file sehingga
terpisah dari dokumen HTML. Kemudian tambahkan
kode pemanggilan file CSS dalam dokumen HTML.
Akhiran file CSS adalah .css
2. Internal Style Sheet
Aturan CSS ditulis pada bagian HEAD dokumen HTML
menggunakan tag <style>
3. Inline Style Sheet
Aturan CSS ditulis langsung pada tag HTML yang
akan diatur tampilannya menggunakan atribut
style:
 Syntak CSS

Aturan CSS terdiri 2 bagian: • Declaration

• Selector Berisi aturan-aturan css yang terdiri dari properti
Biasanya berupa tag HTML, id, class dan nilainya yang dipisahkan oleh tanda titik dua.
Setiap aturan css harus diakhiri dengan tanda
id menggunakan tanda # didepan nama
titik koma.
selector
class menggunakan tanda titik didepan
nama selector
contoh :
h1 { color : blue ; } ➔ tag html h1
#teks { color :green; } ➔ id
.warna { color : red; } ➔ class
• Selector ID dan Class pada CSS
Untuk selector id pada css ditandai dengan
tanda #(pagar) contoh penulisan seperti
berikut :

• Penggunaanya dalam script HTML :

• Class pada CSS
Untuk selector class pada css ditandai dengan
tanda .(titik) contoh penulisan seperti berikut :

• Penggunaanya dalam script HTML :

 Pseduo-Class
Adalah sebuah kelas semu yang dimiliki oleh elemen HTML, yang
membuat kita dapat mendefinisikan style pada keadaan tertentu
dari elemen tersebut. Pseduo-class terbagi menjadi beberapa
type, sebagai berikut :
Pseduo-Class
 Latihan CSS
Salin script berikut, simpan dengan nama
style_css.css dalam folder modul_web1
Latihan CSS
 Latihan CSS
Salin script berikut, simpan dengan nama latihan_css.html dalam
folder modul_web1
 Latihan CSS
Lihat latihan_css.html di web browser
 PERTEMUAN 12

Membangun Web
Responsive
 Persiapan Awal
• Tentukan Tema web yang akan dibuat
– Tema web perpustakaan
• Sketsa Rancangan Tampilan dari web yang
akan di buat
 Lanjutan
• Tentukan CSS yang akan digunakan.
– Web responsive berarti web yang tampilannya
mengikuti ukuran layar gadget yang di gunakan untuk
akses web tersebut
– Buat folder di xampp/htdocs dengan nama : perpus
– Didalam folder perpus, siapkan 2 buah folder :
• images ➔ untuk simpan gambar
• css ➔ untuk simpan file css
– Buka editor, salin script css berikut : simpan dengan
nama style.css
 Lanjutan
• style.css

1
 Lanjutan
• style.css

3
 Lanjutan
• style.css

5
 Lanjutan
• style.css

7
 Lanjutan
• style.css

9
 Menu utama
• Simpan di dalam folder perpus : Index.html
 Menu utama
• Index.html
Menu utama
 PERTEMUAN 13 DAN 16

PRESENTASI TUGAS KELOMPOK

 PERTEMUAN 13 DAN 16

PRESENTASI TUGAS KELOMPOK

 PERTEMUAN 13 DAN 16

PRESENTASI TUGAS KELOMPOK

 PERTEMUAN 13 DAN 16

PRESENTASI TUGAS KELOMPOK