Задание. Создайте информационную интернет-страницу, рассказывающую о компании и содержит логотип и контактную информацию

Создайте информационную интернет-страницу, рассказывающую о компании и содержит логотип и контактную информацию.

Контактную информацию оформить в виде таблицы, которая должна содержать адрес и телефон.

Структура интернет-страницы представлена на рисунке 1:

Рисунок 1 – Структура интернет-страницы

Для ее создания использовать следующий код:

<HTML>

<HEAD>

<TITLE>Лабораторная работа №3 </TITLE>

</HEAD>

<BODY BGCOLOR="steelblue" TEXT="FFFAFA">

<img src="logo.jpg" width="200" height="100">

<HR>Информация о компании<HR>

<HR>Текст Текст Текст Текст Текст Текст ТекстТекст Текст Текст Текст Текст Текст Текст Текст <p>

Текст Текст Текст Текст Текст Текст ТекстТекст Текст Текст Текст Текст Текст Текст Текст</p><p>

Текст Текст Текст Текст Текст Текст ТекстТекст Текст Текст Текст Текст Текст Текст Текст</p><p>

Текст Текст Текст Текст Текст Текст ТекстТекст Текст Текст Текст Текст Текст Текст Текст</p><p>

Текст Текст Текст Текст Текст Текст ТекстТекст Текст Текст Текст Текст Текст Текст Текст</p><p>

Текст Текст Текст Текст Текст Текст ТекстТекст Текст Текст Текст Текст Текст Текст Текст</p><p>

Текст Текст Текст Текст Текст Текст ТекстТекст Текст Текст Текст Текст Текст Текст Текст</p><HR>

<TABLE BORDER=1 WIDTH=600 ALIGN=CENTER>

<CAPTION> Контактная информация </CAPTION>

<TR>

<TD>Адрес</TD>

<TD>000000, г. Брянск, ул. Станке Димитрова, дом 00</TD>

</TR>

<TR>

<TD>Телефон</TD>

<TD>11-22-33</TD>

</TR>

</TABLE>

</BODY>

</HTML>

После выполнения каждого задания по изменению страницы (после пунктов 7, 11,15, 19) следует сохранять иллюстрации для вставки их в отчет. Кроме этого следует сохранять для отчета изменены HTML-код (можно его копировать в Word после внесения изменения).

1. Создайте папку. В ее названии укажите Вашу фамилию.

2. Скопируйте в папку файл логотипа.

3. Откройте Блокнот.

4. Введите HTML-код.

5. Сохраните документ под названием proba с расширением.html в папке с Вашей фамилией (там где уже был сохранен логотип).

6. Отключитесь от сети Интернет, если были до этого подключены.

7. Просмотрите созданную Вами страницу в браузере. При этом не обязательно закрывать Блокнот (обратите внимание, что необходимо сохранять любые вносимые изменения в HTML-код).

8. Измените цвет фона в соответствии с Вашим вариантом:

Вариант Цвет
  papayawhop
  darkseagreen
  hotpink
  lightslategray
  lightsteelblue
  mistyrose
  navy
  orange
  red
  black

9. Сохраните изменения в Блокноте.

10. Отключитесь от сети Интернет, если были до этого подключены.

11. Просмотрите как будет выглядеть Ваша страница, открыв ее в браузере.

12. Измените цвет текста, выбрав его самостоятельно из таблицы цветов. Цвет подобрать исходя из того, что текст должен легко восприниматься и читаться на выбранном цвете фона.

13. Сохраните изменения в Блокноте.

14. Отключитесь от сети Интернет, если были до этого подключены.

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

16. Вставьте сразу после логотипа «НАЗВАНИЕ КОМПАНИИ»

17. Сохраните изменения в Блокноте.

18. Отключитесь от сети Интернет, если были до этого подключены.

19. Просмотрите как будет выглядеть Ваша страница, открыв ее в браузере.

20. Покажите результаты работы преподавателю.

Содержание отчета о выполнении лабораторной работы

1. Цель лабораторной работы.

2. Задачи лабораторной работы (формулируются студентами, исходя из цели и задания).

3. Общие вопросы (для всех студентов одинаковые):

- теги языка HTML;

- структура документа HTML;

- вставка рисунков в документ HTML;

- вставка таблиц в документ HTML;

- вставка ссылок на файлы в документ HTML;

- таблица цветов.

4. Результаты выполненной лабораторной работы: поэтапное описание выполнения практической части лабораторной работы (обязательно должны быть представлены измененные HTML-коды в соответствии с заданием и иллюстрации изменений интернет-страницы).

5. Выводы по результатам проделанной работы.

6. Использованные источники информации (оформляются в строгом соответствии с правилами, изложенными в СТО 02068025.11-2012 «Общие требования к структуре и оформлению учебной текстовой документации»).

Обратите внимание!

Все иллюстрации (таблицы, рисунки, схемы и т.д.) должны иметь название. Оно (также как текст и сами иллюстрации) оформляется в отчете по требованиям СТО 02068025.11-2012 «Общие требования к структуре и оформлению учебной текстовой документации» и с использованием инструментов Microsoft Office Word.

Отчет должен иметь содержание, размещенное после титульного листа и сделанное в Microsoft Office Word как автособираемое оглавление.

Титульный лист оформляется по выданному образцу. Он учитывается в нумерации, но номер на нем не проставляется. Титульный лист и остальную часть отчета следует делать в одном документе Microsoft Office Word.

После выполнения лабораторной работы и оформления отчета необходимо подготовить защиту по контрольным вопросам.

Отчет, после проверки преподавателем, сохраняется в указанной им папке на компьютере, распечатывается и скрепляется для предоставления к защите.

Защита выполненной лабораторной работы осуществляется в указанное преподавателем время. На ней студент должен показать знания и практические навыки работы, полученные в ходе выполнения лабораторной работы.

Контрольные вопросы

1. Для каких целей используется язык HTML?

2. Назовите теги языка HTML.

3. Какова структура документа HTML?

4. Какая программа (приложение) используется для создания и редактирования документов HTML?

5. Каковы особенности сохранения документа HTML?

6. Как вставить в документ HTML таблицу?

7. Как изменить размер таблицы в HTML-документе?

8. Как вставить в документ HTML рисунок?

9. Как изменить цвет фона документа HTML?

10. Как изменить цвет текста в HTML-документе?

11. Как вставить в документ HTML линию?

12. Как вставить в документ HTML ссылку на файл?

13. Как осуществляется форматирование текста в HTML-документе?

14. Как просмотреть созданную интернет-страницу?


Понравилась статья? Добавь ее в закладку (CTRL+D) и не забудь поделиться с друзьями:  



double arrow
Сейчас читают про: