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 <p>, 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 <font>.
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>
<font face="Comic Sans MS" color="green" size="15"> Alteração das propiedades da letra!
</font>
<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>
<p>Lista ordenada
<ol type="a" start="3">
<li>HTML
<li>CSS
<li>JavaScript
</ol>
<p>Lista não ordenada
<ul type="square">
<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>
<img src="imagens/net.jpg" align="right" border="8" width="150" height="150" alt="Network"> <!-- Imagem Local -->
<img src="http://www.mxstudio.com.br/wp-content/uploads/2010/10/imagem_internet2008.jpg"> <!-- Imagem Remota -->
</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 background="path/nome_imagem.jpg">
<!-- a path será o caminho desde a raiz (onde se encontra esta página gravada) até ao local onde se encontra a nossa imagem -->
</body>
(...)