Cascading Style Sheet (CSS)

Cascading Style Sheet (CSS)
IT133 Pengembangan Web

Permasalahan Pada HTML
HTML diciptakan untuk menampilkan isi dokumen tanpa memperhatikan tampilan dari dokumen web, misal: <h1>Heading</h1> <p>Paragraf</p> Tag <font> dan atribut warna mulai ditambahkan pada HTML versi 3.2 Pendefinisian <font> 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

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).

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 <h1> pada dokumen akan berwarna biru dan berukuran 12px.

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”: <p id=“par1”>paragraf</p>

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” <p class=“biru”>paragraf</p>

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 <p> yang memiliki class dengan nama “tengah”: p.tengah {text-align: center} class “tengah” hanya akan berefek pada elemen <p> yang memiliki class =“tengah”. Elemen lain yang diberi class=“tengah” tidak akan terpengaruh: <p class=“tengah”>paragraf</p>

Jenis Selector (5) Selector Example Example description .class .intro
Selects all elements with class="intro" #id #firstname Selects the element with id="firstname" element p Selects all <p> elements element,element div,p Selects all <div> elements and all <p> elements (grouping) element element div p Selects all <p> elements inside <div> elements :link a:link Selects all unvisited links :visited a:visited Selects all visited links :active a:active Selects the active link :hover a:hover Selects links on mouse over

Pewarnaan pada CSS Pada css warna di definisikan dengan:
Nilai Hexadesimal = "#ff0000" Nilai RGB = "rgb(255,0,0)" Nama warna dalam bahasa inggris = "red" Color Color HEX Color RGB #000000 rgb(0,0,0) #FF0000 rgb(255,0,0) #00FF00 rgb(0,255,0) #0000FF rgb(0,0,255) #FFFF00 rgb(255,255,0) #00FFFF rgb(0,255,255) #FF00FF rgb(255,0,255) #C0C0C0 rgb(192,192,192) (putih) #FFFFFF rgb(255,255,255)

Penempatan CSS Internal Style Sheet: diletakan pada header Web page <head> <style type="text/css"> p {color:blue;} </style> </head> Inline Styles: diletakan pada body Web page (langsung pada element tertentu) <p style="color:blue;“>paragraf</p> External Style Sheet: disimpan pada file terpisah (berekstensi .css) <head> <link rel="stylesheet" type="text/css" href=“file.css" /> </head>

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

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}

Unit Besaran pada CSS Unit Description % percentage in inch cm
centimeter mm millimeter em 1em 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 ex one ex is the x-height of a font (x-height is usually about half the font-size) pt point (1 pt is the same as 1/72 inch) pc pica (1 pc is the same as 12 points) px pixels (a dot on the computer screen)

Pengaturan Dimensi pada semua properti CSS
Property Description Values height Sets the height of an element auto, besaran, % ,inherit max-height Sets the maximum height of an element none, besaran, % ,inherit max-width Sets the maximum width of an element min-height Sets the minimum height of an element besaran, % ,inherit min-width Sets the minimum width of an element width Sets the width of an element

CSS Background Property Description background Sets 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-color Sets the background color of an element background-image Sets the background image for an element background-position Sets the starting position of a background image background-repeat Sets how a background image will be repeated Contoh body { background-image:url(‘bg.jpg’); background-color (#000000); }

CSS Text Contoh Property Description color Sets the color of text
letter-spacing space between characters text-align Horizontal alignment text-decoration Specifies the decoration added to text text-indent Specifies the indentation of the first line in a text-block text-shadow Specifies the shadow effect added to text text-transform Controls the capitalization of text vertical-align Sets the vertical alignment of an element Contoh h2 { text-decoration:line-through; text-transform:capitalize; }

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;}

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

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”

HTML Form IT133 Pengembangan Web

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.

Elemen Form <form> . input elements . </form>

Bagaimana Form mengirim data ke server
Pada tiap elemen <input> 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

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

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=

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.

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

Form Target Mendefinisikan target (seperti yang terdapat pada link <a>) _blank _parent _self _top

Input Element

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

Tag <Input> 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

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

Text Controls – Text field
HTML Element: <INPUT TYPE="TEXT" id="..." ...> (No End Tag) Attributes: NAME (required), VALUE, SIZE, MAXLENGTH, DISABLED, READONLY, ONCHANGE, ONSELECT, ONFOCUS, ONBLUR, ONKEYDOWN, ONKEYPRESS, ONKEYUP

Text Controls – Password field
HTML Element: <INPUT TYPE="PASSWORD" id="..." ...> (No End Tag) Attributes: NAME (required), VALUE, SIZE, MAXLENGTH, DISABLED, READONLY, ONCHANGE, ONSELECT, ONFOCUS, ONBLUR, ONKEYDOWN, ONKEYPRESS, ONKEYUP

Text Controls – Text Area
HTML Element: <TEXTAREA id="..." ROWS=xxx COLS=yyy> ... </TEXTAREA> Attributes: NAME (required), ROWS (required), COLS (required), WRAP (nonstandard), DISABLED, READONLY, ONCHANGE, ONSELECT, ONFOCUS, ONBLUR, ONKEYDOWN, ONKEYPRESS, ONKEYUP

Text Controls – Text Area
Contoh: <CENTER> <P> Enter some HTML:<BR> <TEXTAREA id="HTML" ROWS=5 COLS=30> Delete this text and replace with some HTML to validate. </TEXTAREA>

Push Buttons Terdapat 3 tipe yaitu submit , reset dan javascript button HTML Element: <INPUT TYPE=“SUBMIT" ...> (No End Tag) Attributes: VALUE, NAME, DISABLED, ONCLICK, ONDBLCLICK, ONFOCUS, ONBLUR HTML Element: <INPUT TYPE=“RESET" ...> (No End Tag) Attributes: NAME, VALUE, DISABLED, ONCLICK, ONDBLCLICK, ONFOCUS, ONBLUR HTML Element: <BUTTON > HTML Markup </BUTTON> Attributes: VALUE, NAME, DISABLED, ONCLICK, ONDBLCLICK, ONFOCUS, ONBLUR

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: <INPUT TYPE="CHECKBOX" id="..." ...> (No End Tag) Attributes: NAME (required), VALUE, CHECKED, DISABLED, READONLY, ONCLICK, ONFOCUS, ONBLUR HTML Element: <INPUT TYPE="RADIO" id="..." VALUE="..." ...> (No End Tag) Attributes: NAME (required), VALUE (required), CHECKED, DISABLED, READONLY, ONCLICK, ONFOCUS, ONBLUR

Check Boxes and Radio Buttons
Contoh radio buttons: Credit Card: <INPUT TYPE="RADIO" id="creditCard“ name="creditCard" VALUE="visa"> Visa <INPUT TYPE="RADIO" id="creditCard" VALUE="mastercard"> Master Card <INPUT TYPE="RADIO" id="creditCard" VALUE="java" CHECKED> Java Smart Card <INPUT TYPE="RADIO" id="creditCard" VALUE="amex"> American Express <INPUT TYPE="RADIO" id="creditCard" VALUE="discover"> Discover Keterangan perhatikan “id” untuk pilihan dengan tipe yang sama gunakan id yang sama

Combo Boxes and List Boxes
Combo boxes (drop down) HTML Element: <SELECT id="..." ...> ... </SELECT> Attributes: NAME (required), SIZE, MULTIPLE, DISABLED, ONCLICK, ONFOCUS, ONBLUR, ONCHANGE HTML Element: <OPTION ...> (End Tag Optional) Attributes: SELECTED, VALUE, DISABLED

Contoh combo boxes : <SELECT id="language"> <OPTION VALUE="c">C <OPTION VALUE="c++">C++ <OPTION VALUE="java" SELECTED>Java <OPTION VALUE="lisp">Lisp <OPTION VALUE="perl">Perl <OPTION VALUE="smalltalk">Smalltalk </SELECT>

HTML Element: <SELECT id="..." MULTIPLE> ... </SELECT> Attributes: NAME (required), SIZE, MULTIPLE, DISABLED, ONCLICK, ONFOCUS, ONBLUR, ONCHANGE HTML Element: <OPTION ...> (End Tag Optional) Attributes: SELECTED, VALUE, DISABLED

Contoh list boxes <SELECT id="language“ MULTIPLE> <OPTION VALUE="c">C <OPTION VALUE="c++">C++ <OPTION VALUE="java" SELECTED>Java <OPTION VALUE="lisp">Lisp <OPTION VALUE="perl">Perl <OPTION VALUE="smalltalk">Smalltalk </SELECT>

File Upload Controls HTML Element:
<INPUT TYPE="FILE" ...> (No End Tag) Attributes: NAME (required), VALUE (ignored), SIZE, MAXLENGTH, ACCEPT, DISABLED, READONLY, ONCHANGE, ONSELECT, ONFOCUS, ONBLUR (nonstandard)

Hidden Fields Hiden digunakan bila anda ingin mengirimkan value yang tersembunyi HTML Element: <INPUT TYPE="HIDDEN" id="..." VALUE="..."> (No End Tag) Attributes: NAME (required), VALUE

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)

Cascading Style Sheet (CSS)

Presentasi serupa

Presentasi berjudul: "Cascading Style Sheet (CSS)"— Transcript presentasi:

Presentasi serupa

Tentang proyek

Tanggapan

Masuk

Otorisasi melalui jaringan sosial:

Cascading Style Sheet (CSS)

Presentasi serupa

Presentasi berjudul: "Cascading Style Sheet (CSS)"— Transcript presentasi:

Presentasi serupa

Tentang proyek

Tanggapan