Desain Web 2, Perkenalan

Materi kuliah Desain Web,Materi kuliah Desain Web,Teknik Informatika FTUPTeknik Informatika FTUP

Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi

PerkenalanPerkenalanDesain Web IIDesain Web II

Pertemuan ke-1Pertemuan ke-1



Tata TertibTata Tertib

Waktu: Selasa, 08.00 – 09.30 WIBWaktu: Selasa, 08.00 – 09.30 WIB Lewat 15 menit = absenLewat 15 menit = absen 3 x absen = tidak lulus3 x absen = tidak lulus

Pakaian rapihPakaian rapih SepatuSepatu



Buku AcuanBuku Acuan

CSS3 FOR WEB DESIGNER, Dan Colderholm, A CSS3 FOR WEB DESIGNER, Dan Colderholm, A Book Apart, 2010Book Apart, 2010

VISUAL QUICK START GUIDE, CSS3: Jason VISUAL QUICK START GUIDE, CSS3: Jason Cranford Teague, 2011Cranford Teague, 2011



Silabus Desain Web IISilabus Desain Web II

Pengenalan CSSPengenalan CSS Review HTML5Review HTML5 Dasar CSSDasar CSS Selective StylingSelective Styling FontFont TextText Color dan Color dan

BackgroundBackground

List dan TableList dan Table User InterfaceUser Interface BoxBox Visual FormattingVisual Formatting Fixing CSSFixing CSS Essential CSSEssential CSS Managing Style Managing Style

SheetSheet



Apakah Style itu?Apakah Style itu?



HTML – No StyleHTML – No Style



HTML – With Basic StyleHTML – With Basic Style



3 teknologi dasar Web3 teknologi dasar Web



Evolusi CSSEvolusi CSS

CSS Level 1 (CSS1)CSS Level 1 (CSS1) Rilis pertama tahun 1996 oleh W3CRilis pertama tahun 1996 oleh W3C Kemampuan untuk menformat teks, Kemampuan untuk menformat teks,

mengatur font dan marginmengatur font dan margin CSS2 Level 2 (CSS2)CSS2 Level 2 (CSS2)

Rilis pertama tahun 1998Rilis pertama tahun 1998 Rilis kedua tahun 2006 oleh W3C CSS2.1Rilis kedua tahun 2006 oleh W3C CSS2.1 Accessibility, specify media-specific, Accessibility, specify media-specific,

positioningpositioning



Evolusi CSSEvolusi CSS

CSS3 Level 3 (CSS3)CSS3 Level 3 (CSS3) Belum finalBelum final Working groupWorking group

http://www.w3.org/Style/CSS/current-http://www.w3.org/Style/CSS/current-workwork



CSS RulesCSS Rules



CSS RulesCSS Rules

SelectorsSelectors Karakter alfanumerik sebagai identitas ruleKarakter alfanumerik sebagai identitas rule Selector bisa berupa: HTML tag, class, dan Selector bisa berupa: HTML tag, class, dan

IDID PropertiesProperties

Aturan yang akan diterapkan kepada Aturan yang akan diterapkan kepada selectorselector

ValuesValues Nilai yang diberikan kepada propertiesNilai yang diberikan kepada properties



Macam-macam SelectorMacam-macam Selector

HTML SelectorHTML Selector Selector untuk tag-tag HTMLSelector untuk tag-tag HTML h1 { color: red }h1 { color: red } Akan bekerja untuk semua tag Akan bekerja untuk semua tag

<h1>...<h1><h1>...<h1>




ClassClass Aturan tambahan yang dapat diterapkan Aturan tambahan yang dapat diterapkan

pada tag HTMLpada tag HTML .myClass { font: bold 1.25em times; }.myClass { font: bold 1.25em times; } Diterapkan berupaDiterapkan berupa

<h1 class=”myClass”>...</h1><h1 class=”myClass”>...</h1>




IDID Sama seperti class, dapat diterapkan pada Sama seperti class, dapat diterapkan pada

berbagai tag HTMLberbagai tag HTML Diterapkan hanya satu kali pada tag HTML, Diterapkan hanya satu kali pada tag HTML,

tidak seperti class yang bisa berkali-kalitidak seperti class yang bisa berkali-kali #myObject { position : absolute; top: #myObject { position : absolute; top:

10px; }10px; } Diterapkan berupaDiterapkan berupa

<h1 id=”myObject”>...</h1><h1 id=”myObject”>...</h1>



??

Desain Web 2, Perkenalan

Technology

Transcript of Desain Web 2, Perkenalan