Segala sesuatu yang dilihat pengunjung di halaman situs ditampilkan oleh browser berdasarkan instruksi terperinci yang dikirimkan kepadanya oleh server. Instruksi ini disebut kode html halaman dan terdiri dari "tag" terpisah yang menjelaskan jenis, tampilan, dan lokasi setiap elemen satu per satu. Untuk menempatkan elemen baru (misalnya, gambar) ke dalam halaman, Anda perlu menambahkan instruksi yang sesuai - tag - ke kode sumbernya. Pertimbangkan cara termudah untuk melakukan ini.
instruksi
Langkah 1
Jika Anda menggunakan sistem manajemen konten apa pun, kemungkinan besar itu termasuk editor halaman. Pertama, Anda perlu membuka halaman yang diinginkan di editor ini. Lebih lanjut - opsi dimungkinkan. Dalam kasus terbaik, editor halaman akan memiliki "mode visual", dengan kata lain - "mode WYSIWYG" (Apa yang Anda Lihat adalah Apa yang Anda Dapatkan - "apa yang Anda lihat adalah apa yang Anda dapatkan"). Dalam mode ini, Anda tidak perlu berurusan dengan kode html asli sama sekali! Halaman di editor akan terlihat sama seperti di situs, cukup dengan menyodok mouse di tempat yang diinginkan dan tekan tombol "masukkan gambar" pada panel editor.
Langkah 2
Akibatnya, kotak dialog akan terbuka di mana Anda harus memilih gambar yang diinginkan. Jika Anda belum mengunggahnya, ada juga tombol untuk memilih gambar di komputer Anda dan mengunggahnya ke server. Selain itu, dalam dialog ini Anda dapat mengatur warna dan lebar bingkai di sekitar gambar, jarak dan warna isian antara bingkai dan gambar, teks untuk tooltip. Tidak perlu menentukan dimensi di sini, tetapi untuk alasan mempercepat pemuatan halaman dan untuk mencegah distorsi desain, masih lebih baik untuk melakukan ini. Ketika semua bidang dialog yang diperlukan diisi, klik "OK" dan kemudian simpan halaman yang diedit.
Langkah 3
Karena fakta bahwa tidak ada standar tunggal untuk sistem kontrol, prosedur untuk memasukkan gambar dalam mode visual sistem Anda mungkin sedikit berbeda, tetapi prinsipnya akan sama. Untuk alasan yang sama, mode WYSIWYG mungkin tidak muncul di sistem manajemen situs Anda. Kemudian Anda masih harus mengedit kode sumber halaman dalam HTML (HyperText Markup Language - "hypertext markup language"). Anda harus memasukkan tag di tempat yang tepat dalam kode yang memberi tahu browser untuk menampilkan gambar di sini. Dalam bentuknya yang paling sederhana, seharusnya terlihat seperti ini: Ini adalah "alamat relatif" dari gambar - di alamat ini browser harus menghubungi server untuk mendapatkan file gambar darinya. Jika alamatnya relatif, maka browser akan menganggap bahwa file tersebut berada di folder server yang sama dengan halaman itu sendiri (atau dalam subfolder). Tetapi, agar tidak salah, lebih baik menentukan "alamat absolut" - misalnya, seperti ini: Secara alami, agar server dapat menemukan dan mengirim gambar ke browser, itu harus diunggah ke yang ditentukan lokasi. Cara termudah untuk melakukannya adalah melalui pengelola file, yang ada di setiap sistem manajemen konten, serta di panel kontrol perusahaan hosting Anda. Anda juga dapat melakukan ini menggunakan protokol FTP (Protokol Transfer File - "protokol transfer file"), menggunakan program khusus - klien FTP. Ada banyak dari mereka, baik berbayar maupun gratis - misalnya, Cute FTP, FlashFXP, WS FTP, dll. Tetapi, tentu saja, menginstal, menguasai, dan mengonfigurasi program akan memakan waktu, jadi pengelola file untuk mengunduh semua yang Anda butuhkan melalui browser adalah pilihan yang lebih mudah.
Langkah 4
Selain alamat di tag html gambar, Anda dapat menentukan informasi tambahan - "atribut" dari tag. Misalnya, atribut alt="Image" berisi teks untuk tooltip yang muncul saat Anda mengarahkan kursor mouse ke atas gambar: Atribut ini dapat diganti dengan - atribut title: - Ukuran persegi panjang tempat browser seharusnya tampilan gambar diatur oleh atribut lebar dan tinggi: - Atribut perbatasan menentukan lebar perbatasan di sekitar gambar (dalam piksel): Jika gambar dibuat tautan, browser akan menggambar batas biru di sekitarnya. Untuk menghilangkannya, atur nilai batas menjadi nol: - Dua atribut lainnya berisi informasi tentang jumlah lekukan gambar dari elemen yang berdekatan (dari baris teks, gambar lain, dll.) - hspace mengatur ukuran gambar lekukan horizontal (kiri dan kanan), vspace - vertikal (bawah dan atas):
