Home Programação Tutorial de introdução a HTML – Aula 2

Bem-vindos à nossa segunda aula de Introdução a HTML onde iremos abordar vários conteúdos sobre formatação e aspeto. Antes de começarmos, quero deixar uma nota aos leitores que eventualmente já tenham mais conhecimento na área: este tutorial, como o nome indica, visa dar uma introdução à linguagem e, como tal, alguns aspetos que se irão ensinar na aula de hoje, em ambiente mais avançado, não são usados diretamente ficheiro no qual vamos trabalhar.

Vamos começar por pegar no nosso ficheiro index.html desenvolvido na última aula. Note na figura em baixo que no cabeçalho foi introduzida uma nova linha de código. O leitor mais atento já reparou também que, no texto, os carateres  especiais como ‘ç’ e ‘ã’ já foram escritos diretamente no ficheiro. Sim, isso não é por acaso. Com o comando <meta charset=”UTF-8″> fazemos um import do UTF8 e já não temos de nos preocupar com carateres especiais.

Vamos introduzir no nosso ficheiro as nossas primeiras hiperligações e para isso vamos usar o tag <a> destinado a introdução de links. Todo o texto introduzido entre esse tag e o tag </a> que representa o fecho da instrução ficará com a referencia da hiperligação. O comando href (hyperlink reference) pode conter tanto uma referência para outro ficheiro (que deve estar contido na mesma pasta do index.html) como o endereço de um site.

html
html

 

Obviamente as páginas de Internet que vemos não são simplesmente texto corrido com links lá no meio. Vamos editar o nosso novo ficheiro pag2.html e, no campo body, vamos indicar a nossa background color (bgcolor), a cor por defeito do texto e dos links. Se usarmos os comandos ‘alink’ e ‘vlink’ podemos ainda ser mais precisos na cor que queremos, indicando assim respetivamente a cor de uma hiperligação por ver e vista. Podemos consultar a tabela de cores em hexadecimal neste site.

html
html

 

O próximo exemplo é bastante simples e apresenta a tag ‘align’ que nos permite alinhar o texto à direita ou ao centro. Naturalmente, por defeito, todo o texto é alinhado à esquerda. Para utilizarmos o align necessitamos de abrir uma tag <div> que irá aplicar as mudanças a todo o texto até à tag </div>.

html
html

 

Vamos continuar a fazer experiências e vamos agora variar o tipo de letra que utilizamos. Como é possível verificar através do teste mostrado em baixo, os tags <b>, <i> e <u> significam respetivamente que a letra estará a bolditalic ou underlined. Aproveitamos também para mostrar a diferença entre o comando <p> (paragraph), que está a ser utilizado desde o início desta aula, com o comando <br> aprendido na aula anterior.

html
html

Para finalizar, desafiamos o leitor a criar um outro ficheiro pag3.html e experimentar vários tipos de formatações ao mesmo tempo. Fica um exemplo em baixo que mostra que as tags podem ser colocadas dentro de outras tags de maneira a serem aplicadas com mais precisão. Note que a identação do código é puramente uma questão de legibilidade.

html
html

Chegamos ao fim da nossa segunda aula de Introdução a HTML. Embora esta aula tenha compactado vários comandos, estes são relativamente simples e intuitivos. Contudo, usem o espaço para comentários para eventuais dúvidas! Na próxima aula iremos abordar conteúdos relacionados com multimédia 🙂

Deixar um comentário

Este site utiliza o Akismet para reduzir spam. Fica a saber como são processados os dados dos comentários.

Outros Artigos