Проведите эксперимент, как будет выглядеть ваша страница, насколько удобно читать текст с разными фоновыми изображениями
Получить практические навыки при создании основы 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. Создайте страницу, содержащую следующий код:
<table width=”300” border=”1” cellpadding=”0” cellspacing=”0”>
<tr bgcolor=”#999999”>
<td width=”100”> </td>
<td colspan=”2” align=”center”>группа 1 </td>
</tr>
<tr>
<td width=”100” rowspan=”2” valign=”middle”>группа 2 </td>
<td width=”100” align=”center”>1</td>
<td width=”100” align=”center”>2</td>
</tr>
<tr>
<td width=”100” align=”center”>3</td>
<td width=”100” align=”center”>4</td>
</tr>
</table>
Контрольные вопросы:
1. Какова структура HTML-документа? Перечислите теги заголовка документа.
Web-страница помещается в контейнер <HTML></HTML>и.состоит из двух частей: заголовка и отображаемого в браузере содержания.
Заголовок страницы помещается в контейнер <HEAD></HEAD>. Заголовок содержит название страницы, которое помещается в контейнер <TITLE></TITLE> и при просмотре отображается в верхней строке окна браузера. 
2. Почему важно делать описание страницы в метатегах?
В раздел заголовка Web-страницы могут быть добавлены информационные одиночные тэги <META>, имеющие атрибуты NAME, HTTP-EQUIV и CONTENT.
Мета тэг может информировать браузер о кодировке Web-страницы:
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
Мета тэги используются поисковыми системами для индексирования содержания, ключевых слов и автора Web-страницы:
<meta name="Description" content="">
<meta name="Keywords" content="">
<meta name="Author" content="">
Отображаемое в браузере содержание страницы помещается в контейнер <BODY></BODY>.
3. Перечислите теги форматирования web-документа.
<h></h> - Эти теги выделяют текст в виде заголовков. Тег <br> - тег принудительного перевода строки. Текст, после этого тега начинается с новой строки.
Теги <p></p> разделяют текст на абзацы. Теги <cite></cite> используются для логического выделения названий книг, статей и цитат.
Теги <dfn></dfn> используются для выделения определений.
Тегами <em></em> и <i></i> выделяют важные фрагменты текста. Последний не 
рекомендуется к употреблению. <strong></strong>, <b></b> - оба используются для выделения важных фрагментов текста, но предпочтительнее использовать первый. <ins></ins>, <u></u> - оба используются для подчеркивания важных фрагментов текста. <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-коде реальные параметры высоты и ширины изображения?
Нужно уменьшать все рисунки до того размера, какими они будут на странице, а в параметрах высоты и ширины ставить истинные размеры такого уменьшенного изображения, иначе загружаться будет исходное фото, а это ненужный трафик и долгое ожидание загрузки страницы.
 |