Aula 02

Data de publicação: Nov 14, 2012 11:30:41 PM

Etiqueta Center

Para além de ser possível centrar texto ou objectos com a tag , o mesmo pode ser alcançado com a tag <center>. Desta forma pode-se centrar qualquer objecto ou texto numa página html. A tag tem de ser sempre fechada após a sua utilização.

Espaço em branco

Por mais espaços em branco que se dê entre duas palavras o resultado visível num browser é de apenas um. Para poder dar mais do que esse espaço é necessário introduzir a seguinte sequência de caracteres:  

Apesar de não se tratar de uma tag, nem sequer de um atributo, pode ser usado no código HTML, sem este o confundir com caracteres de uma frase.

Texto pré-formatado

Numa página HTML, independentemente da forma como escrevemos os nossos textos, espaços a mais ou mudanças de linhas não são visualizados (como já se referiu) a não ser que se apliquem as tags ou códigos para esse efeito. Contudo, existe uma tag que nos permite que a formatação do texto apareça no browser tal e qual como está no código HTML.

Para isso, envolvemos o texto que pretendemos na tag <pre>

Exemplo:

(...)

<body>

<pre> Quando pretendo que apareça no browser

exactamente o que escrevo em código

como por exemplo, saltar linhas ou inserir espaços u s o a t a g pre

</pre>

</body>

(...)

Resultado

Formatação avançada de texto

A formatação avançada de texto é possível com a tag .

Através desta podemos alterar o tipo de letra, o seu tamanho ou mesmo a cor de um conjunto de caracteres.

A tag tem de ser obrigatoriamente ser fechada e aceita os seguintes atributos:

face - mudar o tipo de letra

color - mudar a cor da letra

size - mudar o tamanho da letra

Exemplo

(...)

<body>

Alteração das propiedades da letra!

<body>

(...)

Resultado

AULA 2 - EXERCÍCIO 1

Baseando-se no código anterior, tente alterá-lo no GEDIT para que as letras fiquem de cor azul, tamanho 20 e tipo de letra Verdana.

Centre também as letras na página.

Grave a página como AULA2_1.html e abra-a no seu browser para verificar o resultado.

Listas

Para ordenarmos um conjunto de itens necessitamos de utilizar listas.

Se for uma lista ordenada (ordered list) usamos a tag <ol>.

Se for uma lista não ordenada (unordered list) usamos a tag <ul>.

Ambas necessitam da tag respectiva de fecho.

Dentro de qualquer uma das tags, os itens a ser ordenados devem ser precedidos da sub-tag <li>. Estas não necessitam obrigatoriamente de ser fechadas.

Quanto aos atributos, a tag <ol> aceita os seguintes:

type - tipo de numeração ( 1 | a | A | i )

start - valor a começar a numeração (sempre um valor numérico)

A tag <ul> aceita:

type - tipo de marcas (circle, square)

Exemplo

(...)

<body>

Lista ordenada

<li>HTML

<li>CSS

<li>JavaScript

</ol>

Lista não ordenada

<li>HTML

<li>CSS

<li>JavaScript

</ul>

</body>

(...)

Resultado

Como se pode verificar, a lista ordenada começa na letra "c" visto o atributo start="3", isto é, a 3ª letra do alfabeto. Cada item da lista desordenada é precedido de um quadrado ( type="square" ).

AULA 2 - EXERCÍCIO 2

Com base no código anterior, tente alterá-lo no GEDIT para que a lista ordenada comece pela letra "a" e a lista não ordenada tenha pontos (circle) em vez de quadrados.

Grave a página como AULA2_2.html e abra-a no seu browser para verificar o resultado.

1.3 Integração de imagens

As imagens são dos componentes mais importantes de uma página web. Quando se inserem imagens num web site, devemos preocupar-nos com quem a vai visitar. A espera prolongada para que um site carregue, pode fazer desistir quem os visita. As imagens são as maiores responsáveis por esses atrasos. Deve-se por isso, inserir imagens que ocupem o mínimo de espaço possível em disco, para serem carregadas rapidamente.

Para inserir uma imagem em HTML, usa-se a tag <img src="caminho para a imagem">

Para além do atributo obrigatório src existem outros opcionais:

align - alinhar a imagem no ecrã

border - alterar a espessura da borda à volta da imagem

width - alterar largura da imagem

height - alterar a altura da imagem

alt - texto que irá aparecer quando o rato passar sobre a imagem

Exemplo

(...)

<body>

</body>

(...)

Resultado

AULA 2 - EXERCÍCIO 3

Tendo em conta o código anterior, procure alterá-lo no GEDIT para inserir uma imagem a seu gosto que exista no seu computador e uma outra que exista remotamente na Internet.

Grave a página como AULA2_3.html e abra-a no seu browser para verificar o resultado.

Imagem de fundo

As imagens de fundo distinguem-se das anteriores porque não necessitam de uma tag específica para serem introduzidas. Como a imagem irá ocupar toda a página usa-se o atributo background na tag <body>. Este atributo aceita vários tipos de imagens: gif, bmp, jpg, png, etc.

Exemplo

(...)

</body>

(...)