Категории раздела

СВОЙ САЙТ [9]

Рекомендуем

Наш опрос

Статистика

Онлайн всего: 2

Гостей: 2

Пользователей: 0

Главная » Статьи » СВОЙ САЙТ » СВОЙ САЙТ

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

Настала пора освоить нехитрые приёмы, позволяющие оформлять и форматировать тексты. Сюда входит вывод текста на экран разными стилями, шрифтами, размерами и цветами, а также форматирование текста с помощью абзацев, блоков и списков.

Для удобства разобъём материалы этой главы на несколько частей.

Часть 1. Простые стили

Рис.1. Пример 1

Текст жирный

Текст курсивный

Текст подчёркнутый

Рис.2. HTML-код Примера 1

Текст <strong>жирный</strong>
<br>
<br>
Текст <em>курсивный</em>
<br>
<br>
Текст <u>подчёркнутый</u>

Часто вместо тегов <em> </em> используют <i> </i>, а вместо <strong> </strong> используют <b> </b>.
Для большинства браузеров никакой разницы нет, то есть можно писать и так, и так.

[наверх]

Часть 2. Шрифты, размеры и цвета

Рис.3. Пример 2

Эта строка написана шрифтом "Times New Roman"

Эта строка написана шрифтом "Verdana"

Эта строка написана шрифтом "Аrial"

Эта строка написана шрифтом "Courier New"

Рис.4. HTML-код Примера 2

<font color="darkblue" face="Times New Roman, Times, serif" size="3">Эта строка написана шрифтом "Times New Roman"</font>
<br>
<br>
<font color="darkgreen" face="Verdana, Arial, Helvetica, sans-serif" size="3">Эта строка написана шрифтом "Verdana"</font>
<br>
<br>
<font color="darkred" face="Arial, Helvetica, sans-serif" size="3">Эта строка написана шрифтом "Аrial"</font>
<br>
<br>
<font color="darkorange" face="Courier New, Courier, mono" size="3">Эта строка написана шрифтом "Courier New"</font>

Как видно из примера, чтобы определить для строки цвет, шрифт и размер, нужно заключить её между парой тегов <font> </font> с параметрами.

Основные параметры тега <FONT>

color - задаёт цвет текста. Например: color="darkblue" или color="#00008B"

face - задаёт имя шрифта или семейство шрифтов. Например: face="Times New Roman" или face="Times New Roman, Times, serif"

Семейство шрифтов - это родственные шрифты. Принято указывать не один шрифт, а перечислять через запятую именно семейство шрифтов. Если браузер не найдёт первый шрифт из указанного семейства, он обращается ко второму по списку и так далее. Вот самые популярные семейства шрифтов:

1) Times New Roman, Times, serif
2) Verdana, Arial, Helvetica, sans-serif
3) Arial, Helvetica, sans-serif
4) Courier New, Courier, mono

size - задаёт размер шрифта в условных единицах. Значения: (1..7) - абсолютный размер; (+1..+7) - увеличить в n раз от текущего; (-1..-7) - уменьшить в n раз от текущего. Например: size="3" или size="+1" или size="-1"

style - задаёт полный стиль оформления одной строкой.
Например: style="font-family:'Times New Roman', Times, serif; font-size:16pх; color:#000000;".

Таким образом, шрифт, размер и цвет текста можно задавать через параметр style. И тогда, разумеется, использовать параметры color, face, size уже не нужно.

Внутри параметра style можно перечислять через точку с запятой большое количество значений. Обрати внимание, что для указания семейства шрифтов здесь используется уже другое слово (font-family), а размер шрифта задан не в условных единицах, а в пикселях (16px). Вообще, параметр style заслуживает того, чтобы сказать о нём отдельно.

Основные значения параметра style

font-family - задаёт имя шрифта или семейство шрифтов. Например: font-family:'Times New Roman', Times, serif;

font-size - задаёт размер шрифта в пикселях, точках, условных единицах или процентах. Например: font-size:16px; или font-size:12pt; или font-size:+1; или font-size:120%;

font-style - задаёт стиль шрифта. Значения: normal - обычный (так по умолчанию); italic - курсивный. Например: font-style:italic;

font-weight - задаёт толщину шрифта. Значения: normal - обычный (так по умолчанию); bold - жирный. Например: font-weight:bold;

color - задаёт цвет текста. Например: color:darkblue; или color:#00008B;

background-color - задаёт цвет фона. Например: background-color:red; или background-color:#FF0000;

text-decoration - задаёт оформление текста. Значения: none - обычный (так по умолчанию); underline - подчёркнутый; line-through - перечёркнутый; box - текст в рамке. Например: text-decoration:underline;

text-align - задаёт выравнивание текста по горизонтали. Значения: left - по левому краю (так по умолчанию); right - по правому краю; center - по центру; justify - по ширине. Например: text-align:justify;

vertical-align - задаёт выравнивание текста по вертикали. Значения: top - по верхнему краю; middle - по середине; bottom - по нижнему краю. Например: vertical-align:top;

text-indent - задаёт отступ текстового блока в пикселях (px), точках (pt), процентах (%) или в единицах высоты шрифта (em). Например: text-indent:5%; или text-indent:3em;

letter-spacing - задаёт расстояние между буквами в пикселях (px), точках (pt) или в единицах высоты шрифта (em). Например: letter-spacing:5px; или letter-spacing:0.5em;

word-spacing - задаёт расстояние между словами в строке в пикселях (px), точках (pt) или в единицах высоты шрифта (em). Например: word-spacing:10px; или word-spacing:5em;

Как видишь, параметр style даёт большие возможности для оформления текста. Более того, этот параметр по истине универсален, то есть его можно использовать не только внутри тега <FONT>, но и внутри многих тегов языка HTML, например, внутри тегов табличной разметки <TABLE>, <TR>, <TD> и таким образом оформлять текст внутри таблиц.

Например, <table style="font-family:Verdana; font-size:15pх; color:#000080; font-weight:bold;">

Параметр style используется и внутри тегов разметки текста с помощью абзацев и блоков, о которых мы поговорим ниже.

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

Приведу пример оформления текста с помощью параметра style:

Рис.5. Пример 3

Ликбез .Инфо

Даёшь всеобщий ликбез!

Рис.6. HTML-код Примера 3

<font style="font-family:'Times New Roman'; font-size:46px; color:#0088AA;">Ликбез</font>
<font style="font-family:'Times New Roman'; font-size:44px; color:#FFDDFF; font-weight:bold;">.Инфо</font>
<br>
<br>
<font style="font-family:Verdana, Helvetica, sans-serif; color:#FFFFFF; background-color:#FF0000; font-size:18px; font-weight:bold;">  Даёшь всеобщий ликбез!  </font>

[наверх]

Часть 3. Абзацы и блоки

Если текст заключить между тегами <p> </p>, то он будет выглядеть, как абзац, то есть, как блок текста, окружённый сверху и снизу пустыми строками. Так разбивать текст на абзацы гораздо удобнее, чем всякий раз шлёпать дважды тег перевода строки <br>.

Рис.7. HTML-исполнение абзацев

<p>Текст первого абзаца.</p>

<p>Текст второго абзаца.</p>

<p>И так далее...</p>

Абзац может иметь свои параметры:

Основные параметры тега <P>

align - задаёт выравнивание текста по горизонтали. Значения: left - по левому краю (так по умолчанию); right - по правому краю; center - по центру; justify - по ширине. Например: align="justify"

style - задаёт стиль оформления текста внутри абзаца.
Например: style="font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#0066AA;".

class - подключает указанный стиль оформления из таблицы стилей css. Например: class="mytext1"

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

Но существует ещё два способа разбивать текст страницы на блоки. Речь идёт о тегах <span> </span> и <div> </div>. Правда, в отличие от тегов абзаца, они не окружают блок пустыми строками. Для чего же они нужны?

Теги <span> </span> часто используются для оформления каких-либо небольших кусков текста внутри абзаца или даже внутри отдельной строки.

Например, эта страница учебного курса, которую ты сейчас читаешь, представляет собой бесконечное чередование слов и предложений, написанных разыми шрифтами и разными цветами. Мой основной текст чёрного цвета постоянно разбавляется словами и предложениями синего цвета, серого цвета или иногда красного цвета. Это возможно благодаря тегам <span> </span>, которые разбивают строки и абзацы на условные блоки, для каждого из которых задаётся своё оформление.

Рис.8. Использование тега <span>

<p>
Мой основной текст чёрного цвета постоянно разбавляется словами и предложениями <span style="color:blue;">синего</span> цвета, <span style="color:gray;">серого</span> цвета или иногда <span style="color:red;">красного</span> цвета.
</p>

Основные параметры тега <SPAN>

style - задаёт стиль оформления текста внутри блока.
Например: style="font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#0066AA;".

class - подключает указанный стиль оформления из таблицы стилей css. Например: class="mytext1"

Для разбиения страницы на большие и сложные куски (блоки) используют пару тегов <div> </div>.

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

Основные параметры тега <DIV>

align - задаёт выравнивание текста в блоке по горизонтали. Значения: left - по левому краю (так по умолчанию); right - по правому краю; center - по центру; justify - по ширине. Например: align="justify"

style - задаёт стиль оформления текста внутри блока.
Например: style="font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#0066AA;".

class - подключает указанный стиль оформления из таблицы стилей css. Например: class="mytext1"

Рис.9. Использование тега <div>

<div style="font-family:'Times New Roman', Times, serif; font-size:16px;">
<p>
Мой основной текст чёрного цвета постоянно разбавляется словами и предложениями <span style="color:blue;">синего</span> цвета, <span style="color:gray;">серого</span> цвета или иногда <span style="color:red;">красного</span> цвета.
</p>
</div>

[наверх]

Часть 4. Списки

Теги списков превращают текст в последовательность строк. Эта последовательность может быть помечена точками (маркированный список), цифрами (нумерованный список) или словами-определениями (список определений).

Сразу скажу, что лично я не люблю использовать стандартные списки, а предпочитаю создавать последовательность строк вручную, используя обыкновенные теги перевода строк и теги абзацев. Так удобнее задавать каждой строке нужное оформление. Хотя так называемый "список определений" мне нравится, и именно его я использовал для того, чтобы нарисовать Содержание глав этого учебного курса.

Рис.10. Маркированный список <UL>

Содержание:

Первая глава
Вторая глава
Третья глава

Рис.11. HTML-код маркированного списка <UL>

Содержание:
<ul>
<li>Первая глава</li>
<li>Вторая глава</li>
<li>Третья глава</li>
</ul>

Рис.12. Нумерованный список <OL>

Содержание:

Первая глава
Вторая глава
Третья глава

Рис.13. HTML-код нумерованного списка <OL>

Содержание:
<ol>
<li>Первая глава</li>
<li>Вторая глава</li>
<li>Третья глава</li>
</ol>

Рис.14. Список определений <DL>

I. ПРИДУМЫВАЕМ ПРОЕКТ: 1. Своё дело в жизни; 2. Образ будущего; 3. Стратегия проекта
II. СОЗДАЁМ ЭЛЕМЕНТАРНЫЙ САЙТ: 1. Ликбез об интернете; 2. Ликбез о вэбсайтах; 3. Регистрируем домен

Рис.15. HTML-код списка определений <DL>

<dl>
<dt>I. ПРИДУМЫВАЕМ ПРОЕКТ</dt>
<dd>1. Своё дело в жизни</dd>
<dd>2. Образ будущего</dd>
<dd>3. Стратегия проекта</dd>
<br>
<br>
<dt>II. СОЗДАЁМ ЭЛЕМЕНТАРНЫЙ САЙТ</dt>
<dd>1. Ликбез об интернете</dd>
<dd>2. Ликбез о вэбсайтах</dd>
<dd>3. Регистрируем домен</dd>
</dl>

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

И конечно, внутри каждого тега любого списка может присутствовать уже известный нам вездесущий параметр style="", задающий оформление содержимого списка.

Основные параметры тегов <UL>, <OL>, <LI>, <DL>, <DT>, <DD>

style - задаёт стиль оформления текста.
Например: style="font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#0066AA;".

class - подключает указанный стиль оформления из таблицы стилей css. Например: class="mytext1"

[наверх]

Часть 5. Всякое разное

С помощью специальных тегов <H1></H1>, <H2></H2>, ... , <H6></H6> можно создавать заголовки разной величины.

Рис.16. Примеры заголовков

Заголовок размера 1

Name: Работаем с текстом
Item: Работаем с текстом
Author: akkhu

Заголовок размера 2

Заголовок размера 3

Заголовок размера 4

Заголовок размера 5

Заголовок размера 6

Рис.17. HTML-код заголовков

<h1>Заголовок размера 1</h1>
<h2>Заголовок размера 2</h2>
<h3>Заголовок размера 3</h3>
<h4>Заголовок размера 4</h4>
<h5>Заголовок размера 5</h5>
<h6>Заголовок размера 6</h6>

Основные параметры тегов <H1> ... <H6>

align - задаёт выравнивание заголовка по горизонтали. Значения: left - по левому краю (так по умолчанию); right - по правому краю; center - по центру; justify - по ширине. Например: align="justify"

style - задаёт стиль оформления текста.
Например: style="font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#0066AA;".

class - подключает указанный стиль оформления из таблицы стилей css. Например: class="myhead"

С помощью специального тега <HR> можно рисовать горизонтальные линии разной длины, толщины и разного цвета. Этот тег не требует себе закрывающей пары.

Рис.18. Рисунок линии

Рис.19. HTML-код линии

Основные параметры тега <HR>

align - задаёт выравнивание линии по горизонтали. Значения: left - по левому краю (так по умолчанию); right - по правому краю; center - по центру. Например: align="center"

color - задаёт цвет линии. Например: color="darkorange" или color="#FF8C00"

noshade - отменяет рельефность линии. Указывается просто noshade

size - задаёт толщину линии в пикселах. Например: size="3"

width - задаёт длину линии в пикселах или в процентах. Например: width="70%"

style - задаёт стиль оформления линии. Например: style="size:3px; color:#0066AA;".

class - подключает указанный стиль оформления из таблицы стилей css. Например: class="myline"

Мне осталось только перечислить некоторые, так называемые, специальные символы языка HTML. К ним относятся, например, знак "копирайта" (©) или вот такая закорючка (§), обозначающая "параграф".

А часто просто невозможно вывести некоторые знаки на экран "напрямую". Например, чтобы вывести значок "меньше" (<), нужно использовать спецсимвол, а иначе браузер примет этот значок за начало какого-либо служебного тега.

Некоторые специальные символы языка HTML

Код спецсимвола: Его смысл и изображение:

© Копирайт ©

< Меньше <

> Больше >

" Кавычка "

& Амперсанд &

§ Параграф §

  Пробел