Лабораторна робота № 17 «Розробка веб-сайту».

Мета: Закріпити на практиці знання про основні прийоми створення та використання веб-сайтів, перевірити знання та вміння використовувати основні теги та їх атрибути.

Обладнання: ПК

Хід роботи

1Завдання 1. Створити веб-сторінку «Запрошуємо до нас за освітою» в середовищі MS Publisher. На вебсторінці розмістити:

♦  Заголовок – текст  «Запрошуємо до нас за освітою»;

♦   Назва організації – Павлоградський технікум Державного ВНЗ “НГУ”;

♦   Емблема технікуму – з файла Емблема.bmp в папці LR17;

♦   Девіз – Професіоналізм, науковість, гуманність;

♦   Світлина технікуму – з файлу Технікум.bmp в папці LR17;

♦   Підпис – список спеціальностей: ЕРГЕО, ПРКК, БО, ДВ, ОПУА, ТОМВ, ОКСМ;

Під назвами спеціальностей розмістити гіперпосилання на файли: ЕРГЕО.htm,  ПРКК.htm, БО htm,  ДВ.htm, ОПУА.htm, ТОМВ.htm, ОКСМ.htm  в папці LR17.

1. Завантажити MS Publisher. Для роботи нам знадобляться панелі Стандартна, Форматування, Область задач, Об’єкти, Веб-інструменти.
2. В панелі задач оберіть пункт Створення публікації – Пуста публікація – Веб-сторінка.
3. В панелі об’єктів оберіть  –  2бібліотеку макетів. За власним смаком оберіть обрамлення та один з заголовків сторінки. В заголовку визначте параметри: заголовок, назва організації, емблема, девіз.
4. Щоб вставити світлину технікуму,  можна виконати дії: меню Вставка – Рисунок – З файла – в файловій системі відкрити та виділити значок файлу Технікум.bmp в папці LR17.
5. В панелі об’єктів оберемо об’єкт 3 – підпис та введемо в нього назви спеціальностей.
Щоб під назвою спеціальності ЕРГЕО розмістити гіперпосилання на файл ЕРГЕО.htm, теба виконати дії:

♦   Виділити назву спеціальності;

♦   В панелі Веб-інструменти визначити команду  4 – добавити гіперпосилання;

♦   В ДВ в файловій системі виділити значок файла ЕРГЕО.htm.

♦   В публікації при цьому зміниться вигляд назви спеціальності, це ознака, що під текстом розміщено гіперпосилання.

7. Аналогічно розмістіть гіперпосилання під інші назви спеціальностей.
8. Збережіть публікацію з іменем Запрошення, при цьому тип файлу вкажіть Веб-сторінка. Закрийте публікацію.
9. Відкрийте файл Запрошення .htm в середовищі будь-якого броузера. Спробуйте, чи працюють гіперпосилання.
10. Відкрийте сайт в середовищі програми Блокнот.

5Завдання 2. Створити сайт в середовищі редактора з використанням шаблону. Шаблон знаходиться папці LR17 в файлі Шаблон.txt Розглянемо його структуру:

  1. Основні теги <HTML> … </HTML> містять заголовок програми і тіло програми:

<HTML>

Заголовок програми

Тіло програми

</HTML>

2. Заголовок програми <HEAD> …. </HEAD> містить команду <META content=”charset=windows-1251″>, що визначає інформацію про кодування HTML-документу. В даному випадку визначене стандартне кодування Windows. Між тегами <TITLE> і </TITLE> розташоване ім’я HTML-документу. Це ім’я  браузер використовує в заголовку вікна  Windows, в якому відображається документ.

<HTML>

Заголовок програми

Тіло програми

</HTML>

<HEAD>

<META content=”charset=windows-1251″>

<TITLE>Зголовок</TITLE>

</HEAD>

3. Спробуйте змінити заголовок програми на текст «Мій перший крок».
4. Тіло програми: Між тегами <BODY> і </BODY> розташовані команди, виконуючи які броузер виводе певну інформацію в вікно документу. Внесіть зміни на зразок:

< BODY >

Привіт, це моя перша сторінка.

</ BODY >

5. Збережіть створений текст з будь-яким іменем, але розширення визначте .html або .htm. Спробуйте відкрити файл в середовищі будь-якого броузера. Перегляньте сайт щоб пересвідчитись, що вказівки виконані вірно.

6. Згорніть вікно броузера і продовжимо редагування файлу. Спробуємо змінити колір тексту. Для цього в команді <BODY> визначимо атрибути. Атрибут має ім’я і значення, між якими ставиться знак «=». Атрибут, що змінює колір шрифта – text, а значення кольору можна визначити з таблиці. Наприклад: <body text=”#336699″>.

67. < BODY  text=”#336699″ bgcolor=”#FFFFFF”>Колір фону визначає атрибут bgcolor, значення якого визначається тією ж таблицею. Наприклад <body text=”#336699″ bgcolor=”#FFFFFF”>.

8. Додайте до тіла сайту текст «Я вивчаю мову HTML, щоб створити власну домашню Web-сторінку для спілкування з друзями i знайомими. Щоб вони могли подивитися мою фотокартку, прочитати про мене, написати кілька рядків в мою книгу для гостей.»

9. Заголовки є важливою частиною документу, вони розділяють інформацію на окремі логічні частини. В HTML документі існують заголовки 6-ти рівнів за допомогою конструкції  <Hn>Текст заголовка</Hn>, де  n-номер рівня. Рівень заголовка визначає розмір шрифта при відображенні документу. Спробуємо тіло програми розділити на кілька заголовків:

< BODY  text=”#336699″ bgcolor=”#FFFFFF”>

<H1>Привіт, це моя перша сторінка. </H1>

<H2>Я вивчаю мову HTML, щоб створити власну домашню Web-сторінку для спілкування з друзями i знайомими. Щоб вони могли подивитися мою фотокартку, прочитати про мене, написати кілька рядків в мою книгу для гостей.  </H2>

</ BODY >

10. Щоб вставити малюнок, треба скористатися тегом: <img src=”my.jpg”>, де my.jpg -ім’я файла, що містить малюнок (в одній папці з сайтом). Тег може містити також атрибут align, значення якого визначає обтікання малюнка текстом:

малюнок з лівого краю, текст його обтікає справа: =”left”;

малюнок з правого краю, текст його обтікає зліва: =”right”.

Спробуйте в документ вставити малюнок. Але попередньо треба файл малюнка помістити в одній папці з документом.  Визначте розташування малюнка з лівого краю, текст, що його обтікає справа, наприклад <img src=”емблема ПТНГУ.bmp”  align=”left” >.

11. Щоб певний текст сайту зробити посиланням на інший файл, використаємо тег <а href=”ім’я файлу”> текст </а>. Додайте в текст документу:

Моя спеціальність –  <а href=”ЕРГЕО.htm”> ЕРГЕО </а>

12. Збережіть створений документ і перегляньте його в середовищі броузера.

13. Оформіть звіт, зробіть висновки.

Кінцевий текст документу:                                Відображення веб-сторінки в броузері                                                                    

78