Antes de começar, já vou te dar duas dicas!
Dica 01: Enquanto estou estruturando um conteúdo HTML eu sempre deixo aberto um guia rápido para possíveis dúvidas.
Eu gosto bastante desse Guia de Referências HTML HostingerBR.
Dica 02: O Visual Studio Code (VS Code) nos ajuda bastante na digitação de tags HTML, a dica é a mesma para todas as tags dessa leitura:
- No VS Code comece digitando o nome da tag;
- Ele irá reconhecer a tag e exibirá um pop-up;
- Aperte Enter e o VS Code irá adicionar automaticamente a tag de abertura e fechamento (se houver).
- Para algumas tags ele irá adicionar outros campos essenciais, como o texto alternativo alt="" da tag <img> que é muito importante para a acessibilidade de imagens nas páginas que estamos criando.
Agora vamos às Tags!
- Cabeçalhos:
Temos 6 tags para cabeçalhos e títulos, elas vão do <h1> até o <h6>, quanto menor o número do h, maior a fonte, ou seja, <h1> é a maior delas e <h6> é a menor. Veja abaixo:
<h1>Cabeçalho 1</h1>
<h2>Cabeçalho 2</h2>
<h3>Cabeçalho 3</h3>
<h4>Cabeçalho 4</h4>
<h5>Cabeçalho 5</h5>
<h6>Cabeçalho 6</h6>
Cabeçalho 1
Cabeçalho 2
Cabeçalho 3
Cabeçalho 4
Cabeçalho 5
Cabeçalho 6
- Parágrafos: quando queremos adicionar um texto na página, geralmente usamos a tag <p> paragraph.
<p>Isso é um parágrafo de texto</p>
Em alguns momentos, quando não é possível usar o CSS para formatar um texto, utiliza-se algumas tags HTML. Exemplo:
- Vamos supor que no "Isso é um parágrafo de texto" você quer deixar apenas a palavra "parágrafo" em negrito ou itálico?
Para negrito você pode utilizar a tag <strong>:
<p>Isso é um <strong>parágrafo</strong> de texto</p>
Resultado: Isso é um parágrafo de texto
Para itálico você pode utilizar a tag <i>:
<p>Isso é um <i>parágrafo</i> de texto</p>
Resultado: Isso é um parágrafo de texto
Lembre-se, HTML estrutura, CSS estiliza/formata, então evite utilizar tags de formatação e estilização no HTML. Caso seja realmente necessário há outras tags de formatação no guia disponibilizado no início dessa leitura.
- Listas Ordenadas: para a criação de uma lista ordenada, ou seja, a ordem dos itens é importante, utilizamos a tag <ol> ordered list e adicionamos os itens da lista com a tag <li> list item.
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
- Item 1
- Item 2
- Item 3
Note que no resultado acima a lista numera cada um dos itens. Como temos 3 itens, a numeração foi de 1 a 3.
- Listas Não Ordenadas: para a criação de uma lista não ordenada, ou seja, a ordem dos itens não é importante, utilizamos a tag <ul> unordered list e também adicionamos os itens da lista com a tag <li> list item.
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
- Item 1
- Item 2
- Item 3
Note que no resultado acima a lista apenas colocou um símbolo na frente de cada item.
- Imagens: para adicionar imagens na página é utilizado a tag <img>.
<img src="" alt="">
Note que é a primeira vez que temos algo dentro de uma tag. Chamamos src="" e alt="" de atributos da tag <img>. São nos atributos que colocamos informações básicas de uma tag.
Na tag <img> temos dois atributos básicos:
- src="" é onde a imagem está localizada e;
- alt="" é o texto alternativo (essencial para a acessibilidade das páginas para pessoas que tem deficiência visual ou quando a imagem por algum motivo não for carregada, o texto alternativo será exibido).
Na prática, se formos adicionar a imagem do logo Google, temos:
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Logo do Google">
onde:
- src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png e;
- alt="Logo do Google".
o resultado é:
- Links: para levar o usuário até um link interno ou externo da página é utilizado a tag <a> anchor. Veja um exemplo:
<a href="https://google.com" target="_blank">Clique aqui!</a>
Na tag <a> temos um atributo básico e outros opcionais:
O atributo básico href="" é o link de destino.
No exemplo, ao clicarmos no link ele nos levará ao "https://google.com";O atributo target="_blank" indica que o link será aberto numa nova aba ou página, esse atributo é opcional.
O resultado do código é:
Clique aqui!
Já que colocamos uma imagem <img> e um link <a> do Google, que tal se unirmos os dois? Sim, podemos usar a tag <a> para direcionar o usuário a um link após ele clicar numa imagem!
<a href="https://google.com" target="_blank">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Logo do Google">
</a>
Resultado:
Ainda tenho que falar das tags de Tabelas e Formulários.
Como essa leitura está ficando um pouco extensa, vou deixar para falar dela na próxima publicação, não percam!
Parabéns!!!
Fico muito feliz que chegou até o final dessa publicação.
Espero que você tenha aprendido muito!
Quer aprender mais?
Te convido a visitar o meu canal na Twitch: https://www.twitch.tv/dwtoledo.
Lá a gente faz muitas lives de front-end e tem uma playlist muito legal sobre conceitos de HTML.
Top comments (1)
Gostei das dicas