9ª aula de web design
Autor: Lú | Publicado: 2011-05-09T18:30:00-07:00

1º trimestre
-&gt; Prova GIMP-&gt; Linha do tempo-&gt; Provão - 24/05-&gt; Provão HTML-&gt; Trabalho site - 09/05-&gt; Trabalho-&gt; Blog

HTML 
INTERLIGANDO DOCUMENTOS
 
* Links para documentos locais
Fazer a ligação de um texto com uma página local é tarefa bastante simples. Você precisa apenas especificar o nome
completo do arquivo que será chamado, com o comando A HREF. Você deve simplesmente indicar o nome do
arquivo como link, incluindo obrigatoriamente a extensão do arquivo.
&lt;A HREF=“nomedapagina.htm”&gt;Texto ou Imagem a ser clicado&lt;/A&gt;
Com Imagem:
&lt;IMG BORDER=”0” SRC=”imagem.jpg”&gt;&lt;/IMG&gt;
OBS.: Tanto no acesso a figuras, como textos de outros documentos, eles devem estar guardados no mesmo diretório da página ou então deverá ser colocado o caminho completo donde eles se localizam.
* Conectando os arquivos de outros servidores
Agora a coisa fica um pouco mais séria. É aqui que está toda a graça da Internet. Com o uso de um esquema de endereçamento chamado URL, consegue-se acessar um arquivo localizado em qualquer servidor do planeta que esteja conectado adequadamente à Web.
URL é a abreviação de Uniform Resource Locator e serve para especificar a localização de páginas e arquivos em
diretórios de servidores da Web. Esse esquema é parecido com aquele que você usa para acessar um programa armazenado num diretório de sua máquina, ou seja, você tem de especificar o caminho (path) do arquivo para que ele seja encontrado. Na Web, você indica a URL do arquivo. Veja o exemplo:
http://www.univates.br/ctti
Uma URL é composta de duas partes principais. A primeira é o protocolo Internet do documento e a segunda é o
endereço do servidor e da página. A sintaxe é: protocolo://servidor.arquivo
- Protocolo é o tipo de serviço que está sendo acessado, e servidor é o computador que contém a página.
- Arquivo pressupõe o caminho completo do arquivo.
Por exemplo, para acessar a página do UNIVATES, a URL da página é: http://www.univates.br
Este endereço pode ser escrito na linha de URL do browser, para acessar diretamente a página. Pode, também, ser
indicado dentro de um documento HTML mediante o comando A HREF, que cria uma ligação ou link para a URL
especificada. &lt;A HREF= “http://www.univates.br” Home page da UNIVATES &lt;/A&gt;.
* Links para outra parte do mesmo documento
Quando um documento é muito extenso, você poderá utilizar links que o levem para outras partes dentro deste
mesmo documento.
&lt;A NAME=“destino”&gt;texto&lt;/A&gt;
&lt;A HREF=“#destino”&gt;hipertexto&lt;/A&gt;
"destino" é uma variável que serve de busca.
"texto" é a palavra para onde o browser irá quando o link for selecionado. Não é necessário.
"hipertexto" é a palavra que servirá de link.
O símbolo “#” avisa o browser para procurar o link no documento atual.
* Links para um ponto específico em outro documento
&lt;A NAME=“destino”&gt;texto&lt;/A&gt;
&lt;A HREF=“URL da página#destino"&gt;hipertexto&lt;/A&gt;
"destino" continua sendo uma variável qualquer a sua escolha para o browser saber para onde ir quando o link for selecionado;
"texto" é palavra que indica para onde o browser vai quando o link for selecionado;
"hipertexto" é o link da página para onde você quer ir.
* Link para um e-mail
O e-mail (correio eletrônico) é o serviço mais utilizado na Internet e existe um comando para criar um link no qual abre-se uma janela para você mandar seu e-mail.
mail.
&lt;A HREF="mailto:anahamester@gmail.com"&gt;Mande-me um e-mail&lt;/a&gt;
&lt;A HREF="mailto:anahamester@gmail.com?Subject=Proposta"&gt;Mande-me um e-mail&lt;/a&gt;Como você pode notar, utilizei o meu e-mail como exemplo. Assim, ao clicar no link, você escreverá sua mensagem numa janela aberta pelo browser e mandará seu e-mail para mim.
OBS.: Só funciona se um programa de e-mail estiver corretamente instalado e configurado.
*** OUTROS LINKS.: Link para Download, link para imagem, outros arquivos...Caminhos Absolutos/RelativosAlguns exemplos:
1. Inserir a imagem tux.gif da pasta linux em index.htm:
&lt;img src=”informatica/linux/tux.gif”&gt;
2. Inserir a imagem logo.jpg da pasta “raiz” em
openoffice.htm:
&lt;img src=”../../logo.jpg”&gt;
3. Inserir a imagem foto.jpg da pasta imagens em
openoffice.htm:
&lt;img src=”../../imagens/foto.jpg”&gt;&nbsp;MARQUEE
Faixas decorativas... texto que fica “correndo” pela tela.
&lt;MARQUEE BEHAVIOR=”efeito” DIRECTION=”direção”&gt;TEXTO&lt;/MARQUEE&gt;
Efeito = Scroll, Slide, Alternate
Direção = Left, Right, Up, Down
+++ Align, Width, Bgcolor, Loop, ScrollAmount, ScrollDelay... 
REFRESHUma tag pouco utilizada. Ela faz com que a página fique ativa durante certo tempo e depois, carregue
automaticamente uma próxima página. Este comando é colocado na parte HEAD do documento.
&lt;META HTTP-EQUIV=”refresh” CONTENT=”s;URL=pagina.html”&gt;
“s” – significa o número de segundos que você deseja esperar até carregar a próxima página;
“pagina.html” – é a página a ser chamada.
CONSTRUÇÃO DE FRAMES
Frames são as divisões existentes em algumas páginas, que deixam o site com duas ou mais partes separadas na tela.
Com isso, torna-se possível apresentar mais de uma página por vez, por exemplo um índice principal em uma parte
pequena da tela, e os textos relacionados ao índice em outra parte.
O arquivo HTML responsável para a separação em frames, indica que arquivos irão ocupar cada frame quando a
página for carregada e qual a porcentagem de extensão da tela de cada um. Vamos supor, para o exemplo abaixo, que
desejamos criar uma página com 2 frames em colunas e que os nomes dos arquivos são 1.htm e 2.htm:&lt;HTML&gt;
&lt;HEAD&gt;
&lt;TITLE&gt;Exemplo de página com Frames&lt;/TITLE&gt;
&lt;/HEAD&gt;
&lt;FRAMESET COLS="20%, 80%"&gt;
&lt;FRAME SRC=”1.htm” NAME=”esquerda”&gt;
&lt;FRAMESET ROWS="15%, *&gt;
&lt;FRAME SRC=”2.htm” NAME=”superior&gt;
&lt;FRAME SRC=”3.htm” NAME=”principal&gt;
&lt;/FRAMESET&gt;
&lt;/FRAMESET&gt;
&lt;/HTML&gt;&nbsp;FRAMESET – Define a divisão da página em “quadros”. Cols = Colunas, Rows = Linhas...
FRAME SRC – As páginas que serão mostradas nos frames definidos.
NAME – O nome (identificação) de cada frame.
Nos links:
Toda vez que você quiser que um arquivo com link em 1.htm apareça em 2.htm, é necessário acrescentar o atributo
TARGET="conteudo" ao tag &lt;a href&gt;.
TARGET – Define em que frame será aberta a página.
Exemplo em 1.htm:
&lt;A HREF="pag1.htm" TARGET="direita"&gt;Página1&lt;/A&gt;
OBS.:
- Abrir página numa nova janela, livre de frames: &lt;A HREF="pag1.htm" TARGET="_blank"&gt;Página1&lt;/A&gt;
- Para frames em linhas deve-se usar frameset rows
- Ao invés de usar TARGET posso usar &lt;BASE TARGET=”direita”&gt; na parte HEAD da página
A tag &lt;FRAMESET&gt; pode vir acompanhada por FRAMEBORDER e BORDER, enquanto a tag &lt;FRAME SRC&gt;
pode vir acompanhada de FRAMEBORDER, BORDER, SCROLLING e NORESIZE.
FRAMEBORDER informa se o frame terá ou não borda, recebendo os valores de “yes” ou “no”.
BORDER especifica o tamanho da borda do frame, se este tiver borda.
SCROLLING define se o frame terá ou não barra de rolagem, podendo receber os valores de “yes”, “no” ou “auto”.
NORESIZE impossibilita o usuário de mudar o tamanho da área especificada do frame.
Deixando a divisão em Frames invisível
&lt;frameset frameborder=”no” border=”0”...
&lt;frame src=”pagina.htm” scrolling=”no” frameborder=”no” noresize&gt;
OBS.: É preciso ter cuidado com a utilização da opção scrolling=”no”.
MODELOS X FRAMES
Uma página web hoje é construída basicamente segundo dois conceitos. Ou utilizando uma página modelo ou
através de frames. A utilização de uma página modelo é o método mais comum. A maioria dos sites seguem esta
metodologia. A utilização de frames agiliza o carregamento das páginas, mas tem vários outros aspectos que não os
torna interessantes para construção de páginas, como por exemplo ao fazer um link externo para esta...