Проведите эксперимент, как будет выглядеть ваша страница, насколько удобно читать текст с разными фоновыми изображениями

Получить практические навыки при создании основы html-страницы;

Познакомиться с различными способами форматирования в html-документе;

Научиться создавать различные виды гиперссылок;

Выработать навык художественно-эстетического вкуса при оформлении Web-документа

Ход работы:

Задание №1

1. Создайте html-страницу, содержащую ссылки на популярные ресурсы. Все ссылки должны быть сгруппированы в три раздела:

· web-сервисы (ссылки на почтовые, поисковые сервера, чат и т.п.);

· внутренние ресурсы (ссылки на учебники, статьи, скаченные из сети интернет);

· любимые сайты (ссылки на ваши любимые ресурсы сети).

2. Оформите внешний вид страницы, разработайте цветовую схему. Сохраните ваш документ под именем index.htm, сделайте эту страницу – стартовой

3. Добавьте к своей стартовой странице раздел фотоальбом, в котором разместите несколько (не более пяти) ваших любимых фотографий. Все фотографии должны быть двух видов: большие размером 600 на 400 пикселей и маленькие размером 120 на 90 пикселей. Уменьшение фотографий выполните в любом известном вам редакторе, например ACDSee.

4. Сохраните фотографии в папке с файлом index.htm, дав им однотипные имена: 1.jpg, 2 jpg, … для маленьких, и 1_big.jpg, 2_big.jpg для больших.
Ссылки на маленькие фотографии добавьте в файл index.htm.

5. Сделайте каждую маленькую фотографию ссылкой, то есть при щелчке на ней она должна открывать новое окно с увеличенной копией фотографии. Для этого она должна иметь следующий код:
<a href =”1_big.jpg” target=”new”><img src="1.jpg" border=”0” width=”120” heght=”90”></a>

Обратите внимание, что тег <a> имеет параметр target=”new”>. Благодаря нему увеличенная фотография откроется в новом окне.

Добавление фона к странице. Будьте осторожны с фоновыми картинками. Во-первых, они должны быть невелики по размеру, чтобы страница быстро загружалась. Во-вторых, они должны иметь свойство текстуры, то есть при выкладывании таких картинок не должно быть видно швов, рисунки должны плавно перетекать друг в друга. И, в третьих, помните, что читать текст поверх текстур очень неудобно.

7. Найдите в сети интернет фоновые рисунки (например, на сайте http://www.woweb.ru/index/0-3) обратите внимание, что каждый файл - это небольшой рисунок, который может продолжаться в стороны, создавая фоновое изображение «без швов».

8. Добавьте для тега <body> следующий параметр:
<body background="img.gif">. Фоновый рисунок должен располагаться в той же папке, что и файл index.htm и называться img.gif.

Проведите эксперимент, как будет выглядеть ваша страница, насколько удобно читать текст с разными фоновыми изображениями.

Задание №2

1. Создайте страницу, содержащую следующий код:

<td colspan=”2” align=”center”>группа 1 </td>

</tr>

<tr>

<td width=”100” rowspan=”2” valign=”middle”>группа 2 </td>

</tr>

<tr>

</tr>

</table>

Контрольные вопросы:

1. Какова структура HTML-документа? Перечислите теги заголовка документа.

Web-страница помещается в контейнер <HTML></HTML>и.состоит из двух частей: заголовка и отображаемого в браузере содержания.

Заголовок страницы помещается в контейнер <HEAD></HEAD>. Заголовок содержит название страницы, которое помещается в контейнер <TITLE></TITLE> и при просмотре отображается в верхней строке окна браузера.

2. Почему важно делать описание страницы в метатегах?

В раздел заголовка Web-страницы могут быть добавлены информационные одиночные тэги <META>, имеющие атрибуты NAME, HTTP-EQUIV и CONTENT.

Мета тэг может информировать браузер о кодировке Web-страницы:

Мета тэги используются поисковыми системами для индексирования содержания, ключевых слов и автора Web-страницы:

Отображаемое в браузере содержание страницы помещается в контейнер <BODY></BODY>.

3. Перечислите теги форматирования web-документа.

<h></h> - Эти теги выделяют текст в виде заголовков. Тег - тег принудительного перевода строки. Текст, после этого тега начинается с новой строки.

Теги разделяют текст на абзацы. Теги <cite></cite> используются для логического выделения названий книг, статей и цитат.

Теги <dfn></dfn> используются для выделения определений.

Тегами и выделяют важные фрагменты текста. Последний не рекомендуется к употреблению. , - оба используются для выделения важных фрагментов текста, но предпочтительнее использовать первый. <ins></ins>, - оба используются для подчеркивания важных фрагментов текста. <kbd></kbd>, <samp></samp>, <tt></tt>- Выводят текст моноширинным шрифтом. Теги <center></center> предназначен для выравнивания всех элементов внутри него по центру окна браузера.

4. Как задать гиперссылки на web-странице? Какие виды гиперссылок вы знаете?

Гиперссылки можно разделить на абсолютные, относительные и внутренние.

Абсолютные ссылки используются в том случае, если мы хотим перейти на документ, адрес которого неизменен Это, прежде всего, ссылки на внешние интернет-ресурсы, например, данный фрагмент

<a href=”http://www.ya.ru”>Спросить у Яндекса</a>

Для внутренних ресурсов необходимо использовать относительные ссылки. В них дорога к искомому документу считается относительно от того места, где вы сейчас находитесь, например:

<a href=”../index.htm”> в начало </a>.

Внутренние ссылки используются для быстрого перемещения внутри документа. Для таких перемещений, во-первых, нужно создать внутри html-документа «именованные якоря».

5. Как вставляется изображение на web-страницу? Какие форматы графических файлов целесообразно использовать на web-странице и почему?

Для добавления изображения в документ применяется тег <img>, его атрибут src определяет путь к графическому файлу, который должен быть в формате GIF, PNG или JPEG. Также для тега <img> необходимо указать обязательный атрибут alt, он описывает альтернативный текст видимый в процессе загрузки изображения или при отключении картинок в браузере.

6. Для каких целей используются таблицы в сети Интернет?

Таблицы – очень важный элемент web-страниц, они выполняют две функции. Первая - оформление табличной информации: различные расписания, графики дежурств, результаты экспериментов и т.п. А второе - позиционирование элементов страницы.

В классическом HTML нет средств для точного расположения объектов на странице.

7. Как определяются строки и ячейки таблицы?

Каждая строка начинается тегом <TR> и завершаться тегом </TR>. Если в таблице содержатся две пары тегов <TR> и </TR>, то это означает, что таблица состоит из двух строк. Отдельная ячейка в строке обрамляется парой тегов <TD> и </TD> или <TH> и </TH>. Тег <TH> используется обычно для ячеек-заголовков, тег <TD> для ячеек-данных. Различие в использовании заключается в типе шрифта, используемого по умолчанию, и в расположении данных внутри ячейки. Теги <TD> и <TH> должны содержаться внутри тега <TR>. Число тегов <TD> и </TD> определяет число ячеек в строке. Строка с тремя парами тегов <TD> и </TD> будет содержать три ячейки.

8. Какие параметры у тегов таблицы задают положение объекта внутри ячейки?

Для форматирования данных внутри ячейки таблицы предусмотрены ряд параметров. Параметр горизонтального выравнивания может принимать значения LEFT, RIGHT, CENTER (по умолчанию LEFT для <TD> и CENTER для <TH>). Параметр вертикального выравнивания VALIGN может принимать значения:

TOP - по верхнему краю,

BOTTOM - по нижнему краю,

MIDDLE - посередине,

BASELINE - по базовой линии.

По умолчанию происходит выравнивание посередине. Задание параметра выравнивания в теге <TR> определяет выравнивание для всех ячеек данной строки, при этом в каждой отдельной ячейке строки могут быть определены свои параметры, переопределяющие параметры, заданные в теге <TR>.

9. Почему важно ставить в html-коде реальные параметры высоты и ширины изображения?

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