- •Система адресации
- •Ip-адрес
- •Ip-адрес: 01111011110010000011001001100100
- •Адрес url
- •Сервисы Интернета
- •Общие сведения о языке html
- •Теги html
- •Структура документа html
- •Функциональные разделы документа
- •Создание списков
- •Создание таблиц
- •Задание 1. Ввод текста
- •Задание 2. Создание списков
- •Задание 3. Формирование таблиц
- •Гипертекстовые ссылки и якоря
- •Рисунки наWeb-страницах
- •Управление стилем шрифта
- •Форматирование фраз
- •Задание 1.Изменение оформления документа
- •Задание 2. Изменение оформления фрагментов документа
- •Задание 3. Создание гиперссылок
- •Задание 4. Использование графики
- •5. Создание фреймов
- •6. Использование фреймов
Задание 1. Ввод текста
Откройте текстовый редактор Блокнот (Пуск|Программы|Стандартные|Блокнот).
Занесите в документ парные теги <HTML>, <HEAD>, <TITLE>,<BODY>, определяющие структуру документа. В качестве заголовка документа используйте свою фамилию. Для ускорения последующей работы созданную заготовку документа целесообразно сохранить в файле (Заготовка.htm).
Введите текст. Заголовок первого уровня заключите между тегами <H1> </H1>. Заголовок второго уровня заключите между тегами <H2> </H2>. Запишите абзац текста используя тег <P>.
Введите в документ горизонтальную черту (тег <HR>) и расположите под ней две формулы (А1=20, А2=400). Каждую формулу запишите с новой строки без образования абзаца с помощью тега <BR>.
Сохраните документ под именем Lab1.htm в папке Lab_Html.
Запустите обозреватель Internet Explorer (или тот, который используете постоянно). Дайте команду Файл|Открыть. Щёлкните по кнопке Обзор и откройте сохранённый файл.
Ознакомьтесь с документом. Определите, как влияют теги HTML на отображение соответствующих частей документа. Выясните, как влияет изменение размеров окна на отображение документа.
Задание 2. Создание списков
Создайте новый документ и занесите в него перечень известных Вам браузеров, оформив их в виде нумерованного списка. Весь список поместите между тегами <OL> и </OL>, при записи отдельных пунктов используйте тег <LI>.
Сохраните документ под именем List1.htm.
Просмотрите документ в браузере. Выясните, как пронумерованы пункты списка.
Откройте в блокноте документ и добавьте в него перечень известных Вам типов принтеров, оформив их в виде маркированного списка. Весь список поместите между тегами <UL> и </UL>, при записи отдельных пунктов используйте тег <LI>. Задайте тип маркера атрибутом TYPE="square".
Введите в документ список определений (достаточно двух терминов). Весь список поместите между тегами <DL> и </DL>, термины пометьте тегом <DT>, а определения – <DD>.
Сохраните документ и просмотрите его в браузере. Убедитесь, что элементы маркированного списка помечены квадратиком.
Задание 3. Формирование таблиц
Создайте таблицу в соответствии с заданием.
|
Заголовок ячеек | |
|
Ячейка 1 |
Ячейка 2 |
|
Ячейка 3 |
Ячейка 4 |
Под таблицу отведите 60% ширины экрана, обрамление выполните линией толщиной 2. Заголовок (Таблица) поместите по центру над таблицей с помощью тега <CAPTION>. Сохраните документ в файле Tabl.htm.
<html>
<head>
<title>Фамилия</title>
</head>
<body>
<table align="center" width="60%" cellspacing="2" cellpadding="2" border="2">
<caption align="center">Таблица</caption>
<tr>
<th colspan="2" align="center">Заголовок ячеек</th>
</tr>
<tr>
<td align="center">Ячейка 1</td>
<td align="center">Ячейка 2</td>
</tr>
<tr>
<td>Ячейка 3</td>
<td align="right">Ячейка 4</td>
</tr>
</table>
</body>
</html>
Просмотрите документ в обозревателе. Измените ширину окна обозревателя и установите, как при этом изменяется внешний вид таблицы.
Практическое занятие 3. Оформление HTML-страниц
Основные приёмы оформления HTML-страниц
Гипертекстовые ссылки и якоря
Для создания гиперссылок используются теги <A> и </A>. Обязательным является атрибут HREF=. Его значением является адрес URL, на который указывает ссылка. Текст ссылки записывается между тегами <A> и </A>. При просмотре документа в браузере, текст ссылки обычно подчёркивается и отображается синим цветом. Щелчок по ссылке обеспечивает переход по ссылке, заданной адресом URL.
Если Web-страница, на которую указывает ссылка, располагается на другом Web-узле, то значением атрибута HREF= должен быть полный адрес URL документа, включая название протокола и Web-узла. Такие ссылки называют внешними.
Если ссылка указывает на другую страницу того же самого Web-узла, то достаточно указать относительный путь поиска документа. В этом случае создаётся внутренняя ссылка. Использовать внутренние ссылки очень удобно, так как при переносе Web-узла целиком на другой сервер, не требуется вносить изменения в отдельные документы.
Гипертекстовые ссылки могут указывать на определённое место внутри страницы. Нужное место документа отмечается якорем. Якорь использует теги <A> и </A>, но вместо атрибута HREF= для него обязательным является атрибут NAME=. Значением этого атрибута является имя якоря. Оно может состоять только из латинских букв и цифр и не должно содержать пробелов.
Для ссылки на установленный якорь надо указать имя якоря в конце адреса URL после имени документа, отделив его символом #.
Пример 3
<html>
<head>
<title>Ссылки и якоря</title>
</head>
<body>
Новые версии операционной системы и самые свежие драйверы можно найти на Web-узле компнии
<a href="http://www.microsoft.com">Microsoft</a>
<p>А теперь можно перейти к <a href="my.htm">моей личной странице.</a>
<p>О том как связаться с автором, рассказано в <a href="#adress">конце этой страницы.</a>
Здесь располагается основное содержание страницы.<br>
<a name="adress">Адрес электронной почты</a>
</body>
</html>