Практическая работа №1
Тема: «Создание Web-страницы средствами языка гипертекстовой разметки»
Цель:
1. Получить практические навыки при создании основы html-страницы;
2. Познакомиться с различными способами форматирования в html-документе;
3. Научиться создавать различные виды гиперссылок;
Выработать навык художественно-эстетического вкуса при оформлении Web-документа
Прежде чем приступить к созданию web-страниц, необходимо иметь в виду:
1. Все создаваемые файлы должны иметь только латинские имена, без использования символов пробелов и спецсимволов. Файлы должны иметь расширения htm или html.
2. Все файлы, относящиеся к одному проекту: html-файлы, графика, flash-ролики должны располагаться в одном каталоге.
Структура Web-страницы. Большая часть тэгов образует контейнер, состоящий из открывающего и закрывающего тэгов. Тэги можно набирать как заглавными, так и строчными буквами.
Web-страница помещается в контейнер <HTML></HTML> и.состоит из двух частей: заголовка и отображаемого в браузере содержания.
Заголовок страницы помещается в контейнер <HEAD></HEAD>. Заголовок содержит название страницы, которое помещается в контейнер <TITLE></TITLE> и при просмотре отображается в верхней строке окна браузера.
Также в заголовок помещаются не отображаемые при просмотре мета-тэги, задающие кодировку страницы для ее правильного отображения в браузере, а также содержащие описание и ключевые слова страницы, которые в первую очередь просматривают роботы поисковых систем.
Мета-тэги. В раздел заголовка 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>.
Гиперссылки можно разделить на абсолютные, относительные и внутренние.
Абсолютные ссылки используются в том случае, если мы хотим перейти на документ, адрес которого неизменен Это, прежде всего, ссылки на внешние интернет-ресурсы, например, данный фрагмент
<a href=”https://www.ya.ru”>Спросить у Яндекса</a>
Для внутренних ресурсов необходимо использовать относительные ссылки. В них дорога к искомому документу считается относительно от того места, где вы сейчас находитесь, например:
<a href=”../index.htm”> в начало </a>.
Внутренние ссылки используются для быстрого перемещения внутри документа. Для таких перемещений, во-первых, нужно создать внутри html-документа «именованные якоря ».
Рисунок 1- Схема внутренних ссылок.
Они помечаются следующим фрагментом кода: <a name="1"></a>.
Чтобы совершить переход в произвольном месте страницы, нужно добавить следующую ссылку: <a href="#1">ссылка</a>. Знак решетка, сообщит браузеру, что переход совершается внутри страницы.
Ход работы:
Задание №1
1. Создайте html-страницу, содержащую ссылки на популярные ресурсы. Все ссылки должны быть сгруппированы в три раздела:
· web-сервисы (ссылки на почтовые, поисковые сервера, чат и т.п.);
· внутренние ресурсы (ссылки на учебники, статьи, скаченные из сети интернет);
· любимые сайты (ссылки на ваши любимые ресурсы сети).
Оформите внешний вид страницы, разработайте цветовую схему. Сохраните ваш документ под именем index.htm, сделайте эту страницу – стартовой
Добавьте к своей стартовой странице раздел фотоальбом, в котором разместите несколько (не более пяти) ваших любимых фотографий. Все фотографии должны быть двух видов: большие размером 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. Найдите в сети интернет фоновые рисунки (например, на сайте https://www.woweb.ru/index/0-3) обратите внимание, что каждый файл - это небольшой рисунок, который может продолжаться в стороны, создавая фоновое изображение «без швов».
8. Добавьте для тега <body> следующий параметр:
<body background="img.gif">. Фоновый рисунок должен располагаться в той же папке, что и файл index.htm и называться img.gif.
Проведите эксперимент, как будет выглядеть ваша страница, насколько удобно читать текст с разными фоновыми изображениями.
Вставка таблиц
Таблицы – очень важный элемент web-страниц, они выполняют две функции. Первая - оформление табличной информации: различные расписания, графики дежурств, результаты экспериментов и т.п. А второе - позиционирование элементов страницы.
В классическом HTML нет средств для точного расположения объектов на странице.
Рисунок 2- Пример сложного дизайна страницы
Рисунок 3- Каркас страницы представлен из четырех таблиц.
Задание №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>
2. Проведите исследования «Что произойдет с таблицей, если:
а) изменение ширины
Измените ширину только одной ячейки в колонке. Например, в восьмой строке увеличьте параметр width=»200». Изменится ли ширина всей колонки?
А что произойдет, если уменьшить значение параметра width=»50». Уменьшится ли ширина всей колонки? Как вы объясните происходящее смещение цифры «1»?
b) таблицы «фиксированные» и «резиновые»
В приведенном примере сумма ширины каждой колонки равна ширине таблицы, а что произойдет, если ширину таблицы сделать больше? Измените в первой строке параметр на width=»500».
Сделайте вашу таблицу «резиновой», измените в первой строке значение параметра width=»300» на width=»50%». Посмотрите, что будет происходить с таблицей при изменении ширины экрана браузера.
c) добавление фонового изображения
Добавьте для первой строки вашей таблицы фоновый рисунок. Во второй строке добавьте параметр background = “fon.gif” (где fon.gif имя вашего фонового рисунка). Удивительно, что фоновый рисунок у первой строки не появился, но еще более удивительно, что если мы откроем полученный html-документ в визуальном редакторе то в нем мы фон увидим!
Для того чтобы фон был виден в браузере, параметр background = “fon.gif” должен задаваться в каждой ячейке строки (строки 3 и 4 в нашем примере).
3. Примените полученные знания для создания более сложного вида вашей стартовой страницы. Разбейте ссылки по колонкам:
Рисунок 3- Стартовая страница с ссылками, разбитыми на колонки.
4. Сохраните понравившуюся вам страницу в сети интернет. Проанализируйте ее html-код. Используются ли в ней таблицы? Начертите схему табличного каркаса данной страницы.
5. Создайте табличный каркас для данного дизайн-макета (рисунок 4):
Рисунок 4- Выделение табличного каркаса в дизайн-макете.
Контрольные вопросы:
1. Какова структура HTML-документа? Перечислите теги заголовка документа.
2. Почему важно делать описание страницы в метатегах?
3. Перечислите теги форматирования web-документа.
4. Как задать гиперссылки на web-странице? Какие виды гиперссылок вы знаете?
5. Как вставляется изображение на web-страницу? Какие форматы графических файлов целесообразно использовать на web-странице и почему?
6. Для каких целей используются таблицы в сети Интернет?
7. Как определяются строки и ячейки таблицы?
8. Какие параметры у тегов таблицы задают положение объекта внутри ячейки?
9. Почему важно ставить в html-коде реальные параметры высоты и ширины изображения?
10. В каком случае проявляется параметр размера границы у изображений?