HTML 2
Imagens
Tamanho
Como imagens ocupam bastante espaço, é necessário ser parcimonioso, ou seja, não se deve colocar arquivos de tamanho grande para não aumentar muito o tempo de cópia dos arquivos e aparecimento da página na tela do internauta e, assim, abusar da paciência de um possível leitor, que deverá esperar que todas as imagens sejam copiadas no computador.
Portanto, de modo geral, deve-se evitar usar imagens grandes nas páginas.
Forma retangular e fundo
Mesmo que a imagem seja um círculo, quando a ilustração for colocada na página irá ocupar um espaço retangular, pois os programas de desenho sempre gravam as imagens com essa forma, independente do formato da figura.
Salvar a figura acima e verificar as suas dimensões em um programa de imagens (como o IrfanView ). Ela é um círculo?
(Se selecionar o texto acima, incluindo a imagem verá o seu tamanho real).
Notar que se a imagem tiver sido desenhada sobre um fundo colorido, ou branco ou preto, esse fundo acompanhará a imagem, como a figura da esquerda, a seguir.
Transparência da imagem: Alguns programas permitem criar imagens com o fundo transparente, ou seja, permitem definir que determinada área da imagem não tenha cor e dê a impressão de “vazada” (como a figura da direita).
Nesse caso, uma certa cor é selecionada para aparecer como transparente. Ao carregar a imagem no navegador, essa cor não será mostrada, gerando o efeito de transparência. Então, é necessário que a área que se pretende deixar transparente tenha somente uma cor que não pode se repetir em qualquer outra parte da imagem. Se essa cor existir em outro local, tal pedaço também ficará transparente. Veja a imagem acima à direita. É a mesma imagem mostrada no lado esquerdo, mas em que a cor branca do fundo foi selecionada para aparecer como transparente.
Veja como tornar uma cor transparente no IrfanView clicando aqui.
Formatos GIF e JPEG
Os navegadores mais usados aceitam várias tipos de imagens. Entretanto, muitos formatos de arquivos podem ter tamanhos grandes e sua inserção deixará o arquivo final enorme. Assim, geralmente os melhores formatos são o jpg e o gif que comprimem imagens em um tamanho relativamente pequeno.
Cada formato tem vantagens e desvantagens e a escolha do tipo utilizado deve sempre levar em conta o objetivo e a origem da imagem.
GIF - O formato gif , do inglês "Graphics Interchange Format" foi criado pela empresa Compuserv. É um formato usado para todos os tipos de ilustrações, animadas ou não.
Sua leitura é rápida, pois muito pouco processamento é utilizado para que um arquivo GIF seja exibido. Em compensação, está limitado a 256 cores. A compressão desse formato consiste em codificar linhas de pontos que possuem várias cores repetidas em seqüência.
É um formato de imagem que guarda as informações sem perda. Pode ser carregado em um editor gráfico, gravado em disco, recarregado e regravado, quantas vezes forem necessárias.
A base do formato gif é o algoritmo de compressão LZM (Lempzel-Ziv-Welch), que era de propriedade da Unisys, teve sua licença expirada em 20 de junho de 2003. Portanto, o formato GIF passou a ser uma tecnologia livre, desde então.
JPEG - A extensão JPEG, de "Joint Photographic Experts Group", utiliza um forma de compressão que pode ser configurada em diferentes níveis, que vão de 10 a 100. No nível 100, a imagem obtida do arquivo JPG é idêntica ao original. Nos outros níveis, a imagem é ligeiramente prejudicada, embora ainda seja muito semelhante.
Esse formato é especialmente útil para armazenar fotografias, ou desenhos com muitos detalhes,pois as altas taxas de compressão tornam as imagens pequenas.
Entretanto, não se pode esquecer que quanto maior a qualidade da imagem maior será o tamanho do arquivo.
Uma grande imagem, no formato bmp, se for comprimida em JPEG ou TIFF, pode vir a ocupar pouco espaço, muitas vezes sem perda perceptível de qualidade e com muito menor tempo para começar a exibir a imagem. O tamanho reduzido de fotos em JPG tornou-as preferidas em sites.
As imagens em JPG são, por natureza, de 24 bits e usam algoritmos de compressão que reduzem significativamente o tamanho físico de um arquivo. Isso significa que a cor é a mais fiel possível, em relação ao original. Entretanto, o formato JPEG alcança taxas altas de compressão descartando partes da imagem que passariam despercebidas ao olho humano. Assim, cada vez que um arquivo JPEG é aberto em um editor gráfico, mais dados são perdidos. O ato de gravar repetidamente (mas muitas vezes mesmo!) um arquivo JPEG o deixará inaproveitável para uso.
Comparando jpeg e gif
A taxa de compressão da extensão GIF não é tão boa quanto a do formato JPEG.
Entretanto, em compensação, a taxa de descompressão do GIF é muito mais rápida do que a do JPEG, e o GIF parece ser mais "rapidamente transmitido" pela Internet do que o formato JPEG e, assim, arquivos com o formato GIF aparecem no monitor mais rapidamente.
O formato GIF tem uma vantagem extra: é o único com o qual se pode fazer imagens transparentes.
Conversão de outras extensões
O tamanho dos arquivos a serem utilizados deve ser observado no Windows Explorer e, se necessário, diminuído, com o uso de um programa específico para tratamento das imagens (como o IrfanView ).
Um exemplo importante é a conversão de imagens com extensão BMP, enormes, em JPG ou GIF, muito menores.
Se a diminuição for feita, a imagem deverá ficar com menos de 80-90% do tamanho original, sem perda de qualidade. (Para ver como, utilizando o programa IrfanView, em que basta salvar o arquivo na extensão desejada, clicar aqui).
Como inserir imagens como fundos
Para ver como inserir uma figura como fundo no Mozilla Composer clique aqui.
Além do tamanho do arquivo, outros pontos devem ser considerado. Assim, quando se usa uma imagem como fundo, "back ground" de uma página deve-se ter muito cuidado.
- Pode-se usar a mesma imagem em várias hp's do site, para identificá-lo. Portanto, essa imagem deve ser muito bem escolhida pois será a mais vista do site.
- Se for possível, optar pelos fundos muito claros ou muito escuros, pois não se consegue uma boa relação de contraste de cores com o texto quando se usa imagens com cores intermediárias.
É importante notar que nada é pior que uma página ilegível. Na Internet, em que há tantas páginas lindas, úteis e fáceis de ler, é querer demais que o usuário se esforce para, simplesmente, ler um texto.
Para ver um detalhamento do comando inserir figura clique aqui.
Inserção de imagens
Lembrete:
Os arquivos com imagens deverão estar armazenados no seu provedor, juntamente com o documento HTML e, no caso dos exercícios, em A:\. Portanto, antes de iniciar o exercício:
- copiar para A:\ alguns arquivos de imagens jpg e gif que desejar colocar na sua hp.
(Para escolher, clicar nas opções abaixo ou, se você estiver no LabInfo, procurar na pasta E:\info\pqnos).
gif
| Animais invertebrados 1 | Animais vertebrados 1 |
| Barras 1 | Enfeites 1 | Html 1 | Pessoas 1 | Vegetais 1 |
jpg
| imagens jpg | fundos |
Como inserir imagens
1. Como figura na página:a. Abrir o NVU, clicando em 
b. Digitar ou copiar e colar um pequeno texto de seu gosto.
|
c. Posicionar o cursor em um local conveniente do texto |
 |
O nome do arquivo, sem a extensão, aparecerá em "Alternate Text".
Se não desejar que apareça, clicar em "Don´t use alternate text".
A imagem poderá ser vista no campo "Visualizar"
Na aba "Dimensions" pode-se escolher entre "Actual size" (Tamanho atual) e "Custom size" (Tamanho personalizado) onde o tamanho pode ser alterado.
Na aba "Appearance" pode-se especificar as distâncias de espaçamento (esquerdo e direito, superior e inferior) entre a figura e as bordas da página.
Se for especificado um tamanho para "Solid border", aparecerá uma moldura em volta da imagem pré-selecionada.
Com a imagem selecionada, a cor da borda pode ser trocada clicando-se no atalho
Em "Align text to image" existem as opções de alinhamento
"At the top", "In the center", "Wrap to the left", "Wrap to the right" (Em cima, No meio, em baixo, Contornar à esquerda, Contornar à direita)
Na aba "Link" pode-se especificar o link. (Detalhes sobre links podem ser encontrados aqui).
2. Como fundo - background da página
Rever o item "Página: Cores e plano de fundo clicando aqui.
Nota: Detalhes sobre os comandos sobre imagens em HTML podem ser encontrados aqui.
Nota: É importante que todos os arquivos referidos numa página (imagens, sons, links para outras páginas) tenham o seu nome em letras minúsculas, pois muitos servidores Web fazem uma distinção entre letras maiúsculas e minúsculas. Portanto, se um arquivo for referido como Xxxx.xxx, mas o arquivo realmente se chamar xxxx.xxx ou XXXX.XXX ele não seja encontrado e, portanto, não exxibido.
Exercícios
3. No NVU criar páginas, onde deve ser colocado título, autor e descrição, com: 3.1. Três figuras não animadas, cada qual com uma opção de alinhamento
a. sem borda. Salvar em A:\htm3-1.html.
b. Logo abaixo repetir as três figuras não animadas, cada qual com uma opção de alinhamento, com borda.
(Escolha o tamanho da borda). Salvar novamente como A:\htm3-1.html.
3.2. Três figuras animadas, cada qual com uma opção de alinhamento. Uma sem borda e as outras 2 com borda de cores e espessuras diferentes.
Salvar em A:\htm3-2.html.
3.3. Várias figuras, animadas e não animadas, com diferentes alinhamentos. Salvar em A:\htm3-3.html.
3.4. Na página htm3-3.html, colocar uma figura de tamanho pequeno como fundo. Salvar em A:\htm3-4.html.
3.5. Na hp htm3-3.html, em alguma parte do texto,
- Usar a opção "Linha horizontal" / "Horizontal line"
- Colocar uma figura de tamanho grande como fundo.Salvar em A:\htm3-5.html.
3.6. Dar um duplo clique no arquivo htm3-5.html. Deve-se abrir uma página do navegador Mozilla
(Se essa página for publicada é assim que será vista na Internet).
a. Verifique onde aparece o título.
b. Clicar em "Exibir" - "Informações da página" e verificar onde
- as informações sobre a página aparecem aparecem
- os arquívos de mídia aparecem.
HTML
Para facilitar a inserção dos tags de som, pode-se usar um script, para que os sons possam ser ouvidos, mesmo que interpretados por diferentes navegadores, como Mozilla / Netscape e Internet Explorer, entre outros. (Para saber mais sobre scripts, clique aqui). <SCRIPT LANGUAGE=JavaScript> 2. Repetição do arquivo por 2 vezes consecutivas, com controle de execução do arquivo <SCRIPT LANGUAGE=JavaScript> 3. Repetição do arquivo por 3 vezes consecutivas, sem controle de execução do arquivo <SCRIPT LANGUAGE=JavaScript> c. Substituir "nomedoarquivo.mid" pelo nome do arquivo, de extensão mid, que será usado na página. d. As linhas não podem ser quebradas. Elas devem constituir uma linha única em HTML. 7. No NVU 7.1. tocando em loop. Salve em A:\htm7-1.htm. 7.2. tocando 3 vezes, com controle de volume. Salve em A:\htm7-2.htm. 7.3. tocando 4 vezes, sem controle de volume. Salve em A:\htm7-3.htm.
Sons
Portanto, pode-se inserir arquivos de som dentro de um documento HTML, mas deve-se tomar muito cuidado com seu tamanho: há extensões cujos arquivos são enormes, exigindo um tempo muito grande de download, irritando o leitor e facilitando sua saída da página.
Os arquivos midi
A extensão "mid" é a abreviatura de MIDI - Musical Instrument Digital Interface. Essa extensão permite, desde que se tenha os programas adequados, que arquivos musicais sejam editados, armazenados e, evidentemente, tocados, com rapidez e facilidade.
Midi é um formato que permite armazenar músicas em arquivos de áudio no computador, ocupando um espaço relativamente pequeno, mas com pouca qualidade do som.
A importância dos arquivos midi provém de seu tamanho: como são pequenos, os midi são muito usados na construção de páginas.
Pode-se colocar um pequeno reprodutor de som na página, um pequeno controle tipo aparelhagem. Assim, será possível parar a música, usando esse controle.
O código é:
<BGSOUND SRC="beijaeu.mid">
<EMBED SRC="beijaeu.mid" WIDTH="140" HEIGHT="25" AUTOSTART="FALSE" CONTROLS="SMALLCONSOLE" VOLUME="60"OOP="FALSE"></EMBED>
Nota: beijaeu.mid é o nome do arquivo de música.
Se for usado o tag centralizar, o aspecto será o seguinte:
Lembrete: Os arquivos com sons deverão estar armazenados no provedor, juntamente com o documento HTML e, no caso dos exercícios, em A:\.
Portanto, antes de iniciar o exercício, deve-se:
Copiar para A:\ alguns arquivos mid, que desejar colocar na sua hp. (Para escolher consulte a página de Arquivos extras ou, estando no LabInfo, procure na sub pasta E:\info\pqnos).
Sons em navegadores diferentes
Entretanto, navegadores diferentes não decodificam os arquivos de som da mesma maneira.
Assim, o tag < embed > é reconhecido pelo Firefox, Mozilla suite e Netscape, e é escrito do seguinte modo:
< embed src="nomedoarquivo.mid" >.
Já o tag < bgsound > só é reconhecido pelo Internet Explorer. Na linguagem codificada, o tag é escrito assim:
< bgsound src="nomedoarquivo.mid" >.
Note-se que nomedoarquivo.mid é o arquivo de música. O nome real do arquivo deve substituir nomedoarquivo.mid.
Caso for desejado que a música repita-se infinitas vezes, deve-se adicionar o atributo loop="infinite".
Em geral, a seqüência de comandos do script começa com <SCRIPT> e termina com </SCRIPT>
a. Escolha a seqüência de comandos desejada:
1. Repetição do arquivo infinitas vezes
//<!--
if(navigator.userAgent.indexOf("MSIE") != -1)
document.writeln ('<bgsound src="nomedoarquivo.mid" loop=infinite hidden=true volume=100>');
else
document.writeln ('<embed src="nome do arquivo.mid" loop=true autostart=true volume=100 hidden=true>');
//-->
</SCRIPT>
(loop="2")
//<!--
if(navigator.userAgent.indexOf("MSIE") != -1)
document.writeln ('<bgsound src="nomedoarquivo.mid" loop="2" volume=100>');
else
document.writeln ('<embed src="nome do arquivo.mid" loop="2" autostart=true volume=100>');
//-->
</SCRIPT>
(loop="3", colocar hidden=true)
//<!--
if(navigator.userAgent.indexOf("MSIE") != -1)
document.writeln ('<bgsound src="nomedoarquivo.mid" loop="3" volume=100 hidden=true>');
else
document.writeln ('<embed src="nome do arquivo.mid" loop="3" autostart=true volume=100 hidden=true>');
//-->
</SCRIPT>
b. Se quiser que a música seja executada logo que o visitante entre no endereço, deve-se incluir a seqüência escolhida de comandos entre os tag <head> e </head>Exercícios
, em uma das páginas já salvas em A, incluir um arquivo midi
OBS.: Além dos arquivos midi contidos na pasta pqnos no LabInfo, há outros em Arquivos extras
LINK: é a cor dos links ainda não visitados,
ALINK: é a cor dos links, no momento em que são acessados e
VLINK: é a cor dos links já visitados.
HTML
Efeitos animados
É importante notar que recursos de animação devem ser utilizados com cuidado e parcimônia, pois em uma página que já apresenta vários motivos que chamam a atenção do leitor (figuras, cores, fontes) os efeitos animados são mais um deles, e seu uso pode ocasionar um resultado final cansativo e confuso.
Blink
A formatação Blink permite que um certo texto fique piscando em uma página, como no exemplo abaixo, centralizado e em amarelo. Pode-se aplicar outros formatos como cores, negrito, italic e alterar a fonte e o seu tamanho, normalmente.
O código é: <blink>Texto que deve piscar</blink>
Exemplo 1: Acima foi utilizado: <center><font color=#FFFF00><blink>Novo!</blink></font></center>
Exemplo 2: Segue um código para a o texto aparecer em azul "Deep Sky Blue" e em negrito: <font color=#00BFFF><b><blink>Novo!</b></blink></font>
É recomendável que o comando blink seja usado somente em pequenos detalhes (palavras ou setas), mas não em grande número na mesma página, pois gera muito cansaço visual.
Deve-se ressaltar que nem todos os navegadores mostram o efeito dessa formatação.
Marquee
Um texto pode entrar na página e percorrê-la da direita para a esquerda ou em sentido contrário, como um letreiro. Isso é obtido usando-se a formatação Marquee.
O código é: <marquee>Texto que deve se movimentar</marquee>.
Esse comando admite atributos de direção e largura do efeito as quais possibilitam várias formas de apresentação.
Também pode-se aplicar cores, negrito, italic e alterar a fonte e o seu tamanho, normalmente.
O deslocamento pode ser só da direita para a esquerda:
Exemplo 3: Acima foi utilizado: <span style="color: rgb(255, 0, 0);"><marquee behavior=scroll>Tô nem aí!</marquee></span>
Pode ser utilizada uma imagem:
Acima foi utilizado: <marquee behavior="alternate"><img src="../fig/estrel01.gif"></marquee>
O atributo behavior="alternate" faz com que o elemento movimentado vá e volte.
Exemplo 4: Veja um exemplo de uso do tag Marquee com uma foto grande, clicando aqui.
Outros exemplos:
1. Interferindo na direção:
a. Da esquerda para a direita. O atributo slide direction="right" faz com que o elemento siga para a direita.
<marquee behavior=slide direction=right>Elemento que se movimenta</marquee>
Exemplo 5: Acima foi utilizado: <marquee style="font-family: arial;" slide direction="right"><span style="color: rgb(255, 160, 120);">A gente somos inútil!</span></marquee>
b. Da direita para a esquerda. O atributo slide direction="left" faz com que o elemento siga para a esquerda.
<marquee behavior=slide direction=left>Elemento que se movimenta</marquee>
Exemplo 6: Acima foi utilizado: <marquee style="font-family: arial;" slide direction="left"><span style="color: rgb(0, 190, 255);">Por
isso corro demais: só pra te ver, meu bem!</span></marquee>
2. Interferindo na velocidade:
A especificação scrollDelay=um número indica a velocidade da rolagem: quanto menor for o número, mais rapidamente o texto corre. Exemplos:
Exemplo 7: Acima foi utilizado: </marquee><marquee scrolldelay="300"><img src="../fig/estrel01.gif"></marquee>
Exemplo 8: Acima foi utilizado: <marquee scrollDelay=50><img src="../fig/estrel01.gif"></marquee>
Se o que vai se movimentar é um texto evidentemente ele pode ser formado: Cor, tipo e tamanhos de fonte etc.
Acima foi utilizado: <marquee scrollDelay=150><font color=#00FF7F>Tomara que você volte depressa!</em></font></marquee>
3. Interferindo no sentido:
A especificação direction=up faz com que o texto fique na vertical. Nesse caso foi também centralizado e aparece na cor lilás (MediumSlateBlue). Exemplo:
Exemplo 9: Acima foi utilizado: <marquee direction=up <P align="center"><center> <font color=#7B68EE>Subindo!</font></p></marquee>
Onde obter mais informação
https://www.icmc.usp.br/ensino/material/html/blink.html
https://www.icmc.usp.br/ensino/material/html/marquee.html
Exercícios
10. No NVU em uma página já criada, existente em A:/, incluir:
10.1. texto, com efeito blink
10.2. texto, com efeito marquee, da direita para a esquerda.
10.3. imagem, com efeito marquee, da esquerda para a direita, em outra velicidade.
Salvar em A:\htm10.html.
HTML
Java Script
O código JavaScript, não é compilado, e deve ser colocado, no código fonte, junto com os comandos da linguagem HTML.
Quando se acessa um "site" alguns exemplos de scripts são: aparecimento da data / horário atual, saudações como "bom dia", "boa tarde" ou "boa noite", efeitos onde uma imagem muda quando se passa o mouse sobre ela.
Aplicação de um efeito
Script é uma sequência de comandos que deve ser colocada em uma posição determinada na página ou como um arquivo anexado. No último caso terá extensão js.
É importante lembrar que é preciso conhecer uma linguagem de programação para criar um script. Aqui só modificaremos alguns parâmetros e assim podermos modificar efeitos.
Um script pode ser convocado por um evento iniciado pela pessoa que acessa a página e clica em algo. É razoável manter a função entre os tags <head> e </head>. Normalmente os scripts são colados dentro do tag BODY, ou seja, entre os comandos <BODY> e </BODY>. (Se necessário leia sobre tags na Estrutura da página).
Os scripts podem ser colocados entre os campos de comentários internos para assegurar que o navegador não mostre o próprio script.
Em geral, a seqüência se inicia com <SCRIPT ... > e termina com </SCRIPT>
Java e JavaScript
Java é uma linguagem de programação e JavaScript é uma linguagem de scripting.
Pode-se criar programas reais com Java. Com JavaScript apenas cria-se efeitos que só funcionam dentro de uma página em HTML, por exemplo.
Assim, pode-se admitir que JavaScript é mais uma extensão do HTML do que outra linguagem de computação.
Exemplos:
1. Efeitos visuais
Muitos efeitos visuais podem ser colocados numa página inserindo-se scripts. Veja alguns:
Figuras subindo - Veja exemplos:
- Desejo que - Copa das confederações - Pessoas são presentes -
Veja o script utilizado clicando aqui.
Figuras caindo - Veja exemplos:
- Minha árvore de Natal - O navio e a pessoa -
Veja o script utilizado clicando aqui.
2. Comunicação
Scripts podem ser utilizados para que a navegação e a comunicação sejam mais eficientes:
Enviar a página (Mailpage) - Veja exemplo no final dessa página.
Só funciona para e-mails pop3 e em computadores em que um programa de correio eletrônico está corretamente instalado e configurado. Não são acionados outros "sites".
Veja o script utilizado clicando aqui.
Sons
Os navegadores de uso mais comum não interpretam sons utilizando os mesmos tags.
Pode-se usar um pequeno script para possibilitar que uma pessoa, ao acessar um site onde haja sons os ouça, não importando o navegador que utiliza.
- Veja exemplos:
Há mais detalhes sobre sons clicando aqui.Janelas
Janela popUp Uma janela extra aparece.
Outros efeitos
Links Voltar e Avançar
Rolagem da página
Exemplos: em várias páginas citadas acima (exemplos 1 a 10)
Acompanhante do mouse 1
Acompanhante do mouse 2
Exercícios
6.1. Preferencialmente usando os arquivos js
6.1. Em uma das hp's já salvas em A:/, incluir o efeito "Figuras subindo"
Salvar em A:\htm6-1.html.
6.2. Em uma das hp's já salvas em A:/, incluir o efeito "Figuras caindo"
Salvar em A:\htm6-2.html
6.3. Em uma das hp's já salvas em A:/, incluir o efeito "Enviar página"
Salvar em A:\htm6-3.html.
6.4. Em uma das hp's já salvas em A:/, incluir o efeito "Rolagem de página"
Salvar em A:\htm6-4.html.
6.5. Em uma das hp's já salvas em A:/, incluir outro efeito aqui mencionado de sua preferência
Salvar em A:\htm6-5.html.
6.6. Procurar na Internet um script diferente dos exemplificados nesse "site".
Aplicá-lo em uma página já existente em A:/. Salvar em A:\htm6-6.html.
(Clique aqui para ver os exercícios sobre sons.)