|
|
Да. Тема Розробка і публікація вебсайту
ПРАКТИЧНА РОБОТА Тема: Розробка і публікація веб-сайту Мета:ознайомитися з принципами ергономічного розміщення інформації на веб- сторінках, основними командами мови НТМL, формувати уміння розбивати матеріал на логічні частини, відпрацювати навички роботи при створенні НТМL-документа. ТЕОРЕТИЧНІ ВІДОМОСТІ 1. Структура НТМL-документа. <НТМL> початок документа <НЕАD> заголовок документа < ТІТLЕ> заголовок вікна брaузера з відкритим файлом кінцевий тег заголовка вікна кінцевий тег заголовка документа <ВODY> зміст документа документ кінцевий тег зміста документа кінець документа 2. Задання заголовків. Заголовки поділяють HTML-документ на логічно завершені блоки. Для задання заголовків використовуються парні теги: <Н1> текст заголовок 1-го рівня. Передбачено 6 рівнів заголовків. <Н6> заголовок 6-го рівня 3. Вирівнювання абзаців. Абзац задається парним тегом <Р>. перехід на новий рядок. За замовчуванням абзаци вирівнюються по лівому краю сторінки. Змінити вирівнювання можна за допомогою атрибута align. Типи вирівнювання: <Р align= "center”> текст вирівнювання по центру <Р align= "left”> текст вирівнювання по лівому краю <Р align= "right”> текст вирівнювання по правому краю <Р align= "justify”> текст вирівнювання по ширині 4. Форматування символів. Параметри шрифту визначаються за допомогою парного тега . Для цього тега передбачені такі атрибути: Face назва шрифту Color колір шрифту Size розмір Види написання: <В> текст напівжирний текст текст курсив < U> текст підкреслений текст 5. Завдання кольору шрифту і фону сторінки. У тегу використовуються такі атрибути: Text= “колір ” колір тексту Bgcolor="колір” колір фону Web-сторінки 6. Створення рухомого рядка. Для створення рухомого рядка використовується парний тег 7. Коментарі. Коментар означає фрагмент коду, що не виконується і розташований між групами символів 8. Списки 1. Маркірований (невпорядкований) списоквідкривається тегом і закінчується ,а кожен його пункт починається стандартним тегом . Наприклад: 2
Результат:
перший пункт списку
• перший пункт списку
другий пункт списку
• другий пункт списку
третій пункт списку
• третій пункт списку
2. Нумерований (впорядкований) списоквикористовує теги
і ,а кожен його пункт починається стандартним тегом . Наприклад:
Результат:
перший пункт списку
1. перший пункт списку
другий пункт списку
2. другий пункт списку
третій пункт списку
3. третій пункт списку
9. Робота з таблицями.
Таблиці у Web-сторінках застосовуються не тільки для розміщення табличних даних, а й для вставки зображень і посилань, для раціонального компонування Web-сторінок.
Таблиці будуються за принципом вкладення і вводяться на Web-сторінку за допомогою ряду елементів. Кожна таблиця починається тегом . Створювана таблиця ніби розгортається по рядках, а рядки заповнюються комірками. При цьому всередині тегів
можуть вставлятися такі елементи:
TR – елемент створення рядка;
TD – елемент, що визначає вміст комірки даних;
ТН – елемент, що визначає комірку заголовка.
Команда може мати наступні параметри:
- BORDER - визначає лінії, що розмежовують клітки в таблиці. Ширина лінії задається командою BORDER = N.
- BGCOLOR - визначає колір фонового зображення в таблиці.
10. Створення посилань
Види посилань.
Створення внутрішного посилання.
Внутрішні посилання доцільно використовувати, коли всі частини великого документа не відображаються цілком у вікні браузера. Внутрішнє посилання задається за допомогою елемента якірного тегу <А> з атрибутом href.
Наприклад. <А href=”#глав 1”> Розділ 1. Відплиття Богомира
Щоб встановити колір посилання, потрібно тег доповнити новими параметрами link
- колір посилання, alink - колір активного посилання, vlink - колір посилання, яке відвідували.
Створення зовнішнього посилання.
Найважливішим поняттям в HTML є гіперпосилання, яке дозволяє зв’язати текст або будь- який об’єкт з іншими гіпертекстовими документами. Посилання позначаються тегом <А>.
Загальний вигляд посилання: <а href=”filename”>Текст_посилання.
Текст між <А> і використовується як опис посилання, і позначається, як правило, синім кольором, і підкреслюється лінією.
Посилання за допомогою зображення.
Наступний приклад дозволяє кликанням на логотипі компанії перейти на її домашню сторінку: <а href=”/”> .
Щоб при натисканні лівої кнопки миші на зображення, перейти на іншу домашню сторінку, наприклад, на: HTTP://WWW.HOME.СОМ, потрібно записати наступну команду:
<А href=«HTTP://WWW.HOME.COM»> 
Створення посилання на поштову адресу.
Наприклад моя поштова адреса в GEOCITIES.COM: info@geocities.com
Для організації посилання в моїй домашній сторінці на мою поштову адресу необхідно записати в кінці головного розділу домашньої сторінки:
<А href=mailto: info@geocities.com
> Перейти на мою поштову адресу
У наступному рядку необхідно задати таке ж посилання за допомогою аплікації MAIL12.GIF замість тексту:
<А href= mailto:info@geocities.com>
3 ХІД РОБОТИ 1. Робота творча, тому можна не притримуватися повністю методичних вказівок. 2. Робота – індивідуальна. Кожен студент створює свій власний сайт. 3. В своїй робочій папці створіть папку «My_site». Всередині неї створіть папку «img», де будуть зберігатися графічні матеріали Вашого сайта. 4. Створити папку «html», де будуть розміщуватися блокноти з інформацією, на яку Ви будете посилатися. 5. Завантажити програму Блокнот. 6. Створити веб-сайт про себе, що містить автобіографію (bio.htm) 3 бали, опис майбутньої спеціальності (spec.htm) 3 бали, відомості про власні уподобання (upod.htm) 3 бали, так, щоб кожна сторінка мала власний власне фонове зображення, фото, декілька абзаців різного оформлення. 7. Кожен блокнот має структуру веб-сторінки та певну інформацію. 8. В блокноті default.htm (останній рисунок ) розміщені посилання на біографію, спеціальність та уподобання 2 бали
4
9. Переглянути свій сайт, та внести свої корективи.
10. Результат діяльності показати викладачу.
файл
bio.htm = 3 бали
файл
spec.htm = 3 бали
файл
upod.htm = 3 бали
файл default.htm + 2 бали (коли є 3 попередніх)
За творчий підхід +1 бал
Ваша оцінка може бути від 4 до 12 балів!
|
|
|
Скачать 0.56 Mb.