tugas2

PETUNJUK PRAKTIKUM

MATA KULIAH PRAKTIK WEB PROGRAMMING (D6114046)

Semester Genap 2015/2016

Dosen Pengampu: M. Aziz Muslim, S.Kom., M.Kom

Anggyi Trisnawan Putra, S.Si., M.Si

PROGRAM STUDI TEKNIK INFORMATIKA JURUSAN ILMU KOMPUTER

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM UNIVERSITAS NEGERI SEMARANG

2016

PRAKTIKUM PERTEMUAN KE-2

I. Judul Praktikum Dasar-dasar CSS II. Kompetensi Dasar Mampu memahami dan menerapkan materi pengenalan CSS. III. Tujuan Praktikum Tujuan dari praktikum ini adalah memahami pemanfatan CSS di dalam pembuatan desain halaman web. IV. Dasar Teori Cascading Style Sheet (CSS) merupakan aturan untuk mengatur beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman. Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file). Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML. CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya.[1] CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen.[2] Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda. (Source: Wikipedia) V. Peralatan yang Diperlukan 1. Komputer 2. Browser 3. Teks Editor (misal : notepad++) VI. Langkah-langkah Praktikum Lakukan langkah demi langkah dan amati hasilnya!

1. Tuliskan kode HTML berikut ini pada teks editor!

<html> <head> <title>My Web Page</title> <link rel=”stylesheet” href=”style.css” type=”text/css”> </head> <body> <h1>My Title</h1> <p>Hello Worlds</p> <p class=”merah”>Hello Friends!</p> </body> </html>

Simpan kode HTML di atas dengan nama praktikum2a.html. Simpan kode CSS di atas dengan nama style.css, tempatkan pada folder yang sama (sejajar) dengan file praktikum2a.html. Buka file praktikum2a.html dan amati apa yang terjadi!

2. Ubah kode HTML yang ada pada file praktikum2a.html menjadi seperti di bawah ini.

Refresh browser Anda dan amati apa yang terjadi!


Refresh browser, amati apa yang Anda lihat.

<html> <head> <title>My Web Page</title> <style> p{ color: blue; } </style> <link rel=”stylesheet” href=”style.css” type=”text/css”> </head> <body> <h1>My Title</h1> <p style=”color:black;”>Hello Worlds</p> <p class=”merah”>Hello Friends!</p> </body> </html>

h1{ color:green; } p{ color:red; }

<html> <head> <title>My Web Page</title> <style> p{ color: blue; } </style> <link rel=”stylesheet” href=”style.css” type=”text/css”> </head> <body> <h1>My Title</h1> <p>Hello Worlds</p> <p class=”merah”>Hello Friends!</p> </body> </html>



5. Ubah kode CSS yang ada pada file syle.css menjadi seperti di bawah ini.


VII. Hasil Praktikum Isikan tabel berikut berdasarkan hasil pengamatan atas langkah-langkah di poin VI.

Langkah Tampilan (Screenshot) Hasil Pengamatan

1 <tampilan di browser secukupnya> …

VIII. Tugas Tambahan Jawab pertanyaan-pertanyaan berikut ini:

1. Menurut Anda, metode penggunaan CSS mana yang paling baik? Internal, eksternal, atau inline? Jelaskan alasan Anda!

2. Jelaskan kapan kita perlu menggunakan metode internal untuk memanfaatkan CSS!

3. Apa sebenarnya kegunaan “!important” pada CSS? Apa boleh kita sering-sering memakai fasilitas tersebut?

<html> <head> <title>My Web Page</title> <link rel=”stylesheet” href=”style.css” type=”text/css”> <style> p{ color: blue; } </style> </head> <body> <h1>My Title</h1> <p style=”color:black;”>Hello Worlds</p> <p class=”merah”>Hello Friends!</p> </body> </html>

h1{ color:green; } p{ color:red; } .merah{ color:red; }

tugas2

Documents