Посилання. Зображення. Об'єкти

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

Для визначення якорів використовується елемент A. Початковий тег - обов'язковий. Кінцевий тег - обов'язковий. Посилання і якорі, визначувані елементом A, не можуть бути вкладеними; елемент A не повинен містити інших елементів A. Має безліч атрибутів, серед яких найважливішими є, :

name - дає якорю ім'я, так що він може служити метою іншого посилання. Значенням цього атрибуту має бути унікальне ім'я. Зона дії імені - поточний документ.

href - визначає місце розташування ресурсу Web, визначаючи зв'язок між поточним елементом (початковим якорем) і цільовим якорем, визначуваним цим атрибутом.

Кожен елемент A визначає якір:

- Вміст елементу A визначає положення якоря.

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

- Атрибут href призначає якір пунктом призначення рівно одного посилання.

У наступному HTML -фрагменте міститься два посилання, у однієї цільовим anchor являється документ HTML з ім'ям "chapter 2.html", а у другої цільовий anchor - зображення у форматі GIF, розташоване у файлі "forest.gif":

<BODY> ..якийсь текст..

<P>Детальніше за см в <A href="chapter 2.html">главі два</A>.

См також <A href="./images/forest.gif">карту лісу.</A>

</BODY>

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

- Абсолютний URI: http://www.mycompany.com/one.html#anchor - one

- Відносний URI: ./one.html#anchor - one або one.html#anchor - one

- Якщо посилання визначене в тому ж документі: #anchor - one

Ось приклад визначення і використання якорів усередині одного документу:

<H1>Зміст;</H1>

<P><A href="#section1">Вступ</A><BR>

<A href="#section2">Передісторія</A><BR> ..продовження змісту..

..тіло документу..

<H2><A name="section 1">Вступ</A></H2> ..розділ 1..

<H2><A name="section 2">Передісторія</A></H2> ..розділ 2..

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

Елемент IMG використовується для вставки зображень в документи. Для цього елементу початковий тег - обов'язковий, кінцевий тег - заборонений. Найважливішими атрибутом елементу являються:

src - задає місце розташування зображення.

alt - вказує альтернативний текст. Не є обов'язковим. Використовується текстовими браузерами - цей текст показується замість зображення. Звичайні браузери

використовують цей текст як підказку.

width, height - визначають розмір зображення. Також не є обов'язковими, але можуть бути використані для точнішої розмітки документу.

align - визначають вирівнювання зображення відносно навколишнього тексту. Має значення:

- bottom: означає, що вікно об'єкту має бути вертикально вирівняне відносно поточної базової лінії. Це значення використовується за умовчанням.

- middle: означає, що центр об'єкту має бути вирівняний вертикально відносно поточної базової лінії.

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

- left і right, призводять до переміщення зображення до поточного лівого або правого поля.

Приклад використання елементу IMG :

Сучаснішим способом вставки зображень є використання елементу OBJECT. Він дозволяє вставляти не лише зображення, але і складніші об'єкти - документи Word, анімацію, Flash -фильмы і так далі

Наприклад, зображення можна вставити таким чином:

<OBJECT data="589.jpg" type="image/jpeg" width="100" height="200"> вид з мого вікна

</OBJECT>

Документ Word може бути вставлений в HTML таким чином:

Відеокліп:

Частина коду, створювана Flash для публікації ролика :

<OBJECT classid="clsid: D27CDB6E - AE6D - 11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" WIDTH="550"

HEIGHT="400" id="myflash" ALIGN="">

</OBJECT>

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

Найважливіші атрибути:

classid - використовується для вказівки місця розташування об'єкту за допомогою URI. Він може використовуватися разом з атрибутом data або як альтернатива йому,

залежно від типу об'єкту.

codebase - визначає базовий шлях, використовуваний для дозволу відносних адрес URI, що задаються в атрибутах classid, data і archive. Якщо цей атрибут відсутній, значенням за умовчанням є базова адреса URI поточного документу.

codetype - визначає тип вмісту даних, отримання яких слід чекати при завантаженні об'єкту, що задається атрибутом classid. Цей атрибут не є обов'язковим, але рекомендується, якщо використовується атрибут classid, оскільки він дозволяє агентові користувача уникнути завантаження інформації для типу утримуваного, який він не підтримує. Якщо цей атрибут відсутній, за умовчанням використовується значення атрибуту type.

data - використовується для вказівки місця розташування даних об'єкту, наприклад, даних зображення для об'єктів, що визначають зображення. Якщо дається відносна адреса URI, він повинен інтерпретуватися відносно атрибуту codebase.

type - визначає тип вмісту для даних, що задаються атрибутом data. Цей атрибут не є обов'язковим, але рекомендується, якщо використовується атрибут data.

archive - використовується для визначення розділеного пропусками списку адрес URI архівів, що містять ресурси, що відносяться до об'єкту, який може включати ресурси, що задаються атрибутами classid і data. Попереднє завантаження архівів приведе до зменшення часу завантаження об'єкту. Архіви, вказані у вигляді відносних адрес URI, повинні інтерпретуватися відносно атрибуту codebase.

У більшості браузерів є вбудовані механізми для генерації основних типів даних, таких як текст, зображення, кольори, шрифти і ряд графічних елементів. Для генерації типів даних, які браузери не підтримують за умовчанням, вони зазвичай запускають зовнішні застосування. Елемент OBJECTдозволяє авторам об'єктів управляти генерацією даних - задавати зовнішню генерацію або використання деякої визначуваної автором програми, що генерує дані в браузері.

У загальному випадку автор повинен визначити три типи інформації :

· Реалізація включеного об'єкту. Наприклад, якщо включений об'єкт - аплет, автор повинен вказати місце розташування виконуваного коду аплета.

· Генеровані дані. Наприклад, якщо включений об'єкт є програмою, що генерує дані шрифту, автор повинен вказати місце розташування цих даних.

· Додаткові значення, необхідні об'єкту. Наприклад, деяким аплетам можуть бути потрібні початкові значення для їх параметрів.

Елемент PARAM визначає набір значень, які можуть знадобитися об'єкту під час роботи. Для цього елементу початковий тег обов'язковий, кінцевий - заборонений. Набір елементів PARAM повинен розташовуватися усередині елементу OBJECT. Елемент має наступний найважливіші атрибути:

· name - визначає ім'я робочого параметра, яке має бути об'єкту, що зрозуміло вставляється. Чи враховує ім'я властивості регістр, залежить від конкретної реалізації об'єкту.

· value - визначає значення робочого параметра, що задається атрибутом name. Значення властивостей не мають значення в HTML; їх значення визначається об'єктом.

· valuetype - визначає тип атрибуту value. Можливі значення:

· data: Це значення використовується за умовчанням. Воно означає, що значення, що задається атрибутом value, визначатиметься і передаватиметься в об'єкт у вигляді рядка.

· ref: Значення, що задається атрибутом value, є адресою URI ресурсу, де зберігаються робочі значення.

· object: Значення, що задається атрибутом value, є ідентифікатором, що посилається на оголошення OBJECT в цьому ж документі. Ідентифікатором має бути значення атрибуту id для оголошеного елементу OBJECT.

· type - задає тип утримуваного ресурсу, що призначається атрибутом value тільки у разі, якщо значенням атрибуту valuetype є "ref". Таким чином, цей атрибут визначає для агента користувача тип значень, які знаходитимуться за адресою URI, призначеною атрибутом value.

Елементи DIV і SPAN. Таблиці стилів.

HTML -документ може мати структуру, для якої недостатньо наявні елементи HTML. Елементи DIV і SPAN разом з атрибутами id і class забезпечують загальний механізм додавання структури в документи. Ці елементи визначають вбудовувану інформацію (SPAN) або інформацію рівня блоку (DIV), але не накладають ніяких інших виразів для представлення контексту. Припустимо, необхідно згенерувати документ у форматі HTML на основі бази даних інформації про клієнтів. Оскільки HTML не включає елементів для ідентифікації таких об'єктів як "клієнт", "номер телефону", "адреса електронної пошти" і так далі, використовуються елементи DIV і SPAN для досягнення потрібних ефектів структури і представлення. Для структуризації інформації може бути використаний елемент TABLE таким чином:

<P><SPAN class="client-title">Інформація про клієнта: </SPAN>

<TR><TH>Прізвище:<TD>Boyera</TR>

<TR><TH>Ім'я:<TD>Stephane</TR>

<TR><TH>Email:<TD>sb@foo.org</TR>

</TABLE>

</DIV>

Для елементів DIV і SPAN наявність початкового і кінцевого тега обов'язкова. Відмінність між цими елементами полягає у візуальному представленні - браузери ставлять переведення рядка до початку і після закінчення елементу DIV. У разі елементу SPAN це не відбувається.

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

Існує цілих чотири способи зв'язування документу і таблиці стилів :

· Зв'язування - дозволяє використовувати одну таблицю стилів для форматування багатьох сторінок HTML

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

· Вбудовування в теги документу - дозволяє змінювати форматування конкретних елементів сторінки

· Імпортування - дозволяє вбудовувати в документ таблицю стилів, розташовану на сервері

Зв'язування - проводиться за допомогою елементу LINK :

Впровадження - варіант, при якому опис стилів розташовується в документі, усередині елементу HEAD з використанням елементу STYLE :

<-- приховуємо таблицю для старих браузерів

-->

</STYLE>.

Параметр type="text/css" є обов'язковим і служить для вказівки браузеру використовувати CSS.

Вбудовування в теги документу- произврдится за допомогою параметра style, використовуваного в більшості елементів HTML. Цей метод небажаний, він призводить до втрати однієї з основних переваг CSS - можливості відділення інформації від опису оформлення інформації.

Імпортування - в елементі STYLE можна імпортувати зовнішню таблицю стилів за допомогою властивості @import таблиці стилів :

@import: url(mystyles.css);

Його слід задавати на початку стильового блоку або зв'язуваної таблиці стилів перед завданням інших правил. Значення властивості @import являється URL файлу таблиці стилів.

Розглянемо правила формування таблиць стилів. Усі оголошення CSS (селекторы) записуються у фігурних дужках:

ЕЛЕМЕНТ {характеристика: величина}

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

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

Наприклад, щоб забарвити усі заголовки першого рівня в червоний колір, можна написати:

H1 {color: red} чи H1 {color: #FF0000}

Групування. Можна присвоїти відразу групу властивостей декільком елементам. Для цього елементи перераховуються через кому, а кожна властивість відділяється від іншого крапкою з комою:

H1, H2 {font - size: 14pt; font - family: Arial; text - decoration: underline}

Цей запис означає, що усі заголовки першого і другого рівня відображуються підкресленими з використанням шрифту Arial величиною 14 пікселів.

Спадкоємство. У документі HTML деякі елементи можуть міститися усередині інших елементів. Якщо для зовнішнього елементу визначені правила форматування, а для вкладеного - ні, вкладений елемент наслідує правила форматування елементу-батька.

Деякі властивості не наслідують вкладеними елементами від своїх батьків, наприклад властивість background, але за умовчанням вкладені елементи відображуватимуться з фоном батьківського елементу.

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

є тіло документу, визначуване BODY:

BODY {color: black;

font - family: "Times New Roman";

font - size: 12 pt;

background: url(picture.gif) white;}

Приведені правила задають форматування документу за умовчанням: чорним шрифтом Times New Roman з фоном, графічним файлом picture, що задається.gif, або на білому фоні, якщо файл недоступний.

Використання спадкоємствадозволяє використовувати для форматування не абсолютні, а відносні величини. Наприклад, використовуючи правила форматування документу, описані вище, ми можемо встановити властивості для елементу SPAN таким чином:

SPAN {font - size: 120%}

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

P SPAN {font - size: 120%} означає, що розмір шрифту для елементу SPAN буде збільшений на 120% тільки у тому випадку, коли цей елемент знаходиться усередині елементу P. У усіх інших випадках використовуватимуться або значення за умовчанням (визначені в браузері), або визначені в таблиці стилів для цього елементу значення.

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

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

· Якщо присутній конфлікт між авторським стилем і стилем, визначеним за умовчанням, перевага віддається авторським параметром.

· Якщо конфліктують два стилі і один застосовується тільки в цій ситуації, а інший - в усіх випадках, перевага віддається першому (пріоритет "по специфічності").

Така система пріоритетів дозволяє одному документу посилатися на декілька таблиць стилів.

Класи. CSS реалізує можливість привласнювати стилі не усім однаковим елементам сторінки, а вибірково - для цього використовується параметр CLASS = "ім'я класу", що привласнюється будь-якому елементу сторінки. Клас дозволяє задати різні правила форматування для одного елементу певного типу або усіх елементів документу. Ім'я класу вказується в селекторі правила після імені тега і відділяється від нього точкою. Можна визначити декілька правил форматування для одного елементу і за допомогою параметра CLASS відповідного тега застосовувати різні правила форматування. Наприклад, можна визначити два класи для відображення заголовка першого рівня :

H1.red {color: red}

H1.blue (color: red; background - color: blue}

У тексті документу посилання на відповідний клас задається в параметрі CLASS :

<H1 CLASS="red">Червоний шрифт</H1>

<H1 CLASS="blue">Червоний шрифт на синьому фоні</H1>

У наведеному прикладі класи задавалися для різного відображення елементів одного типу. Якщо клас повинен застосовуватися до усіх елементів документу, то в селекторі задається ім'я класу з лідируючою точкою без вказівки конкретного елементу : .red {color: red} .blue (color: red; background - color: blue}

Тепер два класи red і blue можна застосовувати до будь-яких елементів документу :

<P CLASS="red">Червоний шрифт</P>

<P CLASS="blue">Червоний шрифт на синьому фоні</P>

Перший абзац відіб'ється червоним шрифтом, а другий - червоним шрифтом на синьому фоні.

Розглянемо деякі характеристики, визначувані в таблицях стилів.

5rik.ru

Материалы для учебы и работы

Посилання. Зображення. Об'єкти