6. HTML & CSS PTI15010 Pemrograman Web Agi Putra Kharisma, S.T., M.T. Genap 2014/2015 Desain slide ini dadaptasi dari University of San Fransisco
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 Inline <head> <style type="text/css">... </style> </head>
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.