HTML - Criando Suas Próprias Tags e Atributos

XSystemX

Honrado XPZ
14 de Julho de 2012
83
43
18
25
Pessoal encontrei um tutorial muito interessante de como criar tags e atributos personalizados.

O HTML é uma linguagem de marcação de texto onde suas tags e atributos já vem com funcionalidades pré-definidas. Cada tag tem uma funcionalidade, e cada atributo também.

Neste tutorial vou mostrar como criar tags e atributos para o HTML, e também como adicionar funcionalidades a essas tags e atributos utilizando JavaScript.

Para começar vou criar uma tag chamada anchor, que vai se equivalente a tag a que já existe no HTML. Também vou criar dois atributos para essa tag: address (endereço), que vai ser equivalente ao atributo href da tag a; e place (lugar), que vai ser equivalente ao atributo target da tag a.

<anchor address='http://websnoolp.com' place='_blank'>WebSnoolp</anchor>Agora que a tag anchor e seus atributos foram criados, vou aplicar algum estilo nesta tag para que ela fique de fato parecida com um link.

anchor {
color: blue;
text-decoration: underline;
cursor: pointer;
}Com a tag já criada e os estilos já aplicados, só falta adicionar funcionalidades a esta tag e isso vai ser feito utilizando o JavaScript e com o código que você pode ver logo abaixo.

window.onload = function() {
var anchor = document.getElementsByTagName("anchor")[0];
anchor.onclick = function() {
var target = this.getAttribute('place') || '_self';
window.open(this.getAttribute('address'), target);

localStorage.color = '#551A8B';
};

if (localStorage.color) {
anchor.style.color = localStorage.color;
}

anchor.onmousedown = function() {
this.style.color = 'red';

document.onmouseup = function() {
anchor.style.color = localStorage.color ? localStorage.color : 'blue';
}
};

anchor.onmouseup = function() {
this.style.color = localStorage.color ? localStorage.color : 'blue';
};
};Como esse código acima, a tag anchor está fazendo a mesma coisa que a tag a, que é nativa do HTML, faz. Para isso ela está recebendo o estilo por parte do css, e as funcionalidades por parte do JavaScript. Outra coisa, as tags nativas do html, recebem estilos e funcionalidades por parte do css e do javascript; da mesma forma que acontece com a tag anchor, pois as tags e os atributos são só marcações de texto.

Créditos: 

Autor original: Adriano Oliveira (
Você não tem permissão para ver o link. Faça o login ou registre-se agora.
)