Html создаем свой тег

Расширение HTML путем создания пользовательских тегов

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

Что такое пользовательский тег HTML?

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

Иногда одного лишь использования HTML-тега недостаточно для функциональности, необходимой в веб-приложениях. Обычно это решается путем использования нескольких тегов HTML вместе с JavaScript и CSS, но это решение не так уж и элегантно.

Более элегантным решением было бы использование пользовательского тега — идентификатора, заключенного в <> который интерпретируется браузером для отображения нашей предполагаемой функциональности. Как и в случае с обычными HTML-тегами, мы должны иметь возможность использовать пользовательский тег несколько раз на странице, а также у нас должны быть атрибуты тегов и вложенные теги для поддержки функциональности пользовательского тега. Итак, давайте посмотрим на пример!

Пример # 1: Создание пользовательского HTML-тега Gravatar

Давайте создадим пользовательский тег, который будет отображать изображение Gravatar для определенного адреса электронной почты. Мы назовем этот тег и передадим адрес электронной почты в качестве атрибута с именем email .

Вы можете называть свои пользовательские теги как угодно, но следует заметить, что в этом примере имя пользовательского тега начинается с codingdude- . Рекомендуется использовать такие префиксы для своих пользовательских тегов, чтобы избежать конфликтов имен с другими пользовательскими тегами. Кроме того, очевидно, что не стоит использовать имена тегов, которые уже определены в HTML.

Чтобы реализовать и протестировать наш тег, нам нужно создать несколько вещей:

• Одна папка для хранения файлов проекта; давайте назовем эту папку gravatar-custom-tag .
• Один HTML-файл index.html внутри папки gravatar-custom-tag . Этот файл будет содержать код HTML.
• Один файл JS codingdude-gravatar.js внутри папки codingdude-gravatar.js gravatar-custom-tag . Этот файл будет содержать код JavaScript, реализующий пользовательский тег.

Давайте отредактируем файл index.html и сделаем его содержимое таким:

Если мы сейчас загрузим index.html в браузер, результат будет не таким впечатляющим, потому что нам еще предстоит реализовать код для нашего пользовательского тега:

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

Gravatar работает путем преобразования адреса электронной почты в URL-адрес изображения PNG, которое выбрал пользователь. Перевод выполняется путем вычисления MD5-хеша адреса электронной почты. URL-адрес изображения Gravatar выглядит следующим образом: https://www.gravatar.com/avatar/EMAIL_MD5_HASH.png . Итак, сначала нам нужна функция для вычисления хеша MD5 из строки. Для этого мы будем использовать библиотеку с открытым исходным кодом, которую мы добавим в файл index.html следующим образом:

Теперь давайте перейдем к реализации пользовательского тега. Нам нужно будет реализовать код, который сначала идентифицирует наш пользовательский тег в документе, а затем нам нужно реализовать функциональность нашего пользовательского тега. Это все будет в нашем codingdude-gravatar.js и будет выглядеть так:

element.innerHTML = «»;

Рассматривая код, мы видим функцию customTag() которая находит вхождения пользовательского тега по имени (параметр tagName ) и выполняет функции, связанные с этим пользовательским тегом (через параметр fn ).

document.createElement(tagName) необходим для некоторых браузеров (в частности, IE), чтобы сообщить браузеру, что мы будем использовать пользовательский тег с именем tagName , иначе тег может не работать.

Параметр fn — это функция, которая реализует то, что должен делать пользовательский тег. В нашем случае, fn — это codingdudeGravatar() . Эта функция принимает в качестве параметра ссылку на элемент пользовательского тега. Если пользовательский тег имеет атрибут email он передает это значение в функцию md5() из нашей библиотеки с открытым исходным кодом. Затем результат используется для составления URL-адреса изображения Gravatar, которое добавляется через элемент внутри нашего элемента пользовательского тега.

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

Теперь, если мы загрузим наш файл index.html в браузере, мы увидим Gravatar для моей электронной почты:

Пример №2: расширенный пользовательский тег HTML для рисования круговой диаграммы

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

Давайте посмотрим, как реализовать более продвинутый пользовательский тег, который мы можем использовать для рисования круговой диаграммы. Давайте создадим файлы, необходимые для этого пользовательского тега:

• Создайте папку и назовите ее piechart-custom-tag . Это будет папка нашего проекта.
• В piechart-custom-tag создайте файл HTML и назовите его index.html . Этот файл будет содержать код HTML.
• Также создайте файл JavaScript codingdude-piechart.js который будет содержать реализацию нашего пользовательского тега.

Пользовательские теги очень часто используются в качестве оберток для различных функций. В нашем случае мы будем использовать в качестве оболочки для рисования круговой диаграммы. Если вы пропустили мое руководство о том, как рисовать диаграммы с помощью JavaScript и HTML5 Canvas , вы можете быстро взглянуть на него. Мы будем использовать код из этого руководства и обернуть его функциональность в наш пользовательский тег.

Поэтому отредактируйте файл codingdude-piechart.js и добавьте в учебник следующие функции:

Теперь давайте отредактируем файл index.html и разместим пользовательский тег для рисования круговой диаграммы следующим образом:

Источник

Html создаем свой тег

Частная коллекция качественных материалов для тех, кто делает сайты

• Creativo.one2000+ уроков по фотошопу
• Фото-монстр300+ уроков для фотографов
• Видео-смайл200+ уроков по видеообработке
• Жизнь в стиле «Кайдзен» Техники и приемы для гармоничной и сбалансированной жизни

Данная рубрика заменит Вам полноценный «HTML5 учебник». Здесь Вы сможете найти ответы на большинство вопросов, связанных с HTML5.

• 

Расширяем возможности HTML за счёт создания собственных тегов

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

Определение доступности атрибута HTML5 с помощью JavaScript

Сегодня мы посмотрим, как можно организовать проверку доступности атрибута HTML5 с помощью JavaScript. Проверять будем работу элементов details и summary.

Создан: 30 Августа 2016 Просмотров: 14485 Комментариев: 0

HTML5: API работы с вибрацией

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

Создание форм с помощью Webix Framework — 4 практических примера

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

Знакомство с фрэймворком Webix

В этой статье мы бы хотели познакомить вас с фрэймворком Webix. Для демонстрации возможностей данного инструмента мы создадим интерфейс online аудио плеера. Не обольщайтесь — это всего лишь модель интерфейса. Исходный код доступен в демо и на странице GitHub.

Отключение HTML5 валидации

Бесит валидация, которая добавляется к полям формы, если вы пользуетесь HTML5? Её можно без проблем отключить.

Создан: 29 Апреля 2016 Просмотров: 14289 Комментариев: 1

5 устаревших фишек в HTML5

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

Источник

Html создаем свой тег

Частная коллекция качественных материалов для тех, кто делает сайты

• Creativo.one2000+ уроков по фотошопу
• Фото-монстр300+ уроков для фотографов
• Видео-смайл200+ уроков по видеообработке
• Жизнь в стиле «Кайдзен» Техники и приемы для гармоничной и сбалансированной жизни

В этом разделе перечислены все уроки без разделения по рубрикам.

Выбирайте тот урок, который интересует Вас больше всего на данный момент. К каждому уроку Вы можете оставить свой комментарий, а также проголосовать.

Как выбрать хороший хостинг для своего сайта?

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

Создан: 15 Апреля 2020 Просмотров: 10600 Комментариев: 0

Как разместить свой сайт на хостинге? Правильно выбранный хороший хостинг — это будущее Ваших сайтов

Проект готов, Все проверено на локальном сервере OpenServer и можно переносить сайт на хостинг. Вот только какую компанию выбрать? Предлагаю рассмотреть хостинг fornex.com. Отличное место для твоего проекта с перспективами бурного роста.

Создан: 23 Ноября 2018 Просмотров: 18151 Комментариев: 0

Разработка веб-сайтов с помощью онлайн платформы Wrike

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

Почему WordPress лучше чем Joomla ?

Этот урок скорее всего будет психологическим, т.к. многие люди работают с WordPress и одновременно с Joomla, но не могут решится каким CMS пользоваться.

Создан: 26 Августа 2017 Просмотров: 28585 Комментариев: 0

Про шаблоны WordPress

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

Создан: 3 Августа 2017 Просмотров: 26536 Комментариев: 0

Анимация набора текста на jQuery

Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.

Самые первые настройки после установки движка WordPress

Сегодня мы вам расскажем какие первые настройки нужно сделать после установки движка WordPress. Этот урок будет очень полезен для новичков.

Источник