Aula 007: Conhecendo a Tag "a"
Autor: Uai Cartões Bh | Publicado: 2012-05-06T18:41:00-03:00


Salve, comunidade.



Vamos dar continuidade ao nosso curso de HTML básico. Hoje iremos conhecer a tag de linkagem, mas antes queria fazer uma revisão das tags que estudamos anteriormente.




A tag &lt;h1&gt; (títulos)



Utilizamos essa tag para dar títulos às nossas páginas HTML. Veja, abaixo, um exemplo:




&lt;h1&gt;Este é um título em HTML&lt;/h1&gt;

Lembre-se de abrir e fechar as tags de título com &lt;h1&gt; e &lt;/h1&gt;, respectivamente.




A tag H1 é o maior titulo que você pode dar ao HTML.&nbsp;



Abra o nosso editor de HTML (clique aqui para abri-lo) e faça a seguinte tarefa:



Tarefa 001

Escreva o seguinte título na página Olá, visitante. Seja muito bem-vindo ao meu site.

(A resposta está no final dessa aula)



Vale a pena lembrar que, se quiser dar subtítulos a sua página, você ainda pode utilizar mais 5 tipos de subtítulos em níveis menores:



&lt;h2&gt; ... &lt;/h2&gt;

&lt;h3&gt; ... &lt;/h3&gt;


&lt;h4&gt; ... &lt;/h4&gt;


&lt;h5&gt; ... &lt;/h5&gt;


&lt;h6&gt; ... &lt;/h6&gt;





Resultado no navegador







A tag &lt;p&gt; (parágrafos)



Utilizamos a tag &lt;p&gt; para criarmos parágrafos de textos em nossas páginas HRML. Vale a pena lembrar que todo o parágrafo deve ser aberto com a tag &lt;p&gt; e fechado com a tag &lt;/p&gt;. Já falamos sobre isso em aulas anteriores, mas acho essencial a revisão para que você possa memorizar o conteúdo.



Vamos fazer uma tarefa?



Tarefa 002

Abra o nosso editor HTML (clique aqui) e faça a seguinte tarefa.



1) No título da sua página, escreva "Sobre Mim..."

2) No primeiro parágrafo, apresente-se dizendo seu nome, sua idade e de onde você é.

3) No segundo parágrafo, diga o porquê que você gostaria de aprender HTML.

4) Crie um subtitulo escrito "Como estou aprendendo HTML?"

5) Escreva um parágrafo dizendo como você está estudando para aprender a criar suas página.

(A resposta dessa tarefa, encontra-se no final dessa aula).




A tag &lt;a&gt; (links)



Você sabe o que é um link?&nbsp;Eu acredito que o link foi uma das principais invenções no HTML, sem eles, um site não existiria.&nbsp;



Os links são aquelas palavras-chave que geralmente estão no alto da página, ou no canto esquerdo, para que as pessoas possam navegar pelo site (mudar de página).&nbsp;




Exemplos de links na página da Uol






Analisando a imagem acima, você vê vários links. Quando você passa o mouse sobre eles, a setinha do mouse vira uma mãozinha para que você possa clicar. Caso você clique, você será redirecionado para uma outra página HTML com o conteúdo em questão.




Ex.: clicando em Carros, você irá para uma página que fale sobre carros.

Clicando em Ciência, você irá para uma outra página que fale sobre ciências.

Clicando no título da notícia, você irá acessar a página que contém a notícia em questão.




Os links são essenciais para que uma página HTML "converse" com outras páginas HTML. A esse grupo de páginas lincadas entre si, damos o nome de site.




A estrutura básica de um link



Para criarmos um link, utilizaremos a tag &lt;a&gt; para abrir a linkagem e a tag &lt;/a&gt; para fechá-la. Veja - abaixo - como fazê-lo:



&lt;a&gt;Este é um link.&lt;/a&gt;



Abra o nosso editor HTML e monte a estrutura acima. Veja o resultado.



Você deve ter reparado que o link não funcionou. Mas por quê?&nbsp;



Isso aconteceu porque nós não especificamos para que página a pessoa deve ir ao clicar nesse link.&nbsp;





Qual a função de um link? Levar o visitante para uma outra página.&nbsp;
E como faremos isso? Devemos informar ao navegador para qual página ele deve ir, quando clicarmos nesse link.






Para informarmos ao navegador qual página será aberta quando alguém clica no link, devemos utilizar o atributo "href". Esse atributo será colocado dentro do tag &lt;a&gt;, conforme mostrado abaixo:



&lt;a href="http://www.uol.com.br"&gt;Este é um link da Uol.&lt;a&gt;



Monte a estrutura acima em editor HTML e veja o resultado. Repare que agora o link está ativo e se você clicar sobre ele será enviado para o site da Uol (http://www.uol.com.br).



Então vale a pena lembrar:&nbsp;



para abrirmos um link, utilizamos a tag &lt;a&gt;, entretanto essa tag sozinha não vale muita coisa, precisaremos de um atributo (o href) para informar ao navegador qual será a página que se abrirá quando clicarmos no link em questão.



Obs.: O endereço da web informado no atributo href deve estar sempre entre aspas "" e ser iniciado com o http://.



Um exemplo:

Vamos criar uma página HTML que possui 3 links: um para o nosso blog, outro para o facebook e um terceiro para a página da Google. Abra o seu bloco de notas e digite o conteúdo abaixo.




Clique na imagem para ampliá-la.




Salve a página na sua pasta Aula HTML com o nome links.html e abra no seu navegador. Veja o resultado produzido.




Resultado no Navegador




Comentando o código digitado



&lt;html&gt;: dá inicio ao código HTML no documento;

&lt;head&gt;: abre o cabeçalho do documento, informações ocultas ao navegador;

&lt;title&gt;: imprime o texto na aba do navegador, ou na sua barra de titulo;

&lt;body&gt;: abre o corpo do documento, tudo o que for escrito aqui dentro aparecerá na tela do visitante;

&lt;h1&gt;: Abre o título da página;

&lt;/h1&gt;: Fecha o título da página;

&lt;a href="http://www.expedicao3w.blogspot.com.br"&gt;: abre o primeiro link a ser clicado;

&lt;/a&gt;: fecha o primeiro link;

&lt;a href="https://www.facebook.com"&gt;: abre o segundo link a ser clicado;

&lt;/a&gt;: fecha o segundo link;

&lt;a href="http://www.google.com.br"&gt;: abre o terceiro link a ser clicado;

&lt;/a&gt;: fecha o terceiro link;

&lt;/body&gt;: fecha o corpo do documento;

&lt;/html&gt;: fecha a página HTML.



Abra novamente a imagem abaixo e analise cada parte do código com base nas informações acima:







Clique na imagem para ampliá-la.







Analisando a estrutura de um link HTML



Antes de finalizarmos a aula de hoje, vale a pena analisarmos com carinho a estrutura de um link em HTML para não termos mais dúvidas de como fazê-los de agora em diante:








Repare que o &lt;a dá início a linkagem em HTML: é com ele que o navegador fica sabendo que o conteúdo a seguir é um link a ser clicado;
Href é um atributo que fica dentro da tag &lt;a&gt;: o href informa ao navegador que página será aberta quando o visitante clicar no link em questão. Não se esqueça de colocar o endereço da página entre aspas e com o http://;
O &gt; fecha a tag &lt;a&gt;
A palavra que vem logo em seguida (Nesse caso Google) é a palavra que receberá a função de link. Ela estará no navegador como um link. Caso o visitante passe o mouse sobre essa palavra, a setinha vira uma mãozinha para que ele possa clicar e ir para o site da Google.
A tag &lt;/a&gt; fecha o link e informa ao navegador que daí para frente, as palavras voltam ao normal, sem serem links clicáveis.


Memorize esse conteúdo antes de continuar, ok? O código começa a ficar grande e você precisa compreender cada estrutura para continuar com sucesso o nosso curso. Faça algumas páginas de exemplo e salve em sua pasta para praticar o que já aprendeu até agora.&nbsp;



Se tiver alguma dúvida, não exite em pedir ajuda ou perguntar. Criei um tópico em nosso fórum específico para discutirmos sobre a tag &lt;a&gt;, clique abaixo para visitá-lo.



Fórum de Discussão sobre a tag &lt;a&gt;



Disse na aula passada que iria falar hoje sobre imagens, mas achei melhor discutir sobre isso em nossa próxima aula, pois o conteúdo atual ficou bem extenso e acho que há muita coisa que você precisa estudar hoje. Portanto, falamos sobre isso em nosso próximo assunto.



Fico por aqui e espero você em nossa próxima aula, ok?




RESPOSTAS DAS TAREFAS SOLICITADAS NESSA AULA




Tarefa 001
Escreva o seguinte título na página&nbsp;Olá, visitante. Seja muito bem-vindo ao meu site.

Resposta:
&lt;h1&gt;Olá, visitante. Seja muito bem-vindo ao meu site.&lt;/h1&gt;


Tarefa 002
Abra o nosso editor HTML &nbsp;e faça a seguinte tarefa.

1) No título da sua página, escreva "Sobre Mim..."
2) No primeiro parágrafo, apresente-se dizendo seu nome, sua idade e de onde você é.
3) No segundo parágrafo, diga o porquê que você gostaria de aprender HTML.
4) Crie um subtitulo escrito "Como estou aprendendo HTML?"
5) Escreva um parágrafo dizendo como você está estudando para aprender a criar suas página.



Resposta:
&lt;h1&gt;Sobre mim...&lt;/h1&gt;
&lt;p&gt;Olá, meu nome é Wenderson Andrade, tenho 31 anos e moro na cidade de Belo Horizonte em Minas Gerais.&lt;/p&gt;
&lt;p&gt;Gostaria de aprender HTML, pois pretendo ser um webmaster nos próximos meses e - para isso - acho essencial conhecer e dominar a linguagem HTML.&lt;/p&gt;
&lt;h2&gt;Como estou aprendendo HTML?&lt;/h2&gt;
&lt;p&gt;Conheci o Blog Expedição 3w e estou aprendendo HTML desde o início. Estou adorando as aulas e acho que dessa vez eu chego lá.&lt;/p&gt;

Visualização do código acima no navegador: