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

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

Социальные сети

Разделы

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

отредактировано Июнь 2015 Раздел: Технологии и интернет

Друзья мои, мы с вами каждый день, добавляя комменты и статьи, вольно или невольно используем 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

В комментах ниже напишу подробнее про работу с изображениями и текстом.

Комментарии

  • отредактировано Июнь 2015

    Теги форматирования текста:

    <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.
  • отредактировано Июнь 2015
    Про то, как задать цвет текста, Иванесс достаточно подробно написал здесь.
    Для комплекта добавлю ссылку на полную палитру цветов к примеру

    <font color="#FAEEDD">Текст с бедра испуганной нимфы</font>
  • Графические элементы:

    <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.
  • ООО, круто, спасибо )))
  • отредактировано Июнь 2015
    Впрочем, цвет, толщина и безтенье горизонтальной линии у меня здесь не работает, но оно и не надо, дабы совсем пестроту не разводить и не портить вид страниц.
  • отредактировано Июнь 2015
    helyzete пишет:

    ООО, круто, спасибо )))

    Пожалуйста, рада, если пригодится. ^:)^
  • отредактировано Июнь 2015
    Пока что, не знаю, что еще может понадобиться. :-/
    Для всяких экзотических прихотей вот большой список тегов.
  • отредактировано Июнь 2015
    @Ivaness, а имеет смысл использовать nofollow для источников, или это ничего не даст?
  • Ого! Круть какая! :> Спасибо! :-bd

    nofollow движок добавляет к ссылкам автоматом, поэтому нет смысла.
  • Боже-боже. Респект неимоверный, но пока не осилил =D>
  • Да ты пользуйся по мере надобности, сразу-то это всё не вызубрить, да и зачем. :)
  • Тему прикрепил.
  • IvanesS пишет:

    Да ты пользуйся по мере надобности, сразу-то это всё не вызубрить, да и зачем. :)

    Ага, я как раз сюда все и притащила, чтобы когда понадобится, было под рукой.
    Не должно быть особо сложно, все ж с примерами. Ежели чего конкретно интересует, поясню.
    :-h
  • а как сделать скрытый текст, но не белым цветом?
  • По-другому - вроде никак, мы это когда-то уже выясняли. :( Ты же сам как раз и выяснял. :)
  • я помню, что выяснял. но, видимо, не поверил, что никак 8-}
  • А чем плохо белым?
  • ну не знаю. как-то тупо :\"> есть же какая-то опция "под катом"..
  • Ну нету ее. =((
  • Почему? Есть спойлер же.
  • И как его сделать? Покажы. :\">
  • покажыыыыы!! :)>-
  • IvanesS пишет:

    И как его сделать? Покажы. :\">

    Был плагин, я давала тебе на него ссылку. Вроде. O:-)
  • А, я думал так как-то можно.

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

    Атрибут 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>
  • Да, это отлично. А то тут временами совершенно непонятно, какая часть html работает, а какая - уже нет, и почему.
  • Главное, в экспериментах со всей этой версткой - не забывать, что у форума есть адаптивная мобильная версия, и в ней это все может выглядеть совершенно иначе. L-) :)
Войдите или Зарегистрируйтесь чтобы комментировать.
realfaq.NET - зеркало форума, где он будет доступен в случае причуд регулирования интернета в РФ Копирование материалов разрешается только с указанием прямой активной ссылки на источник!