index.html

﻿<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="js/jquery.min.js"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-51BC7LZFC2"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-51BC7LZFC2');
</script>
<script type="text/javascript" src="plugins/Popper.js/popper.min.js"></script>
<script type="text/javascript" src="plugins/Bootstrap/js/bootstrap.min.js"></script>
<script src="plugins/Bootstrap/themes/material/js/material.min.js"></script>
<zeronet><script type="text/javascript" src="js/ZeroFrame.js"></script>
<script type="text/javascript" src="plugins/ZeroDevLib/ZeroPage.js"></script></zeronet>
<script type="text/javascript" src="js/page-common.js"></script>
<link href="plugins/Bootstrap/themes/material/css/material.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/page-common.css">
<link rel="stylesheet" type="text/css" href="css/app-common.css">
<link rel="stylesheet" type="text/css" href="css/page-custom.css">
<link rel="stylesheet" type="text/css" href="css/app-custom.css">
<link href="fonts/Cabin/font.css" rel="stylesheet">
<link href="fonts/Roboto/font.css" rel="stylesheet">
<link href="fonts/Material Icons/font.css" rel="stylesheet">
<link href="fonts/Sui Generis V2/font.css" rel="stylesheet">
<zeronet><link href="fonts/Text Me One/font.css" rel="stylesheet"></zeronet>
<link rel="icon" href="icon.png" />
<link rel="logo" href="icon.svg" border="true" />
<title color="#fff">Plasmmer Experimental HTML</title>
<meta name="pehtml" content="true">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
<meta name="directory" content="css, js, img, snd">
<meta name="description" content="O PEHTML não é uma versão nova do HTML, e sim tags modernas porém ainda experimentais desenvolvidas pela Plasmmer com o intuito de facilitar, simplificar, complementar e agilizar a Web.">
<meta name="keywords" content="HTML5, experimental, semantic, markup language, tags">
</head>
<body>

<header><logo></logo><span class="badge">v2</span></header>

<div class="content">
<article>
<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <h4 class="alert-heading">Please don't screenshot 📸</h4>
  <p>🚧 Site is under construction 🚧👷‍♀️🏗</p>
  <p>This site has been made in 2012-2018, and may be rebuilt from scratch, and work alongside <a href="https://github.com/PlasmmerDev/DML" target="_blank">DML</a>.</p>
  <p>Subscribe for news, here: <a href="https://twitter.com/PlasmmerDev/" target="_blank">https://twitter.com/PlasmmerDev/</a>.</p>
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<nopehtml><blockquote style="background:#D6D6D6;border-top:1px solid #E7534F;border-bottom:1px solid #E7534F;border-left:10px solid #E7534F;border-right:10px solid #E7534F;border-radius:20px;margin:0 auto;text-align:center"><div style="margin-top: -7px;margin-left: 5px;width: 80px;height: 80px;clear: left;float: left"><img src="img/warning.svg" width="80px" height="80px"></div><h1 style="font-size:40px;margin-top:-5px;margin-bottom:-1px">Warning</h1><br>Your browser don't supports sites built with PEHTML. This means that this site could not be shown completly in your current browser. <br><img src="img/ib.svg" width="16" height="16"> <a href="../boat">Download the Internet Boat browser</a> to enjoy the whole power of PEHTML and all the features of this site.<br><p>Don't know what is PEHTML? Learn <a href="https://plasnerd.github.io/PEHTML/" target="blank">here</a>.</p></blockquote></nopehtml>
<h1><i class="material-icons">info</i> O que é o PEHTML</h1>
<p>PEHTML é o acrônimo de Plasmmer Experimental HTML. São tags HTML modernas porém ainda experimentais, desenvolvidas pela Plasmmer. Novas tags meta, para design, localização de arquivos e semânticas.<br>Esta página é recomendada para todos os desenvolvedores web e programadores de navegadores. Segue abaixo a lista dos navegadores que atualmente suportam o PEHTML:</p>
<blockquote class="browsers"><img src="img/ib.svg" width="16" height="16"> Internet Boat <span class="badge green" title="Pontuação obtida no PEHTML Test (Under construction)">?</span></blockquote>

<h1><i class="material-icons">create</i> Começando</h1><br>
<h2><i class="material-icons">code</i> Meta tag do PEHTML</h2>
<p>Para avisar aos usuários e desenvolvedores de que seu site possui conteúdo em PEHTML, utilize essa meta tag:</p>
<textarea onclick="this.focus();this.select()" readonly="readonly" style="margin:6px 41px;width: 392px;height:16px">&lt;meta name="pehtml" content="true"&gt;</textarea>

<h2><i class="material-icons">info</i> Aviso para navegadores que não suportam o PEHTML</h2>
<p>Como você observou anteriormente, uma mensagem é exibida no topo dessa página, avisando ao visitante que o navegador dele não suporta o PEHTML.<br>Para inserir uma mensagem como essa em seu site, utilize essa tag:</p>
<blockquote>&lt;nopehtml&gt;Sua mensagem personalizada aqui&lt;/nopehtml&gt;<script language="JavaScript"> function abrir(URL) {  var width = 570;  var height = 420;  var left = 99;  var top = 99;  window.open(URL,'janela', 'width='+width+', height='+height+', top='+top+', left='+left+', scrollbars=yes, status=no, toolbar=no, location=no, directories=no, menubar=no, resizable=no, fullscreen=no'); } </script> <a href="javascript:abrir('nopehtml.html');"><button class="color sticky left">Você pode usar o mesmo código utilizado nesta página!</button></a></blockquote>

<h1><i class="material-icons">web</i> Tags estruturais</h1><br>
<p>Utilizando o script, a meta tag e a <code>&lt;nopehtml&gt;</code>, você já estará pronto para utilizar o PEHTML com maestria em seu site. Seguem abaixo todas as tags do PEHTML, com suas descrições e links para suas próprias páginas com maiores informações:</p>
<h2>Abas</h2>
<p>Com essas tags, você pode personalizar o fundo, a cor do texto e o ícone da aba de seu site.</p>
<blockquote>&lt;link rel="logo" href="icon.svg" border="true" /&gt;<span> Este é o ícone que aparecerá na aba, ao lado do título do site. Ao você arrastar a aba para a barra de tarefas, poderá fixar o site como um aplicativo. Para tal, esse ícone deverá estar no formato .SVG e ser responsivo. Os padrões do PEHTML suportam ícones animados e a API de ícones dinâmicos. The <code>border</code> attribute defines if the icon will have a border in the case of favicon being in same color of the tab, and this border can be is black/white depending on tab's color intensity.</span><br><strike>&lt;browsertab color="#CD5C5C"&gt;&lt;/browsertab&gt;</strike> <span class="badge">DEPRECATED</span><span> Marca a cor da aba do site. Quando o site for fixado como um aplicativo, essa será a cor da tile e da caixa de ferramentas do aplicativo. Caso não seja utilizada essa tag, a cor padrão será baseada na cor predominante do ícone do site. <b>UPDATE</b>: Now it is available for Progressive Web App developers to use in <code>manifest.json</code> using <code>"theme_color": "#295596"</code>.</span><br>&lt;title color= "#fff"&gt;Título do site&lt;/title&gt;<span> Marca a cor do título do site, caso o administrador queira fazer um contraste no design da aba. Quando o site for fixado como um aplicativo, essa será a cor do título da tile/caixa de ferramentas do aplicativo. Caso não seja utilizada essa tag, a cor padrão será preto/branco.</span><br><span></span><br><br><span></span><span></span><a href="customtab.html" target="blank"><button class="color sticky">E aí, vai rolar um teste?</button></a></blockquote>

<h2>Logo</h2>
<p>Essa tag estrutural serve para marcar o logo do cabeçalho principal do site.</p>
<textarea onclick="this.focus();this.select()" readonly="readonly" style="margin:6px 41px;width: 392px;height:16px">&lt;logo&gt;&lt;/logo&gt;</textarea>

<h2>Comments</h2>
<p>No HTML5, foi incluida a tag semântica &lt;article&gt; para postagens. No PEHTML também foi incluida a tag &lt;comments&gt; para os comentários.</p>
<textarea onclick="this.focus();this.select()" readonly="readonly" style="margin:6px 41px;width: 392px;height:16px">&lt;comments&gt;&lt;/comments&gt;</textarea>

<h1>Tags meta</h1><br>
<h2>Tag encurtada para arquivos externos <span class="badge">BETA</span></h2>
<p>Para carregar arquivos CSS, JS, imagens, sons e outros arquivos em massa - com uma simples tag - apontando para um diretório. Todos os arquivos desse local serão carregados no site.<br>O carregamento de recursos externos irá simplificar o código-fonte e agilizar o carregamento da página.</p>
<blockquote>&lt;meta name="directory" content="folder"&gt;<span> Em <i>content</i>, o valor é o endereço/nome da pasta em que os arquivos se localizam.</span></blockquote>
 <p><span class="badge">NEW</span> You can point to more than one folder by using commas, like: <code>&lt;meta name="directory" content="css, js, img, snd"&gt;</code>.</p>

<h2>Rating <span class="badge">BETA</span></h2>
<p>Uma forma de classificar a página quanto à censura, tanto em navegadores quanto em mecanismos de busca. Em sistemas operacionais/navegadores modernos, haverá integração com o Controle Parental e evitarão com que a educação dos pais seja violada ou que haja constrangimentos públicos. Essa tag também serve para livrar as pessoas de tópicos os quais ela deseja evitar ou para que sites emitam avisos sobre o conteúdo.<br>No PEHTML, 8 valores para o <i>content</i> foram acrescentados para essa tag, como segue abaixo:</p>
<blockquote>&lt;meta name="rating" content="chock"&gt;<span> Informa quando um site possui conteúdo chocante (cenas fortes), não recomendado para pessoas mais frágeis sentimentalmente.</span> <span class="badge mini" title="Essa tag redireciona o site para uma página de aviso do navegador">REDIRECT</span> <span class="badge blue mini" title="Essa tag dependerá das configurações do usuário, incluindo o Controle Parental">PARENTAL CONTROL</span>
<br>&lt;meta name="rating" content="porn"&gt;
<span> Informa quando um site possui conteúdo pornográfico.</span> <span class="badge mini" title="Essa tag redireciona o site para uma página de aviso do navegador">REDIRECT</span> <span class="badge blue mini" title="Essa tag dependerá das configurações do usuário, incluindo o Controle Parental">PARENTAL CONTROL</span><br>&lt;meta name="rating" content="hentai"&gt;<span> Informa quando um site possui pornografia em mangá/animê.</span> <span class="badge mini" title="Essa tag redireciona o site para uma página de aviso do navegador">REDIRECT</span> <span class="badge blue mini" title="Essa tag dependerá das configurações do usuário, incluindo o Controle Parental">PARENTAL CONTROL</span><br>&lt;meta name="rating" content="ecchi"&gt; <span class="badge mini" title="Essa tag redireciona o site para uma página de aviso do navegador">REDIRECT</span> <span class="badge blue mini" title="Essa tag dependerá das configurações do usuário, incluindo o Controle Parental">PARENTAL CONTROL</span><br>&lt;meta name="rating" content="yaoi"&gt; <span class="badge mini" title="Essa tag redireciona o site para uma página de aviso do navegador">REDIRECT</span> <span class="badge blue mini" title="Essa tag dependerá das configurações do usuário, incluindo o Controle Parental">PARENTAL CONTROL</span><br>&lt;meta name="rating" content="yuri"&gt; <span class="badge mini" title="Essa tag redireciona o site para uma página de aviso do navegador">REDIRECT</span> <span class="badge blue mini" title="Essa tag dependerá das configurações do usuário, incluindo o Controle Parental">PARENTAL CONTROL</span><br>&lt;meta name="rating" content="humor"&gt; <span> Informa quando um site possui conteúdo humorístico/satírico.</span> <span class="badge mini" title="Essa tag exibe um aviso em forma de popup/notificação">POPUP</span>
<br>&lt;meta name="rating" content="promiscuous"&gt; <span> Informa quando um site possui conteúdo devasso, com duplos-sentidos, palavrões e dentre outras coisas do gênero.</span> <span class="badge mini" title="Essa tag redireciona o site para uma página de aviso do navegador">REDIRECT</span> <span class="badge blue mini" title="Essa tag dependerá das configurações do usuário, incluindo o Controle Parental">PARENTAL CONTROL</span></blockquote>

<h1>Mais</h1><br>
<h2>Selo do PEHTML</h2>
<img src="img/seal-2.png" width="167px" height="94px" title="Built with PEHTML" style="-webkit-user-drag:element">
<br><textarea onclick="this.focus();this.select()" readonly="readonly" style="margin:6px 41px;width: 392px;height: 70px;">&lt;a href="https://pehtml.eth.link/" target="blank"&gt;&lt;img src="https://pehtml.eth.link/img/seal-2.png" width="167px" height="94px" title="Built with PEHTML" style="-webkit-user-drag:element"&gt;&lt;/a&gt;</textarea>
<h2>Badge</h2>
<img src="https://img.shields.io/badge/built%20with-PEHTML%20(v2)-295596.svg" style="-webkit-user-drag:element"><br><textarea onclick="this.focus();this.select()" readonly="readonly" style="margin:6px 41px;width: 392px;height: 58px;">&lt;a href="https://pehtml.eth.link/" target="blank"&gt;&lt;img src="https://img.shields.io/badge/built%20with-PEHTML%20(v2)-295596.svg"&gt;&lt;/a&gt;</textarea>
</article>

<comments>
<h1 id="comments">Comments <span class="badge"><a href="https://plasnerd.github.io/PEHTML#disqus_thread">Loading...</a></span></h1>
<blockquote>
<div id="disqus_thread"></div>
<script>

/**
*  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
*  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
/*
var disqus_config = function () {
this.page.url = PAGE_URL;  // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
*/
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = 'https://pehtml.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
                            
</blockquote>

</comments>

<footer>
<div class="footer-shadow"></div>
<center>Atualizado em 25/08/2018 às 22:41</center>
<a href="https://plasnerd.github.io/Framework.js/" target="blank" class="no-opacity"><img src="https://plasnerd.github.io/Framework.js/img/seal-1.png" width="167px" height="94px" title="Built with FrameworkJS" style="-webkit-user-drag:element"></a> <img src="img/seal-2.png" width="167px" height="94px" style="-webkit-user-drag:element">
<div class="social-icons"><a href="https://github.com/Plasnerd/PEHTML" target="blank"><img src="img/social/github.svg" width="40px" height="40px" title="See first the news and improve PEHTML in GitHub" alt="GitHub"/></a><!--<a href="https://facebook.com/PlasmmerDevelopers" target="blank"><img src="img/social/facebook.svg" width="40px" height="40px" title="Like us and receive latest news feed about PEHTML progress and other development tools" alt="Facebook"/></a><a href="https://twitter.com/PlasmmerDevelopers" target="blank"><img src="img/social/twitter.svg" width="40px" height="40px" title="Follow us and receive latest news feed about PEHTML progress and other development tools" alt="Twitter"></a><a href="https://ask.fm/PlasmmerDevelopers" target="blank"><img src="img/social/ask.svg" width="40px" height="40px" title="Follow/Ask us and receive latest answers for PEHTML and other development tools" alt="Ask.fm"></a><a href="https://plasmmer.deviantart.com" target="blank"><img src="img/social/deviantart.svg" width="40px" height="40px" title="Follow us and receive latest backgrounds, designs and apps" alt="Deviantart"></a>--></div><div class="social-buttons"></div>
<copyright><center>Importante: O PEHTML não é uma versão nova do HTML, e sim tags experimentais criadas pela Plasmmer com o intuito de facilitar, simplificar, complementar e agilizar a Web. O PEHTML não pertence e nem possui ligações com a <a href="http://www.w3.org/" target="blank">W3C</a>.<br/>(c) 2012-2021 PEHTML by <a href="https://developers.plasmmer.eth.link/" target="blank"><small>Plasmmer Developers</small></a>.</center></copyright>
</footer>
</div>
<script id="dsq-count-scr" src="//pehtml.disqus.com/count.js" async></script>
</body>
</html>