Aula 2 - Listas, Imagens e Links

1. Listas

As listas servem para organizar informações de forma clara e visual.

A lista não ordenada usa a tag <ul> e exibe marcadores.

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Exemplo:

A lista ordenada usa a tag <ol> e apresenta os itens em sequência numérica.

<ol>
  <li>Abrir o editor</li>
  <li>Criar o arquivo HTML</li>
  <li>Salvar a página</li>
</ol>

Exemplo:

A lista de definição usa as tags <dl>, <dt> e <dd>.

<dl>
  <dt>HTML</dt>
  <dd>Linguagem de marcação para páginas web.</dd>

  <dt>Navegador</dt>
  <dd>Programa usado para abrir sites.</dd>
</dl>

Exemplo:

A tag <img> é usada para inserir imagens em uma página.

<img
  src="caminho-da-imagem.jpg"
  alt="Descrição da imagem"
  width="200"
/>

Neste exemplo, a imagem está sendo carregada a partir de um endereço da internet.

O atributo alt é muito importante para acessibilidade e também para casos em que a imagem não carrega corretamente.

Os links são criados com a tag <a> e servem para levar o usuário a outra página, site ou parte do documento.

<a href="https://www.google.com">Acessar Google</a>

Um link externo leva o usuário para outro site.

Neste exemplo:

Um link interno leva o usuário para outra parte da mesma página.

<a href="#topo">Voltar ao topo</a>

Também podemos criar links para outros arquivos HTML do mesmo projeto.

<a href="aula1.html">Ir para a Aula 1</a>

Abaixo há um pequeno exemplo juntando lista, imagem e link em uma mesma seção.

Nesta aula, vimos como organizar conteúdos em listas, inserir imagens e criar links em HTML.

Esses elementos são muito usados no desenvolvimento de páginas web e aparecem com frequência em sites, sistemas e portais.