›

Привет, незнакомец!

Похоже, вы здесь новенький. Чтобы принять участие, нажмите одну из кнопок ниже!

Войти Начать общаться

В социальных сетях

Разделы

Поблагодарить

Теперь есть еще филиал форума в Телеграме - чат и канал "FAQ по реальности". Если вам удобнее Телеграм - можно общаться там тоже.

Шпаргалка основных HTML-тегов.

ValchonokValchonok
отредактировано Март 2018 Раздел: Наука и технологии

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

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

От себя еще добавлю самые ходовые сочетания клавиш, используемые при форматировании текста, ежели кто их еще не знает:

Ctrl+Z - отмена последнего действия, работает и в местом редакторе, ежели вы вдруг чего-то стерли ненароком (!)
Ctrl+C - копировать выделенный текст
Ctrl+V - вставить скопированный\вырезанный текст
Ctrl+X - вырезать выделенный текст
Ctrl+I - выбор курсивного или обычного начертания для выделенного текста
Ctrl+B - выбор полужирного или обычного начертания для выделенного текста
Ctrl+S - зачеркнутый текст
Ctrl+L - вставка ссылки
Их значительно больше, но эти, на мой взгляд, жизненно необходимые.

Итак, приступим:

Основная структура документа.

Первое, с чего мы начнем, это основная структура (разметка) HTML-документа. Как правило, любая страница сайта включает в себя следующие HTML-теги.

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="description" content="Краткое описание страницы до 160 символов">
<meta name="keywords" content="Несколько ключевых слов">
</head>
<body>
 
</body>
</html>

Первой строчкой идет указание типа документа. Содержимое страницы заключается между тегами .

Структура любого документа содержит обычно две основные части:

1
2
<head></head>
<body></body>

Содержимое части head не видно пользователю в браузере (за исключением, пожалуй, тега title). Вся видимая часть страницы формируется структурой body.

Тег head обычно содержит служебную информацию, а также подключаемые стили, шрифты, файлы скриптов и т.п.

Тег <title> — включает в себя заголовок страницы. Эта информация видна во вкладке браузера, а также отображается поисковиками в результатах поиска.

Также в <head> помещаются мета-теги:

1
2
<meta name="description" content="Краткое описание страницы до 160 символов">
<meta name="keywords" content="Несколько ключевых слов">

Мета-теги «description» и «keywords» важны для поисковой оптимизации сайта.

В теги <body></body> помещается html-код, который формирует отображение страницы. По сути, все теги, рассмотренные ниже, помещаются именно в эту область.

Теги заголовков h1, h2, h3 …

В эти теги на странице заключают заголовки и подзаголовки. Причем наиболее важный заголовок обрамлен тегом H1. Чем больше цифра, тем, соответственно, менее значим заголовок. По сути, он является подзаголовком.

Теги заголовков играют немаловажную роль во внутренней оптимизации сайта, поэтому их проверка, как правило, всегда входит в seo-аудит любого проекта.

Примеры использования:

1
2
<h1>Заголовок первого уровня</h1>
<h2>Заголовок второго уровня уровня</h2>

Кстати, в разметке нет необходимости после тегов заголовка вставлять тег переноса на новую строку – это делается по умолчанию.

Тег переноса на новую строку <br>.

<br> равносилен нажатию кнопки Enter, когда мы печатаем в текстовом редакторе. Он осуществляет переход на новую строку.

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

За отображение картинок на странице отвечает тег <img>, однако, просто поместить его на нашу страницу недостаточно. Мы должны задать его «атрибуты» (свойства или параметры):

src (адрес изображения на сервере),

alt (альтернативный текст, который будет отображаться вместо картинки, если показ изображений отключен),

title (заголовок изображения, название),

width (ширина картинки),

height (высота картинки).

Из всех атрибутов обязательным является только src:

1
<img src='my_picture.jpg'>

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

Стоит отметить, что хотя атрибуты alt и title не являются обязательными, рекомендуется их указывать и заполнять для улучшения ранжирования ваших изображений в поиске по картинкам.

1
<img src='my_picture.jpg' widht='100' height='200' alt='фотография кота' title='мой кот'>

Теги абзаца текста <p></p>.

Если вы разбиваете ваш текст на абзацы, то вам необходимо сделать то же самое и в коде страницы. Делается это с помощью парного тега <p></p>. Текст, который размещен внутри данного тега формирует один абзац.

Пример:

1
2
<p>Это первый абзац</p>
<p>Это второй абзац моего текста</p>

Браузер автоматически добавит перенос на новую строку после заключительного тега </p>

Парный тег <span></span> позволяет выделить внутри текста какую-то часть и задать для нее собственное отображение, используя стили. К примеру,

1
<p>Это <span style="color:red;">второй абзац</span> моего текста</p>

Два слова ‘второй абзац’ будут выделены красным цветом (только эти два слова). Атрибут style позволяет прописывать css-стили для изменения стандартного отображения элементов на странице.

Существуют также теги, которые позволяют видоизменить отображение текста:

1
2
3
<b></b> - жирный шрифт
<strong></strong> -  жирный шрифт
<i></i> - курсив

Горизонтальная линия — <hr>

Непарный тег <hr> позволяет задать горизонтальную линию на странице.

1
<hr width='50%'>

Отображение ссылок. Тег <a>.

Для отображение тегов на странице используется непарный html-тег <a>. Одного тега, конечно же, мало. Мы должны задать для него атрибуты:

href – указывает на адрес, по которому следует переходить

target – позволяет управлять окнами, в которых открываются страницы, указанные в href. К примеру, если мы укажем target=’_blank’, то страница будет открыта в новом окне (вкладке браузера). Если мы ничего не указываем, то по умолчанию страницы будут открываться в том же окне.

rel – дополнительные параметры. Например, rel=’nofollow’ сообщает поисковикам о том, что данную ссылку не учитывать при индексации страницы.

Пример использования:

1
2
3
<a href='new.html'>
<a href='new.html' rel='nofollow'>
<a href='new.html' rel='nofollow' target='_blank'>

Теги для списков.

Для форматирования списков используются теги <ul></ul> и <li></li>. Чтобы было понятно, как их использовать, лучше всего продемонстрировать это на реальном примере:

1
2
3
4
5
<ul>
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
</ul>

Тег <ul>, как видно из примера, является ‘родительским’, то есть он объединяет несколько элементов li. Это позволяет группировать несколько списков на странице.

Блочные элементы <div></div>.

Тег <div> позволяет группировать другие элементы на странице, что позволяет создавать необходимую структуру – разметку страницы. Это очень важный тег, который лежит в основе так называемой ‘блочной’ верстки.

Пример использования на странице:

1
2
3
4
5
6
7
8
<div>
<a href='new_page.html'>
<ul>
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
</ul>
</div>

Источник: http://poleshuk.ru
Справочник HTML тегов

В комментах ниже напишу подробнее про работу с изображениями и текстом.
Матрица Судьбы: индивидуальный анализ вашей матрицы
Базовая расшифровка бодиграфа понятным языком

Комментарии

  • ValchonokValchonok
    отредактировано Март 2018
    Теги форматирования текста:

    <br> устанавливает перевод строки в том месте, где этот тег находится. В отличие от тега абзаца <p>, использование тега <br> не добавляет пустой отступ перед строкой.

    <pre></pre> - Обрамляет предварительно отформатированный текст.

    <h1></h1> -Создает самый большой заголовок.

    <h2></h2>, <h3>, </h3><h4></h4>, <h5>, </h5> - Создает заголовки промежуточных размеров.

    <h6></h6> - Создает самый маленький заголовок.

    <b></b> - Создает жирный текст (нерекомендованный).

    <i></i> - Создает наклонный текст (нерекомендованный).

    <tt></tt> - Создает текст - имитирующий стиль печатной машинки. (нерекомендованный).

    <kbd></kbd> - Создает текст - имитирующий стиль печатной машинки. (рекомендованный).

    <var></var> - Название переменных отображается курсивом.

    <cite></cite> - Выделение цитат курсивом.

    <address></address> - Отображается курсивом в виде отдельного абзаца.

    <em></em> - Наклонный текст (воспринимается поисковыми роботами как выделение).

    <strong></strong> - Жирный текст (воспринимается поисковыми роботами, как особо сильное выделение).

    <font size="?"></font>- Устанавливает размер текста в пределах от 1 до 7.

    <font color="?"></font> - Устанавливает цвет текста, используя значение цвета в виде RRGGBB.

    <!-- --> добавляет комментарий в код документа. Текст комментария не отображается на странице. Синтаксис: <!-- текст -->

    <!--break--> - пустая строка

    <pre> определяет блок предварительно форматированного текста. По умолчанию, любое количество пробелов идущих в коде подряд, на веб-странице показывается как один. Тег позволяет обойти эту особенность и отображать текст как требуется разработчику.

    <abbr> указывает, что последовательность символов является аббревиатурой. С помощью атрибута title дается расшифровка сокращения, что позволяет понимать аббревиатуру тем людям, которые с ней не знакомы.
    Синтаксис: <abbr title="текст">...</abbr>

    Все теги ->
    Матрица Судьбы: индивидуальный анализ вашей матрицы
    Базовая расшифровка бодиграфа понятным языком
  • ValchonokValchonok
    отредактировано Июнь 2015
    Про то, как задать цвет текста, Иванесс достаточно подробно написал здесь.
    Для комплекта добавлю ссылку на полную палитру цветов к примеру

    <font color="#FAEEDD">Текст с бедра испуганной нимфы</font>
    Матрица Судьбы: индивидуальный анализ вашей матрицы
    Базовая расшифровка бодиграфа понятным языком
  • ValchonokValchonok
    Графические элементы:

    <img src="name"> - Добавляет изображение в HTML документ.

    <img src="name" align="?"> - Выравнивает изображение к одной из сторон документа, принимает значения: left, right, center; bottom, top, middle.

    <img src="name" border="?"> - Устанавливает толщину рамки вокруг изображения.

    <img src="name" vspase="?"> - Устанавливает поля сверху и снизу.

    <img src="name" hspase="?"> - Устанавливает поля по бокам.

    <img src="name" alt="?"> - Всплывающая подсказка при наведении на изображение.

    <hr> - Добавляет в HTML документ горизонтальную линию.

    <hr size="?"> - Устанавливает высоту (толщину) линии.

    <hr width="?"> - Устанавливает ширину линии, можно указать ширину в пикселах или процентах.

    <hr noshade> - Создает линию без тени.

    <hr color="?"> - Задает линии определенный цвет. Значение RRGGBB.
    Матрица Судьбы: индивидуальный анализ вашей матрицы
    Базовая расшифровка бодиграфа понятным языком
  • helyzetehelyzete
    ООО, круто, спасибо )))
  • ValchonokValchonok
    отредактировано Июнь 2015
    Впрочем, цвет, толщина и безтенье горизонтальной линии у меня здесь не работает, но оно и не надо, дабы совсем пестроту не разводить и не портить вид страниц.
    Матрица Судьбы: индивидуальный анализ вашей матрицы
    Базовая расшифровка бодиграфа понятным языком
  • ValchonokValchonok
    отредактировано Июнь 2015
    ООО, круто, спасибо )))
    Пожалуйста, рада, если пригодится. image
    Матрица Судьбы: индивидуальный анализ вашей матрицы
    Базовая расшифровка бодиграфа понятным языком
  • ValchonokValchonok
    отредактировано Июнь 2015
    Пока что, не знаю, что еще может понадобиться. image
    Для всяких экзотических прихотей вот большой список тегов.
    Матрица Судьбы: индивидуальный анализ вашей матрицы
    Базовая расшифровка бодиграфа понятным языком
  • ValchonokValchonok
    отредактировано Июнь 2015
    @Ivaness, а имеет смысл использовать nofollow для источников, или это ничего не даст?
    Матрица Судьбы: индивидуальный анализ вашей матрицы
    Базовая расшифровка бодиграфа понятным языком
  • IvanesSIvanesS
    Ого! Круть какая! image Спасибо! image

    nofollow движок добавляет к ссылкам автоматом, поэтому нет смысла.
    Мой Телеграм-канал по Дизайну Человека и Астрологии
  • artart
    Боже-боже. Респект неимоверный, но пока не осилил image
  • IvanesSIvanesS
    Да ты пользуйся по мере надобности, сразу-то это всё не вызубрить, да и зачем. image
    Мой Телеграм-канал по Дизайну Человека и Астрологии
  • IvanesSIvanesS
    Тему прикрепил.
    Мой Телеграм-канал по Дизайну Человека и Астрологии
  • ValchonokValchonok
    Да ты пользуйся по мере надобности, сразу-то это всё не вызубрить, да и зачем. image
    Ага, я как раз сюда все и притащила, чтобы когда понадобится, было под рукой.
    Не должно быть особо сложно, все ж с примерами. Ежели чего конкретно интересует, поясню.
    image
    Матрица Судьбы: индивидуальный анализ вашей матрицы
    Базовая расшифровка бодиграфа понятным языком
  • artart
    а как сделать скрытый текст, но не белым цветом?
  • IvanesSIvanesS
    По-другому - вроде никак, мы это когда-то уже выясняли. image Ты же сам как раз и выяснял. image
    Мой Телеграм-канал по Дизайну Человека и Астрологии
  • artart
    я помню, что выяснял. но, видимо, не поверил, что никак image
  • IvanesSIvanesS
    А чем плохо белым?
    Мой Телеграм-канал по Дизайну Человека и Астрологии
  • artart
    ну не знаю. как-то тупо :\"> есть же какая-то опция "под катом"..
  • IvanesSIvanesS
    Ну нету ее. image
    Мой Телеграм-канал по Дизайну Человека и Астрологии
  • ValchonokValchonok
    Почему? Есть спойлер же.
    Матрица Судьбы: индивидуальный анализ вашей матрицы
    Базовая расшифровка бодиграфа понятным языком
  • IvanesSIvanesS
    И как его сделать? Покажы. :\">
    Мой Телеграм-канал по Дизайну Человека и Астрологии
  • artart
    покажыыыыы!! image
  • ValchonokValchonok
    И как его сделать? Покажы. :\">
    Был плагин, я давала тебе на него ссылку. Вроде. image
    Матрица Судьбы: индивидуальный анализ вашей матрицы
    Базовая расшифровка бодиграфа понятным языком
  • IvanesSIvanesS
    А, я думал так как-то можно.

    Каждый плагин добавляет скрипт (а то и не один), который выполняется при любом обновлении страницы, повышает нагрузку на сервер и снижает скорость работы сайта. Чем больше плагинов - тем медленнее ворочается. Важен баланс. Мне кажется, спойлеры - не настолько часто используемая функция, чтобы ставить целый плагин.
    Мой Телеграм-канал по Дизайну Человека и Астрологии
  • artart
    поняяяятно..
  • ValchonokValchonok
    Нашла прекрасную штуку для цивильного оформления картинок, чтобы был отступ.

    Атрибут hspace

    Описание
    Для любого изображения можно задать невидимые отступы по горизонтали и вертикали с помощью атрибутов hspace и vspace. Особенно это актуально при обтекании рисунка текстом. В этом случае, чтобы текст не «наезжал» плотно на изображение, необходимо вокруг него добавить пустое пространство.

    Синтаксис
    <img hspace="отступ по горизонтали">

    Значения
    Любое целое положительное число в пикселах.

    Значение по умолчанию
    0

    Пример 
      <p><img src="/images/sample.gif" width="150" height="150" 
      hspace="5" vspace="7" alt="" align="left"></p>
      <p>Пример обтекания картинки текстом</p>
    Матрица Судьбы: индивидуальный анализ вашей матрицы
    Базовая расшифровка бодиграфа понятным языком
  • IvanesSIvanesS
    Да, это отлично. А то тут временами совершенно непонятно, какая часть html работает, а какая - уже нет, и почему.
    Мой Телеграм-канал по Дизайну Человека и Астрологии
  • IvanesSIvanesS
    Главное, в экспериментах со всей этой версткой - не забывать, что у форума есть адаптивная мобильная версия, и в ней это все может выглядеть совершенно иначе. image image
    Мой Телеграм-канал по Дизайну Человека и Астрологии
Войдите или Зарегистрируйтесь чтобы комментировать.
realfaq.NET - зеркало форума, где он будет доступен в случае причуд регулирования интернета в РФ Копирование материалов разрешается только с указанием прямой активной ссылки на источник!