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

  Автор:
  3656
Что скрыто за аббревиатурой 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, с расшифровкой значений.

   8 голосов
Средняя оценка: 5 из 5
Вы находите данную статью полезной или интересной? Поделитесь ею, пожалуйста, с другими - просто нажмите на кнопки ниже:
Самые Важные Оповещения Блога + Четкий Комплект Ценных Подарков ДЛЯ БЛОГЕРОВ И ФРИЛАНСЕРОВ
Комментарии на блоге
13 комментариев
  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: я не знаю. Подскажите, пожалуйста.

Комментарии в Фейсбук
Комментарии в Вконтакте