Мы поможем в написании ваших работ!



ЗНАЕТЕ ЛИ ВЫ?

Частина 2: Форматування тексту, робота з кольором

Поиск

Теорія:

Кольорове оформлення документа

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

Колір може бути заданий назвою (наприклад, green) або шістнадцятковий числом, що визначає колір в моделі RGB. Ця колірна модель базується на визначенні кольору як композиції трьох основних відтінків кольору: червоного (Red), зеленого (Green) і синього (Blue). Кожна компонента задається двозначним шістнадцятковий числом (тобто змінюється від 00 до FF). Потім ці значення об'єднуються в одне число, перед яким ставиться символ # (Більшість сучасних браузерів може розпізнати колір і без вказівки символу #).

Слід також відзначити, що в записі шістнадцяткового значення кольору можна використовувати як великі, так і маленькі латинські літери, наприклад, запис # 00FF00рівнозначна запису # 00ff00.

Нижче представлена таблиця 16 стандартних квітів разом з їх шістнадцятковий кодами. Сучасні браузери розуміють 140 найменувань квітів, частина з яких наведена у розділі "Динамічний HTML".

 

Колір Код Колір Код
black (чорний) # 000000 silver (срібний) # C0C0C0
maroon (темно-бордовий) # 800000 red (червоний) # FF0000
green (зелений) # 008000 lime (вапно) # 00FF00
olive (оливковий) # 808000 yellow (жовтий) # FFFF00
navy (темно-синій) # 000080 blue (синій) # 0000FF
purple (фіолетовий) # 800080 fuchsia (фуксія) # FF00FF
teal (синьо-зелений) # 008080 aqua (аква) # 00FFFF
gray (сірий) # 808080 white (білий) # FFFFFF

Приклад

Щоб встановити синій колір фону документа потрібно для синьої складової кольору вказати максимальне значення, а інші зробити рівними нулю: <BODY BGCOLOR="#0000FF">.

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

Web-палітра розпізнає за шість відтінків червоного, синього і зеленого кольору, що в результаті дає 216 можливих значень кольорів (6x6x6=216). Тому її іноді називають "куб 6x6x6". У таблиці наведено числові значення кольорів з Web-палітри.

 

 

Шістнадцяткові Десяткові Процентні
00 (самий темний)   0%
    20%
    40%
    60%
CC   80%
FF (самий світлий)   100%

 

Кольори, RGB-компоненти яких входять в Web-палітру, називають Web-надійними квітами. Серед всіх кольорів, що мають імена, тільки 10 квітів входять в Web-палітру: aqua, black, blue, cyan, fuchsia, lime, magenta, red, white і yellow.

Поділ тексту на абзаци

Мова HTML припускає, що автор документа нічого не знає про комп'ютер свого читача. Читач має право встановити будь-який розмір вікна і користуватися будь-яким з наявних у нього шрифтів. Це означає, що місце перенесення в рядку визначається тільки програмою перегляду й установками кінцевого користувача. Символи переведення рядка оригінального документа ігноруються, в результаті чого текст, відмінно виглядала у вікні вашого редактора, може перетворитися на суцільний нерозбірливі текст у вікні програми перегляду.

Уникнути цієї неприємності дозволяє поділ на абзаци за допомогою тега <Р>. Додайте його на початку кожного абзацу, і програма перегляду відділить абзаци один від одного символом нового рядка. Використання закриває тега </P> необов'язково. Кілька стоять поспіль тегів <Р> не дають додаткового простору між абзацами.

Тег абзацу має один атрибут, підтримуваний більшістю браузерів. Це атрибут ALIGN, що задає вирівнювання тексту в абзаці. Якщо цей атрибут не заданий, то текст вирівнюється по лівому краю вікна браузера. У таблиці представлені можливі значення цього атрибуту:

 

Значення Функція
LEFT Вирівнювання тексту по лівій межі вікна браузера
CENTER Вирівнювання по центру вікна браузера
RIGHT Вирівнювання по правій межі вікна браузера
JUSTIFY Вирівнювання тексту по ширині вікна браузера

Приклад

Якщо ви хочете, щоб текст абзацу був вирівняний по центру, потрібно написати наступне: <P ALIGN=CENTER> Текст </P>
Розрив рядка

Іноді потрібна "розірвати" текст, перенісши його залишок на новий рядок, при цьому не виділяючи нового абзацу. Для цього використовується тег розриву рядка <BR>. Він змушує програму перегляду виводити стоять після нього символи з нового рядка. На відміну від тега абзацу, тег <BR> не додає порожній рядок. У цього тега немає парного закриваючого тега.

Приклад

<HTML> <HEAD><TITLE> Йосип Бродський </TITLE></HEAD><BODY TEXT=black BGCOLOR=white>Звідки до нас прийшла зима, <BR> не знаєш ти, ніхто не знає.<P>Замовкла все. Вона сама <BR> холодних вуст розтискає.</BODY></HTML>

Деякі браузери інтерпретують кілька стоять поруч тегів <BR> як один тег, тому не варто використовувати його для вставки порожніх рядків.

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

Горизонтальні лінії

Іншим методом розділення документа на частини є проведення горизонтальних ліній. Вони візуально підкреслюють завершеність тієї чи іншої області сторінки. Тег <HR>дозволяє провести рельєфну горизонтальну лінію у вікні більшості програм перегляду. Цей тег не вимагає закриває тега. До і після лінії автоматично вставляється порожня рядок. Атрибути тега <HR> представлені в таблиці.

 

 

Атрибут Призначення
ALIGN Вирівнює по краю або центру; має значення LEFT, CENTER, RIGHT
WIDTH Встановлює довжину лінії в пікселах або відсотках від ширини вікна браузера; в останньому випадку додається символ %
SIZE Встановлює ширину лінії в пікселах
NOSHADE Відміняє рельєфність лінії
COLOR Вказує колір лінії; використовується найменування кольору або шістнадцятковий код

 

Форматування гіпертексту

Мова HTML підтримує як логічний (logical), так і фізичний (Physical) стилі форматування вмісту документа. Використання логічного форматування вказує на призначення даного фрагмента тексту, а при фізичному форматуванні досконально задається його зовнішній вигляд. По можливості варто використовувати логічні стилі, так як вони дозволяють браузеру вибрати найбільш підходящий документу вигляд. Використання логічних стилів також допоможе читачеві розібратися в структурі документа. Фізичний стиль використовується в основному програмами, що конвертує текстові файли, що містять фізична форматування, в HTML, так як логічне форматування документа неможливо виконати автоматично.

Логічне форматування

Хоча мова HTML включає теги для досягнення різних шрифтових ефектів (Напівжирний шрифт, курсив, підкреслений шрифт), не всі браузери їх підтримують. Проте всі браузери підтримують той чи інший спосіб виділення тексту. Тому використання логічного форматування тексту в будь-якому випадку призведе до виділення програмою перегляду різних частин тексту і виявить структуру документа.

Говорячи про логічної розмітки тексту, можна виділити дві основні частини:

виділення заголовків у документі;

логічне виділення елементів тексту.

Назва документа, що задається за допомогою тега <TITLE>, не виводиться на екран як частина документа. Щоб відобразити назву використовується один з тегів заголовка. Заголовки в типовому документі розділяються за рівнями. Мова HTML дозволяє задати шість рівнів заголовків: H1 (заголовок першого рівня), Н2, Н3, H4, Н5 і H6. Заголовок першого рівня має звичайно більший розмір і насиченість по порівнянні із заголовком другого рівня.

Якщо ви подивіться на цю главу, то "Логічне форматування" - заголовок третього рівня, "Форматування гіпертексту" - другого, а "Основи мови HTML" - першого. На практиці заголовки четвертого і далі рівнів зустрічаються лише в дуже великих документах.

Приклад

<HTML> <HEAD> <TITLE> Заголовки </TITLE> </HEAD> <BODY BGCOLOR=white> <H1> Заголовок 1 рівня</H1> <H2> Заголовок 2 рівня</H2> <H3> Заголовок 3 рівня</H3> <H4> Заголовок 4 рівня</H4> <H5> Заголовок 5 рівня</H5> <H6> Заголовок 6 рівня</H6> </BODY> </HTML>

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

Теги заголовків підтримують атрибут ALIGN, дія якого аналогічно дії такого ж атрибуту тега виділення абзацу.

Елементи логічного виділення фрагментів тексту, а також можливе оформлення кожного з них наведено в таблиці.

 

Теги Застосування Результат
<CITE> </CITE> <CITE> Використовується для виділення цитат або назв книг і статей </CITE> Використовується для виділення цитат або назв книг і статей
<CODE> </CODE> <CODE> Застосовується для виведення невеликого шматка програмного коду </CODE> Застосовується для виведення невеликого шматка програмного коду
<EM> </EM> <EM> Використовується для виділення важливих фрагментів тексту </EM> Використовується для виділення важливих фрагментів тексту
<KBD> </KBD> <KBD> Виділяє текст, вводиться користувачем з клавіатури </KBD> Виділяє текст, що вводиться користувачем з клавіатури
<SAMP> </SAMP> <SAMP> Використовується для виділення тексту прикладу </SAMP> Використовується для виділення тексту прикладу
<STRONG> </STRONG> <STRONG> Використовується для виділення дуже важливих фрагментів тексту </STRONG> Використовується для виділення дуже важливих фрагментів тексту
<VAR> </VAR> <VAR> Використовується для позначки імен змінних </VAR> Використовується для позначки імен змінних
<STRIKE> </STRIKE> <STRIKE> Використовується для оцінки вилученого тексту </STRIKE> Використовується для позначки віддаленого тексту

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

Для виділення довгих цитат з основного тексту в HTML існує тег <BLOCKQUOTE>. Цей елемент є контейнером і може містити будь-які форматуйте теги.

Сучасні браузери реагують на елемент <BLOCKQUOTE> зміщенням тексту цитати праворуч. Деякі текстові програми перегляду позначають цитату символами >, що розташовуються в крайньому лівому стовпчику екрана. Так як сьогодні більшість браузерів є графічними програмами, елемент <BLOCKQUOTE> дозволяє авторам внести в текст деякий візуальне різноманітність.

Фізичне форматування

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

 

Теги Застосування Результат
<B> </B> <B>Напівжирний</B> Напівжирний
<I> </I> <I>Курсив</I> Курсив
<U> </U> <U>Підкреслений</U> Підкреслений
<TT> </TT> <TT>Друкарська машинка</TT> Друкарська машинка
<S> </S> <S>Закреслений</S> Закреслений
<BIG> </BIG> <BIG>Великий</BIG> Великий
<SMALL> </SMALL> <SMALL>Маленький</SMALL> Маленький
<SUP> </SUP> Верхній -- x<SUP>індекс</SUP> Верхній -- xіндекс
<SUB> </SUB> Нижній -- x<SUB>індекс</SUB> Нижній -- xіндекс

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

<B><U>Жирний і підкреслений текст</U></B>

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

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

Атрибут FACE дозволяє вказати тип шрифту, яким програма перегляду виведе ваш текст (якщо таким має в своєму розпорядженні користувач). Якщо потрібного шрифту немає, програма проігнорує запит і буде використовувати шрифт, встановлений за замовчуванням.

Цей атрибут дозволяє вказати як один, так і декілька шрифтів (Через кому). Весь список буде переглянутий зліва направо і перший з наявних на машині користувача буде використаний для виведення документа.

Атрибут SIZE служить для вказівки розміру шрифту в умовних одиницях від 1 до 7. Вважається, що розмір "нормального" шрифту відповідає числу 3. Розмір може бути як абсолютною величиною (SIZE=5), так і відносної (SIZE=+2). У другому прикладі поточний розмір шрифту збільшується на 2.

Атрибут COLOR встановлює колір шрифту, який може бути заданий як у форматі RGB, так і з іменем.

Приклад

Текст <FONT COLOR=red> червоного кольору </FONT> і <FONT SIZE=7> великого розміру </FONT>

 



Поделиться:


Последнее изменение этой страницы: 2016-08-01; просмотров: 391; Нарушение авторского права страницы; Мы поможем в написании вашей работы!

infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 18.220.242.160 (0.008 с.)