Теоретичні відомості.
Теги, які ми використовуємо для написання WEB-сторінок можуть мати додаткові атрибути, тобто додаткові налаштування. Атрибути вставляються в середину того тега до якого вони застосовуються. Якщо ви хочете застосувати деяку властивість для всієї сторінки – ви повинні додати атрибут до тега <body> , якщо тільки до одного рядка – то додаєте атрибут до тега <p> (або іншого, з якого починається рядок). Ми з вами вивчимо зараз один з атрибутів – style , який дозволяє задавати досить багато властивостей. Порядок запису атрибутів такий : атрибут = “параметри атрибута” . Наприклад, для зміни кольору сторінки ми можемо використати такий запис:
<body style="background-color:#ff0000;">
Цей запис зробить вашу сторінку червоного кольору. Код кольору являє собою шістнадцятіркове число (на це вказує символ # перед ним). Ось деякі інші кольори:
Білий: #ffffff Чорний: #000000 Червоний: #ff0000 Синій: #0000ff Зелений: #00ff00 Жовтий: #ffff00
Взагалі існує карта з 216 кольорів, що можуть використовуватись у WEB.
Крім того основні кольори можна вводити безпосередньо, наприклад :
<body style="background-color: red;">
( або white, black, blue, green, yellow)
Завдання2:
Внесіть самостійно зміни в попереднє завдання зі списками так, щоб кожен елемент списку мав чергування зеленого та синього кольорів фону. Сторінку зробіть жовтою.
Практичне заняття 3
Тема: Посилання.
Програмні засоби: редактор Блокнот, браузер Explorer або Opera.
Теоретичні відомості.
Посилання – це спеціальні мітки призначені для переходу на іншу сторінку, на інше місце на тій самій сторінці або до будь-якого елемента електронного документа чи Internet-адреси. В якості мітки може бути будь-який елемент вашої сторінки. Найчастіше в якості посилання використовують текстовий рядок, який може бути певним чином оформлений у вигляді графічного об’єкту. Для виконання посилання використовується тег <a> з атрибутом href. В якості значення атрибута вказується місце переходу. Для прикладу будемо вважати, що ми переходимо на іншу сторінку яка називається page-2.htm, запис виглядатиме так:
<a href=”page-2.htm”> перехід на page-2 </a>
Напис «перехід на page-2» буде відображений на сторінці і виконувати роль гіперпосилання (саме на нього необхідно кліпнути для переходу). Сторінка на яку ми переходимо повинна знаходитись в тій самій папці, що і та сторінка з якої ви переходите. Якщо ви хочете перейти на сторінку, що знаходиться в іншому місці на диску, необхідно вказати повний шлях, наприклад, якщо сторінка знаходиться на диску d: в папці web:
<a href=”d:\web\page-2.htm”> перехід на page-2 </a>
Посилатися можна на Internet-сайт вказавши його URL-адресу:
<a href=http://www.google.com.ua> перейти на GOOGLE </a>
Якщо замість рядка, що відображається на сторінці, як посилання вставити інший об’єкт (наприклад графічний), то цей об’єкт стане посиланням на яке необхідно кліпнути для переходу. І зверніть увагу на те, що після посилання необхідно його закрити тегом </a>.
Завдання1:
Створіть головну сторінку з заголовком «Контингент учнів»
Створіть другу сторінку з заголовком «Група 1» і створіть на ній нумерований список з п’яти учнів
Збережіть головну сторінку під іменем index.htm
Другу сторінку збережіть під іменем grupa-1.htm
На головній сторінці створіть гіперпосилання на другу сторінку (на grupa-1.htm) і збережіть зміни.
На другій сторінці після списку групи додайте гіперпосилання на головну сторінку (на index.htm) і збережіть зміни.
Запустіть на виконання файл index.htm і перевірте роботу посилань на обох сторінках.
Завдання 2 (самостійне):
Створіть головну сторінку «Конституція України» і зробіть гіперпосилання на 1,2,3 статті розмістивши їх на окремих сторінках. З кожної сторінки необхідно зробити посилання для повернення на головну сторінку. При оформленні сторінок використати вивчені раніше елементи оформлення та атрибути кольору.
КОНСТИТУЦІЯ УКРАЇНИ
Стаття 1. Україна є суверенна і незалежна, демократична,соціальна, правова держава.
Стаття 2. Суверенітет України поширюється на всю її територію.
Україна є унітарною державою.
Територія України в межах існуючого кордону є цілісною і недоторканною.
Стаття 3. Людина, її життя і здоров’я, честь і гідність,недоторканність і безпека визнаються в Україні найвищою соціальною цінністю.
Права і свободи людини та їх гарантії визначають зміст і спрямованість діяльності держави. Держава відповідає перед людиною за свою діяльність. Утвердження і забезпечення прав і свобод людини є головним обов’язком держави.
Теоретичні відомості.
Ми можемо також виконувати посилання і переходи на різні місця однієї сторінки. Для цього використовується дещо інший механізм, ніж для походу на іншу сторінку. Щоб перейти на інше місце на одній сторінці потрібно використати атрибут id і символ # .
Порядок запису цієї дії такий:
1) вставляємо гіперпосилання з використанням href, в якості параметра якого вказуємо мітку переходу з символом #
<a href="#стаття 1"> стаття 1 </a>
2) використовуючи атрибут id маркуємо місце переходу
<h1 id="стаття 1"> стаття 1 </h1>
<p> текст статті </p>
Повний запис виглядає так:
<html>
<head>
</head>
<body>
<h1> Конституція України </h1>
<p><a href="#стаття 1">стаття 1</a></p>
<p><a href="#стаття 2">стаття 2</a></p>
<h1 id="стаття 1">стаття 1</h1>
<p>текст статті</p>
<h1 id="стаття 2">стаття 2</h1>
<p>текст статті</p>
</body>
</html>
Завдання 3:
Оформіть 1,2,3 статті Конституції України однією сторінкою з використанням посилань на одній сторінці.
Практичне заняття 4.
Тема: Вставка зображень.
Програмні засоби: редактор Блокнот, браузер Explorer або Opera.
Теоретичні відомості.
Використання графічних зображень у WEB-формах вимагає спочатку деяких пояснень. Насамперед необхідно пояснити, що графічні зображення мають дві особливості, які впливають на їх використання. Це формат зображення, який можна охарактеризувати, як тип графічного файла і розмір зображення, який характеризується кількістю точок по горизонталі та вертикалі. Ці дві характеристики впливають на загальний розмір файла. Якщо файл дуже великий, то він довго завантажується і ваша сторінка буде мати великий розмір внаслідок використання великих графічних файлів.
Звідси випливають такі рекомендації:
перед розміщенням зображення на WEB-сторінці необхідно встановити необхідний розмір зображення в залежності від необхідного розміру цього зображення на сторінці
(не більше 1024 Х 768)
зберегти файл у форматі .jpeg, .gif або .png
дати файлу ім’я, яке повинно бути невеликим (до 8 символів) і бажано латинськими літерами (це не обов’язково, але бажано)
не слід вибирати занадто маленькі зображення і потім їх збільшувати – це знизить їх якість
Тепер коли ми маємо уяву про вимоги до зображень розберемо, як їх розміщувати на сторінці. Для розміщення зображень використовується тег <img> з атрибутом src (джерело) значенням якого повинно бути ім’я файла. Наприклад:
<img src=”grupa.jpg”>
Таким чином дається команда розмістити зображення яке розташоване у файлі grupa.jpg. Крім того до цього тега можна додати ще деякі атрибути.
Наприклад:
<img src=”grups.jpg” alt=”Grupa”>
Атрибут alt використовуєтося для альтернативного опису зображення. При наведенні покажчика миші на зображення з’являється невеличкий бокс з написом, який ви ввели в якості значення атрибута alt.
Можна також використовувати атрибут title для короткого опису зображення, який з’являється при наведенні миші на зображення. Записується це так:
<img src=”grupa.jpg” title=”Це моя група”>
І ще два атрибути, необхідні для графічних зображень: width і height (ширина і висота), дають можливість встановити необхідні розміри зображення у пікселях (точках) на сторінці. Зауважимо, що використовувати цей метод до великих зображень недоцільно, так як при цьому ви значно збільшуєте об’єм вашої сторінки, тому краще перед розміщенням все-таки встановити необхідний розмір, а точну підгонку виконати вже цими атрибутами. Це записується так:
<img src=”grupa.jpg” width="420" height="320">
Таким чином, для того щоб розмістити малюнок на сторінці ми використовуємо тег <img> з атрибутами src, alt, title, width, height. Закриваючого тега для <img> не потрібно.
Завдання1:
1) підготуйте три зображення розміром 800х600 у форматі .jpg і збережіть їх у папці де ви розміщуєте файл WEB-сторінки під іменами im01.jpg, im02.jpg, im03.jpg
2) Створіть WEB-сторінку і розмістіть на ній три ваші зображення з атрибутами alt
3) перегляньте як виглядає ваша сторінка
4) змініть (відредагуйте) вашу сторінку встановивши розміри зображень 400х300, 200х200, 400х800 і перегляньте, як змінилися ваші зображення
Завдання 2 (контрольне):
Створіть WEB-сторінку з заголовком та використанням трьох зображень із підписами під ними. На зображення встановіть вспливаючі підписи (title).
Зробіть ще три сторінки на яких розмістіть окремо кожне із зображень і зробіть гіперпосилання з головної сторінки на ці сторінки. Гіперпосилання встановіть на самі зображення (при кліпанні на зображення відбувається перехід до іншої сторінки). Повернення на головну сторінку виконайте текстовим гіперпосиланням «НА ГОЛОВНУ», яке розмістіть під зображенням.
Практичне заняття 5.
Тема: Таблиці.
Програмні засоби: редактор Блокнот, браузер Explorer або Opera.
Теоретичні відомості.
Таблиці на WEB-формах мають величезне значення і використовуються не тільки за звичайним призначенням. Ми звикли до того, що таблиця призначена для розміщення текстових даних у певній формі, у відведених для них комірках. У WEB-формах таблиці використовують також для розміщення різних матеріалів сторінки в потрібних місцях, тобто таблиці грають роль розмітки сторінки. До появи мови CSS саме за допомогою таблиць виконувалось розташування матеріалів на сторінці. Ми також скористаємось цими засобами.
Отже для створення таблиці використовується тег <table> , який повідомляє браузеру про початок таблиці. Після опису таблиці її необхідно буде закрити тегом </table>. Для опису таблиці використовують теги:
<tr> - "table row/ряд таблиці"
<td> - "table data/табличні дані"
Повний опис таблиці виглядає так:
<table> відкриття таблиці
<tr> відкриття рядка таблиці
<td>Дані 1</td> комірка з даними
<td>Дані 2</td> комірка з даними
</tr> закриття рядка таблиці
<tr> відкриття рядка таблиці
<td>Дані 3</td> комірка з даними
<td>Дані 4</td> комірка з даними
</tr> закриття рядка таблиці
</table> закриття таблиці
В браузері це буде виглядати так:
-
Дані 1
Дані 2
Дані 3
Дані 4
Все, що ви розмістите між тегами <td> і </td> буде вмістом відповідної комірки таблиці. Якщо необхідно зробити три рядки по чотири комірки вам необхідно буде тричі відкривати рядки і в кожному з них вказати по чотири комірки.
Завдання 1:
Створіть WEB-сторінку з таблицею, яка складається з чотирьох рядків по три комірки в кожній. В кожній комірці запишіть числа (по одному в кожній) від 1 до 12. Назвіть вашу сторінку, відкрийте її в браузері і подивіться результат.