- •Тема 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».
- •Теоретичні відомості
- •Тема: Налаштування сайту та його адміністративної панелі.
- •Тема: Публікації і сторінки.
- •Тема: Навігація.
- •Тема: Теми та дизайн сайту.
- •Завдання
- •Контрольні запитання
- •Словник термінів
- •Список використаних джерел
- •Навчальне видання
Тема 2. Мова гіпертекстової розмітки html
Основні поняття мови HTML.
Історія розвитку HTML.
Розмітка HTML-документа.
Елементи HTML-документа.
Редактори HTML-документів
1. Основні поняття мови html.
Гіпертекст – це текст, який містить зв'язки з іншими документами («гіперзв'язки» чи «гіперпосилання»); читач має змогу перейти до пов'язаних документів безпосередньо з вихідного (первинного) тексту, активізувавши посилання. Такі посилання створюються за допомогою спеціальних кодів, що задають форматування тексту. Ці коди визначені у мові розмітки НТМL.
HTML (англ. HyperText Markup Language — мова розмітки гіпертекстових документів) — основана на SGML – текстова мова розмітки, призначена для розмітки документів, які містять текст, зображення, гіперпосилання, тощо. Процес розміщення в текст кодів НТМL називають розміткою.
Документи створені мовою HTML називають HTML-документи. Вони нагадують звичайні текстові файли за винятком того, що деякі символи в них (так звані теги (tag)) інтерпретуються як мітки.
Тег (від англ. tag - "ярлик, етикетка, бірка; розмічувати, маркувати") - це символ розмітки мови HTML, який подається в кутових дужках <>. Тег ще називають дескриптором. Використання дескрипторів дає змогу форматувати HTML-документи.
За допомогою дескрипторів у HTML-документі можна форматувати такі елементи: параграфи, розділи, абзаци, списки, малюнки, таблиці, колонтитули, індекси, зміст тощо. Кожен елемент має свою унікальну назву, яка записується латинськими літерами і не чутлива до їх регістру. В загальному вигляді елемент має три складові:
теги (початковий та кінцевий);
атрибути;
зміст (контент).
Тег — це назва елементу, записана у кутових дужках (< >). Атрибути задають технічну інформацію про елемент. Зміст елементу — це вся необхідна текстова та графічна інформація документу, яка буде відтворюватися браузером на екрані.
Багато хто вважає, що елементи — це і є теги (наприклад, "тег p"). Проте варто пам'ятати, що елемент — це здебільшого дві складові (теги і зміст), а тег — це складова елемента. Наприклад, елемент head завжди представлений в документі, навіть якщо обидва тега, <head> та </head>, відсутні в розмітці.
Перегляд HTML-документу здійснюється за допомогою веб-оглядача (наприклад, Internet Explorer, Google Chrome, Opera та ін.).
Мова HTML набула на сьогодні певних розширень. На її основі було створено нові мови розмітки. Наприклад, поєднання статичної мови розмітки HTML, вбудованої скриптової мови JavaScript (сценарії виконуються на стороні клієнта), CSS (каскадних таблиць стилів) і DOM (об'єктної моделі документа) утворило нову концепцію створення веб-сайту, що розглядає HTML-документ як об'єктну структуру та дістала назву DHTML (Dynamic HTML). Ця концепція може бути використана для створення додатків в браузері: наприклад для навігації або для додання інтерактивності формам. Також DHTML може бути використаний для динамічного перетягування елементів по екрану і може служити як інструмент для створення заснованих на браузері відео-ігор.
XHTML (англ. Extensible Hypertext Markup Language — розширювана мова розмітки гіпертексту) — мова розмітки, що базується на основі XML та повторює і розширює можливості мови HTML. Головна відмінність XHTML від HTML полягає в опрацюванні документа. Документи XHTML опрацьовуються своїм модулем, під час виконання якого помилки, що допущені розробником не виправляються.