ля перегляду та редагування сторінки web-сайту виконайте команди Вид-Просмотр HTML-кода.
піцина Н.М.
С 72Мовна модель сучасного інформаційного простору [Текст] : метод. вказівки та індивід. завд. для проведення лаб. і самост. роботи студ. напряму підготовки 6.030507 «Маркетинг» ден. та заоч. форм. навчання / Н. М. Спіцина, Т.В. Шабельник; М-во освіти і науки, молоді та спорту України, Донец. нац. ун-т економіки і торгівлі ім. М. Туган-Барановського, каф. інформ. систем і технологій упр. – Донецьк : [ДонНУЕТ], 2011. – 38с.
Методичні вказівки призначені для проведення лабораторних робіт і самостійної роботи студентів з дисципліни «Мовна модель сучасного інформаційного простору».
Дана розробка містить загальні приклади виконання завдань, індивідуальні завдання, приклади тестів за наступними темами: загальні принципи створення Web-сайту; створення Web-сайтів з використанням мови HTML; створення Web-сайтів з використанням каскадних листів стилів CSS.
УДК 004.43(075.8)
ББК 32.973.202-018.1я73
© Спіцина Н.М., Шабельник Т.В., 2011
© Донецький національний університет
економіки і торгівлі ім. М. Туган –
Барановського, 2011
Вступ
Сучасний період розвитку суспільства характеризується сильним впливом на нього комп'ютерних технологій, які проникають в усі сфери людської діяльності, забезпечують поширення інформаційних потоків у суспільстві, утворюючи глобальний інформаційний простір.
Інформаційна доступність, що постійно підвищується, у сфері бізнесу й торговельного обміну стирає значне число ієрархічних ланок системи управління галузями народного господарства й бізнесу, дозволяючи навіть невеликим електронним торговельним підприємствам досить вільно орієнтуватися в сфері товарно-грошового обігу й знаходити місце в розподілі суспільної праці.
Інформація (у широкому змісті) є основою механізмів, що обумовлюють еволюцію природи, однією з форм якої є соціально-економічний розвиток. Саме інформація визначає темпи, напрямок і характер процесів, що відбуваються в суспільстві та економіці.
Дисципліна «Мовна модель сучасного інформаційного простору» надає можливість студентам факультету маркетингу, торгівлі та митної справи оволодіти сучасними методами моделювання інформацією для використання її при подальшому навчанні та в своїй професійній діяльності; освоїти мовні засоби моделювання сучасного інформаційного простору.
У результаті вивчення дисципліни студенти повинні вміти створювати та аналізувати детерміновані моделі за допомогою електронних таблиць; створювати HTML та XML – документи; застосовувати методи та мовні засоби моделювання інформаційного простору у навчанні та у своїй професійній діяльності.
містовий модуль 1. Розробка сайтів за допомогою мови HTML
абораторна робота №1
Тема. Загальні принципи створення Web-сайту
Мета. Оволодіти загальними принципами створення Web-сайту
Програмне забезпечення.Операційна система Windows, Internet Explorer.
Завдання
При створенні Web-сайту необхідно визначитися з якою метою він створюється. Від цього буде залежати: стиль оформлення, необхідні для створення й наступного функціонування витрати, формат представлення інформації для розміщення в Web, інструментарій та вимоги, до програмного забезпечення Web-сервера та каналів зв'язку з Internet.
Визначимо наступні варіанти:
варіант.
При створенні Web-сайту для компанії, що реалізує якийсь товар, основною метою може бути поширення інформації про фірму та реклама продукції, а також організація Web-магазину. При цьому необхідно вирішити наступні завдання:
Ø зміна іміджу й підняття престижу компанії;
Ø просування торговельної марки;
Ø доступність інформації про продукцію та ціни для клієнтів;
Ø підтримка дилерської мережі, доступність інформації про продукцію та ціни для дилерів;
Ø прямий продаж продукції в Internet, організація Web-магазину;
Ø доступність внутрішньої інформації для співробітників, що працюють поза офісом.
варіант.
Створення Web-сайту наукової або загальноосвітньої організації, що не займається комерцією в Internet, а поширює інформацію. У цьому випадку мова йтиме про збір, переробку й розміщенні на Web-сайті великих масивів даних з організацією пошуку й доступу до них.
варіант.
Створення в Internet своєї особистої сторінки.
Розглянемо структуру Web-сайту фірми
Інформація про компаніюрозповідає про цілі і діловий вигляд фірми, її історію тощо. Показує яку вигоду одержать клієнти від співробітництва саме з цію, а не з іншими компаніями.
Інформація про продукцію й послугиможе складатися з фотографій або малюнків продукції її властивості та прикладів використання. На сторінці може знаходитися електронний каталог продукції, що може полегшити подальше його відновлення. Якщо планується приймання замовлень на продукцію або послуги через Internet, то доцільно розмістити тут бланк замовлення, який буде надходити по електронній пошті.
Інформаційна підтримка. У цьому розділі публікується додаткова технічна інформація, питання, що часто задаються, поради по усуненню несправностей і т.п.
Новини. Клієнти повинні бути проінформовані про нові товари й послуги, що надаються фірмою.
Зворотний зв'язок. У цьому розділі публікується контактна інформація. Може бути розміщена форма для відгуку, гостьова книга, адреси електронної пошти, на які клієнт може відправити запит, і т.п.
УВАГА!!!При наповненні Web-сайту завжди потрібно пам'ятати два принципи: унікальність і вірогідність матеріалів, що публікуються
Унікальність є першочерговою вимогою до змісту. В WWW уже може існувати чимало сторінок зі схожими матеріалами. Web-сайт повинен чимсь відрізнятися від сайтів з аналогічною тематикою, хоча б для того, щоб привернути до себе увагу.
При створенні Web-Вузла необхідно пам'ятати, що складові його окремих документів повинні бути об'єднані загальним стилем оформлення й засобами навігації.
Єдиний стиль оформлення — один з показників, що відрізняють професійний Web-Вузол від аматорського. Це не означає, що документи повинні бути схожі один на одного, але загальна ідея, єдиний стиль, повинні бути присутнім неодмінно.
Особлива увага привертається до засобів навігації по сторінках. Відвідувач повинен розуміти, де він перебуває зараз і як можна потрапити в будь-яке інше місце. Необхідно передбачити можливість перехід до першого документа, програми пошуку або до схеми Web-сайту.
Послідовність, логічність, сталість — це необхідні якості гарного Web-сайту.
Структура. Web-Документ повинен містити в собі наступні розділи: заголовок, назву компанії, навігаційну панель, зміст, контактну інформацію, дату й час відновлення, авторські права й статус документа.
Логотип. Назва фірми завжди повинна бути присутня на екрані. Для цього на початку кожного Web-Документа звичайно міститься барвисто оформлений логотип фірми. Крім того, назва компанії повинна бути присутня і у вихідних даних до всіх документів.
Навігаційна панель. Одним з найбільш важливих розділів Web-Документа є навігаційна панель або панель управління. WWW завоювала увесь світ багато в чому завдяки тому, що гіпертекстові посилання забезпечують повний зв’язок матеріалів. Ваш Web-сайт повинен забезпечувати користувачеві ясні й інтуїтивно зрозумілі навігаційні маршрути.
Численні дослідження показали, що відвідувачі Web-Серверів дуже нетерплячі й далі, чим на два рівні документів, глибшатися в зміст сервера не прагнуть. Тому, створюючи Web-Вузол великого обсягу, слід передбачити проміжні документи, що звичайно перебувають на першому-другому рівнях, від яких будь-яка інформація перебуває не далі, чим у двох переходах.
Зміст. Зміст Web-документів повинен повною мірою відповідати всім вимогам, пропонованим до звичайних газетних або журнальних публікацій: граматична й орфографічна коректність, точність і вірогідність пропонованих матеріалів тощо. Крім того, з'являється цілий ряд специфічних вимог, яким повинен задовольняти Web-Документ.
Численні дослідження показали, що користувачі не люблять працювати зі смугами прокручування браузерів. Найбільше їм подобаються документи, які розміщаються на одній екранній сторінці. Якщо все-таки він не укладаєтеся в ці рамки, можна створити ще один документ.
Графіка. При розробці Web-Сторінки потрібно дуже уважно вибирати оптимальне співвідношення графічних і текстових матеріалів. Одна гарна картинка може замінити тисячу рядків тексту, але й завантажуватися по мережі вона буде в тисячу раз довше. Тому графікою потрібно користуватися обережно.
Індивідуальна завдання
для виконання лабораторної роботи №1.
Тема: «Загальні принципи створення Web-сайту»
Згідно варіанту (таб.2) розглянути Інтернет-магазини:
1. Описати чи відповідають вони своїм завданням.
2. Оцінити їх за десятибальною шкалою за кожним елементом структури Web-сайту. Дані надати у вигляді таблиці (таб.1).
Таблиця 1. Оцінка структури Інтернет-магазинів
| Структуру Web-сайту фірми | Фірма 1 | Фірма2 |
| Інформація про компанію | ||
| Інформація про продукцію й послуги | ||
| Інформаційна підтримка | ||
| Унікальність | ||
| Єдиний стиль оформлення | ||
| Структура | ||
| Логотип | ||
| Навігаційна панель | ||
| Графіка |
3. Внести свої пропозиції стосовно розглянутих Web-сайтів.
4. Звіт надати викладачеві у роздрукованій формі. Титульний лист звіту наданий у Додатку 1.
Таблиця 2. Список Інтернет-магазинів
| № варіанта | URL - адреса | Назва Інтернет-магазинів |
| | www.technomag.com.ua www.slim-market.com.ua | -інтернет магазин побутової техніки “Техномаг” Інтернет-Магазин “ Слим-Маркет” |
| | www.prestige.ua www.stilago.com.ua | Інтернет-Магазин взуття Інтернет-Магазин взуття |
| | www.prestige.ua www.stilago.com.ua | Інтернет-Магазин одягу Інтернет-Магазин одягу |
| | Baby-Ko.com.ua gmarket.dn.ua | Інтернет магазин дитячих товарів Baby-ko Інтернет магазин дитячих товарів |
| | www.eldom.com.ua www.bytovoy.com.ua | Інтернет. магазин побутової техніки “Элдом” Інтернет-Магазин побутової техніки ”Побутовий” |
| | www.intertop.ua www.ishoes.com.ua | Інтернет-Магазин «Интертоп» Інтернет магазин взуття “iShoes” |
| | glazur.dn.ua zefir.dn.ua | Інтернет-Магазин одягу Інтернет-Магазин одягу |
| | babyshop.dn.ua avtopups.com.ua | Інтернет магазин дитячих товарів Babyshop Інтернет-Магазин дитячих товарів «Автопупс» |
| | www.220volt.dn.ua www.prikup.dn.ua | Інтернет-Магазин побутової техніки “220VOLT“ Інтернет-Магазин побутової техніки “Прикуп” |
| | www.elenashoes.com.ua www.obuvka.net.ua | Інтернет-Магазин взуття Elenashoes Інтернет магазин взуття |
| | www.tradebox.dn.ua www.tehnika.donetsk.ua | Інтернет магазин побутової техніки “Tradebox” Інтернет магазин побутової техніки “Tehnika” |
| | malish.dn.ua happyland.com.ua | Інтернет-Магазин дитячих товарів "Маля" Інтернет-Магазин дитячих товарів Happyland |
| | trends.ua topo.com.ua | Інтернет-Магазин одягу Інтернет-Магазин одягу |
| | odezhda.prom.ua shoplist.com.ua | Інтернет-Магазин одягу Інтернет-Магазин одягу |
| | www.megatop.com.ua www.shoes.kiev.ua | Інтернет магазин взуття Мегатоп Інтернет магазин взуття |
абораторна робота №2
Тема. Загальні принципи створення Web-сайтів з використанням мови HTML. Робота з текстом, списками, рисунками та таблицею
Мета. Оволодіти навичками для створення Web-сайтів з використанням мови HTML. Розглянути теги, які призначені для роботи з текстом, рисунками та використовуються при створенні таблиці.
Програмне забезпечення.Операційна система Windows, Internet Explorer.
сновні поняття.
HTML ( від англ. Hypertext Markup Language — «мова розмітки гіпертексту») — стандартна мова розмітки документів у Всесвітній павутині. Більшість веб-сторінок створюються за допомогою мови HTML (або XHTML). Мова HTML інтерпретується браузерами й відображається у вигляді документа, у зручній для людини формі.
HTML- документ – це звичайний документ у форматі ASCII. В основі мови лежать спеціальні дискриптори – теги, які визначають правила форматування даних. Код документа мовою HTML – це звичайний текстовий файл, який можна написати, наприклад, у програмі Блокнот. Файл створений у програмі Блокнот потрібно зберегти з розширенням .htm (або .html).
Тег - елемент HTML (управляючій код), що представляє із себе текст у кутових дужках <>. Тег є активним елементом, що змінює представлення наступної за ним інформації. Тег може мати деяку кількість атрибутів. Звичайно використовуються два теги - відкриваючий і закриваючий. У закриваючих тегах перед іменем тегу ставитися / slash. Регістр уведення символів неважливий. Пару тегів - відкриваючі й закриваючі прийнято називати контейнером.
У тег можуть бути властивості, які називають атрибутами, що дають додаткові можливості форматування тексту. Вони записуються у вигляді пари ім'я-значення, причому нечислове значення міститься в лапках.
Синтаксис тегу наступний:
<ТЕГ ІМ'Я_АТРИБУТА_1= "ЗНАЧЕННЯ 1"; "ЗНАЧЕННЯ 2"; ЗНАЧЕННЯ 2">
Імена кольорів та sRGB значення
Деякі елементи мови HTML можуть мати в якості атрибутів змінні що позначають кольори. Ці змінні застосовуються в основному для визначення кольору фона, тексту або гіперпосилань Html-Документа. Визначити той або інший колір при створенні Web-сторінки можна двома методами: за допомогою завдання спеціальних колірних міток, що позначають назви кольорів словами, або за допомогою шістнадцятирічного цифрового коду, що заміняє ці мітки.
Для виводу кольорових зображень на екран монітора застосовується палітра RGB (Red Green Blue). Згідно з даним стандартом, теоретичні основи якого були розроблені ще в XIX столітті вченим-фізиком Г.Гельмгольцем, можна одержати абсолютно будь-який бажаний відтінок шляхом змішання всього лише трьох фарб: червоної, зеленої й синьої.
Для відображення кольору шістнадцятирічним цифровим кодом прийнятий наступний синтаксис запису: перед самим кодом ставиться символ #, далі випливає набір із шести знаків у шестнадцатирічній системі числення (таб.3).
Таблиця 3. Таблиця HTML кодів кольорів
| Колір | Символьна мітка | Цифровий код |
| Білий | White | #FFFFFF |
| Бірюзовий | Teal | #008080 |
| Жовтий | Yellow | #FFFF00 |
| Зелений | Green | #008000 |
| Ярко-зелений | Lime | #00FF00 |
| Кораловий | Coral1 | #FF7256 |
| Темно-бордовий | Maroon | #800000 |
| Пурпурний | Purple | #800080 |
| Рожевий | Fuchsia | #FF00FF |
| Сірий | Gray | #808080 |
| Сірий | Silver | #C0C0C0 |
| Оливковий | Olive | #808000 |
| Голубий | Aqua | #00FFFF |
| Синій | Blue | #0000FF |
| Темно-синій | Navy | #000080 |
| Шоколадний | Chocolate1 | #FF7F24 |
| Шоколадний | Chocolate4 | #8B4513 |
| Фіолетово-червоний | PaleVioletRed3 | #CD6889 |
| Червоний | Red | #FF0000 |
| Чорний | Black | #000000 |
Приклад створення web-сайту
Методичні вказівки:
1. Разом з викладачем розгляньте синтаксис тегів які призначені для роботи з текстом і гіперпосиланнями (таб. 4).
Таблиця 4. Синтаксис тегів для роботи з текстом і гіперпосиланнями
| Ім’я тегу | Призначення тегу, атрибути |
| <HTML> </HTML> | Тег <HTML> є контейнером, який містить у собі весь уміст веб-сторінки, включаючи теги <HEAD> і <BODY>. Закриваючий тег <HTML> повинен завжди стояти в документі останнім. |
| <HEAD> </HEAD> | Тег <HEAD> призначений для зберігання інших елементів, ціль яких — допомогти браузеру в роботі з даними. Вміст тегу <HEAD> не відображається прямо на веб-сторінці. |
| <TITLE> </TITLE> | Виводить заголовок документа. Розміщується тег в контейнері <HEAD>. |
| <BODY> </BODY> | призначений для зберігання змісту веб-сторінки (контенту), відображуваного у вікні браузера. Тег <BODY> також застосовується для визначення кольорів посилань і тексту на веб-сторінці. Атрибути bgcolor - встановлює колір фону веб-сторінки text - встановлює колір тексту, використовуваного на веб-сторінці за замовчуванням background – встановлює рисунок фоном сторінки |
| <P> </P> | призначений щоб увести в документі текстовий абзац. Аргументи left - вирівнює тексту по лівому краю right - вирівнює тексту по правому краю center - вирівнює тексту по центру justify - по ширині |
| <BR> | здійснює перехід на новий рядок |
| <H1>..<H6> | Для відображення заголовків від 1 до 6 рівня. Синтаксис <h1>Заголовок 1-го рівня</h1> <h2>Заголовок 2-го рівня</h2> ... <h6>Заголовок 6-го рівня</h6> |
| <b> </b> | Установлює жирне накреслення шрифту |
| <i> </i> | Установлює курсивне накреслення шрифту. |
| <sub> </sub> | Відображає шрифт у вигляді нижнього індексу. |
| <suр> </suр> | Відображає шрифт у вигляді верхнього індексу. |
| <FONT> </FONT> | контейнер для зміни характеристик шрифту, таких як розмір, колір і гарнітура. Атрибути сolor - колір тексту face - гарнітури шрифтів, що використовуються для тексту. size - розмір шрифту в умовних одиницях від 1 до 7. |
| <big> </big> | збільшує розмір шрифту на одиницю в порівнянні зі звичайним текстом. |
| <а> </а> | призначений для створення посилань. Атрибути href -задає адресу документа, на яку слід перейти. |
| <li> </li> | визначає окремий елемент списку. Зовнішній тег <UL> або <OL> установлює тип списку — маркірований або нумерований. Атрибути <ul> <li>елемент маркірованого списку</li> </ul> <ol> <li>елемент нумерованого списку</li> </ol> |
| <ol> | створює нумеровані списки Атрибути start- визначається початкове значення списку type - визначає спосіб нумерації елементів списку, може приймати значення: A – прописні латинські букви A, B, C …; а - рядкові латинські букви a, b, c …; I – великі римські цифри I, II, III …; i – малі римські цифри і, іі, ііі …; 1 – арабські цифри 1, 2, 3 … |
| <ul> </ul> | установлює маркірований список. Кожний елемент списку повинен починатися з тегу <LI> |
2. Завантажте програму Блокнот (з групи стандартних програм).
3. У середовищі програми Блокнот введіть текст HTML- документу і збережіть його в папці із своїм прізвищем з іменем index.htm
4. Запустіть створений файл index.html у вікні програми – браузеру
ля перегляду та редагування сторінки web-сайту виконайте команди Вид-Просмотр HTML-кода.
6. Проаналізуйте елементи коду, яку роль вони відіграють при створенні Web-сторінки.