Зургийн болон объектод зориулсан HTML IMG Тоог ашиглах
HTML IMG тааг нь вэб хуудас доторх зураг болон бусад статик график зүйлсийг оруулахыг зохицуулдаг. Энгийн т лб р нь олон тооны зайлшг й, нэмэлт шинж чанаруудыг дэмждэг ба энэ нь х ндтэй, зураг т с втэй вэбсайтыг зохиох чадварт нь баялаг нэмж байдаг.
Бүрэн үүссэн HTML IMG тагны жишээ иймэрхүү байна:
Шаардлагатай IMG Tag Аттрибутууд
SRC. Вэбсайт дээр харагдах зургийг авах цорын ганц шинж чанар бол SRC шинж чанар юм. Энэ шинж чанар нь зураг дүрслэгдэх нэр, байршлыг тодорхойлдог.
ALT. Хүчин төгөлдөр XHTML болон HTML4 бичихийн тулд ALT шинж чанар шаардлагатай. Энэ шинж чанар нь дүрсийг дүрсэлсэн текстээр хараагүй хөтчүүдийг үзүүлэхэд хэрэглэгддэг. Хөтчүүд нь өөр хувилбаруудыг өөр аргаар харуулдаг. Зарим нь үүнийг дэлгэц дээр хулганаа байрлуулах үед дэлгэцэн дээр харуулах, зарим нь зураг дээр баруун товчлуур дээр дарах үед зарим нь үүнийг харуулдаг.
Вэб хуудасны текстэнд хамааралгүй эсвэл чухал биш зургийн тухай нэмэлт мэдээллийг өгөхийн тулд alt текстийг ашиглаарай. Гэхдээ дэлгэц уншигч болон бусад текст-зөвхөн хөтчүүд дээр текстийг хуудсан дээрх текстийн үлдсэн хэсэгт уншуулах болно гэдгийг санаарай. Төөрөгдөл гаргахаас зайлсхийхийн тулд зөвхөн "лого" -ны оронд "Жишээ нь вэб дизайн болон HTML тухай" тайлбарласан өндөр бичвэрийг ашиглана уу.
HTML5-д ALT шинж чанар нь үргэлж шаардлагатай биш бөгөөд учир нь та текстийг илүү дэлгэрэнгүй тайлбарыг ашиглаж болно. Та мөн бүрэн тодорхойлолт агуулсан ID-г тодорхойлохын тулд ARIA-DESCRIBEDBY атрибутыг ашиглаж болно.
Аль текст нь зураг цэвэрлэсний дараа заавал зурах шаардлагагүй, жишээ нь веб хуудас буюу дүрс дээрээс график гэх мэт. Гэхдээ хэрэв та итгэлгүй байгаа бол зөвхөн текстийг оруулаарай.
Зөвлөмж болгож буй IMG шинжүүд
WIDTH ба HEIGHT . Та үргэлж WIDTH болон HEIGHT шинж чанаруудыг ашигладаг зуршилд орох хэрэгтэй. Мөн та үргэлж жинхэнэ хэмжээг ашиглах хэрэгтэй бөгөөд өөрийн зургуудыг браузераар өөрчлөх боломжгүй.
Эдгээр атрибутууд нь хуудсын рекламыг хурдасгадаг тул хөтөч нь зурагны дизайн дахь зайг хуваарилж болох бөгөөд дараа нь бүхэл зураг татаж авахыг хүлээлгүй үлдсэн агуулгыг үлдээхийг үргэлжлүүлээрэй.
Бусад ашигтай IMG шинжүүд
TITLE . Аттрибут нь ямар ч HTML элементэд хэрэглэгдэж болох дэлхийн шинж чанар юм. Түүнээс гадна, TITLE шинж чанар нь танд зурагтай холбоотой нэмэлт мэдээлэл оруулах боломжийг олгодог.
Ихэнх хөтчүүд TITLE-ийн шинж чанарыг дэмждэг боловч тэд өөр өөр аргаар үүнийг хийдэг. Зарим нь уг текстийг попап хэлбэрээр харуулдаг бол зарим нь хэрэглэгчийн зураг дээр зөв дарах үед мэдээллийн дэлгэц дээр харуулдаг. Та дүрсний талаар нэмэлт мэдээлэл бичихдээ TITLE шинж чанарыг ашиглаж болно, гэхдээ энэ мэдээллийг далд эсвэл харагдах аль алинд нь тооцоогүй болно. Хайлтын системд түлхүүр үгээр нуухын тулд үүнийг ашиглахгүй байх ёстой. Энэ практикийг ихэнх хайлтын системээр шийддэг.
USEMAP ба ISMAP . Эдгээр хоёр шинж чанарууд нь клиент талын () болон сериал талын (ISMAP) зургийг таны зурган дээр байршуулдаг.
LONGDESC . Аттрибут нь URL-уудыг дүрсийн урт тайлбарыг дэмждэг. Энэ нь таны зургийг илүү хялбар болгож өгдөг.
Хуучин болон хуучин IMG шинж чанарууд
Зарим шинж чанар HTML5-д эсвэл хуучирсан HTML4-д хуучирсан байна. Хамгийн сайн HTML-ийн хувьд эдгээр шинж чанаруудыг ашиглахын оронд бусад шийдлүүдийг олох хэрэгтэй.
BORDER . Аттрибут нь дүрсний эргэн тойрон дахь аливаа цэгийн өргөнийг цэгээр тодорхойлно. Энэ нь HTML4-д CSS4-д зөвшөөрөгдөөгүй бөгөөд HTML5-д хуучирсан байна.
ALIGN . Энэ шинж чанар нь та текст дотор зураг байрлуулж текстийн урсгалыг байрлуулах боломжийг олгодог. Та зургийг баруун эсвэл зүүн талд байршуулж болно. HTML4 дэх float CSS property-ийн хувьд хуучирсан бөгөөд HTML5-д хуучирсан байна.
HSPACE ба VSPACE . HSPACE болон VSPACE шинж чанарууд нь цагаан орон зайг (HSPACE) болон босоо байдлаар (VSPACE) нэмнэ. Цагаан зай нь график (дээд, доод, зүүн, баруун талд) нэмэгдэх бөгөөд хэрэв танд нэг зай хэрэгтэй бол CSS ашиглах хэрэгтэй. HTML4 дэх эдгээр шинж чанарууд нь HTML4-ийн хувьд хуучирсан бөгөөд CSS5 өмч, тэдгээр нь HTML5-д хэрэггүй болсон.
LOWSRC . LOWSRC шинж чанар нь таны зурагны эх сурвалж маш их хэмжээгээр татаж авснаар өөр дүрсийг өгдөг. Жишээлбэл, та 500kB дүрсийг өөрийн вэб хуудсанд харуулахыг хүсч болох боловч 500KB татаж авахад удаан хугацаа шаардагдана. Тиймээс та хар, цагаан, эсвэл маш оновчтой хувилбарыг дүрслэн LOWSRC-ийн шинж чанарыг өөртөө агуулсан жижиг хэмжээний хуулбарыг үүсгэдэг. Жижиг дүрсийг татаж аваад үзүүлээд дараа нь том зураг гарч ирэх үед энэ нь бага эх сурвалжийг солих болно.
LOWSRC шинж чанарыг Netscape Navigator 2.0-д IMG шошго нэмсэн. Энэ нь DOM 1-р түвшний нэг хэсэг байсан бөгөөд дараа нь DOM түвшнээс 2-р устгагдсан. Хөтөчийн дэмжлэг нь энэ шинж чанарын хувьд скрипт байсан боловч олон сайтууд нь орчин үеийн бүх хөтөчүүдээр дэмжигддэг гэсэн байна. Энэ нь HTML4-ийн хувьд хуучирсан биш бөгөөд HTML5-д хуучирсан хэрэг биш бөгөөд учир нь энэ нь тодорхойлолтын албан ёсны хэсэг байсангүй.
Энэ атрибутыг ашиглахаас зайлсхийх хэрэгтэй бөгөөд ингэснээр тэд хурдан ачаалахын тулд өөрийн зургийг оновчтой болгоно. Хуудас ачаалах хурд нь сайн вэб дизайны маш чухал хэсэг бөгөөд том хэмжээтэй зурагнууд нь маш бага хэмжээтэй байдаг. Хэрэв та LOWSRC шинж чанарыг ашигладаг байсан ч гэсэн.