Выкарыстанне тэга HTML IMG для малюнкаў і аб'ектаў
Тэг HTML IMG рэгулюе ўстаўкі малюнкаў і іншых статычных графічных аб'ектаў у вэб-старонкі. Гэты агульны тэг падтрымлівае некалькі абавязковых і дадатковых атрыбутаў, якія дадаюць багацце да вашай здольнасці праектаваць прывабны, вобраз-арыентаваных вэб-сайт.
Прыклад цалкам сфармаваны HTML IMG тэга выглядае наступным чынам:
Абавязковыя атрыбуты тэга IMG
SRC. Адзіны атрыбут, які неабходна атрымаць малюнак для адлюстравання на вэб-старонцы з'яўляецца атрыбутам SRC. Гэты атрыбут вызначае імя і месцазнаходжанне файла малюнка, якое будзе адлюстроўвацца.
чаргуецца Для таго, каб напісаць правільны XHTML і HTML4, таксама патрабуецца атрыбут ALT. Гэты атрыбут выкарыстоўваюцца для забеспячэння невизуальных браўзэраў з тэкстам, які апісвае малюнак. Браўзэры адлюстроўваць альтэрнатыўны тэкст па-рознаму. Некаторыя адлюстравання яго ў якасці ўсплывае акна, калі вы паставіце курсор на малюнак, іншыя паказваюць яго ўласцівасць пры націску правай кнопкі мышы на малюнку, а некаторыя не адлюстроўваюцца наогул.
Выкарыстоўвайце альтэрнатыўны тэкст , каб даць дадатковую інфармацыю аб малюнку, якія не маюць дачынення або важнае значэнне для тэксту вэб - старонкі. Але памятайце, што ў чытання з экрана і іншыя тэкставыя браўзэры, гэты тэкст будзе прачытаны рядный з астатняй часткай тэксту на старонцы. Каб пазбегнуць блытаніны, выкарыстоўвайце апісальны тэкст альт, які кажа (напрыклад), «Аб вэб-дызайне і HTML» замест проста «лагатып.»
У HTML5, атрыбут ALT не заўсёды патрабуецца, таму што вы можаце выкарыстоўваць подпіс, каб дадаць больш апісання да яго. Акрамя таго, можна выкарыстоўваць атрыбут ARIA-DESCRIBEDBY ўказаць ідэнтыфікатар, які змяшчае поўнае апісанне.
Alt тэкст таксама не патрабуецца, калі малюнак з'яўляецца чыста дэкаратыўным, такімі як графік у верхняй частцы вэб-старонцы або абразкі. Але калі вы не ўпэўненыя, ўключаюць альтэрнатыўны тэкст на ўсялякі выпадак.
Рэкамендаваны атрыбуты IMG
Шырыня і вышыня. Вы павінны ўвайсці ў звычку заўсёды выкарыстоўваць WIDTH і атрыбуты HEIGHT. І вы заўсёды павінны выкарыстоўваць рэальны памер і ня змяняць памеры малюнкаў з дапамогай браўзэра.
Гэтыя атрыбуты паскорыць рэндэрынг старонкі, таму што браўзэр можа вылучыць прастору ў дызайне для малюнка, а затым працягнуць загрузку астатняга змесціва, а не чакаць, пакуль ўсе выявы для загрузкі.
Іншыя карысныя IMG Атрыбуты
TITLE. Атрыбут ўяўляе сабой глабальны атрыбут , які можа быць ужыты да любога элементу HTML . Акрамя таго, атрыбут TITLE дазваляе дадаць дадатковую інфармацыю аб малюнку.
Большасць браўзэраў падтрымліваюць атрыбут TITLE, але яны робяць гэта па-рознаму. Некаторыя адлюстравання тэксту ў выглядзе ўсплываючае вокны ў той час як іншыя паказваюць яго ў інфармацыйных экранах, калі карыстальнік пстрыкае правай кнопкай мышы на малюнку. Вы можаце выкарыстоўваць атрыбут TITLE , каб напісаць дадатковую інфармацыю аб малюнку, але не разлічвайце на гэтай інфармацыі , якая з'яўляецца альбо схаваныя або бачныя. Вы павінны дакладна не выкарыстоўваць гэта, каб схаваць ключавыя словы для пошукавых сістэм. Гэтая практыка ў цяперашні час парушае большасць пошукавых сістэм.
USEMAP і ISMAP. Гэтыя два атрыбуту усталёўваецца на баку кліента () і на баку сервера (ISMAP) карты малюнкаў да вашых малюнках.
LONGDESC. Атрыбут падтрымлівае URL-адрас для больш доўгага апісання малюнка. Гэтая асаблівасць робіць вашыя выявы больш даступнымі.
Састарэлыя і атрыбуты састарэлыя IMG
Некалькі атрыбутаў састарэлі ў HTML5 ці састарэлых у HTML4. Для лепшага HTML, вы павінны знайсці іншыя рашэнні, а не з дапамогай гэтых атрыбутаў.
Межы. Атрыбут вызначае шырыню ў пікселях любой мяжы вакол малюнка. Ён састарэў на карысць CSS у HTML4 і з'яўляецца састарэлым у HTML5.
ALIGN. Гэты атрыбут дазваляе змясціць малюнак ўнутры тэксту і маюць тэкставы паток вакол яго. Вы можаце выраўнаваць выява направа або налева. Ён састарэў на карысць уласнасці паплаўка CSS у HTML4 і з'яўляецца састарэлым у HTML5.
HSPACE і VSPACE. HSPACE і атрыбуты VSPACE дадаць пустое прастору па гарызанталі (HSPACE) і вертыкальна (VSPACE). Пустое прастору будзе дададзена да абодвух бакоў графікі (зверху і знізу або злева і справа), так што калі вам трэба месца толькі на адным баку, вы павінны выкарыстоўваць CSS. Гэтыя атрыбуты былі састарэлымі ў HTML4 на карысць уласнасці Маржа CSS, і яны з'яўляюцца састарэлымі ў HTML5.
LOWSRC. Атрыбут LOWSRC забяспечвае альтэрнатыўны лад, калі ваш крыніца малюнка настолькі вялікі, што ён загружае вельмі павольна. Напрыклад, вы можаце мець малюнак, якое 500KB, што вы хочаце адлюстраваць на вашай вэб-старонцы, але 500KB зойме шмат часу, каб загрузіць. Такім чынам, вы ствараеце значна паменшаную копію малюнка, магчыма, у чорна-белым ці проста надзвычай аптымізаваны, і пакласці, што ў атрыбуце LOWSRC. Чым менш малюнка будзе загружаць і адлюстроўваць першы, а затым, калі павялічаны малюнак з'яўляецца ён заменіць нізкі крыніца адзін.
Атрыбут LOWSRC быў дададзены ў Netscape Navigator 2.0 ў тэгу IMG. Яна была часткай DOM ўзроўню 1, але затым была выдаленая з ўзроўню 2. Падтрымкі браўзэра DOM была павярхоўныя для гэтага атрыбуту, хоць многія сайты сцвярджаюць, што ён падтрымліваецца ўсімі сучаснымі браўзэрамі. Не рэкамендуецца ў HTML4 або састарэлымі ў HTML5, таму што ён ніколі не быў афіцыйнай часткай любой спецыфікацыі.
Пазбягайце выкарыстанне гэтага атрыбуту і замест таго, каб аптымізаваць малюнка такім чынам, каб яны загружаюцца хутка. Хуткасць загрузкі старонкі з'яўляецца важнай часткай добрага вэб-дызайну, і вялікія малюнкі павольныя старонкі ўніз надзвычай нават калі вы выкарыстоўваеце атрыбут LOWSRC.