Гипертекстовый язык разметки HTML

Цель: ознакомиться с основами гипертекстового языка разметки HTML.

Часть 1. Текстовое оформление страниц

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

 Запустили редактор Блокнот.

 Ввели теги, определяющие стандартную структуру документа HTML, в разделе заголовка документа указали свою фамилию, в теле документа написали «Приветствую Вас на моей web-странице!»

 Сохранили файл в своей папке. При сохранении, в окне диалога Сохранить как… в строке Тип файла: выбрали вариант Все файлы (*.*) , а в строке Имя файла задали имя с расширением .htm, 1HSH

Текст HTML:

 Харитонова Н.А; Шапко А.И 

«Приветствую Вас на моей web-странице!»

Результат:

[pic 1]

2. Установили цвет фона F0E68C, а цвет текста документа фиолетовым.

3. Определили отступы слева, справа, сверху и снизу от контента страницы до краев окна браузера как 150, 150, 200 и 200 px соответственно.

Текст HTML:

Белеет парус одинокий

В _тумане моря голубом!..

Что ищет он в стране далекой?

Что ^кинул он в краю родном?

Результат:

[pic 2]

Часть 2. Работа с изображениями

1. Создали новый HTML-документ. Назвали его 1HSH 2.htm

2. Заполните его необходимым контентом (рисунки находятся в папке img).

3. Выровняли рисунки, текст согласно приведенному  примеру

Текст HTML:

Картинка слева, а текст обтекает её справа и этот текст может занимать несколько строчек.Данный текст выравнен по правому краю. Расстояние от картинки до изображения 50 пикселей.

Картинка справа, а текст обтекает её слева и этот текст может занимать несколько строчек.Данный текст выравнен по середине. Расстояние от картинки до изображения 50 пикселей.

Верхняя граница изображения выравнивается по самому высокому элементу текущей строки. Изображение как бы встраивается в строчку. Если изображение большое, то и строка раздвигается на эту высоту

Выравнивание нижней границы изображения по базовой линии этой строки.

Выравнивание середины изображения по базовой линии текущей строки.Рамка составляет 20 рх.

Результат:

[pic 3]

[pic 4]

Часть 3. Работа со ссылками

1. Создали новый HTML-документ 1HSH  menu.htm

2. В документе создали ссылки на страницы 1HSH.htm и 1HSH 2.htm, которые будут открываться в том же окне. В подсказках к данным ссылкам указали «Выполнение части 1 лабораторной работы № 1» и «Выполнение части 2 лабораторной работы № 1» соответственно.

Текст HTML: