Cara Mengedit Situs Web dengan Alat Pengembang Web Firefox

Catatan: Dalam topik berikutnya yang akan Anda baca, Anda akan mempelajari tentang: Cara Mengedit Situs Web dengan Alat Pengembang Web Firefox

Apakah situs web Anda akan terlihat lebih baik jika logo dipindahkan lima piksel ke kanan atau memiliki latar belakang biru? Apakah mereka akan menambahkan bingkai atau bayangan pada gambar di postingan unggulan Anda? Peramban modern seperti Firefox hadir dengan alat pengembang web yang memungkinkan Anda menguji fungsionalitas internal situs web Anda dan membuat perubahan langsung serta melihat hasilnya dalam waktu nyata.

Dalam tutorial ini, Anda akan mempelajari cara menggunakan Alat Pengembang Web Firefox untuk mengedit halaman web secara langsung.

Note: Panduan ini berlaku untuk sebagian besar browser, termasuk Chrome, Opera, dan Safari.

Temui pengembang web

Alat Pengembangan Web Firefox adalah seperangkat alat yang komprehensif, mulai dari merender semua elemen DOM hingga mengukur kecepatan. Untuk tutorial ini, Anda hanya memerlukan alat “Inspektur” dan “Editor Gaya”.

Luncurkan Firefox dan kunjungi salah satu/situs web Anda. Dari menu hamburger Firefox (kanan atas secara default), pilih “Web Developer -> Style Editor” atau tekan Shift + F7 pada keyboard Anda.

Konsol pengembang web Firefox akan muncul di salah satu sisi jendela, biasanya di bagian bawah. Anda dapat mengubah posisinya dengan mengeklik tombol tiga titik di pojok kanan atas panel dan memilih “Dok Kanan/Kiri” atau “Jendela Terpisah”.

Note: Tutorial ini tidak menunjukkan cara membuat kode HTML dan CSS. Anda dapat mempelajari dasar-dasarnya di sini.

Periksa elemen

Untuk memengaruhi tampilan suatu elemen, Anda harus dapat mendefinisikannya. Klik tombol pertama di toolbar atau tekan Ctrl + Shift + C di keyboard Anda untuk mengaktifkan pemilih elemen.

Gerakkan mouse Anda di sekitar halaman web untuk melihat berbagai bagian halaman web yang disorot. Di sebelahnya, Anda akan melihat pengidentifikasi utamanya mengambang di pop-up.

Ketika Anda mengklik sebuah elemen, itu akan dipilih pada tab Inspektur Alat Pengembang.

Saat Anda menemukan elemen yang ingin Anda sesuaikan, klik kanan entri di Developer Tools Inspector dan pilih dari pop-up yang muncul “Copy -> CSS Selector”.

Mulai pengeditan langsung Anda

Dengan pemilih CSS elemen Anda disalin ke papan klip, kembali ke tab Editor Gaya di jendela Pengembang. Klik tombol “+” di kiri atas untuk “Buat dan lampirkan lembar gaya baru ke dokumen.”

Tempel Pemilih CSS Anda ke dalam gaya kosong yang baru. Tambahkan spasi diikuti dengan satu set kurung kurawal buka dan tutup.

Dalam CSS, tampilan suatu elemen ditentukan dengan terlebih dahulu “menargetkan” menggunakan pengidentifikasi seperti pemilih CSS tersebut, lalu menambahkan beberapa aturan yang memengaruhi tampilannya, yang dikelompokkan dalam kurung kurawal. Apa pun yang ditempatkan di antara kurung kurawal buka dan tutup memengaruhi “elemen yang ditargetkan”.

Misalnya, jika Anda menambahkan aturan di bawah ini:

Ini menyembunyikan elemen yang digunakan dari gambar. Ini mungkin cara termudah untuk mengetahui bahwa Anda menargetkan elemen yang tepat di halaman Anda. Jika hilang, itu benar-benar yang Anda inginkan dan Anda dapat menghapus aturan ini untuk mencoba orang lain. Jika tidak hilang, saatnya kembali ke inspektur dan memilih yang lain.

Kami tidak akan menunjukkan cara membuat kode CSS di sini, tetapi Anda dapat bermain dengan beberapa aturan umum seperti:

perbatasan: rpxba 2px (255,0,0,0.5); warna: #333; ukuran huruf: 20px;

Anda akan melihat bahwa elemen halaman web berubah saat Anda menambahkan aturan ke lembar gaya CSS.

Ingat, tidak ada yang disimpan sebagai catatan akhir. Jika Anda menyukai tampilan Anda, salin kode Anda di suatu tempat di file TXT atau program daftar favorit Anda sehingga Anda atau perancang/pengembang dapat menambahkannya ke lembar gaya situs Anda untuk diubah selamanya. Jika Anda perlu mempelajari lebih lanjut tentang CSS, lihat beberapa game online yang akan membantu Anda menguasai keterampilan tersebut.

Lanjut membaca:

Apakah artikel ini berguna?