HTML significa Hypertext Markup Language (Linguagem de Marcação de Hipertexto) . É uma linguagem especial usada para construir páginas web. Quando você visita um site, o computador lê HTML para mostrar as palavras, imagens e links. Pense em HTML como os blocos de construção de um site. Assim como usamos peças de Lego para construir uma casa ou um carro, usamos tags HTML para construir uma página web.
HTML é o código que informa a um computador como exibir texto, imagens, vídeos e links em uma página da web. É como dar instruções a um amigo que está desenhando uma imagem para você. HTML usa palavras entre colchetes angulares, chamadas tags , para marcar o início e o fim de uma parte da página da web.
Todo site que você visita usa HTML de alguma forma. Sem HTML, não haveria páginas da web para você visualizar. O HTML ajuda a organizar o conteúdo e informa ao computador como exibir a página. É a primeira coisa que se aprende em desenvolvimento web, pois é ele quem faz a internet funcionar!
Um documento HTML tem uma estrutura especial. Ele começa com uma declaração chamada <code><!DOCTYPE html></code> que informa ao computador que a página usa HTML. Em seguida, o documento é dividido em duas partes principais: o cabeçalho e o corpo.
Um documento HTML muito simples se parece com isto:
<código><!DOCTYPE html>
<html>
<cabeça>
<title>Minha primeira página da web</title>
</cabeçalho>
<corpo>
<p>Olá, mundo!</p>
</corpo>
</html> </código>
Neste exemplo, a seção <head> fornece o título da página, e a seção <body> é onde você coloca o conteúdo que aparece na tela.
O HTML usa tags para marcar diferentes partes da página web. Uma tag é uma palavra entre colchetes angulares. Por exemplo, <code><p></code> informa ao computador que o que se segue é um parágrafo. Ao terminar o parágrafo, use a tag de fechamento, <code></p></code>, para indicar o fim.
Um elemento em HTML consiste em uma tag de abertura, algum conteúdo e uma tag de fechamento. Por exemplo:
<code><p>Este é um parágrafo.</p></code>
Cada tag instrui o navegador da web sobre como exibir o conteúdo.
Existem muitas tags em HTML. Algumas das mais comuns são:
Atributos fornecem informações extras sobre um elemento HTML. Eles são adicionados à tag de abertura, dentro dos colchetes angulares da tag. Os atributos mais comuns são src e alt, usados com a tag de imagem.
Por exemplo, para adicionar uma imagem, você pode escrever:
<code><img src="picture.jpg" alt="Uma bela imagem"></code>
Aqui, src informa ao navegador onde está o arquivo de imagem e alt fornece uma descrição da imagem se ela não puder ser exibida.
O documento HTML é dividido em duas partes:
Os links permitem que você pule de uma página para outra. Em HTML, criamos links usando a tag <a> . O atributo href dentro da tag informa ao navegador o destino do link.
Por exemplo:
<code><a href="https://www.example.com">Visite Example.com</a></code>
Ao clicar neste link, seu navegador abrirá o site example.com .
As imagens iluminam uma página web e a tornam mais interessante. Para adicionar uma imagem, use a tag <img> . Lembre-se de que a tag <img> não possui uma tag de fechamento.
Veja como adicionar uma imagem:
<code><img src="sunflower.jpg" alt="Um girassol brilhante"></code>
Este código instrui o navegador a exibir a imagem de um girassol. O atributo src aponta para o local da imagem, e o atributo alt fornece uma descrição da imagem.
Listas organizam informações em um formato organizado. Existem dois tipos principais de listas em HTML:
Aqui está um exemplo de uma lista não ordenada:
<código><ul>
<li>Maçã</li>
<li>Banana</li>
<li>Cereja</li>
</ul> </código>
E aqui está um exemplo de uma lista ordenada:
<código><ol>
<li>Primeiro</li>
<li>Segundo</li>
<li>Terceiro</li>
</ol> </código>
Tabelas ajudam a exibir informações em linhas e colunas. Elas são úteis quando você precisa comparar dados ou listar itens em uma grade.
Aqui está um exemplo simples de uma tabela HTML:
<código><tabela border="1">
<tr>
<th>Nome</th>
<th>Idade</th>
</tr>
<tr>
<td>Alice</td>
<td>10</td>
</tr>
</tabela> </código>
Nesta tabela, <tr> define uma linha da tabela, <th> é usado para o cabeçalho da tabela (texto em negrito) e <td> é usado para dados da tabela (as células).
O HTML também permite adicionar multimídia, como som e vídeo. Com a tag <audio> , você pode incluir arquivos de som. Com a tag <video> , você pode incorporar players de vídeo à sua página web.
Aqui está um exemplo de código de incorporação de vídeo:
<código><vídeo largura="320" altura="240" controles>
<fonte src="movie.mp4" tipo="vídeo/mp4">
</vídeo> </código>
Este código cria um player de vídeo com botões para reproduzir, pausar ou alterar o volume. O atributo controls informa ao navegador para exibir esses botões.
Todos os sites na internet são construídos com HTML. Imagine que você está visitando o site da sua escola, um site de jogos divertidos ou lendo uma história online. O HTML trabalha nos bastidores para organizar o texto, as imagens e outros conteúdos para que você possa vê-los claramente.
Por exemplo, quando você vê uma imagem do seu personagem de desenho animado favorito on-line ou clica em um link para ler mais sobre um tópico divertido, o HTML está lá para fazer isso funcionar.
Vamos analisar um projeto simples. Imagine que você queira criar uma pequena página web sobre seu animal favorito, como um gato. Você pode incluir um título, um parágrafo sobre gatos, uma imagem e até mesmo um link para um site com curiosidades sobre gatos.
Seu código HTML pode ser parecido com este:
<código><!DOCTYPE html>
<html>
<cabeça>
<title>Meu animal favorito</title>
</cabeçalho>
<corpo>
<h1>Tudo sobre gatos</h1>
<p>Gatos são brincalhões e dóceis. Eles adoram dormir e ronronar. Muitas pessoas adoram ter gatos como animais de estimação.</p>
<img src="cat.jpg" alt="Um gato fofo">
<a href="https://www.catfacts.com">Saiba mais sobre gatos</a>
</corpo>
</html> </código>
Este projeto utiliza títulos, parágrafos, imagens e links. Ele mostra como o HTML é usado para construir uma página web completa com várias partes.
Enquanto o HTML constrói a estrutura de uma página web, existem outras ferramentas que fazem os sites parecerem e se comportarem de maneiras divertidas.
Embora hoje estejamos aprendendo sobre HTML, saber sobre CSS e JavaScript nos ajuda a entender como os sites são feitos.
Ao explorar HTML, você encontrará muitas outras tags. Aqui estão algumas para você conhecer:
Essas tags oferecem mais controle sobre como seu conteúdo aparece em uma página da web.
O HTML mudou muito desde sua criação. Muitas novas tags e recursos foram adicionados ao longo do tempo. Cada nova versão do HTML facilita a criação de sites complexos e bonitos. Hoje, o HTML trabalha em conjunto com CSS e JavaScript para construir sites modernos, divertidos de usar e com ótima aparência.
Essa evolução significa que o HTML é fácil de aprender e poderoso o suficiente para criar tudo, desde páginas da web simples até aplicativos da web complexos.
Embora aprender HTML seja divertido, é sempre importante manter-se seguro na internet. Ao visitar sites ou explorar conteúdo online, lembre-se de sempre pedir ajuda a um adulto se tiver alguma dúvida. Sua segurança vem em primeiro lugar, e aprender HTML deve ser sempre uma experiência divertida e segura.
Vamos dar uma olhada em alguns termos importantes que você aprendeu hoje:
O HTML é usado em muitos cenários do mundo real. Aqui estão alguns exemplos:
Esses exemplos mostram como o HTML é uma ferramenta muito útil em muitas áreas da vida cotidiana.
Hoje, aprendemos que HTML é a abreviação de Hypertext Markup Language (Linguagem de Marcação de Hipertexto) . É a linguagem básica usada para criar páginas da web. Aqui estão os pontos-chave para lembrar:
HTML é a base de todos os sites que você vê na internet. Com blocos de construção simples, como tags e atributos, você pode criar páginas divertidas e interativas. À medida que você continua aprendendo, verá como o HTML ajuda a dar vida às páginas da web, tornando a internet um lugar útil e interessante para explorar.
