- •Тема 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».
- •Теоретичні відомості
- •Тема: Налаштування сайту та його адміністративної панелі.
- •Тема: Публікації і сторінки.
- •Тема: Навігація.
- •Тема: Теми та дизайн сайту.
- •Завдання
- •Контрольні запитання
- •Словник термінів
- •Список використаних джерел
- •Навчальне видання
Лабораторна робота №4. Робота з таблицями у html.
Мета: навчитись використовувати дескриптори створення таблиць, вміти налаштовути такі основні параметри таблиць як розмір, вирівнювання, межі комірок; навчитись об’єднувати комірки.
Хід роботи
Таблиці у веб-документах застосовуються не тільки для розміщення табличних даних, а й для компонування сторінки в цілому.
Елементи таблиці
Кожна таблиця починається тегом <TABLE> і закінчується тегом </TABLE>.
Створювана таблиця утворює рядки, які в свою чергу заповнюються комірками.
Для створення таблиці між тегами <TABLE>...</TABLE> розміщують наступні теги:
<TR></TR> –створення нового рядка;
<TD></TD> - створення нової комірки;
<ТН></ТН> - створення заголовку таблиці.
Код таблиці |
Зображення в браузері |
||||||
<TABLE> <TR><TD>. . . </TD><TD>. . . </TD></TR> <TR><TD>. . . </TD><TD>. . . </TD></TR> <TR><TD>. . . </TD><TD>. . . </TD></TR> </TABLE> |
|
де крапками позначений вміст кожної комірки.
Усередині тегів першого рядка <TR>. . . </TR> замість тегів <TD></TD> можуть розміщатися заголовки для кожного стовпця - теги <ТН></TH>.
ЗАВДАННЯ №1. Створіть файл TABLE.HTM та побудуйте в ньому таблицю телефонів:
Код таблиці |
Зображення в браузері |
||||||||
<TABLE border> <TR><TH>Прізвище, ім'я</TH><TH>Телефон</TH></TR> <TR><TD>Петренко Петро</TD><TD>3-33-33</TD></TR> <TR><TD>Іваненко Іван </TD><TD>5-32-23</TD></TR> <TR><TD>Сидоренко Ольга</TD> <TD>5-31-13</TD></TR> </TABLE> |
|
У тег <TABLE> введено атрибут border, що задає зовнішню і внутрішні рамки таблиці завтовшки в 1 піксел.
Атрибути елемента table
width - задає ширину таблиці. Його значення виражається у пікселах або у відсотках (від повної ширини вікна броузера). Наприклад, тег <TABLE width="40%"> задає таблицю з довжиною 40% від ширини вікна. Краще задавати ширину у відсотках.
align - задає вирівнювання таблиці у документі. Цей атрибут може набувати одне із значень: left (розміщення таблиці з лівого краю документа), center (по центру документа) і right (з правого краю).
border - задає рамки таблиці. Якщо значення цього атрибута не вказано, наприклад, <TABLE border>, усі рамки матимуть товщину 1 піксел. Якщо ж значення вказано (наприклад, <TABLE border=5>), то товщина рамки буде 5 пікселів, але це значення відповідає зовнішнім рамкам таблиці. Товщина внутрішніх рамок, як і раніше, дорівнюватиме 1 пікселу.