Мета: Закріпити на практиці знання про основні прийоми створення та використання веб-сайтів, перевірити знання та вміння використовувати основні теги та їх атрибути.
Обладнання: ПК
Хід роботи
Завдання 1. Створити веб-сторінку «Запрошуємо до нас за освітою» в середовищі MS Publisher. На веб–сторінці розмістити:
♦ Заголовок – текст «Запрошуємо до нас за освітою»;
♦ Назва організації – Павлоградський технікум Державного ВНЗ “НГУ”;
♦ Емблема технікуму – з файла Емблема.bmp в папці LR17;
♦ Девіз – Професіоналізм, науковість, гуманність;
♦ Світлина технікуму – з файлу Технікум.bmp в папці LR17;
♦ Підпис – список спеціальностей: ЕРГЕО, ПРКК, БО, ДВ, ОПУА, ТОМВ, ОКСМ;
Під назвами спеціальностей розмістити гіперпосилання на файли: ЕРГЕО.htm, ПРКК.htm, БО htm, ДВ.htm, ОПУА.htm, ТОМВ.htm, ОКСМ.htm в папці LR17.
1. Завантажити MS Publisher. Для роботи нам знадобляться панелі Стандартна, Форматування, Область задач, Об’єкти, Веб-інструменти.
2. В панелі задач оберіть пункт Створення публікації – Пуста публікація – Веб-сторінка.
3. В панелі об’єктів оберіть – бібліотеку макетів. За власним смаком оберіть обрамлення та один з заголовків сторінки. В заголовку визначте параметри: заголовок, назва організації, емблема, девіз.
4. Щоб вставити світлину технікуму, можна виконати дії: меню Вставка – Рисунок – З файла – в файловій системі відкрити та виділити значок файлу Технікум.bmp в папці LR17.
5. В панелі об’єктів оберемо об’єкт – підпис та введемо в нього назви спеціальностей.
Щоб під назвою спеціальності ЕРГЕО розмістити гіперпосилання на файл ЕРГЕО.htm, теба виконати дії:
♦ Виділити назву спеціальності;
♦ В панелі Веб-інструменти визначити команду – добавити гіперпосилання;
♦ В ДВ в файловій системі виділити значок файла ЕРГЕО.htm.
♦ В публікації при цьому зміниться вигляд назви спеціальності, це ознака, що під текстом розміщено гіперпосилання.
7. Аналогічно розмістіть гіперпосилання під інші назви спеціальностей.
8. Збережіть публікацію з іменем Запрошення, при цьому тип файлу вкажіть Веб-сторінка. Закрийте публікацію.
9. Відкрийте файл Запрошення .htm в середовищі будь-якого броузера. Спробуйте, чи працюють гіперпосилання.
10. Відкрийте сайт в середовищі програми Блокнот.
Завдання 2. Створити сайт в середовищі редактора з використанням шаблону. Шаблон знаходиться папці LR17 в файлі Шаблон.txt Розглянемо його структуру:
- Основні теги <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″>.
7. < 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. Оформіть звіт, зробіть висновки.
Кінцевий текст документу: Відображення веб-сторінки в броузері