Реальный пиарHTMLОбщее представление → Основы HTML и CSS, работа с текстом

Основы HTML и CSS, работа с текстом

html теги

Работа с текстом в HTML. Сразу скажу, что удобнее всего редактировать HTML код в Namo WebEditor 8 (но вы можете открыть файл расширения .htm или .html в любом текстовом редакторе). В этой программе по умолчанию можно увидеть такую запись на вкладке HTML: <body bgcolor="white" text="black">. Это означает, что цвет внешнего фона страницы сайта у нас задан белым, а цвет самого текста - черным. Но перейдем к HTML и CSS программированию.

Зададим цвет текста так, чтобы он получился таким, как ниже:

Первая буква в строке - красная

Для этого пишем: <p><span style="color: red">П</span><span style="color: lime">ервая буква в строке - красная</span></p>.

Спаренный тэг <p></p> указывает на начало и конец абзаца. К тэгу SPAN (охватить) мы применили стили через атрибут STYLE.

Цвет фона под текстовой строкой устанавливается с помощью свойства background, а цвет текста — через свойство color. Так, с помощью сочетания атрибутов color и background можно создать выворотку:

верхом на лошади

<html>
<head>
<title>Название сайта</title>
<style type="text/css"> (используем стили)
.inv (создаем класс под названием INV)
{background: black; (фон под текстом)
color: red; (цвет текста)
font-weight: bold; (шрифт жирным)
font-family: arial } (вид шрифта)
</style>
</head>
<body>
<p><span class="inv">верхом на лошади</span></p>
</body>
</html>

Насыщенность шрифта управляется тегом «B», или через свойство стилей «font-weight». Этот параметр определяет насыщенность шрифта с помощью ключевых слов: bold — полужирное, bolder — жирное, lighter — светлое, normal — нормальное начертание. Также допустимо использовать условные единицы от 100 до 900 с шагом 100. Сверхсветлое начертание шрифта, которое может отобразить браузер, имеет значение 100, а сверхжирное — 900.

Пример:

яблоко яблоко

Пишем: <p><span style="font-weight: 100">яблоко</span><span style="font-weight: 900">яблоко</span></p>. А можно просто написать <b>яблоко</b> и получим полужирный шрифт.

Курсив. Для создания курсивного текста применяется тег i, а также атрибут «font-style», который относится к свойствам CSS. Атрибут «font-style» определяет начертание шрифта — normal (обычное), italic (курсивное) или oblique (наклонное).

курсив а остальное нет

Пишем <p><i>курсив</i> а остальное нет</p>.

Верхний и нижний индекс. Индексом по отношению к тексту называется смещение символов относительно базовой линии вверх или вниз. HTML предлагает два тега для создания индекса: SUP — верхний индекс и SUB — нижний индекс. Текст, помещенный в один из этих контейнеров, обозначается меньшим размером, чем базовый текст, и смещается относительно горизонтали.

Аналогом тегов sup, sub служит свойство "vertical-align", заставляющее текст смещаться по вертикали на заданное расстояние.

привет или привет

<html>
<head>
<title>Название сайта</title>
<style type="text/css">
.sup { vertical-align:0.8em; font-size:60%; color:red }
</style>
</head>
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<p>ПРИВЕТ ИЛИ<span class="sup">ПРИВЕТ</span></p>
</body>
</html>

В примере в качестве аргумента применяется значение 0.8em. Em — это относительная единица, равная высоте шрифта. Можно использовать проценты, вроде vertical-align: 80% или значение в пикселях: vertical-align: 10px.

Подчеркивание текста. Для подчеркивания текста используется тэг <u>текст</u>. Но такое подчеркивание часто выглядит некрасиво, тем более нельзя регулировать толщину линии.

Тег HR создает горизонтальную линию определенной толщины и ширины, перед ней всегда автоматически добавляется перенос строки. Чтобы заставить линию плотнее прижиматься к тексту, тег HR можно поместить прямо внутрь тега H1 или H2, определяющего заголовок. Пример:
Подчеркнутый заголовок

Пишем <h2 align="center">Подчеркнутый заголовок<HR noshade size="2"></h2>.

В примере мы выровняли заголовок по центру с помощью свойства ALIGN=CENTER. Тэг H2 всегда выделяет заголовок более крупным шрифтом. Для тэга HR мы также задали толщину линии равную 2.

Если вам захочется создать подчеркивание строго под текстом, тег HR уже не поможет, и придется переходить к таблицам или стилям. Для нашей цели применимо свойство CSS border-bottom. Данный атрибут сразу задает стиль линии под текстом, ее толщину и цвет. А для того, чтобы создать линию на ширину текста, стиль надо установить для встроенного элемента SPAN:

текст выделил

Пишем <p><span style="font-size:18px; border-bottom:3px solid lime">текст выделил</span></p>

В примере через атрибут font-size мы задали размер шрифта в пикселях.

Отступы. В HTML в качестве пробела используется специальный символ — "&nbsp;". Чтобы получить нужный отступ, необходимо повторить этот символ несколько раз:

<p>&nbsp;&nbsp;&nbsp;&nbsp;Герасим любил свою собаку.</p>

Если воспользоваться стилями, то на помощь придет параметр text-indent. Он задает отступ первой строки текста. Отступ можно указывать в пунктах (pt), пикселах (рх), дюймах (in), миллиметрах (mm).

Cтили позволяют создать не только отступ, но и выступ, при котором первая строка выдвигается влево, а остальной текст остается на месте. Для этого требуется только установить отрицательное значение у параметра text-indent.

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

<html>
<head>
<title>Название сайта</title>
<style type="text/css">
P { text-indent: -40px; padding-left: 40px; }
</style>
</head>
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<p>Текст</p>
</body>
</html>

В примере мы применили стили к тэгу P. Теперь первая строка всех абзацев HTML-страницы будет иметь выступ равный 40 пикселям. Отступ текста с помощью параметра padding-left необходим для того, чтобы выступ первой строки не уходил далеко за пределы текста. Иначе может получиться, что текст будет начинаться левее окна браузера.

Если выступ нужен только для одной строки, то лучше написать так:

<p style=”text-indent:-80px; padding-left:80px”>Текст</p>

Выравнивание текста. Для выравнивания текста на веб-странице используется параметр "align". Его можно применить к тегу параграфа "P. У этого параметра может быть четыре значения: left — выравнивание текста по левому краю (это значение задано по умолчанию); center — выравнивание по центру; right — выравнивание по правому краю; justify — выравнивание по ширине.

Пример выравнивания текста по правому краю:
AAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAA

Пишем <p align="right">ВЫРАВНИВАНИЕ ПО ПРАВОМУ КРАЮ</p>

Когда требуется сделать однотипным выравнивание большого числа блоков текста, то на помощь придут стили и атрибут "text-align", в частности. Тогда пишем:

<html>
<head>
<title>Название сайта</title>
<style type="text/css">
P { text-align: rignt }
</style>
</head>
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<p>Текст</p>
<p>Текст</p>
<p>Текст</p>
</body>
</html>

Теперь все параграфы на Web странице будут автоматически выравниваться по правому краю.

Межстрочный интервал. При обычных обстоятельствах расстояние между строками зависит от вида и размера шрифта и определяется браузером автоматически. Но это значение может быть изменено с помощью свойства CSS "line-height".
строки расположены плотно
строки расположены плотно
расстояние между строками
расстояние между строками

Например, значение 1, 5 устанавливает полуторный межстрочный интервал. Можно также использовать любые единицы длины, принятые в CSS, — пикселы (рх), дюймы (in), пункты(pt) и др. Допустимы проценты, в этом случае за 100 % принимается высота шрифта. Пример: <p style="line-height: 1.5">Текст</p>


Источник: http://www.greenlight5.com

Рекомендуем



Основы html, общие сведения Это название отображается браузерами в строке заголовка рабочего окна программы, а роботы, составляющие индексы для поисковых систем, идентифицируют документ, используя его название


Основы HTML, добавление изображений Для встраивания изображения в документ используется тег IMG, имеющий единственный обязательный параметр src, который определяет адрес файла с картинкой


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