Scribd Logo
Unggah

Selamat datang di Scribd!

  • PW 20142015 2 06. HTML CSS

    Diunggah oleh

    Kharisma Primawardhana
    4 tayangan27 halaman
    html

    Judul Asli

    PW-20142015-2-06.-HTML-CSS

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini
    html

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    4 tayangan27 halaman

    PW 20142015 2 06. HTML CSS

    Diunggah oleh

    Kharisma Primawardhana
    html

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 27

    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 >


    </ 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 Value yang dapat diisikan
    mengikuti jenis properties,
    • 10px, 20pt, 50% misal:
    • ... dsb • 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)
    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.

    Anda mungkin juga menyukai