Лабораторна робота №2.

Розробка Web – сторінок на основі стандарту HTML з використанням мови CSS .

Мета - ознайомитись зі створенням Web – сторінок на основі стандарту HTML, а також з використанням фреймів (Frames).

Звіт з виконання ЛБ має містити:

• короткі теоретичні відомості;

• хід виконання;

• висновки.

Теоретичні відомості.

Від версії системи CSS дуже сильно залежить, що з її допомогою можна добитися. Перша версія специфікація (CSS lavel 1 або просто CSS1), стала офіційним стандартом в кінці 1996 року, по суті, лиш пропонувала CSS – запис для тих параметрів форматування, котрі і без того вже, будь це законно або законно, були доступними HTLM-документам в тодішніх графічних браузерах. Властивості CSS включали в себе вибір шрифту, параметри форматування тексту, установку фонового кольору або зображення, ширину полів та інші.

Не можна сказати, що доступна на сьогодні веб–дизайнерам технологія текстової розмітки – HTML з невеликим домішком CSS – була зовсім залишена здібностей до поділу аспектів вмісту і представлення. Досвід, вроджена акуратність і відповідальне відношення до матеріалу, з яким приходиться працювати, дозволяє окремим дизайнерам практикувати в HTML стиль, який відповідає потребам ідеології SGML. Багатьом дизайнерам зовсім не просто перебудуватись на "ортогональний стиль" розмітки. Якщо навіть примітивні "іменовані стилі" в текстових процесорах рахується прерогативою "професіональних користувачів", що говорить про більш послідовні системи ортогональної розмітки.

Основними принципами CSS є:

• Пряма і зворотна сумісність. CSS 2.1 агенти користувачів зможуть зрозуміти, таблиці стилів CSS 1 . Також CSS 1 агенти користувачів зможуть читати CSS 2.1 таблиці стилів відкинувши частини які вони не розуміють. Крім того, агенти користувачів без підтримки CSS зможуть відобразити документв. Звичайно, без стилістичних параметрів, але весь контент буде представлений.

• Доповнення до структурованих документів. Таблиці стилів доповнюють структуровані документи (наприклад, HTML і XML), надаючи стилістичну інформацію для розміченого тексту. Вона повинна бути легко зміною, щоб редагувати стиль листа практично без впливу на розмітку.

• Незалежить від виробника, платформи та пристроїв. Таблиці стилів дозволяють документам залишатися незалежними від постачальника, платформи та пристрою. Таблиці стилів самі по собі незалежні від платформи та виробника(бренду), але CSS 2.1 дозволяє налаштування стилів для групи пристроїв (наприклад, для принтерів).

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

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

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

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

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

• Звязки з альтернативними мовами. CSS може використовуватися наприклад разом з JavaScript котрий динамічно змінюватиме значення певного елемента ("color") і т.д.

Хід роботи.

Задача 1. Створити веб сторінку(), що містить зовнішній файл стилів style.css.

body {

color: blue;

}

h1 {

color: white;

background-color: blue;

}

ol {

color: green;

}

<html>

<head>

<meta charset="utf-8" >

<link rel="stylesheet" href="style.css">

</head>

<body>

<h1>Понятие о языке XML</h1>

<p>XML - это расширяемый язык разметки (Extensible Markup Language), разработанный специально для размещения информации в World Wide Web, наряду с HTML, который давно стал стандартным языком создания Web-страниц. В отличие от HTML, вместо использования ограниченного набора определённых элементов вы имеете возможность создавать ваши собственные элементы и присваивать им любые имена по вашему выбору. Примечание: подразумевается, что читатель данной статьи хотя бы очень поверхностно знаком с языком HTML.<br>

XML решает ряд проблем, которые не решает HTML, например:</p>

<ol>

<li>Представление документов любого (не только текстового) типа, например, музыки, математических уравнений и т.д.</li>

<li>Сортировка, фильтрация и поиск информации.</li>

<li>Представление информации в структурированном (иерархическом) виде.</li>

</ol>

В зависимости от уровня соответствия стандартам документ может быть "верно сформированным" ("well-formed"), либо "валидным" ("valid"). Вот несколько основных правил создания верно сформированного документа:

<ol>

<li>Каждый элемент XML должен содержать начальный и конечный тэг (либо пустой тэг типа <TAG />, который может нести информацию посредством своих атрибутов).</li>

<li>Любой вложенный элемент должен быть полностью определён внутри элемента, в состав которого он входит.</li>

<li>Документ должен иметь только один элемент верхнего уровня.</li>

<li>Имена элементов чувствительны к регистру.</li>

</ol>

</body>

</html>

Задача 2. Підключити стиль першої задачі як стиль користувача через налаштування браузера. (докладно описати шлях підключення)

В браузере Internet Explorer подключение стиля пользователя делается через меню Сервис > Свойство обозревателя > Кнопка «Оформление»

Задача 3. Створити веб сторінку, що містить пов’язані стилі mysite.css та main.css що є незмінними незалежно від коду.

mysite.css Містить інформацію про стиль абзаців Times New Roman 10, вирівнювання тексту.

main.css Містить стиль заголовку Times New Roman 12, вирівнювання по центру, колір –червоний.

h1 {

color: red;

text-align: center;

font-weight: normal;

}

p {

color: black;

font-size: 10pt;

}

<html>

<head>

<meta charset="utf-8" >

<link rel="stylesheet" href="main.css">

<link rel="stylesheet" href="mysite.css">

</head>

<body>

<h1><b>XML</b> (Extensible Markup Language)</h1>

<p>Це розширювана мова розмітки, що є підмножиною мови SGML і тому має спільні з нею цілі - розмітка будь-якого типу документів.</p>

<h1><b>XML</b></h1>

<p>Має багато спільного з мовою розмітки HTML, але вони різні за своїм призначенням. HTML, як і XML, є підмножиною SGML, але призначений тільки для відображення інформації в браузері. XML же призначений для структурованого зберігання інформації і не містить жодних конструкцій для відображення цих даних.</p>

<p>Для відображення даних, що зберігаються в XML-форматі, використовуються різного роду перетворювачі, наприклад мову трансформацій XSLT. Комбінація XML + перетворювач дозволяє досягти того ж результату, що і використання HTML - форматованого відображення документа користувача. Однак у випадку використання XML і перетворювача дані зберігаються окремо від їх подання, тобто від інструкцій про те, як вони повинні відображатися.</p>

</body>

</html>

Задача 4. Створити веб сторінку, що містить глобальний стиль заголовку та абзаців для задачі3.

<style type="text/css">

h1 {

color: red;

text-align: center;

font-weight: normal;

}

p {

color: black;

font-size: 10pt;

}

</style>

Задача 5. Створити веб сторінку, що містить внутрішній стиль заголовку та абзаців для задачі3.

<html>

<head>

<meta charset="utf-8" >

</head>

<body>

<h1 style="color: red;text-align: center;font-weight: normal;"><b>XML</b> (Extensible Markup Language)</h1>

<p style="color: black;font-size: 10pt">Це розширювана мова розмітки, що є підмножиною мови SGML і тому має спільні з нею цілі - розмітка будь-якого типу документів.</p>

<h1 style="color: red;text-align: center;font-weight: normal;"><b>XML</b></h1>

<p style="color: black;font-size: 10pt">Має багато спільного з мовою розмітки HTML, але вони різні за своїм призначенням. HTML, як і XML, є підмножиною SGML, але призначений тільки для відображення інформації в браузері. XML же призначений для структурованого зберігання інформації і не містить жодних конструкцій для відображення цих даних.</p>

<p style="color: black;font-size: 10pt">Для відображення даних, що зберігаються в XML-форматі, використовуються різного роду перетворювачі, наприклад мову трансформацій XSLT. Комбінація XML + перетворювач дозволяє досягти того ж результату, що і використання HTML - форматованого відображення документа користувача. Однак у випадку використання XML і перетворювача дані зберігаються окремо від їх подання, тобто від інструкцій про те, як вони повинні відображатися.</p>

</body>

</html>

Основні поняття Об'єктна модель XML-документа Взаємодія PHP і XML Розширення SAX і DOM XML Установка розширення DOM XML Взаємодія PHP і XML за допомогою DOM XML

Задача 6. Створити веб сторінку, що містить кілька стилів згідно їх ієрархії. 1,3,5 заголовок задати зеленим кольором розміром 24 пікселя за допомогою внутрішнього стилю, а наступні(2,4,6) синім кольором розмір 36 через таблицю глобальних стилів.

h1 {

color: green;

text-align: left;

font-size: 24px;

}

h2 {

color: blue;

text-align: right;

font-size: 36px;

}

<html>

<head>

<meta charset="utf-8">

<link rel="stylesheet" href="style6.css">

</head>

<body>

<h1>Основні поняття</h1>

<h2>Об'єктна модель XML-документа</h2>

<h1>Взаємодія PHP і XML</h1>

<h2>Розширення SAX і DOM XML</h2>

<h1>Установка розширення DOM XML</h1>

<h2>Взаємодія PHP і XML за допомогою DOM XML</h2>

</body>

</html>

Задача 7. Створити веб сторінку, що містить імпорт стилів заголовку(задача 6) один для виводу на екран main.css Times New Roman 14 зеленим кольором жирний та smart.css Courier New 10 чорним кольором.

<style type="text/css">

@import url("main.css");

@import url("smart.css");

</style>

Задача 8. Створити веб сторінку, що використовує стильову таблицю в яку імпортовано вміст стилю з зовнішнього файлу в таблицю глобальних стилів. Веб сторінка має мати вигляд задача 6.

<style type="text/css">

@import url("style8.css");

</style>

Задача 9. Поясніть, що виконує даний файл:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title> XML </title>

<link media="print, handheld" rel="stylesheet" href="print.css" type="text/css">

<link media="screen" rel="stylesheet" href="main.css" type="text/css">

</head>

<body>

<p> Має багато спільного з мовою розмітки HTML, але вони різні за своїм призначенням. HTML, як і XML, є підмножиною SGML, але призначений тільки для відображення інформації в браузері. XML же призначений для структурованого зберігання інформації і не містить жодних конструкцій для відображення цих даних.</p>

</body>

</html>

Файл стилів змінюється в залежності від пристрою: принтер, кишеньковий комп’ютер, або єкран.

Табл. Названия цветов
Имя	Цвет	Код	Описание
white		#ffffff или #fff	Белый
silver		#c0c0c0	Серый
gray		#808080	Темно-серый
black		#000000 или #000	Черный
maroon		#800000	Темно-красный
red		#ff0000 или #f00	Красный
orange		#ffa500	Оранжевый
yellow		#ffff00 или #ff0	Желтый
olive		#808000	Оливковый
lime		#00ff00 или #0f0	Светло-зеленый
green		#008000	Зеленый
aqua		#00ffff или #0ff	Голубой
blue		#0000ff или #00f	Синий
navy		#000080	Темно-синий
teal		#008080	Сине-зеленый
fuchsia		#ff00ff или #f0f	Розовый
purple		#800080	Фиолетовый