Praktikum Pemrograman Berbasis Web 2015

CSS

A. Latihan
- Latihan1
Source code
index.html

stylesheet.css

1 CSS
 Praktikum Pemrograman Berbasis Web 2015

Hasil:

2 CSS
 Praktikum Pemrograman Berbasis Web 2015

Penjelasan:
File CSS akan memberikan Hasil yang lebih menarik pada HTML. Namun untuk
menampilkan halaman web tersebut kita harus menggunakan jaringan
internet,karena jika tidak ada jaringan internet maka Hasil CSS tidak dapat
ditampilkan.
- Latihan2
Source Code
index.html

stylesheet.css

Hasil:

3 CSS
 Praktikum Pemrograman Berbasis Web 2015
Penjelasan:
Pada Hasil css ini,menampilkan tulisan yang berwana merah,namun pada kata
blue berwarna biru. Hal ini karena pada file css menggunakan span dan
mengatur warna color: blue; dan pada file html kita pisahkan dengan
menggunakan <span> ... </span>.
- Latihan3
Source code:
latihan3.html

latihan3.css

Hasil:

Penjelasan:
Pada latihan3 ini,halaman web menampilkan tulisan yang fontnya berbeda-beda.
Kita dapat mengatur font dari kalimat atau kata dengan memanfaatkan span,sama
seperti saat mengatur warna. Kita apit kata yang akan diubah jenis fontnya dengan
menggunakan <span> ... </span>
- Latihan4
Source code
latihan4.html

4 CSS
 Praktikum Pemrograman Berbasis Web 2015

latihan4.css

Hasil:

Penjelasan:
Pada latihan4 kita menampilkan teks yang telah kita atur ukuran,jenis,dan warna
fontnya menggunakan css. Untuk membuat kalimat yang ingin ditampilkan
berubah sesuai dengan pengaturan yang telah di setting pada css maka kita
gunakan <p> ... </p>
- Latihan5
Source code:
latihan5.html

5 CSS
 Praktikum Pemrograman Berbasis Web 2015
latihan5.css

Hasil:

Penjelasan:
Untuk mengubah warna 3 header,kita deklarasikan terlebih dahulu pada css,yaitu
dengan menggunakan h3,kemudian pada header kita letakkan diantara <h3> ...
</h3>. Sedangkan pada paragraph kita ubah jenis fontnya menjadi courier
new,sama dengan header,namu menggunakan <p> .. </p>. Dan untuk memberi
background pada paragraph menggunakan <span> ... </span> kemudian atur
background-color: yellow;
- Latihan6
Source code:
latihan6.html

6 CSS
 Praktikum Pemrograman Berbasis Web 2015
latihan6.css

Hasil:

Penjelasan:
Header pertama menggunakan jenis verdana dan menggunakan <h1> ... </h1>.
Sedangkan header berikutnya menggunakan jenis font courier menggunakan <h3>
... </h3>. Dan membuat tulisan menjadi ungu dengan <p> {color:purple;}
- Latihan7
Source code:
latihan7.html

latihan7.css

7 CSS
 Praktikum Pemrograman Berbasis Web 2015
Hasil:

Penjelasan:
Mengubah font <h1> menjadi cursive,Times,sans-serif
- Latihan8
Source code:
latihan8.html

latihan8.css

Hasil:

8 CSS
 Praktikum Pemrograman Berbasis Web 2015
Penjelasan:
Kita akan menampilkan segi empat pada halaman web,maka kita atur width dan
height 100px agar sama sisi. Sedangkan untuk memberi warna menggunakan kode
angka pada html,background-color:#cc0000; maka segi empat tersebut akan
menjadi merah.
- Latihan9
Sorce code:

latihan9.css

9 CSS
 Praktikum Pemrograman Berbasis Web 2015
Hasil:

Penjelasan:
Membuat border pada tabel,kemudian atur ketebalan border tersebut dengan
menggunakan border: 1px solid black; setelah itu membuat 9 kotak dengan
menggunakan td dan atur ukurannya height:50px; border: 1px dashed
blue,maksudnya garis putus-putus dengan warna biru.
- Latihan10
Source code
index.html

10 CSS
 Praktikum Pemrograman Berbasis Web 2015
stylesheet.css

aboutme.html

Hasil:

11 CSS
 Praktikum Pemrograman Berbasis Web 2015

Penjelasan:
Membuat button yang akan menyambungkan kita pada halaman web lainnya.
Untuk melakukannya kita gunakan <a href="aboutme.html"> LINK </a> pada
index.html,sehingga jika kita mengklik button tersebut maka kita akan tersambung
pada halaman web lainnya.
- Latihan11
Source code:
index.html

stylesheet.css

Hasil:

12 CSS
 Praktikum Pemrograman Berbasis Web 2015
Penjelasan:
Latihan11 ini kita membuat html bersarang,pada halaman tersebut yang
merupakan html bersarang adalah Forget you guys. Iam about to be red! karena
pada stylesheet.css telah didkelarasikan dengan menggunakan div div div { dan
berwarna merah.
- Latihan12
Source code:
index.html

stylesheet.css

Hasil:

Penjelasan:
HTML juga bisa kita buat kelas. Pada latihan12 ini kit ammebuat kelas mewah
dan pada kelas mewah ini teks akan beri warna orange dan font-family cursive.
Sehingga jika telah menggunakan kelas maka semua yang ada di dalam kelas akan
ikut berubah.

13 CSS
 Praktikum Pemrograman Berbasis Web 2015
- Latihan13
Source code
index.html

stylesheet.css

Hasil:

Penjelasan:
Pada HTML kita dapat menggunakan id sebagai penanda,sehingga akan
mempermudah kita jika ingin melakukan pengeditan. Latihan13 kita membuat id
serious dan pada id tersebut kita berikan perintah jenis font dan warna
font,sehingga pada index.html kalimat yang telah dideklarasikan pada id serious
akan mengikuti format yang telah kita rubah.

14 CSS
 Praktikum Pemrograman Berbasis Web 2015

B. Tugas
- Tugas 1
Source code:
index.html

15 CSS
 Praktikum Pemrograman Berbasis Web 2015

16 CSS
 Praktikum Pemrograman Berbasis Web 2015

style.css

Hasil:

17 CSS
 Praktikum Pemrograman Berbasis Web 2015

Penjelasan:
Pada web sekolah ini,dalam mengisi kontennya kita menggunakan
html,sedangkan dalam desai untuk webnya menggunakan css agar lebih menarik.
Jika ingin menuliskan sesuatu di tampilan halaman web maka kita tulis pada
index.html sedangkan jika ingin merubah atau menformat tampilan web maka kita
ubah style.css
C. Kesimpulan
- Cascading Style Sheets (CSS) adalah suatu teknologi yang digunakan untuk
memperindah halaman website (situs),dengan CSS kita dapat dengan mudah
mengubah keseluruhan warna dna tampilan yang ada di situs kita sekaligus
menformat ulang situs kita.
- Sebuah style sheets terdiri dari beberapa aturan (rules). Masing-masing aturan
terdiri dari satu atau lebih selektor dan sebuah blok deklarasi.
- Selektor dapat ditulis secara kelompok,dipisahkan dengan tanda koma.
- Pendefinisian style untuk elemen HTML dapat dilakukan dengan selector id.
SelektorID didefinisikan sebagai #.
- Eksternal style sheet ideal ketika style diterapkan untuk beberapa halaman.
Dengan sebuah eksternal style sheet, perubahan untuk keseluruhan halaman web
dilakukan dengan merubah satu file saja.
- Internal style sheet seharusnya digunakan ketika dokumen tunggal mempunyai
style unik. Pendefinisian internal dalam bagian head dengan menggunakan tag
<style>.
- Inline styles digunakan dengan menggunakan atribut style dalam tag yang relevan.
Atribut style dapat berisi beberapa properti CSS.

18 CSS
 Praktikum Pemrograman Berbasis Web 2015

D. Daftar Pustaka
- 3_CSS,
http://widioyanto.staff.gunadarma.ac.id/Downloads/files/37019/03_CSS.pdf
- ModulPraktikumWeb3.pdf,
http://pustakaku.com/unduh/2013/03/modulpraktikumweb3.html
- Modul Internet danHTML,
http://uniat.ac.id/files/Modul_Internet_dan_HTML.pdf
- Ahlihi Masruro, S.Kom. 2010. Modul Pemrograman Web. STMIK AMIKOM
Yogyakarta
- Arif Laksito, S.Kom. 2010. Pemprograman Web HTML, XHTML dan CSS.
STMIK AMIKOM Yogyakarta

19 CSS