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

JavaScript

(Tampilan Dokumen)

(Perilaku Dokumen)

HTML Tags

< bla bla bla >

HTML Elements • DOCTYPE • Headings • Heading 1

• Heading 2

• ...dst • Paragraf

• Tabel

• Link • Div

• Lis

• Dengan urutan

• Tanpa urutan
• ... dsb

CSS

http://learn.shayhowe.com/html-css/building-your-first-web-page/

CSS Selectors JENIS SELECTOR: • Type selector • Class selector ( . ) • Pseudo class ( : ) • ID selector ( # ) • Child selector • Descendant selector (spasi) • Direct child selector ( > ) • Sibling selector • General sibling selector ( ~ ) • Adjacent sibling selector ( + )

CONTOH: body { ... } .items { ... } a:visited { ... } #menu-utama div p div > p

div ~ p 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

Internal <style type="text/css">

...



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.

×

Report "2015. Desain slide ini dadaptasi dari University of San Fransisco"

Your name

Email

Reason -Select Reason- Pornographic Defamatory Illegal/Unlawful Spam Other Terms Of Service Violation File a copyright complaint

Description

Close Send

×

Sign In

Email

Password

Remember me Forgot password?

Sign In

Our partners will collect data and use cookies for ad personalization and measurement. Learn how we and our ad partner Google, collect and use data. Agree & close