← Tutoriais

[HTML] Criação de páginas web estáticas

Lida 3417 vezes

Offline

goodsound 
Membro
Mensagens 2485 Gostos 0
Troféus totais: 31
Trófeus: (Ver todos)
Super Combination Combination Topic Starter 50 Poll Votes 10 Poll Votes Poll Voter Poll Starter Level 5 Level 4 Level 3

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

Código: [Seleccione]
<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
Código: [Seleccione]
<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

Código: [Seleccione]
<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.

Offline

OFFICER 
Membro
Mensagens 2076 Gostos 0
Troféus totais: 29
Trófeus: (Ver todos)
Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter Level 5 Level 4 Level 3 Level 2

goodsound, já te pedi para adicionares TAG!

Não custa muito..
Offline

goodsound 
Membro
Mensagens 2485 Gostos 0
Troféus totais: 31
Trófeus: (Ver todos)
Super Combination Combination Topic Starter 50 Poll Votes 10 Poll Votes Poll Voter Poll Starter Level 5 Level 4 Level 3

goodsound, já te pedi para adicionares TAG!

Não custa muito..
ok, pá desculpa, eu pensei nisso mas não sei como e onde se faz isso. desculpa a ignorância.
Offline

OFFICER 
Membro
Mensagens 2076 Gostos 0
Troféus totais: 29
Trófeus: (Ver todos)
Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter Level 5 Level 4 Level 3 Level 2

Basta apenas quando criares o tópico, colocares antes do titulo o que se trata.

Neste caso no titulo do tópico bastaria adicionar  antes do resto.

Eu adicionei ;)
Offline

MarKo 
Administrador
Mensagens 4610 Gostos 10
Feedback +1

Troféus totais: 37
Trófeus: (Ver todos)
Level 6 Windows User Super Combination Combination Topic Starter 50 Poll Votes 10 Poll Votes Poll Voter 10 Polls Poll Starter

Foi feito por ti?
Offline

anjo2 
Membro
Mensagens 3020 Gostos 0
Troféus totais: 31
Trófeus: (Ver todos)
Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter Level 5 Level 4 Level 3 Level 2

deve ter sido
Citar
target= "blank"
Offline

goodsound 
Membro
Mensagens 2485 Gostos 0
Troféus totais: 31
Trófeus: (Ver todos)
Super Combination Combination Topic Starter 50 Poll Votes 10 Poll Votes Poll Voter Poll Starter Level 5 Level 4 Level 3

Foi feito por ti?
sim, foi feito por mim hoj~â tarde. desculpem os erros
Offline

goodsound 
Membro
Mensagens 2485 Gostos 0
Troféus totais: 31
Trófeus: (Ver todos)
Super Combination Combination Topic Starter 50 Poll Votes 10 Poll Votes Poll Voter Poll Starter Level 5 Level 4 Level 3

deve ter sido
Citar
target= "blank"
ok pá, "_blank" percebi que quizeste dizer que não percebo nada disto, ok tudo bem.
edit:
<a href="link" target="_blank">nome do link</a>
:-P