HTML і CSS тісно взаємопов'язані, тому, будемо розглядати їх в комплексі (частково повторюючи інформацію, представлену в гілці "HTML"). Почнемо спочатку.
Що таке HTML-сторінка?
HTML-сторінка - це текстовий документ, інформація в якому міститься в особливі інструкції для браузера, звані тегами (дескрипторами). Теги полягають в кутові дужки, і, як правило, мають відкриває тег і закриває тег. Інформація, укладена між відкриває і закриває тегом, інтерпретується браузером, відповідно до значення даного тега.
тег жирного тексту
Будь-яка HTML-сторінка повинна складатися з обов'язкового набору тегів. Ось приклад порожній HTML-сторінки з обов'язковими тегами:
Більш докладно зупинятися на тегах більше не будемо, тому що вона детально розглянута в гілці "HTML".
Перейдемо до конкретних прикладів. Заповнимо тіло HTML-сторінки інформацією для нашого навчального сайту. Інформацію візьмемо з Енциклопедії "Кирила і Мефодія", присвячену Золотому кольцуУкаіни.
Як виглядає сторінка: Приклад №1
Зверніть увагу, що браузер "не розуміє" форматування документа в коді HTML-сторінки, якщо воно зроблено не за допомогою тегів. Для того, щоб текст у вікні "браузера" став легким для читання, необхідно розставити потрібні теги в потрібному місці HTML-сторінки. Скористаємося тегом абзацу
і перекладу рядка
(Зверніть увагу, що тег перекладу рядка не має закриває варіанту).
Як виглядає сторінка: Приклад №2
Зверніть увагу, як змінився текст сторінки - тепер він став більш зручним для сприйняття.
У хорошого веб-дизайнера будь-який текст html-сторінки повинен перебувати в парі тегів. Зазвичай, це теги абзацу
. Текст, укладений між цими двома тегами є абзацом. Існує ще два дуже корисних тега для форматування тексту:- - блок тексту, укладений в DIV, закінчується перекладом рядка, це проводиться автоматично. При використанні DIV (на відміну від P) на початку тегу не вставляється абзац.
- - область документа, в межах якої будуть застосовані параметри форматування. На відміну від DIV м P цей тег можна застосовувати до будь-яких елементів, навіть, до окремих буквах.
Приклад використання тегів DIV і SPAN: Приклад №2a