Использование рисунков делает веб-страницы более интересными. Как уже говорилось, картинка - это файл с расширением GIF, JPG (JPEG), PNG. Возможна вставка анимированных картинок (GIF). Так как, каждая картинка требует времени на её обработку и замедляет загрузку документа, поэтому не стоит включать в документ большое количество иллюстраций или иллюстрации большого размера.
| Тег IMG | Тег вставки картинки на веб-страницу; не требует закрывающего тега. |
| Атрибуты тега IMG: | |
| SRC | Обязательный атрибут, указывающий URL картинки |
| ALIGN | С помощью данного атрибута можно расположить картинку слева (LEFT), по центру (CENTER), справа (RIGHT). Также с помощью команды ALIGNВы можете расположить картинку слева (LEFT), по центру (CENTER), справа (RIGHT) относительно текста, также можете выравнить картинку: по верхнему краю (TOP), посередине (MIDDLE), по нижнему краю (BOTTOM) текста |
| HEIGHT | Используется для указания высоты рисунка в пикселях. По умолчанию используется оригинальная высота рисунка. |
| WIDTH | Используется для указания ширины рисунка. Задается либо в пикселях, либо в процентах относительно высоты. |
| ALT | Вставляет альтернативный текст, которой помещается вместо изображения, если браузер не может отобразить картинку. Также командой ALT можно задать краткое описание картинки, которое выскочит, если навести курсором мыши на рисунок, и так подержать его (курсор) несколько секунд. |
Гиперссылка-картинка.
Для того, чтобы использовать в качестве гиперссылки картинку, достаточно заключить тег IMG в тег < A>. Например, <a href="File.htm"><img src="image.jpg" width="96" height="67"></a>
Вставка бегущей строки
Для вставки на веб-страницу бегущей строки используют парный тег: <MARQUEE>…</MARQUEE>.
Например, <MARQUEE bgcolor=”white” HEIGHT=40>Наша группа 2С-22</MARQUEE>
| Таблица 16-и стандартных цветов | |||||||
| Название | Код RGB | Имя | Цвет | Название | Код RGB | Имя | Цвет |
| черный | #000000 | black | серебряный | #C0C0C0 | silver | ||
| темно-бордовый | #800000 | maroon | красный | #FF0000 | red | ||
| зеленый | #008000 | green | известь | #00FF00 | lime | ||
| оливковый | #808000 | olive | желтый | #FFFF00 | yellow | ||
| темно-синий | #000080 | navy | синий | #0000FF | blue | ||
| фиолетовый | #800080 | purple | фуксия | #FF00FF | fuchsia | ||
| чирок | #008080 | teal | аква | #00FFFF | aqva | ||
| серый | #808080 | gray | белый | #FFFFFF | white |
Лабораторная работа 4.
Тема: Создание веб-сайта.
Цель занятия: изучить основные теги и атрибуты языка HTML;
создать простейшую веб-страницу средствами языка HTML.
Ход работы:
Постановка задачи: средствами языка HTML создать простейшую веб -страницу в текстовом редакторе Блокнот.
Предварительная работа.
1. Создайте предварительно папку по адресу С:\Мои документы или на диске D: под именем Ваша фамилия.
2. Создайте с помощью текстового редактора Блокнот небольшой текстовый файл с информацией об успеваемости вашей учебной группы. Сохраните его в вашей папке под произвольным именем (только латинскими буквами!!!).
3. Также поместите в вашу папку файлы, содержащие картинки или рисунки соответствующего формата (можно фотографии).
4. Создайте HTML-файл с основными структурными тегами. Между тегами <BODY> и </BODY> напишите несколько слов о себе (можно добавить вашу фотографию в этот файл). В меню Файл (File) выполните команду Сохранить как. В диалоговом окне Сохранения файла найдите созданную папку, укажите тип файла Все файлы и сохраните файл, назвав его своим именем (фамилией), и указав расширение html или htm. Например, D:\IVANOVA\Ivanova.html.
5. Создайте подобные файлы (2-3) с короткой информацией о 2-3 ваших друзьях-одногруппниках.
Основная часть.
Создайте с помощью Блокнота основную вашу html-страницу. В содержание html-страницы средствами языка HTML включите всё нижеперечисленное:
1. Заголовок «Наша группа - …».
(выравнивание по центру, заголовок первого уровня)
2. «Наша специальность - … ».
(выравнивание по центру, заголовок второго уровня)
3. «Общая характеристика группы: … (несколько слов о вашей группе)».
(выравнивание по левому краю, заголовок третьего уровня)
4. Создайте список ваших друзей с группы (тех, о которых вы создавали HTML-файлы). Каждую фамилия размещайте на новой строке, а перед ней пустую строку.
5. Включите на вашу веб-страницу графическое изображение, рисунок или фотографию группы (которые вы сохранили в своей папке).
6. Создайте гиперссылки на вашей странице:
· при щелчке на фамилии студента (вашего друга) должен осуществляться переход к просмотру сведений об этом студенте, то есть на соответствующий HTML-файл;
· при щелчке на слове «успеваемость » (создайте сначала точку привязки этой гиперссылки), должен открываться сохранённый вами текстовый файл;
· в конце страницы создайте внутреннюю гиперссылку (можно в виде картинки или слова), при щелчке на которой будет осуществляться переход на Специальность группы.
7. Добавьте бегущую строку с названием вашего техникума.
* можно задавать фон вашей страницы и цвет текста любой (на ваше усмотрение).