Bingkai dengan HTML - cara kerjanya
Untuk membuat media di situs web Anda lebih menarik, Anda dapat menggunakan kode HTML untuk menggambar bingkai di sekitarnya. Dalam tip praktis ini, kami akan menunjukkan kepada Anda bagaimana ini bekerja dan apa kelebihan yang ditawarkan cascading style sheets (CSS) ketika mendefinisikan sebuah bingkai.
Pengkodean HTML - menggambar bingkai di sekitar gambar dan media lainnya
Secara default, setiap gambar memiliki bingkai dengan lebar satu piksel. Namun, ini hanya terlihat jika gambar digunakan sebagai hyperlink. Dengan atribut "border" Anda dapat menentukan sendiri ketebalan bingkai.
- Dalam HTML, kode untuk bingkai hitam sepuluh piksel terlihat seperti ini:
- Bingkai ini diterapkan ke keempat sisi objek.
- Atau, Anda dapat menggunakan program pengeditan gambar seperti Gimp untuk menggambar bingkai di sekitar gambar Anda.
- Namun, harap dicatat bahwa ini akan membuat gambar lebih besar dan akan lebih lama bagi pengunjung situs web Anda untuk mengunduh gambar.
Tentukan bingkai dalam dokumen HTML dengan CSS
Anda dapat menentukan bingkai - misalnya kotak di sekitar teks - dengan lembar gaya berjenjang lebih tepat.
- Kiat praktis lain memberi tahu Anda cara mengintegrasikan file CSS ke situs web Anda.
- Dalam dokumen CSS ini Anda dapat mengatur warna dan ketebalan bingkai secara berbeda untuk keempat halaman:
- border-bottom: # 999 - Mengatur warna untuk bingkai bawah. Di sini Anda juga dapat menggunakan "border-top", "border-right" atau "border-left".
- border-width: 0 0 thin thin - Menentukan ketebalan garis. Ini dilakukan searah jarum jam. Di sini ini berarti bahwa tidak ada garis yang dapat dilihat di bagian atas dan kanan, sedangkan garis tipis telah ditentukan di bagian bawah dan kiri.
- border-style: none none groove groove - Menentukan bingkai dekoratif untuk gambar atau kotak Anda. Gaya "alur" menciptakan efek 3D.
Beranda Anda secara alami hidup dari keberadaannya di internet. Pada artikel selanjutnya, Anda akan membaca tips terbaik untuk meningkatkan peringkat Google Anda.