Cara Membenamkan Gambar Di Laman Web

Isi kandungan:

Cara Membenamkan Gambar Di Laman Web
Cara Membenamkan Gambar Di Laman Web

Video: Cara Membenamkan Gambar Di Laman Web

Video: Cara Membenamkan Gambar Di Laman Web
Video: Cara Menampilkan Gambar Di Web 2024, Mungkin
Anonim

Semua yang dilihat oleh pengunjung di halaman laman web dipaparkan oleh penyemak imbas berdasarkan arahan terperinci yang dihantar kepadanya oleh pelayan. Arahan ini disebut kod html halaman dan terdiri dari "tag" yang terpisah yang menggambarkan jenis, penampilan dan lokasi setiap elemen secara individu. Untuk meletakkan elemen baru (misalnya, gambar) ke dalam halaman, anda perlu menambahkan arahan yang sesuai - tag - ke kod sumbernya. Pertimbangkan cara termudah untuk melakukan ini.

Memasukkan gambar ke halaman
Memasukkan gambar ke halaman

Arahan

Langkah 1

Sekiranya anda menggunakan sistem pengurusan kandungan apa pun, kemungkinan besar ia termasuk penyunting halaman. Pertama, anda perlu membuka halaman yang dikehendaki dalam penyunting ini. Lebih jauh - pilihan mungkin. Dalam kes terbaik, editor halaman akan mempunyai "mod visual", dengan kata lain - "mod WYSIWYG" (Apa yang Anda Lihat Adalah Apa yang Anda Mendapat - "apa yang anda lihat adalah apa yang anda dapat"). Dalam mod ini, anda sama sekali tidak perlu menangani kod html yang asal! Halaman di editor akan terlihat sama seperti di laman web, cukup untuk mencucuk tetikus di tempat yang diinginkan dan tekan butang "masukkan gambar" pada panel editor.

Langkah 2

Akibatnya, kotak dialog akan terbuka di mana anda perlu memilih gambar yang diinginkan. Sekiranya anda belum memuat naiknya, ada juga butang untuk memilih gambar di komputer anda dan memuat naiknya ke pelayan. Di samping itu, dalam dialog ini anda dapat mengatur warna dan lebar bingkai di sekitar gambar, jarak dan warna pengisian antara bingkai dan gambar, teks untuk petua alat. Tidak perlu menentukan dimensi di sini, tetapi untuk alasan mempercepat pemuatan halaman dan untuk mengelakkan penyelewengan reka bentuk, masih lebih baik untuk melakukan ini. Apabila semua medan dialog yang diperlukan diisi, klik "OK" dan kemudian simpan halaman yang diedit.

Masukkan Kotak Dialog Imej
Masukkan Kotak Dialog Imej

Langkah 3

Kerana kenyataan bahawa tidak ada satu pun standard untuk sistem kawalan, prosedur memasukkan gambar dalam mod visual sistem anda mungkin sedikit berbeza, tetapi prinsipnya akan sama. Atas sebab yang sama, mod WYSIWYG mungkin tidak muncul dalam sistem pengurusan laman web anda. Kemudian anda masih perlu mengedit kod sumber halaman dalam HTML (HyperText Markup Language - "hypertext markup language"). Anda perlu memasukkan tanda di tempat yang betul dalam kod yang memberitahu penyemak imbas untuk menunjukkan gambar di sini. Dalam bentuknya yang paling sederhana, ia akan kelihatan seperti ini: Berikut adalah "alamat relatif" gambar - di alamat ini penyemak imbas harus menghubungi pelayan untuk mendapatkan fail gambar darinya. Sekiranya alamatnya relatif, maka penyemak imbas akan menganggap bahawa fail tersebut berada di folder pelayan yang sama dengan halaman itu sendiri (atau dalam subfolder). Tetapi, agar tidak tersilap, lebih baik menentukan "alamat mutlak" - misalnya, seperti ini: Sememangnya, agar pelayan mencari dan menghantar gambar ke penyemak imbas, ia harus dimuat naik ke yang ditentukan lokasi. Cara termudah untuk melakukannya adalah melalui pengurus fail, yang ada di setiap sistem pengurusan kandungan, dan juga di panel kawalan syarikat hosting anda. Anda juga dapat melakukan ini menggunakan protokol FTP (File Transfer Protocol - "file transfer protocol"), menggunakan program khas - FTP-client. Terdapat banyak di antaranya, baik berbayar dan percuma - misalnya, Cute FTP, FlashFXP, WS FTP, dll. Tetapi, tentu saja, memasang, menguasai dan mengkonfigurasi program akan memerlukan masa, jadi pengurus fail untuk memuat turun semua yang anda perlukan melalui penyemak imbas adalah pilihan yang lebih mudah.

Langkah 4

Sebagai tambahan kepada alamat dalam tag html gambar, anda boleh menentukan maklumat tambahan - "atribut" tag. Sebagai contoh, atribut alt="Image" mengandungi teks untuk petua alat yang muncul ketika anda mengarahkan kursor tetikus ke atas gambar: Ia boleh digantikan dengan atribut - title: - Ukuran segi empat tepat di mana penyemak imbas harus paparan gambar diatur berdasarkan atribut lebar dan tinggi: - Atribut batas menentukan lebar sempadan di sekitar gambar (dalam piksel): Jika gambar dibuat pautan, penyemak imbas akan menarik sempadan biru di sekitarnya. Untuk menyingkirkannya, tetapkan nilai sempadan ke sifar: - Dua atribut lain mengandungi maklumat mengenai jumlah lekukan gambar dari elemen bersebelahan (dari baris teks, gambar lain, dll.) - hspace menetapkan ukuran lekukan secara mendatar (kiri dan kanan), ruang vs - menegak (bawah dan atas):

Disyorkan: