- •Тема 1. Теорія веб-програмування
- •1.Загальне поняття про веб-програмування
- •2. Історія
- •1971-1989 Рік – перший обмін повідомленнями.
- •1995-1996 Рр. Мова програмування JavaScript. Каскадна таблиця стилів. Flash.
- •2000 Рік (травень) – реліз php4.
- •2000 Рік (грудень) – w3c та JavaScript.
- •2005 Рік – упровадження технології web 2.0.
- •3. Засоби веб-програмування
- •4. Система керування вмістом
- •Тема 2. Мова гіпертекстової розмітки html
- •1. Основні поняття мови html.
- •2. Історія розвитку html.
- •3. Розмітка
- •4. Елементи html-документа
- •5. Редактори html-документів
- •Wysiwyg-редактори
- •Редактори, що працюють з вихідним кодом
- •Тема 3. Система управління вмістом Joomla
- •Складові cms-системи
- •2. Системні вимоги до встановлення cms Joomla
- •3. Інсталяція cms Joomla
- •5. Адміністрування cms Joomla
- •Тема 4. Проектування сайтів
- •2. Класифікація web-сайтів (за призначенням)
- •2.1. Класифікація за призначенням
- •2.2 Класифікація сайтів за технологіями, що використовуються
- •Тема 5. Структура процесу розробки web-сайтів та web-додатків
- •1 Структура процесу розробки
- •2 Технічне завдання на розробку
- •2.1. Етапи та терміни створення сайту:
- •Структура сайту інституту
- •Наукові школи
- •Центри та лабораторії
- •Напрями наукових досліджень
- •Конференції та семінари
- •Видавнича діяльність
- •Контакти Тема 6. Ергономічні обмеження та рекомендації при web–дизайні
- •1. Обмеження по кількості елементів керування
- •2 Обмеження по розташуванню елементів керування
- •3. Обмеження по інформаційному наповненню
- •4. Графіка та текст.
- •5. Часові обмеження
- •1. Психогенний вплив
- •2. Колір при Web-дизайні
- •Тема 7. Програмування мовою html 5
- •П'ять речей, які треба знати про html5
- •2. Вам не треба відкидати наявне
- •3. Легко почати
- •4. Це вже працює
- •Перевірка технологій html5
- •10 Порад для створення html5-шаблонів
- •Можливі експерименти з html5
- •Переваги табличної верстки
- •4 Основних недоліка табличної верстки
- •Оптимізація html коду
- •Практичні завдання Розділ і. Лабораторна робота №1. Розробка структури сайту
- •Хід роботи
- •Визначення мети створення сайту та його тематики.
- •2. Визначення структури сайту
- •3. Визначення ключових слів
- •4. Добір доменного імені сайту.
- •Лабораторна робота №2. Основи використання дескрипторів мови html
- •Хід роботи
- •Теги форматування
- •Атрибут тега ul type відповідає за вигляд маркеру:
- •Встановлення кольору фону
- •Лабораторна робота №3. Створення веб-сторінки мовою html.
- •Хід роботи
- •Лабораторна робота №4. Робота з таблицями у html.
- •Хід роботи
- •Елементи таблиці
- •Атрибути елемента table
- •Атрибути елементів рядків і стовпців
- •Колір у таблицях
- •Об'єднання комірок таблиці
- •Контрольні запитання
- •Лабораторна робота №5. Використання зображень та посилань на веб-сторінці.
- •Теоретичні відомості
- •Зовнішні посиланн
- •Внутрішні посилання
- •Завдання: Створити галерею учнів 9 класів.
- •Питання для самоконтролю
- •Лабораторна робота №6. Створення персонального сайту за допомогою системи ucoz
- •Хід роботи
- •(Для завершення реєстрації перейти за цим посиланням:)
- •Індивідуальне завдання
- •Лабораторна робота №7. Налагодження модулів персонального сайту в системі ucoz
- •Хід роботи
- •Індивідуальні завдання
- •Розділ іі.(практичне застосування) Комплекс практичних робіт по створенню веб-сайту за допомогою системи управління контентом «WordPress»
- •Практична робота №1 Тема: Встановлення локального сервера. Встановлення україномовної версії «WordPress».
- •Теоретичні відомості
- •Тема: Налаштування сайту та його адміністративної панелі.
- •Тема: Публікації і сторінки.
- •Тема: Навігація.
- •Тема: Теми та дизайн сайту.
- •Завдання
- •Контрольні запитання
- •Словник термінів
- •Список використаних джерел
- •Навчальне видання
Атрибут тега ul type відповідає за вигляд маркеру:
<UL type="disc"> маркер-диск;
<UL type="circle"> маркер-коло;
<UL type="square"> маркер-квадрат
----------------------------------------------------------------------------------------------------
Завдання 2. В текстовому редакторі «Блокнот» набрати вищеперечислені теги форматування і зберегти документ з розширенням .htm. Переглянути результат.
----------------------------------------------------------------------------------------------------
Встановлення кольору фону
Колір фону встановлюється за допомогою знайомого тега <BODY>. Наприклад, чорний фон встановиться командою:
<BODY bgcolor="#000000">
Якщо колір фону в <BODY> не вказувати, то він буде білим (або будь-яким іншим).
----------------------------------------------------------------------------------------------------
Завдання 3. В текстовому редакторі блокнот ввести наступний код:
<HTML> <HEAD> <TITLE>Miй перший крок </TITLE> </HEAD>
<BODY text="#336699" bgcolor="#FFFOFF">
Привіт, це моя перша сторінка. <BR>
<FONT color="#CCOOOO"> Ласкаво просимо! </FONT>
</BODY> </HTML>
Збрегти його з розширенням .htm. Переглянути результат.
----------------------------------------------------------------------------------------------------
!!! Зверніть увагу: в тегі <BODY> одночасно встановлюється колір тексту документа і колір фону. Це означає, що весь текст сторінки буде синім, крім тексту, для якого спеціально встановлено інший колір. Якщо колір тексту в <BODY> не задавати, то за замовченням він буде чорним.
Не слід зловживати яскравими фонами (жовтий, червоний, салатний або чорний фон з яскравим текстом на ньому). Варто використовувати таку гамму кольорів на сторінці, яка не відволікає увагу від змісту, не заважає його читати. Тег <BR> в межах одного абзацу вставляє розрив текстового рядка.
ФОРМАТУВАННЯ ТЕКСТУ ЗА ДОПОМОГОЮ ТЕГА <FONT></FONT>
Щоб виділити великий фрагмент тексту або тільки одне слово, треба скористатися відомими тегом <FONT> </FONT>.
----------------------------------------------------------------------------------------------------
Завдання 4. <H3> <FONT color="ff00ff" face="Arial" size="+2">Цей текст форматується тегом FONT</FONT></H3>
----------------------------------------------------------------------------------------------------
Параметр size задає розмір шрифту (“+1”,”+2”,”+3”,…,”-1”,”-2” …) відносно основного розміру шрифту у веб-оглядачі. Параметр color задає колір тексту (color="ff00ff", в лапках пишуться дворозрядні числа шістнадцяткової системи, які задають відтінки трьох кольорів – червоного, зеленого та синього; мінімальна яскравість – число 00, максимальна - ff). Параметр face дозволяє вибрати шрифт, яким буде написаний текст (“Arial”, “Times New Roman”, “Courier New” та інші).
Лабораторна робота №3. Створення веб-сторінки мовою html.
Мета: навчитись створювати тематичну веб-сторінку та форматувати її мовою HTML; застосовувати до тексту дескриптори вирівнювання.
Хід роботи
Завдання 1. Створити просту веб-сторінку, в якій задати заголовок «Фрагмент пояснення теми ”Бази даних”». Зберегти файл з ім’м urok.htm.
Завдання 2. Використовуючи дескриптори мови HTML, у файлі urok.htm здійснити форматування тексту, поданого на рис.1. Текст для сторінки можна скопіювати за адресою: http://galanet.at.ua/forum/51-455-1.
Під час форматування враховувати такі параметри:
для основного тексту: вирівнювання – по ширині;
для заголовка «БАЗИ ДАНИХ»: розмір – 5, колір – #990000, вирівнювання – по центру;
для заголовків «Історія» та «Поняття бази даних»: колір – #cc0000, вирівнювання – по центру;
для означення бази даних: накреслення – курсив, вирівнювання – по ширині;
для першого списку: тип маркера не змінювати, для другого списку: тип маркера коло.
Рис.1. Зображення веб-сторінки, форматованої мовою HTML
Завдання 3. Встановити для фону всієї сторінки такий колір: #ffffcc.
