Практическая работа использование таблиц и графических изображений при формировании html-документа
Цель работы: создать НТМL-документ, содержащий табличную и графическую информацию
ВОПРОСЫ ДЛЯ САМОПОДГОТОВКИ
Инструменты языка HTML для формирования таблиц
Инструменты языка HTML для работы с изображениями
КРАТКИЕ ТЕОРЕТИЧЕСКИЕ СВЕДЕНИЯ
Для работы с таблицами и изображениями в этой работе будут использоваться следующие элементы языка HTML:
1.
2.
3.
4.
5.
6.
|
<table> …</table> – контейнер таблицы. Внутри него могут быть размещены другие контейнеры, приведенные здесь под номерами 2 - 5
<caption> … </caption> - заголовок таблицы, выводится вне рамки таблицы, может иметь атрибут align
<tr> … </tr> - контейнер строки таблицы. Внутри него располагаются контейнеры <th>…</th> и <td>…</td>
<th> … </th> - контейнер ячейки «шапки» таблицы. Текст в этом случае автоматически выделяется полужирным шрифтом
<td> … </td> - контейнер обычной ячейки таблицы.
<img> - одиночный тег для вставки рисунков. Имеет следующие атрибуты src - указывает имя графического файла; height – высота изображения в пикселах; width – ширина изображения в пикселах; border – толщина рамки вокруг рисунка alt – альтернативный текст, воспроизводится на месте рисунка, если браузер не может открыть рисунок (или рисунок пока еще не загружен).
|
ЗАДАНИЯ ДЛЯ ПРАКТИЧЕСКОЙ РАБОТЫ
Задание 1
С помощью текстового редактора Блокнот создайте HTML-документ следующего вида и сохраните его в файле index2.html.
<html>
<head>
<title> Книжный интернет-магазин </title>
</head>
<h2> Книги по информатике </h2>
<img src="book.jpg">
<table border=3>
<caption>Новые поступления </caption>
<tr>
<th>автор</th>
<th>название</th>
<th>цена</th>
</tr>
<tr>
<td>Стауфер Т </td>
<td>Создание Web-страниц</td>
<td>13000</td>
</tr>
<tr>
<td>Костромин В</td>
<td>Самоучитель Linux</td>
<td>23500</td>
</tr>
<tr>
<td> </td>
<td>Информатика.Практикум</td>
<td>5400</td>
</tr>
</table>
</body>
</html>
В той же папке, где сохранен файл index2.html, разместите файл book.jpg, содержащий графическое изображение.
Просмотрите содержание созданного файла index2.html с помощью Internet Explorer.
Запишите текст файла index2.html в тетрадь. Дайте письменные комментарии о назначении каждого тега, имеющегося в этом документе.
Задание 2
1. Сформируйте HTML-документ следующего содержания
БЕЛОРУССИЯ (Беларусь), государство в Восточной Европе.
Площадь |
207,6 тыс кв.км. |
Численность населения (2003) |
10,32 млн. чел. |
Столица |
Минск |
Крупные города |
Гомель, Могилев, Витебск, Гродно |
Административное деление:
6 областей, 117 районов. 102 города, 109 поселков городского типа.
Население
Белорусы |
79.6% |
Русские |
13,2% |
Поляки |
4,1% |
Украинцы |
2,9% |
2. Документ сохраните на диске под именем index3.html.
3. Получите распечатку HTML-кода этого документа
Задание 3.
В подготовленный на прошлом занятии HTML-документ с названием «Моя личная страничка» добавьте Вашу фотографию и сведения об успеваемости за последний семестр (в виде таблицы)