img тагийн нэмэлт шинж чанарууд нь: HTML-д зураг, зураг оруулах HTML хаягууд

Tag IMGвэб хуудсан дээрх зургийг график хэлбэрээр харуулах зориулалттай GIF формат, JPEG эсвэл PNG. Энэ шошго нь зурагтай файлын хаягийг зааж өгдөг src гэсэн ганц шаардлагатай параметртэй. Шаардлагатай бол A саванд IMG тагийг байрлуулснаар зургийг өөр файл руу холбох боломжтой. Үүний зэрэгцээ зургийн эргэн тойронд хүрээ гарч ирэх бөгөөд IMG таг дээр border=0 параметрийг нэмснээр арилгах боломжтой.

Зургийг зургийн газрын зураг болгон ашиглаж болох бөгөөд зураг нь холбоосын үүрэг гүйцэтгэдэг халуун цэгүүдийг агуулна. Ийм газрын зураг гадаад төрхЭнэ нь ердийн дүр төрхөөс ялгаатай биш боловч үүнтэй зэрэгцэн өөр өөр хэлбэрийн үл үзэгдэх бүсэд хуваагдаж, хэсэг бүр нь холбоос болж үйлчилдэг.

Синтакс

Хаалтын шошго
Шаардлагагүй.

Сонголтууд
align - дүрсийг ирмэгийн дагуу хэрхэн зэрэгцүүлэх, текстийг хэрхэн тойруулахыг тодорхойлно.
alt - зургийн өөр текст.
хил - зургийн эргэн тойрон дахь хүрээний зузаан.
өндөр - зургийн өндөр.
hspace - зурагнаас хүрээлэн буй контент хүртэлх хэвтээ зай.
ismap - хөтчид зураг нь сервер талын зургийн газрын зураг гэдгийг хэлдэг.
lowsrc - урьдчилан харуулах бага нягтралтай график файл руу орох зам.
src - график файл руу орох зам.
vspace - зурагнаас хүрээлэн буй контент хүртэлх босоо зай.
өргөн - зургийн өргөн.
usemap - үйлчлүүлэгчийн зургийн газрын зургийн координатыг агуулсан MAP хаяг руу холбоно.

Жишээ 1: IMG тагийг ашиглах

Lorem ipsum dolor sit amet...

IMG шошгоны параметрүүдийн тодорхойлолт

ALIGN параметр

Тодорхойлолт
Зургийн хувьд та вэб хуудсан дээрх текст эсвэл бусад зурагтай харьцуулахад тэдгээрийн байрлалыг зааж өгч болно. Зургийг зэрэгцүүлэх арга нь IMG шошгоны align параметрээр тодорхойлогддог.

Синтакс

Аргументууд
Хүснэгт 1-д align параметрийн боломжит утгууд ба түүнийг ашиглах үр дүнг жагсаав.

Хамгийн алдартай сонголтууд нь зүүн ба баруун сонголтууд бөгөөд энэ нь зургийн эргэн тойронд текстийг боож өгдөг. Текстийг зурагтай нягт таарахгүйн тулд текст хүртэлх зайг пикселээр зааж өгдөг hspace болон vspace параметрүүдийг IMG таг дээр нэмэхийг зөвлөж байна.

Хэдийгээр align параметрийн бүх утгыг хөтчүүд дэмждэг боловч absbottom , absmiddle , baseline , болон texttop аргументуудыг HTML 4 тодорхойлолтод тайлбарлаагүй болно.

Өгөгдмөл утга
доод

Жишээ 2: Зургийг зэрэгцүүлэх

Lorem ipsum dolor sit amet, consectetuer adipiscing elit...

ALT параметр

Тодорхойлолт
Alt параметр нь зургийн өөр текстийг тохируулдаг. Энэ текст нь авах боломжийг танд олгоно текст мэдээлэлХөтөч дээр зураг ачаалах идэвхгүй болсон үед зургийн тухай. Хөтөч нь тэдгээрийн талаарх мэдээллийг хүлээн авсны дараа зураг ачаалагддаг тул зургийн орлуулах текст өмнө нь гарч ирдэг. Ачаалах үед текст нь зургаар солигдох болно.

Мөн хөтчүүд хулганаа зураг дээр гүйлгэхэд туслах текстийг зааврын дагуу харуулдаг.

Синтакс

Аргументууд
Ямар ч тохиромжтой текст мөр. Энэ нь давхар эсвэл дан хашилтанд байх ёстой.

Өгөгдмөл утга
Үгүй

Жишээ 3: Өөр текст нэмэх

alt="Үндсэн хуудас руу буцах" !}>

BORDER параметр

Тодорхойлолт
Вэб хуудсан дээр байрлуулсан зургийг янз бүрийн өргөнтэй хүрээ дотор байрлуулж болно. Энэ нь IMG тагийн хилийн параметрийг ашиглан хийгддэг. Анхдагч байдлаар, зураг нь холбоос биш л бол зургийн эргэн тойронд хүрээ байхгүй. Энэ тохиолдолд хүрээний өнгө нь BODY тагийн хэв маяг эсвэл текстийн параметрийг ашиглан тодорхойлсон текстийн өнгөтэй тохирч байна.

Синтакс

Аргументууд

Өгөгдмөл утга
0

Жишээ 3. Зургийг тойруулан хүрээлээрэй

ногоон хүрээ 2 пикселийн зузаантай

HEIGHT ба WIDTH параметр

Тодорхойлолт
HTML ашиглан зургийн хэмжээг өөрчлөхийн тулд өргөн ба өндрийн параметрүүдийг оруулсан болно. Та утгыг пиксел эсвэл хувиар ашиглаж болно. Хэрэв хувийн оруулгыг тохируулсан бол зургийн хэмжээсийг үндсэн элемент болох IMG шошго байрладаг савтай харьцуулахад тооцоолно. Хэрэв эх контейнер байхгүй бол хөтчийн цонх түүний үүргийг гүйцэтгэнэ. Өөрөөр хэлбэл width=100% гэдэг нь зургийг вэб хуудасны бүхэл бүтэн өргөнөөр сунгана гэсэн үг. Зөвхөн нэг өргөн эсвэл өндрийн параметрийг нэмэх нь зургийн пропорц болон харьцааг хадгална. Хөтөч нь анхны өндөр, өргөнийг тодорхойлохын тулд зургийг бүрэн ачаалах хүртэл хүлээнэ.

Вэб хуудсан дээрх бүх зургийн хэмжээсийг тохируулахаа мартуузай. Энэ нь хуудасны ачааллыг бага зэрэг хурдан болгодог, учир нь хөтөч зураг бүрийн хэмжээг хүлээн авсны дараа тооцоолох шаардлагагүй болно. Энэ мэдэгдэл нь хүснэгт дотор байрлуулсан зургуудад онцгой ач холбогдолтой юм.

Зургийн өргөн ба өндрийг жижиг эсвэл том болгож өөрчилж болно. Гэсэн хэдий ч файлын хэмжээ өөрчлөгдөөгүй хэвээр байгаа тул энэ нь зургийг ачаалах хурдад ямар ч байдлаар нөлөөлөхгүй. Тиймээс болгоомжтой жижигрүүлээрэй, учир нь... Энэ нь уншигчдын дунд яагаад ийм жижиг зургийг ачаалахад удаан хугацаа зарцуулдаг талаар төөрөгдөл үүсгэж болзошгүй юм. Гэхдээ хэмжээг нэмэгдүүлэх нь эсрэг үр дүнд хүргэдэг - зургийн хэмжээ том боловч файл нь ижил хэмжээтэй зурагтай харьцуулахад илүү хурдан ачаалагддаг. Гэхдээ зургийн чанар мууддаг.

Синтакс

Аргументууд
Пиксел эсвэл хувиар илэрхийлсэн аливаа эерэг бүхэл тоо.

Өгөгдмөл утга
Зургийн анхны өргөн эсвэл өндөр.

Жишээ 4: Зургийн хэмжээс

HSPACE ба VSPACE параметр

Тодорхойлолт
Аливаа зургийн хувьд та hspace болон vspace параметрүүдийг ашиглан үл үзэгдэх хэвтээ болон босоо захын зайг тохируулах боломжтой. Энэ нь ялангуяа текстийг зургийн эргэн тойронд ороосон үед үнэн юм. Энэ тохиолдолд текст нь зураг дээр нягт "гүйхгүй" байхын тулд түүний эргэн тойронд хоосон зай нэмэх шаардлагатай.

Синтакс

Аргументууд
Пиксел дэх аливаа эерэг бүхэл тоо.

Өгөгдмөл утга
0

Жишээ 5. Зургийн догол мөр

ISMAP параметр

Тодорхойлолт
Ismap параметр нь хөтчид зураг нь сервер талын зургийн газрын зураг гэдгийг хэлдэг. Зургийн газрын зураг нь ижил зургийн өөр өөр хэсгүүдийн холбоосыг холбох боломжийг танд олгоно. Хоёр хэлбэрээр хэрэгжсэн янз бүрийн сонголтууд- сервер ба үйлчлүүлэгч. Серверийн сонголтыг ашиглах үед хөтөч нь сонгосон холбоосын хаягийг авах хүсэлтийг сервер рүү илгээж, шаардлагатай мэдээлэл бүхий хариуг хүлээнэ. Энэ арга нь үр дүнг хүлээх нэмэлт цаг хугацаа шаарддаг тусдаа файлуудзургийн карт бүрийн хувьд.

Сервер рүү өгөгдөл илгээх нь дараах байдлаар явагдана. Та IMG тагийг А контейнерт байрлуулах хэрэгтэй бөгөөд CGI програмын хаягийг href параметрийн утга болгон зааж өгөх хэрэгтэй. Хөтөлбөр нь зургийн зүүн дээд булангаас тооцоолсон хулганы товшилтоор хүлээн авсан координатуудад дүн шинжилгээ хийж, шаардлагатай вэб хуудсыг буцаана.

Синтакс

Аргументууд
Үгүй

Өгөгдмөл утга
Анхдагч байдлаар, энэ сонголт идэвхгүй байна.

Жишээ 6. Зургийн газрын зураг хэлбэрээр зурах

Хэрэв хэрэглэгч зурган дээрх хулганы координатыг 100, 50 гэж тохируулсан бол холбоос дээр дарсны дараа http://www.htmlbook.ru/cgi-bin/map.cgi?100,50 хаягаар файл нээгдэнэ. Сүүлийн цифрүүдийг GET аргыг ашиглан CGI программ руу шилжүүлж сервер дээр тайлбарлана.

LOWSRC параметр

Тодорхойлолт
Lowsrc параметр нь эцсийн зургийг бүрэн ачаалахаас өмнө чанар муутай зургийг харуулахад ашиглагддаг. Энэ арга нь хэрэглэгчийн хүлээх хугацааг багасгах зорилготой юм. Түүнд эхлээд бага нягтралтай зураг эсвэл хар цагаан зургийг харуулсан бөгөөд анхны файлын хэмжээ бага тул хурдан ачаалагддаг. Хэрэглэгч үүнийг үзэж байх хооронд зураг ачаалж байна сайн чанар, энэ нь аажмаар анхныхыг нь сольдог. Эдгээр зургийн хэмжээ ижил байх ёстой.

Синтакс

Аргументууд

Өгөгдмөл утга
Үгүй

Жишээ 7. Чанар муутай зураг зурах зам

SRC параметр

Тодорхойлолт
Хаяг график файл, вэб хуудсан дээр харагдах болно. Хамгийн алдартай файлууд нь GIF болон JPEG форматтай байдаг.

Синтакс

Аргументууд
Утга нь файлын бүрэн буюу харьцангуй зам юм.

Өгөгдмөл утга
Үгүй

Жишээ 8. График файл руу орох зам

Тодорхойлолт

Tag вэб хуудсан дээр GIF, JPEG эсвэл PNG график форматаар зургуудыг харуулах зориулалттай. Зургийн файлын хаягийг src атрибутаар тодорхойлно. Шаардлагатай бол шошгыг байрлуулснаар зургийг өөр файл руу холбох боломжтой саванд хийнэ . .

Та аль хэдийн мэддэг шинж чанарыг ашиглах тэгшлэхТа html хуудасны бусад элементүүдтэй харьцуулахад зургуудын зэрэгцүүлэлтийг хянах боломжтой. Атрибут тэгшлэххэд хэдэн утга байдаг, гэхдээ бид хамгийн их одоогоорБи хоёрыг сонирхож байна:

• зүүн- зураг нь хуудасны зүүн ирмэг дээр байрладаг бөгөөд текст нь баруун талд байгаа зургийн эргэн тойронд урсдаг;


• зөв- зураг нь хуудасны баруун ирмэг дээр байрладаг бөгөөд текст болон бусад элементүүд зүүн талд байгаа зургийн эргэн тойронд урсдаг.

Жишээлбэл, HTML код

хөтөч иймэрхүү харагдах болно

Мөн энэ HTML код:

иймэрхүү харагдах болно:

Зургийн эргэн тойронд текст ороохыг зогсоохын тулд та шошгыг ашиглаж болно BR(Өмнөх хэсгээс бидэнд танил болсон). Шошгон дээр BRшинж чанар байдаг тодорхой, энэ нь гурван утгыг авч болно:

• зүүн- зүүн тийш зэрэгцүүлсэн зургийн эргэн тойронд текст боохыг зогсоох;


• зөв- баруун тийш зэрэгцүүлсэн зургуудын эргэн тойронд текст боохыг зогсоох;


• бүгд- зүүн болон баруун тийш зэрэгцүүлсэн зургуудыг тойруулан текстийг боохыг зогсоо.

Зураг оруулах:

Тодорхойлолт ба хэрэглээ

Tag HTML баримт бичигт зураг оруулдаг.

Зураг нь техникийн хувьд хуудсанд ороогүй гэдгийг анхаарна уу. Үнэн хэрэгтээ зургууд нь HTML хуудастай холбогддог. Tag дүрсэнд зориулсан савыг бий болгодог.

Шошгон дээр шаардлагатай хоёр шинж чанар: src болон alt.

HTML болон XHTML хоорондын ялгаа

HTML таг дээр хаалтын шошго байхгүй байна.

XHTML шошгон дээр зөв хаалттай байх ёстой.

Img элементийн "align", "border", "hspace", "vspace" шинж чанарууд нь хуучирсан бөгөөд XHTML 1.0 Strict дээр дэмжигддэггүй.

Зөвлөгөө: Alt шинж чанарыг хулганаар гүйлгэгч текст хэлбэрээр биш харин зураг байхгүй үед өөр текст болгон ашигладаг. Зурган дээр хулганаа гүйлгэхэд текстийг харуулахын тулд гарчгийн шинж чанарыг ашиглана уу. Үүнтэй адил: .

Шаардлагатай шинж чанарууд

Нэмэлт шинж чанарууд

Стандарт шинж чанарууд

Үйл явдлын шинж чанарууд

Өнөө үед бараг ямар ч вэбсайт HTML хуудсанд зураг ашиглахгүйгээр хийж чадахгүй, учир нь алдартай мэргэн ухаанд: "Зуун удаа сонссоноос нэг удаа үзсэн нь дээр" гэж хэлдэг. Энэ нийтлэлийг уншсаны дараа та вэбсайтын хуудсанд зураг нэмэхэд ашигладаг IMG хаягийг хэрхэн ашиглах талаар сурах болно. Бид HTML 5-ийн жишээнүүдийг авч үзэх болно, гэхдээ тэдгээр нь гипертекст тэмдэглэгээний хэлний өмнөх хувилбаруудад бас ажиллах болно.

HTML хуудсанд хэрхэн зураг оруулах вэ

Хуудас руу зураг оруулахын тулд IMG HTML хаягийг ашиглана уу. Зургийн хувьд дор хаяж хоёр шинж чанарыг зааж өгөх ёстой: src (зурагтай файл руу очих зам) ба alt (зураг ачаалагдаагүй тохиолдолд хэрэглэгч хардаг өөр текст). Alt шинж чанар нь хоосон байж болох ч заавал байх ёстой. Та мөн гарчгийн атрибутыг тохируулж болох бөгөөд дараа нь зурган дээр хулганыг аваачихад энэ шинж чанарт заасан текст гарч ирнэ.

Хэрэв зурагтай файл нь ачаалагдсан хуудастай нэг хавтсанд байгаа бол src шинж чанарТа зөвхөн файлын нэрийг зааж өгч болно, жишээ нь:

Хэрэв хуудас нь http://www..html хаягаар байрлаж, зураг нь http://www..jpg байвал зураг руу очих замыг дараах байдлаар зааж өгнө.

Хэрэв хуудас нь http://www..site/logo.jpg хавтсанд байгаа бол зам нь дараах байдалтай байна.

Хэрэв зураг http://www.site/images/ хавтсанд байгаа бол тухайн зураг оруулсан сайтын хуудас аль хавтсанд байхаас үл хамааран файлын замыг дараах байдлаар зааж өгч болно.

Эсвэл өөр сайт дээр байгаа бол зургийн файлын бүрэн замыг зааж өгч болно:

Зургийн өргөн ба өндөр

HTML-ийн өмнөх хувилбаруудад өндөр, өргөнийг өргөн ба өндрийн шинж чанаруудыг ашиглан тохируулдаг байсан бол одоо зургийн дэлгэцэнд нөлөөлөх бүх зүйлийг тохируулдаг. CSS ашигланзагварын шинж чанарт. Ихэнхдээ өргөн ба өндрийг пикселээр тодорхойлдог.

Хэрэв өргөн ба өндрийг заагаагүй бол зургийг анхны хэмжээгээр нь харуулах болно. Хэрэв утгууд нь анхны хэмжээсээс бага байвал хөтөч нь зургийг багасгасан хэлбэрээр харуулах болно, хэрэв утга нь том бол хөтөч нь дүрсийг заасан хэмжээс хүртэл сунгах болно энэ тохиолдолдзураг нь тодорхой бус байх болно. Зургийг санамсаргүйгээр гажуудуулахгүйн тулд та жишээлбэл, зөвхөн өндрийг тохируулж, дараа нь өргөнийг заасан өндрийн утгатай пропорциональ хэмжээгээр багасгаж эсвэл нэмэгдүүлэх боломжтой.

Мөн өргөн ба өндрийг хөтчийн цонхны өргөн эсвэл өндрийн хувиар эсвэл тухайн зураг байрлах блок элементийн хувиар тодорхойлж болно.

Зургийг текст болон доголоор боох

Анхдагч байдлаар, текст нь зургийн доор харагдана. Зургийн эргэн тойронд текстийг ороохын тулд float CSS шинж чанарыг ашигладаг бөгөөд энэ нь align шинж чанарыг орлуулдаг. Хэрэв бид зургийг текстийн зүүн талд, текстийг баруун ба доор нь тойруулан урсахыг хүсвэл зүүн талын утгыг тохируулна уу. CSS шинж чанаруудхөвөх ба хэрэв зураг баруун талд байх ёстой бол баруун талын утгыг зааж өгнө:

Та мөн зургийн дээд, баруун, доод, зүүн талд догол мөр тавьж болно:

Үүнтэй ижил зүйлийг товчилсон хэлбэрээр хэлж болно:

Эсвэл та хуучин vspace болон hspace шинж чанаруудын оронд хоёр маржин шинж чанарын утгыг ашиглан босоо болон хэвтээ захын зайг тохируулж болно. Бидэнд дээд ба доод талд 10 пиксел, зүүн ба баруун талд 8 пикселийн зай хэрэгтэй гэж үзье.

Хэрхэн зургийг хуудасны холбоос болгох вэ

Эсвэл бид зургийн жаазны өнгө, төрөл, зузааныг өөрсдөө тохируулж болно.

Вэбд зориулсан зургийн формат

Ерөнхийдөө вэбсайтууд олон зургийн форматыг ашигладаг. Гэрэл зураг авахад ашигладаг JPEG формат, хэрэв танд зураг хэрэгтэй бол ил тод дэвсгэр, дараа нь PNG форматыг ашиглана. Өмнө нь PNG форматын оронд GIF ашигладаг байсан ч аль хэдийн хуучирсан - түүний цорын ганц давуу тал нь хөдөлгөөнт дүрс үүсгэх чадвар юм. Ихэвчлэн PNG болон GIF-ийг зөвхөн дизайны элемент болгон ашигладаг бөгөөд зөвхөн зураг нь тунгалаг хэсэг эсвэл тунгалаг байх шаардлагатай тохиолдолд л ашиглагддаг. Эдгээр форматтай файлууд нь маш том хэмжээтэй тул ердийн гэрэл зурагт ашиглахыг зөвлөдөггүй - үүнд JPEG формат байдаг. Сайт руу зураг оруулахаасаа өмнө өргөн, өндрийг нь тухайн сайт дээр харуулах хэмжээнд хүртэл багасгах нь зүйтэй бөгөөд ингэснээр хэрэглэгчид илүү хурдан ачаалагдана.

Нийтлэлийг хуулбарлахыг хориглоно.