Размещение изображения в html, ссылка на изображение
Цель урока: знакомство с возможностями размещения изображений в html
Размещение изображения в HTML
Форматы изображений для размещения на сайте: .gif, .png-8, .png-24, .png-32 и .jpg (в случае необходимости размещения качественного фото)
Пример: разместить на странице:Синтаксис:
<img src=«имя_файла»>
img— строчный элемент с замещаемым контентом
- изображение prob.gif, файл которого располагается в папке со странницей,
- изображение banner.gif, файл которого располагается в папке на уровень выше текущей страницы (необходимо выйти из папки),
- изображение с сайта http://www.rambler.ru/ban.jpg
Выполнение:
<html> ... <body> <p><img src="prob.gif"> <p><img src="../banner.gif"> <p><img src="http://www.rambler.ru/ban.jpg"> </body></html> |
<html> … <body> <p><img src=»prob.gif»> <p><img src=»../banner.gif»> <p><img src=»http://www.rambler.ru/ban.jpg»> </body></html>
Атрибуты тега img
alt — подписьtitle — всплывающая подписьВыравнивание по вертикали:
align="top"align="middle"align="bottom"Выравнивание по горизонтали:
align="left"align="right"width — ширина (значение в пикселях)height — высота (значение в пикселях)border — рамка (значение 0 или 1)
Изображение как ссылка
Фоновое изображение страницы
Синтаксис:
<body background="fon.gif"> |
<body background=»fon.gif»>
Изображение будет растиражировано по всей странице.
Атрибут bgproperties со значением fixed позволит сделать задний фон статичным во время использования прокрутки страницы.
HTML- изображение как ссылка
На веб-страницах изображения можно использовать для создания гиперссылок для этого нужно использовать изображение внутри гиперссылки на месте текста, как показано ниже −
<!DOCTYPE html> <html> <head> <title>Изображение как гиперссылка</title> </head> <body> <p>Кликните по ссылке</p> <a href = «http://www.right-bracket.ru» target = «_blank»> <img src = «/images/logo.png» alt = «Правая Скобка» border = «0»/> </a> </body> </html>
<!DOCTYPE html> <html> <head> <title>Изображение как гиперссылка</title> </head> <body> <p>Кликните по ссылке</p> <a href = «http://www.right-bracket.ru» target = «_blank»> <img src = «/images/logo.png» alt = «Правая Скобка» border = «0»/> </a> </body> </html> |
Результат будет следующий
Изображения чувствительные к мышке
Стандарты HTML и XHTML предоставляют функцию, которая позволяет встраивать множество различных ссылок в одно изображение. Вы можете создавать различные ссылки на одном изображении на основе различных координат, доступных на изображении. После того, как различные ссылки прикреплены к различным координатам, нажимая на различные части изображения можно открыть различные веб-страницы. Чувствительные к мыши изображения еще называется картами изображений.
Существует два способа создания карт −
- Изображения на стороне сервера, карты − это активированный атрибут
- Клиентские карты изображения − они создаются с помощью атрибута usemap тега <img> вместе с соответствующими тегами <map> и <area>.
Карты Изображений на стороне сервера
Изображения надо сделать гиперссылкой и использовать атрибут ismap. Когда пользователь нажимает на какое-то место на изображении, браузер передает координаты указателя мыши вместе с URL-адресом, указанным в <a> теге к веб-серверу. Сервер использует координаты указателя мыши, чтобы определить, какой документ передать обратно в браузер.
Когда используется ismap, атрибут href содержащего тега <a> должен содержать URL-адрес серверного приложения, такого как сценарий cgi или PHP и т. д., для обработки входящего запроса на основе переданных координат.
Координаты положения мыши-это пикселы экрана, отсчитываемые от левого верхнего угла изображения, начиная с (0,0). Координаты, которым предшествует вопросительный знак, добавляются в конец URL.
Который был сгенерирован следующим фрагментом кода −
<!DOCTYPE html> <html> <head> <title>ISMAP гиперлинк</title> </head> <body> <p>Кликните на следующий линк</p> <a href = «/cgi-bin/ismap.cgi» target = «_self»> <img ismap src = «/images/logo.png» alt = «Правая Скобка» border = «0»/> </a> </body> </html>
<!DOCTYPE html> <html> <head> <title>ISMAP гиперлинк</title> </head> <body> <p>Кликните на следующий линк</p> <a href = «/cgi-bin/ismap.cgi» target = «_self»> <img ismap src = «/images/logo.png» alt = «Правая Скобка» border = «0»/> </a> </body> </html> |
Браузер отправит параметры поиска на веб-сервер, которые будут обработаны с помощью скрипта ismap.cgi или специальным файлом так вы можете связать какие угодно документы с точками на изображении.
Карты изображений на стороне клиента
Карты изображений на стороне клиента активируются атрибутом usemap тега <img /> и определяются специальными тегами расширения <map> и <area>.
Изображение, которое будет формировать карту, вставляется на страницу с использованием тега <img /> в качестве обычного изображения, за исключением того, что оно содержит дополнительный атрибут, называемый usemap. Значение атрибута usemap — это значение, которое будет использоваться в теге <map> для связывания тегов карты и изображения. <map> вместе с тегами < area> определяют все координаты изображения и соответствующие ссылки.
Тег <area> внутри тега карты определяет форму и координаты для определения границ каждой точки доступа, доступной на изображении. Пример из карты изображений −
<!DOCTYPE html> <html> <head> <title>USEMAP гиперссылка</title> </head> <body> <p>Нажмите на клавишу</p> <img src = /images/html.gif alt = «HTML карта» border = «0» usemap = «#html»/> <!— Создание карты —> <map name = «html»> <area shape = «Круг» coords = «80,80,20» href = «/css/css.html» alt = «Ссылка на CSS» target = «_self» /> <area shape = «прямоугольник» coords = «5,5,40,40» alt = «Ссылка на jQuery» href = «/jquery/js.html» target = «_self» /> </map> </body> </html>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html> <head> <title>USEMAP гиперссылка</title> </head> <body> <p>Нажмите на клавишу</p> <img src = /images/html.gif alt = «HTML карта» border = «0» usemap = «#html»/> <!— Создание карты —> <map name = «html»> <area shape = «Круг» coords = «80,80,20» href = «/css/css.html» alt = «Ссылка на CSS» target = «_self» /> <area shape = «прямоугольник» coords = «5,5,40,40» alt = «Ссылка на jQuery» href = «/jquery/js.html» target = «_self» /> </map> </body> </html> |
Система координат
Фактическое значение координат полностью зависит от рассматриваемой формы. Краткое описание —
- rect = x1 , y1 , x2 , y2х1 и y1 — координаты верхнего левого угла прямоугольника; х2 и y2— координаты правого нижнего угла.
- circle = xc , yc , radiusxc и yc
- poly = x1 , y1 , x2 , y2 , x3 , y3 , … xn , ynРазличные пары x-y определяют вершины (точки) многоугольника с «линией», проведенной из одной точки в следующую точку. Ромбовидный многоугольник с верхней точкой в 20,20 и шириной 40 пикселей в самых широких точках будет иметь атрибут coords = «20,20,40,40,20,60,0,40».
Все координаты указаны относительно верхнего левого угла изображения (0,0). Каждая фигура имеет связанный URL. Вы можете использовать любое программное обеспечение для изображения, чтобы узнать координаты различных позиций.
Вставка изображений и ссылок. Урок HTML
Содержание:
На предшествующем уроке мы разобрали теги логической разметки: заголовки, абзацы, узнали о создании списков и как их оформлять. Сейчас увидим, как вставить на страницу изображения, задавать стиль элементам при помощи атрибутов. И что более важно, узнаем, как создать сайт — свяжем наши учебные html-страницы ссылками.
Одна страница у нас уже есть, создадим еще одну: index.html — это стандартное название главной страницы сайта. Если вы всерьез собираетесь делать сайт, то полезно набирать код вручную. А для ленивых и практичных: открываем предыдущую учебную html-страницу в Блокноте и задаем имя: index.html (Файл — Сохранить как).
Не забываем про тип файла и кодировку — UTF-8 (см. первый урок о создании html-страницы в Блокноте). Затем открываем файл index.html в Блокноте, редактируем его, чтобы получилось следующее:
Для тех, у кого хромает компьютерная грамотность: двойной клик левой кнопкой мыши по файлу .html откроет его в основном браузере. Чтобы открыть его в другом браузере нужно сделать по нему клик правой кнопкой мыши, выбрать в меню пункт «Открыть с помощью» — и выбрать название браузера. Там же можно выбрать Блокнот или другой редактор — для редактирования файла.
Теперь посмотрим, что у нас получилось, в браузере. Салатовый цвет фона всей страницы задан атрибутом bgcolor тега Body:
Как и у многих тегов, у Body существует несколько атрибутов, задающих тот или иной стиль элементов, расположенных в этом теге. Например, цвет текста можно задать атрибутом text. Т.к. Body — это вся видимая часть страницы, то параметр будет действовать для всего текста страницы.
Чтобы задать цвет отдельных элементов, таких как абзац P или заголовки допускается применять универсальный атрибут style, пример: <h2>…</h2> — белый цвет заголовка. Смотрите о значениях цвета в html. В таблицах Справочника для каждого тега есть колонка «Универсальные атрибуты»: легко понять, применяются они к элементу или нет.
Как вставить изображения
Поместите любые изображения в ту же папку, где находятся две учебные html-страницы. Саму папку можно назвать, ну скажем Site1. Измените названия файлов изображений на img1, img2, img3, как на скриншоте. Либо измените в нашем коде эти названия на названия ваших изображений, а если нужно, то поменяйте и расширения (формат файлов). У меня это картинки 3D человечков, в формате .jpg:
Вы наверно слышали выражение «Корневой каталог сайта» — это директория (папка), где расположены все файлы сайта. В нем могут располагаться другие папки: с изображениями, с файлами скриптов, с отдельными разделами сайта. Чтобы потом не путаться в куче файлов с разными расширениями, уместно создать, например, отдельную папку для изображений. А для больших сайтов — несколько папок изображений для разных его разделов.
Если ваши изображения поместить в отдельную папку, например, с названием «papka», то путь к ней (значение обязательного атрибута scr) будет выглядеть так: <img scr="papka/img1.jpg">. Если ваши изображения не отображаются в браузере, то причин всего две: указан неправильный путь к файлу или опечатка. Вы уже заметили, что элемент Img не имеет закрывающего тега. Разберем другие примененные атрибуты тега Img.
Во втором изображении img2.jpg: атрибут alt — в качестве значения используется текст, который виден, если браузер, по каким-либо причинам, не смог отобразить изображение. Рекомендуется использовать атрибут alt, прописывая в нем ключевые слова. Третье изображение помещено в тег P, а его расположение справа от текста абзаца определено значением «right» атрибута align, служащего для выравнивания картинки.
Стоит, еще отметить, что кроме формата jpg в веб-графике применяются форматы gif и png. Желательно научиться оптимизировать изображения для веб и пользоваться программой Photoshop. Оптимизированные, более «легкие по весу» изображения, меньше тормозят загрузку страниц в браузере.
Кстати, вы видите отступы (разное количество пробелов) в начале каждой строки кода — их делать не обязательно. Это делается для зрительного удобства, чтобы вебмастеру было проще редактировать документ в будущем. Но если не делать много пропусков, не оставлять пустых строк — html-страница будет меньше по размеру.
Ссылки: как связать html-страницы в сайт
Ссылки (гиперссылки) — тег A с атрибутом href, значение которого — путь к файлу (URL), я поместил в элементы списка Li, что мы и наблюдаем в скриншоте (2-ом) страницы из браузера. Здесь три вида ссылок: первая ссылается на сайт, где вы сейчас находитесь. Если нажать на нее при наличии интернет-соединения, то вы попадете на главную страницу моего сайта. Если добавить в URL: «/index.html» — результат будет тот же.
Вторая ссылка, как пример, ведет на несуществующую страницу spravochnik.html, находящуюся в папке «papka» моего сайта. У этих двух ссылок указаны полные пути к документам, на который они ссылаются. У третьей гиперссылки указан относительный путь. Для того чтобы она работала необходимо наличие страницы index.html в одной папке со страницей, где эта ссылка размещена. В данном случае, она ссылается на эту же страницу (на саму себя).
Т.е. ссылки, ведущие на страницы других сайтов, могут быть только с указанием полного URL. А ссылки на внутренние страницы этого же сайта могут иметь, как полный, так и относительный адрес. Об атрибутах: значение атрибута title (не путать с тегом) — текст, который всплывает при наведении курсора на элемент, см. на 2-ом скриншоте. Title — универсальный атрибут, его можно использовать для тех же изображений. Атрибут target со значением «blank» открывает страницу в новой вкладке браузера.
Теперь свяжем наши две учебные странички в единый сайт. Добавим на обе страницы, сразу за тегом Body две такие строчки (здесь 8-ая и 9-ая) — две гиперссылки:
Первая ссылка ведет на сегодняшнюю index-страницу, другая на вторую учебную (у меня это — formatirovanie_teksta.html, у вас может быть любое другое название). По сути, мы создали сайт из двух страниц, а эти ссылки — это меню сайта. Три неразрывных пробела, между ссылками, мною добавлены для создания отступа, чтобы раздвинуть ссылки. Покликайте по ссылкам в браузере:
Теперь вы сами можете создать другие страницы сайта, а его меню расширить: Страница 3, Страница 4, только изменив эти названия ссылок на «человеческие». На этом этапе вам необходимо поэкспериментировать, почаще обращайтесь к Справочнику HTML.
Получившийся у нас сайт (правда, уместнее назвать микросайтик) — локальный, он расположен на компьютере. Чтобы разместить сайт в Сети, необходимо загрузить все его файлы на сервер выбранного вами хостинга. Для этого используется протокол передачи данных FTP, а лучший ftp-клиент — программа FileZilla, тем более что она бесплатная и не очень сложная. В некоторых html-редакторах, существует свой автономный ftp-загрузчик: загрузка сайта на хостинг в Dreamweaver.
В следующем уроке мы рассмотрим создание таблиц. Оставшиеся темы: мультимедиа и формы. Далее, по плану — изучение CSS и блочная верстка.
Содержание:
Как вставить ссылку в картинку в WordPress и с помощью html
Сегодня мы продолжим изучение WordPress и html и узнаем как правильно встроить активную ссылку в любую картинку на Вашем сайте.
Как вставить ссылку в картинку с помощью WordPress
Для того, чтобы привязать ссылку к картинке в WordPress нужно щелкнуть на картинку, которую вы хотите вставить как ссылку и нажать на кнопку с карандашом.
После этого, в меню «Параметры изображения» в выпадающем меню «Ссылка» выбрать пункт «Произвольный URL» и вставить адрес на который вы хотите поставить ссылку.
Как привязать ссылку к картинке с помощью html
Прежде всего, научимся вставлять в текст просто картинку с помощью html. Для вставки картинок используется тег <img>. Рассмотрим пример:
<img src=”http://site2.ru/files/image.jpg“ />
Где:
http://site2.ru/files/image.jpg — это адрес, где находится картинка, которую необходимо вставить.
Каким образом сделать эту картинку ссылкой?
Для этого вспомним, каким образом у нас вставляется ссылка. Для этого используется тег <a>. К примеру, так будет выглядеть код html для вставки ссылки на сайт www.site1.ru с анкором «так будет выглядеть ваша ссылка»:
<a href=”http://www.site1.ru“>так будет выглядеть ваша ссылка</a>
Теперь для того, чтобы превратить нашу ссылку в картинку, нужно все содержимое тега <img> вставить на место анкора в ссылке. В итоге у нас получилось:
<a href=”http://www.site1.ru“><img src=”http://site2.ru/files/image.jpg“ /></a>
Вот и все. В одном из следующих уроков мы научимся настраивать обтекание картинки текстом с помощью html и css. Читайте Лучший СЕО Блог, ставьте лайки, подписывайтесь на RSS и, разумеется, комментируйте.