III Работа с таблицами

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

Таблица 3. Теги, отвечающие за создание таблиц

Тег	Пример	Отображение на экране
table, tr, td	<TABLE border="1"> <TR><TD>1</TD> <TD rowspan="2">2</TD> <TD>3</TD></TR> <TR><TD>4</TD> <TD>6</TD></TR> <TR><TD>7</TD> <TD colspan=”2”>8</TD></TR> </TABLE>	Таблица с рамкой шириной 1 пиксель Первая строка таблицы состоит из 3-х ячеек (вторая ячейка объединяет 2 ряда. Вторая строка состоит из 2-х ячеек Третья строка состоит из 2-х ячеек (вторая ячейка объединяет 2 столбца).

В данном примере выводится следующая таблица:

1	2	3
4		6
7	8

Задание 3: В новом файле, который назвать raspisanie.html, создать таблицу со своим расписанием на всю неделю следующим образом:

Расписание занятий Ваше имя
День недели	Номер урока	Предмет	Учитель	Аудитория
Понедельник	1	Алгебра	Иванов И.И.	123
	2	Геометрия	Петров П.П.	251
	3	Физкультура	Сидоров С.С.	спортзал
Вторник	1	Физика	Макаров П.О.	112

В файл index.html добавить строку: Хотите посмотреть мое расписание? Щелкните сюда. Предложение «Щелкните сюда» оформить как гиперссылку на страницу raspisanie.html. Внизу страницы raspisanie.html расположить картинку «Назад», которую оформить как гиперссылку на главную страницу.

IV Работа с графикой

Вы можете добавить на свою страничку графику

Таблица 4. Теги для вставки картинок

Тег	Пример	Отображение на экране
img	<img src=”pic1.jpg” width=”100” height=”100” align=”right”> <img src=”pic1.jpg” border=”2”>	Вставить картинку pic1.jpg размером 100х100 и обтеканием текстом слева Вставить картинку с рамкой шириной 2 пикселя.

Задание 4:

1. В графическом редакторе нарисовать эмблему Вашей специальности и сохраните его под именем faculty.jpg в Вашей папке.

2. В файл index.html вверху страницы по середине вставить картинку faculty.jpg и ее подписать «Эмблема специальности …». Примечание: в качестве альтернативного текста написать «Эмблема специальности …», ширина рамки – 5 пикселей.

3. Внизу страницы расположить эмблему Южно-уральского института экономики и управления. Установить соответствующую высоты, ширину и толщину рамки, выравнивание по левому краю и рядом по середине фотографии (для этого теги с картинкой заключить в теги параграфа и после этого сделать несколько параграфов, каждый из которых состоит из &nbsp) сделать подпись «Южно-уральского института экономики и управления».

4. Картинку с фотографией оформить в виде гиперссылки на сервер ЮУИЭУ.

5. В браузере отключить отображение графики (используя систему помощи браузера) и заново просмотреть созданный документ.

6. Нарисовать в графическом редакторе рисунок, в котором красиво написать «Назад».

7. Создать новый документ, назвав который photos.html, где разместите свою фотографию и сделать подпись к ней. Внизу страницы по середине сделать надпись «Назад», которую оформить в виде гиперссылки на документ index.html.

8. В документе index.html сделать гиперссылку на файл photos.html, добавив абзац «Здесь вы можете посмотреть мою фотографию».

9. В документе photos.html внизу страницы рядом с надписью «Назад» расположить картинку, которую оформить в виде гиперссылки на главную страницу.