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

А.В. Фоменко

 

 

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

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

Лабораторна робота №8 Аркуші стилів 80

Лабораторна робота №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-документа і основні принципи форматування тексту.

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

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-коду або наміри розробника. Коментарі не виконуються браузером, вони розташовуються між групами символів <!—коментарі-->. Наприклад

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

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

Структура документу

<HTML> сам документ </HTML> - перший тег, з якого варто починати опис (ці теги повідомляють браузер, що перед ним документ HTML).

Документ може складатися з 2 розділів:

1. Розділ заголовка (починається тегом <HEAD>) – надається необхідна інформація для браузера, не є обов'язковим.

2. Розділ змістовної частини. Починається тегом <BODY> тіло документа </BODY>

Крім того, звичайно, кожна Web-сторінка містить елемент <TITLE>, який представляє собою назву документу (назва може мати необмежену довжину й містити будь-які символи, крім деяких зарезервованих) Ця назва звичайно показується в заголовку вікна браузера. Тег - контейнер <TITLE> - є дочірнім елементом по відношенню до елемента <HEAD> (це означа, що елемент <TITLE>, звичайно вкладений в елемент <HEAD>). Наприклад:

<head>

                   <title>Комп'ютерний клас </title>

</head>

 

Таким чином, в самому загальному вигляді структуру Web-сторінки можна представити так:

<html>

<head>

<title>

               Назва Web-сторінки

               </title>

</head>

<body>

               Інформація на Web-сторінці

</body>

</html>

 

Вирівнювання:

Теги <H>, <Р> і ін. можуть задаватися з параметром горизонтального вирівнювання ALIGN. Його значення:

• Left - вирівнювання тексту полівій границі вікна браузера;
• Center – вирівнювання тексту по центру вікна браузера;
• Right – вирівнювання тексту по правій границі вікна браузера;
• Justify - вирівнювання тексту по ширині вікна браузера.

Заборона переведення рядка: теги <NOBR> і <WBR> якщо текст не вміщується, то з'являється горизонтальна смуга прокручування. Тег <WBR> - м'який переклад рядка, який виконується тільки по необхідності.

Індекси:

Для визначення верхнього та нижнього індексів в HTML передбачені наступні теги:

· ^--- - верхній індекс, надстроковий текст або показник степені. Наприклад, вираз S = Pi*R² записується у вигляді S = Pi * <SUP>2</SUP>);

· _--- - нижній індекс. Наприклад формула H₂O може бути задана рядком вигляду: H<SUB>2</SUB>O.

Параметри шрифту:

Для завдання параметрів шрифту найпростіше використовувати елемент <Font>, який має наступні параметри:

· параметр size – розмір шрифту. Значенням цього параметру є розмір шрифту в умовниходиницях від 1 до 7 (нормальний - 3). <Font Size=4>

· параметр color – колір шрифту. Колір шрифту визначається за допомогою стандартнихімен або у форматі RGB. Наприклад, <Font color = “green”> або <Font color= “00FF00”>

· параметр face – гарнітура шрифту. Наприклад, < Font face=”Arial”>

За замовчуванням текст документу відображується основним шрифтом, який задається в начальних установках браузеру. Звичайно основний шрифт має розмір 3 та гарнітуру Times New Roman. Елемент <Basefont> - використовується для зміни властивостей основного шрифту. За допомогою цього елементу можна вказати розмір, тип, і колір шрифту. Для елемента <Basefont> не існує тегу, що закривається. Його значення найчастіше не поширюється на таблиці. Ці значення обов'язкові для всього документа, але можуть перевизначитися за допомогою тегу < Font >. Цей тег має ті ж параметри, що тег < Font > і може розміщуватися в будь-якому місці елементу <BODY>.

Можна описувати спеціальними стилями окремі слова або пропозиції. Є два типи стилів: логічний і фізичний. Логічні стилі визначають текст згідно заданому значенню, тоді як фізичні стилі визначають деякі ділянки тексту.

Завдання №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 align= “right”>.

Третя лінія: довжина лінії - 80%, товщина лінії - 5, колір і вирівнювання лінії не змінюються

<hr align=right color=green size=5>

Завдання №6.

1. Створіть текстовий документ passion.txt в якому наберіть список ваших захоплень. Відформатуйте набраний текст.

2. Вставте відформатований текст із файлу passion.txt в документ comic. html. При цьому необхідно, щоб всі ознаки попереднього форматування тексту при перегляді сторінки comic. html були збережені.

3. Нижче наберіть цитату

...мне представляется, что человеческий мозг похож на маленький пустой чердак, который вы можете обставить, как хотите. Дурак натащит туда всякой рухляди, какая попадётся под руку, и полезные, нужные вещи уже некуда будет всунуть, или в лучшем случае до них среди всей этой завали и не докопаешься.

Шерлок Холмс (Артур Конан Дойль)

Зауваження

При виконанні завдання №6 необхідно скористатися елементом PRE.

Контрольні питання:

1. Що таке гіпертекстовий документ?

2. Які теги використовуються в заголовку Веб документа?

3. Яка структура HTML документа?

4. За допомогою яких тегів можна задати або змінити шрифт?

5. Які Ви знаєте параметри тегів?

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

 

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

 

Формати графічних файлів для WWW

Існує достатньо багато форматів, які забезпечують організацію графічних даних (BMP, EPS, GIF, JPEG, PCX, TIFF та багато інших). Але не всі графічні формати підтримуються браузерами. Тому на сьогодні всі зображення для Web – сторінок створюються в трьох форматах, які підтримуються браузерами. До них відносяться:

· GIF (Graphic Interchange Format – формат графічного обміну) – є стандартом для Web-графіки. Формат GIF дозволяє створювати прозорі ділянки на зображенні та назначати відтворення зображення в режимі черезрядкового розгорнення. Також є можливість в одному файлі зберігати декілька зображень, які послідовно змінюючись створюють ефект анімації (так звана, gif-анімація). Підтримується усіма графічними Web браузерами. Недоліком формату є обмежена палітра кольорів (всього 256);

· JPEG (Joint Photographic Experts Group – об’єднана група експертів в області фотографії) – є стандартом для Web-графіки та забезпечує високу ступінь стиснення. Часто використовується для зображень з високою якістю (наприклад, для фотографій). Підтримується усіма графічними Web браузерами.;

· PNC (Portable Network Graphics – переносна сітьова графіка) – володіє всіма можливостями формату GIF. Але на відмінність від GIF формату підтримує глибину кольору 48 біт. Недоліком цього формату є те, що він підтримується не всіма браузерами.

Таким чином, для того, щоб вставити картинку у web-сторінку найкраще використовувати формати gif і jpg.

 

Списки

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

Види списків:

Маркірований

Маркірований список задається парним тегом <ul> --- </ul> (батьківський елемент усередині якого розміщується список). Усередині тегу розташовуються всі елементи списку. Кожний елемент списку починається тегом <LI>. Список відділяється від основного тексту порожніми рядками. Крім пунктів списку можуть бути присутнім інші елементи (заголовки, пояснення). Цей тег містить параметр type, який може мати такі значення: disc - маркери списку відображаються зафарбованими кружками (використовується за замовчуванням); circle - маркери списку відображаються не зафарбованими кружками; square - маркери списку відображаються зафарбованими квадратиками. Параметр type можна використовувати й у тегу <LI>.

Нумерований

Нумерований список задається парним тегом <OL>---</OL>. Усередині тегу розташовуються елементи списку. Кожний елемент починається тегом <LI>. Тег <OL> має наступні параметри:

1. type - за допомогою параметру type тегу <OL> можна задавати наступні стилі нумерації списку:

· type = A – нумерація прописними латинськими буквами;

· type =а – нумерація рядковими латинськими буквами;

· type =I – нумерація великими римськими цифрами;

· type =i – нумерація маленькими римськими цифрами;

· type =l – нумерація арабськими цифрами (використовується за замовчуванням)

<ol> <li type=A> Анекдоты <li type=A> Афоризмы <li type=A> Высказывания </ol> <ol> <li type=L>Забавные истории <li type=L>смешные ситуации </ol>

2. start дозволяє почати нумерацію списку не з одиниці (<OL Start=5> нумерація списку починається з п’яти)

3. параметр value використовується в тегу <Li> і дозволяє змінити номер даного елемента списку.

З тегу <LI> - починає кожний елемент списку й не має потреби в тегу, що закривається. Цей вид списку може використовувати графічні зображення

4. графічні маркери:

використовується тег вставки зображення, елементи списку відділяються або тегом <BR> або <P>

Список визначень

Список визначень звичайно складається з 2-х частин - чергування терміна (DT) і визначення (DD). Звичайно Web-браузер визначення розташовує на новому рядку.

Основний синтаксис завдання списку визначень:

 

< DL >

<DT> термін 1

<DD> визначення терміна 1

<DT> термін 2

<DD> визначення терміна 2

…

</DL>

 

Приклад списку визначень:

<DL>

<DT> NCSA

<DD> NCSA (National Center for Supercomputing Applications).

</DL>

Вкладені списки

Списки можуть бути вкладеними. Наприклад:

Що дає на екрані: 1 Великі міста Росії: o Москва o Санкт-Петербург 2 Великі міста України: o Київ o Луганськ

<UL>

<LI> Великі міста Росії:

<UL>

<LI> Москва

<LI> Санкт-Петербург

</UL>

<LI> Великі міста України:

<UL>

<LI> Київ

<LI> Луганськ

</UL>

</UL>

 

Завдання №1

1. Створіть на диску D: папку Web.

2. Знайдіть через пошук на комп'ютері три графічних файли з розширеннями *.jpg. Скопіюйте їх у папку Web

3. Перейменуйте скопійовані файли відповідно у 1.jpg, 2.jpg, 3.jpg.

4. Створіть за допомогою текстового редактору Блокнот просту web – сторінку і збережіть її в папці Web під іменем Imeg.html.

5. Вставте в документ Imeg.html один з файлів папки графічних файлів: 1.jpg, 2.jpg, 3.jpg. Наприклад:

 <img src="1.jpg" alt="picture" height="47">

Завдання №2

Змінити документ Imeg.html наступним чином:

1. Наберіть наступний текст, застосовуючи різний розмір і колір шрифту.

Завдання №3

1. Змінити документ Imeg.html наступним чином: добавити до Imeg.html список, використовуючи маркери у вигляді не зафарбованих кружків:

<ul type=circle> Висловлення на теми:

<li>родина

<li> бізнес

<li> тварини </ul>

1. Збережіть зміни в документі Imeg.html. Перегляньте документ Imeg.html за допомогою програми перегляду Web – сторінок.

 

Завдання №4

Внесіть наступні зміни до списку, який був створений в попередньому завданні:

1. Змінити маркери списку на графічні зображення. Для цього замініть теги списку на теги вставки малюнка формату GIF (малюнки знайти самостійно).

Наприклад,

<img src="file://Server/FOTO/WEB/BALL/ ballblk-2.gif" height="40">.

Зауваження

Кожний пункт необхідно відокремлювати тегом <br> або тегом <p>

Завдання №5

Добавити на сторінку Imeg.html нумерований список наступного вигляду:

A. Анекдоти

B. Афоризми

C. Висловлення

 

1. Забавні історії

2. Смішні ситуації

 

Завдання № 6

Добавити на сторінку Imeg.html наступний список визначень

Щирість

(недолік самовладання)

Дурні

(ті, які женяться)

Розумні

(ті, які виходять заміж)

Завдання № 7

Добавити на сторінку Imeg.html вкладений список наступного вигляду:

A. Анекдоти

i. Про доблесну міліцію

ii. Про добрих лікарів

iii. Про слухняних дітей

B. Афоризми

C. Висловлення

o Тости

 Весільні

 Новорічні

o Побажання

1 Забавні історії

2. Смішні ситуації

Контрольні питання.

1. Який тег використовують для вміщення графічного зображення на сторінку?

2. Які атрибути використовують для зміни розмірів малюнка?

3. За допомогою яких тегів та їхніх атрибутів можна управляти розміщенням зображення на екрані?

4. Які існують види списків?

5. Як задати нумерований список?

6. Чи можна вставити до нумерованого списку маркований?

7. Який атрибут використовується для зміни схеми нумерації?

8. Як створити маркований список?

9. Як перемінити маркер на картинку?

10. Як створити вкладений список?

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

Мета: познайомитися з редактором web-сторінок Dreamweaver, опанувати основні прийоми роботи з редактором. Вивчити структуру та основні типи посилань, опанувати способи створення гіперзв’язків у HTML-документах.

Створення гіперпосилань

Посилання - це основа Internet, головні його принципи і, відповідно, найважливіша частина web-сторінок.

Посилання складається з двох частин: вказівника та адресної частини (URL). Вказівник – це те, що видно на Web-сторінці – покажчик посилання (може бути слово, група слів або зображення). А дресна частина посилання вказує адресу (URL-адреса), з якої браузер буде завантажувати документ.

Зовнішній вигляд посилання залежить від його типу, способів створення й установок браузера. Посилання можуть вести на іншу сторінку, на картинку (звичайно не показують велику картинку, а показують її зменшену копію, клацнувши на яку можна побачити велике зображення у високій якості), на будь-який файл, на адресу електронної пошти.

Види посилань

Існує два види посилань:

1. абсолютні;

2. відносні.

Тег <Base> служить для вказівки повної базової URL-адреси документа (відносне посилання продовжує працювати, якщо документ переноситься в інший каталог). Цей тег має один обов'язковий параметр href, після якого вказується повна адреса, тобто Де шукати браузеру даний документ.

Тег <Link> підтримує логічний зв'язок між документами (указує на зв'язок документа, що містить даний тег і інший документ або об'єкта). Він складається з URL-fадреси й параметрів, що конкретизують відношення документів.

Завдання №1.

За допомогою редактора Dreamweaver створити два зв'язаних гіперпосиланнями Web-документа, у яких були б використані усі вивчені раніше структури.

Тема першого документа: «Про себе й своїх друзів». Тема другого документу: «Мої захоплення».

Документи назвіть – iAndFrands.html, passion.html відповідно.

 

Завдання №2.

У документ passion.html внести маркірований список з маркером у вигляді зображення й організувати систему якорів і навігації по внутрішніх гіперпосиланнях.

Завдання №3

1. Створіть на диску D папку Web. Створить цю папку папкою сайту за допомогою Dreamweaver. В папці Web створіть Web-сторінку, яка повинна відображати список знаків зодіаку. Список знаків зодіаку представте у вигляді маркованого списку. Документ повинен мати назву index.html.

2. За допомогою MS Word створіть два HTM-документа, які будуть відображати інформацію про відповідний знак зодіаку, наприклад документи lion.htm та scorpion.htm. Вставте до створених файлів два довільні зображення. Збережіть створені HTM-документи в папці Web.

3. Створити в документі index.html два гіперпосилання до створених файлів, наприклад, до файлів lion.htm та scorpion.htm відповідно.

4. Добавте на Web-сторінку index.html два абзаци, які містять інформацію про два знаки зодіаку. Створіть гіпертекстові посилання в документі index.html на створені абзаци.

5. Створіть в кінці документу index.html гіпертекстове посилання, на початок документу index.html.

6. Створіть в документі index.html гіпертекстове посилання на будь-який файл, що перебуває на диску D.

Завдання №4

1. Створити на диску D папку Web_2. В папці Web_2 створіть Web-сторінку з назвою reference.html.

2. Добавте до створеної Web-сторінки reference.html два будь яких gif зображення.

3. Змінити перше зображення, виставивши його ширину 180 (висота вираховується автоматично).

4. Змінити друге зображення, зробивши його ширину 80.

5. Створіть в документі reference.html нумерований список, список повинен міститися після першого зображення. Нумерація в списку повинна бути арабськими цифрами.

Приклад:

<OL type=l>

<li> Людина набагато розумніше, ніж йому це треба для щастя.

<li> Нікому не поставити нас на коліна! Ми лежали, і будемо лежати!

<li> Думаю, не помилюся, якщо промовчу.

<li> Прошу послати мене на курси підвищення зарплати.

</OL>

6. Добавте до сторінки reference.html ще один нумерований список, який повинен міститися після попереднього. Нумерація в списку повинна бути великими римськими цифрами і починатися з чотирьох.

Приклад:

<OL type=A>

<li> Життя, звичайно, не вдалася, а в іншому все нормально.

<li> Якщо вам довго не дзвонять родичі або друзі, значить у них всі добре.

<li> Вибачите, що я говорю, коли ви перебиваєте.

<li> Чималої людини можна легко довідатися по тому, як незграбно він робить підлості.

</OL>

7. Відокремити перше зображення від тексту по вертикалі й по горизонталі по 20 пікселів.

8. Добавити до сторінки reference.html третє зображення. Зробити третє зображення в рамці, товщина якої 10 пікселів.

9. Додати до першого зображення альтернативний текст.

10. Зробити наприкінці сторінки посилання у вигляді графічного зображення.

Приклад:

<IMG src=D:\web\малюнок1.gif align=right alt="Простий малюнок" >

 

Приклад виконання завдання:

<head>

<title> Закони Мерфи </title>

</head>

<body>

<IMG src=D:\web\малюнок1.gif align=right     HSPACE=20 VSPACE=20 alt="Простий малюнок" >

<OL type=l>

<li> Людина набагато розумніше, ніж йому це треба для щастя.

<li> Нікому не поставити нас на коліна! Ми лежали, і будемо лежати!

<li> Думаю, не помилюся, якщо промовчу.

<li> Прошу послати мене на курси підвищення зарплати.

</OL>

<ol type=I start=5>

<li> Ціль визначає калібр.

<li> Першим здоровається той, у кого слабкіше нерви.

<li> Мудрість не завжди приходить із віком. Буває, що вік приходить один.

</OL>

<OL type=A>

<li> Життя, звичайно, не вдалася, а в іншому все нормально.

<li> Якщо вам довго не дзвонять родичі або друзі, значить у них всі добре.

<li> Вибачите, що я говорю, коли ви перебиваєте.

<li> Чималої людини можна легко довідатися по тому, як незграбно він робить підлості.

</OL>

<br> Мало знати собі ціну-<IMG src=D:\web\малюнок2.gif align=absmiddle border=10 bordercolor=red > треба ще користуватися попитом

<p> <IMG src=D:\web\малюнок3.gif align=bottom > Коли дружина зненацька дарує вам краватка - виходить,

<BR> нова норкова шубка їй вже не подобається.

<A href=D:\web\ Мерфи.doc> <IMG src=D:\web\малюнок5.gif></A>

</body>

 </html>

Контрольні питання.

1. Яке призначення редактора Dreamweaver?
2. Як створити й зберегти Web-документ за допомогою програми Dreamweaver?
3. Назвіть основні елементи інтерфейсу редактора Dreamweaver?
4. З яких елементів складається головна панель інструментів?
5. Як можна підключити додаткові панелі інструментів?
6. Що таке внутрішнє гіперпосилання? Як вона організується?
7. Що таке зовнішнє гіперпосилання? Як вона організується?
8. Що таке абсолютна й відносна адреса файлу?
9. Як використовувати зображення у вигляді гіперпосилання?

 

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

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

 

 

Загальна структура таблиці

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

<TABLE>

<! - тут розміщається опис таблиці ->

</TABLE>

Склад таблиці по рядках і комірках задається за допомогою наступних елементів:

· TR - елемент, що формує окремий рядок;

· TD - елемент, що визначає вміст осередку даних;

· ТН - елемент, що задає осередок заголовка;

· CAPTION - елемент назви таблиці.

В HTML прийнята порядкова модель опису таблиці, у якій послідовно задаються рядки, починаючи із самою верхньої й закінчуючи останнім нижнім рядком.

Із зовнішньої сторони таблиця обмежена зовнішньою рамкою. Осередки відділяються друг від друга внутрішніми рамками. Як зовнішні, так і внутрішні рамки можуть бути видні або не видні у вікні браузера - це залежить від заданих властивостей таблиці. В HTML передбачені засоби для виділення в таблиці окремих груп рядків і стовпців.

Рядка (елемент TR)

Кожний рядок таблиці починається тегом <TR>, а закінчується відповідним закриваючим тегом </TR>. Закриваючий тег </TR> не обов'язковий, але його рекомендується ставити для позначення границі кожного рядка.

Усередині кожного елемента TR розміщається опис комірок-заголовків або комірок даних.

Комірки (елемент TD)

Для опису вмісту окремих комірок таблиці призначений парний тег <TD>. Текстовий вміст комірок даних за замовчуванням відображається шри