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

  Автор:
  9549
Что скрыто за аббревиатурой html-tag-css

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

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

Что такое HTML

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

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

HyperText – “гипертекст”.

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

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

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

MarkUp – “разметка”.

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

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

Language  – “язык”.

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

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

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

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

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

text5

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

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

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

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

text6

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

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

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

Заголовок

Первая фраза “Заголовок текста”, является заголовком . Тег 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 способа создания стилей. А вот на третьем варианте остановимся поподробнее.

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

text9

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

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

  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=”http://anfisabreus.ru/image.jpg”>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

htmlstyle2styleattr

 

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

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

 

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

   9 голосов
Средняя оценка: 5 из 5
Вы находите данную статью полезной или интересной? Поделитесь ею, пожалуйста, с другими - просто нажмите на кнопки ниже:

Анфиса Бреус

Анфиса Бреус - специалист по Wordpress с 2007 года. Создатель и разработчик многофункционального шаблона "AB-Inspiration" для самостоятельного создания и профессиональной настройки сайтов разного назначения на WordPress. Основатель клуба "Мастер WordPress" и автор курсов по создании и применению сайтов на WordPress. Фрилансер. Предприниматель. Спикер.

Как создать сайт онлайн-школы на WordPress с интернет - магазином, профессиональным блогом и лендингами
Оставьте свой комментарий:
14 комментариев
  1. Зинаида Давыдова

    Анфиса, спасибо за такой ценный материал. Всё просто и понятно, отличная статья. Вы лучший мастер сайтостроения.

  2. Татьяна

    Всех приветствую! Спасибо за объяснения, Анфиса! У меня такой вопрос: “Почему в последнем шаблоне, выделяя ключевую фразу в абзаце – h2, выделяется весь абзац?”. Мне иногда не хочется перегружать текст, выделяя жирным, а вод для ключевого слова h очень подходит. Но приходится делать жирным, а это не всегда хорошо.

    • Татьяна, это скорее вопрос к WordPress, шаблон здесь не при чем. Просто когда пишите текст для заголовка, сделайте перенос строки (клавиша Enter). Затем выделите текст будущего заголовка (он должен быть на отдельной строчке!!!!) и выберите заголовок в редакторе.

  3. Анфиса спасибо, действительно иногда необходимо откорректировать текст внучную. А еще я узнала как указать ссылку в тексте =)

  4. Спасибо, Анфиса за информацию! Все понятно, потому что отлично все объясняете!

  5. Анфиса, спасибо. Статью прочитала дважды. Кое что уже знала. Повторила с удовольствием. Объясняете хорошо. Я Вам писала о картинках в “Похожих записях”.
    Миниатюры я вставила, картинки появились, хотя с facebook не всё понятно.
    Может быть здесь всё это не совсем к месту, но всё же напишу ещё об одной проблеме
    У меня почему получается, что я сама себе пишу комментарии, а этого не делаю.
    Не пойму от куда они берутся, а те которые нормальные и я их пропускаю не печатаются. Посмотрите, пожалуйста, в чём дело. Спасибо

    • Лариса, по поводу facebook, я писала в статье – “Что такое миниатюра записи и зачем она нужна“. Если кратка, то facebook сканирует статью как только она публикуется. В дальнейшем facebook использует копию для отправки в сеть. Если Вы вставили миниатюру уже после публикации, то нужно попросить facebook еще раз просканировать статью. Как это сделать я подробно описала в статье здесь – http://anfisabreus.ru/2014/11/chto-takoe-miniatyura-zapisi-i-zachem-ona-nuzhna/
      По поводу комментариев. Скорее всего у Вас поставлена галочка “Разрешить оповещения с других блогов (уведомления и обратные ссылки)”.
      1. зайдите в раздел Настройки – Обсуждение и уберите галочку “Разрешить оповещения с других блогов (уведомления и обратные ссылки)”
      2. зайдите в каждую статью и под редактором уберите галочку “Разрешить обратные ссылки и уведомления.” в блоке “Обсуждения”. Если Вы не видите этого блока под редактором, нажмите на кнопку “Настройки экрана” в правом верхнем углу в редакторе статьи – и поставьте галочку “Обсуждения”. После этого под редактором каждой статьи появится блок “Обсуждения”. Уберите галочку “Разрешить обратные ссылки и уведомления.”

  6. Ольга Сухорутченко

    Уже само понимание, что HTML – “Больше чем, просто линейный текст” помогает воспринимать – да это на так страшно, как большинство ( и я в том числе) привыкли считать. :P
    Анфиса, у меня идея: напишите, плиз, короткий курс ” HTML – это просто!”
    ОН пойдет на “Ура”, особенно для тех, кто только приступает к изучению. Ведь переучиваться всегда сложнее =-O

  7. Александр

    Есть почти всё что нужно для стилей. С помощью этих тегом можно очень изменить свой сайт.

  8. Спасибо, Анфиса! Вы мне так помогли! Я изменила шрифт и цвет шрифта на своей форме подписки! Осталось только узнать как правильно обозначить бесцветный фон, например, окна для вставки имени и фамилии. Что прописать после background: я не знаю. Подскажите, пожалуйста.

  9. реклама в интернете

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

    У кого-то еще появляются подобные проблемы?
    Кто-то может подсказать решение проблемы?

    Огромное спасибо !!!

на Блоге
в Фейсбук
в Вконтакте