Використання графіки в HTML

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

• логотип компанії на діловій сторінці;

• графіка для рекламного оголошення;

• різні малюнки;

• діаграми і графіки;

• художні шрифти;

• підпис автора сторінки;

. застосування графічного рядка в якості горизонтальної розділової лінії; • застосування графічних маркерів для створення красивих маркірованих списків.

Тегом HTML, що виводить GIF, JPEG або PNG зображення є <IMG> Э обов'язковим атрибутом SRC (ім'ям файлу, від SouRCe - джерело). Ім'я файлу являє собою ім'я графічного файлу, що виводиться. Закриваючого Тега не потрібно. Приклад вставки зображення: <IMG SRC="image.gif' АЬТ="ЗОБРАЖЕННЯ">

Зображення на Web-сторінці можуть використовуватися як гіпертекстові посилання, так як і звичайний текст. Читач після натискування на зображенні відправляється на іншу сторінку або переходить до іншого зображення. Для позначення зображення як гіпертекстової мітки використовується той же тег <А>, що і для тексту, але між <А> і </А> вставляється тег зображення <IMG>: <А HREF="aflpeca файлу або зображення"> <IMG SRC="image.gif'></А> При цьому зображення, яке використовується як гіпертекстове посилання, обводиться додатковою рамкою.

В таблиці 4 наведені атрибути тегу IMG.

Таблиця 4

Атрибути тегу IMG

Атрибут Значення ' Примітка

1 2 3

SR.C Вказує файл зображення і шлях до нього Зображення має бути завантажене в браузер і розміщене в тому місці документа, де розташований тег зображення

ALT Вказує текст, що буде виводитися оглядачами замість зображення Текст виводиться при відключенні у браузері відображення графіки. Наявність назв замість картинок полегшує сприйняття Web-сторінок у такому режимі.

ALIGN Визначає положення зображення щодо оточуючого його тексту. ALIGN="middle" вирівнює центр зображення по базовій лінії

рядка тексту, що оточує його.

ALIGN="bottom" вирівнює нижній край зображення по базовій

лінії рядка тексту, що оточує його.

ALIGN="top" вирівнює верх зображення по верхньому краю

найвищого елемента в рядку навколишнього тексту. Додаткові можливі значення аргументу ALIGN="Ieft" визначає зображення, що обгинається ТЄКСТОМ, Зображення розташовується вздовж лівої межі документа, а наступні рядки тексту обгинають його праворуч. ALIGN=" right" визначає зображення, що обгинається текстом! 1 Зображення розташовується уздовж правої границі документа, и наступні рядки тексту обгинають його ліворуч. ALIGN="top" вирівнює верх зображення по верхньому краї найвищого елемента в рядку навколишнього тексту точно Так само, як при використанні стандартного набору атрибутів.

ALIGN="texttop" вирівнює верх зображення по верхньому краї найвищого текстового символу в рядку навколишнього тексту, Дія цього аргументу в більшості випадків, але не завжди, подібно дії аргументу ALIGN-'top".

ALIGN="middle" вирівнює центр зображення по базисній ЛІНІЇ рядка навколишнього тексту точно так само, як при використанні стандартного набору атрибутів. ALIGN="absmiddie" вирівнює центр зображення по центрі рядка навколишнього тексту.

ALIGN="baseline" вирівнює нижній край зображення по базисній лінії рядка навколишнього тексту, тобто робить таку ж дію, як і ALIGN-'bottom".

AHGN="bottom" вирівнює нижній край зображення по базисній лінії рядка навколишнього тексту точно так само, як при використанні стандартного набору атрибутів ALIGN="absbottom" вирівнює нижній край зображення по нижньому краї рядка навколишнього тексту.

USEMAP Якщо натиснути кнопкою мишки на активній області зображення, для якого визначений атрибут USEMAP, відбудетеся гіпертекстовий перехід до інформаційного ресурсу, установленому для цієї області Використовується з тегом <МАР>

HSPACE Цілочисельне значення задає горизонтальну відстань між вертикальною границею сторінки і зображенням, а також між зображенням і текстом, що обгинає його ■ •■ " щ

VSPACE Вказує вертикальну відстань між рядками тексту і зображенням

BORDER Вказує товщину рамки навколо зображення

WIDTH Вказує значення розмірів зображення по горизонталі Це дозволяє зменшити час завантаження сторінки з графікою. Оглядач відводить рамку для зображення і продовжує завантажувати текст на сторінку. Значення задаються у пікселах або у відсотках

HEIGHT Вказує значення розмірів зображення по вертикалі

Контрольні питаний Назвіть атрибути тегу <body> та їх призначення. Як задати фон таблиці, рядку таблиці, стовпця таблиці? Назвіть атрибути тегів <table>, <tr>, <td>. Як додати зображення на web-сторінку?

Як створити гіпертекстове посилання на Web-сторшнІ у вигляді їображеиня?

ТЕМА 7. Каскадні таблиці стилів CSS (Cascading Style Stoeets)

План лекції,

1. Основи CSS.

1.1. Призначення CSS. „.!'$■ Додавання стилів на web-сторінку.

1,3. ПрИСВОЄННЯ СТИЛІВ. jjg,

2. Властивості елементів, керованих за допомогою CSS.

2.1. Колір і фон.

2.2. Текст.

2.3. Шрифти.

2.4. Списки.

3. HTML форми.

3.1. Синтаксис форм.

3.2. Теги форми.

3.3. Меню вибору у формах.

Ключові слова: специфікація CSS, стиль, таблиця стилів CSS, йіксель, оглядач, гліф, тег.

Основи CSS

Призначення CSS

Дизайн Web-вузлів - це точне розміщення компонентів HTML-сторінок відносно один одного в робочій області вікна браузера.

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

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

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

В початкових версіях браузерів CERN для платформи NEXT і в браузерах WWW автор сторінки мав можливість перевизначити параметри налагодження браузера* за замовчуванням через HTML-розмітку. Але цей підхід не одержав поширення в комерційних продуктах.

Інший спосіб управління параметрами налагодження браузера -програмування на JavaScript. Бурхливий розвиток цієї мови дозволяє говорити про можливості повного контролю над процесом відображення HTML-сторінок. Недолік JavaScript - відмова від декларативного характеру розмітки і великий обсяг коду для перевизначення властивостей елементів розмітки.

Специфікація CSS (Cascading Style Sheets) дозволяє залишатися в рамках декларативного характеру розмітки сторінки і повністю контролювати форму представлення елементів HTML-розмітки.

Каскадні таблиці стилів призначені для вирішення протиріччя між точністю визначення розмірів картинок і додатків, з одного боку, і точністю визначення розмірів блоків тексту і його накреслення - з іншою.

Таблиці стилів також дозволяють визначити колір і накреслення текстового фрагмента, змінювати ці параметри всередині текстового блоку, виконувати вирівнювання текстового«блоку щодо інших блоків і компонентів сторінки.

Наявність подібних можливостей дозволяє говорити про CSS як про

засіб поділу логічної структури документа і форми його представлення,

■йїгічна структура документу визначається елементами HTML-розмітки, у

той час, як форма представлення кожного з цих елементів задається CSS-_

описом елементу. " щ

Основним поняттям CSS є стиль - тобто набір правил оформлення і форматування, що може бути застосований до різних елементів сторінки. У стандартному HTML для присвоєння будь-якому елементу визначених властивостей (таких, як колір, розмір, положення на сторінці і т.п.) потрібно щоразу описувати ці властивості, що призводить до збільшення розміру файла і часу завантаження сторінки на комп'ютер користувача.

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

Не нашли, что искали? Воспользуйтесь поиском: