Лабораторная работа №5

Цель работы: научиться использовать статические и динамические графические изображения в www-документах; научиться реализовывать связи между гипертекстовыми файлами и ссылками на точки внутри HTML-документа.

Выполнение работы

За организацию ссылок в языке HTML отвечает тег …, который чаще всего использует следующий шаблон:

Атрибут hrefтега может указывать на метку внутри страницы (внутренние ссылки), файл на локальном диске или ресурс Internet.

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

На рисунке 1.1 представлен полный код HTML.

Рисунок 1.1. HTMLдокумент

На рисунке 1.2. документ представлен в браузере.

Рисунок 1.2. Документ в браузере

Контрольные вопросы

Вставка графических объектов в HTML-файлы.

Для вставки изображений в HTML документ используется следующая конструкция (представлена полная):

Описание каждого параметра данной конструкции:

src- Имя графического файла с расширением (поддерживаются *.jpg, *.gif, *.png). Если файл находится в другом каталоге, укажите к нему путь.

Align – выравнивание изображения в документе:left - по левому краю.right - по правому краю.

top или texttop - выравнивают верхнюю кромку изображения с верхней линией текущей текстовой строки.

middle - выравнивает базовую линию текущей текстовой строки с центром изображения.

absmiddle - выравнивает центр текущей текстовой строки с центром изображения.

bottom или baseline - выравнивают нижнюю кромку изображения с базовой линией текущей текстовой строки.

absbottom - выравнивает нижнюю кромку изображения с нижней кромкой текущей текстовой строки.

Border - Рамка вокруг рисунка. Значение по умолчанию - 0 (без рамки).

Width - Ширина изображения в пикселях.

Height - Высота изображения в пикселях.

Hspace - Горизонтальный отступ графического изображения в пикселях. Не обязательный параметр.

Vspace - Вертикальный отступ в пикселях. Не обязательный параметр.

Alt - Это сообщение, которое выводится вместо картинки, если она не показывается (не найдена или пользователь настроил свой Обозреватель так, что тот не показывает картинки). Кроме того, вы увидите этот текст в виде подсказки, когда курсор мыши находится на рисунке.

Name - Определяет имя изображения. Для обычного изображения, не связанного ни с чем, этот параметр совсем не обязательный.

lowsrc - Имя графического файла с расширением с альтернативным изображением более низкого качества (и, соответственно, меньшего объема), чем изображение, указанное в параметре src. Обозреватели, поддерживающие данный параметр, сначала загрузят картинку из lowsrc, а затем заменят ее картинкой из src. Не обязательный параметр.

Об этом человеке известно только то,
что он не сидел в тюрьме, но почему не сидел - неизвестно.
Марк Твен.

Э то урок о том, как вставить картинку в HTML , как её оформить, как сделать обтекание картинки текстом и т.д. Ведь известно, что изображения делают сайт более привлекательным и отличным от других ресурсов, поэтому умение использовать тег и его атрибуты весьма пригодится в современном Интернете. Но главное тут - чувство меры!

П ереизбыток графики вызовет утяжеление html-страницы и, соответственно, увеличит время её загрузки. Кроме того, наличие большого числа изображений будет отвлекать посетителей от главного содержимого сайта (если, конечно, графика не является главным содержимым сайта). Так что, соблюдай меру и используй только там, где это нужно. И будет тебе счастье!

В уроке про я уже рассказывал о том, как можно использовать картинки в качестве фона html-документа. Сейчас же поговорим о том, как графика используется в «верхнем слое» html-страницы.

§ 1. Как вставить картинку

Д ля вставки картинок в HTML используется тег IMG с обязательным атрибутом SRC . Этот атрибут указывает браузеру путь к файлу изображения. Т.е. для вставки картинки с названием logo.jpg в определенное место страницы (при условии, что и страница, и картинка расположены в одной папке (каталоге)) нужно в этом месте вставить следующий html-код:

src="logo.jpg">

Е сли картинка и страница расположены в разных каталогах (папках), то нужно указать путь к изображению относительно страницы. Например, если html-страница лежит в каталоге (папке) site, в этом же каталоге (папке) расположен подкаталог (папка) images, в котором и находится наша картинка logo.jpg, то для её вставки нужно написать так:

images/logo.jpg">

А можно не мучиться и указать полный адрес картинки . Например, так:

http://www..png">

В последнем случае браузер отобразит код так:

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

П омимо обязательного атрибута SRC у тега IMG есть ещё несколько необязательных атрибутов. Рассмотрим их подробнее.

§ 2. Указание размеров картинки

Н ачнём с атрибутов, которые позволяют задать размеры картинки (точнее, застолбить место под эти размеры на страницы). Вот они:

• width - ширина картинки в пикселах или процентах;


• height - высота картинки в пикселах или процентах.

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

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

width="50" height="20">

width="10%" height="5%">

§ 3. Альтернативный текст

В случае, если пользователь в настройках браузера отключил показ изображений, то можно вместо картинки вывести альтернативный текст, который бы объяснил, что за графика здесь должна быть. Достигается это путём применения атрибута ALT :

В этом случае браузер зарезервирует место на странице под изображение, но вместо самой картинки покажет текст, который ты напишешь в значении атрибута ALT :

П овторю, это произойдёт, если пользователь отключил показ графики. Если же нет, то картинка скроет собой альтернативный текст.

§ 4. Выравнивание картинки

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

• left - изображение располагается у левого края страницы, а текст обтекает картинку справа;


• right - изображение располагается у правого края страницы, а текст и другие элементы обтекают картинку слева.

Н апример, HTML-код

браузер покажет так

А этот HTML-код:

будет выглядеть вот так:

Д ля прекращения обтекания картинки текстом можно использовать тег BR (знакомый нам из прошлого раздела про ). У тега BR есть атрибут clear , который может принимать три значения:

• left - прекращение обтекания текстом картинок, выровненных по левому краю;


• right - прекращение обтекания текстом картинок, выровненных по правому краю;


• all - прекращение обтекание текстом картинок, выровненных и по левому, и по правому краю.

В большинстве Web-страниц встречается графика. Она позволяет красочно и наглядно представить информацию. Во многих случаях лучше показать картинку, чем давать длинное текстовое описание.
Существуют два способа размещения графических изображений на странице:

• вставка отдельных картинок;
• заполнение фона картинкой.

В любом случае графическое изображение берется из файла.

Вставка на страницу графического изображения из файла графического формата производится с помощью тега (от англ, image - изображение) с указанием адреса файла в качестве аргумента атрибута SRC:

Адрес графического файла - этолибо URL-адрес, либо имя файла, возможно, с указанием пути. Например, для показа графического файла logotip.jpg следует написать тег

Для увеличения скорости передачи графического изображения в теге можно использовать атрибут (дополнительный параметр) LOWSRC, который принимает в качестве аргумента адрес графического файла. Вы можете создать два графических файла: один (например, пусть это файл logotip.jpg) содержит картинку, полученную с высоким разрешением, а другой (например, logotip.gif) - картинку, полученную с низким разрешением. Тогда тег

Предпишет браузеру сначала загрузить файл logotip.gif, а затем по мере приема заменить его файлом logotip.jpg.
Другой способ ускорения загрузки графики заключается в задании размеров прямоугольной области, в которой будет размещено графическое изображение, с помощью атрибутов WIDTH (ширина) и HEIGHT (высота), измеряемых в пикселах. Если указать эти атрибуты, то браузер сначала выделит место под графику, подготовит макет документа, отобразит текст и только потом загрузит графику. Заметим, что браузер сжимает или растягивает изображение, встраивая его в рамки указанного размера. Пример указания размеров изображения:

Графика обычно используется вместе с текстом, поэтому возникает задача выравнивания текста и графического изображения. Эта задача решается с помощью атрибута ALIGN тэга с применением различных аргументов. Например, мы можем пожелать, чтобы текст обтекал картинку справа или слева. Обычно картинка встраивается вплотную с текстом, что может быть некрасиво. Во избежание этого, можно задать пустые поля вокруг иллюстрации. Поля создаются с помощью атрибутов VSРАСЕ для верхнего и нижнего полей и НSPACE для боковых полей в теге . Аргументы этих атрибутов указываются в виде чисел, определяющих размеры полей в пикселах. Для отмены обтекания графики текстом служит тег
.
Следующий тег задает обтекание графики из файла logotip.jpg справа (картинка будет находиться слева от текста):

Если требуется расположить картинку справа от текста, то нужно атрибуту ALIGN присвоить аргумент RIGHT :

Чтобы задать поля вокруг картинки, надо написать тег вида:

Здесь числа 20 и 10 определяют размеры полей.
Рассмотрим пример совместного использования графики и текстов. Откройте Блокнот (текстовый редактор Notepad) Windows. Напишите в нем HTML-код с использованием рассмотренных выше тегов. Ниже приводится программа, выводящая некоторый текст и графику. В качестве графического файла можно использовать любой из имеющихся у вас файлов. Здесь используется файл logotip.gif.

<Н1>Текст обтекает графику справа
Это - пример совместного использования текста и графики.
Текст программы HTML можно писать в любом текстовом редакторе. При этом используются теги разметки текста.

Этот текст выводится с нового абзаца. Чтобы сделать это, мы использовали специальный тег.

Попробуйте изменить размеры окна Вашего браузера. Обратите внимание, как изменяется расположение текста.

Рис. 657. Текст обтекает картинку справа

Широкие возможности точного позиционирования изображений (как и других элементов) на странице предоставляют таблицы и стили . Эти элементы HTML будут рассмотрены позже. Например, вы можете определить таблицу без видимых рамок, а в ячейках этой таблицы разместить картинки, тексты и другие элементы.

Д ля вставки изображений в HTML применяются два основных формата GIF и JPEG. Формат GIF может хранить внутри себя простейшую анимацию (динамические баннеры), JPEG отлично подходит для изображений с большим количеством цветов, например фотографий. Третьим форматом для web-графики является формат PNG, но он не получил широкого применения в web-дизайне. Любое изображение в форматах GIF или JPEG вставляется на web-страницу при помощи тега , закрывающего тега нет.

Атрибут SRC

Посредством атрибута src задается адрес (URL) файла с изображением, т.е. браузер находит нужное изображение в каталоге сайта по пути (адресу URL), прописанному в этом атрибуте. Для удобства все изображения сайта находятся в отдельной папке, обычно с именем image . Для примера возьми любое изображение, лучше небольшого формата, и сохрани в созданной папке image, с именем primer.jpg . Далее мы будем обращаться к ней для обучения.

Ну что, попробуем вставить картинку на страницу? Пишем код (путь - URL, прописывается в зависимости от местонахождения папки с изображениями):

src="image/primer.jpg" >

То, без чего не создать сайт: ∼ ∼

Надеемся, что данная статья Вам будет полезна. Приятного прочтения!

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

Но и частить ими не стоит, если вы не инстаграм или интернет-магазин. Желательно, чтобы изображения:

• были информативными
• соответствовали цветовой гамме вашего сайта
• были уместны

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

Для тех, кто не любит переплачивать, в конце статьи мы приготовили бонус - список нескольких фотобанков , где можно скачать огромное количество качественных красивых материалов совершенно бесплатно 🙂

Форматы изображений

Во Всемирной паутине в основном используются 3 вида изображений:

gif (Graphics Interchange Format - формат для обмена изображениями )

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

jpeg , он же jpg (Joint Photographic Experts Group - Объединенная группа экспертов по фотографии - так называется организация-разработчик)

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

png (Portable Network Graphics - Портативная сетевая графика . Произносится так же как ping, т.е. )

этот формат изначально разрабатывался для веба, т.е. изображение обычно мало "весит" и не тормозит страницу при загрузке. Этот формат создан на замену устаревшего gif, но в отличие от него, не поддерживает анимацию. Png-8 , как и gif, использует всего 256 цветов. Формат png-24 поддерживает 16 млн цветов, правда и вес уже немаленький. Png-32 содержит столько же цветов, как и png-24, и плюс к этому позволяет получить изображение с прозрачным фоном , причем можно регулировать степень прозрачности. При уменьшении размеров png не происходит потери в качестве цвета.

Подытожим

gif - для анимации

jpeg - для фотографий

png - для иконок, кнопок, фонов, логотипов, скриншотов, чертежей, текстов, фотографий с прозрачным фоном

Вставка изображения в html-файл

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

Атрибут src (от англ. source - источник) указывает путь к файлу (место, где лежит изображение). Если картинка лежит у вас на компьютере (пока сайт только в процессе разработки) или на вашем сервере - используйте относительную ссылку. Если имидж из сети, тогда нужна абсолютная ссылка. Как это сделать читайте в статье "Ссылки ".

Итак, чтобы подключить изображение к вашей веб-странице, нужно написать такой код:

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

Поисковики обращают пристальное внимание на то, чтобы этот атрибут был заполнен. А html валидатор (ресурс для проверки кода на правильность) воспримет отсутствие атрибута alt как ошибку. Если же все атрибуты будут заполнены, да еще и содержать по возможности ключевые слова - видимость вашего сайта ощутимо повысится, т.е. его чаще будут показывать на поиске. Это из области SEO, а на данном этапе нам достаточно знать, что есть такой атрибут, и у "живого" сайта он должен быть заполнен. Пока сайт лежит у нас на диске - его вполне можно оставить пустым.

В примере ниже мы умышленно указали несуществующий путь для изображения, чтобы вы увидели, как работает атрибут alt

Высота и ширина изображений

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

В HTML5 это рекомендуется делать с помощью CSS или атрибута style , вот так:

В данном примере мы взяли 30% от ширины, но не оригинального имиджа, а размера окна браузера. Когда ширина = 100%, то изображение открывается на всю ширину браузера. Запомните эту особенность процентов , как единицы измерения.

Кстати, если бы мы написали только ширину, результат был бы тот же, попробуйте:

< img src = "https://сайт/tutorials/wp-content/uploads/2016/07/panda.jpg" alt = "панда на дереве" style = "width:30%;" >

Также ширину и высоту можно задавать в пикселях. В случае с нашей пандой, у которой исходные размеры 1196 х 796 пикселей, чтобы при сжатии животное не пострадало, нам нужно сохранить пропорции, а здесь без калькулятора не обойдешься. Допустим, мы хотим уменьшить размер картинки в 3 раза, тогда нам нужно прописать размеры 399 х 265 пикселей.

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

Попробуйте запустить такой код и посмотрите на результат:

< img src = "https://сайт/tutorials/wp-content/uploads/2016/07/panda.jpg" alt = "панда на дереве" style = "width:399px;" >

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

Немножко нафталина

Если вам доведется ковыряться в коде сайта, созданного на HTML-4 или еще более ранних, то вы заметите, что размеры изображений устанавливаются с помощью специальных атрибутов width и height . Это устаревший метод, хотя всё еще валидный в HTML5. Тем не менее советуем использовать style, т.к. на атрибуты width и height могут влиять внутренние или внешние стили, которые будут жить в браузере или вашем CSS-файле. Мы остановимся на этом детальней, когда будем рассматривать CSS, а пока просто посмотрите пример, как стили влияют на атрибуты высоты и ширины.

В этом окне 3 вкладки: на первой вы видите html-код, на 2-й код CSS, ну а на последней - как всегда результат. Это работает, как если бы первая вкладка была файлом index.html, вторая - файлом style.css, а третья браузером. Так вот, сейчас в нашем CSS написано, что все элементы с тегом img имеют ширину 100%. Размеры атрибутов width и height по умолчанию в пикселях, поэтому здесь не надо дописывать никаких единиц.

Разница в результате на лицо 🙂

Также в старых версиях html использовались такие атрибуты:

align , с помощью которого выравнивалось изображение по горизонтали или вертикали.

hspace - отступ слева и справа от изображения до окружающего контента (напр. текста или соседней картинки)

vspace - отступ сверху и снизу от картинки до контента вокруг.

border - задавал толщину рамки вокруг изображения (по умолчанию она равна нулю)

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

Размещение картинки в коде

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

Пример №1 - перед параграфом:

Такие элементы как

И

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

Пример №2 - в начале параграфа

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

Подписи к иллюстрациям

Чтобы пометить или подписать фото на странице используется тег

(от английского figure - рисунок). Этот тег указывает на то, что внутри него помещается контент типа иллюстраций, фотографий, диаграмм и т.п.

Тег