|
Основные возможности
в примерах
|
Реализация
|
|
Использование графических изображений
|
|
Пример 1. Средствами приложения Блокнот создайте начальную страницу учебного сайта. Добавьте в основную область документа заголовок 1-го уровня “HTML в примерах”, выровненный по центру. После заголовка вставьте горизонтальную линию шириной 80% и выровненную по центру. Под горизонтальной линией поместите следующий текст:
Общая структура документа HTML
Определение цветовой схемы документа HTML
Разбиение текста на строки и абзацы
Выравнивание текста
Форматирование текста
Физическое
Логическое
Определение размера, шрифта и цвета текста
Вставка графических изображений
Создание гиперссылок
Сохраните документ под именем index.htm в папке site. Просмотрите его в браузерах Microsoft Internet Explorer, Mozilla, Opera.
|
- Откройте приложение Блокнот.
- Создайте макет документа HTML:
<html>
<head>
<title>Основные возможности языка HTML</title>
</head>
<body>
</body>
</html>
- Добавьте в основную область документа заголовок 1-го уровня “HTML в примерах”, выровненный по центру:
<h1 align=center>HTML в примерах</h1>
- После заголовка вставьте горизонтальную линию шириной 80% и выровненную по центру:
<hr width=80% align=center color=navy>
(цвет линии задайте по собственному усмотрению)
- Под горизонтальной линией поместите следующий текст:
Общая структура документа HTML<br>
Определение цветовой схемы документа HTML<br>
Разбиение текста на строки и абзацы<br>
Выравнивание текста<br>
Форматирование текста:<br>
Физическое<br>
Логическое<br>
Определение размера, шрифта и цвета текста<br>
Вставка графических изображений<br>
Создание гиперссылок<br>
- Сохраните документ под именем index.htm в папке site. Не закрывайте приложение Блокнот.
- Просмотрите документ в браузерах Microsoft Internet Explorer, Mozilla, Opera.
|
|
Пример 2. Определите цветовую схему (включая фоновый рисунок) начальной страницы сайта. Просмотрите изменения в браузерах.
|
- Скопируйте файл с фоновым изображением из папки ./Рисунки/Фон в папку site/images.
- Определите цветовую схему (включая фоновый рисунок) начальной страницы сайта: в приложении Блокнот добавьте в тег <body> необходимые атрибуты
<body background="images/имя_файла" bgcolor="цвет_фона" text="цвет_текста">
(цвета задайте по собственному усмотрению).
- Сохраните изменения и просмотрите документ в браузерах.
- В браузере Microsoft Internet Explorer отключите отображение графики: Сервис / Свойства обозревателя… / вкладка Дополнительно / в блоке Мультимедиа снимите флажок Отображать рисунки / ОК.
- Обновите просматриваемый файл: кнопка Обновить. Обратите внимание на то, что фоновый рисунок не отображается. Фоновый цвет для документа теперь тот, который указан атрибутом bgcolor тега <body>.
- Подключите отображение графики в браузере Microsoft Internet Explorer.
|
- размер вертикальных и горизонтальных пустых полей вокруг рисунка 100 пикселов;
- расположение изображения справа от текста;
- альтернативный текст «Здесь находится рисунок»;
- отображение вокруг рисунка рамки толщиной в 3 пиксела.
Просмотрите созданный документ в браузерах.
|
- Скопируйте графический файл в папку site/images.
- Создайте макет документа HTML:
<html>
<head>
<title>Вставка графических изображений</title>
</head>
<body>
</body>
</html>
- Cохраните документ под именем picture.htm в папке site/html.
- Добавьте в основную область документа рисунок и текст:
<img src="../files/120/../images/имя_файла">
Это пример вставки в документ HTML изображения c большими горизонтальными и вертикальными пустыми полями вокруг него.
- Сохраните изменения и просмотрите документ в браузерах.
- Установите размер вертикальных и горизонтальных пустых полей вокруг рисунка 100 пикселов: перейдите в приложение Блокнот / добавьте в тег <img> атрибуты vspace и hspace / присвойте каждому атрибуту значение 100.
- Установите расположение изображения справа от текста: добавьте в тег <img> атрибут align=right
Общий вид тега img:
<img src="../files/120/../images/имя_файла" vspace=100 hspace=100 align=right>
- Сохраните изменения и просмотрите документ в браузерах.
- Задайте альтернативный текст «Здесь находится рисунок»: добавьте в тег <img> атрибут alt=”Здесь находится рисунок”.
Общий вид тега img:
<img src="../images/имя_файла" vspace=100 hspace=100 align=right alt=”Здесь находится рисунок”>
- Сохраните изменения и просмотрите документ в браузерах. Обратите внимание на всплывающую подсказку, которая появляется при наведении указателя мыши на рисунок в браузере Microsoft Internet Explorer. Отключите отображение графики. Обновите документ. Посмотрите, какой текст выводится вместо рисунка. Снова подключите отображение графики.
- Задайте отображение вокруг рисунка рамки толщиной в 3 пиксела: добавьте в тег <img> атрибут border=3.
Общий вид тега img:
<img src="../images/имя_файла" vspace=100 hspace=100 align=right alt=”Здесь находится рисунок” border=3>
- Сохраните изменения и просмотрите документ в браузерах.
|
|
Пример 4. Вставьте в документ picture.htm еще два изображения из того же графического файла: одно с размерами 150 на 150 пикселов, другое с размерами 50% высоты окна и 30% ширины окна. Сравните вид всех изображений в браузерах.
|
- Вставьте в документ picture.htm изображение из того же графического файла с размерами 150 на 150 пикселей: перейдите в приложение Блокнот / добавьте еще один тег <img> с атрибутами height=150 и width=150:
<img height=150 width=150 src=”../images/имя_файла”>
- Вставьте в документ изображение из того же графического файла с размерами 50% высоты окна и 30% ширины окна: добавьте еще один тег <img> с атрибутами height=50% и width=30%:
<img height=50% width=30% src=”../images/имя_файла”>
- Сохраните изменения и просмотрите документ в браузерах. Измените размеры окна браузера. Обратите внимание на изменение размеров последнего рисунка.
|
|
Создание гиперссылок
|
|
Пример 5. Добавьте на начальную страницу учебного сайта index.htm ссылку на документ document.htm, используя в качестве указателя ссылки текст «Общая структура документа HTML».
Аналогичным образом преобразуйте остальные фрагменты текста в гиперссылки на соответствующие документы. Сохраните изменения и просмотрите документ в браузерах. Проверьте работоспособность ссылок.
|
- Добавьте на начальную страницу учебного сайта index.htm ссылку на документ document.htm, используя в качестве указателя ссылки текст «Общая структура документа HTML»: откройте документ index.htm в приложении Блокнот / заключите указанный текст между тегами <a href=”html/document.htm”>…</a>:
<a href=”html/document.htm”>Общая структура документа HTML</a>
- Сохраните изменения и просмотрите документ в браузерах. Проверьте работоспособность ссылки.
- Аналогичным образом преобразуйте остальные фрагменты текста в гиперссылки на указанные документы:
Разбиение текста на строки и абзацы lines.htm
Выравнивание текста align.htm
Физическое script.htm
Логическое logic.htm
Определение размера, size.htm
шрифта и цвета текста colors.htm
Вставка графических изображений picture.htm
- Сохраните изменения в документе, просмотрите документ в браузерах и перейдите по ссылкам. Проверьте работоспособность ссылок.
|
|
Пример 6. Определите цветовую схему для гиперссылок начальной страницы сайта. Сохраните изменения и просмотрите документ в браузерах.
|
- Определите цветовую схему для гиперссылок начальной страницы сайта: в приложении Блокнот добавьте в тег <body> атрибуты link, vlink, alink:
<body background="images/имя_файла" bgcolor="цвет_фона" text="цвет_текста" link="цвет_непросмотренной_ссылки" vlink="цвет_просмотренной_ссылки" alink="цвет_просматриваемой_ссылки">
(цвета задайте по собственному усмотрению).
- Сохраните изменения и просмотрите документ в браузерах.
|
|
Пример 7. Добавьте в документ document.htm ссылку на начальную страницу сайта, используя в качестве указателя ссылки графическое изображение. Сохраните изменения и просмотрите документ в браузерах. Проверьте работоспособность ссылки. Отмените отображение рамки для рисунка. Просмотрите измененный документ в браузерах.
|
- Скопируйте графический файл 002.gif в папку site/images из папки \\Dataserv\Web-дизайн/Рисунки/Кнопки.
- Откройте документ document.htm в приложении Блокнот / в конце основной области документа вставьте рисунок: <img src=”../images/002.gif” alt=”К началу”>
- Добавьте в документ ссылку на начальную страницу сайта, используя в качестве указателя ссылки графическое изображение: заключите рисунок между тегами <a href="../index.htm">…</a>:
<a href="../index.htm"><img src=”../images/002.gif” alt=”К началу”></a>
- Сохраните изменения и просмотрите документ в браузерах. Проверьте работоспособность ссылки.
- Отмените отображение рамки для рисунка: перейдите в приложение Блокнот / добавьте в тег <img> атрибут border=0
- Сохраните изменения в документе и просмотрите документ в браузерах.
|
|
Пример 8. Добавьте на начальную страницу сайта index.htm ссылку на заголовок Web-страницы, используя в качестве указателя ссылки текст «Вверх». Сохраните Web-страницу. Просмотрите страницу в браузерах и проверьте работоспособность ссылки.
|
- Пометьте заголовок Web-страницы закладкой с именем head: откройте документ index.htm в приложении Блокнот / заключите заголовок между тегами <a name=head>…</a>:
<a name=head><h1 align=center>HTML в примерах</h1></a>
- Добавьте на начальную страницу сайта ссылку на заголовок Web-страницы, используя в качестве указателя ссылки текст «Вверх»: в конце основной области документа введите текст Вверх и заключите его между тегами <a href="#head">Вверх</a>.
- Сохраните изменения в документе, просмотрите документ в браузерах и проверьте работоспособность ссылки (при необходимости вручную уменьшите размеры окна браузера).
|
|
Пример 9. Добавьте на начальную страницу сайта index.htm ссылку сайт Института современных знаний (www.isz.by). Преобразуйте ссылку на ИСЗ таким образом, чтобы она открывалась в новом окне. Просмотрите страницу в браузерах и проверьте работоспособность ссылки.
|
- Перейдите в приложение Блокнот / перед ссылкой Вверх введите текст Информацию о курсах по изучению HTML можно получить на сайте ИСЗ<br>.
- Добавьте на начальную страницу сайта ссылку сайт ИСЗ: заключите название организации между тегами
<a href="http://www.isz.by">ИСЗ</a>
- Сохраните изменения в документе, просмотрите документ в браузерах и проверьте работоспособность ссылки.
- Преобразуйте ссылку на ИСЗ таким образом, чтобы она открывалась в новом окне: перейдите в приложение Блокнот / добавьте в тег <a > атрибут target="_blank":
<a href="http://www.isz.by" target="_blank">ИСЗ </a>
- Сохраните изменения в документе, просмотрите документ в браузерах и проверьте работоспособность ссылки.
|
|
Пример 10. Добавьте на начальную страницу сайта index.htm ссылку на ваш адрес электронной почты, используя в качестве указателя ссылки графическое изображение. Отмените отображение рамки для рисунка. Просмотрите страницу в браузерах и проверьте работоспособность ссылки.
|
- Скопируйте графический файл кнопки в папку site/images.
- Перейдите в приложение Блокнот / после ссылки Вверх вставьте тег конца строки <br> / вставьте рисунок: <img src=”images/knopka.gif” alt=”E-mail” border=0>
- Добавьте в документ ссылку на ваш адрес электронной почты, используя в качестве указателя ссылки графическое изображение: заключите рисунок между тегами <a href="mailto:ivanov@mail.ru">…</a>
- Сохраните изменения в документе, просмотрите документ в браузерах и проверьте работоспособность ссылки.
- Преобразуйте ссылку на адрес электронной почты таким образом, чтобы при создании нового письма автоматически прописывалась тема сообщения: перейдите в приложение Блокнот / в тег <a> внесите следующие изменения: <a href = "mailto:ivanov@mail.ru?subject=From site visitor" >…</a>
- Сохраните изменения в документе, просмотрите документ в браузерах и проверьте работоспособность ссылки.
|
