PENGEMBANGAN WEB DASAR

MULAI MATERI
Introduction
Learning Method
Assesment
Contoh Website
 Table Of Content
Konsep Dasar HTML
HTML CSS CSS Lanjutan
Website Lanjutan

jQuery Pengenalan
jQuery Ajax CSS Lanjutan UTS
Lanjutan jQuery

Framework
Framework
Bootstrap UAS
Bootstrap
Lanjutan
PERTEMUAN 1
KONSEP DASAR WEBSITE
Tujuan & Target Pembelajaran
 Highlight
Mekanisme kerja
website
Komponen Pemanfaatan
pembangun web pada real
sebuah website world

Pengenalan text
Pengenalan Web
Programing Website editor dan layout
editor
Pengenalan Web Programing
 Pembagian Web Programing
HTML (HyperText Markup Language)
PHP (PHP HyperText Preprocessor)
Java
JavaScript
Skenario Kinerja Website
Cara Kerja Web Browser
Browser web mengambil sebuah informasi
melalui jaringan internet pada sebuah server
web dengan perintah request.

Server web memberikan umpan balik atau

feedback, dengan memberi perintah responen

Browser web menampilkan informasi yang

telah diterima dari server web.
Fungsi Website
 Komponen Pembangun Website
• Web Editor
• Web Browser
• Web Server
 Pemanfaatan Web pada Real
World
Alasan adanya website ??
 Studi Case
 Sebutkan website yang anda jadikan sebagai
media transaksi.
 Bagaimana pendapat anda terhadap website
tersebut dari segi kenyamanan transaksi.
 Jelaskan dan berikan contoh jenis-jenis website
 Download dan pelajari sebuah text editor yang
akan digunakan dalam pembuatan coding
website.
PERTEMUAN 2
PRINSIP DASAR DESAIN WEBSITE
 Tujuan & Target Pembelajaran
• HYPERTEXT MARK UP LANGUAGES (HTML)
 Highlight

Element layout

Merumuskan
tujuan membuat Pewarnaan
website

Prinsip
Prinsip-prinsip
desain web Desain Typografi
Website
Fenomena
Prinsip – Prinsip Desain Web

1. Unik
2. Komposisi
3. Simple
4. Semiotik
5. Ergonomis
6. Fokus
7. Konisisten
 Berdasarkan isi maupun tujuan, suatu website
biasanya dapat digolongkan menjadi seperti
berikut ini :

Marketing

Ecommerce
Customer Berita
Service
 Merumuskan Tujuan Membuat Website

Menentukan Isi Menentukan Target Menentukan Struktur

Website Pengunjung Website
Isi website sangatlah Target pengunjung
penting, hal ini akan Struktur website
berpengaruh terhadap diperlukan untuk
berkaitan dengan tampilan layout website
manfaat yang akan memberikan kemudahan
dan informasi yang akan dalam pengolahan
diperoleh pengunjung disampaikan didalam
website. website, jadi striktur
website terorganisir dengan baik
 Elemen Layout
Element layout menjadi suatu hal yang penting untuk mendapatkan
sebuah desain komunikatif, estetis dan ekonomis. Oleh sebab itu
diperlukan pedoman untuk mengatur tata letak tampilan.

• Keseimbangan
• Kontras
• Konsistensi
• Ruang Kosong
Keseimbangan
Keseimbangan Simetris (Formal)
Adalah keseimbangan yang memiliki
elemen yang bobotnya sama pada
dua sisi garis vertikal imajiner halaman
web. Sehingga bentuknya menjadi
terkesan formal, sederhana, mudah
pembuatannya tetapi terkesan
membosankan dan kurang menarik.

Keseimbangan Asimetris mempunyai

elemen yang tidak sama bobotnya
pada dua sisi dari garis vertikal
imajiner halaman web sehingga tata
letaknya tampak lebih dimanis
karena adanya ruang kosong,
berkesan santai dan kasual.
Kontras
Diperlukan untuk menonjolkan bagian
yang dianggap lebih penting dari
bagian lainnya. Kontras dapat
dinyatakan dengan membedakan
ukuran serta warna dari elemen –
elemen layout.

Pemberian kontras pada suatu objek

haruslah kontras positif, karena jika
kontras yang diberikan negatis maka
objek tersebut akan menjadi samar-
samar, bahkan tidak terlihat karena
terserap oleh background.
Konsistensi

Konsistensi membuat
pengunjung nyaman karena
dapat menjelajah situs dengan
mudah. Ketika pengunjung
membuka suatu halaman situs
yang konsisten, dia akan
langsung tahu kemana harus
pergi dan dia juga tahu dimana
sedang berada.
Ruang Kosong
Fungsi Ruang Kosong :

• Tempat istirahat mata pembaca

• Menghubungkan antar elemen dalam sebuah layout
• Menegaskan sebuah element
• Mempermudah pemahaman layout
• Membuat halaman tampak dinamis
• Mempermudah membaca text
Pewarnaan

Fungsi Pewarnaan :

• Menegaskan elemen yang dianggap penting.

• Menarik perhatian
• Membimbing pembaca untuk menentukan daerah yang akan dibaca
• Menghubungkan antar element
• Mengatur informasi yang akan ditampilkan
• Menentukan bagian yang berbeda pada sebuah grafik
• Membangkitkan respon emosional
Typography

Tipografi adalah seni dalam huruf yang meliputi

pemilihan huruf, penentuan ukuran yang tepat,
dimana teks dapat diputus, spasi jarak, dan
bagaimana teks dapat dengan mudah dibaca.
Pembuatan Layout

Berikut ini merupakan proses secara umum banyak

dilakukan dalam pembuatan layout sebagai berikut :

• Membuat sketsa desain

• Membuat layout desain
• Membagi gambar menjadi potongan – potongan kecil
• Membuat animasi
• Membuat HTML
Kriteria Situs yang Baik

Berikut ini merupakan kriteria situs yang baik harus

diperhatikan beberapa aspek, antara lain :

• Usability
• Navigasi
• Grafik Desain
• Content
• Compatibilty
• Loading Time
• Functionality
PERTEMUAN 3
HYPERTEXT MARKUP LANGUAGE
(HTML)
Tujuan & Target Pembelajaran
 Highlight
Pemanfaatan HTML
Sintag HTML untuk membuat
website statis.

Pemanfaatan HTML
Konsep dasar
untuk layout
markup language
HTML dokumen.
 Pengenalan HTML
Apa itu HTML ?
HTML kependekan dari Hyper Text Markup Language. yang
artinya tata cara penulisan yang digunakann dalam
dokumen web. Dokumen HTML adalah sebuah dokumen
text murni yang dapat dibuat dengan editor web
sembarangan seperti notepad.

Dokumen ini akan dijalankan oleh sebuah web browser

misalnya internet explorer, mozilla ataupun opera.
Sehingga mampu menampilkan tampilan sesuai keinginan
designer atau programer web. Tag HTML tidak case
sensitive.

HTML itu bukan merupakan bahasa pemrograman seperti

yang selama ini dikenal, karena pada html tidak bisa
dilakukan operasi logika, aritmatika dan sebagainya.
 Apa yang dibutuhkan ???

Web Editor Web Browser

Web browser adalah suatu
Web editor adalah aplikasi program perangkat lunak
perangkat lunak yang yang digunakan untuk
berfungsi untuk membuat menjelajahi internet.
halaman web
Struktur Dasar Bahasa HTML

HTML, setiap dokumen HTML dimulai

<HTML> dan diakhiri dengan tag
</HTML> yang menyatakan bahwa
suatu dokumen adalah dokumen
HTML.

Head. Bagian header dokumen HTML,

secara umum berisi informasi
mengenai dokumen.

Body. Merupakan isi dokumen

sebenarnya
 Perintah Dasar HTML - Paragraph

Paragraph
Digunakan untuk
memberi pengaturan
paragraf pada text yang
akan ditampilkan.

Dialawli dengan <p>

Diakhiri dengan </p>
Perintah Dasar HTML - Headline
Perintah Dasar HTML – Format Text
Perintah Dasar HTML – Format Text
 Perintah Dasar HTML – Pre Formatted Text

Merupakan tag yang digunakan untuk membuat satu blog tulisan yang tata letaknya dapat kita atur sesuai dengan
keinginan kita dan sesuai dengan tampilan pada saat pembuatan.
 Perintah Dasar HTML – List Item
List adalah sebuah uraian yang terdiri atas item-item dari suatu daftar yang dilengkapi dengan nomor baik nomor
alfabetik ataupun numerik. Dalam HTML terdapat 2 bentuk daftar atau List, yaitu :
1. Unordered List / List Tanpa Nomor
2. Ordered List / List Bernomor
PERTEMUAN 4
HYPERTEXT MARKUP LANGUAGE
(HTML)
Tujuan & Target Pembelajaran
 Highlight

Formating Link Formating Tables

Formating Image Formating Form

HTML
 Perintah Dasar HTML – Image (Gambar)
Image atau gambar didalam dokumen HTML berfungsi untuk menambah daya tarik dari sebuah
website. Pada umumnya, gambar yang ditampilkan pada halaman web akan disajikan bersama
teks dari halaman web tersebut.
 Perintah Dasar HTML – Link (Hyperlink)
Dokumen HTML dilengakapi dengan kemampuan yang berpindah-pindah dari halaman satu ke
halaman lainnya (link). Link dalam halaman HTML ditandai dengan menggaris bawahi teks yang
akan di link, atau pointer mouse akan berubah menjadi bentuk jari apabila berada pada objek link
atau (gambar/text).
<a href=”nama dokumen yang dilink” [atribut] >..text/gambar...</a>
 Perintah Dasar HTML – Table
Tabel adalah sebuah sarana untuk menginformasikan data-data berupa baris dan kolom. Pada
umumnya setiap kolom menunjukan data-data yang sama dalam suatu kelompok data.
 Perintah Dasar HTML – Form
Form dalam HTML adalah input atau masukan dari pengguna yang kemudian diproses untuk
mendapatkan hasil yang diinginkan pengguna, seperti proses penyimpanan, proses edit, proses
hapus dan browse.
PERTEMUAN 5
CASCADING STYLE SHEET (CSS)
Tujuan & Target Pembelajaran
 Highlight

Sintaks dasar CSS

CSS layout
dokumen pada
Konsep dasar CSS lingkungan
website (CSS
Property)

CSS
(Cascading
Style Sheet)
 Konsep Dasar CSS

Kerangka Rumah Rumah Jadi

Definisi CSS
Cascading Style Sheet atau sering disebut
CSS secara sederhana adalah sebuah
metode yang digunakan untuk
mempersingkat penulisan tag HTML, seperti
font, color, text, dan tabel menjadi lebih
ringkas sehingga tidak terjadi pengulangan
penulisan.

CSS adala bahasa style sheet yang

digunakan untuk mengatur tampilan
dokumen. Dengan adanya CSS,
memungkinkan kita untuk menampilkan
halaman yang sama dengan format
berbeda.
Kegunaan CSS
Kegunaan

• Mempersingkat penulisan tag HTML

• Mempercepat proses rendering atau pembacaan HTML
• Mudah dan cepat dalam memaintenance
• CSS bisa melakukan apa yang tidak bisa dilakukan oleh HTML

Keuntungan
•update tampilan lebih mudah
• beban bandwidth kecil
• modifikasi web template lebih mudah
• Search engine friendly
• lebih mudah digunakan pada mobile phone
Kekurangan CSS
Kekurangan
tampilan web dengan CSS terlihat baik di browser yang
satu, tapi berantakan di browser yang lain. Jadi anda
harus memeriksa tampilan supaya terlihat baik di
semua browser dan menambahkan kode-kode khusus
browser tertentu jika memang dibutuhkan agar
tampilan web anda terlihat baik di semua browser.

Kemampuan CSS

• Mengatur posisi secara absolute

• Mengubah warna
• Mengubah besar font
• Mengubah margin
• Dan seluruh selektor pada kode HTML
 Sintak Dasar CSS
Inline Style Sheet

CSS metode ini mendefinisikan langsung

pada HTML yang bersangkutan. Cara
penulisannya cukup dengan
menambahkan atribut style=”…..” dalam
tag HTML tersebut.

Style hanya berlaku pada tag yang

bersangkutan, dan tidak akan
mempengaruhi tag HTML yang lainnya.
 Sintak Dasar CSS
Embedded Style Sheet
CSS didefinisikan terlebih dahulu
dalam tag <style>……</style> diatas
<body>.

Pada definisi ini disebutkan atribut-

atribut CSS yang akan digunakan
untuk tag-tag HTML, yang selanjutnya
dapat digunakan oleh tag HTML yang
bersangkutan.
 Sintak Dasar CSS
Linked Style Sheet

Metode ini hampir sama dengan metode

Embedded Style Sheet, hanya saja
pendefinisian tag <style>…..</style> dibuat
pada file terpisah dari file HTML yang
membutuhkan CSS. Kemudian file lain
tersebut disimpan dalam format .css

Pada file HTML yang akan menggunakan

file CSS, harus dibuat tag <link> yang
dituliskan diantara tag <head>……</head>
 Sintak Penulisan CSS

• Di dalam penulisan CSS ada dua bagian utama yaitu

selektor dan satu atau lebih deklarasi.

• Selektor biasanya adalah elemen HTML yang akan di

format tampilannya.

• Setiap deklarasi terdiri dari bagian properti dan nilai

dari properti tersebut.

• Properti adalah atribut yang akan kita rubah. Setiap

properti mempunyai nilai.
 Properti CSS - Font
Properties Value Keterangan

Font-size Xx-small, x-small, small, medium, large, x- Mengatur ukuran font

large, xx-large, smaller, lager, length, %
Font-weight Normal, bold, bolder, lighter Mengatur tebal atau tipisnya text.
Contoh : font-weight : 500
Font-family Family-name, Generic-family Mengatur daftar font yang digunakan
Contoh : font-family : arial, tahoma, verdana
Font-style Normal, italc, oblique Mengatur style font misalnya akan dibuat miring
 Properti CSS - Text
Properties Value Keterangan

Text-align Left, right, center, justify Mengatur perataan text

Text-decoration None, underline, overline, line-through, Mengatur dekorasi teks misalnya memberi garis
blink bawah atau menghilangkan garis bawah pada link.
Text-indent Length, % Teks akan menjorok kekanan sesuai lebar yang
diinginkan.
Text-transform None, capitalize, uppercase, lowercase Mengatur tampilan teks yang akan tampak pada
browser apakah huruf kapital atau huruf kecil semua.
Color Color-rgb, color-hex, color-name Memberi warna pada text
 Properti CSS – List Item
Properties Value Keterangan

List-style-position Inside, outside Mengatur tempat item yang akan dibuat pada list
tersebut
List-style-image None, URL Menggunakan image sebagai list setiap item, contoh :
List-style-image : url(“a.gif”)
List-style-type None, disc, circle, square, decimal, Mengatur type item list. Misalnya list menggunakan
decimal-leading, lower-roman, upper- tipe lingkaran atau kotak pada list.
roman, lower-alpha, upper-alpha, lower-
greek, lower-latin, upper-latin
 Properti CSS - Border
Properties Value Keterangan

Border-style Solid, dotted, dashed, double, groove, Mengatur style garis pada border
ridge, inset, outser
Border-size Auto, length, % Mengatur besarnya ukuran garis

Border-color rgb, hex, name Mengatur warna boder

Border-left Auto, length, % Memberikan garis pada sisi kiri

Border-rigt Auto, length, % Memberikan garis pada sisi kanan

Border-top Auto, length, % Memberikan garis pada sisi atas

Border-bottom Auto, length, % Memberikan garis pada sisi bawah

 Properti CSS - Margin
Properties Value Keterangan

Margin Auto, length, % Mengatur margin.

Contoh : margin : 10px;
Margin-left Auto, length, % Mengatur margin sisi kiri

Margin-right Auto, length, % Mengatur margin sisi kanan

Margin-bottom Auto, length, % Mengatur posisi sisi bawah

Margin-top Auto, length, % Mengatur posisi sisi atas

 Properti CSS - Padding
Properties Value Keterangan

Padding Auto, length, % Mengatur padding.

Contoh : padding : 10px;
Padding-left Auto, length, % Mengatur padding sisi kiri

Padding-right Auto, length, % Mengatur padding sisi kanan

Padding-bottom Auto, length, % Mengatur padding posisi sisi bawah

Padding-top Auto, length, % Mengatur posisi sisi atas

PERTEMUAN 6-7
CASCADING STYLE SHEET (CSS)
Tujuan & Target Pembelajaran
 Highlight

Sintaks dasar CSS

CSS layout
dokumen pada
Konsep dasar CSS lingkungan
website (CSS
Property)

CSS
(Cascading
Style Sheet)
 Konsep Dasar CSS

Kerangka Rumah = HTML Rumah Jadi = CSS

Pengenalan CSS
Definisi CSS

CSS adalah singkatan dari Cascading Style Sheets.

CSS (Cascading Style Sheet) secara sederhana adalah sebuah

metode yang digunakan untuk mempersingkat penulisan tag
HTML, seperti font, color, text, dan tabel menjadi lebih ringkas
sehingga tidak terjadi pengulangan penulisan.

CSS adala bahasa style sheet yang digunakan untuk mengatur

tampilan dokumen. Dengan adanya CSS, memungkinkan kita
untuk menampilkan halaman yang sama dengan format
berbeda.
Kegunaan CSS
Kegunaan
• Mempersingkat penulisan tag HTML
• Mempercepat proses rendering atau pembacaan HTML
• Mudah dan cepat dalam memaintenance
• CSS bisa melakukan apa yang tidak bisa dilakukan oleh HTML

Keuntungan
•update tampilan lebih mudah
• beban bandwidth kecil
• modifikasi web template lebih mudah
• Search engine friendly
• lebih mudah digunakan pada mobile phone
Kekurangan CSS
Kekurangan
tampilan web dengan CSS terlihat baik di browser yang satu, tapi
berantakan di browser yang lain. Jadi anda harus memeriksa
tampilan supaya terlihat baik di semua browser dan
menambahkan kode-kode khusus browser tertentu jika memang
dibutuhkan agar tampilan web anda terlihat baik di semua
browser.

Kemampuan CSS

• Mengatur posisi secara absolute

• Mengubah warna
• Mengubah besar font
• Mengubah margin
• Dan seluruh selektor pada kode HTML
 Metode Penulisan CSS
Inline Style Sheet

CSS metode ini mendefinisikan langsung pada

HTML yang bersangkutan. Cara penulisannya
cukup dengan menambahkan atribut style=”…..”
dalam tag HTML tersebut.

Style hanya berlaku pada tag yang bersangkutan,

dan tidak akan mempengaruhi tag HTML yang
lainnya.
 Metode Penulisan CSS

Embedded Style Sheet

CSS didefinisikan terlebih dahulu dalam tag

<style>……</style> diatas <body>.

Pada definisi ini disebutkan atribut-atribut

CSS yang akan digunakan untuk tag-tag
HTML, yang selanjutnya dapat digunakan
oleh tag HTML yang bersangkutan.
 Metode Penulisan CSS
Linked Style Sheet

Metode ini hampir sama dengan metode

Embedded Style Sheet, hanya saja
pendefinisian tag <style>…..</style> dibuat
pada file terpisah dari file HTML yang
membutuhkan CSS. Kemudian file lain
tersebut disimpan dalam format .css

Pada file HTML yang akan menggunakan file

CSS, harus dibuat tag <link> yang dituliskan
diantara tag <head>……</head>
 Syntak Penulisan CSS

• Di dalam penulisan CSS ada dua bagian utama yaitu

selektor dan satu atau lebih deklarasi.

• Selektor biasanya adalah elemen HTML yang akan di

format tampilannya.

• Setiap deklarasi terdiri dari bagian properti dan nilai

dari properti tersebut.

• Properti adalah atribut yang akan kita rubah. Setiap

properti mempunyai nilai.
 Properti CSS - Background
Properties Value Keterangan

Background-attachment Scroll, Fixed Mengatur background, tetap ditempat atau digulung

Background-color Color-rgb, Color hex Mengtur warna background

Color-name, Transparent Contoh :
Background-color : red (name)
Background-color : 244,0,0 (rgb)
Background-color : #ff000 (hex)
Background-repeat Repeat, Repeat-x Mengatur background, diulang keseluruh halaman
Repeat-y, No-repeat browser secara penuh atau tidak.
Background-position Top left, top center, top right, center left, Mengatur posisi gambar
center right, bottom left, bottom center,
x-%, y-%, x%-pos, y-pos
Background-image URL, none Mengatur gambar sebagai background, contohnya :
Background-image : url(“a.jpg”);
 Properti CSS - Font
Properties Value Keterangan

Font-size Xx-small, x-small, small, medium, large, x- Mengatur ukuran font

large, xx-large, smaller, lager, length, %
Font-weight Normal, bold, bolder, lighter Mengatur tebal atau tipisnya text.
Contoh : font-weight : 500
Font-family Family-name, Generic-family Mengatur daftar font yang digunakan
Contoh : font-family : arial, tahoma, verdana
Font-style Normal, italc, oblique Mengatur style font misalnya akan dibuat miring
 Properti CSS - Text
Properties Value Keterangan

Text-align Left, right, center, justify Mengatur perataan text

Text-decoration None, underline, overline, line-through, Mengatur dekorasi teks misalnya memberi garis
blink bawah atau menghilangkan garis bawah pada link.
Text-indent Length, % Teks akan menjorok kekanan sesuai lebar yang
diinginkan.
Text-transform None, capitalize, uppercase, lowercase Mengatur tampilan teks yang akan tampak pada
browser apakah huruf kapital atau huruf kecil semua.
Color Color-rgb, color-hex, color-name Memberi warna pada text
 Properti CSS – List Item
Properties Value Keterangan

List-style-position Inside, outside Mengatur tempat item yang akan dibuat pada list
tersebut
List-style-image None, URL Menggunakan image sebagai list setiap item, contoh :
List-style-image : url(“a.gif”)
List-style-type None, disc, circle, square, decimal, Mengatur type item list. Misalnya list menggunakan
decimal-leading, lower-roman, upper- tipe lingkaran atau kotak pada list.
roman, lower-alpha, upper-alpha, lower-
greek, lower-latin, upper-latin
 Properti CSS - Border
Properties Value Keterangan

Border-style Solid, dotted, dashed, double, groove, Mengatur style garis pada border
ridge, inset, outser
Border-size Auto, length, % Mengatur besarnya ukuran garis

Border-color rgb, hex, name Mengatur warna boder

Border-left Auto, length, % Memberikan garis pada sisi kiri

Border-rigt Auto, length, % Memberikan garis pada sisi kanan

Border-top Auto, length, % Memberikan garis pada sisi atas

Border-bottom Auto, length, % Memberikan garis pada sisi bawah

 Properti CSS - Margin
Properties Value Keterangan

Margin Auto, length, % Mengatur margin.

Contoh : margin : 10px;
Margin-left Auto, length, % Mengatur margin sisi kiri

Margin-right Auto, length, % Mengatur margin sisi kanan

Margin-bottom Auto, length, % Mengatur posisi sisi bawah

Margin-top Auto, length, % Mengatur posisi sisi atas

 Properti CSS - Padding
Properties Value Keterangan

Padding Auto, length, % Mengatur padding.

Contoh : padding : 10px;
Padding-left Auto, length, % Mengatur padding sisi kiri

Padding-right Auto, length, % Mengatur padding sisi kanan

Padding-bottom Auto, length, % Mengatur padding posisi sisi bawah

Padding-top Auto, length, % Mengatur posisi sisi atas

PERTEMUAN 9
CASCADING STYLE SHEET (CSS),
JQUERY
Tujuan & Target Pembelajaran
 Highlight

Sintaks dasar CSS

CSS layout
dokumen pada
Konsep dasar CSS lingkungan
website (CSS
Property)

CSS
(Cascading
Style Sheet)
 Selektor Class

Selector class digunakan untuk menentukan

style dari sebuah group elemen. Selector
class bisa dipakai berulangkali pada sebuah
dokumen web.
Artinya sebuah nama class dapat dipanggil
beberapa kali pada elemen-elemen yang ada
pada sebuah halaman web.

Selector class dituliskan dengan ditandai

dengan tanda titik “.” .
 Selektor ID

Selector id digunakan untuk menentukan

style bagian unik dari html. Unik disini
artinya satu nama id hanya bisa digunakan
satu kali pada sebuah halaman web.

Apabila satu nama ID digunakan lebih dari

satu kali pada sebuah halaman, maka style
hanya akan berlaku pada id yang pertama
saja.
Selector ID pada syntax CSS ditandai
dengan “#”.
 Properti CSS – Pseudo Class
Pseudo Class digunakan untuk menambahkan efek khusus pada suatu selector.

Syntak Pseudo Class:

selektor:pseudo-class {properti:nilai;}

Contoh : a:hover { text-decoration : underline; }

 Properti CSS – Pseudo Class
Pseudo Class Contoh Keterangan

:link a:link Memilih semua link yang belum di kunjungi

:visited a:visited Memilih semua link yang telah dikunjungi

:active a:active Memilih semua link aktif

:hover a:hover Memilih link yang sedang di hover

:focus input:focus Memilih Input yang sedang di focus

:first-letter p:first-letter Memilih huruf pertama dari setiap paragraf

 Properti CSS – Pseudo Class
Pseudo Class Contoh Keterangan

:first-line p:first-line Memilih baris pertama dari setiap paragraph

:first-child p:first-child Memilih elemen pertama

:before p:before Memasukan content sebelum element selektor

:after p:after Memilih content setelah element selektor

 Study Kasus

Desainlah dengan menggunakan HTML

dan CSS halaman website dengan bentuk
layout seperti berikut ini dengan tema
“website sekolah”
Form Interaktif

Form interaktif adalah salah satu cara umum

untuk bertukar informasi dan melakukan
bisnis melalui internet atau intranet. Form
menyediakan struktur yang teratur untuk
memasukan data mengumpulkan sejumlah
besar data. Dengan adanya form maka
sebuah website dapat berfungsi
sebagaimana mestinya.
Komponen Form – Komponen Input

Komponen input digunakan untuk data yang

tidak terlalu panjang, ada 2 fungsi komponen
input .
1. Input Text
2. Input Password
Komponen Form – Komponen Input

Komponen selain inputan text yang terbatas

atau tidak telalu lebar, untuk melakukan
inputan berupa text bisa menggunakan
textarea.

Textarea bisa dipergunakan untuk melakukan

pengetikan data yang panjang dan cukup
banyak, misalnya : alamat, isi sebuah berita
atau komentar.
Komponen Form – Komponen Pilihan

Selain berupa inputan text biasanya form juga

terdiri dari sebuah komponen pilihan.

Komponen pilihan ada yang digunakan untuk

memilih lebih dari satu atau menggunakan
pilihan yang lebih dari satu pilihan.

Komponen pilihan bisa menggunakan

1. Checkbox
2. Combobox (list menu)
Komponen Form – Komponen Button (Tombol)

Tombol atau button adalah sebuah form pemicu

untuk mengirimkan data, selain untuk
mengirimkan data tombol juga banyak
kegunaannya antara lain untuk melakukan reset
data atau juga dapat dijadikan untuk
menghapus data yang biasanya tampil pada
kotak dialog box.
Study Kasus Form dengan HTML dan CSS

Berikut ini adalah sketsa form yang akan dibuat,

buatlah perintah HTML untuk membuat form
tersebut .

Setelah menyelesaikan bagian HTML selanjutnya

percantik form dengan menggunakan CSS
PERTEMUAN 10
JQUERY
Tujuan & Target Pembelajaran
 Highlight
Sintaks dasar
jQuery selektor
jQuery

Pengantar jQuery jQuery events.

jQuery
Introdution
 Definisi jQuery
• jQuery adalah javascript library, jQuery mempunyai
semboyan “write less, do more”. jQuery dirancang
untuk memperingkas kode-kode javascript.

• JQuery adalah javascript library yang cepat dan ringan

untuk menangani dokumen HTML, menangani event,
membuat animasi dan interakasi ajax. Jquery dirancang
untuk mengubah cara anda menulis javascript.
 Kemampuan jQuery
• Kemudahan mengakses elemen-elemen HTML
• Memanipulasi elemen HTML
• Memanipulasi CSS
• Penanganan event HTML
• Efek-efek javascript dan animasi
• Modifikasi HTML DOM
• AJAX
• Menyederhanakan kode javascript lainnya
 Sintak Dasar jQuery
• Sintaks jquery biasanya dibuat untuk memilih
elemen-elemen HTML dan melakukan aksi
terhadap elemen yang dipilih.
$(selector).action()
• Tanda dollar, untuk mendefinisikan jQuery
• (selector), untuk menunjukkan elemen yang dipilih atau dituju
• action(), adalah jQuery action yang akan dilakukan terhadap
elemen yang dipilih.
PERTEMUAN 11
JQUERY AJAX
Tujuan & Target Pembelajaran
 Highlight

pengenalan ajax

Pengetahuan fungsi-fungsi ajax

Dasar jQuery

jQuery Ajax
Introdution
 Definisi jQuery
• jQuery adalah javascript library, jQuery
mempunyai semboyan “write less, do more”.
jQuery dirancang untuk memperingkas kode-
kode javascript.

• JQuery adalah javascript library yang cepat dan

ringan untuk menangani dokumen HTML,
menangani event, membuat animasi dan
interakasi ajax. Jquery dirancang untuk
mengubah cara anda menulis javascript.
 Latihan
• Buatlah sebuah form untuk melakukan
proses pendaftaran.

• Gunakan jQuery untuk melakukan

validasi pada form.
PERTEMUAN 12
FRAMEWORK BOOTSTRAP
Tujuan & Target Pembelajaran
 Highlight

Penggunaan
framework
bootstrap
Pengenalan
framework
bootstrap Framework
Bootstrap
Pengenalan Framework Bootstrap
Bootstrap adalah framework ataupun tools untuk membuat aplikasi
ataupun situs web responsive secara cepat, mudah dan gratis.

Bootstrap merupakan framework untuk membangun desain web secara

responsif. Artinya, tampilan web yang dibuat oleh bootstrap akan
menyesuaikan ukuran layar dari browser yang kita gunakan baik di
desktop, tablet ataupun mobile device. Fitur ini bisa diaktifkan ataupun
dinon-aktifkan sesuai dengan keinginan kita sendiri. Dengan bootstrap
kita juga bisa membangun web dinamis ataupun statis.

Bootstrap terdiri dari CSS dan HTML untuk menghasilkan Grid Layout,
Typography, Table, Form, Navigation, dan lain-lain.

Bootstrap diciptakan oleh 2 orang programmer Twitter: Mark Otto dan

Jacob Thornton pada tahun 2011.

Dikenal pertama kali dengan nama Twitter Bootstrap  Bootstrap.

 Penggunaan framework bootstrap
Framework CSS yang cukup responsive salah satunya yaitu Framework Twitter Bootstrap, Berikut cara penggunaannya :

Persiapan:

 Pertama-tama langsung download file yang disediakan oleh bootstrap di situs resminya getbootstrap.com. Pada
halaman tersebut, terdapat tombol Download Bootstrap sebagaimana terlihat pada gambar diatas, langsung saja! klik
tombol tersebut. Kemudian pilih lagi Download Bootstrap.
 Setelah didownload, kemudian extract
Penggunaan framework bootstrap
 Setelah itu http://jquery.com/download/, Copy All, buat file dengan Notepad++ lalu beri nama "jquery.min.js".
Untuk bisa mengaplikasikan bootstrap component seperti modal dialog, navigation bar dan lainnya yang
membutuhkan boostrap JS, Bootstrap JS juga membutuhkan jQuery library agar bisa berjalan normal. Bootstrap tidak
menyertakan jQuery di dalam file download-nya untuk itu, kita harus mendownloadnya secara terpisah. Hal ini
dilakukan agar kita bisa bekerja dan menggunakannya secara offline (tanpa koneksi internet).
 Setelah selesai di download > Ectract file > buat folder di HTDOCTS > Folder dengan nama "Bootstrap" > Copy Paste isi
Extract file "css", 'fonts", "js" ke dalam Folder "Bootstrap".
Notes : Jangan lupa memasukan file "jquery.min.js" ke dalam folder "js".
Hasilnya akan seperti ini :
Penggunaan framework bootstrap
 Setelah itu buat index.html di dalam Folder Bootstrap, langkah selanjutnya kita akan memanfaatkan
Framework Bootstrap.
 Kunjugi Official Website LayoutIt http://www.layoutit.com/, setelah itu pilih Start Now with
Bootrsrap 3.
 Penggunaan framework bootstrap
 Silahkan lakukan editing pada layout yang diinginkan, setelah itu  Sebelumnya dalam index.html yang sudah kita buat, isinkan code
download Source Code Layout berikut untuk memanggil CSS Boostrap.
 Penggunaan framework bootstrap
 Selanjutnya kembali ke LayoutIt!, bila tidak ingin login klik  Setelah itu Copy lalu Paste Source Code yang didapatkan dari
Continue non logged. LayotuIt!, tempatkan diantara body untuk layout yang kita
lakukan editing.
 Penggunaan framework bootstrap
 Untuk lebih mudah pemahaman, kita lakukan Copy All saja dan tempatkan pada index.html yang kita buat tadi.

Notes : JQuery merupakan library yang harus

terdapat dalam CSS Bootstrap untuk melakukan
suatu eksekusi tertentu.

 Setelah itu save dan akses di localhost/Bootstrap.

PERTEMUAN 13-15
FRAMEWORK BOOTSTRAP LANJUTAN
Tujuan & Target Pembelajaran
 Highlight

Framework Bootstrap Lanjutan

Layout

Baris dan kolom

 Layout
Membuat Layout Responsive dengan Bootstrap
Untuk membuat layout responsive dengan menggunakan grid sistem, biar website yang dibuat bisa menyesuaikan platformnya, kita akan
bermain dengan grid yang menyesuaikan diri untuk ukuran layar yang berbeda-beda. Tampilan layout yang akan dibuat kira-kira seperti ini :

Sebelumnya, sebagai sedikit gambaran, Bootstrap membagi lebar layar

monitor menjadi 4 jenis :
 Extra Small (-xs-) : < 768px
 Small (-sm-) : 768px - 991px
 Medium (-md-) : 992px - 1199px
 Large (-lg-) : > 1200px
 Layout
Hal pertama yang dilakukan adalah menuju HTML dulu seperti biasa kita bikin layout yang dibagi jadi 4 bagian : Header, Slideshow, Content,
dan Footer. Masing-masing layout diberikan class .container didalamnya :

Pertama-tama, di bagian header kita akan mengisi 2 bagian. yaitu judul

website disebelah kiri, dan navigasi di sebelah kanan untuk layar lebar
(>=768px). Akan tetapi,, untuk layar kecil akan kita atur supaya judul
dan navigasi menjadi item yang menumpuk kebawah.

Sebelum lebih lanjut, kita harus tau dulu kalau Bootstrap menyediakan
jumlah grid dalam 1 baris sebanyak 12 grid. Kalau begitu, ketika kita
ingin membagi 1 baris menjadi 2 bagian (judul dan navigasi), kita harus
membagi 12 grid tersebut untuk 2 objek tersebut. pembagiannya bisa
4 grid judul + 8 grid navigasi, atau 5 grid judul + 7 grid navigasi, atau 6
grid judul + 6 grid navigasi tidak masalah, asalkan jumlah 1 baris
tersebut PAS 12 GRID :
 Layout
Contoh disamping menggunakan 4 grid judul + 8 grid
navigasi.

<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

Tambahkan CSS biar terlihat lebih rapi, seperti

berikut :

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
 Layout
CSS hanya kita pakai untuk menambahkan sedikit background, warna, atau font sesuai keinginan kita saja. tampilannya sudah seperti ini:
 Layout
Sekarang, di dalam layer content ada 2 jenis baris. ada yang 2 kolom, ada yang 1 kolom. Cara pembuatannya tetap sama, seperti berikut :
 Layout
Berikut tampilan hasil akhir dengan grid :
 Baris dan Kolom
Grid adalah struktur 2 dimensi yang terdiri dari sumbu horizontal dan vertikal (baris dan kolom).

Sistem grid pada Bootstrap merupakan variasi dari 960 Grid System  lebar grid 940px dan jumlah maksimal kolom 12 pada layar lebar
(dekstop).

DiBootstrap, untuk baris direpresentasikan dalam class row sedangkan untuk kolom direpresentasikan dalam class col . Tag div class col
selalu berada di dalam tag div class row. Untuk lebih jelasnya lihat source code berikut :

Pada source code disamping terdapat class col-md-4, md kependekan

dari medium (dekstop), atau bisa dikatakan kolom tersebut native-nya
digunakan untuk desktop. Sedangkan Bootstrap sendiri menyediakan 3
lagi jenis grid selain md, diantranya:
1. xs (extra small), digunakan untuk mobile, nama classnya col-xs.
2. sm (small), digunakan untuk tablet, nama classnya col-sm.
3. xl (extral large), digunakan untuk layar extra lebar, nama classnya
col-xl.