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

Ukuran: px

Mulai penontonan dengan halaman:

Download "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"

Suharto Gunawan
7 tahun lalu
Tontonan:

1 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

2 HTML, CSS, JavaScript HTML (Struktur Dokumen) CSS (Tampilan Dokumen) JavaScript (Perilaku Dokumen)

3 HTML Tags < bla bla bla > </ bla bla bla >

4 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

5 CSS

6 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:

7 CSS Properties Background Color Font-size Height Width... dsb

8 CSS Values orange, red, black, white #00000, #FFFFF 10px, 20pt, 50%... dsb Value yang dapat diisikan mengikuti jenis properties, misal: color: orange height: 500px

9 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>

10 CSS Layout (Diambil dari

11 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

12 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)

13 Box Model Padding Margin Border

14 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;

15 margin:auto Posisi center secara horizontal

16 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.

17 Float Untuk membuat suatu teks/elemen mengelilingi suatu elemen (misal: gambar).

18 Clear Untuk menghilangkan pengaruh float dari elemen yang float.

19 Clearfix Hack Untuk mengantisipasi teks yang tidak dapat menyamai ketinggian gambar. Menggunakan: overflow: auto;

20 Media Queries Sangat membantu dalam pembuatan responsive design screen and (min-width:600px) screen and (max-width:599px) {...}

21 Inline Block Mempermudah dalam membuat box yang berjajar Perlu pengaturan vertical-align untuk penempatan text.

22 CSS Framework

23 Referensi CSS Layout (+) Lihat referensi di slide 2-Pengantar Pemrograman Internet

24 Next Kuis 1 1 April 2015 Materi: Pengantar Pemrograman Internet Pengantar Pemrograman Sisi Server State HTML & CSS

25 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 Server Scalability Deliverable: Slide dalam format PPTX pada minggu ke-12. Dipresentasikan pada minggu ke-12 dan 13.

26 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

27 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 Dipresentasikan pada minggu ke-14 dan 15.

dokumen-dokumen yang mirip

DASAR-DASAR CSS DASAR-DASAR CSS By: Rohi Abdulloh A. PENGENALAN

DASAR-DASAR CSS DASAR-DASAR CSS 2015 A. PENGENALAN CSS merupakan kependekan dari Cascading Style Sheet yaitu suatu skrip yang digunakan untuk mempercantik tampilan HTML atau mengatur bagaimana elemen HTML