Lab2Web

Repository ini dibuat untuk memenuhi tugas Pemrograman Web

Nama	Riris Naomi Gurning
NIM	312010190
Kelas	TI.20.A.1

---

LANGKAH - LANGKAH PRATIKUM 2 'CSS DASAR'

Membuka text editor, saya menggunakan Visual Studio Code

1. Membuat dokumen HTML

Buatlah dokumen HTML seperti berikut ini di VSCode:

---

Selanjutnya buka pada brwoser untuk melihat hasilnya.

2. Mendeklarasikan CSS Internal>

Kemudian tambahkan deklarasi CSS internal seperti berikut pada bagian head dokumen.

---

Selanjutnya simpan perubahan yang ada, dan lakukan refresh pada browser untuk melihat hasilnya..

3. Menambahkan Inline CSS

Kemudian tambahkan deklarasi inline CSS pada tag '< p >' seperti berikut:

---

Simpan kembali dan refresh kembali browser untuk melihat perubahannya dan ini hasilnya:

4. Membuat CSS Eksternal

Buatlah file baru dengan nama style_eksternal.css kemudian buatlah deklarasi CSS seperti berikut.

---

Kemudian tambahkan tag '< link >' untuk merujuk file css yang sudah dibuat pada bagian '< head >'

---

Simpan kembali dan refresh kembali browser untuk melihat perubahannya dan ini hasilnya:

5. Menambahkan CSS Selector

Selanjutnya menambahkan CSS Selector menggunakan ID dan Class Selector. Pada file style_eksternal.css, tambahkan kode berikut.

---

Simpan kembali dan refresh kembali browser untuk melihat perubahannya dan ini hasilnya:

6. Memembuat dokumen HTML dengan judul lab2_css_eksternal.html

Buatlah dokumen HTML seperti berikut ini di VSCode :

---

Selanjutnya buka pada brwoser untuk melihat hasilnya.

Pertanyaan dan Tugas

Jawaban

1. Saya akan mengubah dan menambah properti dan nilai pada kode CSS, dimulai dari membuat kerangka html nya

   Kemudian membuat CSS nya dengan menambah properti dan nilai pada kode

   Hasilnya seperti dibawah ini:

   Selanjutnya saya menambahkan css id selector Hasilnya seperti ini:

2. h1{} Untuk memberikan style pada semua element h1

   #intro h1{} Awalan simbol hash (#) memungkinkan kita untuk memberi style pada id. selector id bersifat kaku dan tidak bisa digunakan kembali pada element yang lainnya. Menurut saya lebih baik gunakan selektor class untuk mendefinisikan element yang ingin diberi nilai.

3. Setelah dilakukan pengujian, deklarasi CSS Inline lebih dahulu tampil di browser, itu dikarenakan permintaan HTTP yang sangat kecil memungkinkan untuk ditampilkan dahulu

   Berikut merupakan hasil pengujian deklarasi CSS

   CSS Inline blue

   CSS Internal red

   CSS Eksternal yellow

4. Deklarasi id="paragraf-1" akan ditampilkan pada browser, karena selektor id lebih spesifik dari class atau bahkan element P itu sendiri, kecuali jika kita menambahkan property pada inline element P maka selektor id tersebut akan tertimpa, karena inline lebih spesifik daripada id, class, dan element