Scribd
Unggah
47 tayangan4 halaman

Modul Praktikum 3 PDF

Modul ini membahas tentang penggunaan style pada pemrograman website, yaitu inline style, embedded style, dan external style. Inline style menggunakan atribut style pada elemen, embedded style mendefinisikan style di dalam tag <style>, sedangkan external style mendefinisikan style di file eksternal CSS. Modul ini juga memberikan contoh kode untuk menerapkan ketiga jenis style tersebut.

Diunggah oleh

MEYDIKA CANDRA AJI
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
47 tayangan4 halaman

Modul Praktikum 3 PDF

Modul ini membahas tentang penggunaan style pada pemrograman website, yaitu inline style, embedded style, dan external style. Inline style menggunakan atribut style pada elemen, embedded style mendefinisikan style di dalam tag <style>, sedangkan external style mendefinisikan style di file eksternal CSS. Modul ini juga memberikan contoh kode untuk menerapkan ketiga jenis style tersebut.

Diunggah oleh

MEYDIKA CANDRA AJI
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 4

Pemrograman Website Modul Praktikum 2

Modul Praktikum 3
Fundamental CSS

Novian Adi Prasetyo, S.Kom., M.Kom.


1
[email protected]
085-799-255-070
Pemrograman Website Modul Praktikum 2
`
3.1. Persiapan
1. Aktifkan Xampp
2. Koneksi Internet

3.2. Inline Style


1. Buat folder baru dengan nama practice3 di dalam folder yang sudah di clone dari
project gitlab masing-masing.
2. Buat file baru dengan nama inline_style.html.
3. Isi dengan kode seperti berikut ini.

4. Inline Style merupakan styling yang diterapkan pada elemen HTML dengan
menggunakan atribut style.

3.3. Embedded Style


1. Buat file baru dengan nama embedded_style.html di dalam folder practice3.
2. Isi dengan kode seperti berikut ini.

Novian Adi Prasetyo, S.Kom., M.Kom.


2
[email protected]
085-799-255-070
Pemrograman Website Modul Praktikum 2
`
3. Embedded Style Sheet merupakan kumpulan rules yang dituliskan dalam berkas
HTML dengan menggunakan elemen <style>. Dengan begitu rules yang dituliskan
hanya dapat dicakup oleh satu berkas HTML. Penulisan rules harus dituliskan
dalam elemen <style> dan ditempatkan di dalam <head> dari berkas HTML.

3.4. External Style


1. Buat file baru dengan nama external_style.html di dalam folder practice3.
2. Isi dengan kode seperti berikut ini.

3. Buat folder baru dengan nama css, lalu buat file baru pada folder tersebut dengan
nama style1.css. Sehingga hasilnya adalah seperti dibawah ini.

4. Isi dengan kode seperti berikut ini.

Novian Adi Prasetyo, S.Kom., M.Kom.


3
[email protected]
085-799-255-070
Pemrograman Website Modul Praktikum 2
`
5. External Style Sheet merupakan berkas terpisah yang di dalamnya hanya terdapat
sebuah rules. Berkas ini harus berekstensi .css, dan berkas ini nantinya
dihubungkan pada dokumen HTML. Cara ini merupakan yang paling powerful
dalam menerapkan styling. Karena dengan cara ini, satu berkas styling (.css) dapat
digunakan oleh banyak berkas HTML. Untuk me-link-kan berkas .css dengan
dokumen HTML, kita dapat gunakan elemen <link> pada <head> berkas HTML.

3.5. Tugas
1. Buat sebuah halaman html dengan nama index.html di dalam folder practice3
yang di dalamnya berisikan kode template dari
https://www.w3schools.com/css/tryit.asp?filename=tryresponsive_col-s. (20)
2. Buka https://www.w3schools.com/css lalu implementasikan CSS Advanced,
tautkan masing-masing hasil implementasi pada index.html. Sehingga hasilnya
kurang lebih seperti berikut ini http://novian.if05a.xyz/practice3/ (40)
3. Lakukan commit & push ke gitlab repository project. (15)
4. Upload ke hosting. (15)
5. Kumpulkan dalam bentuk link file dari gitlab dan link halaman tugas pertemuan 3.
Contoh :
Link file dari gitlab : https://gitlab.com/novian66/quotesrestapi/-
/blob/master/application/controllers/index.html
Link halaman web : http://novian.if05a.xyz/practice3/

6. Keterlambatan pengurangan 30 point.


7. Form di tutup pada H+3.

Novian Adi Prasetyo, S.Kom., M.Kom.


4
[email protected]
085-799-255-070

Anda mungkin juga menyukai