Создайте следующий абзац. В качестве текста укажите:
Этому причудливому ботфорту Европы есть чем похвастаться: религиозными и культурными деятелями, кукурузной кашей-полентой, знаменитыми памятниками архитектуры и своим политическим ребячеством. Его трехтысячелетняя история, культура и кухня могут покорить едва ли не каждого. В Италии можно посетить римские развалины, увидеть искусство ренессанса, побывать в крошечных средневековых городках на холмах, покататься на лыжах в Альпах, исследовать каналы Венеции и увидеть церкви, прекраснее которых трудно себе представить. Конечно, можно также насладиться и более простыми вещами: хорошей едой, вином, походами по магазинам и огромным выбором развлечений.
Перед абзацем (и его тегами) напишите выражение Национальные особенности и заключите его между тегами <B> и </B>, как полужирный текст. На границе абзацев раздела укажите тег разрыва строки <BR>.
Создайте следующий абзац. В качестве текста укажите:
Рим
Милан
Неаполь
Флоренция
Перед абзацем (и его тегами) напишите выражение Крупные города и заключите его между тегами <B> и </B>, как полужирный текст.
Оформим абзац в виде списка. Включите в страничку следующий код:
<FONT FACE="Verdana" SIZE="2">
<UL><STRONG>
<LI>Рим </LI>
<LI>Милан </LI>
<LI>Неаполь </LI>
<LI>Флоренция </LI>
</STRONG></UL>
</FONT>
Добейтесь полного понимания назначения тегов <UL> (маркированный список) и <LI> (элемент списка).
В последней части этого практического задания организуем гиперссылки на подразделы документа о странах. Для этого сначала необходимо расставить по тексту метки, на которые потом мы будем ссылаться. Вернитесь к абзацу, в котором рассказывается о географическом положении Италии и заключите слово Географическое положение между тегами <A NAME="1"> и </A>. Это означает, что мы «привязали» метку с именем “1” к слову Географическое положение.
Теперь организуем гиперссылку на эту метку. Перейдите к верхней части документа, туда, где перечислены все подразделы. Заключите название раздела Географическое положение между тегами: <A HREF="#1"> и </A>. Проверьте действие гиперссылки в браузере.
Аналогично организуйте гиперссылки на другие подразделы документа. В качестве имен меток задавайте “2”, “3”.
Просмотрите странички своего проекта в браузере.
Практическое занятие №3. Совершенствование проекта: вставка изображений, таблиц
Справочник
Тег <IMG> предназначен для вставки графики в html-документ. Данный тег не является парным, т.е. не имеет закрывающего тега.
В качестве атрибутов тега <IMG> могут быть использованы следующие директивы.
Название атрибута |
Описание |
SRC |
Обязательный атрибут. Определяет путь к файлу, содержащему изображение. |
ALIGN |
Отвечает за позиционирование картинки html-документе или в ячейке таблицы. помимо традиционных значений данного атрибута (RIGHT, LEFT и CENTER) совестно с тегом <IMG> можно указывать и другие значения атрибута:
|
WIDTH и HEIGHT |
Указывают ширину и высоту вставляемого в html-документ графического изображения в пикселях. Некоторые web-мастера используют данные атрибуты для масштабирования иллюстраций. Однако рекомендуется указывать реальные геометрические размеры картинки, при необходимости масштабируя изображение при помощи графического редактора. |
ALT |
Альтернативный текст, который отображается вместо картинки в случае, если поддержка графики отключена пользователем. Этот же текст выводится в небольшом желтом прямоугольнике (так называемой всплывающей подсказке), если пользователь несколько секунд подержит на изображении указатель мыши. |
HSPACE и VSPACE |
Данные атрибуты задают горизонтальные и вертикальные отступы от изображения в пикселях, которые необходимы, например, в случае, когда картинка помещается на странице рядом с текстом. |
BORDER |
Толщина синей рамки, в которую заключается изображение. |
Для создания таблиц в HTML применяется тег <TABLE>. Тег является парным.
В качестве атрибутов тега <TABLE> могут быть использованы следующие директивы.
Название атрибута |
Описание |
ALIGN |
Определяет горизонтальное выравнивание всей таблицы в целом, может принимать значения LEFT, RIGHT или CENTER. |
WIDTH |
Определяет ширину всей таблицы и может принимать значение целого числа, если ширина таблицы указывается в пикселях, либо числа от 1 до 100 с символом «%», если ширина таблицы задается в процентах от ширины экрана. |
BORDER |
Указывает ширину обрамления столбцов и ячеек таблицы в пикселях. |
BORDERCOLOR |
Цвет границ таблицы. |
CELLSPACING |
Позволяет задать промежуток между ячейками в пикселях. |
CELLPADDING |
Промежуток между содержимым ячейки и рамкой вокруг ячейки. |
BGCOLOR |
Фоновый цвет таблицы. |
BACKGROUND |
Определяет путь к файлу, содержащему изображение, предназначенное для фона таблицы. |
BORDERCOLORLIGHT и BORDERCOLORDARK |
По умолчанию рамка отображается с использованием псевдотрехмерного оформления: она состоит из трех цветов – основного, ограничивающего все ячейки по периметру, а также светлого и темного, показывающих «грани» обрамления, благодаря которой рамка кажется зрителю выпуклой. Настроить цвета этих линий можно при помощи соответствующих параметров |
Таблица состоит из строк, определяемых тегами <TR></TR>.
Каждая строка, в свою очередь, состоит из ячеек, задаваемых тегами <TD></TD>.
Если к таблице требуется добавить заголовок (название таблицы), то между тегами <TABLE></TABLE> необходимо поместить конструкцию <CAPTION></CAPTION>.
Если первая строка таблицы является заголовочной (определяет заголовок каждого столбца таблицы), то в первой строке таблицы теги <TD></TD> заменяются тегами <TH></TH>.
В качестве атрибутов тега <TR> могут быть использованы следующие директивы.
Название атрибута |
Описание |
ALIGN |
Определяет горизонтальное выравнивание содержимого ячеек строки внутри ячеек. Может принимать значения LEFT, RIGHT или CENTER. |
VALIGN |
Определяет вертикальное выравнивание содержимого ячеек строки внутри ячеек. Может принимать TOP, MIDDLE, BOTTOM. |
В качестве атрибутов тега <TD> могут быть использованы следующие директивы.
Название атрибута |
Описание |
ALIGN и VALIGN |
Аналогичны соответствующим директивам тега <TR>. Применяются в ситуации, когда горизонтальное или вертикальное выравнивание в какой-либо ячейке отличается от выравнивания, заданного для всей строки |
HEIGHT и WIDTH |
Высота и ширина ячейки в пикселях, либо в процентах от высоты таблицы. |
COLSPAN |
Число столбцов, перекрываемых объединенной ячейкой. |
ROWSPAN |
Число строк, перекрываемых объединенной ячейкой. |
BORDERCOLOR |
Цвет границ ячейки. |
BGCOLOR |
Фоновый цвет ячейки. |
BACKGROUND |
Путь к графическому файлу, определяющему текстурную заливку ячейки. |
BORDERCOLORLIGHT и BORDERCOLORDARK |
Цвета рамки ячейки. |
Тег заголовка <CAPTION> может содержать атрибут ALIGN, задающий горизонтальное выравнивание заголовка. Атрибут может принимать значения TOP, BOTTOM, RIGHT, LEFT.
Тег <TH> может содержать атрибуты ALIGN, VALIGN, WIDTH, HEIGHT, COLSPAN, ROWSPAN, использование которых аналогично тегу <TR>.