Текстове оформлення сторінок
За допомогою тега <font> можна змінити параметри шрифту. Для тега використовуються наступні параметри: face, size і color.
Параметр Face служить для завдання гарнітури шрифтів использующихся для тексту. Назв шрифтів можна вказати трохи, через кому. У цьому випадку, якщо перший зазначений шрифт не буде знайдений, буде використовуватися наступний за списком.
Приклад 1. Використання параметра face
<font face="Arial, Helvetica, SansSherif>TeKCT буде написаний шрифтом Arial.</font>
Size задає розмір шрифту в умовних одиницях від 1 до 7. Середній розмір, використовуваний за замовчуванням прийнятий 3. Розмір шрифту можна вказувати як абсолютною величиною (наприклад, size=4), так і відносної (наприклад, size=+l, size=-l). В останньому випадку розмір змінюється щодо базового.
Приклад 2. Завдання розміру шрифту
<font size=1> Шрифт розміру l</font> <br>
<font size=2>Шрифт розміру 6</font> <br>
<font size=3>Шрифт розміру 7</font> <br>
Шрифт розміру 1
Шрифт розміру 6
Шрифт розміру 7
Color визначає колір тексту, якому можна задавати за допомогою назв квітів або в шестнадцатеричном форматі.
Приклад 3. Зміна кольору тексту
<font size=5 color=red face=Arial>n</font> - Перша буква цієї пропозиції буде написана шрифтом Anal, червоним кольором і збільшеної.
Засобу форматування тексту – вибір накреслення шрифту і використання ефектів, що дозволяють змінювати вид тексту. У таблиці перераховані основні теги, що застосовуються для зміни оформлення тексту.
Код HTML |
Опис |
Приклад |
<B>Текст</B> |
Жирний текст |
Текст |
<I>Текст</I> |
Курсивне накреслення тексту |
Текст |
<U>Текст</U> |
Підкреслений текст |
Текст |
<sup>TeKCT</sup> |
Верхній індекс |
е=тс2 |
<sub>TeKCT</sub> |
Нижній індекс |
Н2ПРО |
<strike>TeKCT</strike> |
Закреслений текст |
|
<рге>Т е к с т</рге> |
Текст пишеться як є, включаючи всі пробіли |
Т е к с т |
<ет>Текст</ет> |
Курсивний текст |
Текст |
<strong>TeKCT</strong> |
Жирний текст |
Текст |
Звичайно для створення верхнього або нижнього індексу використовується тег small, що робить індекс менше по розмірі основного шрифту.
Приклад 4. Створення нижнього індексу
<B>Формула сірчаної кислоти:</B> <i>H<sub><small>2</small></sub>SO<sub><small>4</small></sub></i>
Формула сірчаної кислоти:
H2SO4
Вирівнювання тексту
Вирівнювання тексту визначає його зовнішній вигляд і орієнтацію країв абзацу і може виконуватися по лівому, правому краї, по центрі або по ширині.
Код HTML |
Опис |
Приклад |
<р>Текст</р> |
Додає новий параграф, за замовчуванням вирівняний по лівому краї. Перед параграфом автоматично додається порожній рядок. |
Текст |
<р align =left>Текст</р> |
Вирівнювання по лівому краї. |
Текст |
<р align=right>TeKCT</p> |
Вирівнювання по правому краї. |
Текст |
<р align=center>TeKCT</p> |
Вирівнювання по центрі. |
Текст |
<р align=justify>TeKCT</p> |
Вирівнювання по ширині. |
Текст по ширині |
Теги для розміщення тексту:
<Р> Цей тег означає початок нового абзацу. Його можна записувати в кінці попереднього. Наступне після тега <Р> речення починатиметься з нового, вирівняного до лівого краю, абзацу без відступу. Між абзацами буде порожній рядок. Зауважимо, що тег <Р> може використовуватися як парний: <Р> текст абзацу </Р>
<BR> Наступний за цим тегом текст буде наведено у новому рядку без пропуску рядка
<HR> У рядку буде проведена горизонтальна лінія
Приклад. <html> <head> <title>Приклад 3</title>
</head> <body> <H1>Вірш</H1> <H2>Автор невідомий</H2>
<P>********************<BR> ***********************<BR> ************************<BR> ************************</P> <P>*********************<BR> *************************<BR> **************************<BR> *************************</P> </body> </html>
<H1>Колекція горизонтальних ліній</H1>
<HR SIZE=2 WIDTH=100%><BR>
<HR SIZE=4 WIDTH=50%><BR>
<HR SIZE=8 WIDTH=25%><BR>
<HR SIZE=16 WIDTH=12%><BR>
</body> </html>
Заголовки і теги вирівнювання.
Заголовок - окремий тип абзацу. Є шість видів заголовків, які відрізняються розмірами символів:
<НN>Заголовок N</НN> - Заголовок N розміру (від 1 до 6). Заголовок за замовчуванням вирівнюється до лівого краю вікна.
Якщо вирівнювання заголовка чи іншого елемента на сторінці потрібно задати явно, то використовують теги вирівнювання:
<CENTER> елемент </CENTER> - Вирівнювання до центру
<LEFT> елемент </LEFT> - Вирівнювання до лівого краю
<RIGHT> елемент </RIGHT> - Вирівнювання до правого краю
Мета. Створити web-сторінку з розповіддю про себе за зразками.
Хід роботи №9.
1. Відкрийте редактор Блокнот.
2. Створіть за допомогою текстового редактора html-файл з розповіддю про себе.
Зробіть це так, як у прикладі 1, тобто без форматування тексту, і збережіть його командою Save as... з назвою filel.htm у власній папці. Тег <BODY> у файлі запишіть так: <BODY TEXT = "red">.
3. Відкрийте файл filel.htm у броузері.
Для цього відкрийте свою робочу папку і двічі клацніть мишею на назві файлу.
4. Поекспериментуйте з різними значеннями кольорів (green, white, yellow, blue, #ffaa55 тощо) параметрів BGCOLOR і TEXT.
5. Виконайте форматування тексту у файлі filel.htm подібно до прикладу