Что такое HMTL, стили, и как ими пользоваться в WordPress, с расшифровкой значений

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

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

Что такое HTML

HTML — это аббревиатура HyperText Markup Language — язык гипертекстовой разметки.

Давайте разберем каждое слово, чтобы было понятней.

HyperText — «гипертекст».

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

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

Приставка Гипер — означает «больше чем». В нашем случае «Больше чем, просто линейный текст».

MarkUp — «разметка».

Само слово markup использовалось в редакторской деятельности в США еще до появления Интернет. Была даже отдельная специальность высококвалифицированного редактора, даже профессия называлась — «Markup man». Его задачей было на полях текста написать указания для печати: шрифты, размеры шрифтов, стили для каждой части текста. После этого текст печатали в соответствии с этими указаниями.

В последствии это слово перекачивало в Интернет. Но с тем же значением. В Интернет создатель сайта является тем самым Markup man а браузер отображает текст в соответствии с указаниями.

Language  — «язык».

В Языке Гипертекстовой Разметки используются специальные знаки — теги. Теги являются средствами языка HTML как слова в языках народов мира. В HTML как и в любом языке есть правила написания и использования.

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

Какие бывают теги HTML

Давайте рассмотрим пример.

Вы хотите, чтобы на странице сайта текст отображался вот так:

Первая строчка заголовок
Первый абзац с наклонным текстом
Второй абзац с выделенным текстом жирным

Как сказать браузеру, чтобы он отобразил текст именно так, как написано?

Необходимо все эти части текста, как бы одеть в теги HTML, и таким образом сказать браузеру: вот этот кусок текста нужно подчеркнуть, этот выделить, этот сделать заголовком, здесь сделать перенос строки внутри абзаца, а этот сделать абзацем.

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

Немного справки о тегах

• Теги бывают парные и одинарные.
• Все теги заключены в угловые скобки.
• Парные теги открывают и закрывают часть теста. Закрывающий тег отличается от открывающего косой чертом после угловой скобкой.
• Одинарные теги, как правило включают косую черту перед угловой скобкой.
• Все теги, это сокращенные английские слова, поэтому если Вы знаете немного английских выучить их будет очень просто.

А теперь поподробнее разберем пример:

Заголовок

Первая фраза «Заголовок текста», является заголовком . Тег h — от слова heading — заголовок. Всего в HTML 6 размеров заголовков. Самый большой заголовок <h1> самый маленький <h6>.  Тег заголовка парный.

В нашем примере я использовала заголовок h2. Чтобы браузер понял, что я хочу сделать фразу «Заголовок текста» заголовком, я эту фразу заключила в тег <h2>. <h2> — показывает начало заголовка, </h2> — показывает завершение.

Первый абзац, наклон и перенос строки

Если мы хотим сделать абзац, то используем тег <p>. <p> от слова paragraph. Тег парный. Открывающий <p> показывает начало абзаца, закрывающий </p> конец.

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

У нас в примере есть наклон и выделение жирным

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

Наклон — <em> от слова emphasis — подчеркивать. Тег парный.

Выделить жирным <b> от слова bold — жирный (относится к тексту).  Тег парный.

И наконец перенос строки тег <br> от слова break — разрыв. Тег одинарный. Ставится там, где Вы хотите начать новую строку.

Что такое стили и как их использовать

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

Реализуются стили 3-мя способами:

1. внешний — в отдельном файле с расширением css
2. внутренний — в зоне head в виде вставки стилей
3. внутри тегов

Внешний и внутренний стили создаются с помощью классов (class) и идентификаторов (id). В HTML Вы можете видеть их работу в виде вот таких вставок: <p class=»название-класса»> или <p id=»название-id»>. Сами стили прописаны в отдельном файле CSS или в зоне head, а в HTML указаны только название класса (начинается с точки .название-класса) или ID (начинается с решетки #название-id) для нужного элемента.

Сегодня мы подробно не будет разбирать первых 2 способа создания стилей. А вот на третьем варианте остановимся поподробнее.

Разберем пример:

Вот так, этот пример выглядит в HTML

Справка о стилях:

1. Стили, как Вы заметили вписываются внутрь тега перед закрывающей угловой скобкой.
2. Оформляется стиль так: style=»»
3. Внутри кавычек прописываем нужные стили
4. Название стиля и значение разделяются двоеточием
5. Стили со значениями разделяются точкой с запятой
6. Название стилей, так же как и теги произошли от английских слов. В большинстве случаев даже не сокращенные.

Давайте разберем код по порядку.

1. Стиль для всего абзаца <p>:

font-size: 20px —
font переводится как Шрифт, size — Размер. Далее идет двоеточие и значение 20 пикселей. Итак получается размер шрифта 20px

font-family: Arial
font — шрифт, family — семья. Далее двоеточие и значение Arial. Получается шрифт Arial

2. Стиль в теге span

Внутри абзаца у нас строчка с другим стилем. Для этого я использовала тег span. Span не имеет никакого значения. Просто запомните: если Вы хотите внутри абзаца или блока придать тексту/слову/фразе какой-то особый стиль, используйте тег span.

color: #ff0000
color — цвет. Далее значение цвета после двоеточия: #ff0000 — код красного цвета

text-decoration: underline
text — текст, decoration — оформление. Значение underline — подчеркнуть.

У некоторых стилей есть несколько значений. Так например у стиля text-decoration есть 4 значения:  line-through — зачеркнуть, underline — подчеркнуть, overline — линия над текстом, none — нет украшения

Чем отличается тег p, span, div

Все 3 тега блочные.

<p> — это параграф. Текст заключенный в этот тег отображается в виде параграфа с отступами перед параграфом и после него.

<span> — выделяем текст в этот тег если хотим придать тексту особый стиль отличный от параграфа, но при этом оставить этот текст в самом параграфе.

<div> — похож на параграф, только без отступов сверху и снизу. Также <div>  удобно использовать для отображения блоков вертикально, горизонтально, с наложение друг на друга. Все это делается с помощью стилей.

Тег изображения <img>

Еще про один тег расскажу, про тег картинки — <img>.

Чтобы отобразить в браузере картинку, браузер должен знать, что это картинка. Для этого мы использует тег <img>. Это одинарный тег. Тег IMG  происходит от слова IMAGE — изображение.

У тега IMG  есть обязательный атрибут SRC. SRC — аббревиатура слова source — источник (адрес к картинке).

Работают они вместе так:

<img src=»https://anfisabreus.ru/image.jpg»>

img — говорит браузеру, что это картинка
src — говорит, где эта картинка лежит

Правила использования тега <img>:

• После <img> пробел
• После src знак равно
• Адрес картинки заключается в двойные кавычки

Тег ссылки <a>

И последний тег на сегодня, ссылка — <a>

Тег ссылки <a> — от слова anchor — якорь. Тег <a> двойной.

У тега <a> есть обязательный атрибут href. HREF — это сокращение 2х слов — Hypertext Reference — Гипертекстовая сноска (отсылка, рекомендация).

Вместе они работают так:

<a href=»https://anfisabreus.ru»>Ссылка на мой сайт</a>

<a —  говорит браузеру, что текст/картинка заключенный в этот тег будет являться ссылкой
href  — говорит браузеру адрес ссылки

Правила использования тега <a>:

• После <a пробел
• После href знак равно
• Адрес ссылки заключается в двойные кавычки
• Сам текст ссылки пишется между открывающим и закрывающим тегами <a>

Основные теги HTML и стили

Конечно в примере я показала не все теги. Их гораздо больше, но и не так много на самом деле. Всего в HTML 116 тегов :). Главное нужно усвоить принцип их использования. В WordPress все уже максимально упрощено. При работе с блогом Вам не нужно писать теги HTML. WordPress  все сделает за Вас.

Но иногда, как я уже писала выше, может появится необходимость что-то подправить, или редактор даст сбой и нужно под редактировать текст в режиме «Текст» вручную.  Или Вы захотите поставить баннер или любой другой код в текстовый виджет. Вот тогда эти знания Вам пригодятся. Уметь читать и понимать HTML поможет Вам находить ошибки или не допускать их. Такие например как незакрытый парный тег, может привести к искажению текста.

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

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

P.S. Кстати, сегодня продлили визу на проживание в Таиланде еще на три месяца. В Таиланде можно жить целый год по студенческой визе для изучения тайского языка.  Обучение стоит  750 долларов на год. Для обучения все возрасты хороши…