desain web 2: pertemuan ketiga dasar css

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

Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi

Desain Web IIDesain Web II

Perkenalan CSSPerkenalan CSSPertemuan ke-3Pertemuan ke-3



AgendaAgenda

Perkenalan CSSPerkenalan CSS Menerapkan CSS di HTMLMenerapkan CSS di HTML ClassClass IDID UniversalUniversal GroupGroup KomentarKomentar



Perkenalan CSSPerkenalan CSS

Memisahkan style dengan struktur HTML Memisahkan style dengan struktur HTML adalah dengan CSS (Cascading Style adalah dengan CSS (Cascading Style Sheet)Sheet)



Dasar Selector CSSDasar Selector CSS

Agar CSS dapat berfungsi di halaman Web Agar CSS dapat berfungsi di halaman Web maka terdapat aturan-aturan yang maka terdapat aturan-aturan yang dinamakan dinamakan CSS RulesCSS Rules..

Rules diterapkan menggunakan selectorRules diterapkan menggunakan selector Terdapat tiga macam selector:Terdapat tiga macam selector:

HTML SelectorHTML Selector Class SelectorClass Selector ID SelectorID Selector



Dasar Selector CSSDasar Selector CSS

Lihat lagi materi Pertemuan Pertama Lihat lagi materi Pertemuan Pertama Desain Web 2 tentang CSS RulesDesain Web 2 tentang CSS Rules



Tabel Dasar SelectorTabel Dasar Selector



Menerapkan CSS pada HTMLMenerapkan CSS pada HTML

Terdapat 3 metode:Terdapat 3 metode: Inline StylesheetInline Stylesheet

di dalam elemen HTMLdi dalam elemen HTML Internal StylesheetInternal Stylesheet

di dalam tag <head>di dalam tag <head> External StylesheetExternal Stylesheet



Inline StylesheetInline Stylesheet

Memberikan style pada tag HTML langsungMemberikan style pada tag HTML langsung <h1 tag HTML pembuka→<h1 tag HTML pembuka→ style atribut style→style atribut style→ ““color:red;” deklarasi→color:red;” deklarasi→ color property→color property→ red value→red value→ </h1> tag HTML penutup→</h1> tag HTML penutup→



Inline StylesheetInline Stylesheet

Ketikkan Ketikkan stylestyle di dalam tag HTML yang di dalam tag HTML yang akan diberi styleakan diberi style

Tambahkan deklarasi CSS dengan daftar Tambahkan deklarasi CSS dengan daftar yang dipisahkan dengan komayang dipisahkan dengan komafont: italic bold small caps;font: italic bold small caps;color: red;color: red;

Tambahkan isi dan Tutup tag HTMLTambahkan isi dan Tutup tag HTML

<h1>Pukulan Kunyuk Melempar Buah</h1><h1>Pukulan Kunyuk Melempar Buah</h1>



<body> <h1 style="font:Constantia, Georgia, Times, 'Times New Roman', Serif; color:red;">Pengantar</h1> <p> Ebook Wiro Sableng berikut ini bukan semua hasil buatan saya sendirian, tetapi juga hasil karya temanteman kaskuser di thread WIRO SABLENG PENDEKAR NAGA GENI 212. </p> <h1>Mengenal Bastian Tito</h1> <p style="color:blue;"> Adalah seorang penulis cerita silat asal Indonesia. Karyanya yang paling terkenal adalah Wiro Sableng. Ia mulai tekun menulis sejak duduk di bangku SD kelas 3. Karyanya mulai diterbitkan sejak tahun 1964 dan Wiro Sableng sendiri, yang ditulisnya berdasarkan rekaan ditambah bacaan buku sejarah Tanah Jawa mulai terbit pada tahun 1967. </p></body>



Internal StylesheetInternal Stylesheet




Beri tag <style type=”text/css”></style> Beri tag <style type=”text/css”></style> tersebut berada di antara tag <head> tersebut berada di antara tag <head> dan </head>dan </head>

Tambahkan CSS RuleTambahkan CSS Rule Ketikkan selector yang akan diberi styleKetikkan selector yang akan diberi style Ikuti kurung kurawal awal 'Ikuti kurung kurawal awal '{{' dan akhiri ' dan akhiri

kurung kurawal akhir 'kurung kurawal akhir '}}'' h1 { … }h1 { … }




<head><style type="text/css"> h1 { font: italic bold; color: red; } p { color: blue; }</style></head>

Letak <style> di awal <head> sebelum Letak <style> di awal <head> sebelum <body><body>



<body> <h1>Pengantar</h1> <p> Ebook Wiro Sableng berikut ini bukan semua hasil buatan saya sendirian, tetapi juga hasil karya temanteman kaskuser di thread WIRO SABLENG PENDEKAR NAGA GENI 212. </p> <h1>Mengenal Bastian Tito</h1> <p> Adalah seorang penulis cerita silat asal Indonesia. Karyanya yang paling terkenal adalah Wiro Sableng. Ia mulai tekun menulis sejak duduk di bangku SD kelas 3. Karyanya mulai diterbitkan sejak tahun 1964 dan Wiro Sableng sendiri, yang ditulisnya berdasarkan rekaan ditambah bacaan buku sejarah Tanah Jawa mulai terbit pada tahun 1967. </p></body>



External StylesheetExternal Stylesheet

Gunakan <link> atau @import untuk Gunakan <link> atau @import untuk external stylesheetexternal stylesheet

<head>

<link rel="stylesheet"

type="text/css" href="style.css">

</head>

<head>

<style type=”text/css”>

@import url(style.css);

<style>

</head>



External StylesheetExternal Stylesheet

Isi dari style.cssIsi dari style.css Pada contoh ini file style.css berada dalam Pada contoh ini file style.css berada dalam

satu folder dengan file htmlsatu folder dengan file html

h1 { font: italic bold; color: red; }

p { color: blue; }



Mendefinisikan kembaliMendefinisikan kembalitag HTMLtag HTML




Hampir semua tag HTML memiliki style Hampir semua tag HTML memiliki style default berdasarkan browser tertentu.default berdasarkan browser tertentu.

Sebagai contoh tag <strong>; maka Sebagai contoh tag <strong>; maka deklarasi style tersebut sama dengandeklarasi style tersebut sama denganfont-weight: bold;font-weight: bold;

Dengan menambah deklarasi CSS ke Dengan menambah deklarasi CSS ke selector HTML strong, maka setiap selector HTML strong, maka setiap elemen yang diberi tag <strong> akan elemen yang diberi tag <strong> akan berubah sesuai keinginan kitaberubah sesuai keinginan kita




Langkah mendefinisikan tag HTML:Langkah mendefinisikan tag HTML: Pilih selector, kemudian awali dengan kurung Pilih selector, kemudian awali dengan kurung

kurawal buka { dan diakhir dengan kurung kurawal buka { dan diakhir dengan kurung kurawal akhir }kurawal akhir }

Tambah deklarasi sebagai style dengan formatTambah deklarasi sebagai style dengan formatproperty: value;property: value;

ContohContohstrong {strong {

color: gray; fontsize: .85em;color: gray; fontsize: .85em;

}}



ClassClass

Aturan pemberian nama class:Aturan pemberian nama class: Gunakan hanya huruf dan angka. Tanda Gunakan hanya huruf dan angka. Tanda

penghubung dan garis bawah dapat penghubung dan garis bawah dapat dipakai tetapi bukan di awal namadipakai tetapi bukan di awal nama

Karakter pertama tidak boleh angka, garis Karakter pertama tidak boleh angka, garis bawah, dan tanda penghubungbawah, dan tanda penghubung

Jangan gunakan spasiJangan gunakan spasi Contoh nama class:Contoh nama class:

.namaPengarang { fontsize: 1em; }.namaPengarang { fontsize: 1em; }



Class yang bergantungClass yang bergantung

Class yang didefinisikan terkait terhadap Class yang didefinisikan terkait terhadap suatu taq HTMLsuatu taq HTML

Misal Misal p.byline { … }p.byline { … }maka class byline hanya bekerja pada tag maka class byline hanya bekerja pada tag pp



Contoh ClassContoh Class<style type="text/css"> h1 { font: italic bold; color: red; } p { color: blue; } p.byline { fontsize: 1.25em; textalign: right; lineheight: 1.2em; } .author { color: gray; fontweight: bold; }</style>



Implementasi pada HTMLImplementasi pada HTML<h1>Pengantar</h1><p>

Ebook Wiro Sableng berikut ini bukan semua hasil buatan saya sendirian, tetapi juga hasil karya temanteman kaskuser di thread WIRO SABLENG PENDEKAR NAGA GENI 212.</p>

<h1>Mengenal Bastian Tito</h1><p class="byline">

<span class="author">Bastian Tito</span> adalah seorang penulis cerita silat asal Indonesia. Karyanya yang paling terkenal adalah Wiro Sableng. Ia mulai tekun menulis sejak duduk di bangku SD kelas 3. Karyanya mulai diterbitkan sejak tahun 1964 dan Wiro Sableng sendiri, yang ditulisnya berdasarkan rekaan ditambah bacaan buku sejarah Tanah Jawa mulai terbit pada tahun 1967. </p>



Contoh IDContoh ID

Mirip dengan class, ID digunakan untuk Mirip dengan class, ID digunakan untuk membuat style unik yang independen membuat style unik yang independen dari tag HTMLdari tag HTML

ID digunakan untuk membantu struktur ID digunakan untuk membantu struktur layout halaman Weblayout halaman Web

Hanya digunakan satu kali sajaHanya digunakan satu kali saja



Aturan Penamaan IDAturan Penamaan ID

Gunakan hanya huruf dan angka. Tanda Gunakan hanya huruf dan angka. Tanda penghubung dan garis bawah dapat penghubung dan garis bawah dapat dipakai tetapi bukan di awal namadipakai tetapi bukan di awal nama

Karakter pertama tidak boleh angka, garis Karakter pertama tidak boleh angka, garis bawah, dan tanda penghubungbawah, dan tanda penghubung

Jangan gunakan spasiJangan gunakan spasi



Contoh deklarasi ID di CSSContoh deklarasi ID di CSS

#judul { border: 1px solid #000; margin: 5px; padding: 5px; background: #c0c0c0; }



Penerapan ID di HTMLPenerapan ID di HTML

<header id="judul"> <h1>Pengantar</h1> <p> Ebook Wiro Sableng berikut ini bukan semua hasil buatan saya sendirian, tetapi juga hasil karya temanteman kaskuser di thread WIRO SABLENG PENDEKAR NAGA GENI 212. </p></header>



Universal StyleUniversal Style

* { margin: 0; padding: 0; }



GroupingGrouping

Mengelompokkan selector yang Mengelompokkan selector yang dipisahkan dengan koma (,)dipisahkan dengan koma (,)

Contoh:Contoh:h1, h2, h3, h4, h5 {h1, h2, h3, h4, h5 {

fontweight: normal;fontweight: normal;

color: blue;color: blue;

}}



Komentar pada CSSKomentar pada CSS

Komentar berguna untuk memberikan Komentar berguna untuk memberikan catatan pada kode CSS yang dibuatcatatan pada kode CSS yang dibuat

Komentar diawali dengan Komentar diawali dengan /*/* dan diakhiri dan diakhiri dengan dengan */*/

/* ID Judul yang berada di atas halaman web */#judul {

border: 1px solid #000; margin: 5px; padding: 5px; background: #c0c0c0;}



??

desain web 2: pertemuan ketiga dasar css

Technology