Тема: Створення веб-сайту, як один зі способів підвищення іміджу та рекламування підприємства і його продукції
Мета: Навчитися створювати веб-сайт, вивчити основні теги, які використовують для створення веб сайтів, дослідити ефективність використання веб-сайтів, як один зі способів підвищення іміджу та рекламування діяльності підприємства
Теоретичні відомості
World Wide Web(WWW) - це найвідоміша та найпопулярніша служба Iнтернета. Ця глобальна, розподілена по цілому світі інформаційна гіпертекстова мультимедійна система дозволяє з'єднати в одне ціле інформацію різних видів, яка зберігається на різних комп'ютерах. Нагадаємо, що інформація в WWW розповсюджується у вигляді Web-сторінок(Web-документів). Декілька Web-документів з однієї теми, що належать одному власникові чи є на одному комп'ютері, утворюють Web-вузол, який часто називають сайтом. Основним принципом використання Web-сторінок є активізація гіпертекстових посилань, за допомогою яких можна здійснити перехід в інші місця Web-сторінки або до інших Web-сторінок. В основі WWW лежать два поняття: гіпертекстові посилання та формат документів HTML. Завдяки гіпертексту Web-сторінки набувають властивості інтерактивності.
За основу передачі інформації в інтернеті був узятий HTML-код, що може формуватися (чи змінюватися) сервером по запиту користувача (технології ASP, CGI) чи ж самим користувачем (технологія JavaScript). У HTML-коди можуть вставлятися коди інших технологій (це дуже важливий момент, на якому побудована практично вся реклама в інтернеті).
HTML – мова розмітки гіпертексту (Hyper Text Markup Language чи скорочено HTML).
HTML-код – це звичайний текстовий документ, що містить у собі повну інформацію для браузера про параметри, і текстову інформацію web-документа, а також інформацію про місце збереження графічної і звукової інформації на цьому сервері (іншому сервері чи комп'ютері користувача) та параметрах її виводу у вікні браузера.
HTML володіє однією чудовою властивістю, що лежить в основі web-реклами – гіперпосилання: переглядаючи один документ і зустрічаючи гіперпосилання (надалі просто посилання) користувач може по цьому посиланню переключитися на інший документ, на який веде це посилання.
Вихідний текст документа складається з послідовності команд, які називають тегами(tag). Під час перегляду теги спрацьовують, і завдяки їм на екран виводяться запрограмовані елементи зображення. Наприклад, якщо на початку абзацу стоїть тег <center>, то весь абзац буде вирівняно по центру вікна, незалежно від того, в якому вікні здійснюється перегляд документа і яким шрифтом він зображається. Теги HTML дозволяють вирівнювати рядки документа, керувати кольором фону та кольором тексту, дозволяють вставляти в текст ілюстрації, задавати заголовки різних рівнів, будувати таблиці, створювати гіпертекстові посилання на інші документи.
Web-документ зберігається і пересилається як файл з розширенням html або htm (HTML-файл). Це звичайні текстові файли-програми, написані мовою HTML. Відображаються такі файли на екрані інакше, ніж вони виглядають у HTML-файлі. Для відображення HTML-файлів використовують броузери.
Широке розповсюдження HTML-документи одержали завдяки різноманітним можливостям представлення інформації, легкістю написання та сумісністю з різними операційними системами. Спочатку нагадаємо, що команди мови HTML називають тегами. Теги бувають одинарними і парними. Більшість тегів є парними, наприклад, тег означення HTML-файлу: <html>:</html>. Парні теги позначають початок і кінець області дії відповідної команди. Теги записують у кутових дужках, причому той тег, що закриває область дії, має косу риску (слеш/slash). Тег може містити параметри, які користувач записує у першому тезі через пропуск, наприклад, <body bgcolor="black">.
Всі програми, написані мовою HTML (HTML-файли) мають однакову структуру. Можна зекономити час при створенні своїх Web-сторінок, якщо використовувати цю структуру як еталон. Зокрема, обов'язково повинні бути такі команди(теги)
<html>
<head>
<title> ..Назва вікна Web-сторінки.. </title>
</head>
<body>
...
</body>
</html>
Теги <html> i </html> обмежують WWW-документ і записуються лише задля форми. Команди <head> i </head> обмежують заголовок сторінки. Ці теги також не є обов'язковими, вони допомагають краще структурувати сторінку. Нарешті, <title> виконує важливу функцію. Текст, введений між <title> і </title>, з'являється в броузері в рядку заголовку. Ще важливішим є тег <body>, який дозволяє описати власне Web-документ. В цьому місці розміщується певна кількість параметрів, що визначають зовнішній вигляд документа. Ці параметри, наприклад, визначають, як виглядає фон і колір тексту і яке зображення повинно бути на задньому плані Web-сторінки.
Типовий Web-документ складається з текстових блоків, рисунків, таблиць, ліній, гіперпосилань. Більш складні Web-документи містять фрейми (вкладені Web-сторінки), елементи керування та вводу інформації(кнопки, перемикачі, поля вводу тексту), динамічні об'єкти (Java Applet, Java Script, ActiveX).
Є три типи текстових блоків: текстові абзаци, списки, таблиці. За замовчування текст відображається чорним кольором, але при потребі можна змінити колір, розмір, стиль та шрифт тексту. Абзаци на сторінці за замовчуванням розмежовуються переводом рядка і не мають відступів у першому рядку. Абзац може бути вирівняний до одного з країв або по центру вікна. Зручність перегляду Web-сторінок зумовлена тим, що броузер автоматично масштабує елементи по горизонталі, враховуючи розміри вікна, і при потребі відображає тільки вертикальну смугу прокрутки. інформація на сторінці традиційно відображається на білому фоні, але його колір можна змінити на інший або використати фонову картинку.
Користувачі мережі Internet більше всього цінують інформацію. Тому зміст web-страницы є одним з ключових моментів, на який необхідно звернути увагу при розробці сайту, і яке дасть величезну перевагу фірмі перед конкурентами у разі розміщення потрібною користувачеві інформації. Зміст, представлений на web-странице повинно задовольняти наступним умовам:
- відповідність цілям створення сайту;
- облік особливостей цільового сегменту споживачів;
- інформація повинна бути певною мірою унікальною, щоб привернути увагу відвідувачів, тим паче, що в Internet існує безліч схожих web-страниц і конкуренція між ними досить сильна;
- інформація повинна бути оперативною. Для підтримки інтересу до сайту його необхідно постійно оновлювати і модернізувати. Чим частіше відбуватиметься оновлення інформації на сервері – тим вище буде інтерес і, відповідно, відвідуваність сайту;
- об'єктивність і достовірність. Відвідувачі, що виявили помилкову або неточну інформацію, навряд чи захочуть повторно звернутися до цієї сторінки;
- відсутність надмірно нав'язливого рекламного характеру.
На web-стрінці можна представити різноманітні матеріали: інформацію про фірму і її продукцію, каталог продуктів і послуг, списки ділерів, адреси торгових представників, довідкові відомості, новини, мережевий магазин, розділ зворотного зв'язку, вакансії і інше. Але слід розміщувати тільки ту інформацію, яка виявиться найбільш корисною і потрібною.
Одне з основних завдань, яке слід ставити перед собою при складанні текстів для web-страниц, – це використання технічної і розважальної інформації для виділення особливостей фірми. Доступність створення сайту приводить до того, що у будь-якого сервера існує величезна безліч конкурентів. Отже, текст, приведений на web-странице повинен чітко відповідати на питання: «Чим відрізняється компанія від останніх?». Нелішнім буде розміщення логотипу або товарного знаку фірми, а також спосіб зв'язку з адміністрацією сервера на кожній web-странице сайту.
Дизайн грає дуже важливу роль в залученні уваги користувачів мережі Internet до певного сайту. При розробці дизайну сторінок, перш за все, потрібно враховувати особливості сприйняття цільової аудиторії, але при цьому оформлення повинне відповідати змісту сайту, а також повинно бути витримано в одному стилі (колірну гамму, можливо, узяти з логотипу фірми), що створить певне уявлення про фірму і її продукцію.
Дизайн web-страниц припускає розробку наступних компонентів: колірна гамма, шрифт, графіка і компоновка сторінок. При цьому мережа Internet накладає і певні обмеження на можливості графічного оформлення web-страниц: час завантаження, пропускна спроможність каналу передачі даних, розмір графічних файлів, сумісність з різними браузерами, передача колірної палітри і ін.
На завершення звернемо увагу, що для створення Web-сторінок дизайнери використовують гіпертекстові редактори, наприклад, Macromedia Dreamweaver, Microsoft FrontPage та інші, хоча за достатнього володіння мовою HTML можна писати Web-сторінки в будь-якому текстовому редакторі, наприклад, Блокнот(NotePad). Після написання програм файл потрібно зберегти на диску з певною назвою та розширенням .html чи .htm. Сучасні текстові процесори, наприклад, MS Word, Lotus WordPerfect дають змогу створити Web-сторінки методом конструювання без застосування команд HTML, оскільки вони генерують ці команди автоматично. Загальна назва таких програм, які мають можливість автоматизованого створення Web-сторінок без явного застосування користувачем мови HTML - Web-композери.
Розглянемо дещо детальніше можливості композера, які має програма MS Word. Щоб створити Web-сторінку або цілий Web-сайт, потрібно під час створення нового документу перейти на закладку Web-сторінки і скористатись Майстром Web-сторінки чи створити нову сторінку. У другому випадку алгоритм дій дизайнерів такий:
· Командою меню Формат->Фон задають колір фону чи спосіб замальовування екрана певною текстурою.
· Уводять текст, вибираючи шрифт, його розмір, колір, вирівнювання тощо.
· Створюють списки, як у звичайному текстовому редакторі.
· Вставляють горизонтальні лінії командою меню Вставка->Горизонтальная линия, і вибирають тип лінії.
· За допомогою команди Таблица створюють і форматують таблиці.
· Використовують команду Вставка для вставлення картинок, фотографій, звуку, гіперпосилань тощо.
· Записують створений файл як Документ HTML, і перглядають його броузером.
Завданнями даної лабораторної роботи є:
1. Створення веб-сайту.
2. Аналіз веб-сайту і його вплив на користувачів мережі Інтернет та на кінцеві результати ефективної діяльності підприємства
Хід роботи
1. Ознайомитися з теоретичними відомостями та додатком 1 «Структура створення реклами».
2. Використовуючи один із текстових редакторів, наприклад, NotePad (блокнот), створіть HTML-файл такого змісту:
<html>
<head>
<title> Ресторан «Пустуньчик» </title>
</head>
<body>
...
</body>
</html>
Запишіть цю структуру і збережіть файл під іменем: Офіційний сайт Підприємства «______________».html. В своїй папці, на диску D.
3. Вставте між <body> і </body> відповідний текст, використовуючи для цього зібрану інформацію про підприємство в лабораторній роботі № 2
<h1>Ресторан «Пустуньчик» </h1>
Сучасний ресторан задовольнить Ваші бажання та смаки. (даний текс повинен містити інформації у вигляді «Слогану»)
<p>Кожний може відвідати даний ресторан, так як даний ресторан поділений на зали, відповідно до страв, які представляють різні країни світу. </p>
<p>Ресторан пропонує:страви з різних країн; фірмові страви від шеф-кухаря; замовлення продукції та доставка по адресу.</p>
4. Збержіть ці зміни у файлі Офіційний сайт Підприємства «_____________».html
5. Не закриваючи вікна текстового редактора, запустіть Internet Explorer і завантажте файл Офіційний сайт Підприємства «_____________».html,використовуючи команди головного меню Файл ->Открыть (File -> Open). Розгляньте результат вашої першої спроби створення власної Web-сторінки. Зверніть увагу на розміри символів заголовку, вирівнювання речень до країв сторінки. Поверніться до вікна текстового редактора, де виведено зміст файлу Офіційний сайт Підприємства «_____________».html.
6. Поміняйте парні теги <h1>, </h1> на <h3>, </h3>, і продовжіть інформацію про перелік страв (товарів):
Основні страви, що пропонує ресторан:
<ul>
<li>французька кухня
<li>італійська кухня
<li>европейська
<li>персональні замовлення страв з різних країн (виконуються за пару днів)
</ul>
7. Збережіть цей змінений файл Файл -> Сохранить (File -> Save). Зробіть висновок про призначення тегів <h3>, </h3>, <ul>, </ul>, і <li>.
8.Далі зробіть у зміcті файлу Офіційний сайт Підприємства «_____________».htmlтакі зміни: уведіть у фрагмент тексту, про страви, що пропонує ресторан додаткові теги <li>, у тезі <body> вставте параметри bgcolor і text, які відповідають за колір фону і тексту відповідно. В результаті одержимо, наприклад, такий текст програми:
<html>
<head>
<title>Ресторан «Пустуньчик»</title>
</head>
<body bgcolor="blue" text="yellow">
<h2>Ресторан «Пустуньчик»</h2>
<center><b><i> Сучасний ресторан «Пустуньчик» задовольнить Ваші бажання та смаки. </i></b></center>
<p><i>Ресторан "Пустуньчик"(ресторан Вашої сім'ї) </i>.
<p>Основні страви, що пропонує ресторан:
<ul>
<li>французька кухня
<ul>
<li>крем-суп
<li>жаб`ячі лапки під соусом
<li>сашінєти
<li>бестлле
</ul>
<li>італійська кухня
<ol>
<li>різотто
<li>спагетті
<li>піретті
</ol>
<li>европейська
<li>персональні замовлення страв з різних країн (виконуються за пару днів)
</ul>
</body>
</html>
9. Збережіть цей файл із внесеними змінами під тим же іменем Офіційний сайт Підприємства «_____________».html.
10. Знову перегляньте, як змінився зовнішній вигляд вашої Web-сторінки, використовуючи броузер Internet Explorer.
11. Завантажте графічний редактор, наприклад, Paint, і створіть невеличкий малюнок для власної Web-сторінки. Збережіть його у файлі paint Фірмовий знак.bmp в Вашій папці на диску D:\.
12. Поверніться до HTML-файлу Офіційний сайт Підприємства «_____________».htmlі внесіть у текст програми перед тегом </body> такий фрагмент:
<img src="D:\папка МР\ paintФірмовий знак.bmp" alt="емблема" align="right" width="240" height="200">
<img hspace="40" vspace="40">
<marquee bgcolor="green" height="40">
Адреса підприємства______________________
</marquee>
13. Збережіть змінений файл. Перегляньте його у броузері.
14. Додамо до нашого сайту звуковий ефект, який буде супроводжувати сайт при його завантаженні. Для даної операції потрібно використати відповідний тег <BGSOUND SRC= "адреса звукового файлу"> - (відтворюється звук із заданого файлу у момент запуcку сторінки).
Для звукового ефекту потрібно використовувати назви звукових файлів в яких розширення au, wav, mid, midi, ra, а відеофільмів - avi, vivo, mpeg.
Поверніться до HTML-файлу Офіційний сайт Підприємства «_____________».htmlі внесіть у текст програми перед тегом </body> такий фрагмент (даний текст програми можна внести в будь-яку частину нашого сайту, але в частину між тегами <body>…….</body>):
<BGSOUND SRC="D:\Stacionar\Grupa_51\Vera_-_Ata.wav">
15. Збережіть змінений файл. Перегляньте його у броузері.
16. Повернемося до HTML-файлу Офіційний сайт Підприємства «_____________».html
17. Додамо до сайту рисунок (фотографію, анімацію), який буде відкриватися за допомогою гіперпосилання на файл:
<A HREF= "D:\Stacionar\Grupa_51\DSC03554.JPG">"Фірмова страва дня"
</А>
18. Збережіть змінений файл. Перегляньте його у броузері. Чи сподобалася вам створена Web-сторінка?
Увага! При створенні власної Web-сторінки використайте короткий довідничок про призначення тегів (додаток 1).
19. За допомогою тегів додати до Вашої Web-сторінки додаткові картинки, музику відповідно до специфіки Вашого підприємства, також змініть розмір та колір тексту.
20. Хід роботи, кінцеві результати та висновки по даній лабораторній роботі оформити в документі «Реклама в Інтернеті»
21. Ознайомитися з контрольними питаннями та підготуватися до захисту лабораторної роботи
Таблиця тегів Табл. 6.1
| Синтаксис тегів | Призначення | Атрибути і їх аргументи |
| <TABLE> ... </TABLE> <TR> ... </TD> <TD>... </TD> <TH>... </TH> <CAPTION> | Створює таблицю з однією або декількома рядками (блоки <TR>)і стовпцями (блоки TD>). За бажанням можна додати заголовки стовпців (блоки <TH>) або заголовок для всієї таблиці (<CAPTION>) | ALIGN Установлює вирівнювання тексту в комірках рядка. Припустимі значення: ALIGN=LEFT (вирівнювання вліво), ALIGN=CENTER (вирівнювання по центру), ALIGN=RIGHT (вирівнювання вправо). ... |
Обов'язкові теги
<html> ... </html>
Тег <html> відкриває HTML–документ. Тег </html> – завершує HTML–документ.
<head> ... </head>
Ця пара тегів вказує на початок і кінець заголовку документа. Крім назви документа, в цей розділ можна додати багато службової інформації.
<title> ... </title>
Все, що знаходиться між мітками <title> і </title>, тлумачиться оглядачем як назва документа. Оглядач показує назву поточного документа у заголовку вікна. Рекомендується назва не довша 64 символів.
<body> ... </body>
Ця пара тегів вказує на початок і кінець HTML–документа, тіло і визначає вміст документа.
Теги форматування
<H1> ... </H1>–<H6> ... </H6>
Теги виду <Hi> (де i–цифра від 1 до 6) описують заголовки шести різних рівнів. Заголовок першого рівня–самий крупний, шостого рівня–самий дрібний.
<P> ... </P>
Така пара тегів описує абзац. Все, що знаходиться між <P> і </P>, сприймається як один абзац.
Теги <Hi> і <P> можуть містити додатковий атрибут ALIGN ("вирівнювати"), наприклад:
<H1 ALIGN=CENTER> Вирівнювання заголовку по центру</H1>або
<P ALIGN=RIGHT> Зразок абзацу з вирівнюванням по правому краю </P>Приклад 2. У редакторі Notepade створіть файл sample2.htm з таким вмістом:
<html> <head> <title>Приклад 2</title> </head> <body> <H1 ALIGN=CENTER>Продовження!</H1> <H2>Це складніший приклад HTML–документа</H2> <P>Тепер ми знаємо, що абзац можна вирівнювати не тільки вліво, </P> <P ALIGN=CENTER> але й по центру </P> <P ALIGN=RIGHT> або по правому краю.</P> </body> </html>Перегляньте файл sample2.htm у браузері Internet Explorer.