Паглядзіце на любы вэб-старонкі ў Інтэрнэце сёння, і вы заўважыце, што яны маюць некаторыя агульныя рысы. Адзін з гэтых агульных рыс з'яўляюцца малюнкамі. Правільныя малюнка дадаць столькі прэзентацыі вэб-сайта. Некаторыя з гэтых малюнкаў, як лагатып кампаніі, дапамагчы брэнду сайта і падключыць гэтую лічбавую сутнасць вашай фізічнай кампаніі.
Каб дадаць малюнак, значок або графікі вашай вэб-старонкі, вы павінны выкарыстоўваць тэг на старонцы HTML-код. Вы змесціце тэг IMG ў вашым HTML , дзе менавіта вы хочаце , каб адлюстраваць графічны. Вэб-браўзэр, які робіць код старонкі заменіць гэты тэг з адпаведным графічным калі старонка праглядаецца. Вяртаючыся да нашага прыкладу, лагатып кампаніі, вось як вы маглі б дадаць, што выява на ваш сайт:
атрыбуты выявы
Гледзячы на HTML код вышэй, вы ўбачыце, што элемент ўтрымлівае два атрыбуту. Кожны з іх патрабуецца для малюнка.
Першы атрыбут з'яўляецца «ЦСІ». Гэта цалкам літаральна файл малюнка, які вы хочаце, якое будзе адлюстроўвацца на старонцы. У нашым прыкладзе мы выкарыстоўваем файл з імем «logo.png». Гэта графічная выява, вэб-браўзэр будзе адлюстроўвацца, калі ён аказаў сайт.
Вы таксама заўважыце, што перад гэтым імем файла, мы дадалі некаторую дадатковую інфармацыю, «/ малюнка /». Гэта шлях да файла. Першапачатковы прамой слэш паведамляе сервер, каб паглядзець у корань каталога. Ён будзе шукаць тэчку з імем «адлюстравання" і, нарэшце, файл з імем «logo.png». Выкарыстоўваючы тэчку з імем «выявай», каб захоўваць усю графіку сайта з'яўляецца даволі распаўсюджанай практыкай, але ваш шлях да файла будзе зменены на тое, што мае важнае значэнне для вашага сайта.
Другі абавязковы атрыбут з'яўляецца «альт» тэкст. Гэта «альтэрнатыўны тэкст», які адлюстроўваецца, калі малюнак не загружаецца па нейкай прычыне. Гэты тэкст, які ў нашым прыкладзе абвяшчае: «Лагатып кампаніі» будзе адлюстроўвацца, калі малюнак не загружаецца. Чаму гэта адбылося? Разнастайнасць прычын:
- Некарэктны шлях да файла
- Няправільнае імя файла або памылка друку
- памылка перадачы
- Файл быў выдалены з сэрвэра
Гэта ўсяго толькі некалькі варыянтаў таго, чаму наша азначанае малюнак можа адсутнічаць. У гэтых выпадках, наш альтэрнатыўны тэкст будзе адлюстроўвацца замест.
Alt тэкст таксама выкарыстоўваецца праграмнае забеспячэнне для чытання з экрана, каб "прачытаць" малюнак на наведвальніка, які зрок пагаршаецца. Паколькі яны не могуць бачыць малюнак, як мы робім, гэты тэкст дазваляе ім ведаць, што само малюнак. Таму патрабуецца альтэрнатыўны тэкст, і чаму гэта павінна быць дакладна пазначана, што малюнак!
Агульнае неразуменне альта тэксту з'яўляецца тое, што яна прызначаная для мэт пошуку. Гэта не дакладна. У той час як Google і іншыя пошукавыя сістэмы чытаць гэты тэкст, каб вызначыць, што выява (памятаеце, што яны не могуць «бачыць» малюнак небудзь), вы не павінны пісаць альтэрнатыўны тэкст, каб звярнуцца выключна да пошукавых сістэмах. Аўтар чытальнасць тэксту альта, які прызначаны для людзей. Калі вы можаце таксама дадаць некаторыя ключавыя словы ў тэгу, якія звяртаюцца да пошукавых сістэмах, што гэта добра, але заўсёды пераканайцеся, што альтэрнатыўны тэкст выконвае сваю асноўную мэту, заявіўшы, што малюнак для тых, хто не можа бачыць графічны файл.
іншыя атрыбуты
Тэг IMG таксама мае два іншых атрыбутаў, якія вы можаце ўбачыць у выкарыстанні, калі вы кладзе графікі на вэб-старонцы - шырыню і вышыню. Напрыклад, калі вы выкарыстоўваеце рэдактар WYSIWYG, як Dreamweaver, ён аўтаматычна дадае гэтую інфармацыю для вас. Вось прыклад:
Шырыня і вышыня атрыбуты паведаміць браўзэру памер малюнка. Браўзэр дакладна ведае, колькі месца ў макеце, каб вылучыць, і ён можа перайсці да наступнага элементу на старонцы ў той час загрузкі малюнка. Праблема з выкарыстаннем гэтай інфармацыі ў вашым HTML з'яўляецца тое, што вы не заўсёды хочаце, каб ваша выява, каб убачыць у гэтым дакладны памер. Напрыклад, калі ў вас ёсць адаптыўны вэб - сайт , чые праклейвання змены , заснаванае на экране наведвальнікаў і прылада памеру з, вы таксама хочаце , каб вашыя выявы быць гнуткімі. Калі вы пакажыце ў HTML , што фіксаваны памер, вы знойдзеце яго вельмі цяжка замясціць рэагуюць запыты CSS медыя . Па гэтай прычыне, а таксама падтрымліваць падзел стылю (CSS) і структуры (HTML), рэкамендуецца, каб не дадаць шырыня і вышыня атрыбутаў вашага HTML-кода.
Заўвага: калі вы пакінуць гэтыя інструкцыі праклейвання выключаны і не паказваць памер у CSS, браўзэр будзе паказваць малюнак на значэнні па змаўчанні, родны памер у любым выпадку.
Пад рэдакцыяй Джэрэмі Girard