хэ. Создание простейших файлов html
 Скачать 256.01 Kb.
|
|
Задание 1. Создание простейших файлов HTML. 1. Создайте в своем каталоге папку KURS, в которой мы будем сохранять сконструированные Web-страницы. 2. Запустите программу Блокнот (Notepad). 3. Наберите в окне редактора простейший текст файла HTML:  4. Сохраните файл под именем RASP.HTM. 5. Для просмотра созданной Web-страницы загрузите браузер Microsoft Internet Explorer. 6. Выполните команду Файл (File), Открыть (Open), Просмотр (Обзор, Browse), найдите в папке KURS файл RASP.HTM и загрузите его. Убедитесь, что название Web-страницы (“Учебный файл HTML”) отразилось в верхней, статусной, строке браузера. На экране вы увидите результат своей работы,изображённый на рис.1.  Рис.1. Задание 2. Управление расположением текста на экране. 1. При необходимости выполните пункты 5 — 6 задания 1. 2. Откройте первоисточник созданной вами Web-страницы, выполнив команду Вид (View), Источник (В виде HTML). Откроется окно программы Блокнот, в котором ваша Web-страница будет представлена в командах HTML. 3. Внесите изменения в текст файла HTML, расположив слова “Расписание”, “занятий”, “на вторник” на разных строках:  4.Сохраните текст со внесенными изменениями в файле РRASP.HTM с помощью команды Файл (File), Сохранить(Save). Закройте программу Блокнот. 5. Просмотрите с помощью браузера Microsoft Internet Explorer полученную Web-страницу, используя клавишу F5 или команду Вид (View), Обновить (Refresh). Изменилось ли изображение текста на экране? Примечание. В дальнейшем после внесения изменений в Web-страницу всегда выполняйте пункты 4 — 5 задания 2. Задание 3. Некоторые специальные команды форматирования Существуют специальные команды, выполняющие перевод строки и задающие начало нового абзаца. Кроме того, имеется команда, которая запрещает программе браузера каким-либо образом изменять форматирование текста и позволяет точно воспроизвести на экране заданный фрагмент текстового файла. Тэг перевода строки отделяет строку от последующего текста или графики. Тэг абзаца <Р> тоже отделяет строку, но еще добавляет пустую строку, которая зрительно выделяет абзац. Оба тэга являются одноэлементными. Использование тэгов перевода строки и абзаца. 1. Внесите изменения в текст файла HTML:  2. Сохраните текст со внесенными изменениями в файле RASP.HTM. 3. Просмотрите с помощью браузера Microsoft Internet Explorer полученную Web-страницу. Как изменилось изображение текста на экране? Новая страница будет выглядеть так, как показано на рис.2.  Рис. 2 Задание 4. Выделение фрагментов текста. 1. Внесите изменения в файл RASP.HTM:  2. Просмотрите полученную Web-страницу. Возможно использование комбинированных выделений:  Но при этом необходимо помнить следующее правило записи комбинированных тэгов: <Тэг-1> <Тэг-2> ... — правильная запись; <Тэг-1> <Тэг-2> ... — ошибочная запись. Задание размера символов Существуют два способа управления размером текста, изображаемого браузером: использование стилей заголовка, задание размера шрифта основного документа или размера текущего шрифта. Использование стилей заголовка Используется шесть тэгов заголовков (от <Н1> до <Н6>). Каждому тэгу соответствует конкретный стиль, заданный параметрами настройки браузера. Задание 5. Использование стилей заголовка. Используется шесть тэгов заголовков (от <Н1> до <Н6>). Каждому тэгу соответствует конкретный стиль, заданный параметрами настройки браузера. 1. Внесите изменения в файл RASP.HTM:  2. Просмотрите полученную Web-страницу. На экране вы увидите то, что показано на рис. 3 .  Рис.3. Задание 6. Установка размера текущего шрифта. Тэг шрифта позволяет задавать размер текущего шрифта в отдельных местах текста в диапазоне от 1 до 7. 1.Внесите изменения в файл RASP.HTM:  2. Самостоятельно измените размер шрифта для текста “занятий на вторник”, используя тэг . 3. Измените оформление текста HTML-документа, используя тэг выделения фрагментов текста и тэг перевода строки и абзаца. Задание 7. Установка гарнитуры и цвета шрифта. Гарнитура и цвет шрифта. Тэг предоставляет возможности управления размером, гарнитурой и цветом текста. Изменение гарнитуры шрифта выполняется простым добавлением к тэгу атрибута FACE. Например, для изображения текста шрифтом Arial необходимо записать: . Для изменения цвета шрифта можно использовать в тэге атрибут COLOR="X". Вместо Х надо подставить либо название цвета (в кавычках), либо его шестнадцатеричное значение. При задании цвета шестнадцатеричным числом можно представить этот цвет разложенным на три составляющие: красную (R — Red), зеленую (G — Green), синюю (В — Blue), каждая из которых имеет значение от 0 до FF. В этом случае мы имеем дело с так называемым форматом RGB. Примеры записи цвета в формате RGB приведены в Tаблице 1. Таблица 1. Запись цвета в формате RGB
1. Внесите изменения в файл RASP.HTM:  2. Самостоятельно измените размер, цвет, гарнитуру, стиль текста документа. Задание 8. Выравнивание текста по горизонтали. Внесите изменения в файл RASP.HTM:  На экране вы увидите то, что показано на рис. 4.  Рис. 4 Задание 9. Задание цвета фона и текста При изображении фона и текста браузеры используют цвета, установленные по умолчанию, — они заданы параметрами настройки браузера. Если вы хотите задать другие цвета, то это надо сделать в начале файла HTML в тэге . Атрибут BGCOLOR= определяет цвет фона страницы, ТЕХТ= задает цвет текста для всей страницы, LINK= и VLINK= определяют цвета соответственно непросмотренных и просмотренных ссылок (последние два параметра будут рассмотрены позже). Внесите изменения в файл RASP.HTM:  Задание 10. Размещение графики на Web-странице. Тэг Внесите изменения в файл RASP.HTM:  На экране вы увидите то, что показано на рис.5.  Рис.5 Тэг Таблица 2 Атрибуты изображения
Задание 11. Установка атрибутов изображения. Самостоятельно внесите изменения в файл RASP.HTM: опробуйте использование таких атрибутов графики, как ALT, BORDER, HEIGHT, WIDTH. Примечание. Всегда обращайте внимание на размер (объем в байтах) графического файла, так как это влияет на время загрузки Web-страницы. Задание 12. Установка фонового изображения на Web-странице. Фоновое изображение — это графический файл с изображением небольшой прямоугольной плашки. При просмотре в браузере эта плашка многократно повторяется, заполняя все окно, независимо от его размеров. Графика, используемая в качестве фоновой, задается в тэге . Внесите изменения в файл RASP.HTM:  На экране вы увидите то, что показано на рис. 6.  Рис.6. Графический файл fon1.GIF выглядит так, как показано на рис. 7.  Рис. 7 Задание 13.Создание таблицы. Таблица является особой частью HTML-документа. Она представляет собой прямоугольную сетку, состоящую из вертикальных столбцов и горизонтальных строк. Пересечение строки и столбца называется ячейкой. Ячейка может содержать в себе текст, графику или другую таблицу. Таблица состоит из трех основных частей: • названия таблицы; • заголовков столбцов; • ячеек. Таблица заполняется по строкам (слева направо — по строке, затем переход на :ледующую строку). Каждая ячейка должна быть заполнена. Для создания пустых ячеек используются пробелы. 1. Запустите программу Блокнот. 2. Наберите следующий текст в окне редактора:  3. Сохраните файл под именем 5.НТМ. 4. Для просмотра созданной Web-страницы загрузите браузер Microsoft Internet Explorer. На экране вы увидите то, что показано на рис. 8.  Рис.8 Задание 14. Построение гипертекстовых связей Важнейшим свойством языка HTML является возможность включения в документ ссылок на другие документы. Возможны ссылки: на удаленный HTML-файл, на некоторую точку в текущем HTML-документе, на любой файл, не являющийся HTML-документом. В качестве ссылки можно использовать текст или графику. Ссылки в пределах одного документа Такие ссылки требуют наличия двух частей: метки и самой ссылки. Метка определяет точку, на которую происходит переход по ссылке. Ссылка использует имя метки. Ссылки выделяются цветом или подчеркиванием, в зависимости от того, как настроен браузер. Для изменения цвета ссылки используется атрибуты LINK= и VLINK= тэга . Опишем ссылку: Понедельник Перед именем метки (ПН), указывающей, куда надо переходить по ссылке, ставится символ #. Между символами “>” и “<” располагается текст (“Понедельник”), на котором должен быть произведен щелчок для перехода по ссылке. Определим метку: Понедельник 1. Дополните файл 5.НТМ описанием таблицы, содержащей названия дней недели, поместив его в начало Web-страницы:  2. Вставьте в файл 5.НТМ метку, указывающую на понедельник:  3. Вставьте в таблицу с названиями дней недели ссылку для выбранной метки:  4. Создайте таблицы расписаний для остальных дней недели. 5. Сохраните файл. 6. Просмотрите полученную Web-страницу. На экране вы увидите то, что изображено на рис.9.  Рис. 9 Задание 15. Создание ссылки на другой HTML-документ. Ссылки позволяют щелчком на выделенном слове или фразе перейти к другому файлу. Опишем ссылку: <А HREF="5.HTM">5 класс После имени файла (5.НТМ), между символами “>” и “<” располагается текст (“5 класс”), на котором должен быть произведен щелчок для перехода к этому файлу. 1. Загрузите в браузер файл RASP.HTM. 2. Внесите изменения в файл:  3. Сохраните файл. 4. Просмотрите полученную Web-страницу. На экране вы увидите то, что изображено на рис.10.  Рис.10 Задание 16. Создание ссылки на другой HTML-документ 1. Внесите изменения в файл 5.НТМ так, чтобы в конце страницы была ссылка на головную страницу Расписание занятий 5 классов (файл RASP.HTM). В качестве ссылки используйте графический файл следующим образом:  2. Просмотрите полученную Web-страницу. На экране вы увидите то, что показано на рис.11.  Рис. 11 В качестве ссылки выступает рисунок (стрелка, направленная вправо и вверх), находящийся в файле HOME.GIF. |
