Атрибути тегів.

Часто теги, крім імені, містять додаткові елементи, які називаються атрибутами. Наприклад, якщо в тег тіла документа <ВОDY> ввести додатковий елемент:

<ВОDY bgcolor ="уеllow">

то це означатиме, що документ повинен відображатися на жовтому фоні. Слово bgcolor є атрибутом, а уеllow - значенням атрибуту.

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

ім'я атрибуту = „значення”

Значення атрибуту записується післяімені атрибуту через знак рівняння =. Всі значення атрибутів за умовчанням повинні розташовуватись в подвійних (") або одинарних (') лапках. У тегі може бути декілька атрибутів, в цьому випадку вони відділяються один від одного пробілами.

Часто при створенні Web-сторінок виникає необхідність пояснити ту або іншу особливість HTML-коду або наміру розробника, але так, щоб ці пояснення не відображалися у вікні броузера. У таких випадках незамінними виявляються коментарі.

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

<!— Коментар, що займає один рядок —>

або

<!— Коментар можна

розташовувати в двох рядках —>

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

1. Історія виникнення HTML, поняття гіперпосилання, тега.

2. Структура документа. Обов’язкові теги. Парні та непарні теги.

3. Правила написання тегів та вказання значень атрибутів тегів.

4. Створення та форматування html документа, теги фізичного та логічного форматування тексту.

5. Списки та теги, які їх створюють.

6. Теги створення таблиць.

7. Поняття фреймів та їх призначення. Теги створення фреймів.

Практична частина

Для виконання завдань СРС необхідно опрацювати практичні завдання за вивчаємою темою

Завдання

І. Завантажити програми Блокнот і Internet Explorer. Відкрийте свій HTML-файл.

ІІ. Завантажите програму Paint. Створіть на полотні розміром 190 на 230 пікселей кольоровий малюнок. Збережіть його як «Ваше_Прізвище.jpg» у тій же папці, що й Ваш HTML-файл. Закрийте програму Paint.

ІІІ. Введіть у тіло файлу HTML-код, у результаті якого броузер покаже рожеву таблицю шириною в 90% сторінки, у два рядки й три стовпці, з обрамленням. Середня комірка першого рядка містить малюнок «Ваше_Прізвище.jpg» з підказкою «Мій малюнок». Інші комірки містять вирівняний до зовнішньої границі таблиці текст.

IV. Завантажити збережений файл у броузері. Як вплинув введений HTML-код на вигляд сторінки, відображуваної броузером? Спробуйте в коді непропорційно й пропорційно поміняти розміри малюнка. Як це відіб'ється на вигляді сторінки?

Завдання з застосуванням css

Для виконання завдань з СРС опрацювати теоретичний матеріал та готові практичні приклади.

Теоретична частина

Листи стилів — це могутній засіб розробки Web-сторінок, що дозволяє відокремити форму від змісту, тобто зміст документа від атрибутів форматування. Специфікація каскадних таблиць стилів (CSS — Cascading Style Sheets) — це лише одне визначення листів стилів з великої кількості можливих. Використання стилів — це найкращий спосіб вирішення проблеми, пов'язаної з тим, що внаслідок застосування різних броузерів і різних платформ сторінки відображаються на екрані по-різному, що є ключовим моментом для Web-дизайну.

Таблиці стилів дають змогу спростити процес створення сторінок і поліпшити їхній зовнішній вигляд.

Включення СSS в HTML

В документи НТМL таблиці стилів можуть вбудовуватися не тільки на мові СSS , але і на іншій. Для встановлення мови таблиць стилів за замовчанням застосовується тег МЕТА., який міститься в секції HEAD:

<HEAD>

<МЕТА http-equiv=”Content-Style-Type” content=”text/css”>

<HEAD>

Атрибут http-equiv=”Content-Style-Type” вказує, що МЕТА відноситься до таблиці стилів, а атрибут content=”text/css” вказує, що таблиці стилів будуть написані на мові СSS.

Способи включення СSS в HTML:

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

• Вбудована (еmbеdded). Властивості стилю вказують в дескрипторі <stуlе>, у верхній частині НТМL – документа, — в межах дескрипторів <head>. Таким чином стиль, який призначений певному дескриптору, буде успадкований всіма такими ж дескрипторами в даному НТМL-документі.

• Внутрішня (inline). Атрибути стилю можуть бути оголошені в будь-якій частині коду Web-сторінки. Іншими словами, кожному НТМL-дескриптору Web-сторінки призначають власні атрибути стилю, в атрибуті stуlе.

• Зовнішня (linked). Властивості стилів знаходяться в окремому файлі з типом css. Подібні файли можуть бути пов'язані з будь-яким НТМL - документом. Для цього в код Web-сторінки необхідно включити дескриптор <link>, який повинен знаходитися в межах дескриптора <head>.

Одну таблицю стилів можна використовувати для форматування відразу декількох Web-сторінок. Причому кількість таких Web-сторінок не обмежена.

Таким чином, для того, щоб змінити формат відразу декількох сторінок

Web-вузла, знадобляться лічені хвилини, а не дні.

Вбудовані стилі

Оскільки вбудовані стилі форматування застосовуються до всього НТМL-документа, вони повинні бути оголошені у верхній частині коду Web-сторінки — в межах дескриптора <head>. Оголошені таким чином властивості стилю можна використовувати тільки в поточній Web-сторінці.

Для того, щоб скористатися цими ж властивостями стилю в іншій Web-сторінці, необхідно заздалегідь скопійований код, який знаходиться між дескрипторами <style> і </style>, вставити в потрібний НТМL-документ.