Шрифт html - в этом уроке мы с Вами рассмотрим основные способы разметки текста на web странице.

Текст, является одним из важных видов контента, который добавляется на страницы сайта. Текст на сайте, это различные статьи, новостные заметки, различные текстовые каналы, например RSS, и так далее.

В HTML, при разметке текста на веб странице основные параметры задаются тегом FONT. С помощью тега FONT, можно задать названия шрифта (гарнитуру текста), размер текста и его цвет.

На самом деле, кроме тега FONT, в HTML существует множество других тегов, с помощью которых можно изменять параметры шрифта текста на странице.

В рамках нашего курса: «Как создать сайт в блокноте», некоторые из этих дополнительных тегов, мы будем использовать для изменения параметров шрифта.

Необходимо сделать следующее замечание.

На сегодняшний день, для разметки текста на странице, широко используют CSS стили. Использование CSS стилей, дает гораздо больше возможностей для управления текстом на странице.

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

Ну что же, давайте продолжим создавать сайт в блокноте и вернемся к нашему html коду.

Итак, мы с Вами остановились на том, что в прошлом уроке, задали фон для шапки сайта. Текст заголовка нашего сайта мы еще не придумали.

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

Предположим, что я хочу создать сайт, состоящий из несколько страниц с краткой информацией и небольшим обзором моего курса: «Как создать сайт в блокноте» поэтому, я свой сайт назову по названию курса.

Откроем html код главной страницы сайта – index.html блокнотом для редактирования. Кроме того, откроем наш файл браузером - для проверки изменений которые мы делаем.

Найдем в html коде строку:

<td align="center" colspan="2" bgcolor="#add2ea" height="79px" background="img\header.jpg">Header</td>

Давайте удалим текстовую фразу - Header и добавим новое название сайта - Как создать сайт в блокноте.

Нажмем в блокноте на кнопку «Сохранить» и обновим страницу сайта в браузере.

Как видите, название шапки сайта изменилось, но текст, который мы добавили, набран шрифтом черного цвета и имеет маленькие размеры. Дело тут в том, что если форматирование текста не задано, браузер выводит в свое окно текст с параметрами по умолчанию.

Какими размерами вывести текст в шапку сайта, и какого он должен быть цвета? Чтобы ответить на этот вопрос нужно исходить из следующих соображений.

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

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

Чтобы поисковая система, обратила внимание на заголовок, есть такое правило – заголовок сайта должен быть размещен в секции заголовка первого уровня, который формируется тегом <H1>.

Если мы откроем html справочник и выберем по алфавиту латинскую букву H, то увидим описание тегов H1 … H6. Синтаксис применения тегов заголовков разного уровня очень простой:

<h1>Текстовая фраза</h1>

Итак, с размером шрифта текста заголовка сайта мы определились. Теперь определимся с цветом шрифта текста.

Как я отмечал выше, для задания и изменения таких характеристик шрифта, как цвет размер и гарнитура (название шрифта), используется тег FONT.

Тег FONTприменяется с параметрами - color (цвет шрифта), size (размер шрифта), face (гарнитура, или название шрифта).

Ну что же, я думаю, можно редактировать html код нашей страницы. Так как фон шапки сайта темно синий, то белый цвет шрифта на этом фоне, будет смотреться нормально.

Размер шрифта, я пока задавать не буду, так как мы его зададим тегом h1, в результате у нас получится следующий код:

<td align="center" colspan="2" bgcolor="#add2ea" height="79px" background="img\header.jpg"><h1><font color="white" face="Arial">Как создать сайт в блокноте</font></h1></td>

Сохраним изменения в блокноте и вновь обновим окно браузера с нашей страницей.

Мы увидим, что сработал тег h1 и шрифт заголовка сайта стал крупным. Если шрифт нужно будет уменьшить или увеличить, то для этого мы просто добавим параметр size.

Параметру size, в качестве аргумента присваивается условное значение от 1 до 7, значением по умолчанию, является 3.

Кроме того, аргументом параметра size, может быть относительное значение (+1 или -1), которое суммируется с базовым значением, то есть с 3.

Имейте ввиду, что размер шрифта зависит от гарнитуры, например, шрифт гарнитуры Ariel, имеет меньший размер, чем шрифт гарнитуры Verdana.

Итак, результирующий html код, на котором мы закончим этот урок у нас получился следующий:

<td align="center" colspan="2" bgcolor="#add2ea" height="79px" background="img\header.jpg"><h1><font color="white" face="Arial" size="5">Как создать сайт в блокноте</font></h1></td>

Выше я писал, что в html, кроме тега FONT, есть целый арсенал тегов, с помощью которых можно изменять характеристики и параметры шрифтов.

Откройте html справочник на пункте – «Теги по типам» - «Текст».

Обратите внимание, здесь представлены теги, с помощью которых вы сможете сделать шрифт курсивным - тег i и em; сделать шрифт более жирным – тег b и strong; отобразить шрифт моноширинным текстом – тег tt, и так далее.

Перейти к Уроку 13: HTML ссылка

Перейти к Уроку 11: html таблица, фон, высота ячейки

Автор: Виктор Милованов