Каскадні таблиці стилів CSS. Верстка

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

Каскадні таблиці стилів є описами різних HTML-елементів і створені вони для розширення властивостей останніх. Вперше стилі були запропоновані WWW Consorcium в рамках розробки специфікації HTML 3.0, проте реально цю шняга стали підтримувати тільки в 1997 році. Насолодитися CSS мали можливість лише щасливі власники таких браузерів, як Netscape Navigator 4.0 і Internet Explorer 4.0.
CSS використовується творцями веб-сторінок для завдання кольорів, шрифтів, розташування і інших аспектів представлення документа. Основною метою розробки CSS було розділення вмісту (написаного на HTML або іншій мові розмітки) та подання документа (написаного на CSS). Це поділ може збільшити доступність документа, надати велику гнучкість і можливість управління його поданням, а також зменшити складність і повторюваність в структурному вмісті. Крім того, CSS дозволяє представляти один і той же документ в різних стилях або методах виведення, таких як екранне уявлення, друк, читання голосом (спеціальним голосовим браузером або програмою читання з екрану), або при виведенні пристроями, що використовують шрифт Брайля.

Стандарт CSS визначає пріоритети, порядок яких застосовуються правила стилю, якщо для якогось елемента підходять властивості кількох правил одночасно (або, в окремих випадках, в одному правилі є однойменні властивості). Це називається «каскадом», в якому для властивостей розраховуються пріоритети або «ваги», що робить результати передбачуваними.
Метою дослідження є вивчення каскадних таблиць стилів CSS і вивчення верстки.
В рамках досягнення поставленої мети мною були поставлені наступні завдання:
1. Вивчити теоретичні основи каскадних таблиць стилів і верстки, а саме: HTML – мова розмітки гіпертексту, каскадні таблиці стилів, верстка: сторінки як ми їх бачимо;
2. Розглянути сучасні типи каскадних таблиць стилів CSS і сучасна верстка, зокрема: нові технології – HTML5 і CSS3, сучасна верстка, LESS: динамічний мова стильової розмітки, спрощеної технології розмітки HAML і SASS.
Структура роботи. Робота включає в себе вступ, основну частину, висновок і список використаної літератури.

1. Теоретичні основи каскадних таблиць стилів і верстки

1.1 HTML – мова розмітки гіпертексту

Свій початок World Wide Web поклав в березні 1989 року, коли Тім Бернерс-Лі з CERN запропонував керівництву цього міжнародного європейського наукового центру концепцію нової розподіленої інформаційної системи, яку назвав World Wide Web (WWW або W3).

Програмне забезпечення WWW передбачало наявність двох основних складових: WWW-сервера WWW-клієнта. Останній називається «оглядача».

На початку 1992 р. Марк Андрес з Національного Центру Суперкомп'ютерних Додатків (NCSA) побудував на засадах W3 програму MOSAIC – багатопротокольний переносний інтерфейс, який забезпечив бурхливе зростання популярності цього виду сервісу.

До 1995 року були розроблені програми-браузери Netscape, Arena, Chimera. Потім до них додалася Microsoft Internet Explorer. З початку 1995 р. практично всі комп'ютерні видання звернули увагу на цей вид сервісу: нарешті з'явився зручний інтерфейс для роботи в Internet.

При створенні нових браузерів мета їх створення була розширена – вони повинні були реалізувати багато протокольну роботу: не тільки в WWW, але і FTP, Telnet, Gopher, WAIS та інші Завдяки цьому в більш пізніх браузерах, працюючи в WWW можна використовувати практично всі сервіси Internet.
Бернерс-Лі вважав, що інформаційна система, побудована на принципах гіпертексту, повинна об'єднати всю безліч інформаційних ресурсів CERN, яка складалася з бази даних звітів, комп'ютерної документації, списків поштових адрес, інформаційної реферативної системи, наборів даних, отриманих в експериментах, і т. п.

Гіпертекстова технологія повинна була дозволити легко переміщатися з одного документа в інший.
Для реалізації гіпертекстової технології була вибрана мова HTML. У WWW програма-клієнт - це інтерпретатор HTML. Залежно від команд HTML програма виконує різні функції: розміщення тексту на екрані; обмін інформацією з сервером у міру аналізу отриманого HTML-тексту або графічних образів; запуск зовнішніх програм для роботи з документами в форматах, відмінних від HTML (GIF, JPEG, MPEG, Postscript і інші.).

Найбільшого поширення набули Web-браузери Microsoft Internet Explorer і Netscape Navigator (Netscape Communicator).
Сервер в WWW працює по протоколу HTTP. Він забезпечує роботу WWW, управляє наявними базами даних документів у форматі HTML і програмним забезпеченням, розробленим в стандарті CGI. Отримали популярність такі сервери HTTP, як Netsite (Netscape), Apache (Apache Group), Open Market Secure Web Server (Open Market), NCSA HTTP (NCSA), Netscape Enterprise Server (Netscape), O`Reilly Website (O`Reilly) , Internet Information Server (Microsoft), Personal Web Server (Microsoft).

Сервіс WWW дозволяє організувати величезну кількість інформації в компактне сховище з легким доступом до наявних матеріалів.
Найменшою одиницею інформації в сервісі W3 є Web-сторінка. Вона може мати різні розміри - від одного екрана до нескінченного їх кількості. Головна особливість Web-сторінки - наявність на ній гіпертекстових посилань, активізація яких може перевести на іншу частину Web-сторінки або на іншу сторінку.

Сукупність Web-сторінок, об'єднаних єдиною темою і організованих для спільної роботи, утворює Web-сайт, або Web-представництво, або просто «Web».

Кожна Web-сторінка зберігається у файлі, ім'я якого має розширення «htm» (для MS DOS і Windows – платформ) або «html» (для Unix – платформ). З цього розширення знаходять Web-сторінки програми-клієнти сервісу WWW-браузери (переглядачі Web-сторінок). Причому, браузери розуміють обидва ці розширення.
Web-сторінки поділяються на два види: пасивні й активні. Пасивні Web-сторінки містять тільки інформаційне наповнення (текст, графіку). Причому для зберігання в ЕОМ графіка оформляється у вигляді окремих файлів (в основному – у форматі GIF, JPEG або PNG). Сама ж Web-сторінка (тобто файл з розширенням htm») містить тільки розмічений текст.

Активні Web-сторінки, окрім інформаційного наповнення містять програми, за допомогою яких приймається інформація від відвідувачів (інтерактивна Web-сторінка), здійснюється зв'язок з СУБД (динамічно оновлювана Web-сторінка), виводиться на екран в просторі Web-сторінки банерна реклама (Web-сторінка з банерами), реалізуються деякі спецефекти, наприклад, використовують скролінг, та інші.
Web-сайт крім інформаційних сторінок обов'язково містить кореневу сторінку – home page («домашню сторінку»). Вона має в Інтернет стандартне ім'я: index. html або index.htm.

Web-сайт, який крім домашньої сторінки не має інформаційних сторінок, а замість домашньої сторінки створена тільки її заготівля, називається «порожній Web».
Створення Web-сторінки полягає в розмітці що міститься на ній тексту, підготовленого будь-яким текстовим редактором. Інші види інформації (графіка, звук, анімація) готуються відповідними редакторами і оформляються у вигляді файлів з відповідними розширеннями, стандартними для використовуваного браузера. Зв'язок між файлами, використовуваними на Web-сторінці, здійснюється за допомогою гіперпосилань.

Розмітка полягає у форматуванні тексту – визначенні його місця на сторінці способи відображення, у вказівці, в яке місце сторінки повинна бути вставлена графіка, як вона співвідноситься з текстом (вставляється на вільне місце, є фоном, на який наноситься текст, який обволікається текстом і т. д.), і вставки гіперпосилань, що здійснюють перехід на інші Web-сторінки або на використовувані програми. Для розмітки використовується мова HTML.
Найважливішими елементами Web-сторінок є інформаційна частина і гіперпосилання.
Кожна гіперпосилання складається з двох частин: назви і адреси. Назвою гіперпосилання може бути текст або малюнок. При наведенні курсору миші на назву гіперпосилання, курсор змінює форму на вказівний палець. Адресна частина гіперпосилання стає видно, якщо після зміни форми курсора натиснути праву кнопку миші. Клацання лівою кнопкою призводить до переходу за адресою, вказаною в гіперпосиланні.

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

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

У мережі Internet об'єднано безліч комп'ютерів різних типів. Ці комп'ютери можуть використовувати різні операційні системи, але всі вони повинні підтримувати прийнятий для обміну даними в Internet стандарт реалізований на базі стека протоколів TCP/IP (Transmission Control Protocol / Internet Protocol – Протокол керування передачею / Протокол Internet).

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

Стеком протоколів TCP/IP називають набір мережевих протоколів, використовуваних у технології інтернет. У цьому стеку розрізняють кілька рівнів, і протоколи високого рівня завжди базуються на протоколах більш низьких рівнів. Нижніми є протоколи фізичного і канального рівнів. Наприклад, протокол Ethernet, що описує передачу даних витій парі.
Вище йде мережевий рівень, де знаходиться протокол IP, що описує структуру мережі і доставку пакетів. Ще вище – транспортний рівень, де знаходиться протокол TCP, що використовується для передачі даних. На самому верху знаходиться безліч протоколів прикладного рівня, що виконують конкретні прикладні завдання. Зазвичай вони програмуються в окремих додатках. Наприклад: HTTP, FTP, Telnet і т. д.
Мова гіпертекстової розмітки HTML була запропонована Тімом Бернерсом-Лі у 1989 р. До моменту створення HTML існував стандарт мови розмітки друкованих документів – SGML (Standard Generalised Markup Language), який і був узятий в якості основи HTML. Передбачалося, що таке рішення допоможе використовувати існуюче програмне забезпечення для інтерпретації нової мови.
В якості елемента гіпертекстової бази даних для HTML був обраний звичайний текстовий файл, який зберігається засобами файлової системи операційного середовища ЕОМ.
Таким чином, гіпертекстова база даних в концепції WWW – це набір текстових файлів, написаних мовою HTML, який визначає:
– форму подання інформації (розмітка);
– структуру зв'язків файлів між собою (гіпертекстові посилання).
Такий підхід передбачає наявність ще однієї компоненти технології – інтерпретатора мови. У WWW функції інтерпретатора розділені між сервером гіпертекстової бази даних та інтерфейс користувача. Сервер, крім доступу до документів та обробки гіпертекстових посилань, здійснює також препроцессорную обробку документів, тоді як інтерфейс користувача здійснює інтерпретацію конструкцій мови, пов'язаних з представленням інформації.

Далі буде...