2015-06-30
271Задание 1. Сделать несколько простых web-страниц с картинками. Картинки искать на компьютере. При необходимости, дорабатывать их менеджере рисунков MS Office или Paint.
1. Страницу с картинкой, выровненной по центру. Фонового рисунка нет, цвет фона не задавать.
2. Страницу с текстом и картинкой, прижатой к правому краю. (Обтекание должно быть.) Задайте темно-синий цвет фона и белый цвет шрифта.
3. Страницу с текстом и несколькими (не менее трех) маленькими рисунками, расположенными в тексте (без обтекания). Используйте какой-нибудь светлый фоновый рисунок.
Задание 2. Сделать фотоальбом: web-страницу с маленькими рисунками и пояснительным текстом. При щелчке по любому из рисунков должна появляться его увеличенная копия.
Порядок выполнения:
1. Создаем папку, в которой будем сохранять текст web-страницы и все изображения.
2. Копируем в эту папку картинки для фотоальбома из папки Кавказ.
3. Готовим какой-нибудь фоновый рисунок и тоже копируем его в нашу папку.
4. Скопированные фотографии слишком большие для интернета. Нужно в каком-нибудь графическом редакторе сделать два варианта каждой картинки: большую, с максимальным размером 600-700 пикселей и маленькую, с максимальным размером 150-200 пикселей, сохранив их JPEG'e.
|
|
|
5. Запускаем блокнот и печатаем теги, необходимые для любой web-страницы:
<HTML><HEAD><TITLE> название web-страницы </TITLE></HEAD>
<BODY BACKGROUND=" URL фонового рисунка ">
6. Далее идет заголовок с выравниванием по центру. Заголовок первого уровня (с самым крупным шрифтом) делается с помощью тега <H1>: <H1 ALIGN="CENTER">Текст заголовка</H1>
7. Затем идет таблица. Начинается она тегом <TABLE> и заканчивается </TABLE>. В таблице три строки. Каждая строка начинается тегом <TR> и заканчивается </TR>. В каждой строке по две ячейки. Каждая ячейка начинается с <TD> и заканчивается </TD>. Следовательно, структура таблицы будет такой:
<TABLE>
<TR><TD>содержимое первой ячейки</TD><TD>содержимое второй ячейки</TD></TR>
<TR><TD>содержимое первой ячейки</TD><TD>содержимое второй ячейки</TD></TR>
<TR><TD>содержимое первой ячейки</TD><TD>содержимое второй ячейки</TD></TR>
</TABLE>
8. В ячейки левого столбца добавляем маленькие рисунки и, кроме того, каждый из маленьких рисунков должен являться гиперссылкой на свою увеличенную копию. Поэтому, если, например, имена маленького и большого файлов соответственно, m.jpg и b.jpg, код HTML-документа для ячейки левого столбца будет такой:
<TD><A HREF="b.jpg"><IMG SRC="m.jpg"></A></TD>
9. Сохраняем web-страницу изменения и проверяем, как все работает.
