- •Створення web-сторінки
- •Вставка символів прогалин ( )
- •Вставляння спеціальних символів
- •Створення надстрічкових та підстрічкових індексів
- •Вибір шрифту
- •Зміна розміру шрифту
- •Вибір кольору шрифту
- •Використання моноширінних шрифтів
- •Створення маркованих списків
- •Створення багаторівневих списків
- •Створення списків визначень
- •Вирівнювання тексту відносно графіки
- •Пуста область навколо графічного зображення
- •Побудова горизонтальної лінійки
- •Побудова списків з графічними маркерами
- •Побудова гіперпосилання, що вказує на іншу Web-сторінку
- •Створення посилання на об’єкт цієї ж сторінки
- •Створення гіперпосилання, що вказує на зображення
- •Створення гіперпосилання, що вказує на файл
- •Посилання на адресу електронної пошти
- •Колір тексту гіперпосилань
- •Створення таблиці
- •Товари та ціни
- •Товари та ціни
- •Групування стовпчиків таблиці
- •Товари та ціни
- •Зміна розмірів комірки таблиці
- •Об’єднання комірок таблиці
- •Вирівнювання даних у комірці таблиці
- •Перенесення слів всередині комірок таблиці
- •Задавання параметра обтіканні таблиці текстом
- •Створення фреймів
- •Відтворення об’єкту гіперпосилання у вікні фрейму
- •Смуги прокрутки фреймів
- •Використання атрибуту noresize
- •Властивості меж фреймів
- •Задавання величини полів фрейму
- •Приклад 1
- •Приклад 2
Створення надстрічкових та підстрічкових індексів
Дескриптор <SUР> дозволяє перетворити фрагмент тексту у надстрічковий індекс, який відображається на Web-сторінці у вікні браузера ледь вище, ніж решта тексту стрічки.
Дескриптор <SUB> створює підстрічковий індекс – послідовність символів, розташованих нижче решти тексту стрічки.
Web-браузери можуть відображати індекси шрифтом меншого розміру в порівнянні з основним текстом сторінки.
Наприклад:
<p>Це приклад <SUP>над</SUP>стрічкового індексу
відобразиться браузером
Це приклад надстрічкового індексу
<p>Це приклад <SUB>під</SUB>стрічкового індексу
відобразиться браузером:
Це приклад підстрічкового індексу
Вибір шрифту
Дескриптор <FONT> з атрибутом FACE служать для зміни шрифту, за допомогою якого заданий фрагмент тексту Web-сторінки повинен відображатись у вікні браузера. Допускається вказувати шриф за назвою (наприклад, Ariаl) або за типом (наприклад, monospace).
Якщо шрифт задається назвою, бажано перерахувати декілька додаткових назв, щоб уникнути ситуації, коли виявиться, що потрібний шрифт не встановлений на комп’ютері споживача. У списку повинен бути хоча б один із загальновживаних шрифтів.
Наприклад:
<p><font face ="Monotype Corsiva">Це приклад зміненого шрифту </font></p>
відобразиться браузером:
Це приклад зміненого шрифту
Зміна розміру шрифту
Атрибут SIZE дозволяє змінити розмір шрифту тексту Web-сторінки. Використовуючи атрибут SIZE в контексті дескриптора <BASEFONT>, можна змінити розмір тексту Web-сторінки цілком. Застосування атрибуту SIZE сумісно з дескриптором <FONT> дозволяє впливати на вигляд окремого фрагменту тексту.
Існує 7 доступних розмірів шрифтів. Найменший позначається числом 1, найбільший – числом 7.
Наприклад:
<BASEFONT SIZE =”7”>
<p>Розмір шрифту великий</p>
відобразиться браузером
Розмір шрифту великий
<p><FONT SIZE =”1”>Розмір шрифту малий</FONT></p>
відобразиться браузером:
Розмір шрифту малий
Розмір шрифту можна змінювати і дескрипторами <BIG> і <SMALL>. Тег <BIG> збільшує шрифт вказаного фрагменту по відношенню до попереднього, а <SMALL>, навпаки, зменшує.
Наприклад:
<p>Цей шрифт <BIG>хочу збільшити, </BIG>
<SMALL>а цей – ні! </SMALL><p>
відобразиться браузером:
Цей шрифт хочу збільшити, а цей – ні!
У більшості випадків співвідношення розмірів шрифту у позначеннях і в пунктах таке: 1 – 8 пунктів; 2 – 10 пунктів; 3 – 12 пунктів; 4 – 14 пунктів; 5 – 18 пунктів; 6 – 24 пунктів; 7 – 36 пунктів.
Вибір кольору шрифту
Використовуючи атрибут TEXT в контексті дескриптора <BODY>, можна змінити колір тексту Web-сторінки цілком, застосування атрибуту COLOR разом з дескриптором <FONT> дозволяє впливати на вигляд окремого фрагмента тексту.
Для того, щоб змінити колір тексту, потрібно задати найменування або код потрібного кольору. Вираз коду складається з символу фунта (#), за яким слідує число, яке в сукупності являє собою інтенсивність червоної (Red), зеленої (Green) та синьої (Blue) (RGB) складових кольору. За іменем можна послатись тільки на 16 основних кольорів.
Таблиця найменувань основних кольорів та їх коди
-
Колір
Найменування
Код
голубий
aqua
#00FFFF
чорний
black
#000000
синій
blue
#0000FF
рожевий
fuchsia
#FF00FF
темно-сірий
gray
#808080
темно-зелений
green
#008000
зелений
lime
#00FF00
малиновий
maroon
#800000
темно-синій
navy
#000080
оливковий
olive
#808000
бузковий
purple
#800080
червоний
red
#FF0000
світло-сірий
silver
#C0C0C0
бірюзовий
teal
#008080
білий
white
#FFFFFF
жовтий
yellow
#FFFF00
Наприклад,
<BODY TEXT=”#0000FF”>
<P>Весь текст буде голубого кольору</P>
</BODY>
Значенням кольору, задані за допомогою атрибуту COLOR в дескрипторі <FONT>, притаманні вищі пріоритети у порівнянні з тими, що встановлені за допомогою атрибуту TEXT у дескрипторі <BODY>. Тому бажано встановити спочатку загальний колір усього тексту сторінки, а потім змінити зовнішній вигляд тільки потрібних фрагментів.
Наприклад,
<BODY TEXT=" aqua ">
<p>Весь текст буде голубого кольору</p>
<p><font color =" #008000 "> Цей текст набуде темно-зеленого кольору </font></p>
<p>А цей фрагмент, як і початковий, залишиться голубим </p>
</BODY>
Зміна кольору фону
Атрибут BGCOLOR дає можливість вказувати колір фону Web-сторінки. Колір фону задається найменуванням або кодом (назви і коди кольорів подані у попередній таблиці).
Наприклад,
<BODY BGCOLOR ="#FFFF00">
<P>Фон буде жовтого кольору</P>
</BODY>
Задавання розмірів полів сторінки
У процесі проектування Web-сторінки корисно застосувати інструкцію формування полів – смуг чистого простору між уявною рамкою, у яку заключений вміст сторінки, і межами вікна браузера. Поля дозволяють надати сторінці акуратного та вирозумілого вигляду.
За замовчуванням більшість Web-браузерів відображає сторінки з полями, які приблизно мають розмір 10 екранних пікселів. Microsoft Internet Explorer допускає використання спеціальних атрибутів – LEFTMARGIN, RIGHTMARGIN, TOPMARGIN I BOTTOMMARGIN, – призначених для задавання величини відповідних полів сторінки у екранних пікселях. Вказані атрибути не входять у склад специфікації HTML і зазвичай не обробляються іншими браузерами.
Щоб змінити значення полів сторінки, яка буде проглядатись за допомогою Netscape Navigator, потрібно використовувати атрибути MARGINWIDHT (для лівого та правого полів) і MARGINHEIGHT (для верхнього та нижнього полів).
Щоб гарантувати коректність відображення полів сторінки у вікнах обох браузерів, Microsoft Internet Explorer та Netscape Navigator, корисно включити в HTML-код сторінки і одні і інші атрибути.
Наприклад,
<BODY LEFTMARGIN =”20” RIGHTMARGIN =”20”>
<P>Поля цієї сторінки будуть удвічі більшими зліва та справа” </P>
</BODY>