HTML
O que é HTML?
HTML é a sigla para Hiper Text Markup Language, traduzido para português como Linguagem de Marcação de Hipertexto. Mas afinal o que ela é? Vamos imaginar que estamos construindo uma casa de lego, cada bloquinho é importante para construir a casa, desde o teto até o chão, na internet o HTML funciona como os blocos, sendo a base de toda a estrutura de uma página Web.
O HTML não é uma linguagem de programação, mas é a linguagem que traduz o que queremos que nossa página web apresente, podemos usar o exemplo de um corpo humano, onde o HTML seria o esqueleto do nosso corpo, a parte em que imagem esqueleto html
Como funciona ?
De maneira simplificada no HTML precisamos escrever o código
utilizando um editor de texto (mais a frente vamos conhecer),
escrevendo as tags para estruturar nossa página. Depois do nosso
código escrito e estruturado colocamos ele em uma página no nosso
navegador que irá ler e mostrar na página o que escrevemos.
Tags são palavras especiais utilizadas no HTML que desempenham
funçõesespecíficas como de parágrafo, título, imagem…
Vamos usar um exemplo prático para entendermos como o HTML funciona:
<!DOCTYPE html>
<html>
<head>
<title>Minha primeira página</title>
</head>
<body>
<h1>Bem-vindo!</h1>
<p>Este é um parágrafo de texto.</p>
<img src="gatinho.png alt="Um gatinho">
</body>
</html>
Vamos explicar o que cada linha quer dizer:
<!DOCTYPE html>
Essa linha declara o documento que estamos criando, neste caso HTML e serve para que nosso navegador interprete o código de maneira correta.
<html>
Essa tag é a raiz do documento, onde todas as próximas tags que iremos inserir estarão dentro dessa tag.
<head>
A seção head contém informações sobre o nosso código que não serão exibidos diretamente na página.
<title>
Essa tag define o título da página. (print da aba com nome)
<body>
A seção body guarda todo o conteúdo visual da página, ou seja, tudo que se vê em uma página web fica na seção do body.
<h1>
Define o primeiro título, o maior título da página.
<p>
Define um parágrafo.
<img>
Insere uma foto no documento.
Depois de vermos todas essas linhas fica mais claro de entender o que todo quele código acima quer dizer, de maneira prática se executássemos aquele código o que apareceria na tela seria algo assim:
Aqui vamos conhecer as principais tags do HTML, como são muitas, aqui estarão as mais utilizadas e cada uma explicada de maneira prática onde deve ser utilizada. Antes de explicarmos sobre as tags vamos entender o porque das tags serem sempre escritas assim <>.
As tags funcionam de maneira semelhante a etiquetas para
identificarmos o conteúdo de cada conteúdo de código que estamos
escrevendo, exemplificando, a tag <p> indica que
todo conteúdo dentro dela é um parágrafo, e a tag
</p> indica o fechamento do nosso parágrafo. Essa
mesma estrutura funciona basicamente igual para todas as tags
escritas no HTML.
Vamos explicar as tags por categorias:
- Elemento raiz
-
<html>Envolve todo o conteúdo HTML, expressando que estamos tratando de um documento HTML
- Metadados
-
<head>O head no HTML funciona como uma capa de livro que dá informações sobre autor, título, editora e gênero do livro, essa seção te da informações sobre a página e não são necessariamente exibidas nela. No exemplo a seguir podemos ver um exemplo mostrando apenas a seção “head” da nossa página, onde está guardando informações do título da nossa página HTML 4 e a tag meta está definindo os metadados, como descrição e palavraschave do nosso site.
<head> <title>Meu primeiro site</title> <meta name="description" content="Este é um site sobre> <meta name="keywords" content="HTML, CSS,programação"> <head> -
<title>O title é o título da nossa página, serve como a identidade do nosso site e também como um mecanismo de pesquisa no momento da busca por um site. No exemplo a seguir a seção “title” está dentro da nossa seção “head” que vimos anteriormente, e como já explicado ele define o título do nosso site na web.
<head> <title>Meu primeiro site</title> <head> -
<link>Essa tag define um link para um recurso externo ao nosso site ou interno no caso conectarmos uma página a outra, utilizado para vincular o arquivo CSS no documento HTML. No exemplo a seguir veremos a tag
<a>que seria a tag ancora fazendo um link para uma página de exemplo fora do nosso site.<a href="https://www.example.com" target="_blank" title="A"> - Seções
-
<body>A seção body é o corpo da nossa página, é onde todo o conteúdo visível da nossa página é exibido no navegador. Essa seção armazena o conteúdo principal da nossa página, como parágrafos, títulos, imagens e demais informações inseridas. No exemplo a seguir podemos visualizar somente a tag “body”, na primeira linha no
<h1>estamos escrevendo um título para o corpo da nossa página, na tag<p>definimos um parágrafo exemplo, e na tag<img>inserimos uma foto no corpo da nossa página.<body> <h1>Bem-vindo ao meu site!</h1> <p>Este é um parágrafo de exemplo.</p> <img src="foto.jpg" alt="Foto exemplo"> </body> -
<h1-h6>As tags de título são exibidas de 1 até 6, que significa que podemos inserir 6 títulos diferentes no decorrer do nosso documento HTML. Essas tags definem o nível de importância de cada texto dentro da página, também servem para organização visual de quem está escrevendo do documento. Na hierarquia de título do
<h1>serve como título principal da nossa página, e as tags<h2>até<h6>são usadas para títulos de seções menores dentro da página. No exemplo abaixo verificamos a utilização prática dos títulos e subtítulos e os parágrafos que podemos montar dentro deles.<h1>Título Principal</h1> <h2>Subtítulo da Seção 1</h2> <p>Conteúdo da seção 1.</p> <h3>Subtítulo da Subseção 1.1</h3> <p>Conteúdo da subseção 1.1.</p> -
<footer>A tag footer serve como o rodapé da nossa página, onde são colocadas informações sobre direitos autorais da página, quem desenvolveu e links de redes sociais.
<footer> <p>; 202 Meu site. Todos os direitos reservados.</p> </footer> - Agrupamento
-
<div>A tag “div” serve para agrupar outros elementos HTML e aplicar estilos em comum para todos os elementos. Podemos aplicar dentro de uma
<div>parágrafos, imagens, etc, aplicando estilos para todos os elementos de uma só vez. No exemplo a seguir podemos observar que a “div” está sendo usada juntamente com a “class”, que serve como um rótulo para identificar e depois estilizar no documento CSS, as classes são utilizadas também para definir um estilo em comum.<div class="principal"> <h1>Bem vindo ao meu site!</h1> <p>Este é o conteúdo principal da página.</p> </div> -
<section>A tag “section” serve para definir seções de um documento, funcionando como uma divisão de conteúdos de forma temática. Também ajuda na parte de leitura quando estamos escrevendo o código. No exemplo abaixo temos duas “section” onde cada uma delimita um tema, de quem somos nós e nosso objetivo, facilitando a leitura do nosso código
<section> <h2>Sobre nós</h2> <p>Nós somos uma equipe voltada a ensinar programação</p> </section> <section> <h3>Nosso objetivo</h3> <p>Despertar vontade de aprender a programar.</p> </section> -
<class>A “class” como vimos anteriormente é a etiqueta que colocamos em um elemento HTML para identificá-lo, serve para encontrarmos as classes que vamos estilizar no documento CSS, que é a personalização do nosso documento HTML. No exemplo abaixo temos a tag “p” e definimos a classe “destaque”, o que significa que no documento CSS vai ter uma classificação diferente para esse parágrafo.
<p class="destaque">Este parágrafo terá um estilo diferente</p>A título de curiosidade abaixo está uma linha de estilização do CSS exemplificando como seria a personalização desse parágrafo no CSS. No exemplo pegamos a classe que definimos entre aspas “destaque” e definimos o tamanho da fonte (40 pixels), também definimos a cor do parágrafo (azul).
.destaque{ font-size: 40px; color: blue; } - Texto
-
<p>A tag “p” como vimos anteriormente define um parágrafo de texto dentro do nosso documento. Ela serve para organizar nossos textos dentro do documento. No exemplo escrevemos um parágrafo simples.
<p>Este é um exemplo de um parágrafo. Você pode escrever o</p> -
<strong>A tag “strong” serve para destacar um texto que definimos importante, geralmente o navegador lê o texto da tag “strong” em negrito. Com essa tag podemos fazer alterações específicas no texto destacado com uma estilização própria no CSS. No exemplo abaixo podemos ver o uso do strong dentro da tag “p” (parágrafo), onde estamos destacando o “muito importante” da nossa frase.
<p>Este é um texto normal. Mas esta palavra é <strong>muito importante</strong></p> - Conteúdo incorporado
-
<img>Essa tag é utilizada para inserir imagens no documento HTML para serem visualizadas na página web. No exemplo abaixo utilizamos o termo “src” que é obrigatório e que especifica o endereço da imagem na internet, temos o termo “alt” que fornece uma descrição alternativa da imagem.
<img src="minha_imagem.jpg" alt="Descrição da imagem"> -
<video>A tag video, como o próprio nome diz, serve para incorporarmos vídeos na nossa página sem o usuário precisar sair dela para assistir. No exemplo abaixo utilizamos novamente o termo “src” para copiarmos o endereço do vídeo e utilizamos também o “controls” que adicionam os controles de reprodução do vídeo (play, pause, volume).
<video src="meu_video.mp4" controls></video> - Formulários
-
<button>Essa tag utilizamos para criar botões clicáveis na página, podemos adicionar funções de enviar o usuário para outra página, podemos enviar formulário, tudo isso através dessa tag. No exemplo criamos um botão que não desempenha nenhuma função, apenas aparecerá um botão na página web.
<button>Clique aqui</button>Aqui neste outro exemplo digitamos o link direcionando para o Instagram, então sempre que o usuário acessar esse botão ele será direcionado para o Instagram. O “target="_blank" serve para mandarmos nosso usuário para outra página sem que ele perca o acesso a nossa página, também estamos utilizando a tag
<a>(âncora) para armazenar nosso link do Instagram.<a href="https://www.instagram.com/seu_usuario_instagram/"> <button>Instagram</button> </a>
Metadados são informações de descrevem o conteúdo da uma página web mas não são exibidos visualmente na página.
As seções são a organização do nosso conteúdo, voltando ao exemplo do livro, as seções seriam os capítulos do livro, separados por temas específicos, no HTML funciona de forma similar, onde cada seção serve para dividir o conteúdo da nossa página de maneira que seja fácil de visualizar no momento em que estamos montando o documento HTML.
Dentro das seções que vimos no tópico anterior, temos os agrupamentos onde estamos dividindo mais uma vez os elementos da nossa página, o principal objetivo de todas essas divisões irão fazer sentido no momento em que trabalharmos no documento CSS onde precisaremos definir padrões de estilos comuns para todos os elementos dentro do grupo.
Os textos no documento HTML são a organização textual do nosso arquivo, onde vamos dividir por algumas classes de estilos e modelos que podem ser escritos para serem visualizados na página web.
Esses conteúdos incorporados são imagens, vídeos, áudios que ficam localizados em outros locais, como por exemplo youtube, ou uma imagem do nosso computador que queremos mostrar direto em nossa página web. Podemos usar o exemplo de uma página dedicada a videoclipes mais famosos do youtube, porém estaremos dando uma introdução e explicando o que o artista quis dizer com aquela letra e clipe e logo abaixo queremos deixar o vídeo para nosso público ter acesso sem sair do nosso site e ir para outro assistir.
O grupo formulário são elementos que coletam informações do usuários em um site, desde fazer cadastros, fazer uma pesquisa, ou enviar mensagem.
Aqui se encerra o conteúdo sobre HTML, continue aprendendo mais sobre programação Web no próximo conteúdo sobre CSS onde vamos aprender a estilizar nossas páginas e esqueletos HTML.
Videos
