Дополнительные атрибуты при работе с картинками и ссылками в HTML. Урок 4.

Мы уже рассматривали с вами такие элементы, как картинки и ссылки. В этом уроке я хотел бы вам рассказать о дополнительных атрибутах, которые можно встретить в этих элементах.

Значение атрибута alt при работе с ссылками

С помощью атрибута alt, мы как бы задаём дополнительное описание. Зачем это нужно? Далеко не секрет, что экран компьютера – не единственный способ подачи информации, ведь люди с плохим зрением часто заходят в интернет с помощью экранного диктора, который работает только с текстом. Вот как раз для того, чтобы получить дополнительную информацию о той странице, куда пользователь хочет перейти, экранный диктор читает значение у атрибута alt. В обычном же браузере визуально этот атрибут выступает в роли подсказки элемента, при наведении мышкой на который, появляется подсказка. Значение атрибута alt не должно быть длинным. Достаточно нескольких слов, рассказывающих вкратце, что находится на той странице, куда ведёт данная ссылка.

Ссылки внутри текущей страницы.

С помощью элемента a мы можем ссылаться не только на внешние страницы, - но и на текущую страницу, на которой мы сейчас находимся, в какое-то конкретное место на ней. Где это нам может пригодиться? Возьмём к примеру тот случай, когда у нас на одной страничке находится одна большая книга. Само собой, в ней есть много глав и разумеется, для удобной навигации по ней, нам нужно содержание в виде ссылок, каждая из которых будет ссылаться на ту или иную главу. Как нам это сделать?

В первую очередь, нам будет необходимо сделать каждую главу книги ссылкой. Вот таким способом:

<a id="glava_5">Глава 5</a>             

 Атрибут id здесь играет роль уникального идентификатора, в данном случае он как бы связывает название главы с идентификатором; что логично, ведь не может быть в одной книги двух глав, с совершенно одинаковым названием. Обратите внимание, что мы не указываем атрибут href. Потому что мы создаём не ссылку, а метку, на которую потом уже будем ссылаться.

Итак, метку (ещё их называют иногда якорями) для данной главы мы создали. А теперь нам нужно придумать, как мы можем сослаться на ту или иную главу.

Допустим, у нас есть содержание, в котором перечисляются главы нашей книги. И мы хотим сделать внутреннюю ссылку на главу 5. Это делается так:

<a href="/index.html#glava_5">Глава 5</a> 

 Здесь index.html – текущая страница, на которой мы в данный момент находимся. А glava_5 – это имя нашей метки. Точно так же мы можем сослаться на любую другую страницу на нашем сайте и перейти на нужную нам метку. К примеру:

<a href="/about.html#glava_5">Содержимое главы 5</a> 

Для закрепления материала, вот вам домашнее задание. Создайте в своём HTML-документе очень длинную статью, сформировать которую вы можете искусственным путём, с помощью Ctrl + C и Ctrl + V. Нужно сделать так, чтобы у читателя была возможность, дочитав до конца, быстро перейти в начало. То есть должна быть такая ссылка, которая называлась Вернуться назад, при щелчке на которую мы бы сразу переходили в начало статьи. Подумайте, как это лучше сделать с помощью внутренних ссылок. Если возникнут сложности, пишите мне на почту, я вам помогу. Но сначала, попробуйте всё же разобраться сами, оно так лучше усваивается.

Относительные и абсолютные пути.

Это ещё одна тема, которую было бы неплохо затронуть. Давайте разберёмся, что к чему.

Абсолютный путь – это полный путь к странице, включая название сайта. К примеру, http://наш-с айт.ru/about/index.html.

Относительный путь – это путь относительно того файла, в котором мы сейчас находимся. Мы уже сталкивались на самом деле с таким понятием во втором уроке, когда нам нужно было перейти со странички concert.html на страницу index.html. Путь к странице index.html мы прописывали тогда относительный:

<a href="/../index.html">Вернуться назад</a>

Но тогда возникает вполне справедливый вопрос. Что в итоге разумнее использовать – относительные или абсолютные пути? Вполне логично, что мы не должны привязываться к домену сайта (то есть к абсолютным ссылкам), если сейчас сайт разрабатывается на тестовом домене. Поскольку, при переносе сайта, такие ссылки моментально окажутся неработающими. Второй очевидный недостаток таких ссылок в том, что они оказываются громоздкими. Плюс если мы в дальнейшем будем менять структуру сайта, то так же можем столкнуться с проблемой неработающих ссылок, - пути к файлам собьются. В то время как относительные ссылки, недостатков указанных выше, - лишены.

Как открыть ссылку в новом окне?

Допустим, на нашем сайте есть внешняя ссылка. Но если мы попробуем по ней перейти, то увидим, что сайт, на который мы ссылались, открывается в том же окне. Это не очень хорошо. Во-первых, если пользователь перейдёт на такой сайт, и та информация, которую он там прочитает, покажется ему недостаточно интересной, он может под действием впечатления закрыть вкладку, а адрес нашего сайта так и не вспомнить. Пусть он даже знает о такой штуке, как история посещений, но ему будет просто лень воспользоваться такой возможностью.

Вот как раз для таких случаев, и был придуман такой полезный атрибут, как target. И если в качестве его значения указать _blank, то сайт, на который мы ссылаемся будет открываться в новом окне. Прописывается это следующим образом:

<a href="http://имя-сайта.ru" target="_blank">Щёлкните здесь</a>

Вот и ещё один полезный атрибут, с которым мы с вами только что познакомились. Стоит сказать что атрибуты в самом элементе можно располагать в произвольном порядке.

Значение атрибута alt при работе с изображениями.

В предыдущем уроке мы уже вкратце рассматривали с вами такой элемент, как img, с помощью которого можно вставлять картинки. Здесь же мы укрепим полученные знания и изучим парочку свойств и атрибутов этого элемента.

Элемент img – строчный, его можно рассматривать как одну большую букву. Т. е. он не будет переноситься на другую строку. Вместо этого, текст, находящийся с ним рядом, будет его обрамлять.

Если говорить об атрибутах и о доступности изображений для экранных дикторов (устройств, читающих текст в браузере), то обычно в тэге alt помещается краткое описание изображения. Задавать дополнительное описание для изображений полезно ещё и потому, что у пользователя могут не отображаться картинки в силу ряда особенностей браузеров (текстовые браузеры), либо пользователь просматривает сайт на каком-то мобильном устройстве и решил отключить просмотр изображений в целях экономии трафика. В таком случае вместо изображений на экране пользователя будет показываться текст, заданный в атрибуте alt. Ещё одна причина, по которой было бы так же неплохо прописывать такой тэг к картинкам, заключается в том, что информация, заданная в атрибуте alt несёт полезную нагрузку для поисковиков. Все знают о таком сервисе в поисковых машинах, как поиск картинок. Как по вашему, браузер идентифицирует то, что изображено на той или иной картине? Конечно же, по атрибуту alt. Поэтому пренебрегать им явно не стоит.

Атрибуты width и height у изображений

Следующие атрибуты, которые есть у изображения - это width и height, которые задают ширину и высоту изображения соответственно. Дело в том, что браузер изначально показывает изображения в оригинале, как есть. И вроде бы, всё просто, вставляй ссылки на изображения и не знай себе беды, но загвоздка заключается в том, что если изображение достаточно большое, то оно может не поместиться в окно браузера и пользователю придётся использовать полосы прокрутки, что не есть удобно. Вот тут - то нам и пригодятся атрибуты width и height. И если отталкиваться в данном случае от того, что большинство пользователей работают на экранах с разрешением 1024 x 768, то было бы разумнее прописать ширину не более 800 пикселей. Есть два способа поменять разрешение картинки – задать ей ширину в каком-то графическом редакторе (например, Adobe Photoshop), либо сделать значение атрибута width равным 800 пикселей или любым другим. Единственное что не стоит делать, так это задавать ширину и высоту картинки больше чем они у неё есть в оригинале, иначе картинка будет искусственным образом заполнять пустые пиксели, и результат сего действа будет выглядеть плачевным.

Также стоит поговорить о том, что пропорции должны быть соблюдены. Указывая ширину, высоту при этом можно будет не прописывать, так как в этом случае, браузер подгонит её автоматом под нужные пропорции. Точно так же, как если бы мы указали только одну высоту, ширину браузер выставил бы сам. Если же не соблюсти пропорции, то такая картинка будет выглядеть неестественно ужатой и растянутой. В общем, масштабировать с помощью браузера можно, но стоит иметь ввиду, что вес её при этом никак не будет меняться. Это означает, что если картинка большая по весу, то пользователю всё равно придётся ждать по времени ровно столько же, как если бы браузер картинку не масштабировал.

Картинку можно также сделать ссылкой. К примеру, на какой-то из своих основных страниц мы хотим отображать маленькую картину (будь то масштабированную средствами браузера, либо оригинал, измененный в графическом редакторе), чтобы при щелчке на ней, открывалась картинка в оригинальном размере.

Тогда нет ничего проще, для этого элемент img нужно обрамить тэгами <a></a>. Выглядеть это будет вот так:

<a href="/original.jpg"><img src="/thumb.jpg" /></a>

thumb.jpg – это наша миниатюра, которую мы отображаем на нашей странице в данный момент,

original.jpg – полная версия изображения.

Элементы a и img – строчные. Так что нет ничего страшного в том, что элемент a мы поместили img. Вот если бы мы хотели поместить в элемент a абзац, то это было бы грубым нарушением правил.

На этом всё. Пробуйте, экспериментируйте…Если что-то не получается, пишите мне. Раз есть такая возможность, то почему бы ей не воспользоваться.