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

Доброго времени суток, друзья! Сегодня у нас очередная статья, посвященная одной из категорий моего сайта «HTML-путеводитель для новичков».  Наверное, нужно было начинать заполнять эту категорию с написания статьи, что такое HTML или же с этого поста, в котором будет подробно изъяснено, что такое теги html. Но так уж сложилось, что в ней я уже опубликовал несколько полезных материалов, к примеру, о том, как сделать линию средствами HTML или же, как сделать рамку. Ну да ладно, надеюсь, моя оплошность не вынудила вас искать информацию среди других источников.

что такое теги html

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

Теги – определенная именованная метка состоящая из символов латинского алфавита, заключенная в угловые скобки (к примеру <body>). Тег – основной элемент HTML документа. Их заполнение должно осуществляться в нижнем регистре, то есть вместо <TITLE> должно быть <title>.

Виды тегов html

Существует два типа тегов – одиночные и парные (контейнеры). Последние являются более распространенными. Все что включено между открывающимся <> и закрывающимся тегом </> называют содержимым контейнера. Как можно заметить внутри закрывающегося тега обязательно нужно ставить слеш, т.е. косую черту «/», находящуюся сразу же после первой угловой скобки. Действие тегов распространяется на заключенную между ними информацию.

Одиночные теги (метки) как можно догадаться состоят из одного html элемента – открывающегося тега (например <img>).


В независимости от вида каждый тег состоит из следующих элементов:

— Открывающаяся угловая скобка (<).

— Имя тега (p, body, br).

— Закрывающаяся угловая скобка (>).

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

Основные теги html

Стандартизированный язык разметки гипертекста включает в себя предостаточно используемых HTML-тегов. Давайте остановимся на самых важных из них.

Основные парные теги html

<html> — сообщает  браузеру о том, что перед ним находится HTML документ.

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


<body> — определяет видимую часть документа.

<title> — отвечает за отображение и название документа.

<table>, <tbody>, <thead>, <td>, <th> и <tr> — теги, относящиеся к созданию таблиц.

<p> — закрытие данного тега сообщает браузерам о том, что текст отображается с новой строки, то есть с нового абзаца.

<h> — задает заголовок (h1h6).

<br> — тег устанавливающий перевод строки в том месте, где он находится.

<b>, <u>, <i> — каждый из тегов по отдельности выделяющий текст жирным, подчеркнутым или  курсивом.

<ol>, <ul>, <dl> — теги отвечающее за создание нумерованного или маркированного списка, а также списка определений.

<tt>, <kbd> — эффект для текста имитирующий стиль печатной машинки.


<strong> — еще один HTML-тег выделяющий текст жирным. В отличии от тега <b> воспринимается поисковыми механизмами как особо выделенный.

<marquee> — тег, используемый для создания бегущей строки.

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

<a> — весьма распространенный тег, отвечающий за создание гиперссылки.

<cite> — цитирование.

<code> — выводит в HTML документе примеры кода.

<q> — отвечает за отображение текста заключенного в скобки.

<blockqote> — создает отступы с обеих сторон текста.

Основные одиночные теги

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


<img> — тег, отвечающий за отображение графических элементов (картинки). Используется вместе с обязательным атрибутом <img src=»/URL»>.

<style> — указывает на таблицу стилей CSS. Данный тег задается в теге <head>. HTML документ может состоять из энного количества тегов <style>, задающих странице стилистику в независимости от расположения ее содержимого.

<hr> — добавляет горизонтальную линию.

Нажав сочетание клавиш Ctrl+U можно заметить, что весь HTML-документ построен на использовании HTML тегов и атрибутов. Совсем не обязательно запоминать все существующие HTML теги. Для внесения корректировок на сайт достаточно запомнить те, что приведены выше.

Надеюсь, статья оказалась для вас полезной, и теперь вы знаете, какие существуют виды тегов и что это вообще такое.

Спасибо за внимание и до скорого на страницах Stimylrosta.

stimylrosta.com.ua

Слово HTML представляет собой сокращение от HyperText Markup Language — язык разметки гипертекста. В основном, HTML-документ является простым текстовым файлом, который содержит текст и ничего больше. Так что создавать веб-страницы можно в любом текстовом редакторе.


Когда веб-страница открывается в браузере, он просматривает код HTML, находит специальные символы, называемые тегами, и использует их для вставки изображений, изменения вида текста, создание ссылок на другие веб-страницы и др.

Для обозначения тегов используется символ <тег>. Теги бывают двух видов: парные, которые выделяют блок текста, также называются еще контейнером (пример 1) и одиночные. Контейнер требует закрывающего тега, обозначаемого </тег>. Теги нечувствительны к регистру, поэтому запись <B> и <b> эквивалентна.

  • A
  • EM
  • STRONG
  • CITE
  • UL
  • OL
  • LI
  • DL
  • DT
  • DD

<a> Тег <A> является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от присутствия параметров name или href тег <A> устанавливает ссылку или якорь. Якорем называется закладка внутри страницы, которую можно указать в качестве цели ссылки. При использовании ссылки, которая указывает на якорь, происходит переход к закладке внутри веб-страницы.
Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку.
качестве значения параметра href используется адрес документа (URL, Universal Resource Locator, универсальный указатель ресурсов), на который происходит переход. Адрес ссылки может быть абсолютным и относительным. Абсолютные адреса работают везде и всюду независимо от имени сайта или веб-страницы, где прописана ссылка. Относительные ссылки, как следует из их названия, построены относительно текущего документа или корня сайта.
Синтаксис <a href="URL">…</a> <a name="идентификатор">…</a>
Параметры

href
Задает адрес документа, на который следует перейти.
name
Устанавливает имя якоря внутри документа.
target
Имя окна или фрейма, куда браузер будет загружать документ.
title
Добавляет всплывающую подсказку к тексту ссылки.

Закрывающий тег обязателен.

 


<em> Тег <EM> предназначен для акцентирования текста. Браузеры отображают такой текст курсивным начертанием.
Синтаксис <em>Текст</em>
Параметры НЕТ
Закрывающий тег обязателен.


<strong> Тег <STRONG> предназначен для акцентирования текста. Браузеры отображают такой текст жирным начертанием.
Синтаксис <strong>текст</strong>
Параметры НЕТ
Закрывающий тег обязателен.



<cite> Тег <CITE> помечает текст как цитату или сноску на другой материал. Такое выделение удобно для изменения стиля текста через CSS, а также применяется для разделения кода HTML на структурные элементы. Браузеры обычно устанавливают текст внутри контейнера <CITE> курсивом.
Синтаксис <cite>…</cite>
Параметры НЕ ВИДЕЛ
Закрывающий тег обязателен.


<code> Тег <CODE> предназначен для отображения одной или нескольких строк текста, который представляет собой программный код. Сюда относятся имена переменных, ключевые слова, тексты функции и т.д. Браузеры обычно отображают содержимое контейнера <CODE> как моноширинный текст уменьшенного размера. В отличие от тега <PRE> дополнительные пробелы внутри контейнера не учитываются, так же, как и переносы текста. Поэтому используйте тег <BR> или <P> для создания переносов.
Синтаксис <code>...</code>
Параметры НЕТ
Закрывающий тег обязателен.


<ul> Тег <UL> устанавливает маркированный список. Каждый элемент списка должен начинаться с тега <LI>. Если к тегу <UL> применяется таблица стилей, то элементы <LI> наследуют эти свойства.
Синтаксис <ul> <li>элемент маркированного списка</li> </ul>
Параметры

type
Устанавливает вид маркера списка.

Закрывающий тег обязателен.

 


<ol> Тег <OL> устанавливает нумерованный список. Каждый элемент списка должен начинаться с тега <LI>. Если к тегу <OL> применяется таблица стилей, то элементы <LI> наследуют эти свойства.
Синтаксис <ol> <li>элемент нумерованного списка</li> </ol>
Параметры

type
Устанавливает вид маркера списка.
start
Число, с которого будет начинаться нумерованный список. Значением может быть любое целое положительное число.

Закрывающий тег обязателен.


<li> Тег <LI> определяет отдельный элемент списка. Внешний тег <UL> или <OL> устанавливает тип списка — маркированный или нумерованный.
Синтаксис <ul> <li>элемент маркированного списка>/li> </ul> <ol> <li>элемент маркированного списка</li> </ol>
Параметры

type
Устанавливает вид маркера нумерованного или маркированного списка.
value
Число, с которого будет начинаться нумерованный список.

Закрывающий тег не обязателен.

 


<dl> Тег <DL> входит в тройку элементов <DL>, <DT>, <DD>, предназначенных для создания списка определений. Каждый такой список начинается с контейнера <DL>, куда входит тег <DT> создающий термин и тег <DD> задающий определение этого термина.
Синтаксис <dl> <dt>Термин 1</dt> <dd>Определение термина 1</dd> </dl>
Параметры НЕТ
Закрывающий тег не обязателен.


<dt> Тег <DT> входит в тройку элементов <DL>, <DT>, <DD>, предназначенных для создания списка определений. Каждый такой список начинается с контейнера <DL>, куда входит тег <DT> создающий термин и тег <DD> задающий определение этого термина. Закрывающий тег </DT> не обязателен, поскольку следующий тег сообщает о завершении предыдущего элемента. Тем не менее, хорошим стилем является закрывать все теги.
Синтаксис <dl> <dt>Термин 1</dt> <dd>Определение термина 1</dd> </dl>
Параметры НЕТ
Закрывающий тег не обязателен.


<dd> Тег <DD> входит в тройку элементов <DL>, <DT>, <DD>, предназначенных для создания списка определений. Каждый такой список начинается с контейнера <DL>, куда входит тег <DT> создающий термин и тег <DD> задающий определение этого термина. Закрывающий тег </DD> не обязателен, поскольку следующий тег сообщает о завершении предыдущего элемента. Тем не менее, хорошим стилем является закрывать все теги.
Синтаксис <dl> <dt>Термин 1</dt> <dd>Определение термина 1</dd> </dl>
Параметры НЕТ
Закрывающий тег не обязателен.

Информация взята с сайта htmlbook

www.crestbook.com

Как использовать мета-теги?

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

<!doctype html>  <head>  <meta charset="utf-8">  <title>Canonium?!</title>  <meta name="viewport" content="width=device-width, initial-scale=1">  <meta name="description" content="Блог для тех, кто делает сайты — от того, кто делает сайты.">  </head>  <body>  ...  </body> </html>

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

Какие бывают мета-теги?

Вот и настал тот самый момент, когда вы сможете увидеть хоть что-то интересное или не очень интересное… или совсем не интересное… В любом случае, поехали!

В этой части статьи собран джентльменский набор мета-тегов для веб-приложений.

Джентльменский набор

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

Кодировка

<meta charset="кодировка">

Этот мета-тег указывает кодировку страницы, чаще всего utf-8.

Описание страницы

<meta name="description" content="описание страницы">

Описание вашего сайта. Максимум 150 символов, поэтому подумайте над его содержимым.

Ключевые слова

<meta name="keywords" content="ключевые слова через запятую">

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

Устарел или устаревает, так как поисковые системы сами в состоянии определить ключевые слова страницы и умеют игнорировать содержимое этого тега, если оно не соотносится с содержимым страницы.

Режим совместимости (отображения)

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

Этот мета-тег управляет режимом отрисовки (рендеренга) страницы.

Подробнее можно почитать у Вадима Макеева.

Область просмотра

<meta name="viewport" content="width=device-width, initial-scale=1">

Область просмотра определяет, как веб-страница отображается на мобильном устройстве.

Подробнее можно узнать у Google Developers.

Robots

<meta name="robots" content="index, follow">

Альтернатива robots.txt. Всё тоже самое, только в упрощенном виде и для конкретной страницы.

Подробнее про файл robots.txt и конкретно про мета-тег.

Автор

<meta name="author" content="humans.txt">

На самом деле, вместо humans.txt некоторые пишут своё ФИО, почту и прочее. Однако, я советую писать humans.txt, так как в нём вы можете полностью описать состав вашей команды, конечно, если вы не корпорация, где над сайтом трудится не один десяток человек.

Подробнее про файл humans.txt.

Копирайт

<meta name="copyright" content="информация о вашей фирме">

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

Полезные мета-теги

Разумеется, что все мета-теги перечислять очень долго, и я даже почти уверен, что смогу упереться в ограничение поля content, у которого стоит тип TEXT (65К символов), в Anchor CMS. Поэтому дальнейшие мета-теги я приведу списком, который будет разделён на категории, сопровождаемые небольшими комментариями и будет содержать интересные на мой взгляд теги.

Контент

// Основной язык страницы <meta name="language" content="язык (RU, EN, ES и т.д.)">  // Установка языка // Не рекомендуется использовать: // http://www.w3.org/International/questions/qa-http-and-lang.ru.php <meta http-equiv="Content-Language" content="en">  // Дата последнего обновления содержимого страницы <meta name="revised" content="дата">

Apple

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

// Название веб-приложения <meta name="apple-mobile-web-app-title" content="название веб-приложения">  // Полноэкранный режим (минимизация верхнего бара браузера) <meta name="apple-mobile-web-app-capable" content="yes">  // Устанавливает стиль строки состояния для веб-приложения <meta name="apple-mobile-web-app-status-bar-style" content="black">  // Управление обнаружением телефонных номеров <meta name="format-detection" content="telephone=no">  // Иконка для веб-приложения, отображаемая в закладках и на рабочем столе <link rel="apple-touch-icon" href="images/touch/apple-touch-icon-152x152.png">  // Изображение, которое отображается при открытии закладки с рабочего стола <link rel="apple-touch-startup-image" href="images/touch/startup.png">

Не путайте link и meta — это разные теги. Тег link не является по сути своей мета-тегом, так как предоставляет информацию браузеру о том, с какими внешними ресурсами связана открытая страница.

Android

Всё тоже самое, но для зелёного лагеря 🙂

// Название веб-приложения <meta name="application-name" content="название веб-приложения">  // Полноэкранный режим (минимизация верхнего бара браузера) <meta name="mobile-web-app-capable" content="yes">  // Цвет заголовка у вкладки <meta name="theme-color" content="#hex-цвет">  // Иконка для веб-приложения, отображаемая в закладках и на рабочем столе <link rel="icon" sizes="192x192" href="images/touch/chrome-touch-icon-192x192.png">

Windows 8

Раз уж речь зашла про мобильные платформы, то будет плохим тоном обойти Windows 8 и его верного спутника Internet Explorer.

// Название веб-приложения <meta name="application-name" content="название веб-приложения">  // Содержат текст дополнительной подсказки, появляющейся при наведении указателя мыши на ярлык закрепленного сайта в меню "Пуск" Windows или на рабочем столе <meta name="msapplication-tooltip" content="подсказка">  // Определяет пользовательский цвет кнопок Назад и Вперед в окне браузера закрепленного сайта <meta name="msapplication-navbutton-color" content="#hex-цвет">  // Определяют исходный размер окна закрепленного сайта при первом запуске <meta name="msapplication-window" content="width=1024;height=768">  // Цвет плитки (тайла) <meta name="msapplication-TileColor" content="#hex-цвет">  // Изображение для старого типа тайлов <meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">  // Изображение для нового типа тайлов (XXxYY) [70x70 | 150x150 | 310x150 | 310x310] <meta name="msapplication-squareXXxYYlogo" content="images/tile.png">

Open Graph и Twitter

Мета-теги для организации разметки Open Graph. Что это такое и с чем это едят, можно узнать на web-koshka.ru.

К вашему сожалению, привожу список тегов без описания, так как всё это написано и собрано в документации к протоколу и присутствует у Яндекса на русском языке.

Заинтересованным в продвижении своего веб-приложения обязательно к просмотру и изучению, так как на основе Open Graph строится «карточка» сайта при, допустим, нажатии на кнопку социальных сетей (если не задано специальными тегами самих сетей).

// Обязательные поля <meta property="og:title" content="The Rock"> <meta property="og:type" content="movie"> <meta property="og:url" content="http://www.imdb.com/title/tt0117500/"> <meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"> <meta property="og:site_name" content="IMDb"> <meta property="og:description" content="A group of U.S. Marines, under command of...">  // Месторасположение <!-- см. комментарий в конце статьи от Дениса Семенова -->  // Видео <meta property="og:video" content="http://example.com/awesome.swf"> <meta property="og:video:height" content="640"> <meta property="og:video:width" content="385"> <meta property="og:video:type" content="application/x-shockwave-flash"> <meta property="og:video" content="http://example.com/html5.mp4"> <meta property="og:video:type" content="video/mp4"> <meta property="og:video" content="http://example.com/fallback.vid"> <meta property="og:video:type" content="text/html">  // Аудио <meta property="og:audio" content="http://example.com/amazing.mp3"> <meta property="og:audio:title" content="Amazing Song"> <meta property="og:audio:artist" content="Amazing Band"> <meta property="og:audio:album" content="Amazing Album"> <meta property="og:audio:type" content="application/mp3">

К счастью или к сожалению, Twiter пошел своей дорогой и создал свои карточки. У Facebook есть дополнительные мета-теги.

Супер-пупер-гипер-мега-ультра-сверх-листинг

Для самостоятельных, независимых и отверженных людей предоставляю ссылку на список всех валидных HTML5 мета-тегов — клац. Все мета-теги приведены с описаниями и ссылками на соответствующие спецификации. Правда, всё это на английском языке, но это мелочи.

Пользовательские мета-теги

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

Например, так поступают некоторые сервисы, предоставляющие какие-то услуги:

<meta name="google-analytics" content="1-AHFKALJ"> <meta name="disqus" content="abcdefg"> <meta name="uservoice" content="asdfasdf"> <meta name="mixpanel" content="asdfasdf">

Заключение

Эта небольшая статья основана на найденном мной ещё в том году листинге мета-тегов от Lance Pollard, когда мне самому стала интересна эта тема. Поэтому не удивляйтесь, что раздел с мета-тегами Open Graph полностью скопирован оттуда.

По поводу того, стоит ли применять те или иные теги — решать вам. Как бы то ни было, в любом случае, набор мета-тегов для вашего сайта (веб-приложения) будет индивидуальным и строиться на тематике сайта, его возможностях и прочих аспектах.

Например, для интернет-магазина и блога, как мне кажется, просто необходимы кнопки по типу «рассказать друзьям», а отсюда вытекает необходимость работы с мета-тегами Open Graph или настройками этих кнопок для удовлетворительного отображения карточки товара или записи в ленте социальной сети. Для магазина (интернет-магазина) также пригодятся мета-теги месторасположения и контактной информации, которая вроде как может отображаться при поиске и на карте (поиск этой информации целиком и полностью на вас).

Другим примером может послужить веб-приложение, по типу Github, которое использует протокол Open Graph и карточки Twitter, иконки для мобильных платформ, оформление плиток (тайлов) для Windows 8.x и даже свои собственные мета-теги.

Поэтому старайтесь относиться с умом к использованию мета-тегов на страницах вашего проекта. Да, лишние мета-теги не помешают ему, но и не прибавят ему веса для поисковых систем. Не будем рассуждать тут о SEO и прочих шалостях, так как я в этом не особо силён, если не сказать, что практически вообще не бум-бум 🙂

Хотя, как мне кажется, сейчас поисковые системы в большей степени обращают своё внимание на содержимое страницы и базовые мета-теги, нежели чем на миллион и ещё один дополнительный мета-тег.

canonium.com

HTML теги для создания каркаса сайта

Теги бывают парные и не парные. Парные открываются и закрываются, т.е в закрывающихся присутствует обратный слеш «/».

Первое, что должно находится в любом html документе при создании страницы блога, это:

  • <!DOCTYPE HTML PUBLIC «-//w3c//DTD HTML 4.01 Transitional//EN»- указание версии
  • <html> </html> — сообщают браузеру, что все, что находится между ними, это есть html код;
  • <head> </head> — с англ. «голова», содержит название, кодировку, мета теги для поисковиков;
  • <title>НАЗВАНИЕ</title> — мета тег, в основном для поисковиков, внутри содержит название документа, отображается вверху  браузера;
  • <meta http-eguiv=»Content-Type» content=»text/html; charset=windows-1251″> — одинарный тег указывающий браузеру кодировку языка, где windows-1251 — говорит о том, что текст данной страницы на русском языке (windows-1252 — для английского языка);
  • <meta name=»keywords» content=»КЛЮЧЕВЫЕ СЛОВА»> — для ключевых слов сайта;
  • <meta name=»description» content=»ОПИСАНИЕ»> — краткое содержание страницы;
  • <body>ТЕЛО ДОКУМЕНТА</body> — с англ. «тело», содержит всю страницу сайта.

Это были стандартные теги html кода, с которых, без изменений должны начинается все страницы сайта/блога в таком виде:

<!DOCTYPE HTML PUBLIC «-//w3c//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>

<html>
<head>
<title></title>
<meta http-eguiv=»Content-Type» content=»text/html; charset=windows-1251″>
<meta name=»keywords» content=»»>
<meta name=»description» content=»»>
</head>
<body></body>
</html>

Список html тегов находящихся в теле страницы

Между тегами <body></body> будет находится само тело страницы сайта где:

  • <h1>заголовок</h1> — самый важный заголовок 1 уровня;
  • с <h2>подзаголовок</h2> по <h6> подзаголовок </h6> — соответственно подзаголовки 2, 3, 4, 5 и 6 уровня;
  • <a href=»http://www.адрес.ru» target=»_blank» title=»название»>анкор ссылки</a> — ссылка, где » target=»_blank»» — атрибут отвечающий за открытие в новом окне, » title=»» название того, на что будет ссылка;
  • <strong></strong> и <b></b> — теги для выделения жирным. «<b></b>» устарели и рекомендуется использовать «<strong></strong>»;
  • <em></em> — для выделения курсивом;
  • <img src=»путь к изображению» width=»ширина» height=»высота» alt=»описание»> — одинарный тег, отвечающий за вставку изображения на странице;
  • <p></p> —  «p» от англ. «параграф», а значит делит текст на параграфы. По умолчанию выравнивается по левому краю;
  • <br> — логический тег означающий конец строки и переход на следующую;
  • <p align=»center»></p> — атрибут выравнивающий текст по центру;
  • <p align=»right»></p> — атрибут выравнивающий текст по правому краю;
  • <font color=»green» face=»verdana» size=»3″></font> —
  • color=»green» отвечает за цвет текста. В данном случае стоит зеленый. Вместо слова «green» обычно ставится код из шестнадцатеричной системы цветов, например: «#088f47»;
  • face=»verdana» — атрибут указывающий шрифт в тексте;
  • size=»3″ — размер шрифта;
  • <ol><li>первое</li><li>второе</li><li>третье</li></ol> — нумерованный список;
  • <ul><li>слово</li><li>слово</li><li>слово</li></ul> — маркированный список;

HTML теги для создания таблицы

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

  • <table border=»1″ width=»450″ align=»center»></table> — тег отвечающий за создание таблицы, где «1» есть ширина бордюра таблицы, где «450» ширина таблицы, а «center» вы уже знаете;
  • <tr></tr> — тег находящийся внутри «<table></table>» и создает строку в таблице;
  • <td width=»150″></td> — создает столбец в строке, находится внутри тегов «<tr></tr>». «150», как вы уже наверное догадались — ширина столбца;

Полностью  html теги таблицы выглядят примерно так:

<table border=»1″ width=»450″ align=»center»>
<tr>
<td width=»150″><p>ячейка №1</p></td>
<td width=»150″><p>ячейка №2</p></td>
<td width=»150″><p>ячейка №3</p></td>
</tr>
<tr>
<td width=»150″><p>ячейка №4</p></td>
<td width=»150″><p>ячейка №5</p></td>
<td width=»150″><p>ячейка №6</p></td>
</tr>
</table>

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

Видео урок по теме — «Что такое HTML? Файл index html»:

opartnerke.ru

Здравствуйте, уважаемые читатели блога MonetaVInternete.ru! В прошлой статье мы разобрались, что такое HTML и XHTML, а также что такое тип документа и как браузеры определяют используемый язык с помощью тега-декларации <!DOCTYPE>. Тег то рассмотрели, а вот само понятие (термин) нет. В этой статье я расскажу, что такое тег, зачем он нужен и какие теги бывают. Что такое теги и атрибуты, валидатор w3c. Правила написания тегов Как я и говорил в прошлой статье данной рубрики, мы создадим файл-страничку, над которой будем экспериментировать, опираясь на полученные знания. Но это в конце статьи, а пока разберемся с HTML-тегом.

Что такое HTML-тег, виды HTML-тегов, примеры написания

HTML-тег — в переводе с английского tag — помечать символы, заключенные в угловые скобки и являющиеся элементами языка гипертекстовой разметки (HTML). Символы могут быть толок на английском языке (весь интернет на нем построен). Тег имеет вид

<strong></strong>

Это тег выделения текста жирным шрифтом. Теги имеют три вида:

  • Открывающий тег — тег, стоящий в начале. В рассмотренном выше примере тег <strong> является открывающим и стоит перед тем текстом, который нужно выделить.
  • Закрывающий тег — тег, стоящий в конце. Отличительной чертой служит слеш «/» перед символами в угловых скобках. Опять же обратимся к рассмотренному выше примеру. Тег </strong> является закрывающим и стоит после текста, который следует выделить жирным
  • Одиночные теги — теги, которые не имеют закрывающего тега. Примером может служить <br /> Вот пример открывающего и закрывающего тега:
<strong></strong>

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

<strong>Этот текст будет выделен жирным</strong>

А вот так будет выглядеть этот текст, когда его обработает браузер и предоставит нам: Этот текст будет выделен жирным.  Существует еще такое понятие, как контейнерные теги, но это просто обобщенное название открывающего и закрывающего тегов. Как я писал выше, помимо контейнерных есть еще и одиночные теги. Отличие заключается в том, что такие теги не нужно закрывать. Ярким и наиболее частым примером служит тег новой строки.

<br />

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

Что такое атрибуты,правила написания и зачем они нужны

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

Font — контейнерный тег, применяемый для форматирования текста. С помощью данного тега вы сможете и выделить текст жирным, и изменить размер, и расстояние между строк — в общем все, что можно делать с текстом. Рассмотрим пример с размером текста. Для начала заключим текст в тег Font.

 <font> Текст </font>

Теперь немного про правила написания атрибутов. Атрибуты всегда пишутся в открывающем теге и после символов самого тега. Можно написать в одном теге несколько атрибутов в любом порядке. Атрибуты вы можете найти на сайте валидатора W3C (про который я напишу чуть ниже). Итак, вот пример тега font с атрибутом size:

<font size="5"> Текст</font> 

Данный атрибут в теге font изменяет размер заключенного в теги Текста .
Если вы откроете исходный код страницы, то увидите, что место, где находится большое слово «Текста» имеет вид

<font size="5"> Текста </font>

Вы уже увидели как пишутся атрибуты. Ровно также они пишутся и в других тегах: сначала пишем сам атрибут (в данном случае size), затем ставим «=» и заключаем параметр атрибута в двойные кавычки. Параметры атрибутов вы сможете найти все на том же сайте консорциума всемирной паутины.

Что такое валидатор (validator) W3C, правила написания и список тегов

Как я и писал, существует великое множество тегов. Но где их всех найти? Вот для этой цели существует валидатор W3C W3C — World Wide Web Consorcium, а по-русски — консорциум всемирной паутины. Не совсем понятно, да? Это такое место, где разрабатывают веб-стандарты — (языки гипертекстовой разметки — их детище). Во главе всего консорциума стоит, известный из прошлой статьи, Тим Бернерс-Ли — создатель HTML. Сайт этой организации — . Предупреждаю, сайт полностью на английском, так что запаситесь словарем или переводчиком в браузере. Кстати, Google PageRank у данного сайта равен 9, а Тематический индекс цитирования — 37000 (это все очень много, если кто не в курсе).

Возвращаемся к теме статьи. Нас интересуют стандарты языка HNTML 4.01. Переходим по ссылке , после чего вверху видим вкладку , кликаем на нее. Вот и открывается страница со всеми тегами. Данные теги разработаны и приняты за стандарт консорциумом. Все, опять же, на английском. Сразу после слов «Index of Elements» мы видим легенду (значение букв в столбцах): validator w3c

А сразу после легенды идет таблица самих тегов:

Список тегов на сайте консорциума

  • В первом столбце — Name — само название тега — то что должно стоять в угловых скобках (< и >).
  • Второй столбец — Start Tag — наличие открывающего тега. В данном столбце вы можете увидеть букву «O», что значит «Optional», а в переводе с английского — Опционально. Данная буква присутствует только напротив тегов <html>, <head>, <body> и <tbody> и означает, что можно ставить открывающий тег, а можно не ставить — браузер сам все сделает.
  • Третий столбец — End Tag — наличие закрывающего тега. Напротив данного тега можно увидеть как букву «O», так и букву «F». Значение первой не изменилось. Вторая же буква — «F» — дословно с английского «запрещено» — означает, что закрывающий тег ставить запрещено, его просто не существует. Например, не существует тега </img>, ибо нечего в нем закрывать.
  • Четвертый — Empty — означает, что тег является одиночным (пустым). Все теги, напротив которых стоит буква «E» в данном столбце, стоит еще и буква «F» в предыдущем столбце. Ведь у одиночных тегов не бывает закрывающих. Примером служит все тот же тег <img>.
  • Пятый столбец — Depr. или Deprecated — с английского «не рекомендуемые». Если в данном столбце стоит буква «D» (которая расшифровывается точно также) значит, что данный тег не рекомендуется к использованию в HTML. Забегая немного вперед, сегодня для оформления как текста, так и внешнего вида всего сайта и HTML-документа используются каскадные таблицы стилей — CSS. Если коротко и просто, то создается один файл, в котором прописываются все параметры текста, которые можно вызвать определенными атрибутами тегов. Так вот, данная функция используется только на сайтах, потому что при рассылке новостей по почте или в RSS CSS не применим. И тут приходит на помощь эти самые теги. Большинство таких тегов, кстати, относятся к оформлению текста  (<font> и <Center> являются примером)
  • Шестой столбец — DTD — может содержать либо букву «L», либо «F». Первая — «L»  — Loose DTD — означает, что тег, напротив которого стоит данная буква, может использоваться только в переходном типе документов (<!DOCTYPE> — Transitional, про который я писал в предыдущей статье). Вторая — «F» — Frameset DTD —  означает, что тег может использоваться только в документе, типа FRAMESET (<!DOCTYPE> — Frameset). Если же буква отсутствует, то тег можно использовать во всех типах документов.
  • И последний, седьмой столбец — Description — краткое описание тега, опять же на английском

Атрибуты же содержаться на той же страничке спецификации HTML 4.01, но уже во вкладке «attributes». Атрибутов намного больше, нежели тегов. И опять распишу все по пунктам.

  • Первая колонка — Name — как и в случае с тегами — название атрибута. Все на английском, но имея базовые знания можно догадаться, что делает тот или иной атрибут.
  • Вторая колонка — Related Elements — это перечень всех тегов, в которых используется какой-либо атрибут. Все теги со ссылками, поэтому сразу можно будет перейти к информации о теге.
  • Третья колонка — Type — это все возможные значения определенного атрибута. Например напротив выбранного нами атрибута size в теге Font стоит значение CDATA. Его мы рассмотрим позже, а если коротко, то это специальный набор вариантов размера (в данном случае). Ведь можно писать как пиксели, так и проценты
  • Четвертая колонка — Default — означает, обязателен ли атрибут в определенном теге. Например, в теге Img атрибут src обязателен, так как указывает на источник, из которого брать картинку.
  • 6, 7, и 8 колонки означают то же самое, что и в случае с тегами.

Все вышеописанное относится только к HTML версии 4.01. Про HTML 5 мы поговорим в другой статье, затронем и XHTML. А сейчас, как я и обещал, мы создадим страничку на языке HTML, над которой и будем экспериментировать.

Создание файла в формате html — HTML-документ

Прежде всего, разберемся что такое HTML-документ. А это, собственно, файл в формате HTML. И все интернет странички являются HTML- документами. Например, при попадании на сайт в адресной строке в конце можно увидеть после адреса «.html» или «.htm». Вот файл с таким расширением мы и создадим. Вообще, если хотите экспериментировать над сайтом, а не над страничкой, то лучше создать локальный сервер — Денвер (про который я все хочу написать).

Учитывая то, что я не рассказал даже о тегах, присутствующих на каждой страничке, то просто создадим файл с любым именем и расширением .html. Можно (и лучше всего) использовать Notepad++ , потому что в данном текстовом редакторе используется подсветка кода, что очень удобно при редактировании кода и сохранять файлы можно во множестве форматов. Также есть программы, в которых при наборе кода сразу появляется результат в обработанном виде

Итак, нам нужно просто открыть Notepad++ и сохранить файл с произвольным текстом (можно и пустой), но в формате .html. Для этого,  как обычно, кликаете на надпись файл, затем «сохранить как » и ищем среди большого списка расширений «HyperText Markup Language file (расширения файлов)». Вот, собственно, и все. Первые строки в этот файл мы добавим уже в следующей статье  из рубрики «Создаем сайт с нуля»

monetavinternete.ru

Что такое теги на сайте (метки для создания навигации)

Давайте начнем с простого. Наверное, все вы видели, что под некоторыми статьями на сайтах находится поле с названием теги или метки, где перечислены какие-то слова. Для чего это делается? В общем-то, для облегчения навигации по данному сайту (сайт это…).

В качестве тегов используются так называемые ключевые слова, набор которых кратко характеризует публикацию (допустим, для главной страницы моего блога подошел бы такой набор меток: создание сайтов; продвижение; раскрутка сайтов; заработок).

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

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

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

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

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

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

Почему такой способ разметки с помощью тегов используется не на всех вебсайтах, если это удобно для пользователей? Нет их и на моем блоге, чему есть ряд объяснений. Хотя их использование предусмотрено в WordPress по умолчанию, а также существует масса плагинов по работе с тэгами.

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

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

Что такое Html теги?

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

Какие бывают тегиБесплатный гайд по Html — 33 видеоурока по основам языка гипертекстовой разметки. Все более чем подробно и, главное, наглядно. К тому же, с недавних пор этот курс распространяется бесплатно. В общем рекомендую к использованию, как основное дополнение к моему разделу «Html для чайников».

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

Но видеокурс видеокурсом, а я же вас должен заинтересовать, чтобы вы его скачали и посмотрели. Из общих фраз ведь не понятно, что же такое теги в языке Html и зачем вам их изучать. О, это великая и простая вещь, которая позволит вам стать властелином собственного сайта. А зачем вам сайт?

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

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

Итак, теги — это простейшие элементы разметки вебстраницы, чтобы браузер при ее загрузке с сервера понимал, как именно отображать тот или иной элемент (текст, картинку, видео). Раньше язык Html отвечал за все это дело один, но потом ему на помощью пришли стили CSS и ему стало намного легче. По ним у Попова тоже есть бесплатный видеокурс, который можно скачать отсюда.

Ребят, когда вы освоите Html теги, то поймете, что это было проще простого. Самое главное начать и как-то себя простимулировать. Я же вам не просто так про финансовую сторону говорю. Сайт может стать основным вашим источником дохода и вся семья сможет с него кормиться. Нужна удача, упорство и не бояться знакомиться с новым.

Теги бывают разные, но их не много (из тех, что остались актуальными после внедрения в жизнь CSS). Смотрите как просто. Допустим вы хотите создать абзац — просто окружаете текст будущего параграфа открывающим и закрывающим тегами P (это латинская буква и в коде ее лучше писать маленькой, а здесь я сделал ее заглавной для наглядности). Вот так это будет выглядеть:

<p>Текст текст ....... текст текст</p> 

Поняли, чем отличается открывающий Html тег (стоит вначале) и закрывающий (в конце)? Ну, конечно же, просто добавился прямой слеш после треугольной скобки.

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

О, я же забыл сказать, по каким признакам браузер отделяет теги (разметку) от основного содержимого. Сами догадались?

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

Если вам нужно в тексте использовать открывающую треугольную скобку, то обязательно делайте это с помощью спецсимволов использующихся в языке Html, чтобы браузер вас правильно понял. Это надо запомнить.

Список знаете как в Html создать? Опять же проще простого. Есть два типа тегов списка — OL (нумерованный) и UL (маркированный). Все содержимое списка заключаете в одну из пар этих тэгов, после чего каждый пункт списка заключаете еще и в теги LI. Все, список готов.

<ol> <li>Пункт 1</li> <li>Пункт 2</li> <li>Пункт 3</li> </ol> 

А если использовать еще и CSS свойство List style, то вообще все равно какой тип тегов использовать OL или UL.

А картинки как в Html вставляются? Ну прям залюбуешься, как все просто и быстро. Там вообще не используется закрывающий тег IMG (только открывающий). Вот так оно все выглядит:

<img src="https://ktonanovenkogo.ru/image/veb.png" />

Достаточно просто указать путь до файла картинки, который, как правило, будет жить на вашем сервере. Уловили как путь в теге прописывается? Это называется атрибут (в нашем случае им является src), для которого значением будет URL путь до графического файла с именем veb.png.

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

Примеры Html тегов, которые вам могут понадобиться

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

  1. Как вставлять изображения в Html код с помощью тега IMG описано тут и тут
  2. Что такое теги, которые нужны для создания ссылок (в Html их называют гиперссылки) — здесь
  3. Как создают абзацы, заголовки и переносы строк — тэги P, Br, H1-H6
  4. Маркированные и нумерованные списки — это теги UL, OL, LI и DL
  5. Таблицы различной сложности и вложенности — это теги Table, Tr, Td и Colspan, Cellpadding, Cellspacing и Rowspan
  6. Html формы — это теги Form, Input и Select, Option, Textarea, Label и другие
  7. Фреймы на основе тэгов Iframe и Frame
  8. Вставка видео и другого медиаконтенкта — Embed и object
  9. Специальные директивы — Doctype и Html комментариев
  10. Как задаются цвета в Html и CSS коде — палитра Яндекса и коды цветов
  11. Форматирование текста в HTML — Strong, Em, B, I и Html шрифты
  12. Пробелы и спецсимволы (мнемоники) в Html коде — здесь

Что такое мета-теги

Да, кроме обычных в Html существуют и так называемые мета-теги. Суть их заключается в том, что все они представляют из себя тег META (он одиночный, т.е. не имеет открывающего) и отличаются только атрибутами и их содержимым. Знаете какие мета-тэги самые известные? Конечно же, description и keywords.

В коде выглядеть они могут, например, так:

<meta name="description" content="Теги - что это такое и с чем их обычно едят" /> <meta name="keywords" content="теги, теги, мета, аудио, Html" />

Фактически в них заключается описание и ключевые слова той вебстраницы, для которой они прописаны. Подробнее о них читайте в приведенной чуть выше статье.

Мета теги прописываются в коде вебстраницы в строго определенном месте. Знаете в каком? Правильно, в так называемой «голове» документа, которая заключается в открывающий и закрывающий теги HEAD.

Все, что прописывается внутри них (включая и тэги META), отображаться на вебстранице не будет. Это строго служебная информация. Приведенные выше description и keywords сообщают поисковым системам о содержании данной вебстраницы, а приведенный чуть ниже метатег определяет кодировку русского языка используемую в тексте.

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

ktonanovenkogo.ru


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Adblock
detector