Cascading Style Sheet I
A. Tujuan Praktikum
1. Mahasiswa dapat menggunakan format-format css.
2. Mahasiswa dapat mengatur format tampilan halaman web dengan css
B. Dasar Teori
Cascading Style Sheet (CSS) adalah alat untuk penambahan tata letak pada website. Sebagai
misal latar belakang halaman web akan diwarnai merah, perintah HTML adalah sebagai berikut;
<body bgcolor="#FF0000">
Dengan CSS sebagai berikut:
body {background-color: #FF0000;}
hasilnya akan sama. Sintak CSS adalah sebagai berikut:
selektor { properti: harga }
- Selector: berupa tag HTML sebagai misal: body
- Properti: berupa properti tag sebaagai misal: body
- Harga: berupa harga properti sebagai misal: warna latarbelakang merah ("#ff0000")
Berdasakan letak kode CSS dapat dibagi menjadi 3 yaitu: sekrang.
1. In-line (gaya atribut)
Salah satu cara untuk menerapkan CSS untuk HTML adalah dengan menggunakan atribut
HTML style. Bentuk contoh diatas dengan warna latar belakang merah, dapat diterapkan
seperti sebagai berikut:
skrip 6.1 Css Inline___________________________________________________________
1. <html>
2. <head>
3. <title>Contoh</title>
4. </head>
5. <body style="background-color: #FF0000;">
6. <p>Halaman ini warnanya merah </p>
7. </body>
8. </html>
skrip 6.2 Css Internal___________________________________________________________
1. <html>
2. <head>
3. <title>Contoh</title>
4. <style type="text/css">
5. body {background-color: #FF0000;}
6. </style>
7. </head>
8. <body>
9. <p> Halaman ini warnanya merah </p>
10. </body>
11. </html>
3. Eksternal (link ke style sheet)
Sebuah style sheet eksternal hanyalah sebuah file teks dengan ekstensi. Css. Caranya adalah dengan membuat link dari doumen HTML(default.htm) ke style sheet (style.css). Link tersebut dapat dibuat dengan satu baris kode HTML:
Skrip 6.3 File Css 9 (setil/setil.css)_______________________________________________
1. hr {
2. color: #CC0000;
3. height: 5
4. }
5.
6. body {
7. background-color: #FF9900;
8. color: #000099;
9. font-family: Broadway;
10. font-size: 14pt;
11. }
12. h1, h3{
13. text-align: center;
14. }
15.
16.
17. a {
18. color: #cc0000;
19. }
20.
21. a:visited {
22. color: #00cccc;
23. }
24.
25. a:hover {
26. color: #000000;
27. {
skrip 6.4 Dokomen HTML Css eksternal
1. <html>
2. <head>
3. <title>
4. <limk rel="stylesheet" type="text/css" href="setil/setil.css"/>
5. </head>
6. <body>
7. <h1>Latihan Css Eksternal</h1>
8. <h3>Ini percobaan Css lho...</h3>
9. <hr>
10. Pilihan link:
11. <ol>
12. <li><a href="http://hwww.google.com">Google</a></li>
13. <li><a href="http://is.uad.ac.id">Information system Ahmad Dahlan
14. University </a> </li>
15. <li><a href="http://blog.uad.ac.id/suprihatin/">Pak Prih Blog
16. </a></li>
17. </ol>
18. </body>
19. </html>
skrip 6.5. File Css(setil/setil2.css)__________________________________________________
1. hr {
2. color: #cc0000;
3. height: 5
4. }
5.
6. body {
7. background-color: #FF9900;
8. color: #000099;
9. font-family: Broadway;
10. font-size: 14pt;
11. }
12. h1, h3{
13. text-align;center;
14. }
15.
16.
17. a {
18. color: #cc0000;
19. }
20.
21. a:visited {
22. color: #00cccc;
23. }
24.
25. a:hover {
26. color: #000000;
27. }
28. ul {
29. list-style-image: url (pines.gif);
30. }
C. Tugas
1. Cobalah skrip 6.1 dan skrip 6.2 dan amati hasilnya
2. Buatlah folder baru di dalam folder dokumen anda beri nama setil
3. Ketik dan simpanah skrip 6.3 di folder setil
4. Cobalah skrip 6.4 (jangan lupa disimpan di folder dokumen anda).
5. Carilah model bullet simpanlah di folder setil berilah nama pines.gif
6. Modifikasi skrip 6.3 menjadi skrip 6.5
7. Modifikasi skrip 6.4 sehinga menjadi list yang tidak berurut dan mempergunakan setil2.css
A. Tujuan Praktikum
1. Mahasiswa dapat menggunakan format-format css.
2. Mahasiswa dapat mengatur format tampilan halaman web dengan css
B. Dasar Teori
Cascading Style Sheet (CSS) adalah alat untuk penambahan tata letak pada website. Sebagai
misal latar belakang halaman web akan diwarnai merah, perintah HTML adalah sebagai berikut;
<body bgcolor="#FF0000">
Dengan CSS sebagai berikut:
body {background-color: #FF0000;}
hasilnya akan sama. Sintak CSS adalah sebagai berikut:
selektor { properti: harga }
- Selector: berupa tag HTML sebagai misal: body
- Properti: berupa properti tag sebaagai misal: body
- Harga: berupa harga properti sebagai misal: warna latarbelakang merah ("#ff0000")
Berdasakan letak kode CSS dapat dibagi menjadi 3 yaitu: sekrang.
1. In-line (gaya atribut)
Salah satu cara untuk menerapkan CSS untuk HTML adalah dengan menggunakan atribut
HTML style. Bentuk contoh diatas dengan warna latar belakang merah, dapat diterapkan
seperti sebagai berikut:
skrip 6.1 Css Inline___________________________________________________________
1. <html>
2. <head>
3. <title>Contoh</title>
4. </head>
5. <body style="background-color: #FF0000;">
6. <p>Halaman ini warnanya merah </p>
7. </body>
8. </html>
skrip 6.2 Css Internal___________________________________________________________
1. <html>
2. <head>
3. <title>Contoh</title>
4. <style type="text/css">
5. body {background-color: #FF0000;}
6. </style>
7. </head>
8. <body>
9. <p> Halaman ini warnanya merah </p>
10. </body>
11. </html>
3. Eksternal (link ke style sheet)
Sebuah style sheet eksternal hanyalah sebuah file teks dengan ekstensi. Css. Caranya adalah dengan membuat link dari doumen HTML(default.htm) ke style sheet (style.css). Link tersebut dapat dibuat dengan satu baris kode HTML:
Skrip 6.3 File Css 9 (setil/setil.css)_______________________________________________
1. hr {
2. color: #CC0000;
3. height: 5
4. }
5.
6. body {
7. background-color: #FF9900;
8. color: #000099;
9. font-family: Broadway;
10. font-size: 14pt;
11. }
12. h1, h3{
13. text-align: center;
14. }
15.
16.
17. a {
18. color: #cc0000;
19. }
20.
21. a:visited {
22. color: #00cccc;
23. }
24.
25. a:hover {
26. color: #000000;
27. {
skrip 6.4 Dokomen HTML Css eksternal
1. <html>
2. <head>
3. <title>
4. <limk rel="stylesheet" type="text/css" href="setil/setil.css"/>
5. </head>
6. <body>
7. <h1>Latihan Css Eksternal</h1>
8. <h3>Ini percobaan Css lho...</h3>
9. <hr>
10. Pilihan link:
11. <ol>
12. <li><a href="http://hwww.google.com">Google</a></li>
13. <li><a href="http://is.uad.ac.id">Information system Ahmad Dahlan
14. University </a> </li>
15. <li><a href="http://blog.uad.ac.id/suprihatin/">Pak Prih Blog
16. </a></li>
17. </ol>
18. </body>
19. </html>
skrip 6.5. File Css(setil/setil2.css)__________________________________________________
1. hr {
2. color: #cc0000;
3. height: 5
4. }
5.
6. body {
7. background-color: #FF9900;
8. color: #000099;
9. font-family: Broadway;
10. font-size: 14pt;
11. }
12. h1, h3{
13. text-align;center;
14. }
15.
16.
17. a {
18. color: #cc0000;
19. }
20.
21. a:visited {
22. color: #00cccc;
23. }
24.
25. a:hover {
26. color: #000000;
27. }
28. ul {
29. list-style-image: url (pines.gif);
30. }
C. Tugas
1. Cobalah skrip 6.1 dan skrip 6.2 dan amati hasilnya
2. Buatlah folder baru di dalam folder dokumen anda beri nama setil
3. Ketik dan simpanah skrip 6.3 di folder setil
4. Cobalah skrip 6.4 (jangan lupa disimpan di folder dokumen anda).
5. Carilah model bullet simpanlah di folder setil berilah nama pines.gif
6. Modifikasi skrip 6.3 menjadi skrip 6.5
7. Modifikasi skrip 6.4 sehinga menjadi list yang tidak berurut dan mempergunakan setil2.css
Tidak ada komentar:
Posting Komentar