Єдина Країна!

Головне меню

Наша кнопка

Українські уроки про ІТ

Друзі

Підтримка української армії


Головна Web-програмування - HTML HTML - форматування тексту

HTML - форматування тексту
Написав Sokil   
Неділя, 19 червня 2011 19:22
Переглядів: 58377

З попереднього уроку ми вже знаємо як створити сторінку html, а тепер познайомимось з методами форматування тексту на сторінці.

Отже, весь головний контент сторінки розміщується в тегах <BODY>наш текст</BODY>

Розглянемо теги, які використовують для форматування тексту.

Теги форматування символів тексту (вони парні):

<В> текст </В> Товстий шрифт тексту
<І> текст </I> Шрифт- курсив
<U> текст </U> Підкреслений шрифт
<SUB> текст </SUB> Нижній індекс.
<SUP> текст </SUP> Верхній індекс.
<BIG> текст </BIG> Великий шрифт.
<SMALL> текст </SMALL> Малий шрифт.
<EM> текст </EM> Виокремлений курсивом текст(те саме, що тег І )
<B><I> текст </I></B> Товстий курсив.

 

Теги для розміщення тексту (вони одинарні):

 

<P>

Цей тег означає початок нового абзацу. Його можна записувати в кінці попереднього. Наступне після тега <Р> речення починатиметься з нового, вирівняного до лівого краю, абзацу без відступу. Між абзацами буде порожній рядок. Зауважимо, що тег <Р> може викорис­товуватися як парний: <Р> текст абзацу </Р>

<BR>

Наступний за цим тегом текст буде наведено у новому рядку без пропуску рядка

<HR>

У рядку буде проведена горизонтальна лінія

 

Заголовок - окремий тип абзацу. Є шість видів заголовків, які відрізняються роз­мірами символів:

 

r

Теги

Результат на екрані

<Н1>Заголовок 1</Н1>

Заголовок 1

<Н2>Заголовок 2</Н2>

Заголовок 2

<НЗ> Заголовок 3</НЗ>

Заголовок 3

<Н4>Заголовок 4</Н4>

Заголовок 4

<Н5>Заголовок 5</Н5>

Заголовок 5

<Н6>Заголовок 6</Н6>

Заголовок 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

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


( 52 Проголосувало )
Коментарі
Добавити новий
Анонімно   |2016-06-03 20:25:32
Анонімно   |2018-04-13 12:36:52
Анонімно   |2019-11-14 13:16:09

Анонімно   |2019-11-14 13:16:44
PRIVET FROM UKR
Анонімно   |2022-09-27 17:02:58
Анонімно  - аааа   |2022-11-21 00:23:52

7777   |2023-11-17 10:46:48

Залишити коментар
Ім`я:
e-mail:
 
Тема:
 
:angry::0:confused::cheer:B):evil::silly::dry::lol::kiss::D:pinch:
:(:shock::X:side::):P:unsure::woohoo::huh::whistle:;):s
:!::?::idea::arrow:
 
Введіть цей настирливий код
Русская редакция: www.freedom-ru.net & www.joobb.ru

3.26 Copyright (C) 2008 Compojoom.com / Copyright (C) 2007 Alain Georgette / Copyright (C) 2006 Frantisek Hliva. All rights reserved."

 

Підписка

Хто онлайн?

Немає
На даний момент 31 гостей на сайті

Український рейтинг
TOP.TOPUA.NET