Módulo: Criação de Páginas WEB 50 Horas - Sessão 05/13
TEXTO ANIMADO O comando MARQUEE orienta o browser a definir o efeito de texto/imagem a passar no ecrã. Deve ser utilizado quando queremos dar destaque a um texto ou imagem. Deve ser usado com cautela, sem exageros, para não chamar demasiada atenção do utilizador, ficando este apenas voltado para o destaque, deixando de lado a restante informação da página.
Comando: <MARQUEE> Texto ou imagem </MARQUEE> <HTML> <HEAD><TITLE>Texto Animado</TITLE></HEAD> <body bgcolor= lightblue"> <H2> <font color= navy"> <Marquee>Formação WEB</Marquee> </font> </h2> </BODY> </HTML>
Atributos 1. Behavior= Controle Controla o comportamento do texto dentro do marquee, que pode ser: Scroll: Faz com que o texto entre por um dos cantos e saia por outro; (predefinido) Slide: O texto entra por um dos cantos do marquee e pára ao chegar ao canto oposto; Alternate: O texto fica passando de um canto para o outro dentro do Marquee. <Marquee behavior="alternate">formação WEB</Marquee>
2. BGColor= #000000 Muda a cor do fundo do Marquee. 3. Direction= direcção Define a direcção na qual o texto se move, pode ser: Left: Faz o texto correr para a esquerda; Right: Faz o texto correr para a direita; Up: Faz o texto correr para cima; Down: Faz o texto correr para baixo; <Marquee behavior="alternate" bgcolor= silver" direction="right">formação WEB</Marquee>
4. Height= n Define a altura do marquee, sendo que n é um valor em pixeis. 5. Width= n ou n% Define a largura do marquee, sendo que n é um valor em pixeis ou em percentagem da largura da janela. <p align=center> <Marquee behavior="alternate" bgcolor= silver direction="right" height=60 width=80% >Formação WEB</Marquee></h2></font></p>
6. Loop= n Define quantas vezes o texto irá passar o marquee, n é o número de vezes. Se for igual a 1 ou infinite, ele passará pelo marquee infinitamente. 7. ScrollDelay= n Controla a velocidade do texto, definindo os intervalos de redesenho do texto, sendo n o valor em milissegundos do intervalo de redesenho do texto. Quanto menor o n, mais rápido é o movimento do texto. <Marquee behavior="alternate" bgcolor="cyan" loop="5" scrolldelay= 50">Formação WEB</Marquee> Alterar para 200 milissegundos
Imagem da mesma directoria do documento <Marquee ><img src= cior.png"></marquee> Imagem da directoria anterior à do documento <Marquee ><img src="../cior.png"></marquee> Imagem da directoria imagens que está na directoria anterior à do documento <Marquee ><img src="../imagens/cior.png"></marquee> Imagem da directoria imagens na mesma localização do documento <Marquee ><img src="imagens/cior.png"></marquee>
<marquee> O elemento <marquee> é um elemento não-padrão. HTML5 classifica-lo como um recurso de não-conformidade Conselho No, really. do not use it. Não, realmente. não o use.
Interligação de Documentos O principal poder do HTML vem da capacidade de interligar partes de um texto, imagens a outros documentos. Links para o mesmo diretório Só é necessário especificar o nome do ficheiro que será chamado e a sua extensão. Sintaxe: <A HREF= nome do arquivo.extensão >texto ou imagem </A>
Onde: A Abertura da tag do link; HREF= nome do arquivo.extensão nome completo do ficheiro; Texto ou imagem Texto ou imagem que servirá de link; /A Encerra a tag do link; <HTML> <HEAD><TITLE>Exemplo</TITLE></HEAD> <body bgcolor= silver"> <h3> <a href="exemplo.html">cursos</a> </h3> </BODY> </HTML>
Links para outros diretórios ou pastas Para criar links para uma página localizada noutro diretório é necessário indicar o caminho completo do ficheiro. Para a Web tem uma forma um pouco diferente do Windows. A barra utilizada para separar diretórios é a barra convencional (/); O ponto de partida para localizar outro diretório é o atual; Para baixar um nível deve-se utilizar os sinais../ ; <a href="../exemplos tabelas/exemplo1.html">tabela</a> <a href="http://moodle.cior.pt/">cior-moodle</a>
O atributo: TARGET= blank Utilizado opcionalmente na tag de links Indicar ao browser para abrir uma nova janela em branco para visualizar a página indicada no link. <a href="http://www.cior.pt" target= blank >CIOR</a>
Links para a mesma página Definem-se secções na página, cada secção terá um nome que servirá de referência para o link. Âncoras Para ter links numa mesma página, deve-se criar uma âncora no início de cada secção que será acedida por um link. É um ponto de referência ou endereço que será acedido por um link. É utilizada para marcar o início de cada secção da página. O nome da âncora será a referência utilizada pelo link.
Criar Âncoras <A Name= nome da secção ></A> A Abertura da tag de link; Name= nome da seção > - Cria o nome da secção, marcando o início da secção; Não é necessário inserir nada entre <A> e </A>; </A> - encerra a tag. Ligação às Âncoras <A HREF= #nome da secção >Texto ou imagem</a> A Abertura da tag de link; HREF= #nome da secção > - Nome da secção, que deve ser acedida; </A> - encerra a tag.
Nota Importante O símbolo # indica ao navegador que o link encontra-se na mesma página. É indispensável o uso do #.
Inserir Imagens Onde: <IMG SRC= nome do ficheiro.extensão WIDTH= n Height= n ALIGN= posição ALT= mensagem BORDER= n > SRC= nome do ficheiro.extensão nome do ficheiro/extensão Dimensionar as imagens Podemos redimensionar a imagem através dos atributos: 1. Width= n Altera a largura da imagem. Valores dados em pixeis. 2. Height= n Altera a altura da imagem. Valores dados em pixeis.
Nota: As figuras redimensionadas podem perder um pouco a sua definição <HTML> <HEAD><TITLE>Exemplo</TITLE></HEAD> <body bgcolor= lighblue"> <h3> <img src= imagens/espbs.jpg" width="300" height="300"> </h3> </BODY> </HTML>
Alinhamento das imagens ALIGN= posição Em relação ao browser: Right Alinhamento à direita Left Alinhamento à esquerda (padrão) Em relação ao texto: Top Alinhamento pelo topo da imagem Middle Alinhamento pelo centro da imagem Bottom - Alinhamento pela base da imagem
<img src= imagens/cior.jpg" width="300" height="300" align="right"> <img src= imagens/cior.jpg" width="300" height="300" align="middle"> Outros atributos ALT= mensagem Este atributo tem a função de exibir uma mensagem no lugar da imagem, enquanto esta é carregada. Também tem a função de especificar, indicar sobre a imagem, quando o cursor é colocado sobre a imagem. Border = n Podem ser definidos diferentes tamanhos de bordos para uma imagem, em pixeis.
<img src="../imagens/cior.jpg" width="300" height="300" alt="escola Profissional CIOR V.N.Famalicão border=10> Tag <META> Proporcionam informações sobre a página, para o utilizador e para os motores de pesquisa. Estas tags só necessitam e devem estar na primeira página do site. As tags <META> encontram-se geralmente dentro da tag <HEAD> e </HEAD> e depois do <TITLE></TITLE>
Fichas De Trabalho