4 Методичні вказівки з вивчення дисципліни
У даному розділі методичних вказівок розглядаються найважливіші питання з кожної теми лекційних занять, на яких потрібно зосередити увагу щодо розуміння та формування теоретичних основ та опрацювання основних підходів до розв'язання задач, що пов’язані з ІТТІ.
4.1 Html (HyperText Markup Language)
4.1.1 Вступ
HTML (HyperText Markup Language) – це мова гіпертекстової розмітки документів, які служить для написання гіпертекстів ("нелінійних" текстів – документів, що містять посилання на інші документи) у спеціальному стандарті SGML (Standard Generalized Markup Language). У загальному вигляді HTML – це набір стилів (відзначених спеціальними символами), які виділяють різні компоненти Web-документів.
4.1.2 Створення документа в HTML
У HTML документи записуються в ASCII форматі й тому можуть бути створені й відредаговані в будь-якому текстовому редакторі.
Будь-який гіпертекст схожий на книгу і його можна розбити на окремі структурні елементи: власне документ; глави, параграфи, пункти, підпункти; абзаци.
Наприклад,
<html>
<head>
<title>Приклад HTML-тексту </title>
</head>
<body>
<h1>Глава 1</h1>
<h2>Параграф 1.</h2> Ласкаво просимо в HTML! Тут ми розповімо, як треба і як не треба писати гіпертексту.
<p><h2>Параграф 2.</h2><p>
</body>
</html>
Для кожного із цих елементів в HTML існують певні стилі, що описують, у якому вигляді користувач побачить текст на екрані. Наприклад, наступний файл відображено в браузері Internet Explorer на рис. 4.1.
Рисунок 4.1 – HTML-документ, відображений в Internet Explorer
4.2 Css (cascading style sheets)
4.2.1 Вступ
Cascading Style Sheets (Таблиці каскадних стилів) – це мова, що містить набір властивостей для опису зовнішнього вигляду будь-яких HTML-документів. З його допомогою дизайнер має повний контроль над стилем і розташуванням кожного елемента Web-сторінки, що простіше й набагато функціональніше за використання звичайного набору HTML-тегів.
4.2.2 Селектори
Синтаксис Селектори (Selectors): селектор {властивості}.
Будь-який елемент HTML – це можливий CSS селектор. Властивості селектора визначають стиль елемента, для якого він визначений.
Приклад: h1 {color:red; size:20pt;}
Всі елементи h1 у документі будуть червоного кольору, розміром в 20 точок (pt, point).
Класові селектори (Class Selectors):
Синтаксис: селектор.клас { властивості }.
Сlass – атрибут елемента в HTML, що визначає його клас. В CSS можна описати власні стилі для різних класів тих самих елементів.
Приклад: h1.blue {color:blue; size:20pt;}
Всі елементи h1 з атрибутом class="blue" стануть синіми.
Класи можуть так само бути описані без явного прив'язування їх до певних елементів.
Синтаксис: .клас {властивості}
Приклад: .green {color:green;}
У цьому випадку всі елементи з атрибутом class="green" стануть зеленими.
ID селектори (ID Selectors):
Cинтаксис: #id {властивості}.
ID – індивідуально іменований стиль. За його допомогою можна створювати стилістичні виключення серед елементів одного класу.
Ідентифікатори використовуються в основному для додання одному або декільком елементам одного класу індивідуальних властивостей. Приклад:
<html>
<head>
<title> Приклад CSS </title>
</head>
<style>
.blue {color:blue; font-style:italic}
#boldunderline {text-decoration:underline; font-weight:bold}
</style>
<body>
<p class="blue"> Здрастуйте, це моя домашня сторінка. </p>
<p class="blue" id="boldunderline"> Поки ще в стадії розробки ... </p>
<p id="boldunderline">... Але незабаром відкриється </p>
</body>
</html>
Як видно із прикладу, атрибут ID може використовуватися без зазначення класу.
Контекстуальні селектори (Contextual Selectors) – це з’єднання декількох звичайних селекторів. Стиль задається тільки елементам у заданій послідовності залежно від каскадного порядку.
Приклад: p em {color:silver;}.
У даному прикладі всі елементи em всередині елементів p матимуть заданий стиль.
Надання декільком елементам однакових властивостей.
Якщо потрібно надати декільком елементам Web-сторінки однакові властивості, при визначенні селектори перелічуються через кому перед блоком властивостей.
Приклад: h1,h2,h3,p,strong {color:green; font-style:italic;}
Всі елементи h1, h2, h3, p і strong будуть зеленими.
4.2.3 Таблиці стилів
Використання внутрішніх стилів мало чим відрізняється від використання звичайних HTML-тегів. Вони задають стиль лише одному елементу документа за допомогою атрибута style в HTML-тегу.
Приклад HTML: <font color="blue" size="3" face="Arial"> Текст </font>
Приклад Inline Style Sheet: <font style="color:blue; font-size:12pt; font-family:Arial"> Текст</font>.
Як можна помітити, код Inline Style Sheet (ISS) вийшов більшим, ніж HTML. Тому ISS варто використовувати лише тоді, якщо необхідно задати певному елементу свій індивідуальний стиль, що існує в класифікації CSS і нереалізований в HTML. Або ж при необхідності абсолютно позиціонувати даний елемент.
Глобальні стилі задають вид елементів усього документа. Для цього використовується тег <STYLE type="text/css">. Він розміщується в заголовку документа.
Приклад:
<html>
<head> <title> Приклад глобальних таблиць стилів </title>
</head>
<style type="text/css">
h1{color:red; font-style:italic; font-size:32px}
.blue{color:blue}
#bold{font-weight:bold}
</style>
<body>
<h1> Цей заголовок написаний великим червоним курсивом </h1>
Ось <font class="blue"> це </font> слово – синє, a <font id="bold"> це</font> – жирне.
</body>
</html>
У даному прикладі всі елементи h1 будуть написані великим червоним курсивом, всі елементи із зазначеним класом blue будуть синіми , а всі елементи з ідентифікатором id="Bold" стануть жирними. Для простоти замість <style type="text/css"> можна використовувати просто тег <style>, але це менш грамотно.