Artigo original: The Best HTML Examples and HTML5 Examples
O HTML fornece a estrutura para os sites da web. Aqui temos alguns exemplos de como usar a sintaxe do HTML para construir sites, incluindo alguns exemplos de novos recursos do HTML5.
Exemplo de atributo a href
O atributo <a href> refere-se ao destino fornecido por um link. A tag a (âncora) é inútil sem o atributo <href>. Às vezes, no seu fluxo de trabalho, você não quer um link ativo ou você não sabe ainda o link de destino. Neste caso, será útil definir o atributo href como "#" para criar um link inativo. O atributo href pode ser usado para vincular a arquivos locais ou arquivos na internet.
Por exemplo:
<html>
<head>
<title>Exemplo do atributo href</title>
</head>
<body>
<h1>Exemplo do atributo href</h1>
<p>
<a href="https://www.freecodecamp.org/contribute/">A página de contribuição do freeCodeCamp</a>
mostra para você como e onde você pode contribuir com a comunidade e com o crescimento do freeCodeCamp.
</p>
</body>
</html>O atributo <a href> é suportado por todos os navegadores.
Mais atributos:
hreflang: Especifica o idioma do recurso vinculado. target: Especifica o contexto no qual o recurso vinculado será aberto. title: Define o título de um link, o qual será exibido para o usuário como uma dica.
Exemplos
<a href="#">Este é um link inativo</a> <a href="https://www.freecodecamp.org">Este é um link para o freeCodeCamp</a> <a href="https://html.com/attributes/a-href/">mais com o atributo href</a>Âncoras na página
Também é possível definir uma âncora para um certo local da página. Para fazer isso, você deve primeiro colocar uma tag a no local desejado na página e o atributo "name" com uma palavra-chave, como esta:
<a name="top"></a>A descrição entre as tags não é obrigatória. Depois disso, você pode adicionar um link que direcione para esta âncora em qualquer lugar da mesma página. Para fazer isso, você usará a tag a com o atributo "href" com o símbolo # (hashtag) e a palavra-chave da âncora, como vemos abaixo:
<a href="#top">Vá para o início</a>Links de imagem
A tag <a href="#"> também pode ser aplicada a imagens e outros elementos HTML.
Exemplo
<a href="#"> <img itemprop="image" style="height: 90px;" src="https://bit.ly/fcc-relaxing-cat" alt="Um gato laranja fofo deitado de costas."> </a>Exemplos de a target
O atributo <a target> especifica onde abrir o documento vinculado a uma tag a (âncora).
Exemplos:
Um atributo target com o valor _blank abre o documento vinculado a uma nova janela ou guia.
<a href="https://www.freecodecamp.org/" target="_blank">freeCodeCamp</a>Um atributo target com o valor _self abre o documento vinculado no mesmo frame onde o clique ocorreu (esse é o padrão e não é obrigatório que seja informado).
<a href="https://www.freecodecamp.org/" target="_self">freeCodeCamp</a><a href="https://www.freecodecamp.org/">freeCodeCamp</a>Um atributo target com o valor _parent abre o documento vinculado no frame pai.
<a href="https://www.freecodecamp.org/" target="_parent">freeCodeCamp</a>O atributo target com o valor _top abre o documento vinculado no corpo inteiro da janela.
<a href="https://www.freecodecamp.org/" target="_top">freeCodeCamp</a>Um atributo target com o valor framename abre o documento vinculado em um frame com o nome informado.
<a href="https://www.freecodecamp.org/" target="framename">freeCodeCamp</a>Exemplo do atributo background, do elemento body
Se você quer adicionar uma imagem de fundo ao invés de uma cor, uma solução é usar <body background>. Assim. você especifica uma imagem de fundo para um documento HTML.
Sintaxe:
<body background="URL">
Atributo:
background - URL para a imagem de fundo
Exemplo:
<html>
<body background="https://assets.digitalocean.com/blog/static/hacktoberfest-is-back/hero.png">
</body>
</html>O atributo background foi descontinuado
O atributo background do elemento body não é mais suportado no HTML5. A forma correta de se estilizar a tag <body> é utilizando o CSS.
Há diversas propriedades CSS usadas para definir o conteúdo de fundo de um elemento. Eles podem ser usados para definir o plano de fundo de uma página inteira.
O atributo bgcolor, do elemento body
Você pode usar <body bgcolor> para atribuir uma cor de fundo para um documento HTML.
Sintaxe:
<body bgcolor="color"> O valor da cor pode ser tanto um nome de cor (como purple) ou um valor hexadecimal (como #af0000).
Para adicionar uma cor de fundo a uma página da web você pode usar o atributo <body bgcolor="######">. Ele especifica uma cor para o documento HTML a ser exibido.
Por exemplo:
<html>
<head>
<title>Exemplo de body bgcolor</title>
</head>
<body bgcolor="#afafaf">
<h1>Esta página tem fundo colorido.</h1>
</body>
</html> Você pode mudar a cor substituindo ###### por um valor hexadecimal. Para cores simples, você também pode usar a palavra, como “red” ou “black”.
Todos os navegadores principais suportam o atributo <body bgcolor>.
Observação:
<body bgcolor>não é mais suportado no HTML 5. Para esse fim, use CSS. Como? Através do seguinte código:<body style="background-color: color">Você também pode aplicar esse CSS em um documento separado ao invés de fazer isso "inline", logicamente.- Não use valores RGB no atributo
<body bgcolor>porquergb()é apenas para CSS, ou seja, não funcionará em HTML.
Exemplo de atributo align, do elemento div
<div align=""> é usado para alinhar o texto em uma tag <div> (à esquerda, à direita, ao centro ou justificado).
Por exemplo:
<html>
<head>
<title>Atributo div align</title>
</head>
<body>
<div align="left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div align="right"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div align="center"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div align="justify"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</body>
</html>Importante!
Este atributo não é mais suportado pelo HTML5. CSS é a forma recomendada para implementar esse tipo de alinhamento a partir de agora.
O atributo div align pode ser usado para alinhar horizontalmente o conteúdo contido em uma tag div. No exemplo abaixo, o texto será centralizado dentro da tag <div>.
<div align="center"> Esse texto será centralizado </div>**Por não ter mais suporte em HTML5, recomenda-se utilizar a propriedade text-align do CSS.
Exemplo do atributo color, do elemento font
Esse atributo é usado para definir a cor do texto inserido dentro de uma tag <font>.
Importante!
Este atributo não é mais suportado pelo HTML5. No seu lugar, este artigo do freeCodeCamp especifica um método CSS que pode ser usado para obter o mesmo resultado.
Nota:
Uma cor pode também ser definida usando um código hexadecimal ou um código RGB, ao invés de usar um nome.
Exemplo:
1. Atributo color com nome de cor
<html>
<body>
<font color="green">Exemplo de cor de fonte usando o atributo color com nome de cor</font>
</body>
</html> 2. Atributo color com código hexadecimal
<html>
<body>
<font color="#00FF00">Exemplo de cor de fonte usando o atributo color com código hexadecimal</font>
</body>
</html>3. Atributo color com código RGB
<html>
<body>
<font color="rgb(0,255,0)">Exemplo de cor de fonte usando o atributo color com código RGB</font>
</body>
</html>Exemplo do atributo size, do elemento font
Este atributo define o tamanho da fonte como um valor numérico relativo. Valores numéricos variam entre 1 a 7 sendo 1 o menor e 3 o padrão. O tamanho pode também ser definido usando um valor relativo, como +2 ou -3, que o definem de forma relativa ao valor do atributo size do elemento <basefont>, ou relativo a 3 (valor padrão), caso não exista.
Sintaxe:
<font size="number">
Exemplo:
<html>
<body>
<font size="6">Um texto qualquer</font>
</body>
</html>Nota : O atributo size de <font> não é suportado pelo HTML5. Use CSS no seu lugar.
Exemplo de atributo align, do elemento img
O atributo align de uma imagem especifica onde a imagem deve ser alinhada de acordo com o elemento HTML que a contém.
Valores possíveis: right - Alinha a imagem à direitaleft - Alinha a imagem à esquerda top - Alinha a imagem ao topobottom - Alinha a imagem no rodapé middle - Alinha a imagem ao centro
Exemplo:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<title>img align</title>
</head>
<body>
<p> Este é um exemplo.
<img src="image.png" alt="Image" align="middle" />
Mais texto aqui
<img src="image.png" alt="Image" width="100" />
</p>
</body>
</html>Nós também podemos alinhar à direita, se assim desejarmos:
<p>Outro exemplo.<img src="image.png" alt="Image" align="right" /></p> Observe que o atributo align não é suportado no HTML5. Você deve usar CSS no seu lugar. No entanto, ele continua suportado pelos principais navegadores.
O atributo width, do elemento img
O atributo HTML width se refere à largura de uma imagem. O valor entre aspas é o total de pixels.
Por exemplo, se você já tem um link para uma imagem definida pelo atributo src você pode adicionar o atributo width como demonstrado abaixo:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<title>img width</title>
</head>
<body>
<img src="image.png" alt="Imagem" width="100" />
</body>
</html>No trecho de código acima, há uma tag img e a imagem foi definida para uma largura de 100 pixels. width="100"
Exemplo do atributo src, do elemento img
<img src> se refere à origem da imagem que você quer mostrar. A tag <img> não exibe uma imagem sem o atributo src. Por outro lado, se você preencher o atributo src com o local onde uma imagem está salva na internet, você pode exibir qualquer imagem.
Há uma imagem da logomarca do freeCodeCamp localizada no url https://avatars0.githubusercontent.com/u/9892522?v=4&s=400
Você pode usar essa imagem através do atributo src.
<html>
<head>
<title>Exemplo de atributo img src</title>
</head>
<body>
<img src="https://avatars0.githubusercontent.com/u/9892522?v=4&s=400" />
</body>
</html>O código acima é exibido como no exemplo a seguir:
O atributo src é suportado por todos os navegadores.
Você pode também usar arquivos salvos localmente como sua imagem.
Por exemplo, <img src="images/freeCodeCamp.jpeg> funcionaria se você tivesse uma pasta chamada images contendo o arquivo freeCodeCamp.jpeg, desde que a pasta images estivesse na mesma localização ou pasta do arquivo index.html.
../files/index.html
..files/images/freeCodeCamp.jpeg
Visão geral
O que são entidades HTML?
Entidades HTML são caracteres usados para substituir caracteres reservados no HTML ou para caracteres que não estão presentes no seu teclado. Alguns caracteres são reservados no HTML. Se você usar os sinais "menor que" (<) ou "maior que" (>) no seu texto, o navegador poderá confundi-los com tags.
Qual é o seu uso?
Como mencionado acima, entidades HTML são usadas para substituir caracteres que são reservados pelo HTML.
Como você as usa?
Uma entidade de caractere parece algo como o que você vê a seguir:
<!-- &[nome_entidade]; -->
<!-- exemplo para o sinal "menor que" (<) -->
<Ou
<!-- &#[número_entidade]; -->
<!-- exemplo para o sinal "menor que" (<) -->
<Guia de referência
Esta não é, de forma alguma, uma lista completa, mas os links abaixo poderão fornecer mais entidades se os abaixo não funcionarem para suas necessidades.
| Caractere | Nome entidade | Número entidade | Descrição |
|---|---|---|---|
|   | Espaço em branco | ||
| ! | ! | Exclamação | |
| ” | " | Aspas duplas | |
| # | # | Sinal numérico (hash) | |
| $ | $ | Dólar | |
| ¢ | ¢ | ¢ | Centavos |
| € | € | € | Euro |
| £ | £ | £ | Libras |
| ¥ | ¥ | ¥ | Yen |
| % | % | Percentual | |
| & | & | & | E comercial |
| ’ | ' | Apóstrofe | |
| ( | ( | Abre parênteses | |
| ) | ) | Fecha parênteses | |
| * | * | Asterisco | |
| + | + | Sinal de mais | |
| , | , | Vírgula | |
| - | - | Hífen/sinal de menos | |
| . | . | Ponto final | |
| / | / | Barra | |
| © | © | © | Copyright |
| ® | ® | ® | Marca registrada |
| > | > | > | Sinal "maior que" |
| < | < | < | Sinal "menor que" |
| • | • | • | Bullet point |
Exemplo de formulário HTML
Basicamente, formulários são usados para coletar dados inseridos por um usuário e enviá-los ao servidor para posterior processamento. Eles podem ser usados para diferentes tipos de entradas de usuário, como nome, e-mail etc.
Formulários contêm elementos controlados, que são envolvidos pelas tags <form></form>, como o input, que possui os tipos listados a seguir:
textemailpasswordcheckboxradiosubmitrangesearchdatetimeweekcolordatalist
Exemplo de código:
<form>
<label for="username">Nome de usuário:</label>
<input type="text" name="username" id="username" />
<label for="password">Senha:</label>
<input type="password" name="password" id="password" />
<input type="radio" name="gender" value="male" />Masculino<br />
<input type="radio" name="gender" value="female" />Feminino<br />
<input type="radio" name="gender" value="other" />Outro
<input list="Options" />
<datalist id="Options">
<option value="Option1"></option>
<option value="Option2"></option>
<option value="Option3"></option>
</datalist>
<input type="submit" value="Enviar" />
<input type="color" />
<input type="checkbox" name="correct" value="correct" />Correto </form>Outros elementos que um formulário pode conter:
textarea- é uma caixa multilinhas que é frequentemente usada para adicionar algum texto, como por exemplo, comentários. O tamanho da tagtextareaé definido pelo número de linhas e colunas.select- junto com as tags<option></option>, cria um menu de seleção suspenso.button- o elemento botão pode ser usado para definir um botão clicável.
MAIS INFORMAÇÕES SOBRE FORMULÁRIOS HTML
Formulários HTML são requeridos quando você quer coletar dados de um visitante do site. Por exemplo, durante o registro do usuário você gostaria de coletar informações como o nome, endereço de e-mail, cartão de crédito etc.
Um formulário receberá as informações do visitante do site e, em seguida, as publicará em uma aplicação de back-end, como CGI, script ASP ou script PHP etc. A aplicação back-end executará o processamento necessário nos dados passados com base na lógica de negócios definida dentro da aplicação.
Há vários elementos de formulário disponíveis como campos de texto, campos de área de texto, menus de seleção suspensos, botões de seleção, caixas de marcação etc.
A tag <form> é usada para criar um formulário HTML, com a seguinte sintaxe:
<form action="Script URL" method="GET|POST">
elementos de formulário como input, textarea etc.
</form>Se o método do formulário não for definido então o padrão será “GET”.
A tag form pode também ter um atributo chamado target, o qual especifica onde o link será aberto. Ele pode ser aberto em uma aba do navegador, em um frame ou na janela atual.
O atributo action determina a ação que será executada quando o formulário é enviado. Normalmente, os dados do formulário são enviados para uma página da Web no URL do Script quando o usuário clica no botão enviar. Se o atributo de ação for omitido, a ação será definida para a página atual.
Exemplo de áudio HTML5
Antes do HTML5, arquivos de áudio tinham que ser reproduzidos em um navegador usando um adaptador, como o Flash da Adobe.
O trecho de código a seguir adiciona um arquivo de áudio com o nome tutorial.ogg ou tutorial.mp3. O elemento <source> indica arquivos de áudio alternativos os quais o navegador pode escolher. O navegador utiliza o primeiro formato reconhecido.
Exemplo 1
<audio controls>
<source src="tutorial.ogg" type="audio/ogg" />
<source src="tutorial.mp3" type="audio/mpeg" />
Seu navegador não suporta o elemento de áudio.
</audio>Exemplo 2
<audio src="https://s3.amazonaws.com/freecodecamp/simonSound1.mp3" controls loop autoplay></audio>O atributo controls inclui controles de áudio como play, pause e volume. Se você não usar esse atributo, nenhum controle será exibido.
O elemento <source> permite que você indique arquivos alternativos de áudio dentre os quais o navegador poderá escolher. O navegador utiliza o primeiro formato reconhecido. O texto entre as tags <audio></audio> pode ser exibido na tela caso o navegador não suporte o elemento <audio> do HTML5.
O atributo autoplay reproduzir automaticamente o seu arquivo de áudio em segundo plano. É considerada uma prática recomendada deixar que os visitantes escolham se querem ou não reproduzir o áudio.
O atributo preload indica ao navegador o que ele deve fazer caso o player não esteja definido para autorreprodução.
O atributo loop vai reproduzir o arquivo de áudio em um laço contínuo de repetição, caso seja utilizado.
Por estarmos falando de HTML5, quando este artigo foi escrito (novembro de 2019), alguns navegadores não o suportam. Você pode verificar em https://caniuse.com/#search=audio
Exemplo de elementos semânticos do HTML5
Os elementos semânticos do HTML descrevem claramente seu significado de maneira legível por humanos e pelas máquinas. Elementos como <header>, <footer> e <article> são todos considerados semânticos porque eles, de forma assertiva, descrevem o propósito do elemento e o tipo de conteúdo que está inserido neles.
Uma história rápida
O HTML foi originalmente criado como uma linguagem de marcação para descrever documentos no início da internet. À medida que a internet cresceu e foi adotada por mais pessoas, suas necessidades mudaram. Originalmente destinada ao compartilhamento de documentos científicos, agora as pessoas queriam compartilhar outras coisas na internet também. Muito rapidamente, as pessoas começaram a querer tornar a web mais bonita. Como a web não foi inicialmente construída para ser estilizada, os programadores usaram diferentes hacks para organizar as coisas de maneiras diferentes.
Ao invés de usar a tag <table></table> para descrever informações usando tabelas, os programadores a usavam para posicionar outros elementos em uma página. À medida que o uso de layouts visualmente estilizados progrediu, os programadores começaram a usar uma tag genérica “não-semântica” como <div>. Eles geralmente davam a esses elementos um atributo class ou id para descrever seu propósito. Por exemplo, ao invés de <header>, tivemos muitas vezes algo como <div class="header">. Como o HTML5 ainda é relativamente novo, esse uso de elementos não semânticos ainda é muito comum nos sites atuais.
Lista de novos elementos semânticos
Os elementos semânticos adicionados no HTML5 são:
<article><aside><details><figcaption><figure><footer><header><main><mark><nav><section><summary><time>
Elementos como <header>, <nav>, <section>, <article>, <aside>, e <footer> agem mais ou menos como elementos <div>. Eles agrupam outros elementos juntos dentro de seções na página. No entanto, embora uma tag <div> pudesse conter qualquer tipo de informação, fica mais fácil de identificar que tipo de informação se encontra em uma região <header> (cabeçalho, em inglês).
Um exemplo de elementos semânticos dado pelo site w3schools:
Benefícios dos elementos semânticos
Para ver os benefícios dos elementos semânticos, aqui estão dois trechos de código em HTML. O primeiro bloco usa elementos semânticos:
<header></header>
<section>
<article>
<figure>
<img />
<figcaption></figcaption>
</figure>
</article>
</section>
<footer></footer>Já o segundo bloco de código usa elementos não semânticos:
<div id="header"></div>
<div class="section">
<div class="article">
<div class="figure">
<img />
<div class="figcaption"></div>
</div>
</div>
</div>
<div id="footer"></div>O primeiro é muito mais fácil de ler. Esta é provavelmente a primeira coisa que você notará ao olhar para o primeiro bloco de código usando elementos semânticos. Este é um pequeno exemplo, mas como programador você pode ler centenas ou milhares de linhas de código. Quanto mais fácil for ler e entender esse código, mais fácil será o seu trabalho.
Ele também tem maior acessibilidade. Você não é o único que acha os elementos semânticos mais fáceis de entender. Mecanismos de pesquisa e tecnologias assistivas (como leitores de tela para usuários com deficiência visual) também são capazes de entender melhor o contexto e o conteúdo do seu site, o que significa uma melhor experiência para seus usuários.
No geral, os elementos semânticos também levam a um código mais consistente. Ao criar um cabeçalho usando elementos não semânticos, diferentes programadores podem escrever isso como <div class="header">, <div id="header">, <div class="head">, ou simplesmente <div>. Existem muitas maneiras de criar um elemento de cabeçalho e todas elas dependem da preferência pessoal do programador. Ao criar um elemento semântico padrão, fica mais fácil para todos.
Desde outubro de 2014, o HTML4 foi atualizado para HTML5, juntamente com alguns novos elementos “semânticos”. Até hoje, alguns de nós ainda podem estar confusos sobre o motivo de tantos elementos diferentes que parecem não mostrar grandes mudanças.
<section> e <article>
“Qual é a diferença?”, você pode perguntar. Ambos os elementos são usados para seccionar um conteúdo e, sim, eles definitivamente podem ser usados de forma intercambiável. É uma questão de em qual situação. HTML4 oferecia apenas um tipo de elemento container, que era a <div>. Embora ele ainda seja usado no HTML5, o HTML5 nos forneceu <section> e <article> como forma de substituir a <div>.
Os elementos <section> e <article> são conceitualmente similares e intercambiáveis. Para decidir qual destes você deve escolher, tome nota do seguinte:
- Um article (artigo, em inglês) destina-se a ser distribuído ou reutilizável de forma independente.
- Uma section (seção, em inglês) é um agrupamento temático de conteúdo.
<section>
<p>Melhores histórias</p>
<section>
<p>News</p>
<article>História 1</article>
<article>História 2</article>
<article>História 3</article>
</section>
<section>
<p>Sport</p>
<article>História 1</article>
<article>História 2</article>
<article>História 3</article>
</section>
</section><header> e <hgroup>
O elemento <header> geralmente é encontrado na parte superior de um documento, uma seção ou um artigo e geralmente contém o título principal e algumas ferramentas de navegação e pesquisa.
O elemento <hgroup> deveria ser usado onde você deseja inserir um cabeçalho principal com um ou mais subcabeçalhos.
<hgroup>
<h1>Cabeçalho 1</h1>
<h2>Subcabeçalho 1</h2>
<h2>Subcabeçalho 2</h2>
</hgroup>LEMBRE-SE: o elemento <header> pode conter qualquer conteúdo, mas o elemento <hgroup> pode somente conter outros cabeçalhos, que são as tags <h1> até <h6> e incluir outro <hgroup>.
<aside>
O elemento <aside> é destinado para conteúdo que não é parte do fluxo do texto no qual ele aparece, embora ainda seja relacionado a ele de alguma forma. Isto faz do <aside> uma barra lateral para o seu conteúdo principal.
<aside>
<p>Isso é uma barra lateral</p>
</aside>Antes do HTML5, nossos menus eram criados com a combinação de várias tags <ul> e <li>. Agora, junto com eles, podemos separar nossos itens de menu com uma tag <nav> para navegação entre suas páginas. Você pode ter qualquer número de elementos <nav> em uma página. Por exemplo, é comum ter navegação global no topo (no elemento <header>) e navegação local na barra lateral (em um elemento <aside>).
<nav>
<ul>
<li>
<a href="/home">Início</a>
</li>
<li>
<a href="/about">Sobre</a>
</li>
<li>
<a href="/contact">Contate-nos</a>
</li>
</ul>
</nav> <footer>
Se há um elemento <header>, precisa existir também um <footer>. Um elemento <footer> é normalmente encontrado no rodapé de um documento, uma seção, ou um artigo. Exatamente como o <header>, o conteúdo é geralmente metainformação, como detalhes do autor, informações legais e/ou links para informações relacionadas. Também é aceitável incluir elementos <section> dentro de um rodapé.
<footer>©Empresa A</footer><small>
O elemento <small> frequentemente aparece dentro de um elemento <footer> ou <aside>, o que normalmente conteria informações de direitos autorais ou isenções de responsabilidade legais e outras letras miúdas. No entanto, ele não se destina a tornar o texto menor. Ele está apenas descrevendo seu conteúdo, não prescrevendo apresentação.
<footer>
<small>©Empresa A</small>
Data
</footer><time>
O elemento <time> permite que uma data inequívoca da ISO 8601 seja anexada a uma versão legível dessa data.
<time datetime="2017-10-31T11:21:00+02:00">
Terça-feira, 31 de Outubro de 2017
</time>Por que se preocupar com <time>? Enquanto os humanos que podem ler o tempo podem compreender através do contexto normalmente, os computadores podem ler a data ISO 8601 e ver a data, hora e fuso horário.
<figure> e <figcaption>
<figure> serve para envolver seu conteúdo de imagem e <figcaption> serve para legendar sua imagem.
<figure>
<img src="https://en.wikipedia.org/wiki/File:Shadow_of_Mordor_cover_art.jpg" alt="Shadow of Mordor" />
<figcaption>
Arte da capa de Terra-média: Sombras de Mordor
</figcaption>
</figure>Exemplo de vídeo HTML5
Antes do HTML5, para poder reproduzir um vídeo em uma página da internet, você precisaria usar um adaptador, como o Flash Player da Adobe. Com a introdução do HTML5, agora você pode colocá-lo diretamente dentro da própria página.
Para embutir um arquivo de vídeo em uma página da internet, apenas adicione esse trecho de código e mude o atributo src para a localização do seu arquivo de vídeo.
<video controls>
<source src="tutorial.ogg" type="video /ogg" />
<source src="tutorial.mp4" type="video /mpeg" />
Seu navegador não suporta o elemento de vídeo. Por favor, atualize-o para a versão mais recente.
</video> O atributo controls inclui controles de vídeo similares ao play, pause e volume.
Este recurso é suportado por todos os navegadores modernos/atualizados. No entanto, nem todos suportam o mesmo formato de arquivo de vídeo. Minha recomendação para uma ampla gama de compatibilidade é o MP4, pois é o formato mais aceito. Há também dois outros formatos (WebM e Ogg) que são suportados no Chrome, Firefox e Opera.
O elemento permite indicar arquivos de vídeo alternativos que o navegador pode escolher. O navegador utilizará o primeiro formato reconhecido. Em HTML5, existem 3 formatos de vídeo suportados: MP4, WebM e Ogg.
O texto entre as tags só será exibido em navegadores que não suportam o formato de arquivo de vídeo.
Existem vários elementos diferentes relativos à tag de vídeo. Muitas dessas explicações são baseadas nos documentos da web da Mozilla (links abaixo). Há ainda mais se você clicar no link na parte inferior.
autoplay
autoplay pode ser definido como verdadeiro ou falso. Você define como true adicionando-o na tag, se não estiver presente na tag, é configurado como false. Se definido como verdadeiro, o vídeo começará a ser reproduzido assim que o suficiente do vídeo for armazenado em buffer para que ele possa ser reproduzido. Muitas pessoas consideram os vídeos de reprodução automática perturbadores ou irritantes. Portanto, use esse recurso com moderação. Observe também que alguns navegadores móveis, como o Safari para iOS, ignoram esse atributo.
<video autoplay>
<source src="video.mp4" type="video/mp4" />
</video>poster
O atributo poster é a imagem que aparece no vídeo até que o usuário clique para reproduzi-lo.
controls
O atributo controls pode ser definido como true ou false e dirá se controles como o botão reproduzir/pausar ou o controle deslizante de volume aparecerem. Você define como true adicionando-o na tag. Se não estiver presente na tag, é configurado como false.
<video controls>
<source src="video.mp4" type="video/mp4" />
</video>Há muitos outros atributos opcionais que podem ser adicionados para personalizar o player de vídeo na página. Para saber mais, clique nos links abaixo.
Exemplo de armazenamento na web HTML5
O armazenamento na web permite que os aplicativos da web armazenem até 5 MB de informações no armazenamento do navegador por origem (por domínio e protocolo).
Tipos de armazenamento na web
Existem dois objetos para armazenar dados no cliente:
window.localStorage: armazena dados sem data de validade e persiste até ser removido.
// Store Item localStorage.setItem("foo", "bar");
// Get Item localStorage.getItem("foo"); //returns "bar"window.sessionStorage: armazena dados para uma sessão, onde os dados são descartados quando a guia do navegador é fechada.
// Store Item sessionStorage.setItem("foo", "bar");
// Get Item sessionStorage.getItem("foo"); //returns "bar"Como a implementação atual suporta apenas mapeamentos de string para string, você precisa serializar e desserializar outras estruturas de dados.
Você pode fazer isso usando JSON.stringify() e JSON.parse().
Para exemplificar, veja o JSON abaixo:
var jsonObject = { 'one': 1, 'two': 2, 'three': 3 };Primeiro, convertemos o objeto JSON em uma string e salvamos no armazenamento local:
localStorage.setItem('jsonObjectString', JSON.stringify(jsonObject));Para obter o objeto JSON a partir da string armazenada no armazenamento local:
var jsonObject = JSON.parse(localStorage.getItem('jsonObjectString'));Exemplo de links mailto
Um link mailto é um tipo de hiperlink (<a href=""></a>) com parâmetros especiais que permitem que você especifique destinatários adicionais, uma linha para o assunto e/ou um texto para o corpo do e-mail.
A sintaxe básica com um destinatário é:
<a href="mailto:friend@something.com">Um texto</a>Mais customização!
Adicionando um assunto ao e-mail:
Se você quer adicionar um assunto específico ao e-mail é importante ter atenção e adicionar %20 ou + em todo lugar que houver um espaço na linha do assunto. Uma forma fácil de garantir que o assunto está adequadamente formatado é usar um decoder/encoder de URL.
Adicionando o texto de corpo do e-mail:
De forma semelhante, você pode adicionar uma mensagem específica na parte reservada ao corpo do e-mail: novamente, espaços devem ser substituídos por %20 ou +. Depois do parâmetro subject, qualquer parâmetro adicional precisa ser precedido por &.
Exemplo: digamos que você queira que os usuários enviem um e-mail para seus amigos sobre seu progresso no freeCodeCamp:
Endereço: vazio
Assunto: Grandes novidades
Corpo: Estou me tornando um desenvolvedor
Agora o link do seu html:
<a href="mailto:?subject=Grandes%20novidades&body=Eu%20estou%20me%20tornando%20um%20desenvolvedor">Enviar e-mail!</a>Aqui, deixamos o parâmetro mailto vazio (mailto:?). Isso abrirá o cliente de e-mail do usuário e ele vai adicionar o endereço do próprio destinatário.
Adicionando mais destinatários:
Da mesma forma, você pode adicionar os parâmetros Cc e Bcc. Separe cada um desses endereços por uma vírgula!
Parâmetros adicionais deverão ser precedidos por um &.
<a href="mailto:primeiroamigo@endereco.com?subject=Great%20news&cc=segundoamigo@endereco.com,terceiroamigo@endereco.com&bcc=quartoamigo@endereco.com">Enviar e-mail!</a>Obrigado por usar esta referência de HTML.
Feliz programação!