O HTML (Linguagem de Marcação de Hipertexto) é essencial para estruturar e exibir o conteúdo nas
páginas
web. Ele permite que os desenvolvedores definam a aparência e a organização dos elementos nas
páginas,
como textos, links, formulários e mídia.
"Hipertexto" refere-se à capacidade de criar referências (links) entre diferentes páginas,
facilitando a
navegação na web, enquanto "linguagem de marcação" indica o uso de tags que orientam os
navegadores
na
exibição do conteúdo. Embora não seja uma linguagem de programação, o HTML é crucial para
fornecer a
estrutura das páginas web, sendo indispensável para o desenvolvimento e visualização de conteúdo
online.
Em HTML, as tags são usadas para marcar o início e o fim de elementos em uma página web. Para formar uma tag basta combinar o sinal de maior + sinal de menor e colocar o elemento do que deseja usar.
<p> Este é um parágrafo.</p>
A estrutura básica do HTML é composta por tags que definem a hierarquia e o conteúdo de uma página web, como <html>, <head>, <body>, onde são inseridos elementos como títulos, parágrafos, links e outros componentes visuais.
O DOCTYPE é uma declaração que informa ao navegador que o documento é um arquivo HTML5. Essa declaração deve ser a primeira linha de um documento HTML e não é uma tag HTML propriamente dita.
<!DOCTYPE html>
A tag <html< é a raiz de um documento HTML. Ela envolve todo o conteúdo da página e pode conter atributos, como lang, que especifica o idioma da página (por exemplo, lang="pt-BR" para português do Brasil). Isso ajuda os motores de busca e leitores de tela a interpretar o conteúdo adequadamente.
<html lang="pt-BR">
A seção <head> contém metadados sobre o documento, que não são exibidos diretamente na página. Esses metadados podem incluir informações como o título da página, links para folhas de estilo CSS e scripts JavaScript. É essencial para configurar a apresentação e o comportamento da página sem afetar o conteúdo visível.
<head>
</head>
A tag <meta> fornece metadados adicionais sobre a página. Por exemplo, charset="UTF-8" define a codificação de caracteres, garantindo que todos os caracteres especiais sejam exibidos corretamente.
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
A tag <title> define o título da página, que aparece na aba do navegador e nos resultados de busca.
<title>Exemplo de Estrutura HTML
</title>
A seção <body> contém todo o conteúdo visível da página, como texto, imagens, vídeos e outros elementos interativos. É onde você organiza a apresentação do conteúdo que os usuários veem e interagem.
Para entender melhor, vamos separar em três tópicos
Ele define o tipo de conteúdo ou a estrutura da página, sendo composto por uma tag de abertura, o contéudo que a preenche (ou nem sempre) e a tag de fechamento.
<p>Lorem ipsum dolor sit amet.</p>
Os atributos contêm as informações de um elemento HTML pode ter para modificar seu comportamento
Os valores especificam os detalhes dos atributos. Pode vir, ou não, entre aspas.
<a href="https://www.google.com.br/">
Se um elemento contém outro, ele é considerado pai do elemento anexo, ou filho. Quaisquer elementos contidos no elemento filho são considerados descendentes do elemento pai.
A tag header é usada para definir o cabeçalho de uma página ou de uma seção. Normalmente, contém elementos como títulos, logotipos e menus de navegação, fornecendo uma introdução ao conteúdo que segue.
<header>
<a href="#home">Home</a>
<br>
<a href="#sobre">Sobre</a>
<br>
<a href="#contato">Contato</a>
</header>
A tag <nav> é usada para definir uma seção de navegação em um documento HTML. Ela
agrupa links que ajudam os usuários a navegar pelo site, como menus e barras de navegação.
A tag article é utilizada para encapsular conteúdo que pode ser distribuído de forma independente, como uma notícia, um post de blog ou uma entrada em um fórum. É ideal para conteúdo que tem significado próprio e pode ser entendido sem precisar de contexto adicional.
<article>
<h2>Título do Artigo</h2>
<p>Conteúdo do artigo vai aqui.</p>
</article>
É usado para definir conteúdo secundário que está relacionado ao conteúdo principal, como uma barra lateral ou notas de rodapé, por exemplo, bloco de conteúdo que referência o conteúdo que envolta do elemento aside.. É ideal para informações complementares que não são essenciais, mas podem ser úteis.
<aside>
<p>Informação adicional ou notas.</p>
</aside>
A tag section é usada para agrupar conteúdo tematicamente relacionado dentro de um documento. Geralmente, contém um título e pode ser utilizada para dividir o conteúdo em partes mais organizadas e lógicas.
<section>
<h2>Título da Seção</h2>
<p>Conteúdo relacionado à seção.</p>
</section>
As tags de cabeçalho, de h1 a h6, são utilizadas para definir a hierarquia do conteúdo em uma página web. Elas ajudam a organizar e estruturar o texto, além de melhorar a acessibilidade e a SEO.
<h1>Título Principal</h1><h2>Subtítulo</h2><h3>Sub-seção</h3><h4>Mais detalhes</h4><h5>Subcategorias</h5><h6>Informações específicas</h6>
É um documento publicado na Rede Mundial de Computadores (WWW), que pode ser aberto usando um navegador. Essas páginas estão escritas em HTML com adições de linguagens específicas como CSS, JavaScript ou VBScript.
A tag strong, é usada para para indicar que o texto que envolve tem um significado especial ou é de maior importância e torna o texto em negrito.
A tag em, é usada para indicar que o texto tem uma ênfase especial e é renderizado em itálico.
A tag blockquote é usada para definir citações longas e formatá-las com recuo.
<blockquote>
<p>Esta é uma citação importante.</p>
<footer>— Autor da citação</footer>
</blockquote>
A tag br é usada para inserir uma quebra de linha, forçando o conteúdo a continuar na linha de baixo.
A tag hr é usada para inserir uma linha horizontal, geralmente como separador de conteúdo.
A tag <img> é usada para inserir uma imagem em uma página da web. Ela é uma
tag
auto-fechante, sem um fechamento explícito. Imagens são parte importante de um site, e a tag
<img> facilita sua inclusão.
O atributo src especifica o caminho da imagem. Pode ser um caminho absoluto (URL) ou
um
caminho relativo dentro da estrutura de arquivos do site.
O atributo alt define um texto alternativo, exibido caso a imagem não carregue
corretamente. Além disso, é essencial para acessibilidade, pois descreve a imagem para leitores
de
tela.
<img src="caminho-da-imagem.jpg"
alt="Descrição da imagem" />
Os links no HTML servem para criar conexões entre diferentes páginas ou recursos da web, permitindo a navegação de um documento para outro. Eles são representados pela tag a
A tag <a> (anchor) é usada para criar links em HTML, permitindo que o usuário
navegue entre páginas ou recursos diferentes. Ela é fundamental para a criação de hiperlinks que
conectam documentos na web.
O atributo href define o destino do link, que pode ser uma URL completa ou um
caminho
relativo.
O atributo target define como o link será aberto. O valor _blank abre o
link em uma nova aba ou janela, enquanto o valor _self faz o link ser aberto na
mesma
aba.
Uma âncora é um tipo de link que faz referência a uma parte específica de uma página ou a outra página. Ela pode ser usada tanto para navegar em páginas externas quanto para se mover dentro de uma mesma página.
Links internos são usados para navegar em diferentes seções da mesma página. Eles dependem do uso
do
atributo id nos elementos que deseja referenciar.
A tag <a> também pode ser usada para criar links que abrem diretamente um
email ou
discam para um número de telefone, utilizando os prefixos
mailto: para emails e
tel: para números de telefone.
Um formulário é um documento ou interface para coletar informações de forma organizada. Ele contém campos para o usuário preencher, como nome e e-mail, e é usado em inscrições, pesquisas e cadastros.
Para criar um formulário, inicialmente utilizamos o elemento <form>. Ademais, o elemento possui um atributo chamado action que é responsável por indicar para qual endereço os dados do formulário serão enviados. Todos os seus atributos são opcionais, mas é considerado a melhor prática definir sempre pelo menos um action e um method.
O campo de entrada para nome será um campo básico de texto de linha única.
- O input é um elemento que se auto-fecha, ou seja, caso queira encerrar o elemento formalmente só é
preciso adcionar uma barra "/" no final do próprio elemento e não uma tag de fechamento.
- O atributo mais importante no input é o type. Ele é muito importante pois define a forma como o
elemnto se comporta.
- O campo de entrada do email será um campo de texto com uma única linha, que aceitará somente um
endereço
de email.
Para definir o valor padrão de um elemento input é necessário usar o atributo value, como por
exemplo:
<input type="text" value="Por padrão, este elemento será preenchido com este texto" />
o campo de entrada para mensagem será um campo de texto de várias linhas.
- O textarea não é um elemento de auto-fechamento, então é necessário fechá-lo com a tag final
adequada.
<textarea> Por padrão, este elemento será preenchido com este texto. </textarea>
O elemento button adiciona um botão para que os dados sejam enviados após serem preenchidos.
Envia os dados do formulário para a página web definida pelo atributo action do
elemento form
Para adicionar um botão genérico podemos utilizar o elemento input com type igual a button.
As ações desse tipo de componente são definidas com JavaScript. Os textos desses botões são
definidos com atributo value.
Redefine imediatamente todos os campos do formulário para o seu valor padrão.
Para adicionar um botão de reset podemos utilizar o elemento input com type igual a reset.
Esse tipo de botão reinicia os dados do formulário.
Esse tipo de botão permite selecionar um arquivo para um eventual upload.
Para adicionar um botão de upload podemos utilizar o elemento input com type igual a ele.
| type="text" | É um campo de texto com uma única linha que aceita qualquer tipo de texto sem controle ou validação. |
| type="email" | Define um campo de texto com uma única linha que só aceita um endereço de email bem formatados |
Dá para utiliza-los para dar dicas ou exemplos do conteúdo que desejamos em cada caixa de entrada. Exemplo:
São adicionadas nos formulários com elemento input. Devem ser utilizadas para coletar palavras chaves que serão utilizadas em algum tipo de pesquisa.
Usados para coletar dados numéricos. Há dois tipos de caixas para esse propósito, ambos são definidos como o elemento input.
Primeiro tipo: o valor do atributo type é number.
Segundo tipo: o valor do atributo type é range.
A principal diferença entre eles é que o primeiro (type=number) deve oferecer um mecanismo preciso para os usuários selecionarem o valor desejado enquanto o segundo(type=range) não possui essa obrigação.
Diversos tipos de caixas de entrada para coletar datas e horas foram adicionados no HTML5, mas o mais usado é esse:
Para adicionar uma caixa de senha em um formulário, devemos utilizar o elemento input com o valor password para o atributo type. Normalmente, os navegadores utilizam símbolos como o asterisco ou o círculo para omitir o conteúdo das caixas de senha.
Para adicionar um checkbox em um formulário, devemos utilizar o elemento input com type
igual
a checkbox.
Ao
utilizar esse componente, é importante definir um valor para o atributo value. No envio do
formulário,
esse
valor é transmitido se o checkbox correspondente estiver marcado.