
З попереднього уроку ми вже знаємо як створити сторінку html, а тепер познайомимось з методами форматування тексту на сторінці.
Отже, весь головний контент сторінки розміщується в тегах <BODY>наш текст</BODY>
Розглянемо теги, які використовують для форматування тексту.
Теги форматування символів тексту (вони парні):
<В> текст </В> |
Товстий шрифт тексту |
<І> текст </I> |
Шрифт- курсив |
<U> текст </U> |
Підкреслений шрифт |
<SUB> текст </SUB> |
Нижній індекс. |
<SUP> текст </SUP> |
Верхній індекс. |
<BIG> текст </BIG> |
Великий шрифт. |
<SMALL> текст </SMALL> |
Малий шрифт. |
<EM> текст </EM> |
Виокремлений курсивом текст(те саме, що тег І ) |
<B><I> текст </I></B> |
Товстий курсив. |
Теги для розміщення тексту (вони одинарні):
<P>
|
Цей тег означає початок нового абзацу. Його можна записувати в кінці попереднього. Наступне після тега <Р> речення починатиметься з нового, вирівняного до лівого краю, абзацу без відступу. Між абзацами буде порожній рядок. Зауважимо, що тег <Р> може використовуватися як парний: <Р> текст абзацу </Р>
|
<BR>
|
Наступний за цим тегом текст буде наведено у новому рядку без пропуску рядка
|
<HR>
|
У рядку буде проведена горизонтальна лінія
|
Заголовок - окремий тип абзацу. Є шість видів заголовків, які відрізняються розмірами символів:
Теги
|
Результат на екрані
|
<Н1>Заголовок 1</Н1>
|
Заголовок 1
|
<Н2>Заголовок 2</Н2>
|
Заголовок 2
|
<НЗ> Заголовок 3</НЗ>
|
Заголовок 3
|
<Н4>Заголовок 4</Н4>
|
Заголовок 4
|
<Н5>Заголовок 5</Н5>
|
Заголовок 5
|
<Н6>Заголовок 6</Н6>
|
r
Заголовок 6
|
Заголовок за замовчуванням вирівнюється до лівого краю вікна. Якщо вирівнювання заголовка чи іншого елемента на сторінці потрібно задати явно, то використовують теги вирівнювання:
<CENTER> елемент </CENTER>
|
Вирівнювання по центру
|
<LEFT> елемент </LEFT>
|
Вирівнювання по лівому краю
|
<RIGHT> елемент </RIGHT>
|
Вирівнювання по правому краю
|
Розгляньте зразок форматування тексту для web-сторінки з розповіддю деякої особи про себе.
<HTML>
<HEAD>
<TITLE> My web-page </TITLE>
</HEAD>
<BODY>
<CENTER><H1>Привіт!</H1>
<H2> Мене звуть Світлана </H2> </CENTER>
<HR>
<H3> Мені 22 роки </H3>
<H4> Я хочу стати web-дизайнером </H4>
<HR>
Це моя <B>друга</B> спроба створити web-сторінку. Я вже вмію користуватися заголовками, вставляти лінії, форматувати текстові абзаци. Пізніше я навчуся вставляти <I>фотографії, картинки, звук, відеозображення</I> шляхом посилання на відповідні <I>графічні, звукові чи відеофайли</I>.<P>
Я збережу цей файл на диску і відкрию його у броузері.<P>
Цю web-сторінку я буду удосконалювати, її ще рано розміщувати на сервері.<HR>
</BODY>
</HTML>
Ось наш результат.
Щоб задати назву конкретного шрифту, його розмір і колір, використовують парний тег FONT із параметрами FACE(гарнітура шрифта), SIZE(розмір) та COLOR(колір), наприклад,
<FONT FACE = "Decor, Arbat, Kudriashov"
SIZE = +2 COLOR = "red">
(текст)
</FONT>
Основні кольори мають такі назви:
Black - чорний
|
green - зелений
|
Navy - темно-синій
|
teal - бірюзовий
|
Silver - сірий
|
lime - яскраво-зелений
|
Blue - синій
|
aqua - блакитний
|
Maroon – малиновий
|
olive - темно-зелений
|
Purple - бузковий
|
gray - темно-сірий
|
Red - червоний
|
yellow- жовтий
|
Fuchsia - рожевий
|
white – білий
|
nМожливо одразу таку кількість тегів запам'ятати важко, але якщо ви будете створювати свої сторінки, редагувати їх, то дуже швидко ви вивчете їх усіх. Нагадую, щоб краще запамятати пройдений матеріал потрібно не просто скопіювати код з уроку і подивитися як він працює,але з створити кілька нових своїх документів, де поекспериментувати з різними тегами.
Схожі статті:
Новіші матеріали:
Старіші матеріали:
|