Painel de Usuario
Mensagens: 0
-
Alterar
-
Ver
-
Tópicos e mensagens
Menu
- Planeta Tutorial
- Ajuda e suporte
- Serviços para usuários
- Entretenimento
- Game zone
- Outros serviços
Procurar
Translate
Últimos assuntos
Estatísticas
Temos 26 usuários registradosO último membro registrado é kaironborges
Os nossos membros postaram um total de 144 mensagens em 142 assuntos
Radio Jovem Pan
Relogio
Visitou
HTML códigos básicos Parte 2
Página 1 de 1
HTML códigos básicos Parte 2
- Alinhamento de textos com a tag
Incluindo imagens
Agora que você já sabe incluir e formatar os textos de sua página, é possível que você queira dar mais vida à sua página, incluindo imagens e fundos nela.
Você faz as imagens em programas separados, em seu editor gráfico preferido. Ou pode usar imagens de outros sites. Mas os formatos ideais para home pages são GIF e JPG. Você não poderá usar o formato BMP.
A tag para inserir uma imagem em sua página é a seguinte:
Em "imagem que vai aparecer" você coloca o nome da imagem .gif ou .jpg ou o URL onde ela está para ser mostrada. Na verdade, apenas
- Atributos de Imagem
- Width e Height
São os atributos de largura e altura da imagem (Width: Largura da imagem - Height: Altura da imagem). Se você não incluí-los, não se preocupe. A imagem vai aparecer assim mesmo. Mas definindo os tamanhos da imagem ela carregará mais rápido.
Outra vantagem em usar o Width e Height é que você pode diminuir ou aumentar o tamanho de uma figura como você desejar, porém não recomendamos que você redimensione as imagens com esta opção. Se você quiser ter uma imagem menor, use um editor de imagem pra diminuir o tamanho dela, a imagem ficará mais bonita e também será mais leve para carregar. Se você tem uma página com galeria de imagens e uma "pré-vizualização" delas menores, sempre crie uma imagem menor com o editor de imagens, nunca use a imagem "maior" redimensionada, ela vai demorar muito a carregar e a vizualização não ficará boa.
- Alt
Texto alternativo. A função é apresentar um texto no lugar da imagem, enquanto esta ainda não apareceu.
- Border
Tamanho da borda da imagem. Os navegadores colocam uma borda na figura se este atributo estiver com um valor maior que zero. A vantagem é ocultar a borda que aparece e que indica que há um link em volta das figuras clicáveis. Muitas vezes esta borda faz a imagem ficar feia, quando o valor atribuído é zero. Veja um exemplo de imagem com borda igual a zero:
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Agora veja a mesma imagem com uma borda igual a 2:
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Uma tag de imagem com os atributos acima combinados ficaria assim:
Um exemplo:
O resultado é:
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
- Dicas e Formato de Arquivos de imagem
- TAMANHO EM Kb:
Evite ao máximo colocar imagens maiores do que 30Kb em sua página pois, quanto mais arquivos tiver e quanto maiores eles forem, mais lenta será a transfência, não é bom ter imagens "pesadas" na página, isso só vai tornar o carregamento mais demorado e os visitantes podem acabar desistindo de esperar. Procure organizar e dividir as imagens em seu site de modo que ele não fique muito pesado, nem sempre agrada aos visitantes ter muitas imagens.
- PROGRAMAS:
É essencial que seja escolhido um bom programa de edição de imagens para que seu site tenha uma boa apresentação gráfica. Entre os mais usados estão o Corel Draw, Adobe Photoshop e Paint Shop Pro.
- O FORMATO GIF:
Formato dominante na Internet, o GIF é um tipo de arquivo gráfico relativamente compacto (quando comparado com o BMP por exemplo) e o GIF pode ser transparente, não transparente ou animado.
Um GIF transparente é aquele onde uma cor pode ser escolhida para ser transformada em transparente quando vista por um navegador e mostrar o que há embaixo. Os programas que são mais usados para criar gifs e permitem que se crie transparências são o Photoshop e o Fireworks.
Os GIFS animados são aqueles que têm movimento. Nada mais são que uma seqüência de GIFS previamente preparados. O criador do GIF animado, usando um programa como o GIF Animator, escolhe as imagens que formarão a seqüência que dará a idéia de movimento.
- O FORMATO JPEG (jpg):
Grandes fotos geralmente são salvas neste formato pois, nestes casos, se consegue reduzir bastante o tamanho em bytes da imagem, sem prejudicar sua qualidade. É aconselhável, antes de mandar um arquivo GIF grande para Web, testar como ficaria se salvo como JPG.
- O FORMATO BMP:
Esses bitmaps, apesar de muito utilizados no Windows, são muito pesados para a Web. Se quiser colocar alguma imagem que estiver neste formato, salve-a antes como GIF ou JPG usando um editor de imagens como o Paint Shop Pro, Photoshop ou FireWorks.
Os parágrafos também podem ter atributos para o alinhamento dos textos. Basta apenas incluir depois do "P" o parâmetro "align=tipo de alinhamento". Os atributos são:
- Left: Alinhamento à esquerda
- Rigth: Alinhamento à direita
- Center: Centralizado
- Justify: Texto justificado (Só funciona em navegadores versão 4 ou superior)
Para incluir um destes atributos é simples. Veja os exemplos:
Texto alinhado à esquerda
Texto alinhado à direita
Texto centralizado
Texto justificado
Incluindo imagens
Agora que você já sabe incluir e formatar os textos de sua página, é possível que você queira dar mais vida à sua página, incluindo imagens e fundos nela.
Você faz as imagens em programas separados, em seu editor gráfico preferido. Ou pode usar imagens de outros sites. Mas os formatos ideais para home pages são GIF e JPG. Você não poderá usar o formato BMP.
A tag para inserir uma imagem em sua página é a seguinte:
- Código:
<img src="nome do arquivo de imagem que vai aparecer">
Em "imagem que vai aparecer" você coloca o nome da imagem .gif ou .jpg ou o URL onde ela está para ser mostrada. Na verdade, apenas
- Código:
<img src="nome do arquivo de imagem que vai aparecer">
- Atributos de Imagem
- Width e Height
São os atributos de largura e altura da imagem (Width: Largura da imagem - Height: Altura da imagem). Se você não incluí-los, não se preocupe. A imagem vai aparecer assim mesmo. Mas definindo os tamanhos da imagem ela carregará mais rápido.
Outra vantagem em usar o Width e Height é que você pode diminuir ou aumentar o tamanho de uma figura como você desejar, porém não recomendamos que você redimensione as imagens com esta opção. Se você quiser ter uma imagem menor, use um editor de imagem pra diminuir o tamanho dela, a imagem ficará mais bonita e também será mais leve para carregar. Se você tem uma página com galeria de imagens e uma "pré-vizualização" delas menores, sempre crie uma imagem menor com o editor de imagens, nunca use a imagem "maior" redimensionada, ela vai demorar muito a carregar e a vizualização não ficará boa.
- Alt
Texto alternativo. A função é apresentar um texto no lugar da imagem, enquanto esta ainda não apareceu.
- Border
Tamanho da borda da imagem. Os navegadores colocam uma borda na figura se este atributo estiver com um valor maior que zero. A vantagem é ocultar a borda que aparece e que indica que há um link em volta das figuras clicáveis. Muitas vezes esta borda faz a imagem ficar feia, quando o valor atribuído é zero. Veja um exemplo de imagem com borda igual a zero:
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Agora veja a mesma imagem com uma borda igual a 2:
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Uma tag de imagem com os atributos acima combinados ficaria assim:
- Código:
<img src="nome do arquivo de imagem que vai aparecer alt="texto" border=0 width="largura da imagem" height="altura da imagem">
Um exemplo:
- Código:
<img src="orbita.gif alt="Aqui aparece o texto alternativo" border=1 width="100" height="50">
O resultado é:
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
- Dicas e Formato de Arquivos de imagem
- TAMANHO EM Kb:
Evite ao máximo colocar imagens maiores do que 30Kb em sua página pois, quanto mais arquivos tiver e quanto maiores eles forem, mais lenta será a transfência, não é bom ter imagens "pesadas" na página, isso só vai tornar o carregamento mais demorado e os visitantes podem acabar desistindo de esperar. Procure organizar e dividir as imagens em seu site de modo que ele não fique muito pesado, nem sempre agrada aos visitantes ter muitas imagens.
- PROGRAMAS:
É essencial que seja escolhido um bom programa de edição de imagens para que seu site tenha uma boa apresentação gráfica. Entre os mais usados estão o Corel Draw, Adobe Photoshop e Paint Shop Pro.
- O FORMATO GIF:
Formato dominante na Internet, o GIF é um tipo de arquivo gráfico relativamente compacto (quando comparado com o BMP por exemplo) e o GIF pode ser transparente, não transparente ou animado.
Um GIF transparente é aquele onde uma cor pode ser escolhida para ser transformada em transparente quando vista por um navegador e mostrar o que há embaixo. Os programas que são mais usados para criar gifs e permitem que se crie transparências são o Photoshop e o Fireworks.
Os GIFS animados são aqueles que têm movimento. Nada mais são que uma seqüência de GIFS previamente preparados. O criador do GIF animado, usando um programa como o GIF Animator, escolhe as imagens que formarão a seqüência que dará a idéia de movimento.
- O FORMATO JPEG (jpg):
Grandes fotos geralmente são salvas neste formato pois, nestes casos, se consegue reduzir bastante o tamanho em bytes da imagem, sem prejudicar sua qualidade. É aconselhável, antes de mandar um arquivo GIF grande para Web, testar como ficaria se salvo como JPG.
- O FORMATO BMP:
Esses bitmaps, apesar de muito utilizados no Windows, são muito pesados para a Web. Se quiser colocar alguma imagem que estiver neste formato, salve-a antes como GIF ou JPG usando um editor de imagens como o Paint Shop Pro, Photoshop ou FireWorks.
Tópicos semelhantes
» HTML códigos básicos Parte 1
» HTML códigos básicos Parte 3
» HTML códigos básicos Parte 4
» Introdução HTML
» Lição 2: O que é HTML?
» HTML códigos básicos Parte 3
» HTML códigos básicos Parte 4
» Introdução HTML
» Lição 2: O que é HTML?
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos
|
|
Ter 28 Jun 2011 - 17:31 por Admin
» Efeito Glow
Seg 27 Jun 2011 - 17:39 por Admin
» Efeito Brilho Suave nas fotos
Seg 27 Jun 2011 - 17:33 por Admin
» Arte geométrica com Photoshop
Seg 27 Jun 2011 - 17:31 por Admin
» Efeito Varinha Mágica no Photoshop
Sáb 25 Jun 2011 - 15:20 por konan
» Montagem multicolorida com tintas e efeitos diversos
Sáb 25 Jun 2011 - 15:18 por konan
» Linhas luminescentes no Photoshop
Sáb 25 Jun 2011 - 15:17 por konan
» Segredos sobre design de site
Sex 24 Jun 2011 - 23:00 por konan
» Hardware para iniciantes, parte 5
Sex 24 Jun 2011 - 22:41 por konan