Tools
Halo, selamat datang :)
Kenalin aku Dibantu, bot yang akan membantu kamu mengatasi permasalahan di modul ini.
Latihan: Menghubungkan Berkas CSS dengan Halaman Profil
Penerapan styling pada Halaman Profil masih berlanjut. Kita belum selesai dan melihat hasilnya hingga saat ini. Jadi, mari kita lanjutkan latihannya.
Tujuan
Pada latihan sebelumnya, kita telah menyiapkan berkas styling dan menuliskan kode di dalamnya. Namun, tak terlihat ada kode styling satu pun yang diterapkan. Apakah ada yang tahu mengapa hal ini terjadi? Jawabannya adalah berkas CSS belum dihubungkan dengan dokumen HTML.
Nah, kali ini kita akan berlatih menghubungkan kedua hal tersebut.
Alur Latihan
Berikut adalah alur latihan kali ini.
- Membuka hasil latihan terakhir dengan VS Code.
- Menghubungkan style.css dengan tag <link> dalam elemen <head>.
- Menjalankan dokumen HTML pada browser.
Latihan Menghubungkan Berkas CSS dengan Halaman Profil
Berikut adalah daftar langkah latihan yang perlu diikuti dan disimak agar latihan berjalan dengan baik.
- Silakan buka proyek Halaman Profil terakhir dengan VS Code.
- Setelah menuliskan rules pada berkas style.css, langkah selanjutnya adalah menghubungkan berkas style.css tersebut sebagai stylesheet pada berkas HTML agar elemen yang ditampilkan dapat menerapkan rules yang ditetapkan.
- Silakan buka kembali berkas index.html, kemudian tambahkan kode berikut dalam elemen <head>.
- <link rel="stylesheet" href="assets/styles/style.css">
- Jadi, keseluruhan kode pada elemen head akan tampak seperti berikut.
- <head>
- <meta charset="utf-8" />
- <title>Kota Bandung</title>
- <!-- My Own Styles -->
- <link rel="stylesheet" href="assets/styles/style.css">
- </head>
- Simpan perubahan pada berkas index.html dan buka berkas tersebut pada browser. Jika kita berhasil menerapkan styling pada berkas HTML, browser akan tampak seperti berikut.
- Perubahan pertama terjadi pada tipe font yang ditampilkan pada seluruh konten dalam elemen body. Silakan perhatikan pada kedua gambar berikut.
- Perubahan lainnya ada dalam elemen <h2> dan <h3> dengan perubahan warna pada teksnya.
- Perubahan terakhir terjadi pada elemen <footer> yang berada di bawah halaman. Elemen ini akan menerapkan warna background berwarna biru, teks berwarna putih, dan padding pada box model.
Selesai! Kita sudah berhasil menerapkan styling dasar pada halaman HTML. Pada materi selanjutnya, kita akan membahas lebih detail mengenai styling dan kita akan belajar menyusun layout agar peletakan elemen dapat lebih presisi.
Halo, selamat datang :)
Kenalin aku Dibantu, bot yang akan membantu kamu mengatasi permasalahan di modul ini.
Catatan Belajar
Pengaturan
Belajar programming dengan terstruktur.
Belajar programming dengan terstruktur.
Belajar programming dengan terstruktur.
Daftar Modul
84% Selesai
