Asas HTML - Memaparkan Imej

• April 29, 2024

Sebaik sahaja anda mempunyai teks laman web anda yang diposkan dan diformat mengikut keinginan anda, sudah tiba masanya untuk memanjakan halaman dengan beberapa imej. Bukan sahaja imej boleh menambahkan warna dan kehidupan ke halaman anda, anda juga boleh menggunakannya untuk menghasilkan kesan teks yang sukar atau tidak mungkin dilakukan dengan teks biasa dan pemformatan. Sebagai contoh, pilihan font anda biasanya akan dihadkan kepada sejumlah kecil fon yang anda pasti akan dipasang pada komputer pelawat, kerana jika mereka tidak memasang font mereka tidak dapat melihatnya di laman web anda! Bila-bila masa anda menghantar teks dalam fon yang tidak tersedia, komputer pelawat akan menjadikannya dalam apa jua font yang ada yang paling dekat dengan gaya, yang sering boleh merosakkan malapetaka pada reka bentuk laman web anda.

Sebaliknya, jika anda menggunakan program pengeditan imej untuk menangkap teks dalam font mewah dan menyiarkannya sebagai GIF atau JPEG di laman web anda, mana-mana pelawat akan melihatnya dengan tepat seperti yang anda inginkan - kerana sekarang gambar teks bukan teks itu sendiri. Ini boleh membebaskan anda menggunakan font fancy dalam tajuk anda dan mengelompokkannya dengan cara yang luar biasa.

Tag asas yang digunakan untuk memaparkan imej adalah seperti berikut:



Kod di atas akan berfungsi dengan sempurna dalam HTML. Sekiranya anda menggunakan XHTML atau ingin memastikan bahawa laman web anda bersedia XHTML, anda harus menambahkan slash untuk menutup tag, kerana dalam XHTML anda tidak boleh menggunakan tag terbuka:



'Src' pendek untuk sumber, dan anda akan menggunakannya untuk menentukan laluan fail ke imej anda - dengan kata lain, untuk memberitahu pelayar anda di mana imej itu boleh didapati di laman web anda. Jika anda menyimpan imej anda dalam folder yang sama dengan halaman web anda, anda tidak perlu menyenaraikan folder dalam teks 'src' - anda hanya boleh menaip nama fail imej.

Sebaik sahaja anda telah menentukan sumber imej anda, anda boleh meningkatkan rangka kerja asas ini dengan pelbagai atribut pilihan untuk memanfaatkan imej anda. Satu atribut yang anda harus selalu gunakan adalah atribut 'alt'. Ini membolehkan anda menentukan teks apa yang harus dipaparkan oleh penyemak imbas jika tidak dapat menunjukkan imej anda untuk sebab tertentu. Teks 'alt' disediakan seperti berikut:



Satu lagi atribut yang berguna ialah tag 'lebar' dan 'ketinggian'. Ini membolehkan anda memaparkan imej pada saiz yang berbeza daripada saiz imej yang sebenar. Anda boleh menggunakannya untuk tweak imej anda supaya ia sesuai dengan reka bentuk halaman keseluruhan anda. Walau bagaimanapun, secara amnya lebih baik untuk menukar saiz imej sebenar menggunakan program penyuntingan imej dan kemudian menyiarkan imej secara atas talian, kerana dua sebab. Pertama, perisian penyuntingan imej hampir selalu memberikan hasil yang lebih baik daripada tweaking ukuran dengan tangan. Kedua, menukar teg 'lebar' dan 'ketinggian' tidak mengubah saiz fail imej sebenar, jadi jika anda mempunyai imej yang besar yang anda paparkan sebagai lakaran kecil, imej akan mengambil masa yang lama untuk memuat dan akan mengunyah sama seperti lebar lebar seolah-olah anda telah memaparkannya pada saiz penuh.

Apabila menyatakan saiz imej, anda boleh menyenaraikan ketinggian, lebar atau kedua-duanya. Saiz ditentukan oleh piksel seperti yang anda boleh lihat di bawah:



Anda juga boleh 'menyelaraskan' imej anda untuk berfungsi dengan lancar dengan aliran teks anda. Jika anda memilih penjajaran kiri, teks akan bermula di sebelah kanan imej. Jika anda memilih penjajaran yang betul, imej akan dipaparkan di sebelah kanan halaman, dan teks anda akan muncul ke sebelah kiri imej dan kemudian memecah ke baris baru.

Penjajaran imej ditetapkan seperti berikut:



Anda juga boleh menetapkan penjajaran ke "atas," "bawah," atau "tengah" untuk membuat garis imej dengan sama ada bahagian atas atau bawah garisan teks. Jika anda tidak menentukan penjajaran, imej akan lalai ke "bawah."

Sebagai nota sampingan, anda boleh memasukkan atribut imej anda (src, align, alt, dll.) Dalam sebarang urutan dalam tag imej. Pilihan peribadi saya adalah untuk menyenaraikan atribut 'src' terlebih dahulu, kerana itu adalah atribut yang paling asas dan mesti disertakan dalam setiap tag imej, tetapi anda boleh menggunakan urutan apa pun yang paling alami kepada anda.

Arahan Video: Cara Ganti Background foto agar lebih Menarik - Photoshop Tutorial Indonesia (April 2024).