А.В. Фоменко

Практикум зі створення

Web-сайтів

HTML, CSS, DHTML

Міністерство освіти і науки України

Державний заклад

«Луганський національний університет

імені Тараса Шевченка»

Кафедра інформаційних технологій та систем

А. В. Фоменко

Практикум зі створення

Web сайтів

HTML, CSS, DHTML

Методичні вказівки до лабораторних робіт з курсу

«Практикум зі створення Web»

для магістрантів

спеціальності

«Діловодство та інформаційна діяльність»,

«ШКІ (профільне навчання)»

для студентів 4, 5 курсів

спеціальностей

«Інформатика» та «Фізика»

Луганськ

2008

УДК 371.315.7: 004.738.5 (076.1)

ББК 74.202.53 р3

Ф 76

Рецензенти:

Могильний Г . А .– кандидат технічних наук, доцент, завідувач кафедри інформаційних технологій та систем Луганського національного університету імені Тараса Шевченка.

Лахно В. А. – кандидат технічних наук, доцент Луганського національного аграрного університету.

Фоменко А. В.

Ф 76 Практикум зі створення Web сайтів. HTML, CSS, DHTML: методичні вказівки до лабораторних робіт з курсу «Практикум зі створення Web» для магістрантів спеціальності «Діловодство та інформаційна діяльність», «ШКІ (профільне навчання» для студентів 4, 5 курсів спеціальностей «Інформатика», «Фізика» / Андрій Вікторович Фоменко, Луганськ: Державний заклад «Луганський національний університет імені Тараса Шевченка», 2008. – 133 с.

Методичні вказівки містять 11 лабораторних робіт. Кожна лабораторна робота містить теоретичні відомості, приклади виконання завдань, завдання, що необхідно виконати, та контрольні питання до кожної з розглядуваних тем.

Вказівки призначені для магістрантів спеціальності «Діловодство та інформаційна діяльність»; «ШКІ (профільне навчання)» для студентів 4, 5 курсів спеціальностей «Інформатика», «Фізика», які вивчають технології створення електронних інформаційних ресурсів. Також можуть бути використані викладачами курсу «Нові інформаційні технології» на інших спеціальностях, учителями інформатики для профільних класів.

УДК 371.315.7: 004.738.5 (076.1)

ББК 74.202.53 р3

Рекомендовано до друку навчально-методичною радою Луганського національного педагогічного університету імені Тараса Шевченка

(протокол № 7 від 5 березня 2008 року)

© Фоменко А. В., 2008

© Державний заклад «Луганський національний університет імені Тараса Шевченка», 2008

Зміст

ВСТУП 4

Модуль 1. Основи HTML. 5

Лабораторна робота №1 HTML - основні поняття, структура документа 5

Лабораторна робота №2 Робота з графічними зображеннями на Web-сторінці. Списки 14

Лабораторна робота №3 Робота з редактором web-сторінок Dreamweaver. Посилання. Зв'язок з іншими документами. Використання об'єктів як посилання. 22

Лабораторна робота №4 Створення таблиць. Робота з атрибутами таблиці. 33

Лабораторна робота №5 Створення фреймів Настроювання атрибутів фреймів. Використання посилань, створення фреймового меню. 44

Лабораторна робота №6 Карти зображень. Робота зі звуком. 58

Модуль 2. Створення інтерактівності. CSS. DHTML. 70

Лабораторна робота №7 Робота з формами 70

Лабораторна робота №9 Зовнішні аркуші стилів. Стильові властивості 95

Лабораторна робота №10 Спадкування й каскадуванния. Візуальні ефекти 108

Лабораторна робота № 11. DHTML. 120

Вимоги до звіту та критерії оцінювання 130

Завдання для індивідуальної роботи. 131

ВСТУП

Розвиток і активне впровадження в усі сфери діяльності нових інформаційно-комунікаційних технологій істотно змінюють моделі освіти, праці, суспільного життя та відпочинку.

З широким розвитком мережі Інтернет формується ринок електронних інформаційних ресурсів, одним з яких є електронні публікації. Сьогодні створювачами електронних видань стають різноманітні структури, які розміщують інформацію про свою діяльність у мережі Інтернет. Це потребує спеціалістів, які окрім навичок роботи з персональним комп’ютером, мають навички роботи з мережею Інтернет, володіють мовою розмітки гіпертексту HTML та Web-дизайнерів, в обв’язки яких входить перенесення створеного художником-дизайнером стильового оформлення проекту на Web-платформу.

Ці дані методичні вказівки є основою для подальшого вивчення професійно орієнтованих дисциплін, таких, як «Практикум зі створення Web», «Нові інформаційні технології», «Web-програмування», «ШКІ (профільне навчання)».

Тому метою цих методичних вказівок є формування в студентів теоретичної бази знань з основ мови розмітки гіпертексту HTML, формування практичних навичок зі створення Web-сторінок у межах предмету «Шкільний курс інформатики».

Методичні вказівки містять основні відомості, необхідні для засвоєння мови HTML, DHTML та CSS стилів. Розглянуто такі теми: основні принципи побудови HTML-документів; поняття тегів; основні теги документів: <HTML>, <HEAD>, <TITLE>, <BODY>; атрибути тегів; форматування тексту; теги заголовків <H1> … <H6>; вибір шрифту; колір фону й шрифту; списки; розділові смуги; вставка графічних зображень; формати графічних зображень; вирівнювання тексту й графічного зображення; фонова графіка; гіперпосилання: текстові та графічні; таблиці; фрейми; карти зображень; форми. Студенти вивчать можливості аркушів властивостей, а також використання об’ектів DHTML.

Методичні вказівки складаються з 11 лабораторних робіт, що мають таку структуру:

• тема й мета;

• стислі теоретичні відомості;

• завдання до лабораторної роботи;

• питання для самоконтролю.

Зміст методичних вказівок відповідає типовим освітнім програмам і розрахований на студентів ВНЗ, учнів шкіл, а також може бути рекомендований для самоосвіти.

Модуль 1. Основи html. Лабораторна робота №1 html - основні поняття, структура документа

Мета: опанувати принципи побудови логічної структури HTML-документа і основні принципи форматування тексту.

Основні теоретичні відомості.

1. Основні поняття

HTML - мова розмітки гіпертексту (текст який містить гіперпосилання).

Гіпертекст - це текст, в який вбудовані спеціальні коди, що управляють додатковими елементами, такими як форматування, ілюстрації та ін.

Під розміткою розуміється вставка в текст цих кодів, що визначають відображення документа програмою - браузером.

HTML робить функціональну розмітку документа, тобто дозволяє визначити призначення фрагментів тексту.

HTML-документи можуть створюватися в будь-якому текстовому редакторі або за допомогою спеціальних редакторів HTML-документів, таких як Dreamweaver, FrontPage.

Браузери - спеціальні програми перегляду HTML-документів, які слугують для форматування файлів у вигляді Web-сторінок і відображення їх на екрані (Internet Explorer, Opera, Mozila)

Web-сторінки – це комплексні документи, які можуть містити будь-які види даних: текст, графіку, звук, відео, анімацію.

Теги – символи, що управляють відображенням тексту й при цьому самі не відображаються на екрані. Всі теги вміщаються у кутові дужки < > – обмежувачі, наприклад <u> (кутові дужки, усередині яких перебуває ключове слово, що визначає тег).

Більшість тегів використовуються попарно й називаються парними. Усі парні теги обов’язково складаються з:

• початкового тегу (наприклад <u>);

• кінцевого тегу (наприклад </u> );

причому, початковий тег, створює ефект, а кінцевий - припиняє його дію. Парні теги призначені для опису вмісту документу: заголовка, абзацу, елементів таблиці і та ін. Наприклад, тег <u>…</u>, використовується для завдання підкресленого виду тексту, що знаходиться між початковим та кінцевим тегами.

Крім парних, існують також одиночні теги, тобто теги, в яких існує тільки початковий тег. Відповідно до інструкцій одиночних тегів браузер виконує певні дії (наприклад, відповідно с тегом <img> виконується вставка зображення).

Параметри тегу: набори припустимих параметрів індивідуальних для кожного тегу.

Наприклад, в тегі

<p align="center"> назва документа </p>

align – є параметром, який розміщує текст між тегами <p> та </p> по центру сторінки.

2. Правила запису тегів:

• кожен тег починається з відкриваючої кутової дужки, а закінчується закриваючою кутовою дужкою;

• при записі імен тегів можна користуватися як верхнім, так і нижнім регістром, але не можна ставити пробіли;

• після ім'я тегу слідують параметри, які відділяються один від іншого пробілами;

• порядок слідування параметрів довільний;

• якщо параметр вимагає значення, то воно вказується після назви параметра через знак рівності (align="center");

• значення параметра може записуватися в лапках і без них (обов'язкові лапки, якщо в параметрі є пробіл);

• елемент, який включає в себе початковий тег іншого елементу, повинен містити і кінцевий тег цього елементу (виключення складають одиночні теги);

• імена в парних тегах повинні бути однаковими. Відхилення від цього правила буде вважатися помилкою.

Наприклад, наступні теги записані правильно:

1. <p align="center" id="p1" >текст, який міститься між даними тегами вирівнюється по центру сторінки і має ідентифікатор "p1"</p>;

2. <p align="center" id="p1" >текст, який міститься між даними тегами вирівнюється по центру сторінки і має ідентифікатор "p1" (правильно не для всіх тегів);

3. <h1 id="zag1">Заголовок першого рівня</h1>;

4. <font face="Arial" size="16pt" color="blue"> текст, який показується шрифтом Arial, який має розмір 16pt та синій колір </font>.

А наступний тег записаний неправильно:

<font face="Arial" size="16pt" color="blue"> текст, який показується шрифтом Arial, який має розмір 16pt та синій колір </font> - імена в парних тегах повинні бути однаковими.

Коментарі - текстові рядки, що не є частиною програми, а слугують для пояснення тієї чи іншої особливості HTML-коду або наміри розробника. Коментарі не виконуються браузером, вони розташовуються між групами символів <!—коментарі-->. Наприклад

<!—Це коментар-->

Елемент – це пара тегів та символьні дані, які включені між ними. Тобто елемент складається з трьох компонент: початкового тегу, вмісту і кінцевого тегу. У випадку одиночних тегів, кінцевий тег може бути опущений.