<
FONT
SIZE
=…
COLOR
=...
FACE
=...>
текст FONT
>
SIZE
- устанавливает размер
шрифта
,
который будет использоваться текстом,
содержащимся в пределах элемента FONT.
Можно задать абсолютный размер шрифта,
указав целое число от 1 до 7. Для шрифта
можно также указывать относительный
размер
,
присваивая атрибуту целое число со
знаком (например, это может быть SIZE="+1"
или SIZE="-2").
COLOR
- указывает цвет
,
которым будет выделен данный фрагмент
текста. Цвета задаются в виде RGB-значения
с шестнадцатеричной нотацией, либо
выбирается символьное значение одного
из стандартных цветов.
FACE
- задает гарнитуру
шрифта
,
например FACE=ARIAL.
текст
- телетайпный текст (моноширинный).
текст
- стиль
с наклонным шрифтом (курсив
).
текст
- стиль
с жирным
шрифтом.
текст
U>
-
стиль с подчеркиванием
текста.
текст
BIG>
-
печать текста шрифтом увеличенного
размера
(большего, чем окружающий текст).
текст
SMALL>
- печать текста шрифтом уменьшенного
размера
(меньшего, чем окружающий текст).
текст
SUB>
- печать текста со сдвигом вниз (нижний
индекс
или
подстрочный).
текст
SUP>
-
печать текста со сдвигом вверх (верхний
индекс
или
надстрочный).
текст
STRIKE>
или
<
S
>
…S
>
- стиль с перечеркиванием текста.
Специальные теги html
Тег
<
ADDRESS
>
используется для выделения автора
документа и его адреса (например, e-mail).
Некоторые
символы являются управляющими
символами
в HTML
и добавляются в текст только при помощи
ESC-последовательностей:
левая
угловая скобка "<" - <
правая
угловая скобка ">" - >
амперсанд
"&" - &
двойные
кавычки """ - "
Существует
большое количество ESC-последовательностей
для обозначения специальных символов,
например " "
для обозначения знака
и "®"
для значка .
Одной из особенностей является замена
символов во 2-ой части символьной таблицы
(после 127-ого символа) на escape-последовательности
для передачи текстовых файлов с
национальными языками по 7-битным
каналам.
ESC-последовательностичувствительны к регистру
: НЕЛЬЗЯ
использовать < вместо
<.
Наиболее часто
используемые теги приведены в таблице
2.
Таблица
1.2 - Основные теги для оформления
HTML-документа
|
|
Атрибут
|
Функция
|
|
|
version=строка
|
Указывается
версия HTML, которая была
использована для создания данного
документа
|
|
|
|
Заключенный
в теги текст будет отображаться в
курсивном начертании
|
|
тег HEAD –
начальный и конечный теги заголовочной
части HTML-документа
|
|
тег
TITLE
– начальный и конечный теги заголовка
HTML
-документа
|
|
тег
A
– начальный и конечный теги, которые
позволяют создать гиперссылку (атрибут
href
)
или идентификатор фрагмента (атрибут
name
)
заголовка
HTML
-документа
|
|
|
|
|
|
|
href=url
|
Указывается
URL-адрес целевого
документа гиперссылки (необходим,
если это не якорь имени)
|
|
|
methods=список
|
Задается
список методов отображения, зависящих
от браузера (через запятую)
|
|
|
name=строка
|
Указывается
имя идентификатора фрагмента
(необходим, если это не якорь
гипертекстовой ссылки)
|
|
|
rel=связь
|
Определяется
связь этого документа с целевым
документом
|
|
|
rev=связь
|
|
|
|
target=имя
|
Задается
имя кадра или окна отображения
обозначенного ссылкой документа
|
|
|
title=строка
|
|
|
|
|
Указывается
не зависящее от места нахождения
универсальное имя ресурса для данной
гиперссылки
|
|
тег
ADDRESS
– заключенный в данные теги текст
представляет собой адрес
|
|
тег
B
– заключенный в данные теги текст
будет отображаться жирным шрифтом
|
|
тег
BASE
– указывается базовый
URL
для всех относительных
URL
в данном документе
|
|
|
Атрибут
|
Функция
|
|
|
href=url
|
Указывается
базовый URL-адрес
|
|
|
target=имя
|
Задается
использующееся по умолчанию целевое
окно для всех ссылок
в документе. Предназначен в основном
для переадресации ссылки в другие
кадры. Существует четыре специальных
значения: _blank,
_parent,
_selfи _top
|
|
тег
BASEFONT
– указывается размер шрифта для
последующего текста
|
|
|
Атрибут
|
Функция
|
|
|
size=значение
|
|
|
тег
BIG
– заключенный в теги текст будет
отображаться шрифтом большего размера
|
|
тег
BODY
– начальный и конечный теги тела
документа
|
|
|
|
|
|
|
alink=цвет
|
Установка
цвета активных гипертекстовых ссылок
в документе
|
|
|
background=url
|
Указывается
URLфонового изображения
|
|
|
bgcolor=цвет
|
Установка
цвета фона документа
|
|
|
bgproperties=значение
|
Если значение
равноfixed,
запрещается прокрутка фонового
изображения вместе с содержимым
документа(IE
2
и выше)
|
|
|
leftmargin=значен
ие
|
Установка
размера (в пикселах) левого поля
документа (IE
2
и выше)
|
|
|
link=цвет
|
Установка
цвета "непосещаемых" гипертекстовых
ссылок в документе
|
|
|
text=цвет
|
Установка
цвета обычного текста в документе
|
|
|
topmargin=значение
|
Установка
размера (в пикселах) верхнего поля
документа (IE
2
и выше)
|
|
|
vlink=
цвет
|
Установка
цвета "посещенных" ссылок в
документе
|
|
тег
BR
– разрыв текущего текстового потока
и возобновление его с начала следующей
строки
|
|
|
Атрибут
|
Функция
|
|
|
|
Задается
"обтекание" объекта, расположение
которого указано значением данного
атрибута (left,rightилиall). При переносе на
новую строку текст будет размещаться
так, чтобы объект оставался видимым
|
|
тег
CENTER
– размещение заключенного в теги
текста по центру
|
|
тег
CITE
– заключенный в теги текст представляет
собой цитату
|
|
тег
COMMENT
– Комментарий в тексте документа.
Комментарии будут видимы в любом
браузере. Для всех браузеров комментарий
представляется в виде
|
|
тег
DD
– задается описательная часть для
элемента списка определений
|
|
тег
DFN
– текст, заключенный в теги форматируется
как определение
|
|
тег
DL
– создание списка определений,
содержащих теги <
dt
>
и <
dd
>
|
|
тег
DT
– задается описательно-условная
часть для элемента списка определений
|
|
тег
EMBED
– начальный и конечный теги, которые
позволяют описать встраиваемый в
документ объект. В зависимости от
вида встраиваемого объекта могут,
помимо указанных ниже, включаться
дополнительные параметры
|
|
|
Атрибут
|
Функция
|
|
|
|
Указывается
URLвстраиваемого объекта.
Этот атрибут является необходимым
|
|
|
height=n
|
Указывается
высота зоны, которую займет встроенный
объект
|
|
|
name=имя
|
Указывается
имя встраиваемого объекта
|
|
|
|
Указывается
ширина зоны, которую займет встроенный
объект
|
|
тег
FONT
– установка размера, цвета или
гарнитуры заключенног в теги текста
|
|
|
Атрибут
|
Функция
|
|
|
|
Установка
цвета заключенного в теги текста
|
|
|
face=список
|
Установка
гарнитуры заключенного в теги текста
(устанавливается первый из указанных
в разделенном запятыми списке имен
шрифтов)
|
|
|
size=значение
|
Установка
размера базового шрифта. Диапазон –
от 1 до 7
|
|
тег
Hn
– заключенный в теги текст представляет
собой заголовок уровня
n
.
Возможные значения
n
– от 1 до 6
|
|
|
Атрибут
|
Функция
|
|
|
align=тип
|
Указывается
способ выравнивания заголовка: по
левому краю (left,
по умолчанию), по центру (center)
или по правому краю (right)
|
|
тег
HR
– разрыв текущего текстового потока.
В месте разрыва будет вставлена
горизонтальная линейка
|
|
|
Атрибут
|
Функция
|
|
|
align=тип
|
Указывается
способ выравнивания линейки: по левому
краю (left),
по центру (center,
по умолчанию) или по правому краю
(right)
|
|
|
|
Запрещается
использование объемного затенения
при отображении линейки
|
|
|
|
Установка
толщины линейки равной целому числу
пиксел
|
|
|
width=значение
|
|
|
тег
I
– заключенный в теги текст будет
отображаться в курсивном начертании
|
|
тег
IMG
– в текущий текстовой поток вставляется
изображение
|
|
|
Атрибут
|
Функция
|
|
|
alt=текст
|
Задается
альтернативный текст для браузеров,
не поддерживающих работу с изображениями
|
|
|
Border=n
|
Установка
толщины (в пикселах) обрамления
изображений, содержащихся в гиперссылках
|
|
|
|
Добавление
функций управления воспроизведением
встроенных виедоклипов (IE
2
и выше)
|
|
|
Dynsrc
=
url
|
Задается
URL
-адрес
видеоклипа, подлежащего изображению
(
IE
2
и выше)
|
|
|
Height=n
|
Задается
высота изображения в пикселах
|
|
|
Hspace=n
|
Задается
размещение слева и справа от изображения
областей свободного пространства
шириной по n
пиксель
|
|
|
|
Указывается,
что при использовании данного тега
внутри тега изображение выбирается с помощью
мыши
|
|
|
loop=значение
|
Установка
числа повторов воспроизведения видео.
Значение
может быть целым или значениемinfinite
(IE
2 и выше)
|
|
|
Lowsrc=url
|
Указывается
изображением с низким разрешением,
которое браузер должен загрузить
первым. За ним следует изображением,
заданное атрибутом
(IE
2 и выше)
|
|
|
|
Указывается
исходный URLизображения,
подлежащего воспроизведению. Этот
атрибут является необходимым
|
|
|
start=начало
|
Указывается,
когда следует воспроизвести видеоклип
(варианты: fileopenилиmouseover)
|
|
|
Usemap=url
|
Указывается
чувствительная к перемещению мыши
область изображения
|
|
|
Vspace=n
|
Задается
размещение над и под изображением
областей свободного пространства по
nпиксель
|
|
|
|
Указывается
ширина изображения в пикселах
|
|
тег
KBD
– заключенный в теги текст вводится
посимвольно (как при наборе с клавиатуры)
|
|
тег
LINK
– в заголовке (<
head>)
документа определяется ссылка из
данного документа на другой документ
|
|
|
Атрибут
|
Функция
|
|
|
href=url
|
|
|
|
methods=список
|
Задается
список методов отображения для данной
ссылки, зависящих от браузера (через
запятую)
|
|
|
rel=связь
|
Определяется
связь этого документа с целевым
документом. Для InternetExplorer3.0rel=styleозначает существование внешней
таблицы стилей
|
|
|
rev=связь
|
Определяется
обратная связь целевого документа с
данным
|
|
|
|
Указывается
URLвнешней таблицы
стилей, которая будет использоваться
для форматирования документа (IE
2
и выше)
|
|
|
title=строка
|
Задается
заголовок целевого документа
|
|
|
type=text/css
|
|
|
|
|
Для целевого
документа указывается универсальное
имя ресурса, не зависящее от его места
нахождения
|
|
тег
MAP
– определяется чувствительная к
перемещению мыши область изображения
|
|
|
Атрибут
|
Функция
|
|
|
name=строка
|
Задается
имя данной области. Этот атрибут
является необходимым
|
|
тег
NOBR
– в заключенном в теги тексте разрывы
не допускаются
|
|
тег
P
– начальный и конечный теги абзаца
|
|
|
align=тип
|
Задается
способ выравнивания текста в абзаце:
по левому краю (left),
центру (center)
или по правому краю (right)
|
|
тег
PLAINTEXT
–
указывается, что остальную часть
документа следует отображать без
обработки, как предварительно
отформатированный текст
|
|
тег
PRE
– заключенный в теги текст будет
отображаться так. как он был
отформатирован предварительно, без
обработки, с точным соблюдением
переносов строк и интервалов
|
|
|
|
Браузер
будет размещать текст так, чтобы в
строке умещалось (если возможно) nсимволов
|
|
тег
S
|
|
тег
SAMP
– заключенный в теги текст представляет
собой шаблон
|
|
тег
SMALL
– заключенный в теги текст будет
отображаться шрифтом меньшего размера
|
|
тег
SPACER
– вставить в документ разделитель
(Только
N
3)
|
|
|
|
|
|
|
type=тип
|
Указывается
тип разделителя: vertical– между двумя строками текста
помещается область пустого пространства
указанного размера;horizontal– область пустого пространства
указанного размера помещается между
словами или символами;block– вставка прямоугольной области
|
|
|
|
Указывается
(в пикселах) ширина разделителя типа
horizontalили высота разделителя типаvertical
|
|
|
|
Указывается
ширина разделителя типа block
|
|
|
height=n
|
Указывается
высота разделителя типа block
|
|
|
align=значение
|
Указывается
способ выравнивания разделителя
blockотносительно окружающего текста.
|
|
тег
SPAN
– заключенный в теги текст будет
форматироваться с использованием
таблицы стилей
(Только
IE
3
и выше)
|
|
|
Атрибут
|
Функция
|
|
|
style=элементы
|
Для текста
в заданном интервале задаются элементы
таблицы стилей
|
|
тег
STRIKE
– заключенный в теги текст будет
отображаться перечеркнутым
горизонтальной линией
|
|
тег
SUB
– заключенный в теги текст будет
отображаться как нижний индекс
|
|
тег
SUP
– заключенный в теги текст будет
отображаться как верхний индекс
|
|
тег
TT
– заключенный в теги текст будет
отображаться моноширинным шрифтом
|
|
тег
VAR
– заключенный в теги текст представляет
собой имя переменной
|
46.4K
Зачастую начинающих веб-мастеров мучает вопрос, почему одни сайты ранжируются выше и обходят конкурентов в поисковой выдаче. Причиной этого могут быть неправильно расставленные теги h1
, h2
…h6
. Если эти теги расставлены неверно, без учета специфики ресурса, то поисковикам сложнее получить точную информацию о статьях и содержащихся в ней ключевых словах.
Теги h1
—h6
позволяют выделить заголовки различных уровней. Они дают понять, какие части текста более точно отражают тему статьи и обеспечивают преимущества в ранжировании.
Грамотная расстановка тегов позволяет поисковым системам более точно отображать станицу по запросам в выдаче, что благоприятно сказывается на позиции ресурса:
Зачем нужны теги h1-h6?
В теги заключается название сайта, заголовки и подзаголовки текста:
В HTML теги заголовков обозначаются h
от английского «header
», что в переводе означает «
заголовок, шапка
». Вот пример того, как это выглядит:
Заголовок
Расстановка тегов заголовков должна производиться на каждой странице ресурса. При этом важность заголовка будет зависть от его цифры, чем она меньше, тем заголовок важнее:
- наиболее важные теги
- менее значимые теги...
- последние по важности теги
Однако относиться к их расстановке следует с осторожностью. Неправильное использование может привести к тому, что ваш ресурс попадет под санкции поисковых систем.
Синтаксис тегов h1-h6
Название текста
Подзаголовок 1
...
Подзаголовок 2
Подзаголовок 3.1
...
Подзаголовок 3_2
Подзаголовок 3
Наибольшей популярностью пользуются теги h1
h2
h3
.
Как правильно использовать тег h1?
Игнорируя тег h1
, веб-мастера, лишают себя такого важного преимущества, как оптимизация контента. На движках он часто прописывается автоматически, однако не всегда, и данный факт следует учитывать.
HTML
тег h1
– самый значимый в своем роде. В него заключают название сайта и заголовок статьи. Однако не стоит его путать с тегом
(<span>заголовком страницы
</span>). Title
отражается в браузере вверху экрана с левой стороны в тот момент, когда открыта страница ресурса. Title
прописывается в шапке страницы между <head></head>, в то время, когда h1
—h6
указываются в самом «теле
» страницы и заключаются в теги <body></body>.</p>
<p>На странице может присутствовать только один h1
тег. Если указать несколько заголовков с тегом h1
, поисковики могут расценить это как переспам, что в свою очередь грозит баном:</p>
<br>
Правила составления главного заголовка h1
:
<ul><li>В теге должны использоваться ключевые слова, применяемые для продвижения страницы;</li>
<li>Не стоит делать заголовок h1
слишком объемным, вполне достаточно нескольких слов;</li>
<li>Текст заголовка должен быть читабельным;</li>
<li>Мета тег h1
не должен содержать ничего кроме самого текста. Если желаете его выделить, поставьте коды за пределами тега;</li>
<li>Перед тем, как вручную прописывать h1
, убедитесь, что движок не задает его автоматически;</li>
<li>Содержание h1
должно соответствовать тематике, указанной в title
страницы;</li>
<li>При составлении h1
обязательно используйте ключевую фразу, по которой продвигается страница;</li>
<li>Содержание заголовка должно быть уникальным, емким и тематичным. Не стоит делать h1
полной копией <a href="/chill/bezzvuchnyi-product-info-php-pravilnaya-ustanovka-moiki-vozduha/">тега Title</a>
. Важно, чтобы на каждой странице ресурса были прописаны уникальные h1
—h6
, поэтому избегайте повторений;</li>
<li>Нельзя перечислять в заголовке <a href="/microsoft-excel/soft-i-servisy-dlya-seo-besplatnye-i-platnye-seo-programmy-blok-instrumentov/">ключевые фразы</a> через запятую. Содержание h1
должно быть понятно не только поисковикам, но и посетителям ресурса.</li>
</ul><h3>Как правильно использовать теги h2-h6?</h3>
<p>Кроме h1
для расстановки заголовков, которые идентифицируются <a href="/browsing-the-internet/poiskovye-sistemy-rossii-i-lidiruyushchie-poiskoviki-interneta/">поисковыми системами</a>, используются теги h2
, h3
, h4
, h5
, h6
и т.д.</p>
<h4>Тег h2</h4>
<p>Как правило, используется для заголовков постов в ленте, размещенной на <a href="/microsoft-word/ntv-plyus-glavnaya-stranica-samostoyatelnaya-nastroika-kanalov/">главной странице</a> или для подзаголовков в статье.</p>
<h4>Теги h3, h4</h4>
<p>Зачастую с их помощью выделяют названия подзаголовков, рубрик и виджетов в sidebar
.</p>
<h4>Теги h5, h6</h4>
<p>Предназначены для еще более мелких элементов страниц, которые следует отделить от остального текста.</p>
<p>Расстановка заголовков h1
— h6
в <a href="/microsoft-excel/zapusk-dvuh-versii-1s-na-odnom-servere-parallelnyi-zapusk/">разных версиях</a> движков может быть реализована по-разному.</p>
<p>Правила расстановки h2
—h6
:</p>
<ul><li>Структура заголовков. Должна быть соблюдена иерархия заголовков;</li>
<li>Размер шрифта. Чем ниже уровень заголовка, тем мельче шрифт. Редактирование шрифтов производится в стилях. Но, как правило, шрифты имеют правильные размеры по умолчанию;</li>
<li>Не допускается применение тегов заголовков вместе с другими тегами акцентирования. В заголовках рекомендуется использовать ключевые слова, по которым данная станица будет продвигаться в поиске;</li>
<li>В отличие от h1
, теги h2
—h6
могут быть прописаны на странице несколько раз.</li>
</ul><p><body>
<h1>Я главный в иерархии заголовков</h1>
<h2>Мои дети</h2>
<h3>Мои внуки</h3>
<h3>Мои внуки</h3>
<h3>Мои внуки</h3>
<h2>Мои дети</h2>
<h3>Мои внуки</h3>
<h3>Мои внуки</h3>
<h3>Мои внуки</h3>
<h4>Мои правнуки</h4>
<h4>Мои правнуки</h4>
<h4>Мои правнуки</h4>
</body></p>
<ul><li>Не должно быть никакого спама;</li>
<li>Составление текста h1
— h6
должно производиться с использованием синонимов и учетом правил морфологии;</li>
<li>Основные <a href="/windows/kak-uznat-vysokochastotnye-zaprosy-v-yandekse-podbor/">ключевые запросы</a> лучше разместить ближе к началу заголовка;</li>
<li>Ключевые фразы, прописанные в заголовках, должны встречаться в тексте страницы;</li>
<li>Теги h1
— h6
должны быть краткими, емкими и информативными:</li>
</ul>
<p>Кроме использования <a href="/work-with-pc/v-kakoi-format-formatirovat-vneshnii-zhestkii-disk-v-kakuyu-failovuyu-sistemu/">стандартных размеров</a> и начертаний (гарнитуры) шрифтов,
можно определять шрифты для каждого текстового фрагмента с помощью специальных
тегов. Самый простой способ - использование так называемых<i>
физических стилей
</i>:</p>
<p>Для каждого тега физического стиля существует соответствующий закрывающий
тег, который отменяет дальнейшее применение стиля. Например, для тега
<b> закрывающим тегом является
</b>.<br>
Ниже приведен пример программы и внешний вид различных физических стилей:</p><p><i> <HTML><br>
<НЕАD><ТIТLЕ>Физические стили </ТIТLЕ></НЕАD>
<br>
<BODY><br>
<В>Полужирный</В><br>
<I>Курсив</I><br>
<U>Подчеркнутый</U><br>
<S>Вычеркнутый</S><br>
<ТТ>Пишущая машинка</ТТ><br>
<ВХ1>Полужирный курсив</В><br>
<ВХ1><и>Полужирный курсив подчеркнутый </В></I></U>
<br>
</BODY> <br>
</HTML>
</i></p><p><img src='https://i2.wp.com/tepka.ru/html4c/829.gif' height="425" width="396" loading=lazy></p><p><i>Рис. 649. Физические стили
</i></p><p>Внутри тега заголовка можно вставить тег физического стиля, чтобы модифицировать
весь заголовок или только некоторую его часть. Например, чтобы выделить
курсивом часть текста, определенного в качестве заголовка, можно использовать
следующую конструкцию:</p><p><i><HTML><br>
<НЕАD><ТIТLЕ>Физические и логические стили </ТIТLЕ>
</НЕАD><br>
<BODY><br>
<Н2>Это - <I> модифицированный</I>
заголовок 2-го уровня</Н2><br>
</BODY><br>
</HTML>
</i></p><p><img src='https://i2.wp.com/tepka.ru/html4c/830.gif' width="100%" loading=lazy></p><p><i>Рис. 650. Изменение стиля шрифта части
заголовка
</i></p><p>С помощью специального тега <b><FONT>
</b>
можно настроить шрифт для изображения текста: задать гарнитуру, размер
и цвет. Прежде всего, вы можете установить размер основного шрифта, который
используется в документе по умолчанию. тег основного шрифта имеет формат
<b> <BASEFONT SIZE=>
</b>. Размер основного
шрифта можно установить от 1 до 7. Если не использовать этот тег, то размер
основного шрифта по умолчанию устанавливается равным 3.<br>
тег<b> <FONTSIZE=размер_шрифта>
</b> устанавливает
размер текущего шрифта для отдельных фрагментов текста. На стили этот
тег не влияет. Диапазон возможных значений - от 1 до 7. Данный тег позволяет
также управлять размером текущего шрифта относительно основного. Для этого
используются символ + (чтобы увеличить) и символ - (чтобы уменьшить) размер
шрифта на заданную величину. Например, если размер основного шрифта установлен
равным 3, то тег<b> <FONT SlZE=+2>
</b>устанавливает
размер текущего шрифта равным 5.<br>
Для задания гарнитуры шрифта используется тег <b><FONT
РАСЕ="имя_шрифта">
</b>. Например:</p><p><i><FONT FACE="Arial">
</i></p><p>Если этот тег не используется в вашем документе, то браузер будет применять
шрифт, установленный в его настройке. Поэтому текст на экране пользователя
может выглядеть совсем не так, как вы его представляли. Следует также
иметь в виду, что если назначенный вами шрифт не установлен на компьютере
пользователя, то браузер будет изображать текст шрифтом, установленным
по умолчанию.<br>
Вы можете в теге <b><FONT>
</b>указать через
запятую перечень шрифтов. В этом случае браузер будет использовать первый
найденный шрифт. Например, можно записать тег:</p><p><i> FACE="Arial, Sans Serif, Courier">
</i></p><p>Обычно в перечне задают похожие шрифты. Рекомендуется назначать наиболее
популярные шрифты. При размещении на странице <a href="/chill/skachat-konspekt-uroka-kodirovanie-tekstovoi-informacii-razrabotka/">текстовой информации</a> лучше
вообще не назначать название шрифта, полагаясь на <a href="/windows/smartfon-zaryazhen-polnostyu-i-ne-vklyuchaetsya-kak-byt-esli/">стандартные настройки</a>
браузера. Но тогда при разработке страницы следует также использовать
стандартные настройки браузера, чтобы синхронизировать свое восприятие
текста с возможным восприятием пользователя. В конце концов, вы создаете
страницу не для себя, а для читателей.<br>
С помощью атрибута COLOR в теге <b><FONT>
</b>
можно задать цвет шрифта:</p><p><i><FONT СОLOR="цвет">
</i></p><p>Аргумент атрибута COLOR представляет собой шестнадцатеричную запись кода
цвета (красной, зеленой и синей составляющей, иначе говоря, RGB-составляющей).
Следующая программа демонстрирует управление шрифтом:</p><p><i> <HTML><br>
<НЕАD><ТIТLЕ>Установка шрифтов</ТIТLE/НЕАD><br>
<BODY><br>
<Р>Шрифт Aria <FONT FАСЕ="АRIАL">АБВГДЕЖЗИК </FONT><br>
<Р>Шрифт Courier<FONT FАСЕ="СOURIER">АБВГДЕЖЗИК
</FONT> <br>
<Р>Шрифт SYMBOL<FONT FACE="SYMBOL" SIZE=7 СОLОR="RЕD">АБВГДЕЖЗИК
<br>
</FONT><br>
</BODY> <br>
</HTML>
</i></p><p><img src='https://i2.wp.com/tepka.ru/html4c/831.gif' width="100%" loading=lazy></p><p><i>Рис. 651. Использование
различных шрифтов
</i></p><p>Заметим, что в теге <b><FONT>
</b> можно использовать
несколько или все его возможные атрибуты. Например:</p><p><i><FONT FACE="Arial" SIZE=5 COLOR="BLUE">
</i></p><p>В математических формулах, а также для подстрочных замечаний часто применяются
индексы, которые отличаются от основного текста положением (чуть выше
или ниже) и размером. Для этой цели служат теги <b><SUP>
</b>и <b><SUB>
</b> соответственно для верхних
и нижних индексов.</p><p><i><HTML><br>
<НЕАD><Т1ТLЕ>Индексы</ТIТLЕ> /НЕАD><br>
<BODY><br>
<НЗ>Пример использования индексов<br>
<Р> (5+x<SUP>2</SUP>)<SUP>x+3</SUP><br>
<P>a<SUB>1</SUB> + a<SUB>2</SUB>+ a<SUB>3</SUB><br>
<Р>Подстрочные примечания <SUP>2</SUP><br>
</H3><br>
</BODY><br>
</HTML>
</i></p><p><img src='https://i1.wp.com/tepka.ru/html4c/832.gif' width="100%" loading=lazy></p><p><i>Рис. 832. Использование верхних и нижних
индексов
</i></p><p>Кроме рассмотренных выше, имеются <a href="/microsoft-excel/vvod-i-redaktirovanie-teksta-sohranenie-smart-tegov-v/">дополнительные теги</a> форматирования
текстов:</p><ul><li><b><ADDRES>
</b>- выделение адресов электронной
почты, <a href="/windows/otkryt-akkaunt-gmail-com-kak-sozdat-akkaunt-google-i-pochtovyi-yashchik-gmail/">почтовых адресов</a> и<br>
номеров телефонов;</li><li><b><СIТЕ>
</b> - выделение цитат;</li><li><b><CODE>, <SAMP>
</b> - запись текстов
программ, символьных констант;</li><li><b><KBD>
</b> - ввод текстов с клавиатуры.</li>
</ul><p>В последних трех стилях используется моноширинный шрифт (обычно Courier).
Например, буквы I и Ж моноширинного шрифта занимают одинаковое место.
Использование моноширинных шрифтов обусловлено простой возможностью выравнивания
текста с помощью символов «пробел».<br>
Отметим еще один момент. В теги управления шрифтом, как и в теги логических
стилей, можно вставлять атрибут<b> ТITLE= "строка"
</b>,
что позволяет привязать к тексту внутри этого тега всплывающую подсказку.
Аргументом атрибута <b>TITLE
</b> является строка
подсказки. При остановке указателя мыши на выделенном слове или фразе
около указателя появится подсказка. С помощью этого приема можно расшифровывать
аббревиатуры, давать дополнительные пояснения и рекомендации пользователю.</p><table width="635" border="0"><tr><td width="200">
</td><td>
</td><td width="200">
</td>
</tr></table>
<h3>Шрифт на странице</h3> <p>Тег размера шрифта в html – это разве что sub, sup и strong, которые так или иначе изменяют размер букв. Но html в этом плане дает очень маленькие возможности. Был, конечно, <a href="/theory-reviews/zadaem-cvet-teksta-atribut-color-tega-font-tegi-font-face-size-i-color-blockquote-i-pre/">тег font</a>, но сегодня он давно уже устарел. Если вам действительно интересно, как более гибко изменять размер шрифта, то нужно обратиться к возможностям CSS.</p> <h3>CSS свойство font-size</h3> <p>В CSS можно задать любую величину текста и это можно сделать не только в пикселях, но и в других единицах измерения. Чаще всего ее задают все-таки в пикселях, но можно и по-другому. Например, в процентах. За 100% берется шрифт у родительского элемента.</p> <p>Например, если мы задаем величину текста в процентах какому-то абзацу и он лежит в теге body, то для него 100% будет равно размеру, заданному для body. Соответственно, если у тега задан шрифт в 12 пикселей, то чтобы задать абзацу размер в 24 пикселя, нужно написать так:</p> <p>p{font-size: 200%}</p> <table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show">
</td> <td class="crayon-code"><p>p
{
font
-
size
:
200
%
}
</p>
</td>
</tr></table><p><img src='https://i2.wp.com/webformyself.com/wp-content/uploads/2016/63/1.jpg' align="center" width="100%" loading=lazy></p> <p>Это если использовать проценты. Еще одна популярная относительная величина – em или высота шрифта у родительского элемента. Прописывание относительных величин лучше тем, что при изменении размера текста все поменяется пропорционально и будет хорошо отображаться.</p> <p>Также регулировать величину можно с помощью ключевых слов larger и smaller, которые устанавливают соответственно больший или <a href="/windows/stoit-li-perehodit-na-aifon-8-nado-li-menyat-iphone-plus-na-iphone-x-realnyi-otzyv/">меньший размер</a> текста, чем у родительского элемента.</p> <p>selector{font-size: larger}</p> <table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show">
</td> <td class="crayon-code"><p>selector
{
font
-
size
:
larger
}
</p>
</td>
</tr></table><p>Текст в элементе с нужным селектором станет больше, чем у родителя. Html теги размера существуют, но использовать их все же не рекомендуется. Это теги big и small. Заключение текста в них позволяет немного увеличить или уменьшить размер букв по сравнению с родительским элементом. Но сегодня лучше использовать css, если вам надо задать величину.</p> <p><img src='https://i1.wp.com/webformyself.com/wp-content/uploads/2016/63/2.jpg' align="center" height="87" width="361" loading=lazy></p> <h3>Размер основных элементов на веб-странице</h3> <p>В отношении задания размеров для остальных элементов все также: нужно использовать для этой цели css, а не html. Вообще в теге можно задать такие атрибуты, как width и height, но делать это неудобно. А самое главное – это не соответствует стандартам, которые определяют, что внешний вид и структуру нужно отделять друг от друга, вынося в <a href="/browsing-the-internet/razbit-pdf-na-otdelnye-faily-onlain-samyi-bystryi-sposob-razbit-pdf-faily/">отдельные файлы</a>.</p> <p>По этой причине для определения ширины и высоты элемента принято использовать css-свойства width и height.</p> <p><img src='/pc-and-health/kakie-tegi-zadayut-razmer-spravochnik-tegov-html-shrift-na-stranice/' loading=lazy> <!-- так не нужно прописывать ширину и высоту для элемента -->
img{
width: 50px;
height: 50px
}
<!-- А так – нужно --></p> <table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show">
</td> <td class="crayon-code"><p><
img
width
=
"50"
height
=
"50"
>
<
!
--
такненужнопрописыватьширинуивысотудляэлемента--
>
</p> <p>HTML лишь расставляет блоки на веб-странице, но сам формат этого языка не позволяет ему выступать <a href="/pc-and-health/prilozhenie-visor-vysor-udobnyi-instrument-dlya-testirovaniya-plyusy-i-minusy/">удобным инструментом</a> для задания величин. Чтобы как-то визуально повлиять на блок, нужно обрамлять его определенными открывающими и закрывающими тегами, что далеко не так удобно.</p> <p>Для задания <a href="/browsing-the-internet/nastroika-kamery-na-samsung-a5-obzor-smartfona-samsung-galaxy-a5-2016/">внешнего вида</a> элементов сегодня нужно использовать css-правила, потому что именно они для этого предназначены. На сегодня все, а вы не забывайте подписаться на обновления блога, чтобы иметь под рукой много полезных материалов по сайтостроению.</p> </td></tr></table>
483
<br>
Чтобы сайт выглядел согласно вашему дизайну, придется менять размер текста или размер изображений HTML
. Чтобы сделать это, вы, вероятно, будете искать тег «<span>size
</span>», но вскоре поймете, что в гипертексте такого нет.
<p>Чтобы задать размеры шрифтов, изображений и других элементов следует использовать CSS
. Любые визуальные изменения текста или других элементов должны выполняться с помощью каскадных таблиц стилей! HTML
предназначен только для структуры.</p>
<p>Единственный способ изменять размеры шрифта - это устаревший тег <font>, который имеет атрибут size
. Имейте в виду, что этот тег отсутствует в <a href="/chill/windows-10-kakie-problemy-vosstanovlenie-tekushchei-versii-sistemy-otkazy-posle/">текущих версиях</a> HTML
, и в будущем может перестать поддерживаться браузерами! Изменять размеры элементов и стили сайта следует с помощью CSS
.</p>
<h2>Размеры шрифтов</h2>
<p>CSS
позволяет не только менять размер текста, но и более тонко настраивать типографику сайта, изменять размер изображений HTML
. Изменениям поддаются размер шрифта, его цвет, регистр, начертание, межстрочный интервал и другие характеристики. Тег <font> может задать только размер и значение, умножающее размер по умолчанию, который у <a href="/adobe-photoshop/poisk-po-umolchaniyu-v-raznyh-brauzerah-kak-vosstanovit-poiskovuyu/">разных браузеров</a> отличается.</p>
<p>Чтобы получить абзац со шрифтом 12pt
, нужно задать ему свойство font-size
:</p>
<p>h3 {
font-size: 24px;
}</p>
<p>Это изменит размер заголовков третьего уровня до 24
пикселей. Можно добавить это свойство к внешней таблице стилей, и это значение будут использовать все заголовки < h3>.</p>
<p>Чтобы применить к тексту дополнительные стили типографики, добавьте следующие CSS-правила
:</p>
<p>h3 {
font-size:24px;
color: #000;
font-weight:normal;
}</p>
<p>Это не только установит размер шрифта для заголовков третьего уровня, но и сделает текст черным (<span>о чем говорит hex-код #000
</span>), а также установит начертание в значение «<span>normal
</span>». По умолчанию, браузеры отображают заголовки h1-h6
в виде полужирного текста. Этот стиль переопределит значение по умолчанию и сделает шрифт нежирным.</p>
<h3>Размеры изображений</h3>
<p>Не всегда удается задать нужный размер изображений, так как браузер может делать это автоматически. Браузеры не всегда хорошо справляются с этой задачей, отчего сильно страдает качество отображения картинок. Поэтому перед тем, как задать размер изображения в HTML
, лучше использовать <a href="/theory-reviews/gde-skachat-gimp-gimp-mnogofunkcionalnyi-graficheskii-redaktor/">графические редакторы</a>. А затем прописывать их фактический размер в разметке веб-страницы.</p>
<p>В отличие от шрифтов для определения размера изображений можно использовать как HTML
, так и CSS
. Используя HTML
, размер картинок можно задать только в пикселях. В CSS
размеры можно задавать в других величина. Например, в дюймах, сантиметрах и процентах. Если вы хотите, чтобы сайт был с адаптивными картинками, лучше применять процентное значение.</p>
<p>Чтобы задать изображению размер в HTML
, используйте тег <img> с атрибутами height
и width
.</p>
<p>Например, изображение должно иметь размер 400 на 400
пикселей:</p>
<p>height="400" width="400" alt="image" /></p>
<p>Чтобы задать размеры изображения в CSS
, используйте свойства height
и width
. Вот то же изображение, для определения размера которого используется CSS
:</p>
<p>style="height:400px; width:400px;" alt="image" /></p>
<h3>Размеры основных блоков на странице</h3>
<p>Чаще всего для основных блоков на странице задается ширина. Сначала нужно определиться с типом дизайна: статичный или адаптивный. Нужно решить, хотите ли вы задать ширину в абсолютных единицах измерения - пикселях, дюймах, точках? Или же размер блоков должен быть адаптивным, и для определения размеров должны использоваться em или проценты? Чтобы задать размеры основных блоков, как и в случае с HTML
изображениями по размеру окна, нужно применять CSS-свойства height
и width
.</p>
<script type="text/javascript">
<!--
var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})()
//-->
</script><br>
<br>
<script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+
escape(document.referrer)+((typeof(screen)=="undefined")?"":
";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?
screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+
";"+Math.random()+
"border='0' width='1' height='1' loading=lazy>");</script>
</div>
</div>
</div>
</div>
</div>
<div class="right-rail-pseudo"></div>
<aside class="right-rail collection-sidebar">
</aside>
</div>
<div id="wide-collection-items-container"></div>
<div class="module-more-news-center">
</div>
<div class="collection-footer grid">
<aside class="right-rail collection-sidebar"></aside>
<div class="collection-footer-container">
<footer class="content-foot">
<aside class="module-social-sharing">
</aside>
<div class="content-topics">
</div>
</footer>
</div>
</div>
</article>
</main>
<footer class="footer">
<nav>
<ul class="nav">
<li>© Как быть на ты со своим ПК 2024</li>
<li><a class="tracked-offpage" data-track-category="Footer" data-track-action="Go to Privacy Policy" href="">Политика конфиденциальности</a></li>
<li><a class="tracked-offpage" data-track-category="Footer" data-track-action="Go to Contact Us" href="/feedback/">Контакты</a></li>
<li><a class="tracked-offpage" data-track-category="Footer" data-track-action="Go to Media Kit" href="">Реклама на сайте</a></li>
<li><a class="tracked-offpage" data-track-category="Footer" data-track-action="Go to Sitemap" href="/sitemap.xml">Карта сайта</a></li>
</ul>
</nav>
</footer>
<div id="lightbox" class="lightbox">
<div class="lightbox-close"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script>
window.jQuery || document.write(' <
script src = "/assets/jquery.min.js" > < \/script>')
</script>
<script>
$(document).ready(function() {
var a = $(window),
b = $("body"),
c = $("#header-nav-more"),
e = c.children("a"),
f = $("#header-hamburger");
$("html").hasClass("no-touch") && (c.on("mouseenter", function() {
c.hasClass("active-hover") || c.addClass("active-hover")
}), c.on("mouseleave", function() {
c.removeClass("active-hover")
})), e.on("click", function(a) {
c.hasClass("active-hover") ? c.removeClass("active-hover") : c.addClass("active-hover"), a.preventDefault()
}), f.on("click", function() {
var a = $(this);
a.hasClass("active-hamburger") && c.removeClass("active-hover"), a.toggleClass("active-hamburger"), b.toggleClass("active-nav")
}), a.on("scroll", d(function() {
a.scrollTop() > 0 ? b.addClass("active-scroll") : b.removeClass("active-scroll")
}, 100))
});
</script>
</body>
</html><script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script> 