|
Лабораторные работы 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
Фреймы
Для создания фреймов используются теги | |
|
|
Скачать 60.11 Kb.