Практическая работа №3 Основы создания гипертекстовых документов

Цель работы: знакомство со структурой документа и основными элементами языка разметки гипертекста HTML, а также приобретение навыков создания простейших Web-страниц.

Управляющие конструкции языка HTML называются тегами и вставляются непосредственно в текст документа, оказывая влияние на способ его отображения. Все теги заключаются в угловые скобки <…>. Сразу после открывающей скобки помещается ключевое слово, определяющее тег (<BODY>). Теги бывают парными и непарными. Непарные теги оказывают воздействие на весь документ или определяют разовое воздействие в месте своего появления. Парные теги состоят из открывающего и закрывающего (отличается наличием символа «/» перед ключевым словом – </BODY>) тегов, действующих на заключенную между ними часть документа. Закрывать парные теги следует в порядке, обратном их открытию.

Для видоизменения действия некоторых тегов используются атрибуты – дополнительные ключевые слова, помещаемые после ключевого слова, определяющего тег, и отделяемые от него и друг от друга пробелами. Некоторые атрибуты требуют задания значения атрибута, отделяемого от ключевого слова атрибута символом «=» и заключаемого в кавычки.

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

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

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

<HTML>

  <HEAD>

    <TITLE>Заголовок документа</TITLE>

  </HEAD>

  <BODY>

    Содержание

    документа

  </BODY>

</HTML>

3. Сохраните этот документ под именем first.htm.

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

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

6. Посмотрите, как отображается этот файл – простейший корректный документ HTML. Где отображается содержимое элемента TITLE? Где отображается содержимое элемента BODY?

7. Как отображаются слова «Содержание» и «документа», введенные в двух отдельных строчках? Почему? Проверьте, что происходит при уменьшении ширины окна.

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

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

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

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

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

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

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

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

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

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

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

11. Посмотрите, как отображается этот файл. Установите соответствие между элементами кода HTML и фрагментами документа, отображаемыми на экране.

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

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

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

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

4. Введите тег: <А HREF="first.htm">.

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

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

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

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

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

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

11. Убедитесь в том, что текст между тегами <А> и </А> выделен как ссылка (цветом и подчеркиванием).

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

13. Щелкните на кнопке Назад на панели инструментов, чтобы вернуться к предыдущей странице. Убедитесь, что ссылка теперь считается «просмотренной» и отображается другим цветом.

14. Щелкните на ссылке, удерживая клавишу SHIFT. Убедитесь, что документ, на который указывает ссылка, открылся в новом окне.

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

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

2. Выберите красный цвет переднего плана и зеленый цвет фона. Залейте рисунок фоновым цветом.

3. Инструментом Кисть нанесите произвольный красный рисунок на зеленый фон.

4. Сохраните рисунок под именем pic1.gif (в формате GIF).

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

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

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

8. Введите тег <IMG SRC="pic1.gif" ALIGN="BOTTOM">.

9. Сохраните документ под именем picture.htm.

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

11. Дайте команду Файл  Открыть. Щелкните на кнопке Обзор и откройте файл picture.htm. Посмотрите на получившийся документ, обращая особое внимание на изображение.

12. Вернитесь в программу Блокнот и измените значение атрибута: ALIGN="TOP". Сохраните файл под тем же именем.

13. Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов. Посмотрите, как изменился вид страницы при изменении атрибутов.

14. Вернитесь в программу Блокнот и измените значение атрибута: ALIGN="LEFT". Сохраните файл под тем же именем.

15. Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов. Посмотрите, как изменился вид страницы при изменении атрибутов.

16. Вернитесь в программу Блокнот и добавьте в тег <IMG> атрибуты: HSPACE=40 VSPACE=20. Сохраните файл под тем же именем.

17. Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов. Посмотрите, как изменился вид страницы при изменении атрибутов.

18. Создайте для изображения гиперссылку, используя теги <А> и </А> (см. Создание гиперссылок). Убедитесь в ее работоспособности.

19. Вернитесь в программу Блокнот и добавьте в тег <BODY> атрибут BACKGROUND="pic1.gif". Сохраните файл под тем же именем.

20. Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов. Посмотрите, как изменился вид страницы.

Приемы форматирования текста

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

2. Замените текст, находящийся между тегами <BODY> и </BODY> текстом, содержащим наименование группы, а также фамилию, имя и отчество обучаемого.

3. Введите тег <BASEFONT SIZE="5" COLOR="BROWN">. Он задает вывод текста по умолчанию увеличенным шрифтом и коричневым цветом.

4. Введите произвольный абзац текста, который будет выводиться шрифтом, заданным по умолчанию. Начните этот абзац с тега <Р>.

5. Введите теги: <P><FONT SIZE="-2" FACE="ARIAL" COLOR="GREEN">.

6. Введите очередной абзац текста, закончив его тегом </FONT>.

7. В следующем абзаце используйте по своему усмотрению парные теги: <В> (полужирный шрифт), <I> (курсив), <U> (подчеркивание), <S> (вычеркивание), <SUB> (нижний индекс), <SUP> (верхний индекс).

8. В следующем абзаце используйте по своему усмотрению парные теги: <ЕМ> (выделение), <STRONG> (сильное выделение), <CODE> (текст программы), <KBD> (клавиатурный ввод), <SAMP> (пример вывода), <VAR> (компьютерная переменная).

9. Сохраните полученный документ под именем format.htm.

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

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

12. Изучите, как использованные элементы HTML влияют на способ отображения текста.

13. Вернитесь в программу Блокнот и измените документ так, чтобы элементы, задающие форматирование, были вложены друг в друга. Сохраните документ под тем же именем.

14. Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов. Посмотрите, как изменился вид страницы.