Your SlideShare is downloading. ×
Desain Web 2: Pertemuan Ketiga Dasar CSS
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Desain Web 2: Pertemuan Ketiga Dasar CSS

2,529
views

Published on

Dasar-dasar CSS: …

Dasar-dasar CSS:
- Menerapkan CSS: inline, internal, external
- Selector: HTML, CLass, ID

Published in: Technology, Education

1 Comment
3 Likes
Statistics
Notes
No Downloads
Views
Total Views
2,529
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
203
Comments
1
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Desain Web II Perkenalan CSS Pertemuan ke-3 Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 2. Agenda  Perkenalan CSS  Menerapkan CSS di HTML  Class  ID  Universal  Group  Komentar Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 3. Perkenalan CSS  Memisahkan style dengan struktur HTML adalah dengan CSS (Cascading Style Sheet) Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 4. Dasar Selector CSS  Agar CSS dapat berfungsi di halaman Web maka terdapat aturan-aturan yang dinamakan CSS Rules.  Rules diterapkan menggunakan selector  Terdapat tiga macam selector:  HTML Selector  Class Selector  ID Selector Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 5. Dasar Selector CSS  Lihat lagi materi Pertemuan Pertama Desain Web 2 tentang CSS Rules Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 6. Tabel Dasar Selector Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 7. Menerapkan CSS pada HTML  Terdapat 3 metode:  Inline Stylesheet di dalam elemen HTML  Internal Stylesheet di dalam tag <head>  External Stylesheet Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 8. Inline Stylesheet  Memberikan style pada tag HTML langsung  <h1 → tag HTML pembuka  style → atribut style  “color:red;” → deklarasi  color → property  red → value  </h1> → tag HTML penutup Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 9. Inline Stylesheet  Ketikkan style di dalam tag HTML yang akan diberi style  Tambahkan deklarasi CSS dengan daftar yang dipisahkan dengan koma font: italic bold small caps; color: red;  Tambahkan isi dan Tutup tag HTML <h1>Pukulan Kunyuk Melempar Buah</h1> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 10. <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 teman­teman 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> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 11. Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 12. Internal Stylesheet Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 13. Internal Stylesheet  Beri tag <style type=”text/css”></style> tersebut berada di antara tag <head> dan </head>  Tambahkan CSS Rule  Ketikkan selector yang akan diberi style  Ikuti kurung kurawal awal { dan akhiri kurung kurawal akhir }  h1 { … } Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 14. Internal Stylesheet  Letak <style> di awal <head> sebelum <body> <head> <style type="text/css">    h1 {       font: italic bold;       color: red;    }    p { color: blue; } </style> </head> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 15. <body>   <h1>Pengantar</h1>   <p>      Ebook Wiro Sableng berikut ini bukan semua hasil buatan saya sendirian, tetapi juga hasil karya teman­teman 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> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 16. Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 17. External Stylesheet  Gunakan <link> atau @import untuk external stylesheet <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> <head> <style type=”text/css”> @import url(style.css); <style> </head> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 18. External Stylesheet  Isi dari style.css  Pada contoh ini file style.css berada dalam satu folder dengan file html h1 {       font: italic bold;       color: red;    } p { color: blue; } Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 19. Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 20. Mendefinisikan kembali tag HTML Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 21. Mendefinisikan kembali tag HTML  Hampir semua tag HTML memiliki style default berdasarkan browser tertentu.  Sebagai contoh tag <strong>; maka deklarasi style tersebut sama dengan font-weight: bold;  Dengan menambah deklarasi CSS ke selector HTML strong, maka setiap elemen yang diberi tag <strong> akan berubah sesuai keinginan kita Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 22. Mendefinisikan kembali tag HTML  Langkah mendefinisikan tag HTML:  Pilih selector, kemudian awali dengan kurung kurawal buka { dan diakhir dengan kurung kurawal akhir }  Tambah deklarasi sebagai style dengan format property: value;  Contoh strong { color: gray; font­size: .85em; } Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 23. Class  Aturan pemberian nama class:  Gunakan hanya huruf dan angka. Tanda penghubung dan garis bawah dapat dipakai tetapi bukan di awal nama  Karakter pertama tidak boleh angka, garis bawah, dan tanda penghubung  Jangan gunakan spasi  Contoh nama class: .namaPengarang { font­size: 1em; } Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 24. Class yang bergantung  Class yang didefinisikan terkait terhadap suatu taq HTML  Misal p.byline { … } maka class byline hanya bekerja pada tag p Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 25. Contoh Class <style type="text/css">       h1 {          font: italic bold;          color: red;       }       p { color: blue; }       p.byline {          font­size: 1.25em;          text­align: right;          line­height: 1.2em;       }       .author {          color: gray;          font­weight: bold;       } </style> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 26. Implementasi pada HTML <h1>Pengantar</h1> <p> Ebook Wiro Sableng berikut ini bukan semua hasil  buatan saya sendirian, tetapi juga hasil karya teman­ teman 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> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 27. Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 28. Contoh ID  Mirip dengan class, ID digunakan untuk membuat style unik yang independen dari tag HTML  ID digunakan untuk membantu struktur layout halaman Web  Hanya digunakan satu kali saja Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 29. Aturan Penamaan ID  Gunakan hanya huruf dan angka. Tanda penghubung dan garis bawah dapat dipakai tetapi bukan di awal nama  Karakter pertama tidak boleh angka, garis bawah, dan tanda penghubung  Jangan gunakan spasi Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 30. Contoh deklarasi ID di CSS #judul {          border: 1px solid #000;          margin: 5px;          padding: 5px;          background: #c0c0c0;       } Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 31. Penerapan 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 teman­teman kaskuser di thread WIRO SABLENG PENDEKAR NAGA GENI 212.   </p></header> Materi kuliah Desain Web, Teknik Informatika FTUP Disusun oleh Adi Wahyu Pribadi
  • 32. Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 33. Universal Style       * {          margin: 0;          padding: 0;       } Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 34. Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 35. Grouping  Mengelompokkan selector yang dipisahkan dengan koma (,)  Contoh: h1, h2, h3, h4, h5 { font­weight: normal; color: blue; } Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 36. Komentar pada CSS  Komentar berguna untuk memberikan catatan pada kode CSS yang dibuat  Komentar diawali dengan /* dan diakhiri dengan */ /* ID Judul yang berada di atas halaman web */ #judul { border: 1px solid #000;    margin: 5px;    padding: 5px;    background: #c0c0c0; } Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 37. ? Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi