Blog do MX Cursos

5 dicas de HTML5 que todo curso deveria dar

5 dicas de HTML5 que todo curso deveria dar

O HTML5 é a última versão de Hypertext Markup Language (Linguagem de marcação de texto), o código para estruturar páginas na web. Nessa atualização, foram incluídos vários recursos que otimizam a exibição de vários tipos de conteúdos nos navegadores, como a exibição de artigos, imagens, vídeos, áudios criação de gráficos.

Neste post, daremos 5 dicas de HTML5 que deveriam estar presente em um bom curso de HTML5. Vamos lá!

5 dicas de HTML5 que todo curso deveria dar

 

1. Cabeçalho e metadados

No cabeçalho de uma página web, são incluídos diversos itens relacionados à forma como a página será exibida e que a descrevem para navegadores e mecanismos de busca. Alguns deles são:

  • descrição da página;
  • keywords, palavras que ajudam os buscadores a identificar se na página há o tipo de conteúdo que o usuário busca;
  • indicação de quais tipos de caracteres serão exibidos; e
  • inclusão de javascript e CSS.

2. Estruturação de textos

O HTML5 trabalha com tags semânticas, como posts em um blog, endereços, rodapés e legendas, que melhoram a exibição do conteúdo. Elas tornam a página mais intuitiva para os navegadores, que, assim podem exibir o texto de forma mais legível para o usuário.

Nessa versão especialmente foram incluídas tags como:

  • <main>: onde fica situado o principal conteúdo da página;
  • <header>: ideal para títulos de textos e mensagens;
  • <figcaption>: tag para legendas em figuras;
  • <figure>: tags entre as quais figuras e uma legenda são inseridas;
  • <article>: tags dentro das quais o conteúdo completo de artigos é colocado.

3. Formulários

Na última atualização, foram incluídas diversas funções que facilitam a estruturação e validação de formulários. Também foram desenvolvidos métodos que facilitam a criação de ferramentas que interagem com o usuário.

Nossos cursos indicados

O fieldset, por exemplo, agrupa itens de formulários como campos para inserção de texto, checkbox, combobox e botões. Já o datalist contém vários elementos, cada um em uma tag <option>, que ficam disponíveis para uso em outros elementos. Ele pode ser usado para um autocomplete para um input, por exemplo.

Os atributos oninput e o campo output permitem que, em um formulário HTML (sem uso de javascript ou acesso a uma aplicação de backend), se possam aplicar funções sobre dados inseridos em um formulário pelo usuário, agilizando assim rotinas como validação e outras.

Leia também  Criando um carrinho de compras com PHP – Parte 3

Ainda, foram acrescentados atributos e tags para melhoria da interação com o usuário, como autofocus, progress, e parâmetros para indicar o tipo de campo, como e-mail, texto e numérico. Eles tornam mais fácil verificar se os campos são preenchidos com o tipo correto de informação.

4. Inserção de áudio e vídeo

Com HTML5, a exibição de áudios, vídeos e imagens foi bastante simplificada. Foi eliminada a necessidade de utilização de plugins para a exibição um vídeo ou uma animação, por exemplo, o que deixa a página mais leve e segura.

Com <audio>, pode-se incluir controles e o link para o arquivo de áudio. Já com <video> temos funções e atributos que permitem:

  • localizar o vídeo e incluir controles;
  • indicar largura, altura;
  • configurar se ele será exibido logo ao abrir a página ou após o usuário clicar em play; e
  • link para imagem que fica sobre o vídeo antes de ser exibida.

No caso de textos com legenda, no próprio HTML podemos colocar o link para o arquivo com as legendas.

5. Criação de gráficos e animações

No HTML5 temos a tag <canvas>, dentro da qual podem-se desenhar gráficos de forma rápida e dinâmica. É necessário usar um código Javascript para desenhar os gráficos dentro dela, que não comporta apenas um container para os gráficos, mas, sim, disponibiliza diversos métodos para desenhar retângulos, linhas, textos e acrescentar de imagens.

Vimos assim que o HTML5 contém diversas atualizações que agilizam o desenvolvimento de páginas web, com recursos que ajudam a criar projetos mais dinâmicos e seguros. Com essas dicas de HTML5, é possível ter uma referência de qual conteúdo deve estar presente em um bom curso para que possa criar páginas dinâmicas e interativas, aproveitando bem os recursos da linguagem.

Está interessado em aprender tudo o que precisa para criação de páginas web? Conheça os cursos da MX Cursos. Você vai encontrar aulas de HTML5, CSS, Javascript, Jquery, Bootstrap, diversas linguagens e frameworks para a criação de páginas responsivas, interativas e com design atraente e moderno!

QUER POTENCIALIZAR SUAS HABILIDADES EM SOFTWARES E SEGMENTOS DO PRESENTE E DO FUTURO?

CURSOS ONLINE