Практическое задание
Выполним несложные действия и разместим на страничке об Италии картинку и небольшую таблицу. Откройте подготовленный нами файл italy.html в текстовом редакторе Блокнот.
Поскольку мы начинаем работать с графикой, создайте в папке Site папку images. В ней мы будем размещать файлы с изображениями, используемыми на страницах нашего сайта.
Найдите в Интернет картинку с изображением трехцветного флага Италии. Пусть эта картинка будет не слишком большой по размеру. Сохраните ее в папке images, например, под именем fl_italy.jpg.
Вставим картинку с флагом в верхней части страницы после заголовка Италия. Для этого после заголовка, отмеченного тегами <H2></H2>, добавьте тег <IMG>. В качестве значения атрибута SRC укажите: images/fl_italy.jpg.
Оцените получившийся результат. Рисунок оказался выровнен по левому краю. Чтобы выровнять его по центру, заключите тег <IMG> между тегами <CENTER> и </CENTER>.
Теперь добавим к нашей странице еще один раздел. Назовем его Общие сведения и расположим его между разделами Географическое положение и Национальные особенности. Добавьте соответствующий подзаголовок в начале страницы, а также подзаголовок ниже, выделенный жирным шрифтом (тег <B>) и снабженный меткой (тег <A> с атрибутом NAME).
Новый подраздел оформим в виде таблицы, которая будет выглядеть следующим образом:
Столица |
Рим |
Площадь |
301250 км2 |
Население |
57 млн. чел. |
Язык |
Итальянский (классический плюс несколько диалектов), Немецкий, Французский, Словенский |
Создайте в формируемом документе следующий код для организации таблицы, состоящей из четырех строк и двух столбцов:
<TABLE ALIGN=Center BORDER=1 WIDTH=760>
<TR>
<TD WIDTH=200></TD>
<TD></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TD></TD>
<TD> </TD>
</TR>
</TABLE>
Обратите внимание, что наша таблица будет выровнена по центру, иметь ширину 760 пикселей и границу шириной 1. Первый столбец будет иметь ширину 200 пикселей.
Заполните получившуюся структуру информацией, используя данные, приведенные выше. Для получения верхнего надписи в виде верхнего индекса (км2) заключите цифру «2» между специальными тегами <SUP></SUP>.
Сохраните документ и просмотрите получившийся результат в браузере.