Перейти к содержимому

Реферальная программа Мегаплана

Партнерская программа Kredov

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

#1 scheff

scheff
  • Пользователь
  • 9 сообщений
  • Репутация: 1
0

Отправлено 08 Ноябрь 2012 - 12:44

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>

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

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

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

    Изображение

    Аттрибуты:
    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 - система автоматизированного продвижения сайтов и управления контекстной рекламой. Обсудить на форуме.

Изображение

 

 

  • 0


Оформление форума – IPBSkins.ru