Presentasi sedang didownload. Silahkan tunggu

Presentasi sedang didownload. Silahkan tunggu

Cascading Style Sheet (CSS) IT133 Pengembangan Web.

Presentasi serupa


Presentasi berjudul: "Cascading Style Sheet (CSS) IT133 Pengembangan Web."— Transcript presentasi:

1 Cascading Style Sheet (CSS) IT133 Pengembangan Web

2 Permasalahan Pada HTML HTML diciptakan untuk menampilkan isi dokumen tanpa memperhatikan tampilan dari dokumen web, misal: – Heading – Paragraf Tag dan atribut warna mulai ditambahkan pada HTML versi 3.2 – Pendefinisian pada setiap tag html akan merepotkan dan menghabiskan waktu. World Wide Web Consortium (W3C) menciptakan CSS untuk menyelesaikan masalah ini. Pada HTML 4.0, semua tag dan atribut yang mengatur format tampilan dapat dihilangkan dari dokumen dan disimpan pada file CSS yang terpisah

3 Sintaks CSS Penulisan css dibagi menjadi 2 bagian yaitu selector dan satu atau lebih deklarasi Selector biasanya merupakan elemen HTML yang akan di beri gaya (style). Tiap deklarasi terdiri dari property dan value. Property adalah atribut gaya yang ingin diterapkan (setiap properti wajib memiliki value).

4 Jenis Selector Ada tiga jenis selector: elemen html, id dan class Tipe elemen html: memberi gaya pada pada semua elemen yang sesuai dengan selector Contoh semua pada dokumen akan berwarna biru dan berukuran 12px.

5 Jenis Selector (2) Tipe id: memberi gaya pada sebuah elemen html unik tertentu yang diberi identitas (id). Pada css id didefinisikan dengan tanda “#” Contoh selector dengan menggunakan id: #par1 {color: blue} style akan diterapkan pada elemen apapun yang memiliki id=“par1”: paragraf

6 Jenis Selector (3) Tipe class: memberi gaya pada kelompok elemen- elemen. Tidak seperti id yang memiliki sifat unik (id tidak boleh sama), class dapat digunakan berulang kali pada elemen yang berbeda. Class pada css didefinisikan dengan tanda “.” Contoh selector dengan menggunakan class:.biru {color: blue} style akan diterapkan pada elemen apapun yang memiliki class=“biru” paragraf

7 Jenis Selector (4) Tipe class: juga dapat digabung dengan tipe elemen html sehingga hanya elemen tertentu saja yang dipengaruhi oleh style. Contoh memberikan style hanya pada elemen yang memiliki class dengan nama “tengah”: p.tengah {text-align: center} class “tengah” hanya akan berefek pada elemen yang memiliki class =“tengah”. Elemen lain yang diberi class=“tengah” tidak akan terpengaruh: paragraf

8 Jenis Selector (5) SelectorExampleExample description.class.introSelects all elements with class="intro" #id#firstnameSelects the element with id="firstname" elementpSelects all elements element,elementdiv,pSelects all elements and all elements (grouping) element div pSelects all elements inside elements :linka:linkSelects all unvisited links :visiteda:visitedSelects all visited links :activea:activeSelects the active link :hovera:hoverSelects links on mouse over

9 Pewarnaan pada CSS Pada css warna di definisikan dengan: Nilai Hexadesimal = "#ff0000" Nilai RGB = "rgb(255,0,0)" Nama warna dalam bahasa inggris = "red" ColorColor HEXColor RGB #000000rgb(0,0,0) #FF0000rgb(255,0,0) #00FF00rgb(0,255,0) #0000FFrgb(0,0,255) #FFFF00rgb(255,255,0) #00FFFFrgb(0,255,255) #FF00FFrgb(255,0,255) #C0C0C0rgb(192,192,192) (putih)#FFFFFFrgb(255,255,255)

10 Penempatan CSS Internal Style Sheet: diletakan pada header Web page p {color:blue;} Inline Styles: diletakan pada body Web page (langsung pada element tertentu) paragraf External Style Sheet: disimpan pada file terpisah (berekstensi.css)

11 Cascading Cascading: keunggulan css, bisa mendefinisikan lebih dari satu style pada elemen yang sama Lebih dari satu file.css bisa digunakan dalam sebuah file.html Bila terjadi pengaturan style yang sama (misal warna didefinisikan dua kali dengan nilai berbeda) maka akan digunakan skala prioritas

12 Prioritas Cascading Dari prioritas terendah: Browser default External style sheet Internal style sheet (in the head section) Inline style (inside an HTML element) Untuk memastikan sebuah style tidak di override oleh style lain bisa digunakan properti !important contoh: p {color: blue !important}

13 Unit Besaran pada CSS UnitDescription %percentage ininch cmcentimeter mmmillimeter em1em is equal to the current font size. 2em means 2 times the size of the current font. E.g., if an element is displayed with a font of 12 pt, then '2em' is 24 pt. The 'em' is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses exone ex is the x-height of a font (x-height is usually about half the font-size) ptpoint (1 pt is the same as 1/72 inch) pcpica (1 pc is the same as 12 points) pxpixels (a dot on the computer screen)

14 Pengaturan Dimensi pada semua properti CSS PropertyDescriptionValues heightSets the height of an elementauto, besaran, %,inherit max-heightSets the maximum height of an elementnone, besaran, %,inherit max-widthSets the maximum width of an elementnone, besaran, %,inherit min-heightSets the minimum height of an elementbesaran, %,inherit min-widthSets the minimum width of an elementbesaran, %,inherit widthSets the width of an elementauto, besaran, %,inherit

15 CSS Background Contoh body { background-image:url(‘bg.jpg’); background-color (#000000); } PropertyDescription backgroundSets all the background properties in one declaration background- attachment Sets whether a background image is fixed or scrolls with the rest of the page background-colorSets the background color of an element background-imageSets the background image for an element background-positionSets the starting position of a background image background-repeatSets how a background image will be repeated

16 CSS Text PropertyDescription colorSets the color of text letter-spacingspace between characters text-alignHorizontal alignment text-decorationSpecifies the decoration added to text text-indentSpecifies the indentation of the first line in a text-block text-shadowSpecifies the shadow effect added to text text-transformControls the capitalization of text vertical-alignSets the vertical alignment of an element Contoh h2 { text-decoration:line-through; text-transform:capitalize; }

17 CSS Links a:link {color:#FF0000;} /* unvisited link */ a:visited {color:#00FF00;} /* visited link */ a:hover {color:#FF00FF;} /* mouse over link */ a:active {color:#0000FF;} /* selected link */ a:link {text-decoration:none;} a:visited {text-decoration:none;} a:hover {text-decoration:underline;} a:active {text-decoration:underline;} a:link {background-color:#B2FF99;} a:visited {background-color:#FFFF85;} a:hover {background-color:#FF704D;} a:active {background-color:#FF704D;}

18 CSS Box Model Margin - Clears an area around the border. The margin does not have a background color, it is completely transparent Border - A border that goes around the padding and content. The border is affected by the background color of the box Padding - Clears an area around the content. The padding is affected by the background color of the box Content - The content of the box, where text and images appear

19 Posisi Elemen Property: “position” Value: static: positioned according to the normal flow of the page. fixed: fixed position is positioned relative to the browser window (it will not move even if the window is scrolled). Fixed positioned elements can overlap other elements relatives: relative to its normal position. absolute: relative to the first parent element that has a position other than static. Overlapping: which element should be placed in front of, or behind, the others. Property: “z-index”

20 HTML Form IT133 Pengembangan Web

21 Form adalah sebuah daftar isian. Daftar isian ini untuk meminta informasi dari user untuk kemudian diolah. Bila form digunakan untuk mengelola database, pengolahan form dilakukan pada server dengan menggunakan skrip yang bersifat server-side. Form juga bisa digunakan untuk tujuan lain dan dikelola dari sisi client, dengan menggunakan skrip client-side seperti javascript.

22 Elemen Form. input elements.

23 Bagaimana Form mengirim data ke server Pada tiap elemen form, terdapat atribut name dan value, nilai dari atribut ini yang dikirimkan oleh form ke server pada saat menekan tombol submit. Name1=Value1&Name2=Value2...NameN=ValueN

24 From Method Ada 2 metode HTML dalam mengirimkan data: POST dan GET

25 HTLM Method GET Get: name dan value ditambahkan pada bagian akhir dari URL. Format: URL? Name1=Value1&Name2=Value2 Contoh: Index.html?nama=iwan&nim=

26 HTLM Method POST Tidak seperti get yang muncul di url, pada metode post, name dan value diletakan didalam HTTP request header (perintah yang dibuat oleh browser untuk dikirim ke server). Sehingga tidak terlihat seperti metode get.

27 Form Action Atribut action mendefinisikan url dari skrip yang akan memproses data dari form

28 Form Target Mendefinisikan target (seperti yang terdapat pada link ) _blank _parent _self _top

29 INPUT ELEMENT

30 Form Onsubmit dan on reset Digunakan untuk memanggil sebuah fungsi javascript pada event: Sumbit = onsubmit=“javascript function” Reset = onreset=“javascript function”

31 Tag Inputan yang umum digunakan terbagi dalam beberapa kelompok: Text Controls Push Buttons Check Boxes and Radio Buttons Combo Boxes and List Boxes File Upload Controls Hidden Fields

32 Text Controls Pada text control terdapat 3 tipe input yaitu: – Text Fields – Password Fields – Text Areas

33 Text Controls – Text field HTML Element: (No End Tag) Attribute s: NAME (required), VALUE, SIZE, MAXLENGTH, DISABLED, READONLY, ONCHANGE, ONSELECT, ONFOCUS, ONBLUR, ONKEYDOWN, ONKEYPRESS, ONKEYUP

34 Text Controls – Password field HTML Element: (No End Tag) Attributes:NAME (required), VALUE, SIZE, MAXLENGTH, DISABLED, READONLY, ONCHANGE, ONSELECT, ONFOCUS, ONBLUR, ONKEYDOWN, ONKEYPRESS, ONKEYUP

35 Text Controls – Text Area HTML Element:... Attributes:NAME (required), ROWS (required), COLS (required), WRAP (nonstandard), DISABLED, READONLY, ONCHANGE, ONSELECT, ONFOCUS, ONBLUR, ONKEYDOWN, ONKEYPRESS, ONKEYUP

36 Text Controls – Text Area Contoh: Enter some HTML: Delete this text and replace with some HTML to validate.

37 Push Buttons Terdapat 3 tipe yaitu submit, reset dan javascript button HTML Element: (No End Tag) Attributes:VALUE, NAME, DISABLED, ONCLICK, ONDBLCLICK, ONFOCUS, ONBLUR HTML Element: HTML Markup Attributes:VALUE, NAME, DISABLED, ONCLICK, ONDBLCLICK, ONFOCUS, ONBLUR HTML Element: (No End Tag) Attributes:NAME, VALUE, DISABLED, ONCLICK, ONDBLCLICK, ONFOCUS, ONBLUR

38 Check Boxes and Radio Buttons Check boxes digunakan bila pilihan bisa lebih dari 1, sedang radio button digunakan untuk 1 pilihan (misal jenis kelamin) HTML Element: (No End Tag) Attributes:NAME (required), VALUE, CHECKED, DISABLED, READONLY, ONCLICK, ONFOCUS, ONBLUR HTML Element: (No End Tag) Attributes:NAME (required), VALUE (required), CHECKED, DISABLED, READONLY, ONCLICK, ONFOCUS, ONBLUR

39 Check Boxes and Radio Buttons Contoh radio buttons: Credit Card: Visa Master Card Java Smart Card American Express Discover Keterangan perhatikan “id” untuk pilihan dengan tipe yang sama gunakan id yang sama

40 Combo Boxes and List Boxes Combo boxes (drop down) HTML Element:... Attributes:NAME (required), SIZE, MULTIPLE, DISABLED, ONCLICK, ONFOCUS, ONBLUR, ONCHANGE HTML Element: (End Tag Optional) Attributes:SELECTED, VALUE, DISABLED

41 Combo Boxes and List Boxes Contoh combo boxes : C C++ Java Lisp Perl Smalltalk

42 Combo Boxes and List Boxes List boxes HTML Element:... Attributes:NAME (required), SIZE, MULTIPLE, DISABLED, ONCLICK, ONFOCUS, ONBLUR, ONCHANGE HTML Element: (End Tag Optional) Attributes:SELECTED, VALUE, DISABLED

43 Combo Boxes and List Boxes Contoh list boxes C C++ Java Lisp Perl Smalltalk

44 File Upload Controls HTML Element: (No End Tag) Attributes:NAME (required), VALUE (ignored), SIZE, MAXLENGTH, ACCEPT, DISABLED, READONLY, ONCHANGE, ONSELECT, ONFOCUS, ONBLUR (nonstandard)

45 Hidden Fields Hiden digunakan bila anda ingin mengirimkan value yang tersembunyi HTML Element: (No End Tag) Attributes:NAME (required), VALUE

46 Form Enctype Atribut ini menspesifikasikan bagaimana data di encode sebelum di transimikan: – enctype="application/x-www-form-urlencoded“ browser akan menconvet karakter-karakter non aplhanumerik(+,?,=,dll)kedalam kode ASCII atau ISO Latin-1 – enctype="multipart/form-data“ digunakan untuk mengirim file, browser akan mendefinikan jenis file (misal untuk form upload file)

47


Download ppt "Cascading Style Sheet (CSS) IT133 Pengembangan Web."

Presentasi serupa


Iklan oleh Google