O Flutter rapidamente se tornou um dos frameworks mais populares para o desenvolvimento de aplicativos móveis multiplataforma. Ele ajuda os desenvolvedores a criar UIs nativas com suporte para diferentes tamanhos de dispositivos, densidades de pixels e orientações, criando uma bela e perfeita UI/UX.

Neste tutorial, nós aprenderemos como adicionar notificações push (tipo de mensagem exibida automaticamente na tela do seu celular) em um aplicativo Flutter usando o serviço Firebase Cloud Messaging (em português Mensagens na Nuvem do Firebase). Este tutorial lidará com as configurações apenas para a plataforma Android.

Primeiro, o que são notificações push?

Notificações push são um tipo de mensagens pop-up (em português mensagens que "estouram" na tela) que alertam os usuários de aplicativos sobre o que está acontecendo no aplicativo. Elas também são uma forma importante de ampliar o engajamento dos usuários em seu aplicativo.

Por exemplo, digamos que um usuário esquece do aplicativo depois de instalado. Então, você pode usar notificações push como um mecanismo para recuperar e manter o interesse dos usuários. As notificações push também podem ajudar a direcionar tráfego para o aplicativo.

O Firebase Cloud Messaging é um serviço oferecido pela Firebase, que permite que você envie notificações para seus usuários. Você pode definir várias configurações para enviar diferentes notificações para públicos diferentes com base em tempo e rotina.

Por causa de todos esses benefícios, nós vamos usar esse serviço para enviar notificações para nosso aplicativo Flutter.

Passo 1: criar um projeto do Flutter

Primeiro, vamos criar um projeto para o Flutter. Para isso, devemos ter o Flutter SDK instalado em nosso sistema. Você pode encontrar etapas simples para a instalação do Flutter na documentação oficial.

Depois de instalar o Flutter com sucesso, você pode simplesmente executar o seguinte comando no diretório desejado para configurar um projeto Flutter completo:

flutter create pushNotification

Depois de configurar o projeto, navegue dentro do diretório do projeto. Execute o seguinte comando no terminal para executar o projeto em um emulador disponível ou em um dispositivo real:

flutter run

Após uma compilação bem-sucedida, você obterá o seguinte resultado na tela do emulador:

Passo 2: integrar a configuração do Firebase ao Flutter

Nesta etapa, vamos integrar os serviços do Firebase ao nosso projeto Flutter. Mas primeiro, precisamos criar um projeto do Firebase. As diretrizes de configuração também são fornecidas na documentação oficial do Firebase para Flutter.

Para criar um projeto do Firebase, precisamos fazer login no Firebase e navegar até o console. Lá, podemos simplesmente clicar em 'Adicionar um projeto' (Add a project, em inglês) para iniciar nosso projeto.

Em seguida, uma janela aparecerá pedindo para inserir o nome do projeto. Aqui, mantive o nome do projeto como FlutterPushNotification, conforme mostrado na captura de tela abaixo:

Podemos continuar para a próxima etapa quando o projeto for criado. Após a configuração do projeto, obteremos um console de projeto, conforme mostrado na captura de tela abaixo:

Aqui, vamos configurar o Firebase para a plataforma Android. Portanto, precisamos clicar no ícone do Android exibido na captura de tela acima. Isso nos levará à interface para registrar o Firebase com nosso projeto de aplicativo Flutter.

Passo 3: registrar o Firebase no seu aplicativo Android

Como o processo de registro é específico da plataforma, vamos registrar nosso aplicativo para a plataforma Android. Após clicar no ícone do Android, seremos direcionados para uma interface solicitando o nome do pacote Android (Android package name em inglês).

Como o processo de registro é específico da plataforma, vamos registrar nosso aplicativo para a plataforma Android. Após clicar no ícone do Android, seremos direcionados para uma interface solicitando o nome do pacote Android (ou Android package name, se a interface estiver em inglês).

Para adicionar o nome do pacote do nosso projeto Flutter, precisamos localizá-lo primeiro. O nome do pacote estará disponível no arquivo ./android/app/build.gradle do seu projeto Flutter. Você verá algo assim:

com.example.pushNotification

Só precisamos copiá-lo e colá-lo no campo de entrada do nome do pacote Android, conforme mostrado na captura de tela abaixo:

Depois disso, podemos simplesmente clicar no botão 'Registrar aplicativo' ('Register app', em inglês). Isso nos levará à interface onde podemos obter o arquivo google-services.json que vinculará nosso aplicativo Flutter aos serviços do Firebase Google.

Precisamos baixar o arquivo e movê-lo para o diretório ./android/app do nosso projeto Flutter. As instruções também são mostradas na captura de tela abaixo:

Passo 4: adicionar configurações do Firebase a arquivos nativos em seu projeto Flutter

Agora, para habilitar os serviços do Firebase em nosso aplicativo Android, precisamos adicionar o plug-in do google-services aos nossos arquivos Gradle.

Primeiro, em nosso arquivo Gradle de nível raiz (nível de projeto) (android/build.gradle), precisamos adicionar regras para incluir o plug-in do Gradle aos serviços do Google. Precisamos verificar se as seguintes configurações estão disponíveis ou não:

buildscript {
  repositories {
    // Verifique se você tem a seguinte linha (caso contrário, adicione-a):
    google()  // Repositório Google Maven
  }
  dependencies {
    ...
    // Adicione esta linha
    classpath 'com.google.gms:google-services:4.3.4'
  }
}

allprojects {
  ...
  repositories {
    // Verifique se você tem a seguinte linha (caso contrário, adicione-a):
    google()  // Repositório Google Maven
    ...
  }
}

Caso contrário, precisamos adicionar as configurações conforme mostrado no trecho de código acima.

Agora, em nosso arquivo Gradle do módulo (nível do aplicativo) (android/app/build.gradle), precisamos aplicar o plug-in do Gradle do Google Services.

Para isso, precisamos adicionar o trecho de código destacado no trecho de código a seguir ao arquivo ./android/app/build.gradle do nosso projeto:

// Adicione a seguinte linha:
**apply plugin: 'com.google.gms.google-services'**  // Plug-in do Google Services

android {
  // ...
}

Agora, precisamos executar o seguinte comando para que algumas configurações automáticas possam ser feitas:

flutter packages get

Com isso, integramos com sucesso as configurações do Firebase ao nosso projeto Flutter.

Passo 5: integrar o Firebase Messaging ao Flutter

Primeiro, precisamos adicionar a dependência firebase-messaging ao arquivo ./android/app/build.gardle. No arquivo, precisamos adicionar as seguintes dependências:

dependencies {
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
    implementation 'com.google.firebase:firebase-messaging:20.1.0'
}

Em seguida, precisamos adicionar uma action (ação) e uma category (categoria) como intent-filter (filtro de intenção) no arquivo ./android/app/src/main/AndroidManifest.xml:

<intent-filter>
    <action android:name="FLUTTER_NOTIFICATION_CLICK" />
    <category android:name="android.intent.category.DEFAULT" />
</intent-filter>

Agora, precisamos criar um arquivo Java chamado Application.java no caminho /android/app/src/main/java/<app-organization-path>.

Em seguida, precisamos adicionar o código do seguinte trecho de código dentro dele:

package io.flutter.plugins.pushNotification;

import io.flutter.app.FlutterApplication;
import io.flutter.plugin.common.PluginRegistry;
import io.flutter.plugin.common.PluginRegistry.PluginRegistrantCallback;
import io.flutter.plugins.GeneratedPluginRegistrant;
import io.flutter.plugins.firebasemessaging.FirebaseMessagingPlugin;
import io.flutter.plugins.firebasemessaging.FlutterFirebaseMessagingService;

public class Application extends FlutterApplication implements PluginRegistrantCallback {
    @Override
    public void onCreate() {
        super.onCreate();
        FlutterFirebaseMessagingService.setPluginRegistrant(this);
    }

    @Override
    public void registerWith(PluginRegistry registry) {
        FirebaseMessagingPlugin.registerWith(registry.registrarFor("io.flutter.plugins.firebasemessaging.FirebaseMessagingPlugin"));
    }
}

Agora, precisamos atribuir essa atividade Application à tag application do arquivo AndroidManifest.xml, conforme mostrado no snippet de código abaixo:

<application
        android:name=".Application"

Isso conclui nossa configuração do plug-in de mensagens do Firebase no código nativo do Android. Agora, vamos passar para o projeto Flutter.

Passo 6: instalar o pacote Firebase Messaging

Aqui, vamos usar o pacote [firebase_messaging], que você pode encontrar aqui. Para isso, precisamos adicionar o plug-in à opção de dependência do arquivo pubspec.yaml.

Precisamos adicionar a seguinte linha de código à opção de dependências:

firebase_messaging: ^7.0.3

Passo 7: implementar uma tela de IU simples

Agora, dentro da classe de widget com estado MyHomePage do arquivo main.dart, precisamos inicializar a instância FirebaseMessaging e algumas constantes, conforme mostrado no trecho de código abaixo:

String messageTitle = "Empty";
String notificationAlert = "alert";

FirebaseMessaging _firebaseMessaging = FirebaseMessaging();

A variável messageTitle receberá o título da mensagem de notificação e notificationAlert receberá a ação que foi concluída assim que a notificação aparecer.

Agora, precisamos aplicar essas variáveis ​​à função de construção dentro do corpo do widget Scaffold, conforme mostrado no trecho de código abaixo:

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              notificationAlert,
            ),
            Text(
              messageTitle,
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
    );
  }

Em seguida, precisamos executar o aplicativo Flutter executando o seguinte comando no terminal do projeto:

flutter run

Vamos obter o resultado que você vê na imagem abaixo:

Por enquanto, o título da notificação está vazio e o alerta também está conforme definido. Precisamos atribuir um valor adequado a eles assim que recebermos a mensagem de notificação.

Portanto, precisamos configurar o código para receber a notificação e usar a mensagem de notificação para exibi-la na tela.

Para isso, precisamos adicionar o código do seguinte trecho de código na função initiState:

@override
  void initState() {
    // TODO: implementar initState
    super.initState();

    _firebaseMessaging.configure(
      onMessage: (message) async{
        setState(() {
          messageTitle = message["notification"]["title"];
          notificationAlert = "New Notification Alert";
        });

      },
      onResume: (message) async{
        setState(() {
          messageTitle = message["data"]["title"];
          notificationAlert = "Application opened from Notification";
        });

      },
    );
  }

Aqui, usamos o método configure fornecido pela instância _firebaseMessaging que, por sua vez, fornece os retornos de chamada onMessage e onResume. Esses retornos de chamada fornecem a notificação message como parâmetro. A resposta message manterá o objeto de notificação como um objeto de mapa.

A função onMessage é acionada quando a notificação é recebida enquanto estamos executando o aplicativo. A função onResume é acionada quando recebemos o alerta de notificação na barra de notificação do dispositivo e abre o aplicativo por meio da própria notificação push. Nesse caso, o aplicativo pode ser executado em segundo plano ou não ser executado.

Agora, estamos todos equipados com o aplicativo Flutter. Só precisamos configurar uma mensagem no Firebase Cloud Messaging e enviá-la para o dispositivo.

Passo 8: criar uma Mensagem a partir do console do Firebase Cloud Messaging

Primeiro, precisamos voltar ao console do Cloud Messaging no site do Firebase, conforme mostrado na imagem abaixo:

Aqui, podemos ver a opção 'Enviar sua primeira mensagem' (Send your first message, em inglês) na janela, pois não configuramos nenhuma mensagem antes. Precisamos clicar nele, o que nos levará à seguinte janela:

Aqui, podemos inserir o título, texto, imagem e nome da notificação. O título que definimos aqui será fornecido como título no objeto message nos retornos de chamada que definimos antes no projeto Flutter.

Depois de definir os campos obrigatórios, podemos clicar em 'Avançar' (Next, em inglês), o que nos levará à seguinte janela:

Aqui, precisamos fornecer nosso aplicativo de destino e clicar em 'Avançar' (Next).

Para Agendamento (Scheduling, em inglês) podemos manter a opção padrão:

Em seguida, aparecerá a janela Conversão (Conversion, em inglês), que também podemos manter como padrão, e clique no botão 'Avançar' (Next).

Por fim, aparecerá uma janela onde precisamos inserir os dados personalizados, na qual podemos definir o title e o click_action. Este evento de ação de clique é acionado sempre que clicamos na notificação que aparece na barra de notificação do dispositivo.

Depois de clicar na mensagem de notificação da barra de notificação, o aplicativo será aberto e o retorno de chamada onResume será acionado, definindo o title conforme atribuído nos dados personalizados na captura de tela abaixo:

Agora, estamos prontos para enviar a primeira mensagem de notificação ao dispositivo. Primeiro, vamos tentar com o dispositivo rodando no emulador.

Ao clicar no botão 'Revisar' (Review, em inglês) e enviar a mensagem, obteremos o seguinte resultado no console do Cloud Messaging, bem como no emulador:

Aqui, podemos ver que o título e o alerta de notificação na tela do emulador são atualizados assim que enviamos uma mensagem do console. Podemos ter certeza de que o retorno de chamada onMessage foi acionado no aplicativo após receber a mensagem de notificação.

Agora vamos tentar com o app rodando em segundo plano. Uma vez que enviamos a mensagem para o console, nós iremos receber o resultado conforme mostrado na demonstração abaixo:

Aqui, assim que enviamos a mensagem, recebemos uma notificação push na barra de notificações do dispositivo. Então, à medida que arrastamos a barra de notificação, podemos ver o título e o texto da mensagem de notificação. E, clicando na mensagem de notificação, podemos iniciar o aplicativo e exibir os dados personalizados na tela. Isso garante que nosso retorno de chamada onResume foi acionado.

Terminamos! Adicionamos com sucesso um recurso de notificação por push em nosso aplicativo Flutter usando o Firebase Cloud Messaging.

Conclusão

As notificações push são essenciais em qualquer aplicativo. Elas podem ser usadas ​​para alertar os usuários sobre o que está acontecendo no aplicativo e podem ajudar a atrair o interesse dos usuários de volta ao aplicativo.

Além disso, o Firebase Cloud Messaging torna o envio de alertas de notificação muito mais simples e fácil.

Neste tutorial, começamos configurando o aplicativo Firebase e, em seguida, passamos para a configuração e implementação da configuração de mensagens do Firebase no aplicativo Flutter. Por fim, conseguimos enviar alertas de notificação para o aplicativo usando o Firebase Cloud Messaging.

O tutorial foi feito para ser simples e fácil de entender. Espero que isso ajude você a adicionar notificações push aos seus aplicativos Flutter. Quer ver alguns exemplos de como você pode implementar tudo isso? Confira esses poderosos modelos do Flutter.

Receber um código de erro enquanto estamos on-line pode ser uma experiência frustrante. Ao mesmo tempo em que estamos acostumados com páginas "404 Not Found" (Não Encontrado, em português), se tornou comum ver páginas de placeholder fofas para nos entreter sempre que nos perdemos. Um dos mais erros mais intrigantes é a resposta "403 Forbidden" (Proibido, em português).

O que isso significa?

Colocando de uma forma simples: o servidor determinou que você não está autorizado para acessar aquilo que você requisitou.

De acordo com o padrão RFC 7231 (texto em inglês):

O código de status 403 (Proibido) indica que o servidor entendeu a solicitação, mas se recusa a autorizá-la... Se as credenciais de autenticação foram fornecidas na solicitação, o servidor as considera insuficientes para conceder acesso.

A resposta 403 pertence ao intervalo 4xx de respostas HTTP: Erros do client. Isso significa que você ou seu navegador fez algo errado.

Se você se deparar com esse erro, geralmente significa que você já se autenticou com o servidor, ou seja, você efetuou login, mas o recurso que você solicitou espera alguém com privilégios mais altos.

Mais comumente, você pode estar logado como usuário padrão, mas está tentando acessar uma página de administração.

Como você corrige isso?

Como um usuário sem acesso ao servidor você terá apenas algumas poucas opções:

Se autentique com uma conta mais apropriada

Novamente, de acordo com o padrão RFC 7231 (texto em inglês):

Se as credenciais de autenticação foram fornecidas na solicitação, o servidor as considera insuficientes para conceder acesso. O cliente NÃO DEVE repetir automaticamente a solicitação com as mesmas credenciais. O cliente PODE repetir o pedido com credenciais novas ou diferentes.

Este é o único meio que lhe dá condições reais para corrigir o problema.

Se você tem várias contas em um site e está tentando fazer algo que normalmente pode fazer, mas desta vez está proibido de fazer, esta é a opção que você deve tentar. Faça login com sua outra conta.

Você pode descobrir que essa opção também requer a limpeza do cache ou dos cookies, caso o login de outro usuário não libere suficientemente os tokens de autenticação anteriores. Mas isso geralmente é desnecessário.

Como uma jogada desesperada, você também pode tentar desabilitar as extensões do navegador que possam estar interferindo no uso do site. No entanto, isso é improvável, pois um 403 indica que você está autenticado, mas não autorizado.

Notifique o dono do site que o erro 403 está sendo retornado quando você esperaria o contrário

Se você espera poder acessar o recurso em questão, mas ainda está vendo esse erro, é aconselhável informar a equipe responsável pelo site - isso pode ser um erro da parte deles.

Novamente, o padrão RFC 7231  (texto em inglês) diz:

No entanto, uma solicitação pode ser proibida por motivos não relacionados às credenciais.

Uma causa comum para isso acontecer de forma não intencional é o fato de um servidor usar listas de permissão ou negação para endereços IP específicos ou regiões geográficas.

Eles podem ter um bom motivo para bloquear seu acesso fora de seus parâmetros estritamente definidos, mas também pode ser apenas um descuido.

Desistir

Talvez você simplesmente não deveria mesmo ser capaz de acessar esse recurso. Acontece. A internet é grande e é razoável esperar que existam algumas áreas que estão além dos limites do que você pode acessar.

Você pode visitar http.cat enquanto pensa sobre a razão para que sua solicitação original tenha sido proibida.

Como leitor do freeCodeCamp News, você quase certamente não está proibido de seguir @JacksonBates no Twitter para mais conteúdo relacionado à tecnologia e à programação.

A maioria dos sites de hoje é responsiva. Se você precisar centralizar e alinhar imagens nesses sites (texto em inglês), precisará aprender a tornar as imagens fluidas ou responsivas com CSS.

Eu postei um vídeo tutorial que explica como fazer um site responsivo passo a passo há algumas semanas. No vídeo, fizemos uma imagem responsiva. Neste artigo, no entanto, eu gostaria de dar um pouco mais de detalhes sobre como tornar as imagens responsivas.

Você também vai aprender sobre alguns dos problemas comuns que podem ocorrer quando você está tentando tornar imagens responsivas - e eu tentarei explicar como resolvê-los.

Como tornar imagens responsivas com CSS

Devo usar unidades relativas ou absolutas?

Tornar uma imagem fluida, ou responsiva, é bem simples. Quando você carrega uma imagem em seu site, ela tem largura e altura padrão. Você pode alterar ambos com CSS.

Para tornar uma imagem responsiva, você precisa dar um novo valor à sua propriedade de largura. Em seguida, a altura da imagem se ajustará automaticamente.

Uma coisa importante a se saber é que você deve usar sempre unidades relativas para a propriedade de largura, como porcentagem, ao invés de unidades absolutas como pixels.

img {
  width: 500px;
}

Por exemplo, se você definir uma largura fixa de 500px, sua imagem não será responsiva – porque a unidade é absoluta.

img {
  width: 50%;
}

É por isso que você deve atribuir uma unidade relativa, como 50%. Essa abordagem tornará suas imagens fluidas e elas poderão se redimensionar independentemente do tamanho da tela.

Devo usar media queries?

Uma das perguntas que mais recebo é se você deve ou não usar media queries.

Uma media query é outro recurso importante do CSS que ajuda a tornar um site responsivo. Não entrarei em mais detalhes aqui, mas você pode ler meu outro artigo (texto em inglês) mais tarde para aprender a usar consultas de mídia com mais detalhes.

A resposta para essa pergunta é: “depende”. Se você quer que a sua imagem tenha diferentes tamanhos de um dispositivo para outro, então você precisará utilizar media queries. Caso contrário, não.

Agora, para este exemplo, sua imagem tem 50% de largura para qualquer tipo de tela. Mas quando você deseja deixá-la em tamanho real para dispositivos móveis, precisará obter ajuda das media queries:

@media only screen and (max-width: 480px) {
  img {
    width: 100%;
  }
}

Portanto, com base na regra da media query (consulta de mídia, em inglês), qualquer dispositivo menor que 480px terá o tamanho total da largura da tela.

Você também pode assistir a versão em vídeo deste artigo abaixo:

Por que a propriedade max-width não é ideal?

Outra maneira que os desenvolvedores podem usar para criar imagens responsivas é a propriedade max-width. No entanto, esse nem sempre é o melhor método a ser usado, pois pode não funcionar para todos os tipos de tamanho de tela ou dispositivo.

A primeira coisa a entender antes de prosseguirmos com um exemplo é o que exatamente a propriedade max-width faz.

A propriedade max-width define uma largura máxima para um elemento, o que não permite que a largura desse elemento seja maior que seu valor max-width (mas pode ser menor).

Por exemplo, se a imagem tiver uma largura padrão de 500px e se o tamanho da sua tela tiver apenas 360px, você não poderá ver a imagem completa porque não há espaço suficiente:

img {
  max-width: 100%;
  width: 500px;  // suponha que esse seja o tamanho padrão
}

Portanto, você pode definir uma propriedade max-width para a imagem e configurá-la para 100%, o que reduz a imagem de 500px para o espaço de 360px. Assim, você poderá ver a imagem completa em uma tela de tamanho menor.

A parte boa é que, como você está usando uma unidade relativa, a imagem será fluida em qualquer dispositivo menor que 500px.

Infelizmente, o tamanho da tela ficará um pouco maior que 500px, mas a imagem não, porque tem uma largura padrão de 500px. Essa abordagem quebrará a capacidade de resposta da imagem.

Para corrigir isso, você precisa usar a propriedade largura novamente, o que torna a propriedade max-width inútil.

E as alturas?

Outro problema comum que você pode encontrar tem a ver com a propriedade height (altura, em inglês). Normalmente, a altura de uma imagem se redimensiona automaticamente, então você não precisa atribuir uma propriedade height às suas imagens (porque isso acaba distorcendo um pouco a imagem).

Mas, em alguns casos, você pode ter que trabalhar com imagens que devem ter uma altura fixa. Portanto, quando você atribuir uma altura fixa à imagem, ela ainda será responsiva, mas não terá uma boa aparência.

img {
  width: 100%;
  height: 300px;
}

Felizmente, existe outra propriedade que o CSS oferece para corrigir esse problema…

Solução: a propriedade object-fit

Para ter mais controle sobre suas imagens, o CSS fornece outra propriedade chamada object-fit. Vamos usar a propriedade object-fit e atribuir um valor, que fará com que sua imagem fique com uma melhor apresentação:

img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  object-position: bottom;
}

Se necessário, você também pode usar a propriedade object-position (além de object-fit) para focar em uma parte específica da imagem. Muitas pessoas não estão cientes da propriedade object-fit, mas ela pode ser útil para corrigir esses tipos de problemas.

Espero que este artigo tenha ajudado você a entender e resolver seus problemas com imagens responsivas. Se você quiser saber mais sobre desenvolvimento para a web, fique à vontade para conferir o canal do autor do texto no Youtube.

Obrigado pela leitura!

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> porque rgb() é 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 à direita‌‌
left - Alinha a imagem à esquerda‌
top - Alinha a imagem ao topo
‌bottom - 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" (<) --> 
&lt;

Ou

<!-- &#[número_entidade]; --> 
<!-- exemplo para o sinal "menor que" (<) --> 
&#60;

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.

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:

• text
• email
• password
• checkbox
• radio
• submit
• range
• search
• date
• time
• week
• color
• datalist

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 tag textarea é 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:

1. Um article (artigo, em inglês) destina-se a ser distribuído ou reutilizável de forma independente.
2. 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>&copy;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>&copy;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!