Друзья мои, мы с вами каждый день, добавляя комменты и статьи, вольно или невольно используем HTML-теги. Чтобы это происходило осознанно, и вы понимали, что за хрень появляется при нажатии кнопочек "В", "I", "U" и т.д., а также могли выйти за пределы форматирования текста этими кнопочками, добавлю сюда небольшую шпаргалку по основным тегам.
Конечно же, в основном я это делаю эгоистично для себя любимой, ибо хочется собрать все нужное в одном месте, а не лазить по безграничным просторам Инета в поисках той или иной, необходимой для оформления штуки. Но, так как у многих из вас есть свои сайты, эта информация может оказаться весьма полезной. Помимо этого, предлагаю здесь и тренироваться в применении всяческих изыскови задавать Иванессу каверзные вопросы.
От себя еще добавлю самые ходовые сочетания клавиш, используемые при форматировании текста, ежели кто их еще не знает:
Ctrl+Z - отмена последнего действия, работает и в местом редакторе, ежели вы вдруг чего-то стерли ненароком (!)
Ctrl+C - копировать выделенный текст
Ctrl+V - вставить скопированный\вырезанный текст
Ctrl+X - вырезать выделенный текст
Ctrl+I - выбор курсивного или обычного начертания для выделенного текста
Ctrl+B - выбор полужирного или обычного начертания для выделенного текста
Ctrl+S - зачеркнутый текст
Ctrl+L - вставка ссылки
Их значительно больше, но эти, на мой взгляд, жизненно необходимые.
Итак, приступим:
Основная структура документа.
Первое, с чего мы начнем, это основная структура (разметка) HTML-документа. Как правило, любая страница сайта включает в себя следующие HTML-теги.
Первой строчкой идет указание типа документа. Содержимое страницы заключается между тегами .
Структура любого документа содержит обычно две основные части:
Содержимое части head не видно пользователю в браузере (за исключением, пожалуй, тега title). Вся видимая часть страницы формируется структурой body.
Тег head обычно содержит служебную информацию, а также подключаемые стили, шрифты, файлы скриптов и т.п.
Тег <title> — включает в себя заголовок страницы. Эта информация видна во вкладке браузера, а также отображается поисковиками в результатах поиска.
Также в <head> помещаются мета-теги:
Мета-теги «description» и «keywords» важны для поисковой оптимизации сайта.
В теги <body></body> помещается html-код, который формирует отображение страницы. По сути, все теги, рассмотренные ниже, помещаются именно в эту область.
Теги заголовков h1, h2, h3 …
В эти теги на странице заключают заголовки и подзаголовки. Причем наиболее важный заголовок обрамлен тегом H1. Чем больше цифра, тем, соответственно, менее значим заголовок. По сути, он является подзаголовком.
Теги заголовков играют немаловажную роль во внутренней оптимизации сайта, поэтому их проверка, как правило, всегда входит в seo-аудит любого проекта.
Примеры использования:
Кстати, в разметке нет необходимости после тегов заголовка вставлять тег переноса на новую строку – это делается по умолчанию.
Тег переноса на новую строку <br>.
<br> равносилен нажатию кнопки Enter, когда мы печатаем в текстовом редакторе. Он осуществляет переход на новую строку.
Тег изображений <img>.
За отображение картинок на странице отвечает тег <img>, однако, просто поместить его на нашу страницу недостаточно. Мы должны задать его «атрибуты» (свойства или параметры):
src (адрес изображения на сервере),
alt (альтернативный текст, который будет отображаться вместо картинки, если показ изображений отключен),
title (заголовок изображения, название),
width (ширина картинки),
height (высота картинки).
Из всех атрибутов обязательным является только src:
Если мы явно не указываем размер картинки, то браузер определит его автоматически. Если же мы хотим уменьшить размер картинки, то с помощью атрибутов widht и height можно задать меньшие размеры.
Стоит отметить, что хотя атрибуты alt и title не являются обязательными, рекомендуется их указывать и заполнять для улучшения ранжирования ваших изображений в поиске по картинкам.
Теги абзаца текста <p></p>.
Если вы разбиваете ваш текст на абзацы, то вам необходимо сделать то же самое и в коде страницы. Делается это с помощью парного тега <p></p>. Текст, который размещен внутри данного тега формирует один абзац.
Пример:
Браузер автоматически добавит перенос на новую строку после заключительного тега </p>
Парный тег <span></span> позволяет выделить внутри текста какую-то часть и задать для нее собственное отображение, используя стили. К примеру,
Два слова ‘второй абзац’ будут выделены красным цветом (только эти два слова). Атрибут style позволяет прописывать css-стили для изменения стандартного отображения элементов на странице.
Существуют также теги, которые позволяют видоизменить отображение текста:
Горизонтальная линия — <hr>
Непарный тег <hr> позволяет задать горизонтальную линию на странице.
Отображение ссылок. Тег <a>.
Для отображение тегов на странице используется непарный html-тег <a>. Одного тега, конечно же, мало. Мы должны задать для него атрибуты:
href – указывает на адрес, по которому следует переходить
target – позволяет управлять окнами, в которых открываются страницы, указанные в href. К примеру, если мы укажем target=’_blank’, то страница будет открыта в новом окне (вкладке браузера). Если мы ничего не указываем, то по умолчанию страницы будут открываться в том же окне.
rel – дополнительные параметры. Например, rel=’nofollow’ сообщает поисковикам о том, что данную ссылку не учитывать при индексации страницы.
Пример использования:
Теги для списков.
Для форматирования списков используются теги <ul></ul> и <li></li>. Чтобы было понятно, как их использовать, лучше всего продемонстрировать это на реальном примере:
Тег <ul>, как видно из примера, является ‘родительским’, то есть он объединяет несколько элементов li. Это позволяет группировать несколько списков на странице.
Блочные элементы <div></div>.
Тег <div> позволяет группировать другие элементы на странице, что позволяет создавать необходимую структуру – разметку страницы. Это очень важный тег, который лежит в основе так называемой ‘блочной’ верстки.
Пример использования на странице:
Источник: http://poleshuk.ru
Справочник HTML тегов
В комментах ниже напишу подробнее про работу с изображениями и текстом.
Конечно же, в основном я это делаю эгоистично для себя любимой, ибо хочется собрать все нужное в одном месте, а не лазить по безграничным просторам Инета в поисках той или иной, необходимой для оформления штуки. Но, так как у многих из вас есть свои сайты, эта информация может оказаться весьма полезной. Помимо этого, предлагаю здесь и тренироваться в применении всяческих изысков
От себя еще добавлю самые ходовые сочетания клавиш, используемые при форматировании текста, ежели кто их еще не знает:
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 тегов
В комментах ниже напишу подробнее про работу с изображениями и текстом.
