ЛАБОРАТОРНАЯ РАБОТА № 13. СОЗДАНИЕ СТРАНИЦЫ HTML.

ЛАБОРАТОРНАЯ РАБОТА № 13

СОЗДАНИЕ СТРАНИЦЫ HTML.

Цель работы:Ознакомление с особенностями форматирования документов HTML и их отображения при помощи обозревателя Internet Explorer. Изучение разметки абзацев. Создание документа, содержащего гиперссылки, графику. Изучение атрибутов тега <img>.

Теоретическая часть:

Все документы HTML имеют одну и ту же структуру, определяемую определенным набором тегов. Теговую модель можно представить в следующем виде: <имя элемента, список атрибутов> содержание элемента </имя элемента> Например, применим тег <р> (новый параграф в тексте): <р align=center>Эmo новый параграф</р>

В рассмотренном примере

р — это имя тега;

align=center — атрибут тега, указывающий на то, что текст внутри параграфа необходимо разместить по центру;

Это новый параграф — содержание параграфа;

/р — закрывающий тег, указывающий на конец параграфа;

Гипертекстовая ссылка определяется при помощи парного тега <а>. Обязательным атрибутом является href=. В качестве значения атрибута используется адрес URL документа, на который указывает ссылка, ссылка может быть локальной. Примеры: <а href="http://osu.cctpu.edu.ru">Caйт кафедры </а>

<а href=="http://osu.cctpu.edu.ru/index.html#point"> Ссылка на второй абзац внутри документа "Новости"</а>.

Для представления графики используют форматы файлов gif и jpeg. Для вставки рисунка используется текстовый элемент, задаваемый непарным тегом <img>. Тег <img> должен содержать обязательный атрибут SCR=, задающий адрес URL файла с изображением. Пример: <img src="http://osu.cctpu.edu.ru/images/logo.gif">

Любой гипертекстовый документ состоит из двух частей: заголовка документа (head) и тела документа (body)

<html>

<head><title> содержание заголовка </title></head>

<body> содержание тела документа </body>

</html>

Ход работы:

Создание простейшей Web-страницы.

1. Запустите текстовый редактор Блокнот (Пуск > Программы > Стандартные > Блокнот).

2. Введите следующий документ:

<html>

<head><title>3aголовок документа</title></head>

<body> содержание документа </body>

</html>

3. Сохраните этот документ под любым именем с расширением .html Перед сохранением убедитесь, что сброшен флажок Скрывать расширения для зарегистрированных типов файлов" (Пуск > Настройка > Панель управления > Свойства папки > Вид). В противном случае редактор Блокнот может автоматически добавить в конец имени расширение .ТХТ

4. Запустите программу Internet Explorer (Пуск > Программы > Internet Explorer).

5. Дайте команду Файл > Открыть. Щелкните на кнопке Обзор и откройте файл

Изучение приемов Форматирования абзацев.

1. Откройте созданный файл или через программу Блокнот или через контекстное меню (пункт просмотр кода).

2. Удалите весь текст, находящийся между тегами <body> и </body>. Текст, который будет вводиться в последующих пунктах этого упражнения, необходимо поместить после тега <body>, а его конкретное содержание может быть любым.

3. Введите заголовок первого уровня, заключив его между тегами <h1> и <h1>.

4. Введите заголовок второго уровня, заключив его между тегами <h2> и </h2>.

5. Введите отдельный абзац текста, начав его с тега <р>. Пробелы и символы перевода строки можно использовать внутри абзаца произвольно.

6. Введите тег горизонтальной линейки <hr>.

7. Введите еще один абзац текста, начав его с тега <р>.

8. Сохраните этот документ под другим именем.

9. Запустите обозреватель Internet Explorer (Пуск > Программы > Internet Explorer) и откройте файл.

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

1. Если это упражнение выполняется не сразу после предыдущего, откройте созданный файл в программе Блокнот.

2. Текст, который будет вводиться в последующих пунктах, необходимо поместить после тега <body>.

3. Введите фразу: Текст до ссылки.

4. Введите тег: <а href="имя первого файла.html">.

5. Введите фразу: Ссылка.

6. Введите закрывающий тег </а>.

7. Введите фразу: Текст после ссылки.

8. Сохраните документ

9. Просмотрите документ

10. Щелкните на ссылке и убедитесь, что при этом загружается документ,на который указывает ссылка.

11. Используя кнопку Назад можете вернуться к исходному файлу.

Создание изображения и использование его на Web-странице.

1. Откройте программу Paint (Пуск > Программы > Стандартные > Paint). Задайте размеры нового рисунка, например 50x50 точек (Рисунок > Атрибуты)

2. Создайте рисунок

3. Сохраните этот рисунок под любым именем с расширением .gif (в формате GIF).

4. Внесите изменения в рисунок и сохраните рисунок ещераз под другим именем в формате GIF и закройте программу Paint.

5. Откройте ранее созданный файл.

6. Введите произвольный текст (протяженностью 4-5 строк)и установите текстовый курсор в его начало.

7. Введите Тег <img src=«имя первого файла.gif» align="сentеr">.

8. Сохраните документ.

9. Вернитесь в программу Internet Explorer и щелкните накнопке Обновить на панели инструментов.

10. Вернитесь в программу Блокнот и измените значениеатрибута: align="left". Сохраните файл.

11. Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов.

12. Вернитесь в программу Блокнот и добавьте в тег <img> атрибуты: hspace=40 vspace=20. сохраните файл под тем же именем.

13. Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов.

14. Вернитесь впрограмму Блокнот и измените имя рисунка: src='«имя второго файла. gif». Сохраните файл под тем же именем.

15. Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов

Самостоятельная работа.

Внести измененияв файл, создав фоновый рисунок.