- •Модуль 1. Основи html. Лабораторна робота №1 html - основні поняття, структура документа
- •Основні теоретичні відомості.
- •1. Основні поняття
- •2. Правила запису тегів:
- •3. Структура документу
- •4. Визначення й оформлення функціональних розділів документа
- •5. Форматування html – документа Вирівнювання:
- •Індекси:
- •Параметри шрифту:
- •Існують наступні логічні стилі:
- •Існують наступні фізичні стилі:
- •Завдання до лабораторної роботи
- •Лабораторна робота №2 Робота з графічними зображеннями на Web-сторінці. Списки
- •Основні теоретичні відомості
- •1. Використання графічного зображення в якості фону
- •2. Формати графічних файлів для www
- •3. Вставка графічних зображень (елемент img та його атрибути)
- •4. Списки
- •Маркірований
- •Нумерований
- •Список визначень
- •Вкладені списки
- •Завдання до лабораторної роботи
- •Лабораторна робота №3 Робота з редактором web-сторінок Dreamweaver. Посилання. Зв'язок з іншими документами. Використання об'єктів як посилання.
- •1. Основні теоретичні відомості.
- •2. Створення гіперпосилань
- •3. Види посилань
- •4. З'єднання з іншими документами
- •5. Звертання до певних розділів інших документів
- •6. Використання зображення як посилання
- •Завдання до лабораторної роботи
- •Лабораторна робота №4 Створення таблиць. Робота з атрибутами таблиці.
- •Основні теоретичні відомості
- •1. Загальна структура таблиці
- •2. Завдання загальних параметрів таблиці
- •3. Форматування даних у таблиці, оформлення рамок (форматування рядків і комірок)
- •1. Вирівнювання даних у стовпцях таблиці
- •2. Завдання кольору рамок таблиці
- •3. Завдання фонового малюнка для таблиці
- •4. Структурування таблиці
- •Завдання до лабораторної роботи
- •Лабораторна робота №5 Створення фреймів Настроювання атрибутів фреймів. Використання посилань, створення фреймового меню.
- •Основні теоретичні відомості
- •1. Основні поняття
- •2. Елемент завдання фреймів frameset та його атрибути
- •3. Вміст фреймів (елемент frame)
- •4. Вкладені фрейми
- •5. Інші атрибути елемента frameset
- •6. Атрибути елемента frame
- •2. Посилання й навігація
- •3. Плаваючі фрейми (елемент iframe)
- •Завдання до лабораторної роботи
- •Лабораторна робота №6 Карти зображень. Робота зі звуком.
- •Основні теоретичні відомості
- •1. Основні поняття
- •2. Створення карти посилань в html
- •3. Створення карт посилань за допомогою редактора Dreamweaver
- •Робота з мультимедіа
- •Вбудовування звукових файлів в Web-сторінку
- •Фонові звуки
- •Рухомий текст
- •Завдання до лабораторної роботи
- •Модуль 2. Створення інтерактівності. Css. Dhtml. Лабораторна робота №7 Робота з формами
- •Основні теоретичні відомості
- •2. Створення елементів керування
- •Список, що розкривається:
- •Поле - список
- •Список із множинним вибором
- •Завдання до лабораторної роботи
- •Основні теоретичні відомості
- •1. Поняття про аркуші стилів
- •2. Поняття про внутрішні та зовнішні аркуші стилів
- •3. Вбудований стиль (атрибут style)
- •4. Заголовний стиль (елемент style)
- •6. Види селекторів
- •Стильові властивості
- •1. Значення властивостей
- •2. Властивості шрифтів
- •3. Властивості тексту
- •4. Властивості кольору і фону
- •Завдання до лабораторної роботи
- •Лабораторна робота №9 Зовнішні аркуші стилів . Стильові властивості
- •Основні теоретичні відомості
- •2. Звертання до зовнішнього аркуша стилів (елемент link)
- •3. Запис css-правил.
- •Стільові властивості (продовження)
- •1. Властивості блоку
- •2. Властивості списків
- •3. Інші групи стильових властивостей
- •4. Псевдокласи й псевдоелементи
- •Завдання до лабораторної роботи
- •Лабораторна робота №10 Спадкування й каскадуванния. Візуальні ефекти
- •Основні теоретичні відомості
- •1. Правила спадкування властивостей
- •2. Селектори нащадків
- •3. Каскади стилів
- •4. Пріоритети стилів
- •5. Шари й позиціонування елементів
- •6. Вирізання області (властивість clip)
- •Завдання до лабораторної роботи
- •Лабораторна робота № 11. Dhtml.
- •Завдання до лабораторної роботи
- •Вимоги до звіту та критерії оцінювання
- •Критерії оцінювання лабораторних робіт:
- •Критерії оцінювання індивідуальних робіт:
- •Для отримання заліку необхідно виконати 70% завдань і набрати не менше 145 балів. Завдання для індивідуальної роботи.
- •Рекомендована література
- •Фоменко Андрій Вікторович Практикум зі створення
Існують наступні логічні стилі:
< DFN > - служить для опису визначення (терміну). <DFN> Це визначення. </DFN> Це визначення.
< EM > - служить для виділення тексту, що має особливе значення (друкарський наголос, виводиться курсивом ). < EM > Це виділене слово. </EM > Це виділене слово.
< CITE > - служить для виділення заголовків книг, фільмів, цитат і тому подібне Дана інформація виводиться курсивом. < CITE > Це цитата </CITE > Це цитата
< CODE > - служить для виділення програмних код, текстів програм і тому подібне Виводиться моноширинним шрифтом. < CODE > The header file </CODE > The header files
< KBD > - використовується при виділенні тексту, що позначає клавіатурне введення користувача. Може бути зображено жирним шрифтом (але в більшості браузерів зображається моноширинним шрифтом). < KBD > Введіть passwd </KBD > Введіть passwd
< SAMP > - використовується для машинних повідомлень або послідовності буквених символів. Зображається моноширинним шрифтом. <SAMP > Segmentation fault: Core dumped. </SAMP > Segmentation fault: Core dumped.
< STRONG > - служить для ОСОБЛИВОГО виділення слів. Зазвичай виділяється жирним шрифтом. < STRONG > Це дуже важливо !!! </STRONG > Це дуже важливо !!!
< VAR > - використовується для символьних змінних. < VAR > Це змінна. </VAR > Це змінна.
Існують наступні фізичні стилі:
Ви можете задати:
< B > виділений шрифт < /B > виділений шрифт
< BIG > крупний шрифт < /BIG > крупний шрифт
< SMALL > дрібний шрифт < /SMALL > дрібний шрифт
< SUB > нижній індекс < /SUB > нижній індекс
< SUP > верхній індекс < /SUP > верхній індекс (E = mc2 )
< TT > (телетайп) моноширинний шрифт < /TT > моноширинний шрифт
< I > курсив < /I > курсив
< EM > курсив < /EM > курсив
<
STRIKE
> перекреслений шрифт < /STIKE >
перекреслений
шрифт
< U > підкреслення < /U > підкреслення
Параметри тегу <hr>
Нагадаємо, що тег <hr> використовується для створення горизонтальних ліній на Web – сторінці. Даний тег має такі атрибути:
align - вирівнювання лінії. Приймає значення: left (вирівнювання лінії по лівому краю сторінки), center (центрування лінії), right (вирівнювання лінії по правому краю сторінки);
width – ширина (довжина) лінії в пікселях або відсотках. Якщо значення параметру width задається в відсотках, то ширина лінії обчислюється відносно ширини вікна. Наприклад, запис <HR width = “25%”> приводить до відображення лінії шириною в одну чверть вікна браузера;
size – товщина лінії. Значення цього параметру назначається в пікселях (від 1 до 175);
noshade - скасовує рельєфність лінії;
color – колір лінії. Колір визначається за допомогою стандартних імен або у форматі RGB.
Завдання до лабораторної роботи
Завдання №1
1. Визвіть текстовий редактор Блокнот. Наберіть заголовок документу й збережіть його в папці My Webs під іменем Прізвище.html (тут назва файлу – ваше особисте прізвище).
<HTML>
<HEAD>
<TITLE> Комп'ютерний клас </TITLE>
</HEAD>
</HTML>
2. Перегляньте створений вами документ за допомогою браузеру Internet Explorer.
Завдання №2
1. Відкрийте збережений вами документ попереднього завдання і створіть розділ змістовної частини, використовуючи різні заголовки:
<BODY>
<H1>ЛНПУ імені Тараса Шевченко </H1>
<H2> дозволить Вам стати висококласними фахівцями </H2>
</H3>в області Інтернет технологій</H3>
<P> Ми раді привітати Вас у нашім університеті й пропонуємо навчання по наступних спеціальностях:
</BODY>
2. Перегляньте створений вами документ за допомогою браузеру Internet Explorer. Після перегляду змінити останній рядок так, як показано нижче:
<HR> <P> Ми раді привітати Вас <P> у нашім університеті <BR>
і пропонуємо навчання на наступних спеціальностях:
Збережіть ваш документ та за допомогою Internet Explorer перегляньте, які зміни сталися в вашому документі.
3. Самостійно відокремте лініями назву університету (ЛНПУ імені Тараса Шевченко) і зробіть його накреслення курсивним. (Курсивний текст можна зробити за допомогою тегу <em>----</em>).
Завдання №3
За допомогою текстового редактору Блокнот створіть новий HTML – документ comic.html наступного вигляду:
<HTML>
<HEAD>
<TITLE> Комікси </TITLE>
</HEAD>
<BODY>
<P> <H1> Комікси для дітей і не тільки </H1> <HR>
<H2> <EM> Це весела сторінка </EM></H2>
<H3> що зібрала всілякі добутки жанру коміксів, </H3> <HR>
<P> як вітчизняних, так і закордонних <HR><HR>
<P> Дедушка с внуком пошли в Интернет,
<BR> Старец вернулся, а мальчика нет.
</BODY>
</HTML>
Перегляньте створену сторінку comic.html в Internet Explorer.
Завдання №4.
1. Відкрийте створену в попередньому завданні сторінку comic.html в текстовому редакторі Блокнот.
2. Внесіть до сторінки comic.html наступні зміни:
вирівняйте текст сторінки таким чином: перші два рядки - по центру, чотири рядки по правому краю.
змініть колір тексту: перший рядок - червоний, другий і третій - коричневий; четвертий - зелений; вірш – синій;
задайте гарнітуру шрифту Verdana, розмір шрифту у вірші – кожен рядок по зростанню від 3 до 6.
3. Набрати в кінці документу в розділі BODYрядок:
<P> Анекдоти <Sub> для дорослих </Sub> забавні картинки <Sup> для дітей </sup>
Переглянути документ comic.html за допомогою програми перегляду Web – сторінок Internet Explorer. Проаналізувати зміни, що сталися в документі.
Завдання №5.
Змініть сторінку comic.html наступним чином:
1) змініть основний шрифт за допомогою елементу <Basefont> таким чином: гарнітура шрифту - Arial, розмір шрифту - 4, колір шрифту – чорний;
2) змініть зовнішній вигляд ліній.
Перша лінія: товщина лінії - 5, колір лінії - малиновий
<hr size=5 color=magenta>.
Друга лінія: довжина - 60%, товщина лінії - 3, колір лінії - зелений, вирівняйте лінію по правому краю
<hr width=60% align= “right”>.
Третя лінія: довжина лінії - 80%, товщина лінії - 5, колір і вирівнювання лінії не змінюються
<hr width=80% align=right color=green size=5>
Завдання №6.
1. Створіть текстовий документ passion.txt в якому наберіть список ваших захоплень. Відформатуйте набраний текст.
2. Вставте відформатований текст із файлу passion.txt в документ comic.html. При цьому необхідно, щоб всі ознаки попереднього форматування тексту при перегляді сторінки comic.html були збережені.
3. Нижче наберіть цитату
...мне представляется, что человеческий мозг похож на маленький пустой чердак, который вы можете обставить, как хотите. Дурак натащит туда всякой рухляди, какая попадётся под руку, и полезные, нужные вещи уже некуда будет всунуть, или в лучшем случае до них среди всей этой завали и не докопаешься.
Шерлок Холмс (Артур Конан Дойль)
Зауваження
При виконанні завдання №6 необхідно скористатися елементом PRE.
Контрольні питання:
Що таке гіпертекстовий документ?
Які теги використовуються в заголовку Веб документа?
Яка структура HTML документа?
За допомогою яких тегів можна задати або змінити шрифт?
Які Ви знаєте параметри тегів?