Desain slide ini dadaptasi dari University of San Fransisco
6. HTML & CSS
PTI15010
Pemrograman Web
Agi Putra Kharisma, S.T., M.T.
Genap 2014/2015
HTML, CSS, JavaScript
HTML (Struktur Dokumen)
CSS (Tampilan Dokumen)
JavaScript (Perilaku Dokumen)
HTML Tags
< bla bla bla > </ bla bla bla >
HTML Elements
• DOCTYPE <!DOCTYPE html>
• Headings
• Heading 1 <h1>
• Heading 2 <h2>
• ...dst
• Paragraf <p>
• Tabel <table>
• Link <a>
• Div <div>
• Lis <li>
• Dengan urutan <ol>
• Tanpa urutan <ul>
• ... dsb
CSS
http://learn.shayhowe.com/html-css/building-your-first-web-page/
CSS Selectors
JENIS SELECTOR: CONTOH:
• Type selector body { ... }
• Class selector ( . ) .items { ... }
• Pseudo class ( : ) a:visited { ... }
• ID selector ( # ) #menu-utama
• Child selector
• Descendant selector (spasi) div p
• Direct child selector ( > ) div > p
• Sibling selector
• General sibling selector ( ~ ) div ~ p
• Adjacent sibling selector ( + ) div + p
baca: http://learn.shayhowe.com/advanced-html-css/complex-selectors/
CSS Properties
• Background
• Color
• Font-size
• Height
• Width
• ... dsb
CSS Values
• orange, red, black, white
• #00000, #FFFFF
• 10px, 20pt, 50%
• ... dsb
Value yang dapat diisikan
mengikuti jenis properties,
misal:
• color: orange
• height: 500px
Cara menghubungkan HTML dan CSS
External
<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css">
</head>
Internal
<head>
<style type="text/css">
...
</style>
</head>
Inline
CSS Layout (Diambil dari http://learnlayout.com)
Display Property
• Block
• Membuat baris baru
• Melebar ke arah kanan dan kiri semaksimal mungkin
• Contoh: div, p, form
• Inline
• Tidak membuat baris baru
• Melebar sesuai isi yang dibungkusnya
• Contoh: span, a
• None
• Tidak ditampilkan di layar (disembunyikan dari layar)
• ... dsb
width, max-width, min-width
• width • Lebar elemen
• max-width • Lebar maksimal elemen (fleksibel mengikuti lebar
jendela)
• min-width • Lebar minimal elemen (fleksibel mengikuti lebar jendela)
Box Model
• Padding
• Margin
• Border
Box-sizing
Ukuran box tidak terpengaruh ukuran padding dan border. Code:
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin:auto
Posisi center secara horizontal
Position
• Static
• Merupakan nilai default
• Tidak diposisikan terhadap apa-apa
• Relative
• Sama dengan static, tetapi dapat ditambahkan extra
properties (top, right, bottom, left).
• Fixed
• Posisinya relatif terhadap viewport, atau dengan kata
lain, dia akan selalu nampak walaupun halaman di-scroll.
• Absolute
• Mirip dengan fixed, tetapi relatif terhadap anchestor
terdekat.
Float
Untuk membuat suatu teks/elemen mengelilingi suatu elemen
(misal: gambar).
Clear
Untuk menghilangkan pengaruh float dari elemen yang float.
Clearfix Hack
• Untuk mengantisipasi teks yang tidak dapat menyamai
ketinggian gambar.
• Menggunakan:
overflow: auto;
Media Queries
Sangat membantu dalam pembuatan “responsive design”
Contoh:
@media screen and (min-width:600px)
{...}
@media screen and (max-width:599px)
{...}
Inline Block
• Mempermudah dalam membuat box yang berjajar
• Perlu pengaturan vertical-align untuk penempatan
text.
CSS Framework
Referensi CSS Layout
http://learnlayout.com
(+) Lihat referensi di slide “2-Pengantar Pemrograman
Internet”
Next
Kuis 1 1 April 2015
Materi:
• Pengantar Pemrograman Internet
• Pengantar Pemrograman Sisi Server
• State
• HTML & CSS
Tugas 2
Presentasi Materi Pengayaan (masing – masing topik
dipresentasikan 2 kelompok):
1. Teknologi Search Engine (Web Crawler, Page Rank
Algorithm, Indexing, dsb) & Search Engine Optimization.
2. Deep Web
3. Semantic Web
4. Web Security
5. HTTP 2.0
6. Server Scalability
Deliverable:
• Slide dalam format PPTX pada minggu ke-12.
• Dipresentasikan pada minggu ke-12 dan 13.
Tugas 3 (1)
Project:
1. Membuat sebuah web dinamis yang memiliki aspek
kegunaan tertentu (fungsionalitas atau konten).
Contoh:
- Web toko online (fungsionalitas)
- Web kuliner kota malang (konten)
2. Ketentuan:
- Tidak boleh menggunakan CMS atau COTS
- Boleh (dianjurkan) menggunakan framework
- Menggunakan PHP dan MySQL
- Terdapat session dan akses ke basis data
Tugas 3 (2)
3. Dikerjakan secara berkelompok (4-6 anggota/kelompok).
4. Deliverable:
- Source Code (HTML, CSS, Javascript, PHP, dsb) +
Media (JPG, GIF, dsb) + SQL Dump
- Laporan (User Guide) dalam bentuk PDF
5. Diserahkan pada minggu ke-14
6. Dipresentasikan pada minggu ke-14 dan 15.