Окт 27

Работа с текстом

Я надеюсь, что большинство из вас на собственных компьютерах создали каркасы Веб страниц для того, чтобы закрепить пройденный материал, а так же иметь возможность экспериментировать с разными вариантами тегов их параметров и аргументов которые мы будем изучать далее.

Итак, каркас страницы у нас создан. Давайте вставим между тегами <body> любой текст. И увидим, что у нас произойдет. Мы видим, что весь текст вместе с заголовком и абзацами, а также выделениями слился в единый параграф. Само собой, что для нас такой текст неприемлем. Поэтому мы будем это форматировать с помощью HTML и постараемся придать ему такой же вид, какой он имел в нашем примере.

То есть использовать теги, применяемые к тексту.

Для начала разобьем наш текст на параграфы, для этого нужно поставить перед началом параграфа открывающий тег <p>, а в конце параграфа закрывающий тег </p>, и так сделаем это со всеми нашими параграфами. Сохраним файл и посмотрим, что у нас получилось.

Тегу <p> можно придать следующий параметр: ALIGN

Описание: Выравнивание блока текста по краю.

Синтаксис
<p align="left | center | right | justify">...</p> где left | center | right | justify – аргументы, один из которых мы назначаем параметру align.

Аргументы

left
Выравнивание текста по левому краю.

center
Выравнивание текста по центру.

Right
Выравнивание текста по правому краю.

Justify
Выравнивание по ширине, что означает одновременное выравнивание по левому и правому краю. Чтобы произвести это действие браузер в этом случае добавляет пробелы между словами.

Значение по умолчанию: left

Если мы хотим просто перенести строку то тогда вставляем тег <br>
Тег <br> устанавливает перевод строки в том месте, где этот тег находится. В отличие от тега параграфа <P>, использование тега <br> не добавляет пустой отступ перед строкой.

Теперь давайте выделим наши заголовки, для этого их надо заключить в тег <H>

HTML предлагает шесть заголовков разного уровня, которые показывают относительную важность секции, расположенной после заголовка. Так, тег <H1> представляет собой наиболее важный заголовок первого уровня, а тег <H6> служит для обозначения заголовка шестого уровня и является наименее значительным. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. Теги <H1>...<H6> относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется пустое пространство. Видом заголовком легко можно управлять с помощью стилей.

Синтаксис
<h1>Заголовок 1-го уровня</h1> <h2>Заголовок 2-го уровня</h2> ... <h6>Заголовок 6-го уровня</h6>

Параметр
Align <H1 align="left | center | right «>...</H1> — действие параметра с его аргументом такое же, как у тега <p>

Вот мы разбили наш текст на параграфы, обозначили заголовки, но при этом размер шрифта, его вид остались такими, какими его назначил браузер, давайте его изменим под наше желание, как это сделать? Это мы будем делать с помощью тега <FONT>

Тег <FONT> представляет собой контейнер для изменения характеристик шрифта, таких как размер, цвет и гарнитура.

Параметры

Color
Устанавливает цвет текста.

Face
Определяет гарнитуру шрифта.

Size
Задает размер шрифта в условных единицах.

Синтаксис

<font color=»цвет">...</font>

Значение цвета можно задавать двумя способами.
1. По его названию
Браузеры поддерживают некоторые цвета по их названию.

2. По шестнадцатеричному значению

Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из ее названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной системе. Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставят символ решетки #, например #666999. Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb, где первые два символа отмечают красную компоненту цвета, два средних — зеленую, а два последних — синюю.

Например: <font color="#f6f6f6">текст</font> — шрифту текста будет придан светло-серый цвет.

Параметр face служит для задания гарнитуры шрифтов, использующихся для текста. Названий шрифтов можно привести несколько, через запятую. В этом случае, если первый указанный шрифт не будет найден, браузер станет использовать следующий по списку.

Пример: <font face=" Verdana, Arial, Times «>текст</font>

Аргумент size задает размер шрифта в условных единицах от 1 до 7. Средний размер, используемый по умолчанию, принят 3.

Пример: <font size=»4">текст</font>

Если мы хотим выделить текст жирным, то применяем тег <STRONG>

Пример: <strong>текст</strong>

Если хотим выделить текст курсивом, то применяем тег <EM>

Пример: <em>текст</em>

Давайте завершим урок по изменению внешнего вида тексту, как вы видите весь урок мы даем в очень сжатом виде, так как надеемся, что время, проведенное в студии не прошло даром, поэтому здесь вы сможете только закрепить знания, полученные на занятиях.

Возможно, Вам будет полезна эта информация:

  1. Редактирование шрифтов
  2. Работа над списками
  3. Вставка изображений


Написать ответ