- •Лабораторная работа № 1 «Создание простейшей Web-страницы »
- •Теоретические сведения.
- •Ход работы.
- •Создание простейшей Web-страницы
- •Изучение приемов форматирования абзацев.
- •Создание гиперссылок
- •Лабораторная работа № 2
- •Ход работы.
- •Создание изображения и использование его на Web-странице
- •Приемы форматирования текста
- •Контрольные вопросы.
- •Содержание отчета.
- •Лабораторная работа № 3 «Создание Web документа с помощью редакторов гипертекста. Приемы создания списков. Создание таблиц»
- •Теоретические сведения.
- •Ход работы.
- •Приемы создания списков
- •Упражнение 2. Создание таблиц.
- •Создание описания фреймов.
- •Контрольные вопросы.
- •Содержание отчета.
- •Лабораторная работа № 4.
- •Теоретические сведения.
- •Создание и редактирование документа
- •Ход работы.
- •Создание Web-документа с помощью редактора FrontPage Express
- •Контрольные вопросы.
- •Содержание отчета.
- •Лабораторная работа № 5.
- •Теоретические сведения.
- •Публикация Web-документов
- •Ход работы.
- •Исследование методов создания абзацного отступа в документах html.
Приемы форматирования текста
Если это упражнение выполняется не сразу после предыдущего, откройте документ first.htm в программе Блокнот.
Удалите весь текст, находящийся между тегами <BODY> и </BODY>. Текст, который будет вводиться в последующих пунктах этого упражнения, необходимо поместить после тега <BODY>, а его конкретное содержание может быть любым.
Введите тег <BASEFONT SIZE="5" COLOR="BROWN">. Он задает вывод текста по умолчанию увеличенным шрифтом и коричневым цветом.
Введите произвольный абзац текста, который будет выводиться шрифтом, заданным по умолчанию. Начните этот абзац с тега <Р>.
Введите теги: <Р> <FONT SIZE="-2" FACE="ARIAL" COLOR="GREEN">.
Введите очередной абзац текста, закончив его тегом </FONT>.
В следующем абзаце используйте по своему усмотрению парные теги: <В> (полужирный шрифт), <1> (курсив), <U> (подчеркивание), <S> (вычеркивание), <SUB> (нижний индекс), <SUP> (верхний индекс).
В следующем абзаце используйте по своему усмотрению парные теги: <ЕМ> (выделение), <STRONG> (сильное выделение), <CODE> (текст программы), <KBD> (клавиатурный ввод), <SAMP> (пример вывода), <VAR> (компьютерная переменная).
Сохраните полученный документ под именем format.htm.
Запустите обозреватель Internet Explorer (Пуск > Программы > Internet Explorer).
Дайте команду Файл > Открыть. Щелкните на кнопке Обзор и откройте файл format.htm.
Изучите, как использованные элементы HTML влияют на способ отображения текста.
Вернитесь в программу Блокнот и измените документ так, чтобы элементы, задающие форматирование, были вложены друг в друга. Сохраните документ под тем же именем.
Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов. Посмотрите, как изменился вид страницы.
Контрольные вопросы.
Как влияют атрибуты тега <IMG> на способ отображения изображения.
Какие элементы языка HTML, которые могут использоваться для форматирования текста документа. Как эти элементы воздействуют на отображение документа, и какие элементы можно вкладывать друг в друга.
Какие форматы изображений используют Web-страницы?
Какие существуют тэги для форматирования текста?
Как использованные элемента HTML влияют на способ отображения текста.
Содержание отчета.
1. Название и цель работы.
2. Краткие сведения по теории и порядку выполнения работы.
3. Выводы по работе.
Лабораторная работа № 3 «Создание Web документа с помощью редакторов гипертекста. Приемы создания списков. Создание таблиц»
Цель работы: Получение практических навыков работы в изучение языка гипертекстовой разметки, подготовка материалов к их публикации в Интернет.
Теоретические сведения.
Для упорядоченных списков употребляться атрибут type. Для упорядоченных списков возможны следующие значение атрибута type:
1 |
арабские цифры |
1, 2, 3, ... |
a |
буквы нижнего регистра |
a, b, c, ... |
A |
буквы верхнего регистра |
A, B, C, ... |
i |
римские цифры в нижнем регистре |
i, ii, iii, ... |
I |
римские цифры в верхнем регистре |
I, II, III, ... |
Таблицы удобны для представления больших объемов данных, а многие Web-дизайнеры используют их также для точного размещения элементов Web-страниц Таблица в языке HTML задается при помощи парного тега <ТАВLЕ>. Она может содержать заголовок таблицы, определяемый парным тегом <CAPTION>, и строки таблицы, задаваемые при помощи парных тегов <TR>. Закрывающие теги <ДП> можно опускать. Каждая строка таблицы содержит ячейки таблицы, которые могут относиться к двум разным типам. Ячейки в заголовках столбцов и строк задают парным тегом <ТН>, а обычные ячейки — парным тегом <TD>. Закрывающие теги </ТН> и <TD> можно опускать.
Таблица 1. Атрибуты элементов, используемых при создании таблицы
Атрибут
|
Элемент |
Назначение |
ALIGN= |
Таблица, заголовок, строка, ячейка |
Выравнивание таблицы по горизонтали; выравнивание данных по горизонтали; размещение заголовка над или под таблицей |
VALIGN= |
Строка, ячейка |
Выравнивание по вертикали |
WIDTH= |
Таблица, ячейка |
Ширина |
HEIGHT= |
Ячейка |
Высота |
COLSPAN= |
Ячейка |
Протяженность в несколько столбцов |
ROWSPAN= |
Ячейка |
Протяженность в несколько строк |
BGCOLOR= |
Таблица, ячейка |
Цвет фона |
CELLSPACING= |
Таблица |
Зазор между ячейками |
CELLPADDING= |
Таблица |
Зазор между содержимым ячейки и ее границей |
BORDER= |
Таблица |
Отображение границ ячеек и внешней рамки таблицы |
Язык HTML позволяет в рамках одной Web-страницы отобразить несколько документов. Для этого страница должна быть разбита на несколько областей — фреймов. Разбиение страницы описывается документом HTML особого рода, структура которого отличается от обычной. Тело документа заменяется описанием фреймов, задаваемым парным тегом <FRAMESET>. Элемент BODY в таком документе должен отсутствовать, а при наличии — игнорируется браузером.
При помощи атрибута rows тэга <frameset> мы указываем, что наши фреймы будут расположены горизонтально (рядами). В значении атрибута rows мы прописываем высоту каждого фрейма (в пикселях). Звёздочка (*) указывает на то, что данный фрейм будет занимать всё оставшееся пространство по высоте. Тэг frame сообщает браузеру, какие документы у нас будут загружены во фреймах.