Hello wahai pembaca sekalian blog! Dalam artikel ini anda akan mempelajari segala-galanya tentang bagaimana untuk memasukkan imej pada halaman html . Adakah anda mempunyai beberapa imej yang ingin anda letakkan pada halaman anda atau adakah anda ingin meletakkan logo pada tapak anda? Semua ini mudah. Selepas membaca artikel ini, anda akan dapat memasukkan gambar ke dalam halaman html anda tanpa sebarang kesulitan. Untuk melakukan ini, kami akan bercakap secara terperinci tag dan atributnya, kami akan melihat dengan pantas pada format fail grafik seperti gif, jpeg dan png, dan juga melihat ciri HTML5 baharu yang memudahkan anda memasukkan video dan audio ke dalam tapak anda.

Disebabkan oleh fakta bahawa data grafik dan teks html tidak boleh digabungkan dalam satu fail; pendekatan berbeza digunakan untuk memaparkannya di tapak berbanding dengan elemen lain halaman html. Pertama sekali, imej grafik, dan data multimedia lain disimpan dalam fail berasingan. Dan untuk melaksanakannya ke dalam halaman web, mereka menggunakan teg khas yang mengandungi pautan ke ini fail berasingan. Khususnya, teg sedemikian adalah tag . Setelah menemui teg sedemikian dengan alamat, penyemak imbas mula-mula meminta fail yang sepadan dengan imej, audio atau video daripada pelayan Web, dan kemudian memaparkannya pada halaman Web.

Semua imej grafik dan, secara umum, sebarang data yang disimpan dalam fail yang berasingan daripada halaman web dipanggil dilaksanakan elemen halaman.

Sebelum memasukkan gambar dan melihat tag secara terperinci , berbaloi untuk belajar sedikit tentang format grafik.

Format imej grafik.

Terdapat banyak yang berbeza format grafik, tetapi pelayar hanya menyokong beberapa sahaja. Mari lihat tiga daripada mereka.

1. Format JPEG(Kumpulan Pakar Fotografi Bersama). Format yang agak popular digunakan untuk menyimpan imej. Menyokong warna 24-bit dan mengekalkan semua halftone dalam foto tidak berubah. Tetapi jpeg tidak menyokong ketelusan dan memesongkan butiran kecil dan teks dalam imej. JPEG digunakan terutamanya untuk menyimpan gambar. Fail dalam format ini mempunyai sambungan jpg, jpe, jpeg.

2. format GIF(Format Pertukaran Grafik). Kelebihan utama format ini ialah keupayaan untuk menyimpan beberapa imej sekaligus dalam satu fail. Ini membolehkan anda membuat keseluruhan video animasi. Kedua, ia menyokong ketelusan. Kelemahan utama ialah ia menyokong hanya 256 warna, yang tidak sesuai untuk menyimpan foto. GIF digunakan terutamanya untuk menyimpan logo, sepanduk, imej dengan kawasan lutsinar dan mengandungi teks. Fail dalam format ini mempunyai gif sambungan.

3. format PNG(Grafik Rangkaian Mudah Alih). Format ini dibangunkan sebagai pengganti GIF legasi dan, sedikit sebanyak, JPEG. Menyokong ketelusan, tetapi tidak membenarkan animasi. Format ini mempunyai sambungan png.

Apabila membuat tapak web, mereka biasanya menggunakan imej dalam format JPEG atau GIF, tetapi kadangkala mereka menggunakan PNG. Perkara utama ialah memahami dalam kes mana format yang lebih baik untuk digunakan. Secara ringkasnya:

JPEG paling baik digunakan untuk menyimpan gambar atau imej skala kelabu yang tidak mengandungi teks;

• GIF digunakan terutamanya untuk animasi;
• PNG ialah format untuk semua yang lain (ikon, butang, dll.).

Memasukkan imej ke dalam halaman html

Jadi, bagaimana anda memasukkan imej ke halaman web? Anda boleh memasukkan imej menggunakan satu tag . Penyemak imbas meletakkan imej di lokasi pada halaman web di mana ia menemui teg .

Kod untuk memasukkan imej ke dalam html halaman kelihatan seperti ini:

Kod html ini akan meletakkan pada halaman web imej yang disimpan dalam fail image.jpg, yang terletak dalam folder yang sama dengan halaman web. Seperti yang anda mungkin perasan, alamat gambar ditunjukkan dalam atribut src. Saya sudah memberitahu anda apa itu. Jadi, atribut src ialah atribut yang diperlukan yang berfungsi untuk menunjukkan alamat fail dengan imej. Tanpa atribut src, tag img tidak bermakna.

Berikut ialah beberapa lagi contoh untuk menentukan alamat fail dengan imej:

- kod html ini akan memasukkan imej yang dipanggil image.jpg ke halaman, yang disimpan dalam folder imej yang terletak di akar tapak web.

Atribut src boleh mengandungi bukan sahaja pautan relatif kepada imej. Memandangkan imej disimpan dalam talian bersama dengan halaman html, jadi setiap fail imej mempunyai urlnya sendiri. Oleh itu, anda boleh memasukkan url imej ke dalam atribut src. Sebagai contoh:

Kod ini akan memasukkan imej dari tapak mysite.ru ke halaman. URL biasanya digunakan apabila anda menunjuk ke imej di tapak lain. Untuk imej yang disimpan di tapak anda, lebih baik menggunakan pautan relatif.

Tag ialah elemen sebaris, jadi adalah lebih baik untuk meletakkannya di dalam elemen blok, contohnya di dalam teg

- perenggan:

Jom amalkan dan tampal ke dalam halaman kami dari artikel sebelum ini tentang imej html. Saya akan mencipta folder "imej" di sebelah fail html halaman saya dan meletakkan fail imej "bmw.jpg" di sana, yang kelihatan seperti ini:

Kemudian kod html halaman dengan imej yang dimasukkan akan menjadi seperti ini:

Laman web tentang kereta.

Selamat datang ke laman web automotif kami. Di sini anda akan dapati banyak yang menarik dan artikel yang berguna tentang kereta, tentang mereka spesifikasi teknikal dan ciri.

Bahasa saintifik kereta ini:

Jalan tanpa jejak motor mekanikal kenderaan dengan sekurang-kurangnya 4 roda.

---

Klasifikasi kereta

Kereta adalah daripada jenis berikut:

• Kereta penumpang;


• Kargo;


• SUV;


• Buggy;


• Pickup;


• Sukan;


• Berlumba.

Hak cipta terpelihara. 2010
Laman web tentang kereta.

Dan lihat hasil paparan dalam penyemak imbas:

Seperti yang kita lihat, tidak ada yang rumit tentang meletakkan imej pada halaman web. Seterusnya, mari kita lihat beberapa atribut teg lain yang penting. .

Atribut alt ialah pilihan sandaran

Oleh kerana fail imej disimpan secara berasingan daripada halaman web, penyemak imbas perlu membuat permintaan berasingan untuk mendapatkannya semula. Tetapi bagaimana jika terdapat banyak imej pada halaman dan kelajuan sambungan rangkaian rendah, kemudian dimuatkan fail tambahan ia akan mengambil masa yang agak lama. Dan lebih teruk lagi jika imej itu dipadamkan daripada pelayan tanpa pengetahuan anda.

Dalam kes ini, halaman web itu sendiri akan berjaya dimuatkan, hanya segi empat tepat putih akan dipaparkan dan bukannya imej. Oleh itu, untuk memberitahu pengguna apakah imej itu, . Menggunakan atribut ini, anda menentukan teks pengganti yang dipanggil, yang akan dipaparkan dalam segi empat tepat kosong sehingga imej dimuatkan:

Dan ini kira-kira rupanya:

Tetapkan dimensi imej

Masih terdapat beberapa atribut tag img yang perlu anda ketahui. Ini adalah beberapa sifat lebar Dan ketinggian. Anda boleh menggunakan ini untuk menentukan dimensi imej:

lebar = "300" tinggi = "200">

Kedua-dua atribut menunjukkan saiz dalam piksel. Atribut lebar memberitahu penyemak imbas betapa lebar imej itu sepatutnya, dan atribut ketinggian berapa tinggi ia sepatutnya. Kedua-dua atribut ini boleh digunakan bersama atau berasingan. Sebagai contoh, jika anda hanya menentukan atribut lebar, maka penyemak imbas akan memilih ketinggian secara automatik mengikut kadar lebar yang ditentukan dan juga dalam hal menggunakan atribut ketinggian sahaja. Jika anda tidak menyatakan atribut ini sama sekali, penyemak imbas akan menentukan saiz imej secara automatik sebelum memaparkannya pada skrin. Perlu diingat bahawa penetapan saiz imej akan mempercepatkan sedikit penyemak imbas apabila memaparkan halaman.

Itu sahaja tentang memasukkan imej ke halaman buat masa ini, kemudian kita akan melihat cara memasukkan audio atau video ke tapak web...

Memasukkan video dan audio menggunakan HTML 5

DALAM spesifikasi baru html5 mempunyai beberapa teg baharu yang menjadikannya sangat mudah untuk memasukkan fail multimedia. Ini terpakai terutamanya pada video dan audio.

Untuk memasukkan audio HTML5 menyediakan tag berpasangan Alamat fail di mana klip audio disimpan ditunjukkan menggunakan atribut src yang sudah biasa kepada kami:

Tag

Secara lalai, klip audio tidak dipaparkan pada halaman web. Tetapi jika dalam tag

Teg berpasangan digunakan untuk memasukkan video pada halaman web . Dengan tag ini semuanya sama seperti dengan tag

Tidak banyak lagi yang boleh dikatakan tentang memasukkan gambar dan multimedia ke dalam halaman html. Saya harap soalan itu "Bagaimana untuk memasukkan imej ke dalam halaman html?" Saya jawab awak. jadi saya ringkaskan sahaja:

Untuk memasukkan imej dalam html halaman menggunakan teg tunggal dan nyatakan alamat fail dengan imej dalam atribut src: ;

• dengan menggunakan atribut alt tag anda boleh menetapkan teks gantian sekiranya imej tidak dimuatkan;
• menggunakan atribut lebar Dan ketinggian anda boleh menetapkan saiz imej pada halaman web;
• terdapat tag berpasangan untuk memasukkan audio dan video dalam html5

Jika ada yang kurang jelas, tanya dalam komen dan jangan lupa melanggan kemas kini blog saya. Jumpa anda dalam entri seterusnya!

Untuk sisipan imej dalam HTML Dua format utama yang digunakan ialah GIF dan JPEG. Format GIF boleh disimpan animasi ringkas(sepanduk dinamik), JPEG sangat bagus untuk imej dengan banyak warna, seperti gambar. Format ketiga untuk grafik web ialah PNG, tetapi ia tidak digunakan secara meluas dalam reka bentuk web. Sebarang imej dalam format GIF atau JPEG dimasukkan ke dalam halaman web menggunakan teg;

Atribut SRC

Melalui atribut src alamat (URL) fail imej ditentukan, i.e. penyemak imbas mencari imej yang dikehendaki dalam direktori tapak menggunakan laluan (URL) yang ditentukan dalam atribut ini. Untuk kemudahan, semua imej tapak terletak dalam folder berasingan, biasanya dinamakan gambar. Sebagai contoh, ambil sebarang imej, sebaik-baiknya format kecil, dan simpan dalam imej folder yang dibuat, dengan nama primer.jpg. Seterusnya kita akan merujuknya untuk latihan.

Baiklah, mari cuba selitkan gambar pada halaman? Kami menulis kod (laluan - URL, ditulis bergantung pada lokasi folder dengan imej):

src="image/primer.jpg" >

Perkara yang anda tidak boleh buat tapak web tanpa: ∼ ∼

Apa yang diketahui tentang lelaki ini hanyalah
bahawa dia tidak berada di penjara, tetapi mengapa dia tidak berada di penjara tidak diketahui.
Mark Twain.

Ini adalah pengajaran tentang bagaimana untuk memasukkan gambar dalam HTML, cara mereka bentuknya, cara membungkus teks pada gambar, dsb. Lagipun, diketahui bahawa imej menjadikan tapak lebih menarik dan berbeza daripada sumber lain, jadi keupayaan untuk menggunakan tag dan atributnya sangat berguna dalam Internet moden. Tetapi perkara utama di sini adalah rasa perkadaran!

Lebihan grafik akan menjadikan halaman HTML lebih berat dan, dengan itu, meningkatkan masa pemuatannya. Selain itu, kehadiran nombor besar imej akan mengalih perhatian pelawat daripada kandungan utama tapak (melainkan, sudah tentu, grafik adalah kandungan utama tapak). Jadi, simpan dalam kesederhanaan dan gunakannya hanya di tempat yang diperlukan. Dan anda akan gembira!

Dalam pelajaran tentang, saya sudah bercakap tentang bagaimana anda boleh menggunakan gambar sebagai latar belakang dokumen HTML. Sekarang mari kita bincangkan tentang cara grafik digunakan dalam "lapisan atas" halaman html.

§ 1. Cara memasukkan gambar

Untuk memasukkan imej ke dalam HTML, gunakan teg IMG Dengan wajib atribut SRC. Atribut ini memberitahu pelayar laluan ke fail imej. Itu. untuk memasukkan gambar dengan nama logo.jpg ke tempat tertentu pada halaman (dengan syarat kedua-dua halaman dan gambar terletak dalam satu folder(direktori)) anda perlu memasukkan kod html berikut di tempat ini:

src="logo.jpg">

Jika gambar dan halaman terletak di berbeza direktori (folder), maka anda perlu menentukan laluan ke imej secara relatifnya muka surat. Sebagai contoh, jika halaman html terletak di tapak direktori (folder), dalam direktori (folder) yang sama terdapat imej subdirektori (folder), di mana logo.jpg imej kami terletak, kemudian untuk memasukkannya anda perlu tulis seperti ini:

images/logo.jpg">

Atau anda tidak perlu bimbang dan menunjukkan alamat penuh Gambar. Sebagai contoh, seperti ini:

http://www..png">

Dalam kes kedua, penyemak imbas akan memaparkan kod seperti ini:

Catatan. Jika gambar itu terletak pada komputer anda, tetapi anda mahu memasukkannya ke halaman Internet, maka tiada apa yang akan datang daripadanya. Untuk melakukan ini, anda mesti mengalihkan imej ke suatu tempat dahulu dalam internet(Sebagai contoh, ). Dan nyatakan alamat penuh dalam kod halaman sehingga ke tahap ini dengan gambar.

Sebagai tambahan kepada atribut yang diperlukan SRC pada tag IMG Terdapat beberapa lagi atribut pilihan. Mari kita lihat mereka dengan lebih dekat.

§ 2. Menentukan saiz gambar

Mari kita mulakan dengan atribut yang membolehkan anda menetapkan dimensi gambar(lebih tepat, perhatikan ruang untuk dimensi ini pada halaman). Di sini mereka:

• lebar- lebar imej dalam piksel atau peratusan;


• ketinggian- ketinggian imej dalam piksel atau peratusan.

Jika atribut ini digunakan, ia akan terlebih dahulu memperuntukkan ruang untuk grafik, menyediakan susun atur dokumen, memaparkan teks, dan kemudian memuatkan imej. Pada masa yang sama, ia akan meletakkan imej dalam segi empat tepat saiz yang dipilih, walaupun lebar dan ketinggian sebenar imej adalah lebih besar (mampat) atau lebih kecil (regangan). Dalam kes apabila atribut ini tidak digunakan, penyemak imbas akan memuatkan imej dengan serta-merta, dan paparan teks dan elemen lain yang mengikutinya akan ditangguhkan.

Lebar dan ketinggian imej boleh ditentukan dalam kedua-dua piksel (saiz imej akan tetap tanpa mengira resolusi skrin) dan dalam peratusan (saiz imej akan bergantung pada resolusi skrin pengguna). Sebagai contoh:

lebar = "50" tinggi = "20">

lebar = "10%" tinggi = "5%">

§ 3. Teks alternatif

Jika pengguna telah melumpuhkan paparan imej dalam tetapan penyemak imbas, maka bukannya gambar, teks alternatif boleh dipaparkan yang akan menerangkan jenis grafik yang sepatutnya ada. Ini dicapai dengan menggunakan atribut ALT:

Dalam kes ini, penyemak imbas akan menyimpan ruang pada halaman untuk imej, tetapi bukannya imej itu sendiri, ia akan menunjukkan teks yang anda tulis dalam nilai atribut ALT:

Saya ulangi, ini akan berlaku jika pengguna telah melumpuhkan paparan grafik. Jika tidak, imej akan menyembunyikan teks alternatif.

§ 4. Menjajarkan gambar

Menggunakan atribut yang anda sudah tahu selaraskan anda boleh mengawal penjajaran gambar berbanding elemen lain halaman html. Pada atribut selaraskan terdapat beberapa makna, tetapi kita adalah yang paling masa ini Saya berminat dengan dua:

• dibiarkan- imej terletak di tepi kiri halaman, dan teks mengalir di sekeliling imej di sebelah kanan;


• betul- imej terletak di tepi kanan halaman, dan teks serta elemen lain mengalir di sekeliling imej di sebelah kiri.

Contohnya, kod HTML

pelayar akan dipaparkan seperti ini

Dan kod HTML ini:

akan kelihatan seperti ini:

Untuk menghentikan teks membungkus imej, anda boleh menggunakan teg BR(biasa kepada kami dari bahagian sebelumnya tentang). Pada tag BR terdapat sifat jelas, yang boleh mengambil tiga nilai:

• dibiarkan- hentikan teks membungkus imej dijajar kiri;


• betul- hentikan teks yang membungkus imej dijajar kanan;


• semua- hentikan teks membungkus imej dijajarkan ke kiri dan kanan.

Semasa melancong di Internet, anda sudah tentu melihat di banyak laman web pelbagai gambar, sepanduk, gambar, grafik. Hari ini kita akan belajar cara memasukkan imej ke dalam halaman HTML.

Menambah imej berlaku dalam dua peringkat: pertama, fail grafik disediakan saiz yang betul dan format, dan kemudian ia ditambahkan pada halaman web melalui teg: . Dokumen HTML itu sendiri hanya bertujuan untuk memaparkan imej yang diperlukan, manakala tanpa mengubahnya sama sekali.

Terdapat beberapa perkara yang perlu dipertimbangkan semasa menyediakan imej anda.

1. Memandangkan halaman web dimuatkan melalui rangkaian, faktor penting ialah saiz ("berat") fail grafik , dibenamkan dalam dokumen web. Lebih kecil ia, lebih cepat imej akan dipaparkan.

2. Selalunya dimensi fizikal imej (lebar dan tinggi) mestilah dihadkan (dikurangkan) dalam lebar dan tinggi. Sebagai contoh, tetapkan lebar kepada tidak lebih daripada 700-800 piksel. Jika tidak, keseluruhan imej tidak akan muat dalam tetingkap penyemak imbas, dan bar skrol akan muncul.

Format grafik untuk tapak web

Dua format utama yang paling banyak digunakan untuk grafik web ialah: GIF Dan JPEG. Kualiti seperti: pelbagai fungsi, serba boleh, jumlah kecil fail sumber dengan mencukupi kualiti yang baik, menyampaikan format ini perkhidmatan yang baik, dengan berkesan mentakrifkannya sebagai standard untuk imej web.

Terdapat juga format: PNG, yang turut disokong oleh penyemak imbas apabila menambah imej dan datang dalam dua perisa: PNG-8 Dan PNG-24. Walau bagaimanapun, populariti format PNG jauh lebih rendah dalam pengiktirafan format GIF dan JPEG.

Biasanya untuk imej (gambar) mereka cipta folder berasingan dalam direktori akar dan semua imej untuk tapak disimpan di dalamnya. Kadangkala terdapat beberapa folder sedemikian (jika struktur tapak memerlukannya atau lebih mudah untuk anda menavigasi). Folder ini paling kerap dipanggil: img atau imej (Imej). Dalam kod halaman web mereka tulis laluan penuh ke fail grafik (tempat imej terletak), serta nama fail ini(gambar) yang ingin anda masukkan ke dalam dokumen html.

Kami menulis kod untuk memasukkan gambar ke dalam halaman web

Untuk memasukkan imej ke dalam dokumen HTML, gunakan binaan yang dinyatakan dalam Penyenaraian 8.1. Kod ini dimasukkan ke dalam tempat yang dikehendaki pada halaman web (di mana anda ingin melihat gambar).

Pada halaman kami khusus untuk kereta, saya menyediakan dan memasukkan dua imej. Anda boleh melihat kod benam untuk imej pertama dalam Penyenaraian 8.1.

Penyenaraian 8.1.

Beginilah rupa imej pertama yang disisipkan pada halaman web tapak:

Dan sekarang saya akan mengulas dengan lebih terperinci tentang apa yang tertulis di dalamnya Penyenaraian 8.1.

Imej itu sendiri "dimasukkan" menggunakan tag: img src. Entri penuh kelihatan seperti ini: img src="img/mers1.jpg", Di mana "img/mers1.jpg"– menunjukkan bahawa gambar kami berada dalam folder: img, dan nama fail grafik (gambar): mers1.jpg.

Pada dasarnya, ini sudah cukup untuk memasukkan imej ke halaman web, parameter yang selebihnya adalah pilihan, tetapi saya masih mengesyorkan agar anda sentiasa mendaftarkannya, jika tidak, gambar mungkin tertakluk kepada herotan geometri.

Mari lihat pilihan tambahan:

sempadan="0"– menunjukkan bahawa tiada bingkai di sekeliling imej, cuba tukar 0 kepada nombor lain, contohnya kepada 1 , - sepadan dengan ketebalan bingkai di sekeliling imej dalam 1 piksel, 2 – sepadan dengan ketebalan bingkai di sekeliling imej dua piksel, dsb.

Penting! Jika anda bercadang untuk menjadikan imej sebagai pautan, pastikan anda menunjukkan nilai: sempadan="0".

lebar = "400"– menunjukkan bahawa lebar imej ialah: 400 piksel(letak figura sebenar lebar imej anda).

ketinggian="209"- menunjukkan bahawa ketinggian imej ialah: 209 piksel(letakkan nombor nyata untuk ketinggian imej anda).

Jika anda tidak menyatakan parameter: lebar Dan ketinggian, maka imej mungkin menerima herotan geometri.

hspace="20"– menunjukkan lekukan 20 piksel teks di sekeliling imej.

align="left"– ini adalah teg yang sudah biasa kepada anda….. Betul, ia bermaksud penjajaran kiri, ia juga boleh membawa maksud: betul- penjajaran kanan.

alt="Pandangan hadapan kereta" !}– teks alternatif ditulis di sini, yang dipaparkan apabila anda mengarahkan tetikus ke atas imej.

Dengan cara yang sama, kami akan "menyisipkan" imej kedua ke halaman web, dengan satu-satunya perbezaan ialah ia akan dijajarkan ke kanan.

Komen pada artikel ini (pelajaran):

Sila beritahu saya di mana sebenarnya saya harus mencipta folder img?

Folder img hanyalah nama konvensional, anda boleh memanggilnya apa sahaja yang anda mahu, asalkan anda faham kemudian. Anda boleh menciptanya di mana-mana sahaja, untuk kesederhanaan, buat dalam direktori akar dan letakkan semua imej di sana.

Masalahnya ialah gambar itu tidak dipaparkan, hanya tulisan. Apa yang boleh salah? Terima kasih.

Lihat dengan teliti pada Penyenaraian 8.1 di atas. Bawa semuanya kepada diri sendiri. Dalam direktori akar (di mana semua fail HTML tapak anda berada), buat folder img. Letakkan semua imej anda dalam folder ini. Dalam penyenaraian, tukar mers1.jpg kepada nama fail anda. Tukar juga nilai lebar dan ketinggian kepada saiz sebenar fail anda. Semoga berjaya.

Terima kasih banyak, semuanya berjaya.

Hello. Saya mempunyai situasi yang sama seperti penceramah sebelumnya: Saya menulis kod seperti anda, saya menukar hanya nama fail: bukannya mers.1/jpeg Saya memasukkan pautan Mercedes/jpeg Hanya tetingkap yang muncul pada halaman tulisan di bahagian atas "Pandangan hadapan kereta", dan tidak ada imej Pada pendapat saya, penyemak imbas tidak dapat mencari laluan ke foto atau ia tidak ditulis dengan betul. b

Lihat dengan teliti pada kod img/mercedes/jpeg anda. Anda faham dengan betul, penyemak imbas tidak menemui laluan ke fail grafik. 2. Nama fail tidak betul, lihat bagaimana saya mempunyai mers1.jpg

Nah, saya menyalin kod dan menampalnya, saya mempunyai bujur tanpa gambar, dalam bujur terdapat pautan di bahagian atas!

Halo! Masalahnya sama, saya mencipta folder yang dipanggil img di tempat yang sama dengan dokumen tapak, imej dengan nama 1.jpg disimpan dalam folder ini, saya menulis segala-galanya seperti dalam contoh anda.

Jika anda perasan gambar saya ada dalam folder img

Artikel yang sangat berguna untuk webmaster pemula. Satu-satunya kaveat kepada atribut "alt". Berhubung dengan gambar, artikel itu memberikan tafsiran berikut: "alt="Pandangan hadapan kereta" – здесь прописывается альтернативный текст который высвечивается при наведении мыши на картинку." Не совсем точно: для рисунка - это прорегатива атрибута title. alt - альтернативный текст, который отобразится, если у пользователя графика отключена или картинка не загрузилась; title - атрибут, позволяющий отображать всплывающее пояснение к картинке при наведении на неё курсора.!}

inilah kod saya JADI KENAPA GAMBAR DILETAKKAN DI TEPI KALAU TUGASAN UNTUK IA ADALAH PUSAT?

Dan jika saya mengambil imej dari tapak orang lain, adakah ia tidak melanggar hak cipta?

Terangkan mengapa apabila meletakkan dokumen HTML ke pelayan, sebagai ganti imej terdapat ruang kosong dalam bingkai. Walaupun sebelum paparan, imej adalah seperti yang sepatutnya.

Dmitry, keajaiban tidak berlaku, anda membuat kesilapan di suatu tempat, periksa semua laluan ke gambar, i.e. bagaimana gambar ditulis dalam kod.

Ini kod saya, semuanya didedahkan pada halaman kecuali imej, saya telah mencuba sepanjang hari dalam setiap cara yang mungkin tetapi tiada apa-apa. tolong beritahu saya apa yang perlu dilakukan

AndreyK, sila hubungi saya dalam surat saya. Saya tidak boleh memasukkan imej dengan cara apa pun, saya memasukkan semuanya dengan betul tetapi tiada apa-apa, hanya bingkai dan inskripsi yang muncul

Elvira, saya membaca surat anda, serta semua komen dan surat lain. Tetapi di mana saya harus menjawab ... ke kampung datuk saya???

Saya tidak tahu mengapa semua orang begitu kecewa!? Anda hanya perlu tidak menyalin kod dan kemudian menampalnya, tetapi tulis sendiri dan semuanya akan berfungsi... berikut adalah teks gambar saya

Saya menyalin senarai anda, menampal nilai saya - ada gambar Kemudian saya menaip perkara yang sama di bawah (secara manual) tidak ada gambar - apa keajaiban?

AndreyK tolong beritahu saya di mana ralatnya? Tidak kira berapa kali saya mencuba ia tidak berkesan ((

Andrey, beritahu saya mengapa saya tidak dapat melihat gambar itu. Kod saya: Terdapat tulisan, tetapi tiada gambar. Alamat saya: [e-mel dilindungi] Terima kasih.

Saya juga menderita untuk masa yang lama, tetapi ia berkesan! Memang, folder imj mesti dibuka dalam dokumen HTML.

Saya pasti akan mencubanya, terima kasih

eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee

Saya juga menderita untuk masa yang lama, ternyata folder dengan gambar harus berada di tempat yang sama dengan index.html, terima kasih Elena

Andrey saya masukkan:

Andrey saya masukkan: dan saya tidak mempunyai gambar dalam dokumen itu, hanya tulisan alamat saya: [e-mel dilindungi]

kod saya...takde gambar pun. Folder img berada dalam folder yang sama dengan index... tolong bantu. [e-mel dilindungi] Terima kasih!

Saya tidak tahu. Saya membaca semua komen. Saya mencuba segala-galanya. Saya menyalin dan menampal maklumat saya. Tiada apa yang berkesan. Folder dengan gambar (img) terletak di tempat yang sama dengan index.html. Tapi tak ada gambar. Sebaliknya terdapat palang merah dan tulisan saya bekerja dalam pelayar IE. Inilah yang saya masukkan:

Saya melihat kod HTML halaman sebagai ganti foto dalam pelajaran: Kod pada halaman adalah berbeza daripada yang terdapat dalam penyenaraian. kenapa? dan, dengan cara ini, pada halaman kod "mers1.jpg" digariskan. Gagal menyalin dengan garis bawah. Saya cuba memasukkannya seperti itu. Masih tiada gambar. Apa masalahnya?

Kita tanya diri kita, kita jawab sendiri. Saya menderita untuk masa yang lama dan gambar tidak diselitkan. Ternyata: 1, bukannya tag src saya mempunyai srk 2. Saya keliru apabila saya menyusun laluan ke gambar. Saya menamakan semula folder itu kepada IMG dan semuanya berfungsi. Saya menghabiskan hampir dua hari untuk ini, tetapi ia berbaloi.

Cinta, tetapi kini anda akan mengingati ini sepanjang hayat anda:) Saya bergurau, sudah tentu, jangan tersinggung. Tetapi serius, jika seseorang tidak meninggalkan alamat pemulangan, maka hampir mustahil untuk saya membantunya.

Helo, beritahu saya cara meletakkan satu imej di atas, yang kedua di bawah di sebelah kiri, dan yang ketiga di bahagian bawah di sebelah kanan))))

..........apakah kesilapan saya kerana kehilangan imej?

Segala-galanya dalam kod adalah betul, jika tiada apa-apa yang kacau, semuanya akan berfungsi. Tetapi tulis nama fail (gambar) dalam huruf Inggeris. Banyak pelayan tidak menerima abjad Latin.

Tetapi inilah yang pelik... semasa saya memanggil folder dengan nama yang berbeza, gambar itu tidak mahu muncul, walaupun laluan itu ditulis dengan betul. Sebaik sahaja saya menghubungi IMG, dia segera muncul. Apa tangkapannya?

Marina, tiada muslihat atau provokasi :). Dalam kod Penyenaraian 8.1. ia ditunjukkan bahawa imej ini berada dalam folder: img. Jika anda menukar nama folder untuk imej pada hos anda, kemudian menukarnya dalam penyenaraian, itulah muslihat keseluruhannya.

Saya cuba selitkan gambar!!! Saya menulis semuanya menggunakan notepad, saya melakukan semuanya dengan betul, mungkin tidak berbaloi menggunakan notepad??

Dan saya membuka segala-galanya dalam Mozilla Fire Fox terkini))

Laluan gambar saya ialah C:Documents and SettingsdenisDesktopkoffevinogradwwwImg dan gambar itu sendiri dipanggil gif, juga namanya termasuk 1.gif...saya melakukan ini dalam notepad

Saya melakukannya dan laluan penuh tidak keluar, mozilla tidak melihat foto penjelajah dan menyerlahkannya dengan palang merah

Denis, namakan semula Folder img dalam img , i.e. Semua dalam huruf besar, dan menamakan semula laluan kepadanya juga. Banyak pelayan tidak memaparkan huruf besar dengan betul.

Saya masih mempunyai soalan yang sama: mengapa tidak imej, tetapi hanya inskripsi. Saya mencipta folder berasingan untuk tapak: ia mengandungi halaman Web dan lukisan. Disisipkan: BANTU APAKAH RALAT MEL SAYA: [e-mel dilindungi]

Bagaimana untuk membuat gambar supaya ia boleh dibesarkan atau dikecilkan?

Atas sebab tertentu gambar itu juga tidak tertumpu kepada saya. Apa tangkapannya?.. Kodnya seperti ini:

Bekerja dengan imej dalam HTML (bagaimana untuk memasukkan gambar, menukar saiznya, menjadikan gambar sebagai pautan).

Memasukkan imej

Teg tidak berpasangan digunakan untuk memasukkan imej ke dalam dokumen HTML , yang diletakkan di lokasi dalam dokumen di mana imej harus disisipkan. Tag ini mempunyai parameter yang diperlukan src, yang nilainya menunjukkan laluan ke imej yang dikehendaki dalam direktori laman web anda.

Contohnya, untuk meletakkan imej pada halaman:

Baris berikut diletakkan di tempat yang betul dalam dokumen:

Ini membolehkan penyemak imbas mengetahui bahawa direktori akar tapak www.mysite.com terdapat subdirektori img 1.png

Di sini kami telah menentukan laluan penuh (atau alamat mutlak) kepada imej. Bolehkah anda nyatakan alamat relatif Imej:

Penyemak imbas mentafsir baris ini seperti berikut: dalam direktori di mana dokumen html ini terletak, terdapat subdirektori img, ia mengandungi imej dengan nama 1.png, yang sepatutnya diletakkan pada halaman.

Dan berikut ialah contoh untuk menentukan alamat imej relatif jika tapak anda mempunyai lebih banyak struktur kompleks dan contoh sebelumnya tidak berfungsi:

Penyemak imbas mentafsir baris ini seperti berikut: gabungan aksara ../ bermakna anda perlu naik satu tahap dari direktori di mana dokumen html ini berada; dan kemudian seperti dalam contoh sebelumnya: dalam direktori di mana kita mendapati diri kita terdapat subdirektori img, ia mengandungi imej dengan nama 1.png, yang sepatutnya diletakkan pada halaman.

Atas sebab keselamatan, adalah lebih baik untuk menunjukkan alamat relatif imej, kecuali dalam kes di mana anda meletakkan imej yang terletak di tapak lain pada halaman anda.

Dimensi Imej

Saiz setiap imej ditentukan oleh dua parameter: lebar dan tinggi. Pada tag Terdapat parameter yang sepadan: lebar Dan ketinggian. Parameter ini mengambil nilai dalam piksel (px).

Awak boleh tanya dimensi sebenar Imej:

Ini tidak perlu, tetapi ia berguna kerana... sedikit mempercepatkan proses memuatkan halaman oleh penyemak imbas (pelayar tidak perlu mengira nilai ini secara bebas). Jika dimensi imej dinyatakan dengan serta-merta dalam parameter teg , kemudian di bawah imej ini Ruang akan diperuntukkan pada halaman, dan struktur halaman tidak lagi akan berubah apabila dimuatkan - teks akan melompat, sebagai contoh.

Atau anda boleh membesarkan atau mengurangkan imej dengan menetapkan parameter lebar Dan ketinggian makna lain. Lebih-lebih lagi, jika anda ingin menukar kedua-dua parameter secara berkadar, sudah cukup untuk menunjukkan nilai baharu kepada hanya satu daripadanya, dan hanya tinggalkan yang kedua. Penyemak imbas akan mengiranya secara automatik.

Sebagai contoh, untuk membesarkan imej kita sebanyak 1.5 kali, kita boleh menulis:

atau

Hasilnya akan sama:

Lebih banyak pilihan lebar Dan ketinggian boleh mengambil nilai dalam peratusan. Tetapi! Sila ambil perhatian bahawa ini adalah peratusan saiz tetingkap penyemak imbas. Dalam kes ini, anda juga boleh menentukan hanya satu parameter dan meninggalkan yang kedua.

Sebagai contoh, jika kita mahu imej menempati tepat separuh daripada lebar halaman kita, kita perlu menulis perkara berikut:

Dan kami akan mendapat:

Bingkai di sekeliling imej

Pada tag terdapat satu lagi parameter pilihan sempadan. Gunakannya untuk menetapkan ketebalan bingkai di sekeliling imej. Secara lalai, ketebalan bingkai imej adalah sifar, i.e. tiada bingkai.

Sebagai contoh, ini adalah cara anda boleh menambah bingkai tebal 3 piksel pada gambar kami:

Inilah yang akan ditunjukkan oleh penyemak imbas kepada kami:

Warna jidar sepadan dengan warna teks pada halaman yang ditentukan menggunakan parameter teks tag (Lihat Pelajaran 6. Sifat halaman - parameter tag badan), warna lalai ialah hitam.

Dan jika anda tidak mahu melihat bingkai, paksa parameter sempadan nilai nol:

Teks alternatif

Teks alternatif dipaparkan oleh penyemak imbas menggantikan imej sehingga ia dimuatkan. Atau bukannya gambar, jika atas sebab tertentu ia tidak dipaparkan.

Bila dan jika gambar dimuatkan, teks alternatif akan ditunjukkan apabila anda mengarahkan tetikus anda pada gambar ini.

Untuk menambah teks alternatif, gunakan pilihan alt tag , yang diberikan nilai rentetan, yang mesti disertakan dalam petikan.

Anda boleh membuat teks alternatif berbilang baris.

Untuk melakukan ini, hanya masukkan pemisah baris dalam dokumen HTML.

teks">

Penjajaran Imej

Untuk imej, seperti untuk perenggan, terdapat konsep penjajaran dengan teks dan imej lain pada halaman. Anda juga boleh menetapkan jenis penjajaran menggunakan parameter selaraskan tag .

Di bawah ialah jadual nilai parameter yang mungkin selaraskan:

Pilihan atas teks, atas, tengah, absmid, garis dasar, bawah tetapkan penjajaran menegak imej. Dan parameter dibiarkan Dan betul biarkan penyemak imbas tahu di sebelah mana teks itu harus berada mengalir ke sekeliling gambar.

Padding di sekeliling imej

Untuk mengelakkan teks daripada membalut dekat dengan imej, anda boleh menetapkan padding di sekeliling imej. Anda boleh melakukan ini menggunakan parameter hspace(lapik kiri dan kanan) dan vspace(ruang di bahagian atas dan bawah) teg .

Contoh berikut menunjukkan teks yang membungkus imej, dengan imej dijajarkan ke kiri dan dengan 5 piksel padding di sekelilingnya:

Di bandar Stockholm, di jalan yang paling biasa, di rumah yang paling biasa, tinggal sebuah keluarga Sweden biasa bernama Svanteson. Keluarga ini terdiri daripada seorang ayah yang sangat biasa, seorang ibu yang sangat biasa dan tiga anak yang sangat biasa - Bosse, Bethan dan Baby.

Inilah hasilnya dalam penyemak imbas:

Di bandar Stockholm, di jalan yang paling biasa, di rumah yang paling biasa, tinggal sebuah keluarga Sweden biasa bernama Svanteson. Keluarga ini terdiri daripada seorang ayah yang sangat biasa, seorang ibu yang sangat biasa dan tiga anak yang sangat biasa - Bosse, Bethan dan Baby.

Membahagikan imej kepada bahagian

Ada kalanya perlu diletakkan pada halaman imej besar. Tetapi kemudian halaman akan mengambil masa yang lama untuk dimuatkan. Apa nak buat?

Salah satu yang mungkin Jalan keluar terbaik ialah memotong imej menjadi kepingan dan meletakkannya pada halaman menggunakan jadual. Untuk menjadikan imej kelihatan seperti keseluruhan, adalah perlu untuk mengeluarkan sempadan meja dan semua padding di dalam dan di antara sel. Itu. tetapkan kepada parameter teg yang sepadan

nilai sifar: sempadan="0", cellspacing="0", cellpadding="0".

Dalam contoh berikut, kami membahagikan imej kepada 4 bahagian. Inilah yang akan kelihatan seperti jadual:

Dan inilah hasilnya: