Construção de paginas Web estáticas
Alguns aspectos a considerar:
- Uma pagina web deve ser intuitiva e leve de modo a minimizar tempo de espera do utilizador e permitindo uma fácil navegação
- O tipo de letra deve ser um dos tipos “standard” para que todos os utilizadores possam visualizar a página
Apesar da medida padrão para o layout das páginas ser 800*600, é cada vez mais frequente os web designers optarem pela construção de páginas com tamanhos superiores por exemplo 1024*768
No caso de se optar por medidas diferentes do padrão, deve-se introduzir uma nota informativa na qual deve constar a resolução recomendada bem como o browser para o qual a página foi optimizada (normalmente “Internet explorer”)
Browsers como o mozilla, opera, firefox, etc. não devem ser usados para padrão de optimização visto existirem linhas de código que são incompatíveis ou não são correctamente interpretadas por estes browsers
Imagens em formato “BMP” deverão ser evitadas devido á lentidão a carregar.
Recomenda-se o uso de “JPG” e “GIF”, visto preservarem uma boa qualidade e os ficheiros serem relativamente pequenos
Sons/Musica de fundo:
O HTML não permite a introdução de ficheiros em formato MP3
Entre os ficheiros permitidos os mais comuns são os ficheiros wave e midis
As paginas de Internet escritas em HTML devem ter a extensão .HTM ou .HTML
A pagina inicial do site, por norma devem chamar-se INDEX.HTM ou INDEX.HTML, a extensão pode variar de servidor para servidor
A linguagem HTML funciona com base em “Tags”
As Tags são indicadas entre os sinais < e > podendo conter parâmetros
A grande maioria das Tags devem ser fechadas, para isso utiliza-se o sinal / dentro da tag.
Ex.: <TITLE> titulo da pagina</TITLE>
Estrutura de uma página
<HTML>
<HEAD>
<TITLE>titulo</TITLE>
</HEAD>
<BODY>
Conteudo da página
< /BODY>
</HTML>
Dentro da tag <HEAD> pode ser introduzido o titulo da pagina (aquele que é exibido na barra superior do browser)
Alem do titulo, também podem ser introduzidas funções em Javascript, adicionando assim novas funcionalidades à pagina.
Dentro da tag <Body, como o próprio nome indica, encontra-se o corpo da pagina. É aqui que é inserido todo o conteúdo, tal como texto, imagenx, vídeos, etc. É também aqui que vai ser introduzido o código para chamar as funções presentes na <head>
A maioria das tags podem ter parâmetros configuráveis.
Os parâmetros são inseridos entre o nome da tag e o sinal>.
Exemplo: <Font face = “Arial”size=5> texto </font>
Tags mais comuns
<html> - inicia e termina todos os documentos de html
<head> - cabeçalho
<title> - titulo
<body> - corpo da pagina. Tem vários parâmetros, entre eles estão:
“bgcolor” – define a cor de fundo da pagina
“background” – define a imagem de fundo
<font> - Permite alterar o tipo de letra, tamanho, cor. O tamanho pode variar de 1 a 7
<h1> a <h6> - Permite a introdução de títulos no corpo da pagina. O texto aparece automaticamente a negrito. A tag <h1> corresponde ao maior e a <h6> ao menor.
<br> - Introduz quebras de linha no texto. Esta tag não necessita de ser fechada
<p> - define o paragrafo. Para ajustar o alinhamento, usa-se o parâmetro “align” = left/right/center
Ex: <p align=center> texto </p>
Em relação a nomes de paginas, imagens, sons, etc:
Não usar espaços
Não usar maiúsculas
Não ultrapassarar os 8 caracteres
Não usar caracteres especiais/acentuação/cedilhas
Inserir imagens
<img src =”nome da pasta+nome da imagem ”>
Pode alterar o tamanho da imagem atráves da utilização dos parâmetros “width”(largura) e “height”(altura)
Exemplo: <img src= “imagens\sol.jpg” width =100 heght =100>
A imagem terá 100*100px
Os parâmetros de altura e largura deverão ser usados com cuidado visto poder existir distorção das imagens. Para encolher uma imagem de forma proporcional, deve-se usar apenas um dos parâmetros (altura ou largura) e utilizar o valor em percentagem
Exemplo: < img src= “imagem.jpg” width=50%>
Hiperligações
<a href= “endereço de destino”> texto/imagem </a>
exemplo:
<body>
<a href= “http://www.google.com”> google </a>
<body>
</html>
Para que a hiperligação abra uma nova janela
<a target= “blank” href= “http://www.google.com”>google</a>
Tabelas
<table>
<tr>
<td>Conteudo da celula</td>
<td>Conteudo da célula</td>
</tr>
<tr>
<td>Conteudo da célula</td>
<td>Conteudo da célula</td>
</tr>
</table>
Medidas absolutas e medidas relativas
As medidas absolutas são dadas em pixeis, permitem manter os componentes da pagina sempre com a mesma medida, seja qual for a resolução do utilizador.
As medidas relativas são apresentadas em percentagem e, quando bem utilizadas, permitem que a estrutura da pagina se adapte á resolução utilizada.
Ex: <table border=1 width =85% height =90%>
<tr>
<td>Conteudo</td>
</tr>
</table>
As medidas 85% e 90% significam que a tabela terá uma largura de 85% da pagina uma altura de 90% da pagina.