6. HTML & CSS -...

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/

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)

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.

6. HTML & CSS -...

Documents

Transcript of 6. HTML & CSS -...