Сайты - строим сами
Сайты - строим сами |
| Главная | Введение | Основы HТМЛ | Формат и цвет | Картинки и ссылки | Таблицы | Фреймы | Основы CSS |
|---|
| Вёрстка сайта | Формы в html |
|---|
Ну, собственно не только текста, но и фона, однако начинать будем с текста. Тег <font> означает шрифт и имеет атрибуты:
color - цвет,
size - размер,
face - гарнитура шрифта,
причем их можно использовать в одном теге все вместе.
или F 5 на клавиатуре и видим результат. Если не видим, проверяйте синтаксис.
В данном примере цвет был определён с помощью константы цвета тут все просто можно было подставить green, blue, gray в переводе с английского зеленый, синий, серый, кто не знает. Но, кроме того цвет можно отображать в виде RRGGBB , например тот же красный будет выглядеть так:
<font color="#FF0000">Этот текст набран красным цветом</font>
Первые два знака задают красный цвет,RR red, вторые два зелёный, GG green, и два последних синий, BB blue значение может меняться от нуля до девяти 0 - 9, затем идут буквы A, B, C, D, F черный цвет выглядит так: #000000,то есть полное отсутствие цвета, белый - так: #FFFFFF, все цвета по максимуму, дают, как известно, белый. Маленькие буквы, или заглавные, значения не имеет. Существуют таблицы определения цвета, и специальные программы, в которых можно подобрав цвет узнать его код.
Вообще цвет шрифта можно задать сразу для всего документа, если вставить атрибут text, в тег <body>, а если вставить туда же атрибут bgcolor, то можно определить цвет фона, тоже для всей страницы сразу. Пробуем, только добавим еще тег <br>, - переход на другую строку.
<html>
<head>
<title>Настоящая страница</title>
</head>
<body text="blue" bgcolor="silver">Текст который должен находится на странице
<br>
<font color="red">Этот текст набран красным цветом</font>
</body>
</html>
Копируем, а лучше вводим с клавиатуры в файл открытый в блокноте, сохраняем в блокноте, обновляем в браузере. Обратите внимание цвет, да и любой атрибут, заданый непосредственно объекту, в рабочей области документа, имеет преимущество перед атрибутом заданным в теге <body>. И ещё, вдруг кто не знает, silver, по английски серебро. С цветом, как будто, пока всё.
Атрибут size в теге <font> может принимать значение от 1 до 7 по умолчанию имеет значение 3, и вот тут существует интересный момент, можно задавать размер шрифта от значения по умолчанию, в сторону уменьшения -1, -2, в сторону увеличения +1, +2, +3, +4 . В общем можно и так, и так. Добавим в наш пример:
<br>
<font size="-2">(или 1)Это самый маленький текст</font><br>
Это самый маленький текст
<font size="7">(или +4)Это самый большой текст</font>
Это самый большой текст
Смотрим в браузере. Процедура прежняя, сохраняем, обновляем. О размере шрифта тоже пока всё.
Речь пойдет не о всех, зачем забивать голову раньше времени. Основные теги необходимые для форматирования текста, вот что имеется в виду.
<b>Жирный текст</b>, <strong>То же самое</strong>
<i>Наклонный текст, курсив</i>, <em>То же самое</em>
<u>Подчеркнутый текст</u>, <s>Зачеркнутый текст</s>
<big>Более крупный текст</big>,
<small>Более мелкий текст</small>,
<sub> - приспускает текст, код: H<sub>2</sub> О выглядит так: H2O
<sup> - приподнимает текст, код: 5<sup>2</sup> =25 выглядит так:
52=25
Следующий тег определяет заголовок. <h6>Самый маленький</h6>
Как вы заметили, автоматически идет отступ на одну строку вверх и вниз. А вот выравнивать надо с помощью атрибута align, который может принимать значение center, left, right соответственно по центру, слева, справа. Ещё один атрибут title - всплывающая подсказка при наведении курсора. Теперь в целом, код: <h3 align="center" title="Это просто заголовок">Просто заголовок</h3> Будет выглядеть так:
Тег, который я решил отнести к форматированию текста, хотя он таковым не является. < hr>, закрывающег тега нет. Он предназначен для добавления горизонтальной линии, и имеет атрибуты size, color, width, noshade соответственно толщина, цвет, ширина (по горизонтали в % или пикселях),последний атрибут означает - без тени.
Теперь на очереди списки. Это когда в документе что-то перечисляется столбиком. Например:
Для описания атрибутов тега <ol > я использовал тег <ul > - ненумерованные списки. Все то же самое, только атрибут type может принимать значения disc, circle, square - круг, окружность, квадрат. Устаревший тег <menu> </menu> выполняет те же функции, то есть определяет ненумерованные списки. Был оставлен для совместимости со старыми браузерами.
Тег <DIV> служит для отделения блоков текста от остальной части текста. Имеет атрибут align, который может иметь значения: left, right, center, justify, который выравнивает текст соответственно по левому краю, по правому краю, по центру и по обоим краям документа.
<div align="center"> Блок текста </div>Вот только, чтобы увидеть работу этого тега действительно нужен блок текста и остальной текст. Поэксперементируйте сами.
И последнее, о чем хочу сказать в этом разделе, знак пробела &nbsр это не тег, это спецсимвол, и он не одинок в своей компании спецсимволов, но об остальных пока ни к чему. О данном могу сказать только то, что он вводит пробел шириной в один знак, хотите больше вводите его большее количество раз.
Например: здесь их десять.