Корректный пример вставки изображения в html документ. Вставляем графический файл на web-страницу

30.04.2024 -

Здравствуйте, уважаемые читатели блога сайт. В очередной статье из этой рубрики мы продолжим рассматривать тэги. Раннее мы узнали ), поговорили об оформлении комментариев и ), а так же затронули тему символов пробела в Html коде и . Да, еще мы обсудили возможности .

Сегодня я хочу подробнее остановиться на тех элементах языка гипертекстовой разметки, с которыми вы будете чаще всего сталкиваться в работе над своим веб-проектом. Я говорю про вставку изображений и гиперссылок в код вебстраниц. Без знания этого очень трудно будет продуктивно работать над дизайном сайта. Эти теги активно используются как при написании и оформлении статей, так и в оформлении шаблона, натянутого на каркас движка.

Как вставить картинку — html теги Img

Допустим, что вы используете для написания статей визуальный редактор позволяющий не задумываться, каким именно образом прописываются теги картинок и гиперссылок в коде. Но дело в том, что ни один редактор не является идеальным, и зачастую для исправления очередного бага в оформлении текста статьи просто необходимо будет перейти в режим html редактора и внести изменения непосредственно в сами тэги рисунков и ссылок.

Если вы будете знать, как вставлять в HTML документ картинки и ссылки, то это может сильно упростить вам жизнь и сэкономить время. Тем более, что изучить десяток самых распространенных элементов не составит труда. Реально тэгов осталось не так уж и много, ну и, конечно же, сегодняшние герои являются одними из самых распространенных и часто используемых.

С другой стороны, в оформлении используемого вами шаблона также активно применяются те же самые элементы — вставки ссылок, картинок, контейнеры, списки ( про них говорится), различные и .

И, следовательно, для того, чтобы понимать структуру шаблона ( про шаблоны Joomla рассказывается, а про темы WordPress) и при необходимости вносить в него изменения, опять же необходимо знание хотя бы небольшого количества элементов кода. Поверьте, потраченное на это время с лихвой окупится в дальнейшем. Ну, будем считать, что я вас убедил в необходимости знакомства с языком разметки и пора переходить непосредственно к героям нашей сегодняшней публикации.

Для вставки картинок на страницу служит html тег Img. Представленная ниже картинка вставлена с помощью него:

Атрибут Src позволяет указать имя и место хранения файла изображения (другими словами — путь до него). При этом может быть указана на файл с картинкой. Пути задаются с помощью символа "/", который служит разделителем между названиями вложенных каталогов, в которых хранятся файлы рисунков.

Абсолютный путь в Src будет начинаться с http://vash_sait.ru (для моего блога — ). Дальше, используя "/" для разделения имен вложенных папок, прописывается полный путь до файла картинки, заканчиваясь в конце именем и расширением самого файла. Например,

Относительный путь в Src задается с помощью определения относительного пути от исходной папки, в которой лежит файл самого HTML документа и из которой вы пытаетесь открыть изображение, до графического файла. Если этот файл находится на сервере в той же папке, что и документ из которого к нему обращаются, то путь к нему указывать не нужно - требуется указать только имя графического файла (сохраняя регистр букв).

Если этот файлик находится на том же сервере, но в другом каталоге, требуется указать путь к нему от каталога, где находится документ, из которого к нему обращаются (в примере, показанном выше, используется как раз относительный путь — image/finik.jpg).

Задаем ширину и высоту изображения с помощью атрибутов Width и Height

Html атрибуты Width и Height позволяют задать размер области (ширину и высоту, соответственно), которая будет отводиться на странице под данное изображение. Они вставляются внутри тега Img, например, так:

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

Лучше предварительно изменить размер картинки в графическом редакторе (можно даже и в ), а уже затем вставлять ее в документ. Также при сохранении графического файла следует обращать внимание на его итоговый вес. Он не должен быть слишком большой. Иногда лучше немного пожертвовать качеством изображения (благо, что при небольших размерах это будет практически не заметно) для уменьшения итогового веса.

Используйте при сохранении рисунков компактные типа GIF (для вставки схематических картинок) или JPG (для вставки фотографий). Width и Height, в отличии от атрибута Srс (единственного обязательного в тэге Img), являются необязательными. Многие их просто не указывают, но они, тем не менее, позволяют незначительно ускорить загрузку документа .

Дело в том, что если браузер не находит Width и Height внутри html тега Img, то ему потребуется время на то, чтобы узнать размер картинки, загрузить его и только после этого продолжить загружать остальное содержимое документа. В случае же когда вы прописали Height и Width, обозреватель автоматически резервирует место под изображение указанных в этих атрибутах размеров и продолжает загружать веб-страницу дальше.

Если графические файлы, выводимые на данную страницу очень тяжелые и их очень много, то вставка Height и Width позволит пользователям приступить к чтению текста сайта, в то время как графика еще будет загружаться.

Также, если вы не укажете Width и Height внутри Img, то может возникнуть ситуация, когда при маленькой картинке и очень длинном альтернативном тексте (задается атрибутом Alt в теге Img, об этом речь пойдет ниже), до того как загрузится графика, временно произойдет сдвиг дизайна сайта, т.к. длинный альтернативный текст будет занимать столько места, сколько ему понадобится.

В случае же использования Width и Height место для выведения альтернативного текста будет ограничено размерами, заданными в них размера. По большей части, именно из-за этого я стараюсь прописывать эти атрибуты в теге Img.

Alt и Title в html теге Img

Очень полезными, с точки зрения внутренней поисковой оптимизации сайта, являются атрибуты Alt и Title. Читайте и раскрутку сайта самостоятельно или в публикации « » .

Первый из них задает, так называемый, альтернативный текст для изображения. Этот текст вы сможете увидеть, если отключите показ графики в вашем браузере. Alt и предназначен для этого – рассказать поисковым системам о том, что за рисунок здесь должен был бы быть. Title же предназначен для информирования пользователя о содержании картинки.

Содержимое Title из состава тэга Img показывается во всплывающей строке, если пользователь подведет мышь к рисунку. Оба этих атрибута (если вы их прописали) позволяют включить изображения вашего веб-проекта в . Поэтому не стоит пренебрегать этой возможностью и в обязательном порядке прописывать хотя бы Alt. Оформление ваших изображений должно быть примерно таким:

На самом деле атрибутов, которые могут быть , достаточно много и вы можете посмотреть их все хотя бы по приведенной ссылке. Но использовать на практике вы будете скорей всего лишь перечисленные мной в этой статье.

Еще раз напоминаю о правилах написания тегов. После открывающейся треугольной скобки, обязательно без пробела, пишется его название, затем, через пробел, пишет название атрибута, допустимого для него. После названия атрибута, без пробела, ставится знак равно и в кавычках пишется его параметр (например, ширина в пикселях для Width).

Следующий атрибут внутри html тэга отделяется от предыдущего пробелом. В конце ставится закрывающая треугольная скобка. Обращаю ваше внимание, что Img не является парным, т.е. у него нет закрывающего тега.

В идеале, примерно так и должны быть оформлены все картинки используемые на вашем веб-проекте. Такого вида можно добиться и не правя для каждого изображения html код вручную. Визуальные редакторы различных CMS (Joomla, WordPress и др.) позволяют задать все это богатство в удобном для пользователя графическом интерфейсе, но после пробной настройки обязательно проверьте код (в любом визуальном редакторе можно переключиться на показ html кода статьи).

Создаем гиперссылки с помощью html тега ссылки «A»

Ссылка — один из основных элементов организации документа в Html. Без них вебстраница была бы просто страницей. Они создаются при помощи тега «А». Обязательным атрибутом является только Href. Он задает URL (путь), куда должен перейти пользователь щелкнув по данной гиперссылке.

Ссылка может вести как на внутреннюю страницу вашего же ресурса (очень важный момент внутренней оптимизации связан именно с ), так и на страницу другого проекта. Html тег A является парным и, соответственно, имеет закрывающий элемент. Текст гиперссылки (анкор — про него подробно написано в плане способствования SEO продвижению) размещается между открывающим и закрывающим тегами «A».

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

Открывание в новом окне и ссылка с картинки (изображения)

Ну, ладно, это мы опять отвлеклись на поисковую оптимизацию. Вернемся снова к тэгам. Для html тега «A» имеется один очень нужный атрибут, который позволит открывать страницу, на которую ведет данная ссылка в новом окне . Это может понадобиться, если вы с одной своей страницы ссылаетесь на множество внешних документов. В этом случае посетителю было бы удобнее, чтобы ваша страница оставалась всегда открытой.

Target для этой цели имеет параметр, позволяющий открывать страницу в новом окне, который называется _BLANK . Если Target не задан в теге A, то ссылка будет открываться в этом же окне. Пример использования атрибута Target:

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

Обратите внимание, что порядок следования атрибутов внутри тегов никак не регламентирован. С таким же успехом можно написать:

Есть мнение, что поисковики выше ценят ссылки с картинки, а по некоторым данным выходит обратное. Но при использовании такого типа линков нет анкора, в который можно было бы вставить нужные ключевые слова. В этом случае можно использовать атрибут Title для тега A.

Ru/image/finik.jpg" Width="200" Height="150">

Title можно использовать и в случае обычного текстового анкора. В этом случае информация прописанная в нем будет видна, если подвести курсор мыши к гиперссылке. Собственно, этот атрибут можно использовать практически во всех тегах языка Html, но особого толку от этого не будет.

Здесь нужно прописать ключевые слова, по которым вы хотите продвинуть статью, на которую ведет эта гиперссылка

Создание якорей и хеш-ссылок

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

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

Для реализации описанного способа создания гиперссылок в Html документе раньше нужно было предварительно вставить якорь в ту статью, на которую будет вести хеш-ссылка. Якорь представлял из себя конструкцию напоминающую обычную ссылку, но при этом он оставался невидимым для посетителя. Выглядел он так:

Т.е. получается, что якорь состоял только из открывающего и закрывающего тега «А», при этом он не содержал анкора и имел один единственный обязательный атрибут NAME. Параметром этого атрибута служила метка, название которой вы должны были задать сами. Эта метка в дальнейшем использовалась при создании хеш-ссылки.

Сейчас такой способ вставки якорей считается устаревшим и валидатором Html кода будет расцениваться, как грубая ошибка . Обратите, пожалуйста, на это внимание. Теперь якоря расставляются с помощью добавления в ближайший тег.

Допустим, что для заголовка в статье это могло бы выглядеть так:

Заголовок

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

Гиперссылка создается стандартным образом, за исключением того, что в конце Урла, который прописывается в Href, ставится знак решетки (знак диеза или хеш-символ), а после него идет имя метки того якоря, который стоит в требуемом месте текста статьи.

Анкор

Если якорь находится в том же Html документе, что и хеш-ссылка, то можно указать только якорь.

Анкор

Удачи вам! До скорых встреч на страницах блога сайт

Вам может быть интересно

Списки в Html коде - теги UL, OL, LI и DL
Как задаются цвета в Html и CSS коде, подбор RGB оттенков в таблицах, выдаче Яндекса и других программах
Html формы для сайта - теги Form, Input и Select, Option, Textarea, Label и другие для создания элементов вебформ
Img - Html тег для вставки картинки (Src), выравнивания и обтекание ее текстом (align), а так же задания фона (background)
Как создать гиперссылку (А, Href, Target blank), как открывать ее в новом окне на сайте, а так же сделать картинку ссылкой в Html коде
Iframe и Frame - что это такое и как лучше использовать фреймы в Html
MailTo - что это и как в Html создать ссылку для отправки Емейла Select, Option, Textarea, Label, Fieldset, Legend - теги Html формы выпадающих списков и текстового поля
Embed и object - Html теги для отображения медиа контента (видео, флеш, аудио) на веб страницах
Директивы комментариев и Doctype в Html коде, а так же понятие блочных и строчных элементов (тэгов)

HTML-изображения добавляются на веб-страницы с помощью тега . Использование графики делает веб-страницы визуально привлекательнее. Изображения помогают лучше передать суть и содержание веб-документа.

С помощью HTML-тегов и можно создавать карты-изображения с активными областями.

Вставка изображений в HTML-документ

1. Тег

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

Или

Тег имеет обязательный атрибут src , значением которого является абсолютный или относительный путь к изображению:

Для тега доступны следующие атрибуты:

Таблица 1. Атрибуты тега

Атрибут	Описание, принимаемое значение
alt	Атрибут alt добавляет альтернативный текст для изображения. Выводится на месте появления изображения до его загрузки или при отключенной графике, а также выводится всплывающей подсказкой при наведении курсора мыши на изображение. Синтаксис: alt="описание изображения" .
crossorigin	Атрибут crossorigin позволяет загружать изображения с ресурсов другого домена с помощью CORS-запросов. Изображения, загруженные в холст с помощью CORS-запросов, могут быть использованы повторно. Допускаемые значения: anonymous — Cross-origin запрос выполняется с помощью HTTP-заголовка, при этом учетные данные не передаются. Если сервер не даёт учетные данные серверу, с которого запрашивается контент, то изображение будет испорчено и его использование будет ограничено. use-credentials — Cross-origin запрос выполняется с передачей учетных данных. Синтаксис: crossorigin="anonymous" .
height	Атрибут height задает высоту изображения. Может указываться в px или % . Синтаксис: height: 300px .
ismap	Атрибут ismap указывает на то, что картинка является частью изображения-карты, расположенного на сервере (изображение-карта — изображение с интерактивными областями). При нажатии на изображение-карту координаты передаются на сервер в виде строки запроса URL-адреса. Атрибут ismap допускается только в случае, если элемент является потомком элемента с действительным атрибутом href . Синтаксис: ismap .
longdesc	URL расширенного описания изображения, дополняющее атрибут alt . Синтаксис: longdesc="http://www.example.com/description.txt" .
src	Атрибут src задает путь к изображению. Синтаксис: src="flower.jpg" .
sizes	Задаёт размер изображения в зависимости от параметров отображения. Работает только при заданном атрибуте srcset . Значением атрибута является одна или несколько строк, указанных через запятую.
srcset	Создаёт список источников для изображения, которые будут выбраны, исходя из разрешения экрана. Может использоваться вместе или вместо атрибута src . Значением атрибута является одна или несколько строк, разделенных запятой.
usemap	Атрибут usemap определяет изображение в качестве карты-изображения. Значение обязательно должно начинаться с символа # . Значение ассоциируется со значением атрибута name или id тега и создает связь между элементами и . Атрибут нельзя использовать, если элемент является потомком элемента или
width	Атрибут width задает ширину изображения. Может указываться в px или % . Синтаксис: width: 100% .

1.1. Адрес изображения

Адрес изображения может быть указан полностью (абсолютный URL), например:
url(http://anysite.ru/images/anyphoto.png)

Или же через относительный путь от документа или корневого каталога сайта:
url(../images/anyphoto.png) — относительный путь от документа,
url(/images/anyphoto.png) — относительный путь от корневого каталога.

Это интерпретируется следующим образом:
../ — означает подняться вверх на один уровень, к корневому каталогу,
images/ — перейти к папке с изображениями,
anyphoto.png — указывает на файл изображения.

1.2. Размеры изображения

Без задания размеров изображения рисунок отображается на странице в реальном размере. Отредактировать размеры изображения можно с помощью атрибутов width и height . Если будет задан только один из атрибутов, то второй будет вычисляться автоматически для сохранения пропорций рисунка.

1.3. Форматы графических файлов

Формат JPEG (Joint Photographic Experts Group) . Изображения JPEG идеальны для фотографий, они могут содержать миллионы различных цветов. Сжимают изображения лучше GIF, но текст и большие площади со сплошным цветом могут покрыться пятнами.

Формат GIF (Graphics Interchange Format) . Идеален для сжатия изображений, в которых есть области со сплошным цветом, например, логотипов. GIF-файлы позволяют установить один из цветов прозрачным, благодаря чему фон веб-страницы может проявляться через часть изображения. Также GIF-файлы могут включать в себя простую анимацию. GIF-изображения содержат всего лишь 256 оттенков, из-за чего изображения выглядят пятнистыми и нереалистичного цвета, как плакаты.

Формат PNG (Portable Network Graphics) . Включает в себя лучшие черты GIF- и JPEG-форматов. Содержит 256 цветов и дает возможность сделать один из цветов прозрачным, при этом сжимает изображения в меньший размер, чем GIF-файл.

Формат APNG (Animated Portable Network Graphics) . Формат изображения, основанный на формате PNG. Позволяет хранить анимацию, а также поддерживает прозрачность.

Формат SVG (Scalable Vector Graphics) . SVG-рисунок состоит из набора геометрических фигур, описанных в формате XML: линия, эллипс, многоугольник и т.п. Поддерживается как статичная, так и анимированная графика. Набор функций включает в себя различные преобразования, альфа-маски, эффекты фильтров, возможность использования шаблонов. Изображения в формате SVG могут изменяться в размере без снижения качества.

Формат BMP (Bitmap Picture) . Представляет собой несжатое (оригинальное) растровое изображение, шаблоном которого является прямоугольная сетка пикселей. Bitmap-файл состоит из заголовка, палитры и графических данных. В заголовке хранится информация о графическом изображении и файле (глубина пикселей, высота, ширина и количество цветов). Палитра указывается только в тех Bitmap-файлах, которые содержат палитровые изображения (8 и менее бит) и состоят не более чем из 256 элементов. Графические данные представляют саму картинку. Глубина цвета в данном формате может быть 1, 2, 4, 8, 16, 24, 32, 48 бит на пиксель.

Формат ICO (Windows icon) . Формат хранения значков файлов в Microsoft Windows. Также, Windows icon, используется как иконка на сайтах в интернете. Именно картинка такого формата отображается рядом с адресом сайта или закладкой в браузере. Один ICO-файл содержит один или несколько значков, размер и цветность каждого из которых задаётся отдельно. Размер значка может быть любым, но наиболее употребимы квадратные значки со сторонами 16, 32 и 48 пикселей.

2. Тег

Тег служит для представления графического изображения в виде карты с активными областями. Активные области определяются по изменению вида курсора мыши при наведении. Щелкая мышью на активных областях, пользователь может переходить к связанным документам.

Для тега доступен атрибут name , который задает имя карты. Значение атрибут name для тега должно соответствовать имени в атрибуте usemap элемента :

...

Элемент содержит ряд элементов , определяющих интерактивные области в изображении карты.

3. Тег

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

Таблица 2. Атрибуты тега

Атрибут	Краткое описание
alt	Задает альтернативный текст для активной области карты.
coords	Определяет позицию области на экране. Координаты задаются в единицах длины и разделяются запятыми: для круга — координаты центра и радиус круга; для прямоугольника — координаты верхнего левого и правого нижнего углов; для многоугольника — координаты вершин многоугольника в нужном порядке, также рекомендуется указывать последние координаты, равные первым, для логического завершения фигуры.
download	Дополняет атрибут href и сообщает браузеру, что ресурс должен быть загружен в момент, когда пользователь щелкает по ссылке, вместо того, чтобы, например, предварительно открыть его (как PDF-файл). Задавая имя для атрибута, мы таким образом задаем имя загружаемому объекту. Разрешается использовать атрибут без указания его значения.
href	Указывает URL-адрес для ссылки. Может быть указан абсолютный или относительный адрес ссылки.
hreflang	Определяет язык связанного веб-документа. Используется только вместе с атрибутом href . Принимаемые значения — аббревиатура, состоящая из пары букв, обозначающих код языка.
media	Определяет, для каких типов устройств файл будет оптимизирован. Значением может быть любой медиа-запрос.
rel	Дополняет атрибут href информацией об отношении между текущим и связанным документом. Принимаемые значения: alternate — ссылка на альтернативную версию документа (например, печатную форму страницы, перевод или зеркало). author — ссылка на автора документа. bookmark — постоянный URL-адрес, используемый для закладок. help — ссылка на справку. license — ссылка на информацию об авторских правах на данный веб-документ. next/prev — указывает связь между отдельными URL. Благодаря этой разметке Google может определить, что содержание данных страниц связано в логической последовательности. nofollow — запрещает поисковой системе переходить по ссылкам на данной странице или по конкретной ссылке. noreferrer — указывает, что переходе по ссылке браузер не должен посылать заголовок HTTP-запроса (Referrer), в который записывается информация о том, с какой страницы пришел посетитель сайта. prefetch — указывает, что целевой документ должен быть кэширован, т.е. браузер в фоновом режиме загружает содержимое страницы к себе в кэш. search — указывает, что целевой документ содержит инструмент для поиска. tag — указывает ключевое слово для текущего документа.
shape	Задает форму активной области на карте и ее координаты. Может принимать следующие значения: rect — активная область прямоугольной формы; circle — активная область в форме круга; poly — активная область в форме многоугольника; default — активная область занимает всю площадь изображения.
target	Указывает, куда будет загружен документ при переходе по ссылке. Принимает следующие значения: _self — страница загружается в текущее окно; _blank — страница открывается в новом окне браузера; _parent — страница загружается во фрейм-родитель; _top — страница загружается в полное окно браузера.
type	Указывает MIME-тип файлов ссылки, т.е. расширение файла.

4. Пример создания карты-изображения

1) Размечаем исходное изображение на активные области нужной формы. Координаты областей можно вычислить с помощью программы для обработки фотографий, например, Adobe Photoshop или Paint .

Рис. 1. Пример разметки изображения для создания карты

2) Задаем имя карты, добавив его в тег с помощью атрибута name . Это же значение присваиваем атрибуту usemap тега .

Jpg" alt="flowers_foto" width="680" height="383" usemap="#flowers">
Рис. 2. Пример создания карты-изображения, при нажатии курсора мыши на цветок осуществляется переход на страницу с описанием

1. В папке HTML создайте папку Lesson3 , в ней мы будем сохранять все полученные в ходе нашего занятия web-страницы.

2. К графическим объектам, которые можно включать в состав Web -страниц, относят различного рода рисунки, фотографии и видеоклипы. Часто используют звуковое сопровождение отображения Web -страниц. Мы будем рассматривать только вставку изображений. Браузеры в состоянии отображать только три вида графических файлов: файлы форматов GIF , JPEG и PNG . Файлы формата GIF позволяют создавать анимированные изображения. JPEG - файлы обычно применяются для сохранения фотографических изображений. Недавно появившийся формат PNG обеспечивает хорошее качество изображения и маленький объем графического файла.

Для вставки изображения в состав Web -страницы применяется тэг со множеством атрибутов. Этот тэг не имеет закрывающего двойника. Основным и обязательным атрибутом тэга является атрибут SRC . В качестве значения этого атрибута используется адрес вставляемого графического файла, или, если быть точным, его URL .

Тэг может также включать атрибут ALT= «[текст]» . Встретив такой тэг, браузер покажет на экране текст «Картинка» и начнет загружать на его место картинку из файла picture.gif . Атрибут ALT может оказаться необходимым для старых браузеров, которые не поддерживают изображений, а также на случай, если у браузера отключена автоматическая загрузка изображений. В том случае, если графическое изображение все-таки показывается браузером, текст альтернативного текстового представления отображается в виде хинта, короткой текстовой подсказки, когда пользователь наводит курсор мыши на это графическое изображение.

3. В папку Lesson3 скопируйте файл picture.gif (\\tserver\students\ВКТ\ИС\Технология работы с ПО\Файлы для работ ).

4. Создайте в Блокноте новый файл и наберите в нем текст HTML -документа. Сохраните этот файл под именем page1.htm в папке Lesson3 и посмотрите его в окне браузера.

5. По умолчанию графическое изображение показывается именно в том виде, в каком оно было создано, с сохранением размеров по вертикали и горизонтали. Однако мы имеем возможность явно задавать размеры рисунка по своему усмотрению. Для этого используются атрибуты HEIGHT и WIDTH . Их значения задаются в пикселях или процентах от размеров окна браузера.

Необходимо отметить, что браузеры стремятся сохранять пропорции рисунка, поэтому явное задание размеров, меняющее пропорции, может быть проигнорировано браузером, и он выберет такие размеры, которые были бы максимально близки к указанным пользователем, но не нарушали пропорций изображения. Обычно для Web -страниц готовят рисунки тех размеров, которые будут применяться при их отображении в составе Web -страниц. Если одно изображение должно выводиться несколько раз с различными размерами, то проще приготовить несколько графических файлов, чем отдавать свои рисунки для бесконтрольного отображения браузеру, который сможет нарушить всю верстку Web-страниц. Измените размеры вставленного в HTML -документ page1.htm изображения. Сохраните файл под тем же именем и просмотрите его в браузере.

6. Существуют атрибуты HSPACE и VSPACE , позволяющие указывать величину чистого пространства, которое будет отделять графическое изображение от окружающих его других элементов оформления Web -страницы, другими словами, задавать отступ рисунка. Атрибут HSPACE устанавливает отступ по горизонтали в пикселях, а атрибут VSPACE - по вертикали. Обратите внимание, эти атрибуты могут задаваться только числовыми значениями, указывающими расстояния в пикселях. Нулевого значения для этих атрибутов не предусмотрено, но обычно каждый браузер использует малое ненулевое значение. Измените HTML -документ page1.htm добавив следующий фрагмент кода:

7. Сохраните файл под тем же именем и посмотрите его в браузере. Измените размеры окна браузера, сделайте его узким, шириной в половину от экрана монитора. Как мы можем видеть, изображение вставляется сразу после первого предложения, там, где мы разместили тэг . Если мы уменьшим размеры окна просмотра браузера по горизонтали так, чтобы первое предложение и рисунок не смогли поместиться на одной строке, то сначала будет отображено предложение, а уже под ним рисунок, прижатый к левому краю окна просмотра. Справа от него начнется отображение следующего за ним текста таким образом, что базовая линия строки совпадет с нижним краем рисунка.

8. Задайте отступы рисунка от текста, изменив HTML -документ page1.htm следующим образом:

9. Сохраните файл под тем же именем и посмотрите его в браузере.

10. Для выравнивания графического объекта относительно обтекающего его текста используется атрибут ALIGN . Его значением может быть одно ключевое слово из предопределенного набора. Значения BOTTOM , MIDDLE и TOP применяются для позиционирования первой строки текста, обтекающего рисунок по вертикали. Значение TOP смещает ее вверх, BOTTOM - вниз, а MIDDLE позволяет центрировать строку по вертикали.

Для выравнивания по горизонтали графического изображения применяются значения LEFT и RIGHT . Первое значение LEFT , как нетрудно догадаться, смещает рисунок к левому края блока, в котором тот отображается, а RIGHT – к правому.

Добавьте в HTML -документ page1.htm в тэг атрибут ALIGN со значением LEFT и посмотрите, как изменилось расположение рисунка и текста вокруг него.

11. Измените в тэге HTML -документа page1.htm значение атрибута ALIGN на MIDDLE и посмотрите, как изменится расположение рисунка и текста вокруг него.

Первая строка текста, находящегося после тэга вставки изображения, отображается по вертикали в центре свободного пространства справа от рисунка. Остальной текст располагается под рисунком. Если бы мы присвоили атрибуту ALIGN значение TOP , то первая строка появилась бы рядом с верхним обрезом рисунка. При использовании значения BOTTOM первая строка текста выводится рядом с нижней границей рисунка.

Следует обратить внимание, что браузер распознает только один атрибут ALIGN , т. е. мы можем указать либо вертикальное, либо горизонтальное выравнивание. Если же встроенных средств позиционирования и выравнивания рисунка не хватает, можно обратиться к процессу верстки с использованием таблиц.

12. С помощью атрибута BORDER мы можем устанавливать толщину границы, окружающей рисунок. Значением атрибута является число, указывающее толщину в пикселях. По умолчанию используется нулевое значение, делающее границу невидимой. Задайте для рисунка границу толщиной 5 пикселей.

13. Цветовая гамма HTML -документа определяется атрибутами, размещенными внутри тэга .

· bgcolor - определяет цвет фона документа.

· text - определяет цвет текста документа.

· link - определяет цвет выделенного элемента текста, при нажатии на который происходит переход по гипертекстовой ссылке.

Тэг может включать также атрибут background= «[имя файла]» , который задает изображение, служащее фоном для текста и других изображений. Как и любое другое изображение, фон должен быть представлен в формате GIF (файл с расширением *.gif ) или JPEG (файл с расширением *.jpg или *.jpeg ). Браузеры заполняют множественными копиями изображения-фона все пространство окна, в котором открыт документ, подобно тому, как при строительстве большие пространства стен покрывают маленькими (и одинаковыми) плитками.

Путешествуя по Интернету Вы конечно же видите на многих сайтах различные картинки, баннеры, фотографии, графические изображения. Сегодня мы научимся вставлять изображения на HTML страницу.

Добавление изображения происходит в два этапа: сначала готовится графический файл нужного размера и формата, а затем он добавляется на web-страницу через тег: . Сам HTML документ предназначен только для того, чтобы отобразить требуемую картинку, при этом никак ее не меняя .

При подготовке изображений следует учесть несколько моментов.

1. Поскольку веб-страница загружается по сети, существенным фактором выступает размер ("вес") графического файла , встроенного в web-документ. Чем он меньше, тем быстрее отобразится изображение.

2. Довольно часто физические размеры изображения (ширину и высоту) необходимо ограничить (уменьшить) по ширине и высоте. Например, установить по ширине не более 700-800 пикселов. Иначе изображение целиком не поместится в окне браузера, и появятся полосы прокрутки.

Форматы графики для web-сайтов

Наиболее широкое распространение для веб-графики получили два основных формата: GIF и JPEG . Такие качества как: многофункциональность, универсальность, небольшой объем исходных файлов при достаточном хорошем качестве, сослужили этим форматам хорошую службу, фактически определив их как стандарт для веб-изображений.

Есть еще формат: PNG , который также поддерживается браузерами при добавлении изображений и существует в двух вариантах: PNG-8 и PNG-24 . Однако популярность формата PNG сильно уступает по признанию форматам GIF и JPEG .

Обычно для изображений (картинок) создают отдельную папку в корневом каталоге и в неё складывают все изображения для сайта. Иногда таких папок бывает несколько (если того требует структура сайта или Вам так проще ориентироваться). Эту папку чаще всего называют: img или images (изображения ). В коде web-страницы прописывают полный путь до графического файла (где лежит изображение), а также имя данного файла (картинки), который Вы хотите вставить в html-документ.

Пишем код для вставки картинки на web-страницу

Для вставки изображений в HTML документ используется конструкция, указанная в Листинг 8.1. Данный код вставляется в нужное место web-страницы (туда, где Вы хотите видеть картинку).

На нашей we-странице, посвященной автомобилям, я подготовил и вставил два изображения. Код вставки первого изображения Вы видите в Листинге 8.1.

Листинг 8.1.

Вот так будет выглядеть первое вставленное изображение на web-странице сайта:

А теперь прокоментирую подробнее то, что написано в Листинге 8.1.

Само изображение "вставляется" с помощью тега: img src . Полностью запись выглядит вот так: img src="img/mers1.jpg" , где "img/mers1.jpg" – указывает, что наша картинка лежит в папке: img , а имя графического файла (картинки): mers1.jpg .

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

Давайте рассмотрим дополнительные параметры:

border="0" – указывает, что рамки вокруг изображения нет, попробуйте поменять 0 на другое число, например на 1 , - соответствует толщине рамки вокруг изображения в 1 пиксель, 2 – соответствует толщине рамки вокруг изображения в два пикселя и т.д.

Важно! Если Вы планируете сделать изображение ссылкой, обязательно указывайте значение: border="0" .

width="400" – указывает, что ширина изображения составляет: 400 пикселей (ставьте реальную цифру ширины ваших изображений).

height="209" - указывает, что высота изображения составляет: 209 пикселей (ставьте реальную цифру высоты ваших изображений).

Если не указать параметры: width и height , то изображение может получить геометрические искажения.

hspace="20" – указывает на отступ текста вокруг изображения в 20 пикселей.

align="left" – это уже знакомый Вам тег….. Правильно, обозначает выравнивание по левому краю, также может принимать, значение: right - выравнивание по правому краю.

alt="Вид машины спереди" – здесь прописывается альтернативный текст, который высвечивается при наведении мышки на изображение.

Точно таким же образом мы "вставим" на web-страницу и второе изображение, с той лишь разницей, что выравнена оно будет по правому краю.

Комментарии к этой статье (уроку):

Скажите пожалуйста, где именно надо создать папку img?

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

Дело в том, что картинка не отображается, только надпись. В чем может быть дело? Спасибо.

Посмотрите внимательно Листинг 8.1 выше. Возьмите его целиком к себе. В корневом каталоге (там где лежат все HTML-файлы вашего сайта) сделайте папку img . Поместите в эту папку все ваши изображения. В листинге измените mers1.jpg на название фашего файла. Значения width и height так же поменяйте на реальные размеры вашего файла. Удачи.

Спасибо большое, все получилось.

Здравствуйте.У меня таже ситуация,что и предыдущего оратора:прописываю код как у вас,меняю только название файла:вместо mers.1/jpeg вставляю связку мерседес/jpeg.На странице появляется только окно с надписью сверху"Вид автомобиля спереди",а изображения нет.По моему,браузер не может найти путь до фото или он не правильно прописан.ВОТ МОЙ КОД: б

Посмотрите внимательно на свой код img/мерседес/jpeg. Вы правильно поняли браузер не находит путь до графического файла. 2. Неправильно указано имя файла, смотрите как у меня mers1.jpg

Ну вот я скопировал код вставил у меня овал без картинки в овале в верху написана сылка!

Здравствуйте!Проблема такая же, создала папку с названием img там же где и документы сайта, в этой папке сохранены изображения с названием 1.jpg, прописываю все как на вашем примере.

Если Вы заметили у меня картинка лежит в папке img

Очень полезная статья для начинающих "web-мастеров". Единственное замечание к атрибуту "alt". Применительно к рисунку в статье даётся такое его толкование: "alt="Вид машины спереди" – здесь прописывается альтернативный текст который высвечивается при наведении мыши на картинку." Не совсем точно: для рисунка - это прорегатива атрибута title. alt - альтернативный текст, который отобразится, если у пользователя графика отключена или картинка не загрузилась; title - атрибут, позволяющий отображать всплывающее пояснение к картинке при наведении на неё курсора.

вот мой код ТАК ПОЧЕМУ ЖЕ КАРТИНКА СТАВИТСЯ СБОКУ, КОГДА ЗАДАЧА ДЛЯ НЕЕ CENTER?

А если я возьму изоброжение с чужого сайта это не будет нарушением авторских прав?

Объясните, почему при выкладке HTML документа на сервер на месте изображений пустые места в рамке. Хотя до выкладки, изображения были, как надо.

Дмитрий, чудес не бывает, Вы где-то допустили ошибку, проверьте все пути до картинок, т.е. как прописаны картинки в коде.

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

АндрейК,обратите пожалуйста на мое письмо.не могу никак вставить изображение,ввожу все правильно но никак,выявляется только рамка и надпись

Эльвира, Ваше письмо я прочитал, как впрочем и все остальные комментарии и письма. Но отвечать то куда... на деревню дедушке???

не знаю почему у всех запара!? нужно просто коды не копировать-затем вставлять, а самим прописывать и усе будет работать..вот текст моей картинки

Скопировал Ваш листинг,вставил свои значения-картинка есть.Далее вбиваю ниже то же самое(вручную)картинки нет-что за чудо?

АндрейК пожалуйста скажите где ошибка? сколко пробывал не получается((

Андрей, подскажите, почему не получается увидеть картинку. Мой код: Надпись есть, картинки нет. Мой адрес: [email protected] Спасибо.

Тоже долго мучилась, но получилось! Действительно папку imj надо открыть в HTML-документе.

Обязательно попробую,Спасибо

ииииииииууууууу крррррроши мои

тоже долго мучился, оказывается папка с картинками должна лежать там же где и index.html , спасибо вам Елена

Андрей я вставляю:

Андрей я вставляю: и у меня нет картинки в документе только надпись!!!Мой адрес:[email protected]

мой код...тоже нет картинки. Папка img находится в тойже папке что и index... помогите,пожалуйста. [email protected] Спасибо!

Ну не знаю. Прочитала все комментарии. Перепробовала все. Копировала, вставляла свои данные. Ничего не получается. Папка с картинками (img) лежит там же,где index.html. Но картинки нет. Вместо нее крестик красный и надпись.Работаю в браузере IE. Вот, что я ввела:

Посмотрела HTMLкод страницы на месте фото в уроке: Код на странице отличается от того, что в листинге. Почему? и, кстати на странице код "mers1.jpg" подчеркнут. Скопировать с подчеркиванием не удалось. Пробовала и так вставлять. Все равно картинки нет. В чем дело?

Сами спрашиваем, сами и отвечаем. Долго мучилась картинка не вставлялась. Оказалось: 1, вместо тега src у меня было srk 2. запуталась,когда составляла путь к картинке. Переименовала папку в IMG и все получилось. На это потратила почти два дня.Но это того стоило.

Любовь, зато теперь Вы это запомните на всю жизнь:) шучу конечно, не обижайтесь. А если серьезно, то если человек не оставляет обратного адреса, то помочь ему с моей стороны практически невозможно.

Здраствуйте а подскажите как разместить одно изображение сверху второе ниже слева, а третье снизу справа))))

...........в чем моя ошибка отсутствия изображения?

В коде все правильно, если ничего не напутали все должно работать. Но название файла (картинки) пишите английскими буквами. Многие сервера не воспринимают латиницу.

Но вот что странно... пока называла папку разными именами, никак картинка не хотела появляться, хоть и путь был прописан правильно. Как только назвала IMG,сразу появилась. В чем подвох?

Марина, никакого подвоха и провокаций нет:). В код Листинга 8.1. указано, что данное избражение лежит в папке: img. Если Вы меняете у себя на хосте название папки для изображениий, то поменяйте и в листинге, вот и вся хитрость.

Я пытаюсь вставить изображение!!! прописываю все через блокнот я все верно делаю может через блокнот не стоит??

И открываю все в мозиле файр фокс последний))

Путь моей картинкаи C:Documents and SettingsденисРабочий столkoffevinogradwwwImg и сама картинка названа gif тоже в название входит 1.gif...Я в блокноте делаю так крутой сайт делал и полный путь не выходит мозила не видит фото еxpoler красным крестом выделяет

Денис, переименуйте папку Img в img , т.е. все прописными буквами, и путь до нее тоже переименуйте. Многие сервера некорректно отображают заглавные регистры.

у меня все тот же вопрос: почему не изображения, а только надпись. я создала отдельную папку для сайта: в ней Web-страница и рисунок. Вставила: ПОМОГТЬЕ, В ЧЕМ ОШИБКА МОЯ ПОЧТА: [email protected]

А как сделать картинку, чтобы её можно было увеличивать или уменьшать?

У меня тоже почему-то не центрирует картинку. В чем подвох?.. Код такой:

HTML тег, отвечающий за вывод изображения

HTML изображением может быть любое изображение в формате PNG, JPEG и GIF.
HTML код изображения определяется тегом .
HTML изображение может быть фоном интернет-страницы.
HTML изображение может быть определено в роле гиперссылки.

В папку D\My_first_site\ или в любую другую, где у вас находится файл index.html поместите изображение с расширением, скажем, .jpg , назовите его как угодно, например, xxx .

Вставка изображения в HTML код страницы :

Тег - непарный. Обратите внимание на способ его закрытия.

Атрибуты и значения

- обязателен, он указывает на источник изображения.
alt="" - определяет альтернативный текст, комментарий, который считывает поисковый робот при анализе содержимого web-страницы. Его также нужно обозначать.
width="" - определяет ширину изображения в пикселях.
height="" - определяет высоту изображения в пикселях.

Указывайте реальные размеры - так вы сохраните первоначальное качество изображения.

Для web разработок применимы изображения трех форматов: PNG (.png), JPEG (.jpg) и GIF (.gif). Adobe Photoshop является специализированным средством по созданию графики для сайтов. С его помощью можно конвертировать один формат изображения в другой.

HTML изображение | Отступы по горизонтали и по вертикали

или расстояние по горизонтали и по вертикали между изображением и текстом

Результат:

Атрибуты и значения

hspace="" - определяет расстояние между изображением и текстом по горизонтали .
vspace="" - определяет расстояние между изображением и текстом по вертикали .

HTML фоновое изображение

или фон страницы, определяемый изображением

Мы располагаем следующим изображением:

Напишим код для отдельной страницы:

Атрибуты background, background-image рассматриваются в .

Вставка изображения и ее порядок → ../images/primer-img.jpg → смотрите .

HTML изображение - ссылка

Код примера:

border="0" - отменяет границу графической ссылки.

или все возможные способы размещения изображений по центру