<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wikipédia Moderna</title>
<link rel="shortcut icon" href="assets/favicon.png" type="image/x-icon">
<style>
@import url('https://fonts.googleapis.com/css2?family=Libre+Bodoni:ital,wght@0,400..700;1,400..700&display=swap');
</style>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<figure>
<img src="assets/logo header.png" alt="">
<img id="logo-2" src="assets/logo header.png" alt="">
<h1>Wikipédia - A enciclopédia livre</h1>
</figure>
</header>
<main>
<nav class="barra">
<h2 id="fixo">Conteúdo</h2>
<hr>
<ul class="bar">
<li><a href="#inicio">Início</a></li>
<li><a href="#historia">História</a></li>
<li><a href="#descricao">Descrição</a></li>
<li><a href="#exemplo">Exemplos de códigos</a></li>
<li><a href="#popularidade">Popularidade</a></li>
<li><a href="#novos">Novos elementos</a></li>
</ul>
</nav>
<nav class="pincipal">
<h1 id="inicio">HTML5</h1>
<hr>
<p>HTML5 (Hypertext Markup Language, versão 5) é uma linguagem de marcação para a World Wide Web e é uma tecnologia chave da Internet, originalmente proposto por Opera Software.É a quinta versão da linguagem HTML. Esta nova versão traz consigo importantes mudanças quanto ao papel do HTML no mundo da Web, através de novas funcionalidades como semântica e acessibilidade. Possibilita o uso de novos recursos antes possíveis apenas com a aplicação de outras tecnologias. Sua essência tem sido melhorar a linguagem com o suporte para as mais recentes multimídias, enquanto a mantém facilmente legível por seres humanos e consistentemente compreendida por computadores e outros dispositivos (navegadores, parsers etc). O HTML5 será o novo padrão para HTML, XHTML, e HTML DOM. Atualmente, está em fase de esboço, porém diversos navegadores já implementam algumas de suas funcionalidades. <br> <br>
Após seus predecessores imediatos HTML 4.01 e XHTML 1.1, HTML5 é uma resposta à observação de que o HTML e o XHTML, de uso comum na World Wide Web, é uma mistura de características introduzidas por várias especificações, juntamente com aquelas introduzidas por software, tais como os navegadores, aqueles estabelecidos pela prática comum, e os muitos erros de sintaxe em documentos existentes na web. É, também, uma tentativa de definir uma única linguagem simples de marcação que possa ser escrita em HTML ou em sintaxe XHTML. Isso inclui modelos de processamento detalhados para incentivar implementações mais interoperáveis; isso estende, melhora e racionaliza a marcação disponível para documentos, e introduz marcações e interfaces de programação de aplicações (APIs) para aplicações web complexas. Pelas mesmas razões, HTML5 também é um candidato em potencial aplicações multi-plataforma móveis. Muitos recursos do HTML5 tem sido construídos com a consideração de ser capaz de executar em dispositivos de baixa potência como smartphones e tablets. <br> <br>
Em particular, HTML5 adiciona várias novas funções sintáticas. Elas incluem as tags de <code> < video >, < audio >, < header > </code>e elementos <code>< canvas ></code>, assim como a integração de conteúdos SVG que substituem o uso de tags <code>< object ></code> genéricas. Estas funções são projetadas para tornar mais fácil a inclusão e a manipulação de conteúdo gráfico e multimídia na web sem ter de recorrer a plugins proprietários e APIs. Outros novos elementos, como <code>< section >, < article >, < header > e < nav ></code>, são projetados para enriquecer o conteúdo semântico dos documentos. Novos atributos têm sido introduzidos com o mesmo propósito, enquanto alguns elementos e atributos têm sido removidos. Alguns elementos, como <code>< a >, < cite > e < menu ></code> têm sido mudados, redefinidos ou padronizados. As APIs e os modelos de objetos de documentos (DOM) não são mais pensamentos retrógrados, mas são partes fundamentais da especificação do HTML5. HTML5 também define com algum detalhe o processamento necessário para que erros de sintaxe de documentos inválidos sejam tratados uniformemente por todos os browsers e outros agentes de usuários em conformidade com o HTML5.</p>
<figure>
<img class="principal-img" src="assets/logo html5.png" alt="Logo HTML5">
</figure>
<h1 id="historia">História</h1>
<hr>
<p>O Web Hypertext Application Technology Working Group (WHATWG) iniciou o trabalho do novo padrão HTML em 2004, quando o World Wide Web Consortium (W3C) estava se concentrando no futuro desenvolvimento do XHTML 2.0, e o HTML 4.01 não tinha sido atualizado desde 2001. Em 2009, o W3C decidiu que o Grupo de Trabalho do XHTML 2.0 deveria parar seus trabalhos, e assim, descontinuar o padrão. Desta forma o W3C e o WHATWG passaram a trabalhar juntas no desenvolvimento do HTML5. <br> <br>
O projeto do HTML5 foi bem recebido pelos desenvolvedores Web até então, e tornou-se tema na mídia em abril de 2010 depois que o CEO da Apple Inc., Steve Jobs emitiu uma carta pública intitulada "Reflexões sobre o Adobe Flash", onde ele conclui que o desenvolvimento do HTML5 tornaria o Adobe Flash desnecessário, tanto para assistir vídeo ou mesmo exibir qualquer conteúdo web. Isso provocou um debate entre os desenvolvedores Web, onde muitos sugeriram que, enquanto o HTML5 proporcionasse uma melhor funcionalidade, a variedade de browsers existentes exibiria páginas diferentes, tendo um resultado diferente em cada navegador e não se conseguiria de fato chegar a um padrão. No início de novembro de 2011 a Adobe anunciou que iria interromper o desenvolvimento de Flash para dispositivos móveis e redirecionar seus esforços para o desenvolvimento de ferramentas utilizando HTML5.</p>
<h1 id="descricao">Descrição</h1>
<hr>
<p>No início de 2008 o W3C – consórcio de empresas de tecnologia que coordena os padrões da internet quanto a linguagem – anunciou a primeira especificação do HTML5. O HTML, responsável por organizar e formatar as páginas que visitamos na Internet, está em sua versão 4.0.1 e continua evoluindo. Após cinco anos de trabalho, desde 2008 está em fase de esboço, enquanto a versão final está prevista para 2014. Foram feitas grandes alterações, que incluem:
<ul>
<li>Novas API’s, entre elas uma para desenvolvimento de gráficos bidimensionais</li>
<li>Controle embutido de conteúdo multimídia</li>
<li>Aprimoramento do uso offline</li>
<li>Melhoria na depuração de erros</li>
</ul>
Esta evolução da linguagem padrão para web pode eliminar a necessidade de plug-ins para aplicações multimídia em navegadores. Diversos críticos consideram a tecnologia como um forte concorrente ao Flash, da Adobe, ao Silverlight, da Microsoft, e ao recente JavaFX, da Sun (Oracle). Recentemente, Shantanu Narayen, diretor executivo da Adobe, disse que o Flash não iria perder mercado, porém a versão 5 do HTML já está sendo chamada de "Flash-killer" (Assassino do Flash). Estas tecnologias precisarão se adaptar rapidamente para conseguir manter-se no mercado, tão populares quanto hoje. Na avaliação do co-diretor de ferramentas da Mozilla, Ben Galbraith, as tecnologias viabilizadas pelo HTML5 como o Canvas para desenhos 2D e o armazenamento de conteúdos no desktop, permitirão que "usemos mais o browser do que nunca". <br> <br>
Após dez anos sem atualizações, como se escreve páginas na internet passa por uma boa transformação. O HTML5 oferece uma experiência web totalmente diferente para usuários e embora exista um longo caminho para ser finalizado, muitos navegadores importantes, como Internet Explorer 9, Opera, Safari 4, Firefox 3.6 e Chrome já implementaram grandes partes da linguagem, incluindo tags de vídeo e suporte à tecnologia Canvas. Com a evolução da linguagem, os navegadores passam da categoria "mostradores" de páginas para um renderizador de "web software". <br> <br>
Assim como surgiram as app stores para aplicações nativas, existem appstores especificas para aplicações HTML5, os desenvolvedores podem utilizar a audiência das appstores para distribuir seu aplicativo e também fazer cobrança (as appstores oferecem integrações para permitir a cobrança). Como, por exemplo, a Zeewe, loja de apps HTML5 focada em smartphones.</p>
<h1 id="exemplo">Exemplo de códigos HTML5</h1>
<hr>
<p>Códigos para teste de HTML5:</p>
<fieldset>
<code>
< !DOCTYPE html > <br>
< html lang="pt-BR" > <br>
< head > <br>
< meta charset="UTF-8" > <br>
< title >Teste de Página< /title > <br>
< /head > <br>
< body > <br>
< h5 > Teste de página < /h5 > <br>
< p > Um teste de página < /p > <br>
< p > < i > Este texto está em itálico < /i > < /p > <br>
< /body > <br>
< /html > <br>
</code>
</fieldset>
<h1 id="popularidade">Popularidade</h1>
<hr>
<p>De acordo com um relatório divulgado em 30 de setembro de 2011, 34% dos 100 melhores Web sites do mundo estavam usando HTML5– a adaptação foi liderada por mecanismos de busca e redes sociais. Em 20 de outubro de 2011, o Facebook anunciou o lançamento do Centro de Recursos HTML, dando aos desenvolvedores ferramentas para construir, testar e implementar aplicações para o Facebook.</p>
<h1 id="novos">Novos elementos do HTML5</h1>
<hr>
<table>
<tr>
<th>Elemento</th>
<th>Definição</th>
</tr>
<tr>
<td class="td-element"><code>< article ></code></td>
<td>Define um artigo em um documento</td>
</tr>
<tr>
<td class="td-element"><code>< aside ></code></td>
<td>Define um conteúdo, a parte, do conteúdo da página</td>
</tr>
<tr>
<td class="td-element"><code>< bdi ></code></td>
<td>Define um texto que pode ser formatado em diferentes direções</td>
</tr>
<tr>
<td class="td-element"><code>< details ></code></td>
<td>Define detalhes adicionais que o usuário pode ver ou ocultar</td>
</tr>
<tr>
<td class="td-element"><code>< dialog ></code></td>
<td>Define uma caixa de diálogo ou janela</td>
</tr>
<tr>
<td class="td-element"><code>< figcaption ></code></td>
<td>Define uma legenda para um elemento <code>< figure ></code></td>
</tr>
<tr>
<td class="td-element"><code>< figure ></code></td>
<td>Define um conteúdo como ilustrações, diagramas, fotos, códigos, listagens, etc.</td>
</tr>
<tr>
<td class="td-element"><code>< footer ></code></td>
<td>Define o rodapé do documento ou seção</td>
</tr>
<tr>
<td class="td-element"><code>< header ></code></td>
<td>Define um cabeçalho para o documento ou uma seção</td>
</tr>
<tr>
<td class="td-element"><code>< main ></code></td>
<td>Define o conteúdo principal de um documento</td>
</tr>
<tr>
<td class="td-element"><code>< mark ></code></td>
<td>Define um texto marcado ou realçado</td>
</tr>
<tr>
<td class="td-element"><code>< menuitem ></code></td>
<td>Define um commando/menu que pode ser usado para invocar um menu popup</td>
</tr>
<tr>
<td class="td-element"><code>< meter ></code></td>
<td>Define uma medida escalar dentro de uma faixa conhecida</td>
</tr>
<tr>
<td class="td-element"><code>< nav ></code></td>
<td>Define links de navegação no documento</td>
</tr>
<tr>
<td class="td-element"><code>< progress ></code></td>
<td>Define o progresso de uma tarefa</td>
</tr>
<tr>
<td class="td-element"><code>< rp ></code></td>
<td>Define o que exibir em navegadores que não exibem anotações ruby (anotações ruby são para mostrar a pronúncia de caracteres do Leste Asiático.)</td>
</tr>
<tr>
<td class="td-element"><code>< rt ></code></td>
<td>Define a pronúncia de um caractere (para tipografias do Leste Asiático)</td>
</tr>
<tr>
<td class="td-element"><code>< ruby ></code></td>
<td> Define uma anotação ruby (para tipografia do Leste Asiático)</td>
</tr>
<tr>
<td class="td-element"><code>< section ></code></td>
<td>Define uma seção no documento</td>
</tr>
<tr>
<td class="td-element"><code>< summary ></code></td>
<td>Define um título visível para um elemento <code> < details ></code></td>
</tr>
<tr>
<td class="td-element"><code>< time ></code></td>
<td>Define uma data/hora</td>
</tr>
<tr>
<td class="td-element"><code>< wbr ></code></td>
<td>Define uma possível quebra de linha</td>
</tr>
<tr>
<td class="td-element"><code>< datalist ></code></td>
<td>Lista opções predefinidas para controles inputs</td>
</tr>
<tr>
<td class="td-element"><code>< keygen ></code></td>
<td>Define um campo de gerador de par de chaves (para formulários)</td>
</tr>
<tr>
<td class="td-element"><code>< output ></code></td>
<td>Define o resultado de um cálculo</td>
</tr>
<tr>
<td class="td-element"><code>< canvas ></code></td>
<td>Define um desenho gráfico usando JavaScript</td>
</tr>
<tr>
<td class="td-element"><code>< svg ></code></td>
<td>Define um desenho gráfico usando SVG</td>
</tr>
<tr>
<td class="td-element"><code>< audio ></code></td>
<td>Define um conteúdo de som ou música
</td>
</tr>
<tr>
<td class="td-element"><code>< embed ></code></td>
<td>Define um contêiner para aplicações externas (como plug-ins)</td>
</tr>
<tr>
<td class="td-element"><code>< source ></code></td>
<td>Define fonte para <code> < video > e < audio ></code></td>
</tr>
<tr>
<td class="td-element"><code>< track ></code></td>
<td>Define faixas para <code> < video > e < audio ></code></td>
</tr>
<tr>
<td class="td-element"><code>< video ></code></td>
<td>Define conteúdo de vídeo ou filme</td>
</tr>
</table>
</nav>
<nav class="anchors">
<h2>Neste Artigo</h2>
<hr>
<ul>
<li><a href="https://pt.wikipedia.org/wiki/Wikip%C3%A9dia:P%C3%A1gina_principal">Wikipédia</a></li>
<li><a href="https://pt.wikipedia.org/wiki/HTML5#">HTML5 - Wikipédia</a></li>
<li><a href="https://www.w3.org/">W3C</a></li>
</ul>
</nav>
</main>
<footer>
<p>Esta página foi editada pela última vez 23h23min de 17 de março de 2025. <br>
Este site foi baseado no site <a href="https://pt.wikipedia.org/wiki/Wikip%C3%A9dia:P%C3%A1gina_principal">Wikipédia.</a>
</p>
<p>Site desenvolvido por <strong>©Kayky Sousa - Fullstack Developer</strong>.</p>
</footer>
</body>
</html>
header{
position: sticky;
top: 0;
background-image: linear-gradient(to bottom, rgb(211, 211, 211), rgb(110, 109, 109));
padding: 15px;
}
header img{
width: 65px;
float: inline-start;
}
#logo-2{
width: 65px;
float: inline-end;
}
header h1{
text-align: center;
font-family:'Libre Bodoni';
}
main{
max-width: 1440px;
margin: auto;
grid-gap: 3rem;
display: grid;
gap: 3rem;
grid-template-areas: "sidebar main anchors";
grid-template-columns: minmax(0,15rem) minmax(0,2.5fr) minmax(0,15rem);
padding-left: 1rem;
padding-right: 1rem;
}
.principal-img{
margin: auto;
display: block;
}
table{
border-collapse: separate;
border-spacing: 0;
border: 1px solid #ddd;
border-radius: 10px;
overflow: hidden;
}
tr{
background-color: #f2f2f2;
border: 1px solid #ddd
}
th{
background-color: #4CAF50;
color: white;
text-align: center;
padding: 20px;
}
td{
border: 1px solid #ddd;
}
.td-element{
background-color: rgba(117, 117, 117, 0.608);
}
.barra{
border-right: solid 1px black;
padding-right: 15px;
}
.barra a{
color: blue;
text-decoration: none;
}
#fixo{
text-align: left;
}
.bar h2, ul, a{
position: fixed;
}
.anchors{
border-left: solid 1px black;
padding-left: 15px;
}
.anchors a{
color: blue;
text-decoration: none;
}
footer{
background-color: rgb(137, 134, 134);
}
footer p, a{
color: white;
text-align: center;
}
