Урок 2. Красиві документи

Урок 1. Перше знайомствоУрок 3. Красиві програмиУрок 4. ГіпертекстУрок 5. ГрафікаУрок 6. Конструктор документівУрок 7. Як ми жили без таблиць?


Один і той же текст може виглядати по-різному.

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

Подивіться два представлення одного і того ж тексту на екрані.

Ймовірно, реакція на перший варіант була такою “Це не текст, а якийсь жах!”. Ви не можете собі уявити, як часто трапляються в Інтернеті сторінки оформлені подобним чином. Давайте не будемо піддаватися спокусі використовувати чисельні можливості HTML за принципом “чим більше, тим краще”. Набагато ближче до істини помірне твердження “чим простіше, тим приємніше оку”. Головне – не насиченість і розмаїття, а хороший смак і єдиний стиль.

Перш ніж перейти до розгляду тегів, які задають оформлення тексту на екрані, поговоримо трохи про структуру документа і його зовнішній вигляд. Адже ви не хочете писати “жахіття”, подібні приведеному антиприкладу?

Структура, стиль і зовнішній вигляд текстового документа

Текст добре читається, якщо він структурований, тобто, розбитий на окремі смислові частини і в ньому застосовується єдиний спосіб оформлення окремих елементів по всьому документу.

Структуру тексту краще всього продумати заздалегідь. Можна рекомендувати наступний спосіб оформлення:

  1. Запишіть заголовок для всього документу. Він повинен бути найбільшим (тег <H1>) і вирівняний по центру в рядку.
  2. Розділіть документ на головні частини (глави). Заголовки глав вирівнюються по лівому краю і робляться трохи менше заголовку документа (тег <H2>).
  3. При необхідності глави розділіть на параграфи (заголовки <H3>), параграфи на пункти (заголовки <H4>). Всі заголовки документа, крім його назви, вирівнюються по лівому краю.
  4. Текстовий фрагмент, позначений заголовком, розбийте на абзаци (тег <P>). Абзаци повинні бути невеликими і містити закінчену думку.
  5. У кожному абзаці використовуйте одні і ті ж прийоми оформлення:
    • нормальний розмір шрифту;
    • напівжирний шрифт для виділення слів або коротких фраз;
    • курсив для виділення текстових (звичайних) посилань або цитування (назва книги, газети, статті…)
    • зміщення великої цитати вправо від лівої межі тексту.
  6. Вирішить питання про кольорову гаму свого документу. Виберіть колір фону і колір основного тексту. Підберіть кольори для деяких спеціальних важливих частин і використовуйте їх однаково по всьому документу.

Програмування виведення тексту

Перейдемо від загальних рекомендацій до питання про те, як їх можна виконати засобами HTML.

Перш за все, уточнимо, що відкривають теги можуть містити атрибути, атрибути, тобто додаткову інформацію про властивості відображуваного на екрані елемента. Атрибути записуються всередині відкриваючого тегу після його імені у вигляді окремого ключового слова або ключового слова, знака “=” і параметра (значення атрибута).

Порядок слідування атрибутів у тегу не важливий.

Атрибут діє від відкриваючого тегу, в якому він заданий, до закриваючого або тільки всередині тегу, якщо тег не має парного.

Наприклад, тег, який малює горизонтальну лінію, може містити атрибут size, що змінює товщину лінії. Якщо цей атрибут не заданий, горизонтальні лінії мають в браузері товщину в два (або три) піксела.

Задаючи різні параметри атрибуту size, можна отримати цілу колекцію ліній, різних за товщиною:

Команда HTML Вид лінії на екрані
<HR size=1>
<HR>
<HR size = 5>
<HR size = 10>

Зауваження. За замовчуванням браузер малює лінії – “об’ємними”. Можна вивести лінії “плоскими”, якщо використовувати атрибут noshade:

Команда HTML Вид лінії на екрані
<HR size=1 noshade>
<HR noshade>
<HR size = 5 noshade>
<HR size = 10 noshade>

Повний список атрибутів тегу <HR> розташований тут.

Давайте подивимося, які теги використані для виведення другого прикладу на екрані браузера.

Текст HTML-програми Коментар
<HTML>

  <HEAD>
    <META content="charset=windows-1251">
    <TITLE>Вид 1</TITLE>
  </HEAD>

  <BODY bgcolor=aqua text=black>

    <H1 align = center>
      Приклад оформлення тексту
    </H1>

    <HR>
    <H2>Сборник газетных вырезок</H2>
    <P>
Коллекцию открывает заметка из газеты
"<CITE>Станок</CITE>".

    <BLOCKQUOTE>
      <FONT color=maroon>
        <P>
Действительно, в отделе "<CITE>Что
случилось за день</CITE>" нонпарелью
было напечатано:
        <BLOCKQUOTE>
          <H3 align = center>
            Попал под лошадь
          </H3>
          <SMALL>
            <P>
Вчера на площади Свердлова попал под
лошадь извозчика N 8974 гр.О.Бендер.
Пострадавший отделался легким испугом.
          </SMALL>
        </BLOCKQUOTE>
        <P>
- Это извозчик отделался легким испугом,
а не я, - ворчливо заметил О.Бендер.
    <P align = right>
"<CITE>Двенадцать стульев</CITE>"<BR>
Илья Ильф, Евгений Петров
      </FONT>
    </BLOCKQUOTE>
  </BODY>

</HTML>
Початок програми

Початок заголовка


Кінець заголовка

Початок тіла програми
(заданий колір фону і шрифту)
Заголовок вирівняний по
центру сторінки






Виділено назва газети

Початок великої цитати
Встановлено колір шрифту
для цитати
Виділено назву
відділу

Початок підцитати
Заголовок вирівняний по
центру підцитати

Зменшено розмір шрифту
(для імітації нонпареллю)



Відновлений розмір шрифту
кінець підцітати



Абзац вирівняний праворуч


Відновлений колір шрифту
Кінець великої цитати
Кінець тіла програми

Кінець програми

Колір фону і колір шрифту

В дослідах уроку 1 ми ніяк не задавали, ні колір фону документа, ні колір шрифту, яким відображався текст. Тим не менше, і фон, і шрифт не були безбарвними при перегляді документа в браузері.
Ймовірно, ви бачили чорний шрифт на білому фоні. Але це зовсім не обов’язково. Все залежить від налаштувань вашого браузера. Коли в програмі на HTML кольори явно не задані, браузер використовує свої установки за замовчуванням.
У моєму Internet Explorer в розділі “Кольори” включена опція “Использовать стандартные цвета Windows”, і я бачу чорні букви на білому фоні. Можна вимкнути цю опцію і встановити свої кольори для роботи “за замовчуванням”.

Якщо вам хочеться, щоб документ виглядав строго певним чином, не покладайтеся на режими умовчання, а задавайте потрібні параметри явно.

Кольори для фону і шрифту на всьому протязі документа можна задати за допомогою атрибутів bgcolor і text в тезі <body>. У розглянутому вище прикладі записано:

<HTML>

  <HEAD>
  ....
  </HEAD>

  <BODY bgcolor=aqua text=black>
  ....
  </BODY>
</HTML>
Це означає, що в документі задані чорні символи (black) на бірюзовому фоні (aqua). Ключові слова для інших кольорів наводиться в таблиці, а список атрибутів тега <BODY>тут.

Як зазначалося вище, атрибути кольорів, задані в тезі <BODY> діють до парного тега </BODY>, тобто, до кінця документа. З кольором фону нічого вже не поробиш – він може задаватися тільки один раз, а колір шрифту можна змінювати всередині документа багато разів за допомогою команди <FONT></FONT>. Установка кольору в цій команді виконується за допомогою атрибута color так, як це зроблено в прикладі:

<HTML>

  <HEAD>
  ....
  </HEAD>

  <BODY bgcolor=aqua text=black>
  ....
  <FONT color=maroon>
  ....
  </FONT>
  ....
  </BODY>
</HTML>





Задані кольори для всього документа

Заданий новий колір шрифту (коричневий)

Відновлений колір шрифту (чорний)



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

Використовуючи команду <FONT></FONT>, можна не тільки перевизначити колір шрифту, а також його розмір і зовнішній вигляд.
Однак, використання відповідних атрибутів не рекомендується. Установку шрифтового типу підтримують не всі браузери. Крім того, вказаний шрифт може не виявитися на комп’ютері у користувача. Для зміни розмірів шрифту є інші команди, більш підходящі для збереження єдиного стилю оформлення документа (<BIG></BIG> для укрупнення і <SMALL></SMALL> для зменшення).

Оформлення окремих елементів тексту

Текстові посилання і цитати

Назва книги, газетної статті, фільму або пісні можна виділити за допомогою команди <CITE>…</CITE>.
Більшість браузерів зображує текстове посилання курсивом (похилим шрифтом). Цю ж команду можна використовувати для оформлення невеликих внутрішньорядкових цитат.

Великі цитати краще виділяти з основного тексту за допомогою команди <BLOCKQUOTE>…</BLOCKQUOTE>. Браузер відображає цитату з більшим, ніж у звичайного тексту, лівим і правим відступом від краю сторінки.

Подивіться, як виглядають посилання і цитати в нашому прикладі. А тепер подивіться на текст програми.

Посилення тексту

Часто, крім заголовків, які виділяються командою <Hn>…</Hn> (n – рівень заголовка, цифра від 1 до 6) і розташовуються на окремих рядках, потрібно виділити в тексті окремі слова, щоб підкреслити їх значення, сконцентрувати на них увагу користувача. Наприклад, усюди в цьому тексті виділені напівжирним шрифтом теги команд. Для такого виділення елементів тексту призначена команда <STRONG>…</STRONG>.

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

Намагайтеся робити в тексті якомога менше виділень – текст буде краще читатися, і пам’ятайте, що виділити все – значить, не виділити нічого.

Зміна розміру шрифту

Виділяти елементи тексту можна не тільки за допомогою жирності, а й зміною розміру шрифту. Наприклад, текст оголошення “Попал под лошадь” в прикладі виводиться на екран дрібним шрифтом, імітуючи нонпарель.

Команда <BIG>…</BIG>збільшує розмір шрифту по відношенню до поточного, а команда<SMALL>…</SMALL> – зменшує його. Команди можуть бути вкладеними, що дозволяє збільшувати (або зменшувати) розмір у кілька разів. Подивіться цей документ.
Текст програми можна побачити тут.

Зауваження. Виникає питання: в якому діапазоні можна змінювати розмір шрифту? Відповідно до стандарту, браузер повинен підтримувати сім розмірних ступений: -2, -1, 0, +1, +2, +3, +4. (Тут за “0” позначено “нормальний” розмір, тобто, розмір, який браузер використовує за замовчуванням.)

Авторське редагування

Ви переконалися, що браузери ігнорують в програмі множинні пробіли та символи кінця рядка при показі документа на екрані. З цього правила, проте, є виняток. Команда <PRE>…</PRE> змушує браузер виводити текст на екран так, як він записаний у програмі – з усіма пробілами і кінцями рядків. Це зручно при показі складних сторінок.

Ілюстрація 1 Текст програми
Ілюстрація 2 Текст програми
Ілюстрація 3 Текст програми
Центрування абзаців і фрагментів

Команда <P>, записана без атрибутів, вирівнює текст по лівому краю сторінки. Можна запрограмувати виведення тексту з рівним правим краєм, або так, щоб всі його рядки були вирівняні по центру.

<P align = right> – вирівнює абзац по правому краю
<P align = center> – вирівнює абзац по центру

Абзац вирівняний ліворуч Текст програми
Абзац вирівняний праворуч Текст програми
Абзац вирівняний по центру Текст програми

Вирівняти по центру можна не тільки окремий абзац або заголовок, а й цілу групу екранних елементів, якщо помістити їх опис всередині тегів <CENTER></CENTER>.
Наведені нижче дві різні програми приводять до одного і того ж результату.

Ілюстрація 1 Текст програми Тут центровані окремі елементи
Ілюстрація 2 Текст програми Тут відцентрований весь блок
Спеціальні символи

Оскільки символи “<” і “>” сприймаються браузером як початок і кінець тега, виникає питання: а як показати ці символи на екрані? Ще питання: чи можна вставити в тексті абзацу примусову групу пробілів (адже браузер ігнорує зайві пропуски)?

Для цих символів, а також для деяких інших передбачено спеціальне кодування. Код будується з символу “&” (амперсанд), фіксованого імені та завершального символу “;”:

&ім’я;

Ось коди деяких символів (решту кодів можна подивитися тут):

< &lt; > &gt;
& &amp; пробіл &nbsp;
&quot; копірайт &copy;

Всі букви, складові імені спеціального знака, повинні бути рядковими (тобто, маленькими). Використання, наприклад, таких позначень як “&QUOT;” і “&AMP;” не допускається!

Ілюстрація 1 Текст програми
Ілюстрація 2 Текст програми

Натисніть кнопку “Скидання”, потім виберіть вірні відповіді на запитання.

  1. Подивіться документ.
    Позначте помилки в його оформленні.
    Кольорове рішення документа
    Рівень заголовка
    Виділення великих фрагментів розміром шрифту і жирністю
    Невірно оформлена цитата
    Невірно оформлено джерело цитати


    Виправте помічені помилки оформлення документа:

  2. Які команди здатні змінити колір фону документа.
    команда <HTML></HTML>
    команда <BODY></BODY>
    команда <FONT></FONT>
    команда <P></P>
    команда <BIG></BIG>

  3. Які команди здатні змінити колір шрифту.
    команда <HTML></HTML>
    команда <BODY></BODY>
    команда <FONT></FONT>
    команда <P></P>
    команда <BIG></BIG>

  4. Якою командою виділяються невеликі цитати і текстові посилання.
    команда <CITE></CITE>
    команда <BLOCKQUOTE></BLOCKQUOTE>

  5. Якою командою виділяються великі багатострокові цитати.
    команда <CITE></CITE>
    команда <BLOCKQUOTE></BLOCKQUOTE>

  6. Яким способом можна виділити елементи тексту
    розміром шрифту
    кольором
    щільністю шрифта (жирністю)
    курсивом
    зміщенням від краю полів

  7. Запишіть ім’я команди (без символів <>), за допомогою якої можна збільшити розмір шрифту



  8. Запишіть ім’я команди (без символів <>), за допомогою якої можна зменшити розмір шрифту



  9. Запишіть ім’я атрибута команди <FONT>, за допомогою якої можна змінити колір шрифту


  10. Запишіть ім’я команди, призначеної для виділення елементів тексту


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


  12. За допомогою якого атрибута команди <P>можна змінити вирівнювання абзацу по вертикалі.


  13. Запишіть ім’я атрибута команди <P> і значення параметра для вирівнювання абзацу по центру.
    атрибут
    параметр

  14. Запишіть ім’я атрибута команди <P> і значення параметра для вирівнювання абзацу по правому краю.
    атрибут
    параметр

  15. Якою командою можна відцентрувати відразу кілька абзаців.


  16. Якою командою можна відцентрувати одночасно заголовок і абзац.


  17. Як вивести ці символи на екран браузера.
    "<"
    ">"
    пробіл

Щоб побачити результат роботи, натисніть кнопку "Оцінка".

  1. Наведений нижче текст перетворіть в HTML-документ.


  2. Створіть HTML-документ – невелика розповідь про ваші захоплення інформатикою і комп’ютерами.

ЗмістЗмістНа урок 1Урок 1На урок 3Урок 3