Без картинок некрасиво - слоган этого поста. Но появляется вопрос, как их вставить в языке HTML? К этому вопросу есть несколько подходов.
Одна из мох недавних фотографий, эгоцентричная тварь
Добавить изображение не так сложно - можно использовать тег <img>, внутри которого должен находится обязательный атрибут src, который хранит в себе местонахождение изображения, и атрибуты height и width, указывающие на его размеры.
Первое фото, которое я нашёл, загуглив Kirils Gončarovs, мне не нужно повторяться
Изначально я прописал:
<img src="https://www.festivalslampa.lv/public/uploads/speakers/large_20170609125358_96a0f-500x500.png?token=d92513ea604d81e1b4673ad5c0bf7a58" width=320 height=320>
Но считыватель HTML в Blogger автоматически изменил мой тег на:
<a href="https://www.festivalslampa.lv/public/uploads/speakers/large_20170609125358_96a0f-500x500.png?token=d92513ea604d81e1b4673ad5c0bf7a58" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://www.festivalslampa.lv/public/uploads/speakers/large_20170609125358_96a0f-500x500.png?token=d92513ea604d81e1b4673ad5c0bf7a58" width="320" /></a>
Но нужно понимать, что оба варианта допустимы!
Кроме обычных изображений, с помощью языка HTML можно сделать карты-изображения (изображения, у которых есть отдельные зоны для перехода на ссылку). После введения тега <img> нужно использовать теги <map>...</map>. Важной деталью является то, что в теге <img> нужно ввести дополнительный атрибут usemap с названием, которое будет обозначать карту-изображение. И это же название нужно добавить в теге <map> атрибутом name. То есть, это будет выглядеть следующим образом:
<img src="ресурс" usemap="название">
<map name="название">
...
</map>
Между тегами <map>...</map> появляется тег <area>, в котором самыми главными атрибутами являются shape, cords и href. Атрибут shape устанавливает форму поля (circle - круг; poly - многоугольник; rect - прямоугольник; default - вся площадь изображения). Атрибут cords устанавливает координаты поля (для круга - центр окружности и радиус, для прямоугольника - верхний левый и правый нижний угол, для многоугольника - все вершины). А атрибут href является ссылкой, нажав на которую произойдёт переход на другую страницу. Проверим всё на практике!
<img src="https://www.festivalslampa.lv/public/uploads/speakers/large_20170609125358_96a0f-500x500.png?token=d92513ea604d81e1b4673ad5c0bf7a58" width=320 height=320>
Но считыватель HTML в Blogger автоматически изменил мой тег на:
<a href="https://www.festivalslampa.lv/public/uploads/speakers/large_20170609125358_96a0f-500x500.png?token=d92513ea604d81e1b4673ad5c0bf7a58" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://www.festivalslampa.lv/public/uploads/speakers/large_20170609125358_96a0f-500x500.png?token=d92513ea604d81e1b4673ad5c0bf7a58" width="320" /></a>
Но нужно понимать, что оба варианта допустимы!
Кроме обычных изображений, с помощью языка HTML можно сделать карты-изображения (изображения, у которых есть отдельные зоны для перехода на ссылку). После введения тега <img> нужно использовать теги <map>...</map>. Важной деталью является то, что в теге <img> нужно ввести дополнительный атрибут usemap с названием, которое будет обозначать карту-изображение. И это же название нужно добавить в теге <map> атрибутом name. То есть, это будет выглядеть следующим образом:
<img src="ресурс" usemap="название">
<map name="название">
...
</map>
Между тегами <map>...</map> появляется тег <area>, в котором самыми главными атрибутами являются shape, cords и href. Атрибут shape устанавливает форму поля (circle - круг; poly - многоугольник; rect - прямоугольник; default - вся площадь изображения). Атрибут cords устанавливает координаты поля (для круга - центр окружности и радиус, для прямоугольника - верхний левый и правый нижний угол, для многоугольника - все вершины). А атрибут href является ссылкой, нажав на которую произойдёт переход на другую страницу. Проверим всё на практике!
<a ... usemap="myfirstattempt" />
<map name="myfisrtattempt">
<area href="https://www.instagram.com/uksindus/" shape="rect" cords="0,212 64,0">
</map>
</a>
(Как оказалось, Blogger (или мой темплейт) не разрешает создание подобных ссылок, но теоретически - это правильно!)
Теперь вы знаете основы
0 коммент.:
Отправить комментарий