2015-05-10
492
Методические указания
1. При изучении конструкций языка HTML можно использовать любой текстовый редактор. Для получения HTML файла, сохраняйте свои изменения как текстовые, для файла используйте расширение *.htm или *.html.
2. Создаваемые файлы необходимо тестировать в основных браузерах Internet Explorer, Mazilla Firefox, Opera.
3. Отлаженные файлы необходимо сохранять в отдельном каталоге.
4. По окончанию работы сохраните все созданные файлы на своих носителях.
Порядок выполнения работ
Задание 1.
1. Запустите программу "Блокнот" (notepad.exe). Создайте файл с именем и расширением <Ваша фамилия>.htm.
2. В этом файле наберите следующий текст:
<HTML> <HEAD> <TITLE>Лабораторная работа №1.<Ваша фамилия></TITLE> </HEAD><BODY> Так выглядит простейший файл HTML.</BODY></HTML>3. Наберите по очереди параметры тега BODY и проверьте результат:
| Атрибут BODY | Назначение | |
| BACKGROUND | Указывает на URL-адрес изображения или имя файла, которое используется в качестве фонового. На экран выводятся повторяющиеся копии картинки, поверх которых показывается текст. Для фона желательно подбирать неконтрастные изображения | |
| BGCOLOR | Определяет цвет фона документа | |
| ALINK | Определяет цвет активной ссылки. | |
| VLINK | Определяет цвет уже просмотренной ссылки. | |
| LINK | Определяет цвет еще не просмотренной ссылки. | |
| ТЕХТ | Определяет цвет текста. | |
| LEFTNARGIN | Устанавливает границу левого поля в пикселях. | |
| TOPMARGIN | Устанавливает границу верхнего поля в пикселях. | |
| RIGHTMARGIN | Устанавливает границу правого поля в пикселях. | |
| BOTTOMMARGIN | Устанавливает границу нижнего поля в пикселях. | |
4. Премините теги <BR>, <I>, <B>, <U>, <S>:
<I>Ваше Имя</I><BR>
<B>Ваша Фамилия</B><BR>
<U>Ваше Отчество</U><BR>
<S>Ваша группа</S><BR>
Попробуйте группировать теги. Например:
<U><B><I>ФИО</I></B></U><BR>
5. Используйте тег <FONT>:
<FONT SIZE=3 FACE="Verdana, Arial, Helvetica" COLOR="GREEN">ФИО</FONT>6. Для проведения горизонтальной линии используется тег <HR>
| Атрибуты <HR> | Назначение |
| ALIGN | Выравнивает по краю или центру; имеет значения LEFT, CENTER,RIGHT. |
| WIDTH | Устанавливает длину линии в пикселях или процентах от ширины окна браузера; в последнем случае добавляется символ % и значение обязательно заключается в кавычки |
| SIZE | Устанавливает ширину линии в пикселях. |
| NOSHADE | Отменяет рельефность линии. |
| COLOR | Указывает цвет линии. Используется формат RGB или стандартное имя. |
7. Сделайте ссылку на страничку http://www.google.com.ua
| Имя атрибута | Возможные значения | Описание |
| HREF | URL | Задание адреса гиперссылки в URL формате |
| NAME | задает символическую метку внутри документа, для переходов в это место документа | |
| TITLE | Определяет заголовок, который появляется когда мышь "находит" на ссылку или во время загрузки документа. | |
| TARGET | window, _blank, _parent, _self, _top | Определяет место (окно) загрузки документа. |
<A HREF="http://www.google.com.ua">Самая лучшая поисковая система</A>
8. Вставьте картинку в ваш документ. Для вставки в текст картинки используется одиночный тег <IMG SRC ="адрес графического файла"> с одним обязательным атрибутом SRC. Адрес задается так же, как и адрес ссылки. Вставлять изображения можно следующих форматов: jpg, gif, png, bmp.
<IMG SRC="primer.jpg" ALT="Pic Primer" WIDTH=110 HEIGHT=168 ALIGN=RIGHT>9. Измените вид странички следующим образом:
· Задайте отличные от установленных по умолчанию цвета: текста, фона и гиперссылок. Задайте отступ для строки от верхнего и левого края окна браузера. Сделайте так, чтобы цвет второго абзаца был отличен от первого.
· Вставьте между абзацами картинку и обведите её рамкой с толщиной более 1 пикселя. Установите текст второго абзаца справа от картинки на определённом расстоянии.
· Добавьте после абзаца с картинкой и до гиперссылки красную нерельефную линию шириной в 2 пикселя и длиной 80% от ширины окна браузера, выровняв её по середине странички.
· Просмотрите свою страницу в двух различных браузерах и сделайте соответствующие выводы.
10. В структуре после открывающего тега <HEAD>, вставьте следующую строку <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />, данная строка используется браузерами для определения кодировки, чтобы русский текст отобразился корректно, а не иероглифами.
