|
Лабораторные работы HTML. Лабораторная работа 1 Работа с браузерами Internet Explorer, Opera. Firefox, Google Chrome. Создание простых html документов
Лабораторные работы
Лабораторная работа 1
Работа с браузерами: Internet Explorer, Opera. Firefox, Google Chrome. Создание простых HTML документов Цель работы:
Получить практические навыки по созданию и просмотру HTML-страниц.
Задание для домашней подготовки:
изучить функции меню программ просмотра HTML-страниц повторить правила записи тегов средствами языка HTML ознакомиться с приведенным к данной лабораторной работе заданием и с теоретическими сведениями; написать программу по заданию лабораторной работы.
Задание к практической работе:
Создать четыре связанные HTML-страницы в соответствии с заданием. Проверить работу гиперссылок. Сохранить файлы под указанными именами.
4) Выполнить предложенное преподавателем индивидуальное дополнительное задание.
Теоретические сведения, необходимые для выполнения работы: Текстовые гиперссылки позволяют организовать переходы между страницами;
Физическое и логическое форматирование позволяет задать оформление страницы: цвет текста, размер, выделение и размещение на странице.
Порядок выполнения работы:
Выберите Пуск/Программы/Стандартные/Блокнот. После этого откроется Блокнот, и в нем вводим тэги, составляющие HTML-документ. Для просмотра страницы откройте Браузер Internet Explorer (Mozilla Firefox, Google Chrome, Opera). Создайте страницы, содержащие следующее:
Разные виды выделения текста (физические и логические стили);
Наберите часть текста абзаца. Размер шрифта – 4.
Явление резонанс
Резонанс – это явление резкого возрастания амплитуды колебаний при v=vсобств.
Выделите слово «резонанс» в определении жирным шрифтом ; текст за ним шрифтом курсив ; слово «собств» шрифтом, размер которого на 2 пункта меньше размера предыдущего шрифта; заголовок «Явление резонанс» подчеркиванием . Отделите заголовок от текста горизонтальной линией . Используя вышеуказанную технологию, создайте еще два заголовка абзаца текста: «Применение резонанса» и «Отрицательные примеры резонанса». Сохраните файл под именем proba.html. Просмотрите созданную страницу в окне браузера.
Откройте Блокнот и создайте Web-страницу следующего содержания:
Применение резонанса
Известно, что тяжелый язык большого колокола может раскачать даже ребенок, но лишь тогда, когда будет действовать на веревку в такт свободным колебаниям языка.
Вернуться назад
Размер шрифта заголовка 5 пунктов, основного текста 3 пункта. Сохраните Web-страницу под именем prim1.html.
Откройте в блокноте файл proba.html. В качестве ссылки возьмите текст заголовка «Применение резонанса», поместив в документ следующий тэг:
Применение резонанса.
Cоздайте Web-страницу следующего содержания:
Отрицательные примеры резонанса
В 1750 г. близ города Анжер во Франции через цепной мост длиной 102м шел в ногу отряд солдат. Частота их шагов совпала с частотой свободных колебаний моста. Из-за этого размахи колебаний моста резко увеличились(наступил резонанс), и цепи оборвались. Мост обрушился в реку.
Вернуться назад
Сохраните Web-страницу под именем prim2.html в той же папке. В качестве ссылки возьмите текст «Вернуться назад». Откройте в блокноте файл proba.html. В качестве ссылки возьмите текст заголовка «Отрицательные примеры резонанса», поместив в документ следующий тэг:
Отрицательные примеры резонанса . Cоздайте Web-страницу следующего содержания:
Явление резонанс
Резонанс возникает из-за того, что внешняя сила, действуя в такт со свободными колебаниями тела, все время совершает положительную работу. За счет этой работы энергия колеблющегося тела увеличивается и амплитуда колебаний возрастает.
Вернуться назад
Сохраните Web-страницу под именем prim3.html в той же папке. В качестве ссылки возьмите текст «Вернуться назад». Откройте в блокноте файл proba.html. В качестве ссылки возьмите текст заголовка «Явление резонанс», поместив в документ следующий тэг:
Явление резонанс .
Просмотрите созданный Web-документ в окне браузера, открыв файл proba.html. Проверьте работу гиперссылок.
Лабораторная работа 2
Создание HTML страниц Цель работы:
Получить практические навыки по созданию HTML-страниц.
Задание для домашней подготовки:
повторить правила записи тегов средствами языка HTML ознакомиться с приведенным к данной лабораторной работе заданием и с теоретическими сведениями; написать программу по заданию лабораторной работы.
Задание к практической работе:
Создать HTML-страницы в соответствии с заданием. Создать разного вида списки на странице. Создать таблицы с изображениями и гиперссылками. Проверить работу гиперссылок. Сохранить файлы под указанными именами.
6) Выполнить предложенное преподавателем индивидуальное дополнительное задание.
Теоретические сведения, необходимые для выполнения работы: Любое изображение вставляется в HTML-документ как текст, поэтому при вставке изображения различают следующие способы:
Статический, реализуется с помощью атрибута ALIGN. Имеет следующие параметры:
align=”top” – совмещение строки текста с верхней границей изображения; align=”middle” - совмещение строки текста с центром изображения; align=”bottom” - совмещение строки текста с нижним краем изображения;
Плавающий, предполагает обтекание изображения текстом, реализуется при помощи:
align=”left” – изображение слева от текста; align=”right” - изображение справа от текста;
Таблица представляет собой особую часть документа HTML. Данные в ней организованы в виде прямоугольной сетки, которая состоит из вертикальных столбцов (колонок) и горизонтальных строк (рядов). Каждая клетка таблицы называется ячейкой . Ячейки могут содержать текст, графику и даже другую таблицу. Таблицы состоят из трех основных частей: названия таблицы, заголовков столбцов и ячеек. Таблица заполняется слева направо, ячейка за ячейкой, начиная с левого верхнего угла и заканчивая правым нижним углом. Каждая ячейка должна быть заполнена (для создания пустых ячеек используются пробелы). Описание таблицы в документе HTML начинается с тэга . Если вы хотите, чтобы таблица имела видимую рамку (границы), используйте атрибут BORDER, например:
Атрибут BORDER может принимать аргумент (число), определяющий ширину рамки, например:
Для задания названия таблицы используется тэг с атрибутом выравнивания ALIGN , который может принимать значения ТОР или BOTTOM (расположение названия вверху или внизу таблицы соответственно), например: Каждый ряд ячеек начинается с тэга и заканчивается тэгом < /TR> . Если ряд должен содержать заголовки столбцов таблицы, то используются тэги <ТН> и тн> . Если в ячейках должны размещаться данные, то используются тэги и | . Тэги заголовков и данных должны располагаться между тэгами рядов и . Проще говоря, вы сначала определяете таблицу (тэг ), а затем внутри этого определения задаете строки (тэг ) и содержимое ячеек (тэг — для данных, тэг <ТН> — для названий заголовков столбцов). Структура текстовой ссылки имеет следующий вид (обратите внимание на закрывающий тег ссылки А>) :
<А НREF="адрес_ссылки"> текст_ссылки А>
Например, следующий тэг описывает ссылку на HTML-файл ДОКУМ2.НТМ, при этом ссылка на экране будет представлена текстом Щелкните здесь:
<А НREF="докум2.htm"> Щелкните здесь А>
Отметим, что браузер не выводит на экран имя файла, к которому требуется перейти по ссылке, а показывает лишь текст, заключенный в тэге между угловыми скобками > и <. Если же вы хотите, чтобы внешне ссылка выглядела, как имя файла, на который она ссылается, то просто напишите его имя вместо текста, например:
<А НREF="докум2.htm"> докум2.htm А>
Можно ссылаться не только на другие файлы, но и на собственный файл. Поскольку настройки цвета в браузере у различных пользователей могут отличаться, возникает задача принудительного задания цветов, чтобы обеспечить хорошую видимость ссылок. Выше мы уже рассматривали, как задать цвет фона и текста. Это делается в тэге с помощью атрибута LINK для непрочитанной ссылки и VLINK — для прочитанной ссылки.
При формировании документа HTML может потребоваться ввести символы, которые воспринимаются браузером как служебные. Например, нельзя использовать символы < и > для обозначения знаков «меньше» и «больше», т. к. они интерпретируются как символы тэгов. Кавычки (") и амперсанд (&) также используются в языке HTML для служебных целей. Кроме того, все символы, которые можно набрать при нажатых клавишах управления, отличных от , могут не воспроизводиться при просмотре документа, поскольку они зарезервированы. Если все же возникнет необходимость вставить в текст зарезервированные символы, то вместо них следует использовать их буквенные эквиваленты или коды ASCII. В качестве буквенного эквивалента используются соответствующие сокращения.
Буквенный эквивалент имеет формат: &буквенный эквивалент; Например, < ; обозначает символ < (less then, меньше чем).
Цифровой эквивалент имеет формат: код_АЗС11; Например, символ < можно вставить в документ как <.
Порядок выполнения работы:
Создайте страницу, содержащую текст, включающий в себя:
Рисунок;
В созданный Web-документ можно вставить рисунок. Для этого нужен сам рисунок в формате GIF или JPEG строка, указывающая браузеру, где этот рисунок находится:
. Рисунок может быть ссылкой. Для этого разместите между тэгами и . Выберите рисунок, соответствующий теме резонанса в папке Clipart на диске F: и скопируйте в свою папку. Вставьте рисунок в файл proba.html, сделайте его ссылкой.
Откройте Блокнот, создайте новый документ. Установите цвет фона и текста, используя тэги или . Фоном может служить и какое-то изображение . Для изменения цвета и размера шрифта используется тэг : Крупный шрифт красного цвета без засечек. Форматирование текста:
Выделите абзац:
Этот абзац расположен слева
Этот абзац по центру
А вот этот абзац справа . Наберите текст и отформатируйте его, выравнивание по центру, шрифт Times new Roman, жирный, каждая строка разного цвета: Стишок-нескладуха Нет приятнее занятья, Чем в носу поковырять: Всем ужасно интересно, Что там спрятано внутри. А кому смотреть противно, Тот пускай и не глядит - Мы же в нос к нему не лезем, Пусть и он не пристает! Сохраните Web-страницу под именем prim4.html в той же папке.
Создайте страницу, содержащую текст, включающий в себя:
Создание нумерованных, ненумерованных списков: Ненумерованный список определяется тэгами . Нумерованный – тэгами .
Список коней: Сивка, Бурка, Вещая Каурка. Создайте все виды списков и определите стиль представления элементов списка.
Создание таблиц: Таблица начинается и заканчивается тэгами , строки определяются тэгами , ячейки – тэгами | .
Создайте следующую таблицу:
Язык программирования
| Особенности
| С++
| Использует
| Классы
| Visual Basic
| Объекты
| Создайте следующую таблицу: В первый столбец вставьте подходящие изображения, которые могут использоваться как ссылки. Сохраните в файле prim4.html.
Формированные элементы внутри ячеек таблицы
| ОПЕРАЦИОННЫЕ СИСТЕМЫ
| Торговая марка MS-DOS
|
| ДЕЛОВЫЕ ПРОДУКТЫ ДЛЯ ДОМАШНЕГО ИСПОЛЬЗОВАНИЯ
| Программы для домашнего пользования
|
| ОФИСНЫЕ ПРОДУКТЫ
| Программы для офиса
| Создание &-последовательности, комментарии. Добавьте комментарии к файлу, знак авторских прав и торговый знак.
Лабораторная работа 3
Создание HTML страниц, содержащих изображения и фреймы Цель работы:
Получить практические навыки по созданию HTML-страниц.
Задание для домашней подготовки:
повторить правила записи тегов средствами языка HTML ознакомиться с приведенным к данной лабораторной работе заданием и с теоретическими сведениями; написать программу по заданию лабораторной работы.
Задание к практической работе:
Создать HTML-страницы в соответствии с заданием. Создать карту-изображение на странице. Создать фреймы с гиперссылками. Проверить работу гиперссылок. Сохранить файлы под указанными именами.
Теоретические сведения, необходимые для выполнения работы: Чтобы включить поддержку карты для изображения, необходимо ввести дополнительный параметр в тэг IMG:
USEMAP="url# map_name ">
Параметр USEMAP указывает, в каком месте находится карта описываемого изображения. Карта изображения определяет, какому участку изображения какой URL соответствует. Карта изображения может находиться в том же документе, что и изображение, или в другом документе. Параметр map_name указывает имя карты для изображения, а предшествующий ему URL определяет местонахождение карты. Если данный URL отсутствует, то карта с указанным именем ищется в текущем документе.
Синтаксис определения карты изображения:
<MAPNAME=" map_name"> <AREA [SHAPE=" shape "] COORDS="x,y,..." [href=" reference "] [NOHREF]>
Параметры:
Данный тэг определяет начало описания карты с именем map_name.
Описывает участок изображения и ставит ему в соответствие URL
Фреймы
Для создания фреймов используются теги | |
|
|