Все теги ставим в блог обычным copy/past в режиме HTML (не «Визуальный редактор»!)
СИМВОЛЫ
html код
→ неразрывный пробел
<br> → с новой строки
<hr> → линия-разделитель системная ↓
✓ Основные спец. символы
|
Кавычка парная |
« |
" |
|
Кавычка левая |
« |
« |
|
Кавычка правая |
» |
» |
|
Ударение (после буквы) |
́ |
́ |
|
Узкое тире |
– |
– |
|
Широкое тире |
— |
— |
|
Копирайт |
© |
© |
|
Приблизительно |
≈ |
≈ |
|
Градус |
° |
° |
|
Бесконечность |
∞ |
∞ |
|
Маркер списка |
• |
• |
|
Конверт |
✉ |
✉ |
|
Галка |
✓ |
✓ |
|
Стрелка |
➣ |
нет |
ЯКОРЬ
html код
✓ Якорь простой внутри одной страницы
Нужно кликнуть на слово АНКОР и оказаться перед словом СЮДА
ШАГ 1:
задаём слову АНКОР ссылку для якоря (как обычную ссылку, только не URL, а вида → #имя):
<a href=»#yakor«>АНКОР</a>
ШАГ 2:
перед словом СЮДА пишем якорь:
<a id=»yakor«>СЮДА перейдем, нажав на АНКОР</a>
✓ Якорь перед заголовком внутри одной страницы
Нужно кликнуть на слово АНКОР и оказаться перед словом СЮДА.
Слово СЮДА является частью заголовка <h2> СЮДА заголовок 2
наш заголовок:
— в две строки;
— по центру;
— цвет текста — #5d387c;
ШАГ 1:
задаём слову АНКОР ссылку для якоря (как обычную ссылку, только не URL, а вида → #имя):
<a href=»#yakor«>АНКОР</a>
ШАГ 2:
перед словом СЮДА пишем якорь:
<h2 style=»text-align: center;»><a id=»yakor«></a><span style=»color: #5d387c;»>СЮДА <br />заголовок 2</span></h2>
✓ Размер текста
Пиксель (px) – это единица измерения, определяет количество точек (всё, что мы видим на экранах, состоит из тысячи точек, которые окрашиваясь в разные цвета, складываются в изображение, в т.ч. в текст на нашем мониторе)
Размер этого текста 18 px
Размер этого текста 9 px
Текст поменьше
Текст побольше
✓ Выравнивание текста
по левому краю — меняем right на left
(слева ровняет по умолчанию)
отступ — используют для цитат
(оформление зависит от настроек сайта)
фиксатор текста — отображает текст так, как расположили его в поле поста
пишем
текст
лесенкой
ССЫЛКИ
html код
→ URL (Uniform Resource Locator) — уникальный адрес ресурса в интернете. В просторечии мы говорим «ссылка», не путать с ссылкой в Сибирь.
→ Оформление ссылки заданы шаблонами сайта, изменить отдельно взятую ссылку можно с помощью кода html для текста.
✓ откроются в текущем окне
не забудьте вернуться, уйдя по ссылкам-примерам 😉
Как вставить простую URL ссылку
визуально: https://shkola21vek.ru
Как сделать, чтобы ссылкой был текст
визуально: на главную
Как сделать, чтобы ссылкой была картинка
✓ откроются в новом окне
Как вставить простую ссылку, чтобы она открывалась в новом окне
визуально: https://shkola21vek.ru
Как вставить текстовую ссылку, чтобы она открывалась в новом окне
визуально: на главную
Как вставить ссылку-картинку, чтобы она открывалась в новом окне
✓ кнопка-ссылка
Кнопка-ссылка простая системная
иногда оформление задано шаблоном сайта
забрать эту кнопку себе:
для своей кнопки в html коде замените URL
КАРТИНКИ
html код
Уникальный URL выдает картинке сайт, на конце ссылки всегда формат картинки. Например, мой мамонт прописан по адресу https://shkola21vek.ru/wp-content/uploads/2025/11/irina-se-slonik-back.png , картинка имеет формат .png
Если берёте картинку со стороннего сайта (соц.сети, фотохостинги…) – помните, что она может в любой момент потерять URL (например, сайт прекратит существование), и ваша картинка будет выглядеть вот так:
✓ базовый код html для изображений;
добавляем картинку как есть
✓ задать размер изображений
ВАЖНО: принудительно заданные ширина width и высота height могут исказить картинку, советую менять только width, браузер автоматически подберёт высоту, сохранив пропорции. В моем примере мамонтовый слоник уменьшен до width=«67»
✓ основные html атрибуты изображений
alt → описание картинки
title → всплывающая подсказка при наведении курсора
align → положение картинки в тексте
- left — выравнивание по левому краю
- right — выравнивание по правому краю
- top — выравнивание по верхнему краю
- middle — выравнивание по середине
- bottom — выравнивание по нижнему краю
(это значение по умолчанию)
✓ нужные параметры можно объединить в один html код картинки