Веб-страница становится более наглядной, если ее дополнить рисунками и графическими элементами.
Вставка рисунков
Чтобы вставить рисунок на веб-страницу, надо воспользоваться тегом <img src="my.jpg">, где img — имя тега, предназначенного для вставки изображения, src="my.jpg" — атрибут, в котором указывают имя файла с рисунком.
В атрибуте можно использовать имена графических файлов с расширением .jpg, .jpeg, .gif, .png или .bmp. Если рисунок и html-файл расположены не в одной папке, то кроме имени файла указывают путь к нему.
Если рисунок содержится:
• во вложенной папке images: <img src="images/my.jpg">
• во внешней папке: <img src="../my.jpg">
Для определения способа расположения рисунка на веб-странице используют отдельные атрибуты тега.
Рассмотрим пример расположения рисунка "prl.png" на веб-странице (см. рисунок):
• рисунок с левого края, обтекание текстом справа:
<img src="pr1.png" align="left">
• расстояние между текстом и рисунком по вертикали 10 пикселей, по горизонтали — 30 пикселей: <img src="pr1.png" vspace="10" hspace="30">
• описание рисунка: <img src="pr1.png" alt-'мое фото">
Примечание. Если навести указатель мыши на рисунок, появится текст — мое фото. Кроме того, значение параметра alt будет выведено на экран вместо рисунка, если в браузере режим показа рисунков отключен.
• ширина рисунка 100 пикселей, высота — 20 % от высоты рабочей области браузера: <img src="pr1.png" width="100" height="20%">
• толщина рамки вокруг рисунка 5 пикселей:
<img src="pr1.png" border="5">
Гиперссылки
Сайт может состоять из многих связанных гиперссылками веб-страниц, одна из которых является главной. Главная веб-страница открывается первой. Файл главной страницы называют, как правило, index.html.
Для создания гиперссылок на веб-страницы сайта и внешние ресурсы сети Интернет используют тег <a>...</a>.
Пусть в одной папке с файлом index.html создан файл prf.html, содержащий вашу фотографию. В файле index.html к фразе Посмотреть фото можно добавить гиперссылку, которая будет выглядеть так:
<a href="prf.html"> Посмотреть фото </a>
В качестве гиперссылки можно использовать рисунок. Для этого нужно указать тег вставки рисунка: <a href="prf.html"><img src="foto1.jpg"></a>
html-код главной веб-страницы может иметь следующий вид:
По щелчку надписи Первая страница (Вторая страница, Третья страница) произойдет переход по гиперссылке.
Для возврата на главную страницу на других веб-страницах должны быть соответствующие ссылки. Например: <a href=ꞋꞋindex.htmlꞋꞋ>Главная</а>
Вопросы для самопроверки
1. Как вставить рисунок на веб-страницу?
2. Как выровнять рисунок по правому краю окна браузера?
3. Как создать гиперссылку?
4. Как к рисунку добавить гиперссылку на другую веб-страницу? Упражнение 22
Создать веб-страницу с рисунками и гиперссылками.
1) Создайте папку с названием Упражнение 22. Найдите в Интернете рисунок на школьную тематику и сохраните его в созданной папке.
2) Создайте html-документ (главную веб-страницу сайта) с заголовком Расписание уроков. Добавьте рисунок, сохраненный в папке, и текст (меню сайта): понедельник, вторник, среда, четверг, пятница. Сохраните созданный документ с именем index.html в папке.
3) Создайте 5 html-документов (страниц сайта) с расписанием уроков на каждый из этих дней недели. К каждой странице добавьте слово Главная, которое будет гиперссылкой на главную веб-страницу. Сохраните страницы сайта в папке с именами 1.html; 2.html; 3.html;
4.html; 5.html.
4) В файле index.html сделайте гиперссылки на 5 других страниц, в файлах 1.html-5.html — гиперссылки на главную страницу сайта.
5) Отформатируйте текст и рисунки.
6) Проверьте работу сайта. Завершите работу за компьютером.
Компьютерное тестирование
Выполните тестовое задание 22 с автоматической проверкой
на сайте interactive.ranok.com.ua.
Это материал из учебника Информатика 9 класс Бондаренко