Links é uma das coisas mais importantes de um website. Através deles podemos acessar outras páginas em apenas um clique! Para criar links usamos a tag <a></a>. O que colocarmos dentro dessa tag se torna um link.
<a>Este é um link!</a>
Mas está faltando algo. Colocando apenas as tags desse jeito, o link acima não funcionaria. Por que isso? Bem, um link não vai ter utilidade nenhuma se não dermos um endereço a ele. É como se fossemos enviar uma carta sem saber o destino. Por isso devemos utilizar o atributo href. Dentro desse atributo colocamos o endereço do nosso link. href="endreço_do_link".
Abaixo temos um link para o site Wikipedia.
<a href="https://www.wikipedia.org/">Wikipedia</a>
Às vezes colocamos um link para outro site mas não queremos que a pessoa saia do nosso. Para isso podemos utilizar o atributo target="_blank" para que o site abra em outra janela (ou aba). Isso é muito útil para abrir links de sites diferentes, já que assim nosso site continuará aberto e quem estiver navegando poderá voltar a ele quando quiser. O link para abrir a Wikipedia em outra aba ficaria assim:
<a href="https://www.wikipedia.org/" target="_blank">Wikipedia</a>
Há outros tipos de valores que podemos utilizar com o target, mas eles são utilizados em situações diferentes mais avançadas (ainda não aprendi sobre).
É possível adicionarmos imagens nas nossas páginas através da tag <img />. Assim como os links, precisamos de um atributo para o navegador saber qual imagem estamos falando. Nas imagens, esse é o atributo src. Diferente de outras tags, a tag <img> não precisa ser fechada da mesma forma que as outras tags. Basta adicionarmos uma barra antes de fechá-la: <img href="caminho_da_imagem" />
O código abaixo é utilizado para mostrar a imagem a seguir:
<img src="https://www.wikipedia.org/portal/wikipedia.org/assets/img/Wikipedia-logo-v2.png" />
Nas imagens podemos utilizar o atributo alt para darmos uma descrição da imagem. É um atributo útil para quando um usuário não conseguir ver a imagem, seja por estar em uma conexão lenta, um erro no atributo src ou se está sendo usado um leitor de tela. Esse texto será mostrado no lugar da imagem caso essa não pode ser exibida e os leitores irão ler o conteúdo desse atributo aos usuários.
No exemplo abaixo coloquei um valor errado para o atributo src propositalmente para que possamos ver o atributo alt em ação.
<img src="caminho_da_imagem" alt="Descrição da imagem">
Sim! Como você já deve ter visto em outros sites, nem todos os links são feitos de textos. E como aprendemos acima, o que for colocado dentro da tag <a> se torna um link. Isso quer dizer que se colocarmos uma imagem dentro dessas tags, ela será um link! Podemos fazer links com cabeçalhos, listas dentre várias outras coisas.
Abaixo temos o código para usar uma imagem como link:
<a href="https//www.wikipedia.org" target="_blank"> <img src="https://www.wikipedia.org/portal/wikipedia.org/assets/img/Wikipedia-logo-v2.png" /> </a>