Работа с текстом сайта. Шрифты. - Лучшие партнёрские программы. Фарма партнёрка . Скрипты.

Для более красивого оформления и в последующем наилучшего визуального восприятия Web-странички, можно не только использовать наполнение её картинками и различными логотипами, но и пробовать различные эксперименты с текстовым оформлением. Работа с текстом сайта, принесет много пользы внешнему оформлению и придаст сайту более оригинальный вид.

Примером работы с текстом сайта может быть, разбиение текста на абзацы, выделение заголовка более большим шрифтом или цветом, выделение жирным шрифтом или подчеркиванием текста на который мы бы хотели обратить внимание читателей и так далее.

Начнем с того, что в HTML тексте существует шесть уровней заголовков разделов, которые выделяются парой тегов с номерами соответствующими уровню заголовка раздела от 1 до 6.

<Н1>…</Н1>

заголовки раздела первого уровня,

<Н2>…</Н2>

заголовки раздела второго уровня и т. д. до

<Н6>…</Н6>

заголовкои раздела шестого уровня.

Отличие от обычного нормального текста на Вашей страничке заголовки будут отличаться только размером и толщиной шрифта и при просмотре странички в кодировке HTML наличием тегов <Н>…</Н> в которые заключен заголовок. При заключении названия раздела в заголовок первого уровня <Н1>…</Н1>, отображаться он будет самым жирным и крупным шрифтом, а все последующие заголовки соответственно будут уменьшатся в своих размерах и самый последний из них <Н6>…</Н6> визуально будет самым мелким.

Давайте попробуем сами поэкспериментировать открыв программу блокнот (пуск – программы – стандартные – блокнот) и написав в ней заголовок раздела первого уровня «Мой сайт!», заключив его в теги заголовка раздела первого уровня:

<Н1>Мой сайт!</Н1>

Не забывайте, что сохранять результат нужно не как текстовый файл txt, а как файл который будет отображаться в последствии в браузере, то есть формата html (файл – сохранить как… - в строке имя файла пишем любое название например sait.html - сохранить). Все операцию по сохранению Web-странички мы произвели, теперь можно открыть сохраненный документ в браузере и посмотреть на полученный результат.

Сделайте то же самое для заголовков раздела каждого уровня по порядку просматривая полученные результаты. Для этого достаточно открыть наш полученный файл site.html в браузере, кликнуть на чистом поле документа правой кнопкой мышки - просмотр HTML-кода, меняя при этом только номер уровня заголовка с 1 на 2…3...и т.д., затем просто сохраняем результат, снова открываем в браузере и смотрим полученные изменения.

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

align=right - выравнивание по правому краю

или

align=center - выравнивание по центру страницы

Наглядно это будет выглядеть так:

<H1align=center>Мой сайт!</Н1>,

сделав изменения в документе и сохранив его посмотрите через браузер, что при этом получилось.

Давайте разберем, как выделить текст полужирным шрифтом. Для этого помимо заголовка «Мой сайт» напишем какой-нибудь текст, например

<h4>Сегодня был создан мой первый сайт, в котором я рассказу о себе и о своих увлечениях</h4>

Для выделения текста полужирным курсивом, используются теги <b>…</b>. Заключим часть текста в эти теги, откроем site.html – правой кнопкой мышки на чистом поле страницы – просмотр HTML кода – делаем изменение:

<h4>Сегодня был создан <b>мой первый сайт</b>., в котором я рассказу о себе и о своих увлечениях.</h4>

После сохранения изменений мы увидим, что словосочетание «мой первый сайт» будет выделено полужирным шрифтом.

Теперь рассмотрим тег, который делает написание текста наклонным курсивом, это тег <i>…</i> и если мы сделаем следующие изменения:

<h4>Сегодня был создан <b><i>мой первый сайт</i></b>., в котором я рассказу о себе и о своих увлечениях.</h4>

То увидим что теперь часть текста «мой первый сайт» стало отличаться от общего текста не только жирным шрифтом, но ещё и наклонным курсивом. Только учтите одно правило, что некоторые элементы разметки при работе с текстом, могут быть вложенными, как в данном примере тег <i>…</i> - будет являться вложенным в тег <b>…</b> а не наоборот. Соблюдать это правило нужно обязательно, иначе измененный текст будет неправильно отображаться в браузере и Вы не получите желаемого результата.

Теги <u>…</u> делают отрывок текста или слово подчеркнутым:

<h4>Сегодня был создан <u>мой первый сайт</u>, в котором я рассказу о себе и о своих увлечениях.</h4>

Теги <big>…</big> увеличивают размер шрифта текста по отношению к общему, посмотрите наглядно на примере сделав нужные изменения, заключив фрагмент текста «мой первый сайт» в них:

<h4>Сегодня был создан <big>мой первый сайт</big>, в котором я рассказу о себе и о своих увлечениях.</h4>

И совсем наоборот теги <small>…</small> уменьшают размер текста по отношению к исходному.

Есть и другой вариант изменения или установки шрифта текста, который может задаваться в цифровом значении от 1-самого мелкого и до 7-самого большого, что-то похоже на задание шрифта в программе Word. Для этого используются теги <font>…</font>. Посмотрите как меняется текст изменяя параметр size от 1 до 7:

<h4>Сегодня был создан <font size=1>мой первый сайт</font>, в котором я рассказу о себе и о своих увлечениях.</h4>

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

Помимо конкретного указания параметров текста, задания шрифта, курсива и т.д., существует и другой способ его выделения – задание некоего логического стиля. При этом способе выделения фрагмента текста, различные браузеры будут отображать его по разному давая этому участку текста некий приоритет по отношению к общему содержимому. Обычно такой способ применяется для отображения названий чего-либо, например фильма, книги или имени, для выделения цитаты и т. д. Для этого при работе с текстом сайта, используются теги:

<cite></cite> - выводится курсивом и применяется для выделения названия чего-либо (стих, имя, анонс).

<dfn></dfn> - выводится курсивом и применяется для определения слова.

<em></em> - выводится курсивом, применяется для выделения текста или слова, а также для усиления его значимости.

<var></var> - выводится курсивом и применяется для текста или словосочетания, которые могут быть заменены различными выражениями.

<code></code> - выводится на экране шифром фиксированной ширины и используется для фрагментов программного кода.

<strong></strong> - отображается полужирным шрифтом и применяется для выделения особо важных фрагментов текста.

Существует ещё несколько тегов для выделения текста от общего написания, но думаю, что этого пока будет достаточно для того чтобы написать текстовую составляющую сайта с применением этих тегов. Существует ещё один способ применения тех или иных текстовых эффектов для работы с текстом – с помощью языка каскадных таблиц стилей CSS, он является более современным и прогрессивным по сравнению с HTML, но это отдельная статья и пока мы не будем рассматривать её здесь. Для особо любознательных и кто хочет более подробно изучить HTML и CSS, существует множество учебников и книг, которые можно найти как в интернете так и в библиотеке совершенно бесплатно!

Логин:
Пароль: