Комп'ютерні мережі

Вид материала

Документы

Содержание Вступ ..розділ 1.. Передісторія Елементи DIV і SPAN. Таблиці стилів. Вбудовування в теги документу Контекстні селекторы

Подобный материал:

• 1. Комп’ютерні мережі Тема Комп’ютерні мережі, 56.68kb.
• Робоча програма з дисципліни " Комп’ютерні мережі" (за вимогами кмсонп) Освітньо-кваліфікаційний, 251.7kb.
• Навчальна програма дисципліни Комп’ютерні мережі в системах управління Напрям підготовки, 70.88kb.
• Програма фахового вступного випробування для навчання за освітньо-кваліфікаційним рівнем, 138.81kb.
• Програма фахового вступного випробування для навчання за освітньо-кваліфікаційним рівнем, 132.16kb.
• Робоча навчальна програма навчальної дисципліни " Системне програмне забезпечення", 184.72kb.
• Способи передачі даних в мережі Internet (на прикладі електронної пошти), 408.96kb.
• Ютерні системи та мережі” Спеціалізація: Комп’ютерні засоби інформатики, 203.69kb.
• Питання на Державний іспит зі спеціальностей 091. 501 "комп’ютерні системи та мережі",, 111.96kb.
• Правила побудови адреси в мережі Internet, 9.49kb.

Зміст;

Вступ


Передісторія
..продовження змісту..

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

Вступ

..розділ 1..

Передісторія

..розділ 2..


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

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

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

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

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

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

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

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

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

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

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

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






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

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




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




Відеокліп:




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



Таким чином, елемент 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 таким чином:



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

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

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

• Зв'язування - дозволяє використовувати одну таблицю стилів для форматування багатьох сторінок HTML
  
• Впровадження - дозволяє задавати усі правила таблиці стилів безпосередньо в самому документі
  
• Вбудовування в теги документу - дозволяє змінювати форматування конкретних елементів сторінки
  
• Імпортування - дозволяє вбудовувати в документ таблицю стилів, розташовану на сервері
  

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



Впровадження - варіант, при якому опис стилів розташовується в документі, усередині елементу HEAD з використанням елементу 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 :