[X] Помощник

[scheff Topic Starter]

HTML теги, о которых вы даже и не знали

Начать хотелось бы с того, что HTML теги это самая основа создания web-сайтов, без знания которых здесь практически нечего делать. Пусть сейчас есть достаточное количество ресурсов, позволяющих создавать сайты без всяких знаний тегов, я считаю, что хороший сайт без этого сделать не получится. Тогда наверное стоит внести ясности в эти понятия: хорошим сайтом я считаю такой, который не находится на бесплатном хостинге и имеет шаблон из паблика. Так вот к этому стоит и вернуться - чтобы создать или переделать уже готовый шаблон для своего сайта вам необходимо разбираться в тегах. Однако в данной статье речь пойдёт немного о другом, а именно о тех тегах, которые редко или практически не используются вэб-мастерами при создании шаблона и написании статей. Таким образом можно разделить все теги на 2 категории: которые используются для визуального оформления сайта, посредством редактирования шаблона и те, которые используются в повседневной жизни - для написания статей и придания им читабельного вида.
В этой статье хотелось бы описать не просто редко используемые теги, а именно те, которые могут вам принести какую-то пользу. В первую очередь это будут те теги, которые могут принести какую-то пользу, а также теги HTML 5, т.к. это новый стандарт и вам всем будет очень интересно о нём узнать.

• 1. address тег очень интересен тем, что в нём можно напрямую указывать как фактический, так и электронный адреса компании или автора сайта. Однако, на практике, этот тег используется очень редк. Проблема использования этого тега возникает при правильном его использовании в сочетании с микроформатом hCard, поскольку упрощает жизнь спамерам.
  
  
  Правила оформления:
  
  

  <address>Ваш адрес</address>

• 2. aside тег служит для обозначения дополнительной информации в статье. По определению этот тег определяет раздел страницы, который имеет косвенное отношение к содержанию вокруг него и может рассматриваться отдельно от содержания страницы. Пример использования - врезки в газетах. Фактически это автономная информация, которая имеет косвенное отношение ко всей статье.
  
  Хороший пример использования это выделение цитаты в статье. Цитата имеет отношение ко всей статье в целом, однако сама по себе несёт какую-то информацию, которую можно рассматривать отдельно.
  
  Правила оформления:
  
  

  <article>
  <p>Начало статьи.</p>
  <aside>
  <q>Цитата.</q>
  </aside>
  <p>Продолжение статьи.</p>
  </article>

• 3. meter тег представляет собой скалярное измерение в пределах заранее известного диапазона или дробное значение. Как пример использования - количество использованного места на локальном диске или процент проголосовавших за того или иного кандидата (очень актуально сейчас, когда идут выборы в США). Однако есть одно "но", этот тег нельзя использовать для вывода веса, роста или высоты, т.е. таких величин, где максимальное значение неизвестно и заранее не может быть определено.
  У тега есть 6 параметров:
  value - фактическое значение вашей величины. Если не задано через параметры, то используется первое число внутри тега: <meter>2 из 10</meter>. Если не определено, то по умолчанию равно 0.
  min - минимально допустимое значение. Если не определено, то равно 0.
  max - максимально допустимое значение. Если не определено, то равно 1. Если максимальное значение меньше минимального, то минимальное значение будет максимальным. Также следует отметить, что если значение параметра value можно определить в величине, например в процентах, то максимальное значение будет равно 100%.
  low - значение в нижней части диапазона данных. Должно быть меньше или равно параметру high. Если значение low меньше минимально возможного, то оно приравнивается к минимальному.
  high - значение в верхней части диапазона данных. Если оно меньше, чем значение low, то high приравнивается к low. Если значение high больше чем максимально возможное, то оно приравнивается к max.
  optimum - оптимальное значение и должно быть в диапазоне между min и max. Однако оно не зависит от low и high, может быть к примеру выше чем high.
  
  Примеры использования:
  Возможно использовать без параметров
  

  <meter>80%</meter>

  
  

  <meter>3/4</meter>

  
  
  Вот пример побольше:
  

  <p>Температура воды</p>
  <meter value="0" max="100" low="10" high="60">Низкая</meter>
  <meter value="30" max="100" low="10" high="60">Нормальная</meter>
  <meter value="80" max="100" low="10" high="60">Горячая</meter>
  <meter value="100" max="100" low="10" high="60">Кипяток</meter>

  
  [IMG]http://s019.radikal.ru/i640/1211/aa/cd6a64689b55.png[/IMG]

• 4. video тег позволяет проигрывать видео на вашем сайте. В качестве данных должно использоваться видео, аудио или фото. Правда у тега video есть один недостаток - не все браузеры могут воспроизводить все форматы видеофайлов, правда это дело времени.
  У тега video есть огромное преимущество, в отличие от тега object, посредством которого раньше выводились видеозаписи, теперь формат вывода существенно сократился.
  
  Пример использования:
  
  

  <video width="640" height="360" src="http://www.youtube.com/demo/google_main.mp4" poster="4.jpg" controls="controls" autobuffer="autobuffer"></video>

  
  [IMG]http://s018.radikal.ru/i517/1211/10/4bd7f38af104.jpg[/IMG]
  
  Аттрибуты:
  autobuffer - Используется отдельно от автозапуска и позволяет загружать видео в фоновом режиме ещё до просмотра пользователем. Если используется одновременно с автозапуском, то автобуферизация игнорируется.
  autoplay - Видео начинает воспроизводиться автоматически после загрузки страницы.
  

  <video src="abc.mov" autoplay=""></video>

  
  controls - Добавляет панель управления к видеоролику.
  height - Задает высоту области для воспроизведения видеоролика.
  loop - Повторяет воспроизведение видео с начала после его завершения.
  poster - Указывает адрес картинки, которая будет отображаться, пока видео не доступно или не воспроизводится.
  preload - Используется для загрузки видео вместе с загрузкой веб-страницы.
  src - Указывает путь к воспроизводимому видеоролику.
  width - Задает ширину области для воспроизведения видеоролика.

• 5. track тег используется внутри тегов <video> и <audio> и позволяет прикрепить к файлу текстовую дорожку.
  
  Через аттрибут kind можно задать значения:
  subtitles - Субтитры (Предназначены для дублирования звуковой дорожки фильма в виде текста на языке оригинала для глухих людей. Также могут содержать перевод на другие языки для тех, кто не знаком с языком оригинала. Текст субтитров выводится поверх видео).
  captions - Заголовки (Дублирование диалогов, звуковых эффектов, музыкального сопровождения в виде текста для тех случаев, когда звук недоступен или для глухих пользователей. Выводится поверх видео, при этом помечается, что подходит для плохо слышащих людей).
  descriptions - Описание (Звуковое описание происходящего в видео для тех случаев, когда изображение недоступно или для слепых людей).
  chapters - Главы (Названия глав используемые для быстрой навигации по видео или аудио. Отображаются в виде списка).
  metadata - Метаданные (Предназначены для использования скриптами и не отображаются в браузере).
  
  Другие аттрибуты:
  src - Путь к файлу с дорожкой.
  srclang - Язык дорожки.
  label - Отображаемое название дорожки. Если этот атрибут не указан, браузер станет использовать значение, которое применяется у него по умолчанию, например «untitled1».
  default - Наличие этого атрибута указывает, что данная дорожка предпочтительна и должна быть выбрана по умолчанию. Только одна дорожка может иметь атрибут default.
  
  Пример использования:
  
  

  <video width="640" height="480" controls="controls">
  <source src="video.mp4" type="video/mp4"></source>
  <source src="video.webm" type="video/webm"></source>
  <track src="subtitles.vtt" kind="subtitles" srclang="en" label="English"></track>
  </video>

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




При поддержке: SeoPult - система автоматизированного продвижения сайтов и управления контекстной рекламой. Обсудить на форуме.

[img]http://www.masterwebs.ru/sp/seopult.gif[/img]

Замечание модератора: Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней. Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой или обратитесь к любому из модераторов.