Bem-vindo ao mundo do código! Por quê? HTML é o esqueleto de todas as páginas da web. Geralmente é o primeiro idioma aprendido por desenvolvedores, profissionais de marketing e designers e é essencial para o trabalho de desenvolvimento front-end. Se esta é a primeira vez que você está vendo um código, fique animado porque você pode criar coisas incríveis.
Então, o que exatamente é HTML? O HTML fornece estrutura para o conteúdo exibido em um site, como imagens, texto ou vídeos. Clique com o botão direito do mouse em qualquer página da Internet, escolha "Inspecionar" e você verá HTML em um painel da tela.
HTML significa HyperText Markup Language:
- Uma linguagem de marcação é uma linguagem de computador que define a estrutura e a apresentação do texto bruto.
- Em HTML, o computador pode interpretar o texto bruto envolvido em elementos HTML.
- HyperText é o texto exibido em um computador ou dispositivo que fornece acesso a outro texto por meio de links, também conhecidos como hiperlinks .
Propósito da Linguagem de marcação HTML.
- Ser compreendida independente do dispositivo que vai ser acessado, o HTML é o mesmo para todos.
- Fácil compreensão
- Interoperabilidade - ( não há uma especificidade da linguagem de uma empresa para outra)
Aprender HTML é o primeiro passo na criação de sites, mas mesmo um pouco de conhecimento pode ajudá-lo a inserir trechos de código em boletins, blogs ou modelos de sites. À medida que você continua aprendendo, é possível colocar em camadas HTML com CSS e JavaScript para criar sites dinâmicos e atraentes. Mas, por enquanto, vamos nos concentrar em como adicionar e modificar o conteúdo básico de uma página, como texto, imagens e vídeos. Não se preocupe se os sites parecerem feios - estamos apenas começando.
HTML é composto de elementos . Esses elementos estruturam a página da web e definem seu conteúdo. Vamos dar uma olhada em como eles são escritos.
A imagem acima apresenta um elemento de parágrafo HTML. Como podemos ver, o elemento de parágrafo é composto de:
- Uma tag de abertura (
<p>) - O conteúdo (texto "Hello World!")
- Uma tag de fechamento (
</p>)
Uma tag e o conteúdo entre elas são chamados de elementos HTML. Existem muitas tags que podemos usar para organizar e exibir texto e outros tipos de conteúdo, como imagens.
Vamos revisar rapidamente cada parte do elemento representado:
- Elemento HTML (ou simplesmente elemento) - uma unidade de conteúdo em um documento HTML formado por tags HTML e o texto ou mídia que ele contém.
- Tag HTML - o nome do elemento, cercado por um colchete de ângulo de abertura (
<) e fechamento (>). - Tag de abertura - a primeira tag HTML usada para iniciar um elemento HTML. O tipo de tag é cercado por aberturas de abertura e fechamento de ângulo.
- Conteúdo - as informações (texto ou outros elementos) contidas entre as tags de abertura e fechamento de um elemento HTML.
- Tag de fechamento - a segunda tag HTML usada para finalizar um elemento HTML. As tags de fechamento têm uma barra (
/) dentro delas, logo após o colchete angular esquerdo.
Um dos principais elementos HTML que usamos para criar uma página da web é o elemento body . Somente o conteúdo dentro das tags do corpo de abertura e fechamento pode ser exibido na tela. Veja como são as tags corporais de abertura e fechamento. Depois que o arquivo tem um corpo, muitos tipos diferentes de conteúdo - incluindo texto, imagens e botões - podem ser adicionados ao corpo.
<body>
<p>Curso de Front-End</p>
</body>
O HTML é organizado como uma coleção de relacionamentos de árvore genealógica. Como você viu no último exercício, colocamos <p>tags nas <body>tags. Quando um elemento está contido dentro de outro elemento, ele é considerado filho desse elemento. Diz-se que o elemento filho está aninhado dentro do elemento pai .
<body>
<p> Este parágrafo é um filho do corpo </p>
</body>
No exemplo acima, o <p>elemento está aninhado dentro do <body>elemento. O <p>elemento é considerado um filho do <body>elemento e o <body>elemento é considerado o pai. Você também pode ver que adicionamos dois espaços de recuo (usando a barra de espaço) para melhor legibilidade.
Como pode haver vários níveis de aninhamento, essa analogia pode ser estendida aos netos, bisnetos e outros. O relacionamento entre os elementos e seus elementos ancestrais e descendentes é conhecido como hierarquia .
Vamos considerar um exemplo mais complicado que usa algumas novas tags:
<body>
<div>
<h1>Irmão para p, mas também neto do corpo </h1>
<p>Irmão para h1, mas também neto do corpo </p>
</div>
</body>
Neste exemplo, o <body>elemento é o pai do <div>elemento. Os elementos <h1>e <p>são filhos do <div>elemento. Como os elementos <h1>e <p>estão no mesmo nível, eles são considerados irmãos e são netos do <body>elemento.
A compreensão da hierarquia HTML é importante porque os elementos filho podem herdar comportamento e estilo do elemento pai. Você aprenderá mais sobre a hierarquia de páginas da web quando começar a explorar o CSS.
Adicione um paragrafo como filho do elemento div e neto do elemento body.
<body>
<h1>Hello World</h1>
<div>
<p>
Este parágrafo é filho do elemento div e neto do elemento body.
</p>
</div>
</body>
Os títulos em HTML são semelhantes aos de outros tipos de mídia. Por exemplo, nos jornais, títulos grandes são normalmente usados para capturar a atenção do leitor. Outras vezes, os títulos são usados para descrever o conteúdo, como o título de um filme ou um artigo educacional.
O HTML segue um padrão semelhante. No HTML, existem seis títulos diferentes , ou elementos de título . Os títulos podem ser usados para uma variedade de finalidades, como seções de títulos, artigos ou outras formas de conteúdo.
A seguir, é apresentada a lista de elementos de cabeçalho disponíveis em HTML. Eles são pedidos do maior para o menor em tamanho.
<h1>- usado para títulos principais. Todos os outros títulos menores são utilizados para subtítulos.<h2><h3><h4><h5><h6>
O código de exemplo a seguir usa um título destinado a capturar a atenção do leitor. Ele usa o maior cabeçalho disponível, o principal elemento de cabeçalho:
<h1>BREAKING NEWS</h1>
Um dos elementos mais populares em HTML é o <div>elemento <div>é a abreviação de "divisão" ou um contêiner que divide a página em seções. Essas seções são muito úteis para agrupar elementos em seu HTML.
<body>
<div>
<h1>Por que usar divs?</h1>
<p>Ótimo para agrupar elementos!</p>
</div>
</body>
<div> podem conter qualquer texto ou outros elementos HTML, como links, imagens ou vídeos. Lembre-se de sempre adicionar dois espaços de recuo ao aninhar elementos dentro de <div> para melhor legibilidade.
Se queremos expandir tag de um elemento, podemos fazê-lo usando um atributo . Os atributos são conteúdo adicionado à tag de abertura de um elemento e podem ser usados de várias maneiras diferentes, desde o fornecimento de informações até a alteração do estilo. Os atributos são compostos das duas partes a seguir:
- O nome do atributo
- O valor do atributo
Vamos conhecer os atributos mais usados no dia a dia de um desenvolvedor, mas tem vários atributos que não vamos listar aqui, mas vamos deixar link para consulta.
O atributo id. Podemos usar para especificar apenas um elemento html .
Quando adicionamos um ida uma <div>, colocamos na tag de abertura:
<div id="intro">
<h1>Introdução</h1>
</div>
Com o atributo class permite atribuir formatação a VÁRIOS elementos de uma vez só.
<div class="intro">
<h1>Introdução</h1>
<h3>Curso de Front-End Developer</h3>
</div>
O atributo href, especifica a URL de um link no elemento <a>
<a href="<http://www.redecidada.org.br/>">Site Rede Cidadã</a>
O elemento <a>elemento âncora é usado para criar hiperlinks em um documento HTML. Os hiperlinks podem apontar para outras páginas da web, arquivos no mesmo servidor, um local na mesma página ou qualquer outro URL por meio do atributo de referência do hiperlink href.
<!--Ligando um texto-->
<a href="<http://www.redecidada.org.br/>">Visite este site</a>
<!--Vincular uma imagem -->
<a href="<http://www.redecidada.org.br/>">
<img src="logo.jpg">Clique nesta imagem</a>
O elemento âncora <a>pode criar hiperlinks para diferentes partes do mesmo documento HTML usando o hrefatributo para apontar para o local desejado #seguido pelo idelemento do qual o link será vinculado.
<div>
<p id="id-do-elemento-para-link-para">Uma parte diferente da página!</P>
</div>
<a href="#id-de-element-a-link-a">Leve-me para uma parte diferente da página</a>
O atributotarget em um <a>elemento âncora especifica onde um hiperlink deve ser aberto. Um targetvalor de "_blank"dirá ao navegador para abrir o hiperlink em uma nova guia
<a href="http://www.redecidada.org.br" target="_blank">Visite este site</a>
<img src="nome_imagem.jpg"/>
O atributo src URL de um conteúdo, pode ser uma imagem, video. atributo deve ser definido como a fonte da imagem ou o local da imagem, Neste caso, o valor srcdeve ser o Uniform Resource Locator (URL) da imagem. Um URL é o endereço da Web ou o endereço local em que um arquivo está armazenado.
O atributo alt especifica um texto alternativo caso uma imagem não possa ser exibida. significa texto alternativo, traz significado às imagens em nossos sites. O altatributo pode ser adicionado à tag da imagem exatamente como o srcatributo. O valor de altdeve ser uma descrição da imagem.
O altatributo também serve aos seguintes propósitos:
- Se uma imagem não carregar em uma página da web, o usuário pode passar o mouse sobre a área originalmente destinada à imagem e ler uma breve descrição da imagem.
- Usuários com deficiência visual geralmente navegam na Web com o auxílio de um software de leitura de tela. Quando você inclui o
altatributo, o software de leitura de tela pode ler a descrição da imagem em voz alta para o usuário com deficiência visual. - O
altatributo também desempenha um papel na Otimização de mecanismos de pesquisa (SEO), porque os mecanismos de pesquisa não podem "ver" as imagens nos sites enquanto pesquisam na Internet. Teraltatributos descritivos pode melhorar a classificação do seu site.
<img src="foto_perfil.jpg" alt="foto_perfil"/>
Além de organizar o texto em forma de parágrafo, você também pode exibir o conteúdo em uma lista de fácil leitura.
Em HTML, você pode usar uma tag de lista não ordenada ( <ul>) para criar uma lista de itens em nenhuma ordem específica. Uma lista não ordenada descreve itens de lista individuais com um marcador.
O <ul>elemento não deve conter texto bruto e não formatará automaticamente o texto bruto em uma lista não ordenada de itens. Itens de lista individuais devem ser adicionados à lista não ordenada usando a <li>tag A <li>tag do item ou da lista é usada para descrever um item em uma lista.
<ul>
<li>Home</li>
<li>Sobre mim</li>
<li>Contato</li>
</ul>
No exemplo acima, a lista foi criada usando a <ul>tag e todos os itens de lista individuais foram adicionados usando a tag<li>
- Home
- Sobre mim
- Contato
As listas ordenadas ( <ol>) são como listas não ordenadas, exceto que cada item da lista é numerado. Eles são úteis quando você precisa listar etapas diferentes em um processo ou classificar itens do primeiro ao último.
Você pode criar a lista ordenada com a <ol>tag e adicionar itens de lista individuais à lista usando a tag <li>
<ol>
<li> Pré-aqueça o forno a 350 graus. </Li>
<li> Misture a farinha de trigo integral, bicarbonato de sódio, e sal. </li>
<li> Bata a manteiga, o açúcar em uma tigela separada. </Li>
<li> Adicione os ovos eo extrato de baunilha para uma tigela. </li>
</ol>
A saída terá a seguinte aparência:
Pré-aqueça o forno a 350 graus.Misture a farinha de trigo integral, o bicarbonato de sódio e o sal.Bata a manteiga, o açúcar em uma tigela separada.Adicione os ovos e o extrato de baunilha à tigela.
Todos os elementos que você aprendeu até agora (títulos, parágrafos, listas e extensões) compartilham uma coisa em comum: eles são compostos inteiramente de texto! E se você quiser adicionar conteúdo à sua página da Web que não seja composto de texto, como imagens?
A <img>tag permite adicionar uma imagem a uma página da web. A maioria dos elementos requer tags de abertura e fechamento, mas a <img>tag é de fechamento automático . Observe que o final da <img>tag possui uma barra /. As tags de fechamento automático podem incluir ou omitir a barra final - ambas serão renderizadas corretamente.
<img src="image-location.jpg"/>
Além de imagens, o HTML também suporta a exibição de vídeos. Como a tag <img>, a tag <video> requer um atributo src com um link para a fonte de vídeo. Diferentemente da <img>tag, no entanto, o <video>elemento requer uma tag de abertura e de fechamento.
<video src="myVideo.mp4" width="320" height="240" controls>
Vídeo não suportado
</video>
Neste exemplo, a fonte de vídeo ( src) é myVideo.mp4A fonte pode ser um arquivo de vídeo hospedado ao lado da sua página da web ou um URL que aponta para um arquivo de vídeo hospedado em outra página da web. Após o srcatributo, os atributos widthe heightsão usados para definir o tamanho do vídeo exibido no navegador. O controlsatributo instrui o navegador a incluir controles básicos de vídeo: pausar, reproduzir e pular.
O texto, “Vídeo não suportado”, entre as tags de abertura e fechamento do vídeo, será exibido apenas se o navegador não conseguir carregar o vídeo.
Agora que aprendemos sobre alguns dos elementos HTML mais comuns, é hora de aprender a configurar um arquivo HTML.
Os arquivos HTML requerem certos elementos para configurar o documento corretamente. Podemos informar aos navegadores da web que estamos usando HTML iniciando nosso documento com uma declaração de tipo de documento .
A declaração é assim:
<!DOCTYPE html>
Esta declaração é uma instrução e deve ser a primeira linha de código no seu documento HTML. Ele informa ao navegador que tipo de documento esperar, juntamente com qual versão do HTML está sendo usada no documento. Por enquanto, o navegador assumirá corretamente que o html <!DOCTYPE html>está se referindo ao HTML5, pois é o padrão atual. O código HTML é sempre salvo em um arquivo com uma extensão .html .
A declaração <!DOCTYPE html> fornece ao navegador duas informações (o tipo de documento e a versão HTML esperada), mas na verdade não adiciona nenhuma estrutura ou conteúdo HTML.
Para criar estrutura e conteúdo HTML, precisamos adicionar <html>tag de abertura e fechamento após declarar <!DOCTYPE html>:
<!DOCTYPE html>
<html>
<body>
<!-- Conteúdo do site, aparece dentro da tag body-->
</body>
</html>
Qualquer coisa entre as tag de abertura <html>e fechamento </html>será interpretada como código HTML. Sem essas tag, é possível que os navegadores interpretem incorretamente seu código HTML.
Até agora, você fez duas coisas para configurar o arquivo corretamente.
- Declarou ao navegador que seu código é HTML com
<!DOCTYPE html> - Adicionado o elemento HTML (
<html>) que conterá o restante do seu código. - A tag
bodyonde o conteúdo do nosso site ficará visível no navegador.
Adicionamos esses elementos a uma página que vamos criar na aula de hoje, mas precisamos também fornecer ao navegador algumas informações sobre a própria página. Podemos fazer isso adicionando a tag <head>
A <head>elemento faz parte do HTML, vai acima do elemento <body>
O <head> contém os metadados para uma página da web. Metadados são informações sobre a página que não são exibidas diretamente na página da web. Diferentemente das informações dentro da tag <body> os metadados no cabeçalho são informações sobre a própria página. Vamos ver um exemplo.
<! DOCTYPE html>
<html lang="pt-br">>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Meu Site</title>
</head>
<body>
<!-- Conteúdo do site, aparece dentro da tag body-->
</body>
</html>
<meta charset="utf-8"> especifica a codificação de caracteres do documento — o conjunto de caracteres que o documento está autorizado a usar. utf-8 é um conjunto de caracteres universal que inclui praticamente qualquer caractere de qualquer linguagem humana.
Quando você compartilha algum site nas redes sociais, você percebeu que quando coloca o link no post, visualiza uma imagem acompanhada de informações referente a página, imagens e título.
Open Graph Markup é um protocolo que permite administrar e monitorar os dados que são construídos nas visualizações estruturação das páginas web.
permite que qualquer página da Web se torne um objeto rico em um gráfico social, saiba que não se trata apenas de embelezar seu post, mas, se pesquisarem sobre marketing digital, isso aumenta o tráfego da sua página, mas... sou desenvolvedor, preciso entender de marketing? não, mas acredito que quando você for desenvolver o seu site, você, vai querer que muitas pessoas visitem, conheça mais sobre você e possa surgir alguma oportunidade de trabalho, certo? então usando o Open Graph Markup no seu código, vai te ajudar a atrair mais visitantes.
você colocará <meta>tags adicionais na <head>sua página da web. As quatro propriedades necessárias para cada página são:
<!--Exemplo-->
<head>
<title>Rede Cidadã</title>
<meta property="og:locale" content="pt_BR">
<meta property="og:title" content="Rede Cidadã - Vida e trabalho, um só valor">
<meta property="og:type" content="website">
<meta property="og:description" content="Somos uma organização com programas e projetos sociais em 11 Estados do Brasil, com atuação nas áreas de empregabilidade, aprendizagem, empreendedorismo e voluntariado.">
<meta property="og:url" content="<http://www.redecidada.org.br/>">
<meta property="og:image" content="http://../images/logo.jpg" />
...
</head>
...
</html>
Resultado do open graph, num post do facebook.Enter a caption for this image (optional)
Caminhos de URL em HTML pode ser caminhos absolutos, como um URL completo, por exemplo: https://developer.mozilla.org/en-US/docs/Learnou um caminho de arquivo relativo que links para um arquivo local na mesma pasta ou no mesmo servidor, por exemplo: ./style.css. Os caminhos de arquivos relativos começam com ./seguidos por um caminho para o arquivo local. ./diz ao navegador para procurar o caminho do arquivo na pasta atual.
<!--Exemplo-->
pasta-projeto /
| —— about.html
| —— contact.html
| —— index.html
<a href="<https://developer.mozilla.org/en-US/docs/Web>">a URL para este elemento âncora é um caminho de arquivo absoluto, link externo.</a>
<a href="./about.html"> A URL para este elemento âncora é um caminho de arquivo relativo.</a>
Agora você conhece todos os elementos e configurações básicos necessários para estruturar uma página HTML e adicionar diferentes tipos de conteúdo.
Embora algumas tags tenham uma finalidade muito específica, como tags de imagem e vídeo, a maioria delas é usada para descrever o conteúdo que elas envolvem, o que nos ajuda a modificar e estilizar nosso conteúdo posteriormente. Aparentemente, há um número infinito de tags para usar (muito mais do que ensinamos). Saber quando usar cada um é baseado em como você deseja descrever o conteúdo do seu HTML. Tags descritivas e bem escolhidas são uma chave para o desenvolvimento da web de alta qualidade. Uma lista completa de tags HTML disponíveis pode ser encontrada na documentação do Mozilla .
Versões do HTML O html na sua trajetória sofreu algumas mudanças com o objetivo de enriquecer a linguagem. a versão mais utilizada hoje no mercado é o HTML5 e, o principal mantenedor é a WHATWG é *( uma comunidade que padroniza e faz a documentação , foi fundada por desenvolvedores da Opera, Apple e Mozila, fazendo uma versão mais flexível do HTML que é o HTML5, )*HTML+ HTML 2.0 HTML 3.0 XHTML HTML 5.0
O HTML5 é uma versão mais enxuta e com mais recursos, para maiores informações indicamos sempre acessar o site do WHATWG.
Browser Core
Hoje em dia podemos acessar um site de diversos ambientes seja em diferentes tipos de dispositivos e de sistema operacional, a web ela tem que ser única, portanto para que possamos ter acesso a um site de uma forma padronizada, o principal componente que precisamos para renderizar o HTML é o navegador.
Principais Navegadores
- Google Chrome
- Mozilla Firefox
- Edge
- Opera
- Safari
Motores de renderização dos Navegadores:
A função do motor de renderização é renderizar, ou seja exibir os conteúdos solicitados na tela do navegador. Cada navegador utiliza um motor de renderização diferente as a especificações de cada linguagem de programação, são muito detalhadas e cada motor oferece uma única interpretação dessa especificação. Ex: propriedades css como: espaçamento, margen_s_, tamanho podem apresentar um pouco diferente em cada navegador.
- WebKit - Safari/Chrome
- Gecko - Firefox
- Trident - Edge
- Presto - Opera
Quando vamos implementar o estilo de uma página no CSS, usamos propriedades prefixadas pelos mecanismos de renderização relevantes, ( -webkit para o Chrome e o Safari, -moz para o Firefox, -o para o Opera, -ms para o Internet Explorer).
.elementClass {
-moz-border-radius: 2em;
-ms-border-radius: 2em;
-o-border-radius: 2em;
-webkit-border-radius: 2em;
border-radius: 2em;
}
Obs: por esse motivo, quando estamos desenvolvendo um site em HTML, criamos um arquivo onde padronizamos todos essa propriedades CSS. ( ex: reset.css)
HTML5 é a mais recente evolução do padrão que define o HTML. A semântica das novas marcações do HTML5
Ao criar páginas da web, usamos uma combinação de HTML não semântico e HTML semântico . A palavra semântica significa "relacionada ao significado", para que os elementos semânticos forneçam informações sobre o conteúdo entre as tags de abertura e fechamento.
Um elemento semântico descreve claramente seu significado para o navegador e o desenvolvedor.
Exemplos de elementos não-semânticos : <div>e <span>- Não conta nada sobre o seu conteúdo.
Exemplos de semânticas elementos: <form>, <table>e <article>- Claramente define seu conteúdo.
Nas páginas web, temos que marcar qual tipo de conteúdo será colocado, como um cabeçalho, rodapé ou menu de navegação.
Nas versões anteriores do HTML não haviam tags com uma semântica apropriada para cada uma dessas divisões. Dessa forma, os desenvolvedores acabavam usando a tag <div> para todas as situações, e criando seus próprios padrões de nomenclatura através dos atributos id ou class.
{% hint style="info" %} Para entender melhor isso, você pode comparar o HTML não-semântico com o de entrar em uma loja sem sinais nos corredores. Como os corredores não são rotulados, você não sabe quais são os produtos nesses corredores. No entanto, as lojas que possuem sinais para cada corredor tornam muito mais fácil encontrar os itens necessários, assim como o HTML Semântico. {% endhint %}
No HTML5 foram criadas diversas tags semânticas para indicar aos user-agents quais conteúdos estão sendo inseridos em cada uma das divisão da página, organizando e padronizando o desenvolvimento.
<!--Exemplo Estrutura básica HTML5-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Titulo do meu site</title>
</head>
<body>
<header>
<img class="main-header-logo" src="" alt="">
</header>
<article>
<section>
<h3>Titulo</h3>
<p>Contúdo do Site</p>
</section>
</article>
<footer>
<p>Footer</p>
</footer>
</body>
</html>
Vamos entender a diferença entre essas TAGs.
<header> O novo elemento do HTML5 é usado para definir o cabeçalho de uma página ou seção, e pode conter logo, títulos, menu de navegação, campo de busca, etc.
<section> Como o próprio nome diz, ele pode conter qualquer tipo de conteúdo. Em um sentido mais amplo do termo, este elemento é uma versão mais semântica de uma div (que significa “divisão”). Outro uso comum deste elemento está relacionado a estrutura do conteúdo. O objetivo desse elemento é marcar uma seção da página. Seção pode ser um grupo de conteúdo de um assunto específico.
Ela foi desenvolvida para representar seções de um documento, essa é a idéia principal, ex: capítulos, títulos ou qualquer outra área do documento com o mesmo tema.
<article> Ao contrário de seção, artigo é um componente mais específico. Sua finalidade é envolver os principais conteúdos do seu documento em seções lógicas. Entradas de blog, artigos, o conteúdo da página podem ser incluídos dentro deste elemento. Combinado com o elemento SECTION, que completa a estrutura geral de um documento HTML5.
<aside> É usado para marcar informações adicionais que podem aprimorar outro elemento, mas não são necessárias para entender o conteúdo principal. Este elemento pode ser usado junto com outros elementos, como <article>ou <section>. Alguns usos comuns do <aside>elemento são para:
- Bibliografias
- Notas finais
- Comentários
- Enquetes
- Barras laterais editoriais
- Informação adicional
Podemos comparar o uso dela com a página de um jornal, teríamos uma página, com diversas seções.
<article id="esportes">
<hgroup>
<h1>Esportes no Brasil</h1>
<h2>Um pouco sobre o que está acontecendo no mundo dos esportes</h2>
</hgroup>
<section id="futebol">
<h1>Futebol</h1>
<p>conteúdo</p>
</section>
<section id="basquete">
<h1>Basquete</h1>
<p>conteúdo</p>
</section>
</article>
{% hint style="info" %}
É importante observar que um _****_elemento<section> também pode ser colocado dentro do elemento <article>dependendo do contexto.
{% endhint %}
O Emmet é um kit de ferramentas para desenvolvedores da Web que pode melhorar bastante o seu fluxo de trabalho HTML e CSS:
Guia do Emmet, agora é aprender para os trechos de código para agilizar o desenvolvimento do seus sites, vamos praticar.
Existem muitos sites na Internet que exibem informações como preços de ações, resultados esportivos, dados de faturas e muito mais. Esses dados são naturalmente de natureza tabular, o que significa que uma tabela geralmente é a melhor maneira de apresentar os dados.
Nesta parte do curso, aprenderemos como usar o <table>elemento HTML para apresentar informações em uma tabela bidimensional para os usuários. Vamos ver um exemplo no código abaixo:
<table>
<tr> <!-- table row 1-->
<th>Aluno</th><!--Título da Coluna - table heading-->
<th>Disciplina</th><!--Título da Coluna - table heading-->
<th>Nota</th><!--Título da Coluna - table heading-->
</tr>
<tr><!-- Row 1 -->
<td>Aluno 1</td><!--conteúdo - table data-->
<td>Lógica</td><!--conteúdo - table data-->
<td>8.0</td><!--conteúdo - table data-->
</tr>
<tr><!-- Row 2 -->
<td>Aluno 2</td><!--conteúdo - table data-->
<td>HTML</td><!--conteúdo - table data-->
<td>10</td><!--conteúdo - table data-->
</tr>
</table>
Formulários fazem parte da vida cotidiana. Quando usamos um formulário, escrevemos informações e as entregamos a alguém para processar. Pense nas vezes em que você precisou preencher informações para vários aplicativos, como um emprego, uma conta bancária ou entregou um cartão de sugestão preenchido.
O elemento <form> é responsável por coletar informações para enviar para outro lugar. Toda vez que navegamos na Internet, entramos em contato com muitas formas e podemos nem perceber. Há uma boa chance de que, se você estiver digitando em um campo de texto ou fornecendo uma entrada, o campo em que você está digitando faz parte de um <form>
Nesta aula , examinaremos a estrutura e a sintaxe de um <form>e dos elementos que o preenchem.
Podemos pensar na internet como uma rede de computadores que enviam e recebem informações. Os computadores precisam de uma solicitação HTTP para saber como se comunicar. A solicitação HTTP instrui o computador receptor como lidar com as informações recebidas. Mais informações podem ser encontradas nesse artigo sobre solicitações HTTP .
O elemento <form> é uma tag para coletar informações, mas precisamos enviar essas informações para outro lugar para processamento. Precisamos fornecer ao elemento <form> a localização de onde as informações vão e qual solicitação HTTP a ser feita. Dê uma olhada na exemplo abaixo:
<form action="/example.html" method="POST"></form>
No exemplo acima, criamos o esqueleto para um <form>que enviará informações para example.html como uma solicitação POST:
- O atributo
actiondetermina para onde as informações são enviadas. - O atributo
methodDefine qual método HTTP usar quando enviar um formulário. Pode ser GET(padrão) ou POST.
<form action="/example.html" method="POST">
<h1>Criando um formulário</h1>
<p>Vamos aprender a criar um formulário HTML.</p>
</form>
- O objetivo do
<form>é permitir que os usuários insiram e enviem informações. - O atributo
actiondetermina para onde vão as informações do formulário. - O atributo
methoddetermina como as informações são enviadas e processadas. - Para adicionar campos aos usuários para inserir informações, usamos o
<input>elemento e configuramos otypeatributo para um campo de nossa escolha:- A configuração
typepara"text"cria um campo de linha única para entrada de texto. - Definir
typepara"password"cria um campo de linha única que censura a entrada de texto. - A configuração
typepara"number"cria um campo de linha única para entrada de número. - Definir
typepara"range"cria um controle deslizante para selecionar em um intervalo de números. - Definir
typepara"checkbox"cria uma única caixa de seleção que pode ser emparelhada com outras caixas de seleção. - A configuração
typepara"radio"cria um botão de opção que pode ser emparelhado com outros botões de opção. - Definir
typepara"list"emparelhará o<input>com um<datalist>elemento se osiddois forem iguais. - A configuração
typepara"submit"cria um botão de envio.
- A configuração
- Um
<select>elemento é preenchido com<option>elementos e renderiza uma seleção da lista suspensa. - Um
<datalist>elemento é preenchido com<option>elementos e trabalha com um<input>para pesquisar opções. - Um
<textarea>elemento é um campo de entrada de texto que possui uma área personalizável. - Quando a
<form>é enviado, osnamecampos que aceitam entrada evalueos campos são enviados comoname=valuepares.
<!DOCTYPE html>
<html>
<body>
<h2>Formulário HTML</h2>
<form action="/example.html">
<label for="fname">Nome:</label><br>
<input type="text" name="fname" value="nome"><br>
<label for="lname">Sobrenome:</label><br>
<input type="text" name="lname" value="sobrenome"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Enter a caption for this image (optional)
O primeiro valor para o atributo type que vamos falar é o "text". Quando criamos o elemento <input type="text"> , o navegador renderiza um campo de texto que os usuários podem digitar. Também é importante incluir o atributo name no <input> sem o name, as informações no <input>não serão enviadas quando enviar o <form>
Lembre-se de que o objetivo de um formulário é coletar informações que serão enviadas. Essa é a função do botão enviar - os usuários clicam nele quando terminam de preencher as informações <form>e estão prontos para enviá-las. Agora que falamos sobre como criar vários elementos de entrada, vamos agora sobre como criar um botão de envio!
Observe o valueatribuído ao <input>aparece como texto no botão enviar. Se não houver um valueatributo, o texto padrão será exibido Submitno botão.
O uso do <form>elemento em conjunto com os outros elementos listados acima nos permite criar sites que levam em consideração os desejos e necessidades de nossos usuários. Aproveite a oportunidade para pegar o que aprendeu e aplicá-lo!
A Validação é o conceito de verificar os dados fornecidos pelo usuário em relação aos dados necessários. O que vamos no HTML é a validação do lado do cliente para verificar os dados no navegador (o cliente). Esta validação ocorre antes dos dados serem enviados para o servidor.
Permite dar feedback rapidamente aos usuários para campos específicos, em vez de solicitá-los a preencher um formulário novamente se os dados inseridos no formulário foram rejeitados.
required - não permite deixar um campo em branco
valores mínimos e máximos aceitáveis em um campo numérico.
- O
minatributo para"1" - O
maxatributo para"10"
Para definir um valor mínimo aceitável, usamos o minatributo e atribuímos um valor. Por outro lado, para definir um valor máximo aceitável, atribuímos ao maxatributo um valor. Vamos ver isso no código:
Para definir um número mínimo de caracteres para um campo de texto, adicionamos o minlengthatributo e um valor para definir um valor mínimo. Da mesma forma, para definir o número máximo de caracteres para um campo de texto, usamos o maxlengthatributo e definimos um valor máximo
minlength="5" maxlength="250"
Além de verificar o tamanho de um texto, também podemos adicionar uma validação para verificar como o texto foi fornecido. Nos casos em que queremos que a entrada do usuário siga diretrizes específicas, usamos o patternatributo e atribuímos a ele uma expressão regular ou regex. Expressões regulares são uma sequência de caracteres que compõem um padrão de pesquisa. Se a entrada corresponder ao regex, o formulário poderá ser enviado.
Digamos que desejássemos verificar um número de cartão de crédito válido (um número de 14 a 16 dígitos). Poderíamos usar o regex: [0-9]{14,16}que verifica se o usuário forneceu apenas números e se digitou pelo menos 14 dígitos e no máximo 16 dígitos.
Para adicionar isso a um formulário
<form action="/example.html" method="POST">
<label for="payment">Cartao de crédito (no spaces):</label>
<br>
<input id="payment" name="payment" type="text" required pattern="[0-9]{14,16}">
<input type="submit" value="Submit">
</form>
Com o patternlocal, os usuários não podem enviar o <form>número com que não segue a regex. Quando tentarem, verão uma mensagem de validação da seguinte forma:
- As validações do lado do cliente acontecem no navegador antes que as informações sejam enviadas para um servidor.
- A adição do
requiredatributo a um elemento relacionado à entrada validará que o campo de entrada possui informações. - A atribuição de um valor ao
minatributo de um elemento de entrada numérico validará um valor mínimo aceitável. - A atribuição de um valor ao
maxatributo de um elemento de entrada numérico validará um valor máximo aceitável. - A atribuição de um valor ao
minlengthatributo de um elemento de entrada de texto validará um número mínimo aceitável de caracteres. - A atribuição de um valor ao
maxlengthatributo de um elemento de entrada de texto validará um número máximo aceitável de caracteres. - Designar uma regex para
patterncorresponder a entrada à regex fornecida. - Se as validações em um
<form>não passarem, o usuário receberá uma mensagem explicando o porquê e o<form>não poderá ser enviado.
Essas verificações rápidas ajudam a garantir que os dados de entrada estejam corretos e seguros para nossos servidores. Ele também ajuda a fornecer aos usuários um feedback imediato sobre o que eles precisam corrigir, em vez de esperar que um servidor envie essas informações.
- https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes
- https://www.w3schools.com/html/html_attributes.asp
- https://www.codecademy.com/learn/learn-html
- https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks
- https://developer.mozilla.org/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/The_head_metadata_in_HTML
- https://ogp.me/
- https://rockcontent.com/blog/meta-tags-para-redes-sociais/
- https://developers.facebook.com/docs/sharing/web
- https://www.codecademy.com/learn/learn-html/modules/learn-html-forms/cheatsheet
- https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5