Como já vimos anteriormente um elemento HTML é definido por uma <tag de abertura>, algum conteúdo e a </tag de fechamento>.
Como exemplo de elementos, nós já aprendemos:
1 – a hierarquia de Títulos ou Cabeçalhos – <h1> até <h6>;
2 – parágrafo – <p>;
3 – todas as tags necessárias para montar o esqueleto do HTML – <html>, <head>, <body>, <title>
Agora iremos falar sobre links e comentários
Links HTML
Também conhecidos como hiperlinks, são elementos que conectam páginas web, permitindo que os usuários naveguem entre elas.
Os links podem ser representados por textos, frases, ícones ou imagens. Quando um usuário clica sobre um link, ele é direcionado para o conteúdo ao qual o link se refere.
Para criar um link em HTML, é usada a tag âncora, que é representada pela letra “a”. O atributo principal do elemento “a” é o “href”, que especifica o destino do link. O atributo “href” é composto por dois elementos: a URL (o link real) seguida do texto ou objeto clicável que vai aparecer na página.
Vamos então montar um link para acessar o site do Google.
Primeiro criamos um parágrafo e depois vamos criar a tag de abertura: <a>
Agora vamos colocar dentro da tag, o atributo: <a href>
No atributo vamos indicar o destino: <a href=”https://google.com”>
Feito isto, vamos colocar o conteúdo: <a href=”https://google.com”>Conheça o Google
E finalmente, vamos fechar a o elemento com a tag de encerramento:
<a href=”https://google.com”>Conheça o Google</a> e não esqueça de fechar a tag do parágrafo.
Criando um link de e-mail
O conceito é o mesmo, criamos um parágrafo e depois começamos pela tag “a”, acrescentando o atributo “href” colocando o destino do link, depois o conteúdo e finalmente fechando a tag.
<a href=”mailto:alguem@google.com”>Clique para enviar e-mail</a> e por último fechar a tag do parágrafo.
Fazendo comentários
Quando estamos editando um documento HTML precisamos de orientação para nos lembrar onde você está, ou o que foi feito, ou o que precisa fazer. Para isso nós usamos os comentários.
Em qualquer ponto de seu documento HTML você pode inserir comentários utilizando como código de abertura <!– então você digita os comentários e para fechar utilize o código –>
Exemplo de comentário
As vezes ficamos na dúvida se vamos precisar de alguma parte de um texto ou não, então utilizamos os comentários para deixar invisível ao visitante.
<p>Acho que vou precisar desta parte do texto, mas acredito que não vou precisar desta.</p> Então colocamos o comentário na segunda parte do texto.
<p>Acho que vou precisar desta parte do texto<!–, mas acredito que não vou precisar desta.–></p> Note, que neste caso terminamos o comentário antes do fechamento da tag do parágrafo pois precisamos dela mas não precisamos de parte do texto incluído nela.
Exercitando seu conhecimento
Monte o esqueleto do HTML e no corpo <body> coloque estes dois tipos de link faça a frase com o comentário. Salve o arquivo como index.html e clique nele para ver o resultado. Se tudo estiver certo vai ficar parecido com esta imagem abaixo:
Não deu certo?? Tente copiar este script abaixo e confira onde errou!
<!DOCTYPE html>
<head>
<title>Nome da página</title>
</head>
<body>
<p>COMENTÁRIO</p>
<p>Acho que vou precisar desta parte do texto<!–, mas acredito que não vou precisar desta.–></p>
<p>LINK PARA O GOOGLE</p>
<p><a href=”https://google.com”>Conheça o Google</a></p>
<p>E-MAIL</p>
<p><a href=”mailto:alguem@google.com”>Clique para enviar e-mail</a></p>
</body>
</html>
OBS.: Se você não sabe o que é o esqueleto volte ao primeiro capítulo de nosso curso e aprenda passo a passo.
Trabalhando com imagens
Por favor, clique com o botão direito do mouse sobre a imagem abaixo e a salve na sua pasta HTML. Renomeie como flores300x300.jpg
A tag para imagens -e <img> e o atributo principal é o src que mostra o caminho para localizar a imagem. Vamos a um exemplo:
<img src=”flores300x300.jpg”>
Agora, por favor, dentro da pasta HTML crie uma nova pasta com o nome de imagens e depois clique com o lado direito do mouse nesta imagem abaixo e salve-a dentro da pasta imagens e renomeie para pao300x300.jpg
Como esta imagem está na pasta imagens, vamos alterar as informações do atributo src que vai ficar como abaixo:
<img src=”imagens/pao300x300.jpg”>
Uma outra forma de indicar uma imagem é através de URL.
Novamente, com o botão do lado direito do mouse, clique sobre a imagem do pão acima e selecione copiar endereço da imagem e cole no src:
<img src=”https://dicasepromocoes.com.br/web/wp-content/uploads/curso-html/pao300x300.jpg“>
ATENÇÃO: para utilizar imagens de outros sites você deve ter autorização prévia.
Podemos alterar as dimensões de imagens com os atributos width (largura) e height (altura).
<img src=”imagens/pao300x300.jpg” width=”500″ height=”500″>
Podemos adicionar também o atributo alt que é obrigatório para a tag <img> pois ele mostra um texto alternativo para uma imagem, se a imagem por algum motivo não puder ser exibida. Isso pode ocorrer devido a uma conexão lenta, a um erro de escrita no atributo src ou ao usuário usar um leitor de tela.
<img src=”imagens/pao300x300.jpg” width=”500″ height=”500″ alt=”Pão francês”>
Não esqueça que cada atributo deve estar contido entre aspas duplas, do contrário vai arruinar o script da página.
Quando estiver passando estas informações para o esqueleto HTML experimente preencher errado, por exemplo, tirando do texto acima a palavra imagens/ e veja o que acontece.
Agora tente fazer você mesmo, se não der certo copie os textos da imagem acima e observe onde errou.