HTML5. Quer dizer, HiperText Markup Language | Linguagem de Marcação de Hiper Texto, ja o numero 5 revela sua versão atual. Ela foi projetada originalmente para descrever documentos cientificos, seu design permitiu adaptações para descrever uma serie de outros documentos, entre eles os aplicativos ao longo dos anos. O inicio foi como HTML e foi ate a sua versão 4.01 e logo evoluindo para XHTML que trouxe melhorias de responsividade em diferentes dispositivos, trazendo eficiencia na separação de estrutura e conteudo e acessibilidade criando uma inclusão para todos usuarios na internet, que agora esta perdendo espaço para a nova versão HTML5, unificando estrutura e conteudo, e separando estrutura de formatação/estilo.

Hoje o HTML5 cuida somente da estrutura de uma forma logica.(ex. HTML5 cuida do esqueleto | CSS3 cuida da roupa, etc. | JavaScript, php, sql etc. cuida do comportamento, pele, orgãos e cerebro( controle, organização, processamento e armazenamento de informações)).

O arquivo html é lido pelas maquinas(leem de forma semantica e estrutural, são essas maquinas:[motores de busca | navegadores e especiais(para deficientes visuais ou auditivos)]), e tambem lido pelos humanos(parte textual e visivel, organização, e são esses usuarios: [usuarios de uma forma geral, que veem somente a parte "visivel" do site(textos, imagens, videos, musicas etc), e os usuarios desenvolvedores(que veem a parte do codigo fonte e programa esses codigos)]).

O HTML é uma linguagem para publicação de conteudo(texto, imagens, videos, som, etc) na internet.

Em 2006, o W3C indicou interesse em participar no desenvolvimento do HTML5, afinal, e em 2007 formou um grupo de trabalho fretado para trabalhar com o WHATWG no desenvolvimento da especificação HTML5. Apple, Mozilla e Opera permitiram que o W3C publicasse a especificação sob os direitos autorais do W3C, mantendo uma versão com a licença menos restritiva no site WHATWG.

Por vários anos, ambos os grupos trabalharam juntos. Em 2011, no entanto, os grupos chegaram à conclusão de que tinham objetivos diferentes: o W3C queria publicar uma versão "finalizada" de "HTML5", enquanto o WHATWG queria continuar trabalhando em um Padrão vivo para HTML, mantendo continuamente a especificação em vez de congelá-la em um estado com problemas conhecidos, e adicionando novos recursos conforme necessário para evoluir a plataforma.

Em 2019, o WHATWG e o W3C assinaram um acordo para colaborar em uma única versão do HTML daqui para frente: este documento.

A lista das versões em sequencia e seus respectivos anos de lançamento: HTML2.0 (1995), HTML3.0 (1997), XHTML (2000), HTML5 (2008) e até hoje vem sofrendo atualizações.

Avanços no uso/escrita do codigo fonte HTML:

• table :

  um site era desenvolvido dentro de tabelas, isso foi no inicio.

• div="valor" :

  por volta dos anos 2000, usavam a divisão com o elemento div, cujo valor era o setor cabeçalho, principal, rodape, etc.

• semantica :

  hoje usamos a semantica, que facilitou e muito na hora de escrever o codigo fonte, para os indexadores de busca e para acessibilidade(deficientes visuais, etc).

Com o HTML5, podemos fazer diferentes tipos de paginas e sistemas, como:

• Sites.
• Lojas virtuais.
• Sistemas online.
• Aplicativos (hibrido).
• admin. de site.
• Hotsite.
• Landing page/paralax.
• single page
• One page.
• Portfolio.
• blog.
• etc...

• Elementos:

• !-- texto/comentario --

• Esse elemento permite que o programador marque trechos do codigo, afim de melhor se localizar, todo o texto/comentario que for escrito aqui não é visto pelo usuario que visita o site.

• DOCTYPE!

• O DOCTYPE! é usado para informar que esse documento é a versão 5 do HTML.

• html

• Esse elemento é obrigatorio em todos os documentos em HTML, ele indica que este documento é um HTML.

• head

• No head é onde colocamos arquivos que configuram o documento HTML5, como meta, linkar codigos externos css, JavaScript etc.

• title

• Aqui colocamos o titulo da nossa pagina, ele aparece na barra de titulo no navegador.

• body
• No body é onde colocamos o conteudo principal, que vai ficar visivel para o usuario ao acessar o site pelo navegador.

Agora vamos falar sobre essas 3 palavrinhas que abrangem todo o HTML5, é importante conhecer elas para os proximos passos.

O HTML5 possui muitos Elementos com seus Atributos e consequentemente alguns atributos possuem valores correspondentes.

Mapa de Elementos e Atributos do HTML5 seguindo especificações da W3C:

Os numeros abaixo seguem a especificação da W3C.

• 107 Elementos

  1 Elemento é para uso do CSS.

• 170 Atributos

  • 14 Atributos globais.
  • 82 Atributos exclusivos.
  • 71 Atributos de eventos globais(JavaScript).
  • 23 Eventos de midia.
  • 15 Eventos de janela.
  • 10 Eventos de formulario.
  • 09 Eventos de mouse.
  • 08 Eventos de arrasto.
  • 03 Eventos de prancheta.
  • 03 Eventos de teclado.
  • 01 Evento de MISC.
  • 04 Atributos Não suportados mais pelo HTML5.

Veremos abaixo um pouco sobre:

• Elementos

  [Veja mais detalhes sobre (Elementos) na documentação da W3C.]

  • Um Elemento é o elemento raiz e define todo o documento HTML5,ele é definido no HTML5 com uma tag inicial e outra final.

    Dentro de um elemento tag, pode ir outro elemento.

    Existem 2 tipos de elementos:

    • Elementos com elementos dentro:

    <!-- Vemos 2 Elementos aqui (ol, li) --> <!-- O elemento li dentro do elemento ol --> <!-- Ambos os 2 elementos abaixo abrem tag ex.<>, e fecham tag ex.</> --> <ol> <li> item 1 </li> </ol>
    [veja o resultado aqui - Obs* na pagina que abre, clique no botão azul: run]
    
    

    • Elementos Vazios:

    São chamados de Elementos vazios, porque eles abrem tag mas NÃO fecham ela, e elementos vazios NÃO vão outros elementos dentro.

    <!-- Vemos 2 Elementos aqui (br, hr) --> <!-- O elemento hr NÃO esta dentro do elemento br --> <!-- Ambos os 2 elementos abaixo abrem tag ex.<>,e NÃO fecham tag--> <br> <hr>
    [veja o resultado aqui - Obs* na pagina que abre, clique no botão azul: run]
    

• Atributos

  [Veja mais detalhes sobre (Atributos) na documentação da W3C.]

  • Caracteristicas dos Atributos:

    • Todo Elemento no HTML5 pode conter Atributos.

    • A maior parte dos Atributos no HTML5 possuem valores que precisam ser descritos entre aspas duplas, ex:.

      <!-- O Atributo href esta com o valor link descrito entre aspas duplas. --> <a href="link" >link</a>
      [veja o resultado aqui - Obs* na pagina que abre, clique no botão azul: run]
      

    • Todos os Atributos são sempre especificados na tag de abertura, ex:

      <!-- O Atributo href foi escrito na tag de abertura. --> <a href="link" >link</a>
      [veja o resultado aqui - Obs* na pagina que abre, clique no botão azul: run]
      

    • Quando escrevemos um Atributo dentro de um elemento, dizemos que queremos atribuir/adicionar alguma informação/valor aquele Elemento, ex:

      <!-- Veremos 1 elemento a. --> <!-- Veremos 1 Atributo href. --> <!-- Atribuimos/adicionamos uma informação ao Elemento a: com o Atributo href o Elemento a se transforma em um link. Veja abaixo: --> <a>link</a> <!--Elemento a sem o Atributo href, não é link. --> <br> <a href="link" >link</a> <!-- Elemento a com o Atributo href, agora é um link. -->
      [veja o resultado aqui - Obs* na pagina que abre, clique no botão azul: run]
      

    • Alguns Atributos no HTML5 não necessitam de descrever valores, ex:

      <!-- O Atributo disabled não necessita de valor. --> <textarea disabled >Texto aqui
      [veja o resultado aqui - Obs* na pagina que abre, clique no botão azul: run]
      

  • Veremos 2 tipos de atributos:

    1. Atributos exclusivos, de cada Elemento no HTML5.
    2. Atributos Globais, pode usar em todos Elementos.
    0. Existe tambem os Atributos de Eventos Globais (**Não veremos esse porque envolve JavaScript, e nosso foco é somente HTML5).
    
    

    1. Atributos exclusivos, de cada Elemento no HTML5:

       [Veja mais detalhes sobre (Atributos Exclusivos) na documentação da W3C.]

       Aqui veremos que cada elemento pode possuir Atributos que são exclusivos a esse Elemento.

       No Elemento a, usamos o Atributo href(que faz o Elemento a, se transformar em link).

       Mas não podemos usar o Atributo href tambem no Elemento img, porque o Atributo href é exclusivo para o Elemento a.

       Veja abaixo um exemplo dos Atributos que são exclusivos a seus Elementos:

       <!-- O Atributo href(Endereço de destino) é exclusivo do Elemento a --> <a href="link">link</a> <br> <!-- O Atributo src(Endereço de origem da imagem) é exclusivo do Elemento img.--> <img src="https://icon-library.com/images/img-icon/img-icon-23.jpg"/> <!-- Cada Atributo acima é de uso exclusivo de seu elemento. -->
       [veja o resultado aqui - Obs* na pagina que abre, clique no botão azul: run]
       
    
    

    2. Atributos Globais, podemos usar em todos Elementos:

       [Veja mais detalhes sobre (Atributos Globais) na documentação da W3C.]

       Aqui os Atributos podem ser usados em todos os Elementos HTML5.

       No Elemento a usamos o Atributo title(ao passar o mouse em cima, aparece uma mensagem).

       E podemos tambem usar o Atributo no elemento img.

       Veja abaixo um exemplo dos Atributos Globais:

       <!-- O Atributo title(mensagem ao passar do mouse) é usado pelo Elemento a --> <a title="Passou o mouse" href="link">link</a> <br> <!-- O Atributo title(mensagem ao passar do mouse) é usado pelo Elemento img --> <img title="Passou o mouse" src="https://icon-library.com/images/img-icon/img-icon-23.jpg"/> <!-- O Atributo title acima é de uso Global, portanto todos os Elementos do HTML5 podem usar. -->
       [veja o resultado aqui - Obs* na pagina que abre, clique no botão azul: run]
       

• Valores

  • Os valores são usados pelos Atributos.

    Nem todos os Atributos necessitam de valor.

    Modificamos as propriedades dos Elementos quando usamos Atributos sem valores, ou com valores.

    Existem valores de Atributos que são pre-determinados pelo HTML5:

    <!-- So posso usar 2 valores para o Atributo charset, UTF-8 ou ISO-8859-1, eles foram pre-determinados pelo HTML5 --> <meta charset="UTF-8">

    E em alguns Atributos precisaremos setar valores de acordo com a situação:

    <!-- No exemplo abaixo, uso 2 Atributos, name e content, ambos os 2 Atributos necessitam de valor, no Atributo name, sou obrigado a usar um valor pre-determinado pelo HTML5, no Atributo content, sou livre pra escrever o que quizer, do jeito que quizer, desde que especifique como um autor, --> <meta name="author" content="Luiz dos S. R. Morais.">

O Elemento meta define metadados de um documento HTML5. Metadados são dados(informações) sobre dados.

Esses metadados(informações), são sobre o documento(html) e a pagina(site).E essas informações são usadas pelos navegadores padrões e especiais, motores de busca e outros serviços web.

Basicamente o elemento meta é dividido em 2 atributos, o http-equiv(configurações de cache, redirecionamentos, codificação e idioma) e o name(conteudo da pagina como palavras-chaves, descrição, controle de publico, e tambem o viewport(Design responsivo)).

A tag meta fica dentro do Elemento head, e não possui filhos(so usa tag de abertura).

Os metadados não são visiveis ao usuario, mas são lidos pelos navegadores que carregam a pagina, motores de busca, desenvolvedores e outros serviços web.

Atributos

No elemento meta, os atributos são responsaveis por configurar a forma como o documento e a pagina vai ser vista pelos navegadores padrões, navegadores especiais e motores de busca

Veremos abaixo um pouco mais sobre esses 4 atributos do elemento meta:

1. content.
2. http-equiv.
3. name.
4. charset.

1. content

   [Veja mais detalhes sobre (Atributo content) na documentação da W3C.]

   O atributo content, recebe um valor associado ao atributo http-requiv ou o atributo name.

   Se especificar o atributo http-requiv, não especifique o name, escolha um ou outro.

   Veja exemplos de uso do atributo content abaixo:

   <head><!-- CONTEUDO NÃO VISIVEL ao usuario--> <!-- exemplo de uso do content --> <meta http-equiv="valor" content="valor"> </head> <body><!-- CONTEUDO VISIVEL ao usuario--> conteudo da pagina. </body>
   [veja o resultado aqui - Obs* na pagina que abre, clique no botão azul: run]
   
   
   

2. http-equiv

   [Veja mais detalhes sobre (Atributo http-equiv) na documentação da W3C.]

   Este atributo controla as requisições [browser>servidor>PAGINA>browser].

   ex: cache , redirecionamentos, codificação e idioma.

   
   

   Vejamos abaixo um exemplo de uso do atributo http-equiv:

   <head><!-- CONTEUDO NÃO VISIVEL ao usuario--> <!-- exemplo de uso do http-equiv --> <!-- no atributo content colocamos o valor relacionado com o valor no atributo http-equiv--> <!-- Veremos os valores que colocamos no atributo http-equiv, e depois atraves desse valor colocaremos o valor no atributo content--> <!-- Todo elemento dentro do elemento head, NÃO é visivel ao usuario.--> <meta http-equiv="valor" content="valor"> </head> <body><!-- CONTEUDO VISIVEL ao usuario--> conteudo da pagina. </body>
   [veja o resultado aqui - Obs* na pagina que abre, clique no botão azul: run]
   
   
   

   Valores do atributo http-equiv:

   • cache-control (funciona ate a versão 1.1 do http). [cache do navegador]

     No atributo content, temos alguns valores que são relacionados com o valor cache-control do atributo http-equiv.

     • public : a pagina fica armazenada no cache do navegador para todos os usuarios.
     • private : a pagina fica armazenada no cache do navegador apenas para o usuario atual.
     • no-cache : não armazena no cache do navegador.
     • no-store : cache temporario somente enquanto a pagina estiver aberta.

     veja exemplos de uso abaixo:

     <head><!-- CONTEUDO NÃO VISIVEL ao usuario--> <!-- public --> <meta http-equiv="cache-control" content="public"> <!-- private --> <meta http-equiv="cache-control" content="private"> <!-- no-cache --> <meta http-equiv="cache-control" content="no-cache"> <!-- no-store --> <meta http-equiv="cache-control" content="no-store"> </head> <body><!-- CONTEUDO VISIVEL ao usuario--> conteudo da pagina. </body>
     [veja o resultado aqui - Obs* na pagina que abre, clique no botão azul: run]
     
     
     
   • pragma. [substitui o valor cache-control(v1.1 http)]

     No atributo content, temos alguns valores que são relacionados com o valor pragma do atributo http-equiv.

     • public : a pagina fica armazenada no cache do navegador para todos os usuarios.
     • private : a pagina fica armazenada no cache do navegador apenas para o usuario atual.
     • no-cache : não armazena no cache do navegador.
     • no-store : cache temporario somente enquanto a pagina estiver aberta.

     veja exemplos de uso abaixo:

     <head><!-- CONTEUDO NÃO VISIVEL ao usuario--> <!-- public --> <meta http-equiv="pragma" content="public"> <!-- private --> <meta http-equiv="pragma" content="private"> <!-- no-cache --> <meta http-equiv="pragma" content="no-cache"> <!-- no-store --> <meta http-equiv="pragma" content="no-store"> </head> <body><!-- CONTEUDO VISIVEL ao usuario--> conteudo da pagina. </body>
     [veja o resultado aqui - Obs* na pagina que abre, clique no botão azul: run]
     
     
     
   • content-language. [idiomas que constam no documento]

     No atributo content, temos alguns valores que são relacionados com o valor content-language do atributo http-equiv.

     • pt-br,en-US,fr : pode colocar mais de 1 idioma, contanto que conste no documento.

     Veja exemplo de uso abaixo:

     <head><!-- CONTEUDO NÃO VISIVEL ao usuario--> <!-- pt-br --> <meta http-equiv="content-language" content="pt-br"> </head> <body><!-- CONTEUDO VISIVEL ao usuario--> conteudo da pagina. </body>
     [veja o resultado aqui - Obs* na pagina que abre, clique no botão azul: run]
     
     
     
   • content-type. [tipo de conteudo na pagina, ex: html, texto, tambem podemos configurar a codificação.]

     No atributo content, temos alguns valores que são relacionados com o valor content-type do atributo http-equiv.

     • text/html : tipo de documento texto e html
     • charset=UTF-8 : codificação para acentuação.

     Veja exemplos de uso abaixo:

     <head><!-- CONTEUDO NÃO VISIVEL ao usuario--> <!-- text/html;charset=UTF-8 --> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> </head> <body><!-- CONTEUDO VISIVEL ao usuario--> conteudo da pagina. </body>
     [veja o resultado aqui - Obs* na pagina que abre, clique no botão azul: run]
     
     
     
   • expires. [quando a pagina expira no cache, necessitando ser requisitada novamente ao servidor pelo browser]

     No atributo content, temos alguns valores que são relacionados com o valor expires do atributo http-equiv.

     • 0 : o valor zero expira no ato.
     • sun, 07 jul 2020 23:59 GMT : expira na data especificada.

     Veja exemplos de uso abaixo:

     <head><!-- CONTEUDO NÃO VISIVEL ao usuario--> <!-- expira no ato, necessitando requisitar a pagina no servidor toda vez que for acessar ela --> <meta http-equiv="expires" content="0"> <!-- expira na data descrita abaixo --> <meta http-equiv="expires" content="sun, 07 jul 2020 23:59 GMT"> </head> <body><!-- CONTEUDO VISIVEL ao usuario--> conteudo da pagina. </body>
     [veja o resultado aqui - Obs* na pagina que abre, clique no botão azul: run]
     
     
     
   • refresh. [recarrega/redireciona a pagina]

     No atributo content, temos alguns valores que são relacionados com o valor refresh do atributo http-equiv.

     • 3 : recarrega a pagina a cada 3 segundos.
     • 3;url=https://www.google.com : redireciona para o site apos 3 segundos.

     Vejamos exemplos de uso abaixo, recarregar pagina a cada 3 segundos:

     <head><!-- CONTEUDO NÃO VISIVEL ao usuario--> <!-- recarrega a pagina a cada 3 segundos --> <meta http-equiv="refresh" content="3"> </head> <body><!-- CONTEUDO VISIVEL ao usuario--> conteudo da pagina. </body>
     [veja o resultado aqui - Obs* na pagina que abre, clique no botão azul: run]
     
     

     Vejamos exemplos de uso abaixo, redirecionar a pagina em 3 segundos:

     <head><!-- CONTEUDO NÃO VISIVEL ao usuario--> <!-- redireciona a pagina em 3 segundos --> <meta http-equiv="refresh" content="3;url=https://google.com"> </head> <body><!-- CONTEUDO VISIVEL ao usuario--> conteudo da pagina. </body>
     [veja o resultado aqui - Obs* na pagina que abre, clique no botão azul: run]
     
     
     

3. name

   [Veja mais detalhes sobre (Atributo name) na documentação da W3C.]

   Este atributo controla as informações da pagina e o documento html aos browsers padrões, browsers especiais e motores de busca.

   ex: descrição, robots, palavras chaves, autor do site, programas que usou para criar o site, copyright, codificação e controle de publico.

   
   

   Vejamos abaixo um exemplo de uso do atributo name:

   <head><!-- CONTEUDO NÃO VISIVEL ao usuario--> <!-- exemplo de uso do name --> <!-- no atributo content colocamos o valor relacionado com o valor no atributo name--> <!-- Veremos os valores que colocamos no atributo name, e depois atraves desse valor colocaremos o valor no atributo content--> <!-- Todo elemento dentro do elemento head, NÃO é visivel ao usuario.--> <meta name="valor" content="valor"> </head> <body><!-- CONTEUDO VISIVEL ao usuario--> conteudo da pagina. </body>
   [veja o resultado aqui - Obs* na pagina que abre, clique no botão azul: run]
   
   
   

   Valores do atributo name:

   • copyright. [direitos de desenvolvimento da pagina]

     No atributo content, temos alguns valores que são relacionados com o valor copyright do atributo name.

     Veja exemplo de uso abaixo:

     <head><!-- CONTEUDO NÃO VISIVEL ao usuario--> <!-- exemplo de uso do copyright --> <meta name="copyright" content="2020 Luiz dos S. R. Morais"> </head> <body><!-- CONTEUDO VISIVEL ao usuario--> conteudo da pagina. </body>
     [veja o resultado aqui - Obs* na pagina que abre, clique no botão azul: run]
     
     
     
   • description. [descrição da pagina]

     No atributo content, temos alguns valores que são relacionados com o valor description do atributo name.

     Veja exemplo de uso abaixo:

     <head><!-- CONTEUDO NÃO VISIVEL ao usuario--> <!-- exemplo de uso do description --> <meta name="description" content="Pagina para visualizar o resultado no codigo fonte."> </head> <body><!-- CONTEUDO VISIVEL ao usuario--> conteudo da pagina. </body>
     [veja o resultado aqui - Obs* na pagina que abre, clique no botão azul: run]
     
     
     
   • keywords. [palavras chave referentes a pagina]

     No atributo content, temos alguns valores que são relacionados com o valor keywords do atributo name.

     Veja exemplo de uso abaixo:

     <head><!-- CONTEUDO NÃO VISIVEL ao usuario--> <!-- exemplo de uso do keywords --> <meta name="keywords" content="html5,codigo fonte"> </head> <body><!-- CONTEUDO VISIVEL ao usuario--> conteudo da pagina. </body>
     [veja o resultado aqui - Obs* na pagina que abre, clique no botão azul: run]
     
     
     
   • author. [autor da pagina]

     No atributo content, temos alguns valores que são relacionados com o valor author do atributo name.

     Veja exemplo de uso abaixo:

     <head><!-- CONTEUDO NÃO VISIVEL ao usuario--> <!-- exemplo de uso do author --> <meta name="author" content="Luiz dos S. R. Morais"> </head> <body><!-- CONTEUDO VISIVEL ao usuario--> conteudo da pagina. </body>
     [veja o resultado aqui - Obs* na pagina que abre, clique no botão azul: run]
     
     
     
   • generator. [Qual softwares usou para desenvolver a pagina]

     No atributo content, temos alguns valores que são relacionados com o valor generator do atributo name.

     Veja exemplo de uso abaixo:

     <head><!-- CONTEUDO NÃO VISIVEL ao usuario--> <!-- exemplo de uso do generator --> <meta name="generator" content="Visual Studio Code, Git(vcs) SCM, GitHub Desktop"> </head> <body><!-- CONTEUDO VISIVEL ao usuario--> conteudo da pagina. </body>
     [veja o resultado aqui - Obs* na pagina que abre, clique no botão azul: run]
     
     
     
   • rating. [controle de publico (idade)]

     No atributo content, temos alguns valores que são relacionados com o valor rating do atributo name.

     temos 3 opções de valor no atributo content relacionados com o valor rating, vejamos abaixo quais são:

     • general : conteudo para todas as idades.
     • 16 years : conteudo para menores de 16 anos.
     • mature : conteudo para maiores de 18 anos.

     Veja exemplo de uso abaixo:

     <head><!-- CONTEUDO NÃO VISIVEL ao usuario--> <!-- exemplo de uso do general --> <meta name="rating" content="general"> <!-- exemplo de uso do 16 years --> <meta name="rating" content="16 years"> <!-- exemplo de uso do mature --> <meta name="rating" content="mature"> </head> <body><!-- CONTEUDO VISIVEL ao usuario--> conteudo da pagina. </body>
     [veja o resultado aqui - Obs* na pagina que abre, clique no botão azul: run]
     
     
     
   • robots. [robots dos motores de busca que indexam e/ou arquivam a pagina]

     No atributo content, temos alguns valores que são relacionados com o valor robots do atributo name.

     temos 6 opções de valor no atributo content relacionados com o valor robots, vejamos abaixo quais são:

     • all : robots não recebe informações da pagina.

     Veja exemplo de uso abaixo:

     <head><!-- CONTEUDO NÃO VISIVEL ao usuario--> <!-- exemplo de uso do all --> <meta name="robots" content="all"> </head> <body><!-- CONTEUDO VISIVEL ao usuario--> conteudo da pagina. </body>
     [veja o resultado aqui - Obs* na pagina que abre, clique no botão azul: run]
     
     
     
     • index : robots podem indexar (incluir a pagina na busca).

     Veja exemplo de uso abaixo:

     <head><!-- CONTEUDO NÃO VISIVEL ao usuario--> <!-- exemplo de uso do index --> <meta name="robots" content="index"> </head> <body><!-- CONTEUDO VISIVEL ao usuario--> conteudo da pagina. </body>
     [veja o resultado aqui - Obs* na pagina que abre, clique no botão azul: run]
     
     
     
     • follow : robots indexam a pagina e seguem os links.

     Veja exemplo de uso abaixo:

     <head><!-- CONTEUDO NÃO VISIVEL ao usuario--> <!-- exemplo de uso do follow --> <meta name="robots" content="follow"> </head> <body><!-- CONTEUDO VISIVEL ao usuario--> conteudo da pagina. </body>
     [veja o resultado aqui - Obs* na pagina que abre, clique no botão azul: run]
     
     
     
     • NoFollow : robots indexam a pagina mas não seguem os links.

     Veja exemplo de uso abaixo:

     <head><!-- CONTEUDO NÃO VISIVEL ao usuario--> <!-- exemplo de uso do NoFollow --> <meta name="robots" content="NoFollow"> </head> <body><!-- CONTEUDO VISIVEL ao usuario--> conteudo da pagina. </body>
     [veja o resultado aqui - Obs* na pagina que abre, clique no botão azul: run]
     
     
     
     • None : não indexa a pagina em hipotese alguma (ignora a pagina).

     Veja exemplo de uso abaixo:

     <head><!-- CONTEUDO NÃO VISIVEL ao usuario--> <!-- exemplo de uso do None --> <meta name="robots" content="None"> </head> <body><!-- CONTEUDO VISIVEL ao usuario--> conteudo da pagina. </body>
     [veja o resultado aqui - Obs* na pagina que abre, clique no botão azul: run]
     
     
     
     • NoArchive : não arquiva e nem indexa.

     Veja exemplo de uso abaixo:

     <head><!-- CONTEUDO NÃO VISIVEL ao usuario--> <!-- exemplo de uso do NoArchive --> <meta name="robots" content="NoArchive"> </head> <body><!-- CONTEUDO VISIVEL ao usuario--> conteudo da pagina. </body>
     [veja o resultado aqui - Obs* na pagina que abre, clique no botão azul: run]
     
     
     
   • viewport. [configura a area visivel de dispositivos(responsividade)]

     O view port é toda a area visivel na tela de dispositivos mobile, tablets e computadores.

     Antes as paginas eram desenvolvidas somente para computadores, estaticas e sem preucupações com dimensões de largura.

     Com a chegada dos celulares e tablets, surgiu a necessidade de diminuir a dimensão da pagina, e por conta da má visualização das paginas com dimensões estaticas em dispositivos serem muito grandes para caber na viewport, os navegadores desses dispositivos mobile e de tablets reduziram toda a pagina da web para se encaixar na tela.

     incluindo o seguinte valor viewport no atributo name do elemento meta, podemos controlar essa resposividade direto no codigo html.

     • valores para configurar o viewport:
     • viewport : controla a area visivel.
     • width=device-width : define a largura da pagina que varia dependendo do dispositivo.
     • initial-scale=1.0 : define o nivel inicial de zoom na primeira vez que a pagina carrega no browser.
     
     

     Veja exemplos de uso abaixo:

     <head><!-- CONTEUDO NÃO VISIVEL ao usuario--> <!-- exemplo de uso do viewport --> <!-- valor do atributo content relacionado com o valor viewport do atributo name --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body><!-- CONTEUDO VISIVEL ao usuario--> conteudo da pagina. </body>
     [veja o resultado aqui - Obs* na pagina que abre, clique no botão azul: run]
     
     
     

4. charset

   [Veja mais detalhes sobre (Atributo charset) na documentação da W3C.]

   Esse atributo especifica a codificação de caracteres do documento HTML.

   Veja exemplos de uso abaixo:

   <head><!-- CONTEUDO NÃO VISIVEL ao usuario--> <!-- exemplo de uso do atributo charset --> <meta charset="UTF-8"> </head> <body><!-- CONTEUDO VISIVEL ao usuario--> conteudo da pagina. </body>
   [veja o resultado aqui - Obs* na pagina que abre, clique no botão azul: run]
   
   
   

Esse elemento é usado para explicar trechos do codigo fonte afim de não se perder quando for modificar o mesmo trecho porteriormente, tambem pode usar para organizar e marcar trechos de codigo fonte.

Ele não é visto pelo usuario, por isso seu uso é exclusivo para quem programa, veja ele aplicado no codigo fonte abaixo:

Veja um exemplo de uso:

Para "adicionar" imagens em uma pagina usamos o elemento img, esse elemento vincula/linka imagens atravez do endereço de origem, e adiciona essa imagem no espaço reservado criado pelo elemento img.

Então podemos dizer que quando "adicionamos" uma imagem na pagina, estamos vinculando/linkando atravez de um endereço de origem, e mostrando essa imagem atravez do espaço de retenção criado pelo elemento img.

O elemento img possui muitos atributos interessantes, mas usamos somente alguns, e veremos uma lista desses atributos abaixo:

• Atributos do elemento img:
1. alt
2. title [global]
3. src
4. height
5. width
6. usemap

1. alt

   Esse atributo é usado para definir um texto caso a imagem não carregue, existem alguns motivos responsaveis por isso ocorrer, que é conexão lenta, erro em algum parametro no elemento img, etc.

   Esse atributo permite a acessibilidade, dando poder aos leitores de tela que leem esse texto.

   Veja um exemplo de uso:

   
   <head><!-- CONTEUDO NÃO VISIVEL ao usuario--> <title></title> </head> <body><!-- CONTEUDO VISIVEL ao usuario--> <!-- imagem não carregada, o texto aparece!. --> <img src="" alt="Texto alternativo caso a imagem não carregue."> <br><br> <!-- imagem carregada, o texto NÃO aparece. --> <img src="https://uploaddeimagens.com.br/images/003/026/463/full/workplace.jpg?1610129621" alt="Texto alternativo caso a imagem não carregue."> </body>
   [veja o resultado aqui - Obs* na pagina que abre, clique no botão azul: run]
   
   
   

2. title -[global]

   Um atributo [global] pode ser usado em todos elementos no HTML5.

   Esse atributo é usado para definir um texto que aparece ao passar o mouse por cima da imagem.

   Veja um exemplo de uso:

   
   <head><!-- CONTEUDO NÃO VISIVEL ao usuario--> <title></title> </head> <body><!-- CONTEUDO VISIVEL ao usuario--> <!-- imagem carregada, o texto NÃO aparece. --> <img src="https://uploaddeimagens.com.br/images/003/026/463/full/workplace.jpg?1610129621" title="Texto aparece ao passar o mouse na imagem."> </body>
   [veja o resultado aqui - Obs* na pagina que abre, clique no botão azul: run]
   
   
   

3. src

   Esse atributo define o endereço de origem da imagem vinculada/linkada.

   Esse atributo é necessario porque sem ele não existe imagem, assim como o atributo alt que mostra um texto caso a imagem não apareça.

   Existem 2 formas de vincular/linkar uma imagem, de forma externa e relativa, veja exemplos abaixo:

   • externa.

     Endereços de origem de imagens de outros sites/dominios, essa forma de vincular/linkar decai sob leis de direitos autorais, outro problema é sobre a disponibilidade dessa imagem, como esta em outro site ela pode a qualquer momento ficar indisponivel, veja um exemplo de link externo: http://siteexterno.com.br/imagemexterna.jpg

   • relativa.

     Endereços de origem de imagens no mesmo diretorio da pagina em que essa imagem vai ser vinculada/linkada, otima escolha para sites quandoo pensamos em disponibilidade da imagem, veja um exemplo de link relativo: /imagemrelativa.jpg

   Veja um exemplo de uso e aplicação da forma externa e relativa:

   
   <head><!-- CONTEUDO NÃO VISIVEL ao usuario--> <title></title> </head> <body><!-- CONTEUDO VISIVEL ao usuario--> <!-- Externa. --> <img src="https://uploaddeimagens.com.br/images/003/026/463/full/workplace.jpg?1610129621" alt="erro no carregamento da imagem."> <!-- Relativa. --> <img src="img_girl.jpg" alt="explicação ilustrativa, a imagem não vai carregar."> </body>
   [veja o resultado aqui - Obs* na pagina que abre, clique no botão azul: run]
   
   
   

4. height | width

   É importante definir esses 2 atributos juntos, porque o atributo height cuida da altura e o atributo widht cuida da largura, eles juntos definem a largura e altura do espaço reservado para receber uma imagem.

   • height. [altura]

     Esse atributo define a altura do espaço reservado que vai receber a imagem, é importante defini-lo para que o espaço para a imagem fique reservado na pagina.

     Evite forçar diminuir o tamanho da imagem com esse atributo, uma imagem grande forçada a caber nas dimensões menores do atributo height não diminui o tempo de carregamento dessa imagem, mesmo que o height esteja definindo o espaço da imagem como a menor possivel; Então use primeiro programas de edição para definir um tamanho adequado para a imegam, depois defina o height para reservar o espaço na pagina e assim receber a imagem que virá atraves do endereço de origem, dessa forma vai fluir melhor o carregamento da sua imagem.

   • widht. [largura]

     Esse atributo define a largura do espaço reservado que vai receber a imagem, é importante defini-lo para que o espaço para a imagem fique reservado na pagina.

     Evite forçar diminuir o tamanho da imagem com esse atributo, uma imagem grande forçada a caber nas dimensões menores do atributo widht não diminui o tempo de carregamento dessa imagem, mesmo que o widht esteja definindo o espaço da imagem como a menor possivel; Então use primeiro programas de edição para definir um tamanho adequado para a imegam, depois defina o widht para reservar o espaço na pagina e assim receber a imagem que virá atraves do endereço de origem, dessa forma vai fluir melhor o carregamento da sua imagem.

   Veja um exemplo de uso desses 2 atributos:

   
   <head><!-- CONTEUDO NÃO VISIVEL ao usuario--> <title></title> </head> <body><!-- CONTEUDO VISIVEL ao usuario--> <!-- definindo o tamanho do espaço reservado para receber a imagem. --> <img src="https://uploaddeimagens.com.br/images/003/026/463/full/workplace.jpg?1610129621" height="400" width="200"> </body>
   [veja o resultado aqui - Obs* na pagina que abre, clique no botão azul: run]
   
   
   

5. usemap

   Esse atributo define uma area clicavel em uma imagem, essa area clicavel é localizada atravez de coordenadas afim de definir os limites da area de clique, e ao definir essa area de clique em uma imagem, é possivel linkar essa area a uma outra pagina, imagem, etc.

   O atributo usemap interliga os elementos img e map, atraves do atributo name definido no elemento map.

   Veja um exemplo de uso:

   
   <head><!-- CONTEUDO NÃO VISIVEL ao usuario--> <title></title> </head> <body><!-- CONTEUDO VISIVEL ao usuario--> <img src="https://uploaddeimagens.com.br/images/003/026/463/full/workplace.jpg?1610129621" usemap="#workmap" > <map name="workmap"> <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm"> <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm"> <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm"> </map> </body>
   [veja o resultado aqui - Obs* na pagina que abre, clique no botão azul: run]
   
   
   

A tag a, é um Elemento que incorpora um Hiperlink, linkando uma pagina a outra.

Este elemento possui muitos Atributos, porem o Atributo mais importante, e que sem esse atributo o elemento a não se torna Hiperlink, é o atributo href, e sem esse Atributo o Elemento a é somente um espaço vazio reservado para um hiperlink.

Por padrão a pagina linkada no Atributo href, é exibida na mesma pagina, a menos que você queira que o link abra de outra forma usando o Atributo target.

Por padrão os hiperlinks ja possuem estilos predefinidos, que são:

• Sublinhado e Azul: um link não visitado.
• Sublinhado e Roxo: um link visitado.
• Sublinhado e Vermelho: um link ativo.

Atributos.

Veremos alguns atributos do Elemento a, porem não aprofundaremos no assunto, ja que os Atributos href, target e type são os mais usados. (leia a documentação.)

1. Atributos do elemento a:

• href

  [Veja mais detalhes sobre (href) na documentação da W3C.]

  No Atributo href que colocamos o link, que ao ser clicado vai nos levar para outra pagina, seja em destino absoluto, relativo, interno, protocolos ou scripts:

  • absolute: Aponta para outro site.
  • relativo: Aponta para um arquivo no mesmo servidor do arquivo atual.
  • interno: Aponta para um elemento na pagina identificado por um Atributo id.
  • protocolos: Outros protocolos (como https: //, ftp: //, mailto :, file :, etc.)
  • scripts: Um script (como href = "javascript: alert ('Hello');")

  Veja um exemplo de uso do Atributo href:

  <!-- destino absoluto --> <a href="http://google.com">link como destino o google.</a> <!-- destino relativo --> <a href="AULA1.html">pasta do windows.</a> <!-- destino interno --> <a href="#item11">acessar o conteudo links, desta pagina.</a> <!-- destino protocolos --> <a href="mailto:email@provedor.com">destino provedor email</a> <!-- destino scripts --> <a href="javascript: alert ('Link destino script! ');">destino script</a>
  [veja o resultado aqui - Obs* na pagina que abre, clique no botão azul: run]
  

• target

  [Veja mais detalhes sobre (target) na documentação da W3C.]

  No Atributo target podemos especificar de que forma a pagina vai ser aberta ao clicar no link.

  Por padrão o Elemento a, vem com Atributo target no valor padrão _self.

  Veremos abaixo os Valores que podemos colocar no Atributo target: (veja mais detalhes na documentação)

  • _self : ao clicar no link, a pagina destino abrira na mesma janela/aba (valor padrão).
  • _blank : ao clicar no link, a pagina destino abrira em uma nova janela/aba.

  Veja um exemplo de uso do Atributo target:

  <!-- na mesma pagina/aba PADRÃO --> <a href="/" target="_self">Link abre na mesma pagina/aba.</a> <!-- na outra pagina/aba --> <a href="/" target="_blank">Link abre em outra pagina/aba.</a>
  [veja o resultado aqui - Obs* na pagina que abre, clique no botão azul: run]
  

Elemento table usado para estruturar.

Quando falamos no elemento table é impossivel não se lembrar da época que ele era usado para estruturar um documento, toda a separação de setores como cabeçalho, corpo, seções e rodapé, eram feitas pelo elemento table, veja um exemplo abaixo de quando o elemento table foi usado em um site importante, o google.com:

o elemento table era usado na estruturação do site google.com de 1998.

Agora vemos a evolução da escrita no codigo HTML, no momento que escrevo este texto 10 de janeiro de 2021 usando o mesmo site google.com, o elemento table foi substituido pelo elemento div na estruturação de setores como cabeçalho, corpo, rodape, etc:

O elemento div ainda é usado no google.com em janeiro de 2021.

Elemento table no HTML5.

Hoje o elemento table é utilizado para o que provavelmente foi criado, planilhas no documento HTML. Esse tipo de evolução é muito importante pro funcionamento da semantica, pois organiza cada elemento no seu devido lugar.

Para criar uma tabela fazemos uso de mais alguns elementos:

Mapa dos elementos, atributos e valores relacionados com tabela.

1. table
2. caption
3. th
• atributos
• rowspan
• colspan
• headers
• abbr
• scope. valores: col, row, colsgroup e rowgroup.
4. tr
5. td
   • atributos
   • rowspan
   • colspan
   • headers
6. thead
7. tbody
8. tfoot

• Elementos

1. table. [ usado para criar um tabela ]
   [Veja mais detalhes sobre (Elemento table) na documentação da W3C.]

   O elemento table define uma tabela no HTML5.

   É o elemento pai de todos os elementos que complementam uma tabela.

2. caption. [ legenda para tabela ]
   [Veja mais detalhes sobre (Elemento caption) na documentação da W3C.]

   O elemento caption define uma legenda para a tabela.

   Deve ser inserida apos o elemento table ser aberto, e por padrão ela é posicionada no centro acima da tabela(pode mudar essas propriedades usando CSS).

3. th. [ celulas de cabeçalho da tabela ]
   [Veja mais detalhes sobre (Elemento th) na documentação da W3C.]

   O elemento th define uma celula de cabeçalho alinhados no centro por padrão.

   Atributos:

   • rowspan

     Usada para mesclar celulas de cima para baixo.

     Deve estar dentro dos mesmos elementos semanticos, sejam thead, tbody ou tfoot.

   • colspan

     Usada para mesclar celulas da esquerda para direita.

     Deve estar dentro dos mesmos elementos semanticos, sejam thead, tbody ou tfoot.

   • headers

     Define uma relação das celulas de dados com as celulas de cabeçalho.

     Não tem efeito visual algum, mas pode ser lido pelos leitores de tela (acessibilidade).

   • abbr

     Define a versão mais curta em uma celula de cabeçalho.

     Não tem efeito visual algum, mas pode ser lido pelos leitores de tela (acessibilidade).

   • scope

     Define se uma celula de cabeçalho é um cabeçalho da coluna, linhas ou grupo de colulas, para definir essas caracteristicas temos que especificar um dos valores abaixo:

     1. col : é o cabeçalho de uma coluna.
     2. row : é o cabeçalho de uma linha.
     3. colgroup : é o cabeçalho para um grupo de colunas.
     4. rowgroup : é o cabeçalho para um grupo de linhas.

     Não tem efeito visual algum, mas pode ser lido pelos leitores de tela (acessibilidade).

4. tr. [ linhas da tabela ]
   [Veja mais detalhes sobre (Elemento tr) na documentação da W3C.]

   O elemento tr define uma linha na tabela.

5. td. [ celulas de dados da tabela ]
   [Veja mais detalhes sobre (Elemento td) na documentação da W3C.]

   O elemento td define uma celula de dados alinhados a esquerda por padrão.

   Atributos:

   • rowspan

     Usada para mesclar uma celula de cima para baixo.

     Deve estar dentro dos mesmos elementos semanticos, sejam thead, tbody ou tfoot.

   • colspan

     Usada para mesclar uma celula da esquerda para direita.

     Deve estar dentro dos mesmos elementos semanticos, sejam thead, tbody ou tfoot.

   • headers

     Define uma relação das celulas de dados com as celulas de cabeçalho.

     Não tem efeito visual algum, mas pode ser lido pelos leitores de tela (acessibilidade).

6. thead. [ cabeçalho da tabela ]
   [Veja mais detalhes sobre (Elemento thead) na documentação da W3C.]

   O elemento thead é usado em conjunto com os elementos tbody e tfoot.

   O elemento thead define um significado semantico á uma tabela, o conteudo dentro dele caracteriza o cabeçalho da tabela.

   Essa definição semantica tambem é usada na impressão de um documento, caso uma tabela não caiba em uma folha, o serviço de impressão pode separar o conteudo do elemento thead em uma folha, consequentemente os elementos tbody e tfoot cada qual em uma folha.

7. tbody. [ corpo da tabela ]
   [Veja mais detalhes sobre (Elemento tbody) na documentação da W3C.]

   O elemento tbody é usado em conjunto com os elementos thead e tfoot.

   O elemento tbody define um significado semantico á uma tabela, o conteudo dentro dele caracteriza o corpo da tabela.

   Essa definição semantica tambem é usada na impressão de um documento, caso uma tabela não caiba em uma folha, o serviço de impressão pode separar o conteudo do elemento tbody em uma folha, consequentemente os elementos thead e tfoot cada qual em uma folha.

8. tfoot. [ rodapé da tabela ]
   [Veja mais detalhes sobre (Elemento tfoot) na documentação da W3C.]

   O elemento tfoot é usado em conjunto com os elementos thead e tbody.

   O elemento tfoot define um significado semantico á uma tabela, o conteudo dentro dele caracteriza o rodape da tabela.

   Essa definição semantica tambem é usada na impressão de um documento, caso uma tabela não caiba em uma folha, o serviço de impressão pode separar o conteudo do elemento tfoot em uma folha, consequentemente os elementos thead e tbody cada qual em uma folha.

Veja um exemplo de uso de todos os elementos filhos de table abaixo:

<head><!-- CONTEUDO NÃO VISIVEL ao usuario--> <title></title> <style> table, th, td { border: 1px solid black; } </style> </head> <body><!-- CONTEUDO VISIVEL ao usuario--> <table> <thead title="cabeçalho"> <tr> <th scope="col">titulo coluna 1</th> <th scope="col">titulo coluna 2</th> <th scope="col">titulo coluna 3</th> </tr> </thead> <tbody title="corpo"> <tr> <td>linha 2, celula a</td> <td>linha 2, celula b</td> <td>linha 2, celula c</td> </tr> </tbody> <tfoot title="rodape"> <tr> <td>linha 3, celula a</td> <td>linha 3, celula b</td> <td>linha 3, celula c</td> </tr> </tfoot> </table> </body>
[veja o resultado aqui - Obs* na pagina que abre, clique no botão azul: run]




Veja um exemplo de uso do atributo rowspan(mesclar celulas de cima para baixo) no elemento td:

<head><!-- CONTEUDO NÃO VISIVEL ao usuario--> <title></title> <style> table, th, td { border: 1px solid black; } </style> </head> <body><!-- CONTEUDO VISIVEL ao usuario--> <table> <thead> <tr> <th scope="col">titulo coluna 1</th> <th scope="col">titulo coluna 2</th> <th scope="col">titulo coluna 3</th> </tr> </thead> <tbody> <tr> <td>linha 2, celula a</td> <td>linha 2, celula b</td> <td rowspan="2">linha 2, celula c</td> </tr> <tr> <td>linha 3, celula a</td> <td>linha 3, celula b</td> </tr> </tbody> </table> </body>
[veja o resultado aqui - Obs* na pagina que abre, clique no botão azul: run]




Veja um exemplo de uso do atributo colspan(mesclar celulas da esquerda para direita) no elemento td:

<head><!-- CONTEUDO NÃO VISIVEL ao usuario--> <title></title> <style> table, th, td { border: 1px solid black; } </style> </head> <body><!-- CONTEUDO VISIVEL ao usuario--> <table> <thead> <tr> <th scope="col">titulo coluna 1</th> <th scope="col">titulo coluna 2</th> <th scope="col">titulo coluna 3</th> </tr> </thead> <tbody> <tr> <td>linha 2, celula a</td> <td>linha 2, celula b</td> <td>linha 2, celula c</td> </tr> <tr> <td>linha 3, celula a</td> <td colspan="2">linha 3, celula b</td> </tr> </tbody> </table> </body>
[veja o resultado aqui - Obs* na pagina que abre, clique no botão azul: run]

O nome listas ja diz para qual finalidade esse elemento foi criado, mas usamos tambem para criar menus em sites.

Basicamente temos 3 opções de listas, onde 3 elementos podem ser usados para cria-las:

1. ol - Listas Ordenadas (Numeros/Alfabeto/Romanos).
2. ul - Listas Não-Ordenadas.
3. dl - Listas de Definição.

1. ol - Listas Ordenadas (Numeros/Alfabeto/Romanos).
   [Veja mais detalhes sobre (ol) na documentação da W3C.]

• Exemplo - Basico.

  No proximo exemplo veremos uma lista ordenada basica, que por padrão é uma lista Numerica:

  <ol> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ol>
  [veja o resultado aqui - Obs* na pagina que abre, clique no botão azul: run]
  

• Exemplo - Lista com elevações (listas dentro de listas)

  Podemos tambem se necessario criar elevações nas listas, e fazemos isso seguindo o codigo fonte abaixo:

  <ol> <li>item 1</li> <ol type="a"> <li>laranja</li> <li>uva</li> <li>abacaxi</li> </ol> <li>item 2</li> <li>item 3</li> </ol>
  [veja o resultado aqui - Obs* na pagina que abre, clique no botão azul: run]
  

• Exemplo - Numeradas, Letras maiusculas/minusculas, Numeros Romanos maiusculos/minusculos.

  Podemos tambem se necessario criar tipos diferentes de listas ordenadas, e fazemos isso seguindo os codigos fontes abaixo:

  ** Listas Ordenadas - Numeradas.

  <ol> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ol>
  [veja o resultado aqui - Obs* na pagina que abre, clique no botão azul: run]
  
  

  ** Listas Ordenadas - Letras Maiusculas/Minusculas.

  <ol type="A"> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ol> <ol type="a"> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ol>
  [veja o resultado aqui - Obs* na pagina que abre, clique no botão azul: run]
  
  

  ** Listas Ordenadas - Numeros Romanos Maiusculos/Minusculos.

  <ol type="I"> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ol> <ol type="i"> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ol>
  [veja o resultado aqui - Obs* na pagina que abre, clique no botão azul: run]
  

• Exemplo - Atributos.

  Tambem temos 3 Atributos para usar nas listas Ordenadas Numericas, Alfabetica ou Romanos.:

  Com esses Atributos podemos modificar a forma com que a lista Ordenada é mostrada para o usuario, veja quais são abaixo, e logo depois exemplos de aplicação no codigo fonte:

  • reversed. Ele inverte a sequencia Numerica, Alfabetica ou Romanos.
  • start. Com ele podemos escolher um ponto de inicio que a lista vai iniciar sua sequencia.
  • type. podemos escolher qual lista queremos, se Numerica, Alfabetica ou Romanos.
  
  <!-- reversed: vai inverter a sequencia do valor padrão(Numerica) na lista abaixo. --> <ol reversed> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ol> <!-- start: vai iniciar a sequencia de lista padrão(Numerica) a partir do numero 3. --> <ol start="3"> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ol> <!-- type: aqui escolho o tipo de lista que eu desejo Numerica, Alfabetica ou Romanos --> <!-- Alfabeto --> <ol type="a"> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ol> <ol type="A"> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ol> <!-- Romanos --> <ol type="I"> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ol> <ol type="i"> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ol> <!-- Padrão/Numerica --> <ol type="1"> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ol>
  [veja o resultado aqui - Obs* na pagina que abre, clique no botão azul: run]
  

• Exemplo - Atributos do Elemento li

  Usamos a tag li para descrever cada item da lista, seja Ordenada, Não-Ordenada ou Definição.

  Mas ela possui um Atributo que so é usado nas listas Ordenadas, veja qual é esse atributo:

  • value. Vai iniciar a sequencia Numerica, Alfabetica ou Romana a partir do numero digitado aqui, veja o exemplo de uso no codigo fonte abaixo, onde eu inicio a lista pelo numero 100:
  
  <ol> <li value="100">item 1</li> <li>item 2</li> <li>item 3</li> </ol>
  [veja o resultado aqui - Obs* na pagina que abre, clique no botão azul: run]
  



2. ul - Listas Não-Ordenadas.
   [Veja mais detalhes sobre (ul) na documentação da W3C.]

• Exemplo - Basico.

  No proximo exemplo veremos uma lista Não-Ordenada basica:

  <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul>
  [veja o resultado aqui - Obs* na pagina que abre, clique no botão azul: run]
  

• Exemplo - Lista com elevações (listas dentro de listas)

  Podemos tambem se necessario criar elevações nas listas, e fazemos isso seguindo o codigo fonte abaixo:

  <ul> <li>item 1</li> <ul> <li>laranja</li> <li>uva</li> <li>abacaxi</li> </ul> <li>item 2</li> <li>item 3</li> </ul>
  [veja o resultado aqui - Obs* na pagina que abre, clique no botão azul: run]
  



3. dl - Listas de Definição.
   [Veja mais detalhes sobre (dl) na documentação da W3C.]

• Exemplo - Basico.

  Uma lista de Definição, é uma lista de Termos com a Descrição de cada Termo, no estilo de perguntas e respostas.

  <dl> <dt>item 1</dt> <dd>Descrição do item 1.</dd> <dt>item 2</dt> <dd>Descrição do item 2.</dd> <dt>item 3</dt> <dd>Descrição do item 3.</dd> </dl>
  [veja o resultado aqui - Obs* na pagina que abre, clique no botão azul: run]
  

É atraves do formulario que enviamos dados que os usuarios preenchem ao servidor, e através do formulario que os usuarios de um site tem um "contato"/interação com o backend.

Interação de um modo geral é o modo pelo qual os usuarios se entretem no site e recebem alguma resposta, há pelo menos 2 tipos de interação de usuarios a um site:

• interação de requisição como links, videos, etc, onde o usuario interaje clicando e recebe uma resposta á requisição.
• interação de contato/comunicação com o backend, onde o usuario preenche campos de formulario para criar uma comunicação com um administrador que vai receber esse cadastro/formulario/dados no backend.

Por sua vez, os formularios são um modo de interação, afim de estabelecer um contato com os responsaveis/administradores do site.

Para criar formularios usamos elementos que são indispensaveis para que o seu formulario seja funcional, são eles:

1. form
2. label
3. input
4. datalist
5. option
6. select
7. optgroup
8. textarea
9. button
10. output
11. fieldset
12. legend

Veja exemplo de uso de todos elementos abaixo:

1. form

   Elemento pai de todos os elementos de formulario no HTML5, ou seja, para criar um formulario no HTML5 é obrigatorio o uso do elemento form.

   Se declarar-mos somente o elemento form, é por padrão, reservado um espaço de 1 linha vazia para um formulario.

   <head><!-- CONTEUDO NÃO VISIVEL ao usuario--> <title></title> </head> <body><!-- CONTEUDO VISIVEL ao usuario--> <!--// Com o atributo global title, podemos dimensionar o espaço reservado para o elemento form passando o mouse na linha do texto --> <form title="Aqui é o formulario"> Espaço reservado para um formulario ------------------[ linha inteira ] </form> </body>
   [veja o resultado aqui - Obs* na pagina que abre, clique no botão azul: run]
   
   
   

   Atributos:

   1. action
   2. method
   3. name
   4. target
   5. autocomplete
   6. enctype
   7. novalidate
   8. accept-charset
   
   
   1. action

      Nesse atributo escrevemos o link que vai receber os dados do formulario.

   2. method

      Nesse atributo escrevemos como desejamos que os dados do formulario seja enviado, se pelo metodo GET ou POST.

      • GET [ dados vão na URL ]

        Existem alguns pontos que sçao importantes no funcionamento do metodo GET:

        • Os dados vão dentro da URL em duplas de noomes e valores.
        • Uma URL so comporta 3000 caracteres.
        • Usar dados confidenciais como senhas usando o metodo GET é uma má ideia, porque os dados do metodo GET fica exposto na URL.
        • Use o metodo GET para todos os dados que não precisam de seguranã, como senhas, etc.
        
        
      • POST [ dados vão dentro do cabeçalho de requisição HTTP ]

        Existem alguns pontos que sçao importantes no funcionamento do metodo POST:

        • Os dados são anexados dentro do cabeçalho de requisição HTTP (dados não são mostrados na URL)
        • Não tem limitações de caracteres.
   3. name

      Esse atributo é para nomear um formulario, esse nome vai servir para referenciar seu formulario em um script, e para referenciar os dados apos o envio do formulario.

   4. target

      Com esse atributo escolhemos de que forma a resposta á uma requisição(envio do formulario) vai ser recebida, se na mesma aba do navegador, em outra aba, etc.

      Veja algumas opções de escolha:

      • _blank : A resposta é recebida em uma nova janela ou aba do navegador.
      • _self : a resposta é recebida na mesma pagina/aba.
      • _parent : a resposta é exibida no quadro pai.
      • _top : a resposta é exibida em todo o corpo da pagina.
      
      
   5. autocomplete

      Esse atributos definimos se o formulario se autocompletará usando dados que o suario ja havia usado anteriormente, isso ajuda o usuario a não ficar digitando sempre a mesma informação.

   6. enctype

      Somente usado junto com o atributo method com o valor POST.

      Esse atributo especifica se o formulario deve ser codificado ao ser enviado ao servidor.

      Valores:
      • application/x-www-form-urlencoded : Todos os caracteres são codificados antes do envio (os espaços são convertidos em símbolos "+" e os caracteres especiais são convertidos em valores ASCII HEX)
      • multipart/form-data : Nenhum caractere é codificado. Este valor é obrigatório quando você está usando formulários que têm um controle de upload de arquivo
      • text/plain : simples são convertidos em símbolos "+", mas nenhum caractere especial é codificado
      
      
   7. novalidate

      Esse atributo é do tipo booleano, quando definido ele indica que os dados não serão validados no envio.

   8. accept-charset

      Esse atributo define o tipo de caractere que será usado no formulario.

   
   

   Vejamos um exemplo abaixo de uso dos atributos no elemento form:

   <head><!-- CONTEUDO NÃO VISIVEL ao usuario--> <title></title> </head> <body><!-- CONTEUDO VISIVEL ao usuario--> <!-- Neste exemplo tem os atributos: - action : link para envio do formulario. - method : post, dados vão anexados no cabeçalho de requisição no HTTP, usei esse valor neste exemplo por causa do atributo[enctype]. - name : identifica o formulario apos o envio, e para referenciar se caso for usar um script. - target : de que forma receberemos a resposta apos o envio do formulario, no exemplo usei o valor [_blank] que recebera a resposta em outra pagina ou aba do navegador. - autocomplete: disponibiliza ao usuario usar dados que ja preencheu antes. - enctype : somente usado junto com o atributo [method] no valor [POST], ele codifica os dados enviados do formulario. - novalidade : para enviar o formulario e não validar os dados. - accept-charset : defini que os caracteres usados neste formulario é o valor [UTF8]. --> <form action="/action_page.php" method="POST" name="formulario_teste" target="_blank" autocomplete enctype="application/x-www-form-urlencoded" novalidate accept-charset="UTF-8"> <label>Titulo do campo ao lado</label> <input type="email" name="email" id="email" placeholder="digite seu email"> <button>enviar</button> </form> </body>
   [veja o resultado aqui - Obs* na pagina que abre, clique no botão azul: run]
   
   
   

2. label []

   Esse elemento de formulario define uma etiqueta/Rotulo para outros elementos filhos do elemento form no formulario HTML5.

   Existem beneficios suficientes para fazer uso do elemento label no formulario, e são:

   • Usuarios que usam o leitor de tela(navegadores com acessibilidade), e a leitura será feita em voz alta caso o usuario estiver focado nesse elemento label.
   • Aumenta a area de clique em casos de elementos do tipo checkbox, facilitando a vida dos usuarios mobile e pc.

   Para fazer o uso adequado do elemento label, é necessario usar os atributos for e form criando uma relação entre label (rotulo/etiqueta) com outros elementos de formulario.

   Atributos:

   1. for : no valor colocamos o mesmo id dos elementos filhos de form (ex, input, textarea, button, etc), e esse atributo for relaciona o label(rotulo/etiqueta) com os filhos que estão dentro do elemento form.
   
   
   2. form : no valor colocamos o mesmo id do elemento form, e esse atributo form relaciona o label(rotulo/etiqueta) com o elemento form.
   
   
   
   
   1. for

      Esse atributo relaciona o label(rotulo/etiqueta) com os elementos filhos do elemento form.

      Devemos colocar em seu valor o mesmo definido no id dos elementos filhos do elemento form.

      Esse atributo se usado sem o atributo form, não pode ser usado fora do elemento form.

      Vejamos um exemplo de uso abaixo:

      <head><!-- CONTEUDO NÃO VISIVEL ao usuario--> <title></title> </head> <body><!-- CONTEUDO VISIVEL ao usuario--> <!-- // Os atributos for usados no elemento label estão dentro do elemento form. --> <form> <label>Titulo do campo ao lado</label> <input type="checkbox" name="a" id="a"> <br><br><br> <label for="a">[Opção 1] - Clique aqui para ticar o checkbox acima</label> <br><br><br> <label for="a">[Opção 2] - Clique aqui para ticar o checkbox acima</label> </form> </body>
      [veja o resultado aqui - Obs* na pagina que abre, clique no botão azul: run]
      
      
      
   2. form

      Esse atributo é usado quando o label esta codado fora do elemento form.

      Esse atributo relaciona o label(rotulo/etiqueta) que esta fora do elemento form exclusivamente com o elemento form.

      Devemos colocar em seu valor o mesmo definido no id do elemento form.

      Esse atributo é usado para relacionar um label fora do elemento form.

      Vejamos um exemplo de uso abaixo:

      <head><!-- CONTEUDO NÃO VISIVEL ao usuario--> <title></title> </head> <body><!-- CONTEUDO VISIVEL ao usuario--> <!-- // Os atributos form usados no elemento label estão fora do elemento form. Como acontece a sequencia que relaciona um label: 1º [Atributo: form] ele relaciona atraves do id do elemento form, para localizar primeiro o elemento pai(form) 2º [Atributo: for] ele relaciona atraves do id do elemento filho de form(ex. input, textarea, etc), para localizar qual elemento filho de form vai ser relacionado o label(rotulo/etiqueta). --> <form id="a"> <label>Titulo do campo ao lado</label> <input type="checkbox" name="b" id="b"> <br><br><br> <label for="b">[Opção 1] - Clique aqui para ticar o checkbox acima</label> <br><br><br> <label for="b">[Opção 2] - Clique aqui para ticar o checkbox acima</label> </form> <hr> Fora de form! <br> <label form="a" for="b" >[Opção 2] - Clique aqui para ticar o checkbox que esta dentro de form!</label> </body>
      [veja o resultado aqui - Obs* na pagina que abre, clique no botão azul: run]
      
      
      

3. input []

4. datalist []

5. select []

6. optgroup []

7. option []

8. textarea []

9. button []

10. output []

11. fieldset []

12. legend []