Как сделать свой тег

Graffiti Tag Generator

Use this Graffiti Tag Generator to find countless random graffiti tags for your next gaming adventure, story or any other kind of project. Enjoy!

Generate graffiti tags

Discover more random names

What is the history behind graffiti tags?

A graffiti tag is the personalized signature of a graffiti artist. A tag is usually two to three letters long, sometimes accompanied by numbers or other characters. The style of a tag reflects the artist’s personality and can be used to identify the work of a particular individual.

Tags first appeared in Philadelphia in the early 1970s. They were originally created as a way for graffiti artists to distinguish their work from that of other writers. As tagging became more popular, it began to spread to other cities across the United States. By the 1980s, tagging had become an international phenomenon, with artists from all over the world using tags to sign their work.

Today, tagging is still an important part of the graffiti subculture. Many artists see it as a way to assert their individuality and creativity. While some people view tags as vandalism, many see them as works of art in themselves.

5 questions to help you come up with graffiti tags

1. What colors do you prefer to work with?
2. Do you prefer block letters or abstract shapes?
3. How do you feel about symbols or symbols in your graffiti tags?
4. Do you prefer to keep the tags simple or intricate?
5. Do you have any other graffiti tags that you have seen that you could use for inspiration?

Can I use the random graffiti tags that this tool creates?

Yes you can. The Story Shack claims no copyright on any of these names, but it is of course possible that some of the values this name generator provides are already owned by anyone else, so please make sure to always do your due diligence.

How many ideas can I generate with this Graffiti Tag Generator?

The Graffiti Tag Generator can generate thousands of ideas for your project, so feel free to keep clicking and at the end use the handy copy feature to export your graffiti tags to a text editor of your choice. Enjoy!

What are good graffiti tags?

There’s thousands of random graffiti tags in this generator. Here are some samples to start:

Как научиться рисовать теги?

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

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

Советы новичкам

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

Можно использовать тушедержатель, тогда рисование на бумаге станет напоминать рисование на стене.

Практика на улице

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

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

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

Меры предосторожности

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

Как сделать свой тег

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

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

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

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

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

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

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

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

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

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

Про шаблоны WordPress

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

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

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

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

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

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

Divya Dev Last updated Jun 24, 2022

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

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

Когда нам нужно сделать текст “жирным”, то мы пользуемся HTML тегом <b> . Если же нужно вывести список, то мы вероятнее всего воспользуемся тандемом <ul> и <li> . Браузеры используют разметку и таблицы стилей CSS, для того чтобы оформить внешний вид страницы, а в некоторых случаях и небольшой функционал.

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

В идеале, решение должно выглядеть как собственный тег — между знаками <> , который будет понятен браузеру. Как и при работе с обычными HTML тегами у нас должна сохраниться возможность многократного использования тегов. Давайте посмотрим на реальный пример!

Пример #1: Создание HTML тега для Gravatar

Давайте создадим свой собственный тег для отображения изображения Gravatar по email адресу. Назовём наш тег <codingdude-gravatar> . Почтовый адрес будем указывать в атрибуте email .

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

Для создания и тестирования нашего собственного тега нужно выполнить несколько шагов:

• Создать отдельную папку; назовём её gravatar-custom-tag .
• Поместить HTML файл под названием index.html в папку gravatar-custom-tag . Тут и будет храниться наш HTML код.
• Создать JS файл под названием codingdude-gravatar.js в папке gravatar-custom-tag . В нём напишем JavaScript код, обеспечивающий работу нашего тега.

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

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

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

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

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

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

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

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

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

На этот раз при загрузке файла index.html в браузере мы увидим Gravatar по заданному email-у:

Пример #2: HTML тег круговой диаграммы

Прошлый пример создания пользовательского HTML тега был довольно-таки прост. Этот же принцип можно применить для создания тега любой сложности.

Теперь давайте реализуем что-то посложнее: круговую диаграмму. Для этого нам понадобится:

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

Пользовательские теги зачастую используются как контейнеры с определённым функционалом. В нашем случае тег будет называться <codingdude-piechart> и представлять собой контейнер с круговой диаграммой. Если вы пропустили мой урок Как рисовать диаграммы с использованием JavaScript и HTML5 Canvas, то можете взглянуть. Мы воспользуемся уже готовым кодом создания графика и поместим его в наш тег.

Поправим файл codingdude-piechart.js и поместим функции из упомянутого урока:

• drawLine()
• drawArc()
• drawPieSlice()
• Piechart()

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

Ширину и высоту графика мы получим из атрибутов width и height . В атрибуте colors поместим список цветов, которыми будут окрашиваться доли.

Как было упомянуто ранее, данный тег сложнее предыдущего, а всё за счёт вложенных тегов. В под-тегах <codingdude-data> мы перечислим данные по которым будет строиться график. Теперь давайте взглянем на код.

Отредактируем файл codingdude-piechart.js и после функции графика вставляем следующий код:

Функций customTag() точно такая же как и в Примере #1. Реализация тега <codingdude-piechart> помещена в функцию PiechartTag() . В частности данная функция:

• Создаёт элемент <canvas> где будет отрисован график. Ширина и высота элемента canvas будет извлечена из атрибутов нашего пользовательского тега.
• Ищет атрибут colors , преобразует его значение в массив цветов для элементов круговой диаграммы.
• Последовательно подгружает элементы <codingdude-data> и помещает их в разметку графика. Текст, указанный в данных элементах будет отображён браузером. Мы этого не хотим, поэтому удалим элементы со страницы после того как извлечём из них значения.
• В конце вызывает конструктор Piechart() с необходимыми параметрами и выполняет функцию draw() для отрисовки графика.

Если зайти на страницу index.html , то можно увидеть следующий круговой график:

Наша круговая диаграмма выглядит очень даже ничего. Изменение значений атрибутов <codingdude-data> приведёт к изменению вида графика. Эта же техника применялась для создания Библиотеки графических объектов и HTML графики на CodeCanyon.

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

В завершении

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

Если вам понравилась эта статья, то у нас есть ещё множество других уроков по HTML5 и схожим темам, так что не пропустите.