Нас утро встречает прохладой

Задание на выполнение

1. Создать файл с гипертекстовым документом:

Запустить редактор Блокнот, ввести текст:

Приветствую Вас на моей первой web-страничке!

Сохранить файл в созданной папке. При сохранении, в окне диалога Сохранить как… в строке Тип файла: выбрать вариант Все файлы (*.*) , а в строке Имя файла задать имя с расширением .htm, например 1_name.htm(где name – ваше имя)
Закрыть документ, найти его пиктограмму в окне Мой компьютер или в окне программы Проводник.
Открыть файл. Проанализировать, с помощью какого приложения отображается файл и как выглядит введенная фраза.

2. Ввести теги, определяющие структуру html-документа:

С помощью контекстного меню открыть файл с помощью редактора Блокнот. Ввести приведенные ниже теги, в разделе заголовка документа (между тегами )указать свою фамилию.

Фамилия

Приветствую Вас на моей первой web-страничке!

Сохранить документ под тем же именем, обновить его отображение в броузере (выполнить Вид/Обновитьили нажать кнопкуОбновить на панели инструментов). Проанализировать произошедшие изменения в отображении документа.

3. Отредактировать документ:

Вызвать меню броузераВид/Просмотр HTML-кода и добавить после текста «Приветствую Вас на моей первой web-страничке!»текст подписи:

Студент группы NNN Фамилия Имя

Сохранить документ (но не закрывать) и обновить его просмотр в броузере.

Используя одиночный тег
, отредактировать документ так, чтобы подпись начиналась с новой строки, а Фамилия Имя – в следующей строке. Просмотреть в броузере новый вариант.

Внимание! После каждого изменения документ нужно сохранять, а просмотр в броузере начинать с обновления загрузки документа с помощью кнопки «Обновить» на панели инструментов.

4. Оформить фрагменты текста с помощью стилей Заголовков:

Первую строку документа оформить стилем Заголовок 1-го уровня с помощью парного тега . Вторую строку оформить как Заголовок 6-го уровня, а третью как Заголовок 4-го уровня.
Просмотреть документ в броузере, изменяя настройку отображения шрифтов (меню Вид / Размер шрифта / Самый крупный, Средний, МелкийиСамый мелкий).
Поменять стиль оформления первой строки на Заголовок 2 уровня, второй строки — на Заголовок 5 уровня, последней строки — наЗаголовок 3-го уровня.

5. Выполнить форматирование шрифта:

После строки Фамилия Имя добавить еще одну строку текста

Нас утро встречает прохладой

Оформить фразу по приведенному ниже образцу.

В слове УТРО все буквы должны иметьразные цвета. В слове ПРОХЛАДОЙ оформить буквы ПРО – красным цветом, ОЙ – синим.

Оформить строку с подписью (Студент группы NNN Фамилия Имя) курсивом, размер шрифта задать относительным изменением. Использовать теги и
Просмотреть полученный документ в браузере.

6. Выполнить форматирование абзацев:

Создать новый документ 2_name.htm, сохранить его в той же рабочей папке.
Ввести текст (использовать копирование текста из документа 1_name.htm):

Фамилия

Приветствую Вас на моей второй web-страничке!
Монолог Гамлета

Выровнять текст по центру.
Ввести текст:

Быть иль не быть — вот в чем вопрос. Что благороднее: сносить удары неистовой судьбы — иль против моря невзгод вооружиться, в бой вступить. И все покончить разом…

Оформить выравнивание абзаца по ширине.
Ограничить абзац горизонтальными разделительными линиями сверху и снизу, используя тег .
Скопировать монолог и разбить его на абзацы. Выровнять по центру.

Быть иль не быть — вот в чем вопрос.
Что благороднее: сносить удары
Неистовой судьбы — иль против моря
Невзгод вооружиться, в бой вступить
И все покончить разом…

Сохранить документ.
Просмотреть документ в окне броузера, изменяя размер окна.

7. Выполнить оформление списков:

Создать новый документ 3_name.htm, сохранить его в той же рабочей папке жесткого диска.
Ввести текст:

Фамилия

Приветствую Вас на моей третьей web-страничке!

Дополнить текст документа (между тегами …) следующим текстом:
Я знаю как оформлять:
Шрифты,
Заголовки,
Абзацы
Оформить три последние строки как список нумерованный. Для этого использовать следующую конструкцию тегов:

Шрифты,

Заголовки,

Абзацы

Поменять оформление списка на список маркированный. Использовать теги

Создать «смешанный» список:

Я знаю как оформлять:

Шрифты

Размер
Цвет
Гарнитуру
Индексы

Заголовки

От 1-го до 6-го уровня

Абзацы

Выравнивание
Разрыв строк внутри абзаца
С использованием переформатирования.

8. Предъявить результаты работы преподавателю.

Таблица основных тегов HTML-документа. Теги форматирования шрифта и абзаца

Назначение	Вид тегов	Примечание
Общая структура документа HTML
Тип документа		Начало и конец документа
Имя документа		Не отображается броузером
Заголовок		Содержимое строки заголовка окна броузера
Тело документа		Содержимое WEB-страницы
Структура содержания документа
Внутренние заголовки различного уровня	текст	Где № – номер уровня заголовка (от 1 до 6). Например,- заголовок 1-го уровня.
Заголовок с выравниванием	текст	LEFT — по левому краю,CENTER — по центру,RIGHT — по правому краю.
Форматирование абзацев
Создание абзаца (параграфа)	текст	Абзацы отделяются двойным межстрочным интервалом
Перевод строки внутри абзаца		Одиночный тег
Выравнивание абзаца	текст текст текст текст	LEFT — по левому краюCENTER — по центру RIGHT — по правому краюJUSTIFY – по ширине
Разделительная горизонтальная линия между абзацами		Одиночный тег. «?» — толщина линии в пикселях. Толщину линии можно не указывать.
Форматирование шрифта
Жирный	текст	Жирный КурсивПодчеркнутыйПеречеркнутыйВерхний индексНижний индекс
Курсив	текст
Подчеркнутый	текст
Перечеркнутый	текст
Увеличенный размер	текст
Уменьшенный размер	текст
Верхний индекс	текст
Нижний индекс	текст
Размер шрифта	текст	?- значения от 1 до 7 или относительное изменение (например, +2)
Базовый размер шрифта		Одиночный тег? – размер от 1 до 7; по умолчанию равен 3 и задается для всего документа в целом
Гарнитура шрифта	текст	Текст оформляется первым, установленным на компьютере шрифтом из списка названий
Цвет шрифта	текст	Цвет задается либо ключевым словом, либо шестнадцатеричным кодом с символом #RED –красный, #FF0000 – шестнадцатеричный код – красного цвета
Создание списков
Нумерованный	элементы списка	Элемент списка 1 Элемент списка 2 Элемент списка 3
Маркированный	элементы списка
Элемент списка	элементы списка

Таблица основных цветов

Цвет	Color’s name	Шестнадцатеричный код цвета
Red	Green	Blue
Черный	black
Темно-синий	navy
Голубой	blue			FF
Зеленый	green
Темно-зеленый	teal
Салатный	lime		FF
Бледно-голубой	aqua		FF	FF
Вишневый	maroon
Фиолетовый	purple
Оливковый	olive
Серый	gray
Светло-серый	silver	C0	C0	C0
Красный	red	FF
Лиловый	fushsia	FF		FF
Желтый	yellow	FF	FF
Белый	white	FF	FF	FF

Лабораторная работа №7. Вставка в HTML-документ рисунков. Создание закладок и гиперссылок

Цель работы:

Научиться выполнять вставку рисунков в HTML-документ
Научиться создавать закладки и гиперссылки

1. Скопировать из Интернета или какой-либо папки в личную папку файлы три графических файла (например, Arrows1.wmf, Arrows2.wmf, Arrows3.wmf).

Убедиться, что созданные ранее документы 1_name.htm, 2_name.htm и 3_name.htm также находятся в вашей папке на жёстком диске.

2. Вставка рисунков в документ.

Открыть в Блокноте документ 2_name.htm.
Вставить рисунок Arrows1.wmf в начало документа 2_name.htm. Для вставки использовать тег IMG с параметрами WIDTH и HEIGHT для установки размеров рисунка 50 пикселов по горизонтали и по вертикали.
Сохранить документ под именем 4_name.htm.
Просмотреть в броузере полученный результат.
Ввести в тег рисунка параметр ALIGNдлявыравнивания рисунка по правому краю. Просмотреть результат в броузере.
Вставить рисунок Arrows2.wmf в конец документа 4_name.htmперед, подобрать тип выравнивания рисунка на свое усмотрение. Установить размер рисунка 100 пикселов по горизонтали и по вертикали. С помощью параметра ALT создать всплывающую подсказку «Рисунок 2», появляющуюся при наведении курсора мыши на рисунок.
Просмотреть в броузере полученный результат.

3. Создание гиперссылок и закладок.

В документе 3_name.htmзакрепить гиперрсылки за следующими элементами списка:

За словом Шрифт – гиперссылка на документ 1_name.htm.

За словом Заголовки – на документ 1_name.htm.

За словом Абзацы — на документ 2_name.htm.

Создать закладку в документе 1_name.htm перед фразой «Нас утро встречает прохладой». Дать ей имя «Morning».
Изменить первую гиперссылку (слово Шрифт) так, чтобы она указывала на закладку «Morning»в документе 1_name.htm.
Создать закладку в начале текущего документа 3_name.htm.. Присвоить ей имя «Hello».
Изменить вторую гиперссылку (на слове Заголовки), определив для неё переход в начало текущего документа на установленную закладку «Hello».
Создать закладку в документе 2_name.htm перед фрагментом монолога. Присвоить ей имя «Mono».
Установить на слово переформатирования гиперссылку на закладку «Mono».
Проверить правильность переходов по всем гиперссылкам.

4. Закрепить гиперссылки за графическими файлами:

Отредактировать тег вставки рисунка Arrows1.wmf, ввести в тег атрибут ALT для отображения текста подсказки «Вернуться». Просмотреть в броузере как реагирует рисунок на наведение курсора мыши.
Закрепить за рисунком Arrows1.wmfв документе 4_name.htmгиперссылку на документ 3_name.htm. Выполнить переход между документами.

5. Предъявить результат преподавателю.

Статьи к прочтению:

Песня о встречном / Нас утро встречает прохладой (1932) / Встречный, 1932. Score

Похожие статьи: