PEMROGRAMAN INTERNET ABU SALAM M KOM REVIEW TUGAS

PEMROGRAMAN INTERNET ABU SALAM, M. KOM

REVIEW TUGAS 3 üUpload Latihan 3 kedalam web menggunakan hosting dan domain yang sudah diselesaikan pada tugas 2 (Histori link latihan = 3 (latihan 1, latihan 2, latihan 3)) üOptional : dokumentasikan pada blog proses pembuatan halaman web üKonfirmasi progress tugas ke abu. salam@dsn. dinus. ac. id üDilarang copy template dari internet

REVIEW LATIHAN 3 Ubahlah design fremaset pada pertemuan sebelumnya dengan menggunakan tag <div> dan atur tampilan menggunakan CSS.

SPECIFICITY Specificity atau “Kekhususan” pada CSS adalah bagaimana suatu aturan style pada CSS mampu membatalkan aturan pada style lainnya. Sesuai dengan arti harfiah dari “Cascading Style Sheet”, semakin ke bawah aturan CSS akan semakin khusus dan lebih dominan. Pelajaran mengenai CSS Specificity ini penting dan prinsipnya selalu digunakan dalam proses pembuatan website.

Dalam tahap awal pembuatan CSS, web designer pada umumnya memulai dengan menentukan style -style basis untuk elemen HTML yang akan dipakai. Style-style basis atau mendasar ini adalah style yang nantinya akan paling banyak digunakan di dalam website.

Sebagai contoh, kita akan menentukan style untuk font yang paling banyak digunakan. body { font: normal 12 px/150% verdana, arial, sansserif; } style-style yang didefinisikan di dalam body akan diwariskan (inherited) kepada setiap elemen yang terkandung didalamnya. Sebagai contoh apabila di dalam body terdapat elemen p atau div, maka kedua elemen tersebut akan memiliki jenis font yang sama dengan body. Disinilah CSS Specificity berperan penting.

CONTOH body { font: normal 12 px/150% verdana, arial, sans-serif; } h 1 { font-family: georgia; }

PENJELASAN Karena definisi style untuk h 1 diletakkan setelah body, maka setiap elemen h 1 didalam body akan mematuhi style yang didefinisikan khusus untuk h 1. Bagaimana jika h 1 diletakkan sebelum body? Hal ini akan membuat style yang didefinisikan untuk h 1 akan dibatalkan oleh body karena CSS merender style sesuai urutan penulisan. Ini adalah contoh CSS Specificity yang sangat sederhana.

MENGENAL STRATA/TINGKATAN PADA CSS Untuk mempermudah kita dapat menentukan “kekuatan” dari masing strata dengan 4 digit angka. Keempat digit angka tersebut menempati posisi: a, b, c dan d.

SO, WHICH IS BETTER? Inline style Atribut ID Atribut Class Elemen

INLINE STYLE adalah atribut style=" " yang ditempatkan pada tag HTML. Strata ini menempati urutan tertinggi dan menempati posisi “a” pada peta “kekuatan” strata. Nilai pada strata ini selalu 1

ATRIBUT ID pada CSS ditandai dengan “#”. Ditempatkan pada posisi “b”, nilainya tergantung dari jumlah atribut ID yang akan didefinisikan

CSS SYNTAX The syntax for CSS is different than that of (X)HTML markup. Though it is not too confusing, once you take a look at it. It consists of only 3 parts. selector { property: value } The selector is the (X)HTML element that you want to style. The property is the actual property title, and the value is the style you apply to that property.

ATRIBUT CLASS pada CSS ditandai dengan “. ”. Ditempatkan pada posisi “c”, nilainya tergantung dari jumlah atribut Class yang akan didefinisikan

ELEMEN setiap elemen yang didefinisikan pada CSS menempat posisi “d”. Strata terkecil yang nilainya tergantung dari jumlah elemen yang didefinisikan

CONTOH PENILAIAN #container p { color: blue; } /* nilai specificity: 0, 1, 0, 1 */ p { color: red; } /* nilai specificity: 0, 0, 0, 1 */ Pada contoh diatas, tulisan pada p akan berwarna biru walaupun p { color: red; } ditulis paling akhir.

CONTOH #container p { color: blue; } /* nilai specificity: 0, 1, 0, 1 */ #container. content p { color: red; } /* nilai specificity: 0, 1, 1, 1 */ Jika ditotal, 111 > 101, maka tulisan pada p akan berwarna merah.

CONTOH div p { color: blue; } /* nilai specificity: 0, 0, 0, 2 */ . div p { color: red; } /* nilai specificity: 0, 0, 1, 1 */ Lihat perbedaannya? Div yang kedua adalah atribut Class, maka memiliki nilai 10. P akan berwarna merah.

CONTOH div p { color: blue; } /* nilai specificity: 0, 0, 0, 2 */ td div p { color: red; } /* nilai specificity: 0, 0, 0, 3 */ Jika memiliki strata yang sama, maka nilainya akan ditambahkan sesuai jumlah strata tersebut. P akan berwarna merah.

#container div. content p { color: blue; } /* nilai specificity: 0, 1, 1, 2 */ #container ul li p { color: red; } /* nilai specificity: 0, 1, 0, 3 */

<html> <head> <style type="text/css"> #container p { color: blue; } /* nilai specificity: 0, 1, 0, 1 */ #container. content p { color: red; } /* nilai specificity: 0, 1, 1, 1 */ </style> </head> <body> <div id="container"> <p>Paragraf ini berwarna apa? </p> </div> </body> </html>

<html> <head> <style type="text/css"> #container p { color: blue; } /* nilai specificity: 0, 1, 0, 1 */ #container. content p { color: red; } /* nilai specificity: 0, 1, 1, 1 */ </style> </head> <body> <div id="container"> <p style="color: green; ">Paragraf ini berwarna apa? </p> </div> </body> </html>

p { color: yellow !important; } untuk kasus halaman sebelumny jika perintah ini ditambahkan maka yang terjadi style pasti akan berwarna kuning.

CSS SPRITES Merupakan metode penggabungan background image yang dipanggil secara terpisah. Sebuah peramban (browser) dalam memuat sebuah halaman website hanya akan memuat setiap file satu demi satu. Jika ada 10 file gambar, maka akan ada 10 antrian. Dengan menggunakan prinsip CSS Sprites, kita hanya membutuhkan 1 file gambar saja untuk semua backgroundimage.

TAHAPAN: Source Icon : Famfamfam [http: //famfamfam. com/] Fugue dari Yusuke Kamiyamane [http: //p. yusukekamiyamane. com/] Ukuran icon yang digunakan misal 16 x 16 pixels.

Tahap pertama adalah menyatukan 11 icon tersebut menjadi satu gambar memanjang kebawah, maka minimal tinggi gambarnya adalah 10 x 16 pixel = 160 pixel. Posisikan masing-masing icon seperti ilustrasi dibawah ini :

KODE CSS UNTUK CSS SPRITES. csssprites { background: url(image/css_sprites. png) no-repeat 0 -18 px; width: 16 px; height: 16 px; display: block; }

background, untuk mengimpor image ke dalam tag yang diberi kelas tersebut. No-repeat artinya gambar tidak akan tampil berulang-ulang. Dua digit dibelakangnya adalah posisi background tersebut. Angka pertama menunjukkan posisi dari kiri (Left) dan angka kedua menunjukkan posisi dari atas (Top). Angka negatif untuk (Top) menunjukkan bahwa posisi gambar akan bergeser berlawanan arah dari sisi atas (Top) tag.

width dan height, untuk membatasi ukuran tag sehingga background yang terlihat pun hanya sebatas yang diinginkan. display, untuk memberikan penegasan bahwa tag tersebut adalah “block”, sehingga properti width dan height dapat berfungsi. untuk kode HTML nya, anda bisa menggunakan tag span atau div karena keduanya tidak memiliki nilai margin bawaan dari nilai default.

. csssprites { background: url(image/css_sprites. png) no-repeat 0 0; width: 16 px; height: 16 px; display: block; float: left; margin-right: 2 px; } . css-1 { background-position: 0 0; } . css-2 { background-position: 0 -16 px; } . css-3 { background-position: 0 -32 px; } . css-4 { background-position: 0 -48 px; } . css-5 { background-position: 0 -54 px; } . css-6 { background-position: 0 -60 px; } . css-7 { background-position: 0 -76 px; } . css-8 { background-position: 0 -92 px; } . css-9 { background-position: 0 -108 px; } . css-10 { background-position: 0 -124 px; }

KODE HTML <span class="csssprites css 1">  </span> <span class="csssprites css-2">  </span> <span class="csssprites css-3">  </span> <span class="csssprites css 4">  </span> <span class="csssprites css-5">  </span> <span class="csssprites css-6">  </span> <span class="csssprites css 7">  </span> <span class="csssprites css-8">  </span> <span

KESEPAKATAN TUGAS AKHIR KETENTUAN UMUM: • Pembuatan Web App • Kriteria Umum Aplikasi • Tema Bebas / Ditentukan • Contoh (Sosial Media App, Library Online App, Admission Online App, KRS Online App, Kepegawaian Online App, Portal Web + CMS, Dll…)