6. html & css · position • static • merupakan nilai default • tidak diposisikan terhadap...
TRANSCRIPT
![Page 1: 6. HTML & CSS · Position • Static • Merupakan nilai default • Tidak diposisikan terhadap apa-apa • Relative • Sama dengan static, tetapi dapat ditambahkan extra properties](https://reader036.vdokumen.com/reader036/viewer/2022062505/5edb24da210a9a20dc49b1e8/html5/thumbnails/1.jpg)
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
![Page 2: 6. HTML & CSS · Position • Static • Merupakan nilai default • Tidak diposisikan terhadap apa-apa • Relative • Sama dengan static, tetapi dapat ditambahkan extra properties](https://reader036.vdokumen.com/reader036/viewer/2022062505/5edb24da210a9a20dc49b1e8/html5/thumbnails/2.jpg)
HTML, CSS, JavaScript
HTML (Struktur Dokumen)
CSS (Tampilan Dokumen)
JavaScript (Perilaku Dokumen)
![Page 3: 6. HTML & CSS · Position • Static • Merupakan nilai default • Tidak diposisikan terhadap apa-apa • Relative • Sama dengan static, tetapi dapat ditambahkan extra properties](https://reader036.vdokumen.com/reader036/viewer/2022062505/5edb24da210a9a20dc49b1e8/html5/thumbnails/3.jpg)
HTML Tags
< bla bla bla > </ bla bla bla >
![Page 4: 6. HTML & CSS · Position • Static • Merupakan nilai default • Tidak diposisikan terhadap apa-apa • Relative • Sama dengan static, tetapi dapat ditambahkan extra properties](https://reader036.vdokumen.com/reader036/viewer/2022062505/5edb24da210a9a20dc49b1e8/html5/thumbnails/4.jpg)
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
![Page 5: 6. HTML & CSS · Position • Static • Merupakan nilai default • Tidak diposisikan terhadap apa-apa • Relative • Sama dengan static, tetapi dapat ditambahkan extra properties](https://reader036.vdokumen.com/reader036/viewer/2022062505/5edb24da210a9a20dc49b1e8/html5/thumbnails/5.jpg)
CSS
http://learn.shayhowe.com/html-css/building-your-first-web-page/
![Page 6: 6. HTML & CSS · Position • Static • Merupakan nilai default • Tidak diposisikan terhadap apa-apa • Relative • Sama dengan static, tetapi dapat ditambahkan extra properties](https://reader036.vdokumen.com/reader036/viewer/2022062505/5edb24da210a9a20dc49b1e8/html5/thumbnails/6.jpg)
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/
![Page 7: 6. HTML & CSS · Position • Static • Merupakan nilai default • Tidak diposisikan terhadap apa-apa • Relative • Sama dengan static, tetapi dapat ditambahkan extra properties](https://reader036.vdokumen.com/reader036/viewer/2022062505/5edb24da210a9a20dc49b1e8/html5/thumbnails/7.jpg)
CSS Properties
• Background
• Color
• Font-size
• Height
• Width
• ... dsb
![Page 8: 6. HTML & CSS · Position • Static • Merupakan nilai default • Tidak diposisikan terhadap apa-apa • Relative • Sama dengan static, tetapi dapat ditambahkan extra properties](https://reader036.vdokumen.com/reader036/viewer/2022062505/5edb24da210a9a20dc49b1e8/html5/thumbnails/8.jpg)
CSS Values
• orange, red, black, white
• #00000, #FFFFF
• 10px, 20pt, 50%
• ... dsb
Value yang dapat diisikan
mengikuti jenis properties,
misal:
• color: orange
• height: 500px
![Page 9: 6. HTML & CSS · Position • Static • Merupakan nilai default • Tidak diposisikan terhadap apa-apa • Relative • Sama dengan static, tetapi dapat ditambahkan extra properties](https://reader036.vdokumen.com/reader036/viewer/2022062505/5edb24da210a9a20dc49b1e8/html5/thumbnails/9.jpg)
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
![Page 11: 6. HTML & CSS · Position • Static • Merupakan nilai default • Tidak diposisikan terhadap apa-apa • Relative • Sama dengan static, tetapi dapat ditambahkan extra properties](https://reader036.vdokumen.com/reader036/viewer/2022062505/5edb24da210a9a20dc49b1e8/html5/thumbnails/11.jpg)
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
![Page 12: 6. HTML & CSS · Position • Static • Merupakan nilai default • Tidak diposisikan terhadap apa-apa • Relative • Sama dengan static, tetapi dapat ditambahkan extra properties](https://reader036.vdokumen.com/reader036/viewer/2022062505/5edb24da210a9a20dc49b1e8/html5/thumbnails/12.jpg)
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)
![Page 13: 6. HTML & CSS · Position • Static • Merupakan nilai default • Tidak diposisikan terhadap apa-apa • Relative • Sama dengan static, tetapi dapat ditambahkan extra properties](https://reader036.vdokumen.com/reader036/viewer/2022062505/5edb24da210a9a20dc49b1e8/html5/thumbnails/13.jpg)
Box Model
• Padding
• Margin
• Border
![Page 14: 6. HTML & CSS · Position • Static • Merupakan nilai default • Tidak diposisikan terhadap apa-apa • Relative • Sama dengan static, tetapi dapat ditambahkan extra properties](https://reader036.vdokumen.com/reader036/viewer/2022062505/5edb24da210a9a20dc49b1e8/html5/thumbnails/14.jpg)
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;
![Page 15: 6. HTML & CSS · Position • Static • Merupakan nilai default • Tidak diposisikan terhadap apa-apa • Relative • Sama dengan static, tetapi dapat ditambahkan extra properties](https://reader036.vdokumen.com/reader036/viewer/2022062505/5edb24da210a9a20dc49b1e8/html5/thumbnails/15.jpg)
margin:auto
Posisi center secara horizontal
![Page 16: 6. HTML & CSS · Position • Static • Merupakan nilai default • Tidak diposisikan terhadap apa-apa • Relative • Sama dengan static, tetapi dapat ditambahkan extra properties](https://reader036.vdokumen.com/reader036/viewer/2022062505/5edb24da210a9a20dc49b1e8/html5/thumbnails/16.jpg)
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.
![Page 17: 6. HTML & CSS · Position • Static • Merupakan nilai default • Tidak diposisikan terhadap apa-apa • Relative • Sama dengan static, tetapi dapat ditambahkan extra properties](https://reader036.vdokumen.com/reader036/viewer/2022062505/5edb24da210a9a20dc49b1e8/html5/thumbnails/17.jpg)
Float
Untuk membuat suatu teks/elemen mengelilingi suatu elemen
(misal: gambar).
![Page 18: 6. HTML & CSS · Position • Static • Merupakan nilai default • Tidak diposisikan terhadap apa-apa • Relative • Sama dengan static, tetapi dapat ditambahkan extra properties](https://reader036.vdokumen.com/reader036/viewer/2022062505/5edb24da210a9a20dc49b1e8/html5/thumbnails/18.jpg)
Clear
Untuk menghilangkan pengaruh float dari elemen yang float.
![Page 19: 6. HTML & CSS · Position • Static • Merupakan nilai default • Tidak diposisikan terhadap apa-apa • Relative • Sama dengan static, tetapi dapat ditambahkan extra properties](https://reader036.vdokumen.com/reader036/viewer/2022062505/5edb24da210a9a20dc49b1e8/html5/thumbnails/19.jpg)
Clearfix Hack
• Untuk mengantisipasi teks yang tidak dapat menyamai
ketinggian gambar.
• Menggunakan:
overflow: auto;
![Page 20: 6. HTML & CSS · Position • Static • Merupakan nilai default • Tidak diposisikan terhadap apa-apa • Relative • Sama dengan static, tetapi dapat ditambahkan extra properties](https://reader036.vdokumen.com/reader036/viewer/2022062505/5edb24da210a9a20dc49b1e8/html5/thumbnails/20.jpg)
Media Queries
Sangat membantu dalam pembuatan “responsive design”
Contoh:
@media screen and (min-width:600px)
{...}
@media screen and (max-width:599px)
{...}
![Page 21: 6. HTML & CSS · Position • Static • Merupakan nilai default • Tidak diposisikan terhadap apa-apa • Relative • Sama dengan static, tetapi dapat ditambahkan extra properties](https://reader036.vdokumen.com/reader036/viewer/2022062505/5edb24da210a9a20dc49b1e8/html5/thumbnails/21.jpg)
Inline Block
• Mempermudah dalam membuat box yang berjajar
• Perlu pengaturan vertical-align untuk penempatan
text.
![Page 22: 6. HTML & CSS · Position • Static • Merupakan nilai default • Tidak diposisikan terhadap apa-apa • Relative • Sama dengan static, tetapi dapat ditambahkan extra properties](https://reader036.vdokumen.com/reader036/viewer/2022062505/5edb24da210a9a20dc49b1e8/html5/thumbnails/22.jpg)
CSS Framework
![Page 23: 6. HTML & CSS · Position • Static • Merupakan nilai default • Tidak diposisikan terhadap apa-apa • Relative • Sama dengan static, tetapi dapat ditambahkan extra properties](https://reader036.vdokumen.com/reader036/viewer/2022062505/5edb24da210a9a20dc49b1e8/html5/thumbnails/23.jpg)
Referensi CSS Layout
http://learnlayout.com
(+) Lihat referensi di slide “2-Pengantar Pemrograman
Internet”
![Page 24: 6. HTML & CSS · Position • Static • Merupakan nilai default • Tidak diposisikan terhadap apa-apa • Relative • Sama dengan static, tetapi dapat ditambahkan extra properties](https://reader036.vdokumen.com/reader036/viewer/2022062505/5edb24da210a9a20dc49b1e8/html5/thumbnails/24.jpg)
Next
Kuis 1 1 April 2015
Materi:
• Pengantar Pemrograman Internet
• Pengantar Pemrograman Sisi Server
• State
• HTML & CSS
![Page 25: 6. HTML & CSS · Position • Static • Merupakan nilai default • Tidak diposisikan terhadap apa-apa • Relative • Sama dengan static, tetapi dapat ditambahkan extra properties](https://reader036.vdokumen.com/reader036/viewer/2022062505/5edb24da210a9a20dc49b1e8/html5/thumbnails/25.jpg)
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.
![Page 26: 6. HTML & CSS · Position • Static • Merupakan nilai default • Tidak diposisikan terhadap apa-apa • Relative • Sama dengan static, tetapi dapat ditambahkan extra properties](https://reader036.vdokumen.com/reader036/viewer/2022062505/5edb24da210a9a20dc49b1e8/html5/thumbnails/26.jpg)
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
![Page 27: 6. HTML & CSS · Position • Static • Merupakan nilai default • Tidak diposisikan terhadap apa-apa • Relative • Sama dengan static, tetapi dapat ditambahkan extra properties](https://reader036.vdokumen.com/reader036/viewer/2022062505/5edb24da210a9a20dc49b1e8/html5/thumbnails/27.jpg)
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.