Tecnologias Web - HTML

•
ESTÁCIO

4
1
4
1
0
Renato Florencia
07/11/2012
Esta é uma pré-visualização de arquivo. Entre para ver o arquivo original
*
*
TECNOLOGIAS WEB
Aulas HTML
*
*
A linguagem HTML
Na Internet todos podem disseminar informações. Tanto pessoas "importantes", como qualquer cidadão comum, pois todos contam com canais de distribuição para expor suas idéias. 
Uma forma de se conseguir isso é criar e publicar páginas (home pages), que podem congregar diferentes tipos de arquivos: 
textos
imagens
sons
vídeos
*
*
A linguagem HTML
Para criar e publicar páginas é fundamental aprender algo da linguagem HTML que é simples e pode ser aprendida sem maiores dificuldades por usuários leigos, não sendo necessárias noções anteriores de programação.
Assim, HTML é uma linguagem utilizada para criar arquivos que podem ser visualizados na World Wide Web, o serviço mais popular na Internet, e que permite realizar conexões, os links, as quais possibilitam a navegação virtual.
*
*
W3C
A W3C ( World Wide Web Consortium ) é o órgão que tem a missão de padronizar a Web (linguagens, protocolos, etc). A W3C hoje recomenda a migração de HTML para XHTML. 
As especificações de XHTML ( HTML + XML ) foram desenvolvidas por W3C HTML Working Group.
*
*
Cor de Fundo
Para as páginas ficarem mais atraentes podemos também trocar as cores do fundo da tela.
É no comando <BODY> que se dará estas alterações, ele aceita os seguintes parâmetros:
BGCOLOR – determina a cor de fundo da tela.
TEXT – modifica a cor do texto.
LINK – especifica a cor do link.
ALINK - define a cor do link ativado.
VLINK – gera a cor do link visitado.
*
*
 As extensões  .HTM e  .HTML
As duas extensões identificam páginas para visualização na Internet e surgiram dos diferentes sistemas operacionais: a extensão HTML é característica do UNIX, enquanto que HTM é do WINDOWS. 
*
*
Tags
Na estrutura de documentos em HTML os elementos usados para determinar os comandos são chamados de tags. Cada tag possui 2 símbolos especiais: 
o sinal "<" ("menor que“)
o sinal ">" ("maior que"). 
O comando é digitado entre os símbolos < e >, sendo sempre uma palavra em inglês.
Ex.: 
<head> 
<body>
*
*
Tags
O comando pode ser independente (ou solitário, ou solto), ou pode precisar de encerramento.
Exemplo de elemento solitário: 
<br> (quebra de linha)
Exemplo de elemento que deve ser encerrado: 
<center> ... </center> (texto centralizado)
Notar que o comando que fecha é o mesmo que abre, mas tem uma barra extra.
*
*
Cor de Fundo - Exemplo
*
*
Formatando Textos
Existe uma série de efeitos que sejam aplicados no texto por meios dos comandos de formatação de caracteres:
<B> ...........</B> - Destaca o texto em Negrito.
<I> ............</I> - Exibe o texto em fonte Itálica.
<TT>........</TT> - Formata o texto com fonte de tamanho fixo (máquina de escrever). É útil quando necessário alinhar os textos de uma coluna.
<U>.........</U> - Formata o texto como sublinhado.
<SUB>.....</SUB> - Formata o texto como subscrito.
<SUP>.....</SUP> - Formata o texto como sobrescrito.
*
*
Formatando Textos - Exemplo
*
*
Deslocamento do Texto
O comando <MARQUEE> cria um efeito de movimento no texto. Ele possui alguns parâmetros que influenciam no seu efeito final.
BGCOLOR – altera a cor de fundo do MARQUEE.
BEHAVIOR – define como o texto vai se mover na tela Ele permite os seguintes valores:
SCROLL – o texto entra da direita para esquerda ( default). Não para.
SLIDE - o texto entra da direita para esquerda e para no canto esquerdo. Para.
ALTERNATE – o texto bate e volta.
*
*
Deslocamento do Texto - Exemplo
*
*
MARQEE DIRECTION
Especifica a direção em que o texto irá se mover. Permite os valores:
<MARQUEE DIRECTION=LEFT> - o texto vai da direita para esquerda (default).
<MARQUEE DIRECTION=RIGHT> - o texto vai da esquerda para direita.
LOOP – Define o número de movimentos do texto. O valor INFINITE executa o movimento infinitamente.
<MARQUEE LOOP=5> - o texto vai se mover 5 vezes da direita para esquerda e depois irá sumir
*
*
MARQEE DIRECTION - Exemplo
O texto se desloca da direita para esquerda.
O texto irá passar apenas 2 vezes.
O texto se desloca da esquerda para direita.
*
*
Texto Pré Formatado
Permite que o texto seja exibido em tela na maneira exata que foi digitado, respeitando espaços criados pela barra de espaços do teclado e as entradas de parágrafos feitas através da tecla ENTER.
 <PRE>.....</PRE>
*
*
Texto Pré Formatado - Exemplo
*
*
Listas
As listas criam uma estrutura padronizada para as informações que tornam as páginas mais atraentes. Existem vários tipos de listas, porém as mais usadas são:
Listas Não Ordenadas - <UL>....</UL> este comando define uma lista não ordenada. Junto com ele será usado o comando <LI>.
Caso queira mudar a marcação de uma lista não ordenada, posso usar o comando <UL TYPE= :
<UL TYPE= DISC> (default)
<UL TYPE= SQUARE>
<UL TYPE= CIRCLE> 
*
*
Listas - Exemplo
*
*
Listas Ordenadas
<OL>……..</OL> - cria uma lista ordenada e junto com ele será usado o comando <LI>.
Caso queira mudar a marcação da lista ordenada, para Algarismo Romano podemos usar o comando:
<OL TYPE= I - Algarismo Romano Maiúsculo
<OL TYPE= i – Algarismo Romano minúsculo
<OL TYPE= Start = número – começando a partir do número que escolher.
*
*
Listas Ordenadas - Exemplo
*
*
Links
LINK nada mais é que a ligação de uma página com outra na internet.
Para fazer esta ligação precisamos usar o comando <A>.
Os lados de uma ligação de hipertexto são definidos da seguinte maneira : o lado de onde ela parte, é chamado de link e o lado de chegada chama-se âncora.
<A> ..... </A> Este comando é usado para criar uma ligação de hipertexto (textos ligados entre si). Seus parâmetros são HREF e NAME.
*
*
Links - Sintaxe do comando
<A HREF= “URL” >TEXTO</A>
<A HREF=”URL”> - âncora de partida, que se refere ao hipertexto a ser localizado por meio do endereço fornecido pela URL.
TEXTO - Aparece na página em destaque (sublinhado e na cor azul), indica que é um link. Quando o usuário der um clique com o ponteiro do mouse sobre ele, imediatamente será levada a página de destino (do endereço informado).
</A> - Finaliza o comando. Caso esqueça-se de fechar o link vai se estender por toda o texto.
*
*
Links Relativos
São links que tem relação direta com o diretório raiz da Home Page, quer dizer que os arquivos estão na mesma pasta. E para acessá-lo só é preciso informar o nome do arquivo.
<A HREF=animacoes_ancora.html> 
*
*
Links Absolutos
Este tipo de link permite acesso a qualquer página ou arquivo existente em outro diretório ou na internet, que pode estar em qualquer parte do planeta.
Para este tipo de acesso é preciso uma URL absoluta, que não dependa da página atual.
<A HREF=”http://www.xxxxxx.com.br>
*
*
Links para dentro da própria página
Quando um documento tem tópicos importantes, ou é muito extenso dentro da mesma página, é preciso criar uma âncora para acessar esses trechos. 
A sintaxe do link de referência para um trecho de um documento deve conter o caractere especial # (tralha), seguido do endereço (URL) da âncora de chegada.
<A HREF=”TOPO”>VOLTAR PARA O INÍCIO</A>
*
*
Âncora de Chegada
Name – Quando a âncora vier acompanhada deste parâmetro, na verdade ela está indicando o ponto de chegada (URL que foi referenciada no link), que é o endereço de um trecho (tópico) de um documento.
Sintaxe do documento:
<A NAME=”URL”>..............</A>
<A NAME=”URL”> - Âncora de chegada. Colocada em um lugar estratégico no texto, para indicar onde o assunto inicia. É conhecida pelo link por ter a mesma URL. Será conhecida imediatamente pelo sistema e apresentada pelo browser.
Exemplo de âncora de chegada: 
<A NAME=”TOPO”>
*
*
Link - Exemplo
*
*
Link especial: “mailto”
Existe um tipo de link chamado de "mailto:". Se, quando o link for definido, o protocolo utilizado for "mailto:" ao invés de "http://", o link abrirá uma janela especial para que se possa enviar um e-mail (correio eletrônico) para o endereço específico.
*
*
Link especial: “mailto” - Exemplo
*
*
Imagem
<IMG SRC=”gato.gif”> - a figura
está no mesmo diretório.
<IMG SRC=”imagens/gato.gif”> - a figura está dentro da pasta imagens.
<IMG SRC=”http://www.imagens.com.br/imagens/gato.gif”> - a figura está na internet no diretório imagens.
Os formatos aceitos são:
BMP – não é aceito por ser muito grande, leva muito tempo para carregar.
GIF – É o mais aceito pela maioria dos browsers.
JPG – Tem boa qualidade de imagem, seu tamanho é menor que o gif, por isso vem tomando seu lugar.
JPEG – Não é aceito pela maioria dos browsers e seu uso pode prejudicar o resultado final da página.
*
*
Imagem - Exemplo
*
*
Parâmetros de Imagem - BORDER
Border – altera a largura da borda da imagem. Seus valores são expressos em pixels. Caso você precise retirar a borda, use o valor zero.
BoRder=10 
Border=0
*
*
BORDER - Exemplo
BORDA=0
BORDA=5
BORDA=20
BORDA=50
*
*
Parâmetros de Imagem 
(WIDTH e HEIGHT)
WIDTH – Permite alterar a largura da Imagem, seus valores são expressos em pixels ou porcentagem.
HEIGHT - Permite alterar a altura da Imagem, seus valores são expressos em pixels ou porcentagem.
*
*
WIDTH e HEIGHT - Exemplo
*
*
Parâmetros de Imagem
(HSPACE - VSPACE - ALT)
HSPACE – Cria um espaço em branco nas laterais (esquerda e direita) da imagem, evitando assim que o texto fique encostado na figura, seus valores podem ser em pixels ou porcentagem.
 
VSPACE - Cria um espaço em branco na parte superior e inferior da imagem, evitando assim que o texto fique encostado na figura, seus valores podem ser em pixels ou porcentagem.
 
ALT – Usado para inserir um texto, que aparece quando o cursor do mouse aponta a figura. Deve vir entre aspas (“ “). 
*
*
(HSPACE - VSPACE – ALT) - Exemplo
*
*
ALIGN
Permite o alinhamento entre a imagem e o texto da página. 
LEFT – Alinha a imagem à esquerda do texto.
RIGHT – Alinha a imagem à direita do texto.
TOP – Alinha a parte superior da imagem com a linha do texto.
MIDDLE – Alinha o meio da imagem com a linha do texto.
BOTTOM – Alinha a parte inferior da imagem coma linha do texto
*
*
ALIGN - Exemplo
*
*
ALIGN - TOP/MIDDLE/BOTTOM
*
*
Imagem no Fundo da Página
*
*
Imagens com “Links”
Para usar uma imagem como link, é só definir o comando para criar imagens entre as tags de início e fim de criação de link.
*
*
Tabela
Uma tabela é formada por um conjunto de linhas e colunas, e o encontro delas é denominado célula.
Para se definir uma tabela utilizam a Tag <TABLE>.....</TABLE>, as quais delimitam o início e o fim de uma tabela.Este comando tem como padrão (default) criar uma tabela sem bordas. 
*
*
Tabela
<TABLE> Indica o início da tabela
<TR> Indica o início de uma nova linha na tabela
<TD> Indica uma coluna na tabela
</TD> Indica o final daquela coluna na tabela
</TR> Indica o final da linha na tabela
</TABLE> Indica o final da Tabela
<TH>....</TH>- Comando que define o conteúdo da célula como título. O texto será formatado em Negrito e Centralizado.
*
*
Tabela - Exemplo
*
*
Tabela - Parâmetros
<TABLE BORDER=20> 
Borda de fora fica mais grossa
<TABLE BORDERCOLOR=RED> 
Altera a cor da borda
Determina o alinhamento da tabela na Página
<TABLE ALIGN = LEFT >
<TABLE ALIGN = CENTER >
<TABLE ALIGN = RIGHT >
*
*
Tabela - Parâmetros
<TABLE WIDTH=> - Define a LARGURA da tabela em relação a largura da tela. Seus valores podem ser expressos em pixels ou em porcentagem da tela.
<TABLE HEIGHT=> - Define a ALTURA da tabela. Seus valores podem ser expressos em pixels ou em porcentagem da tela.
<TABLE BGCOLOR=BLUE> - Determina a cor de fundo na tabela.
<TABLE BACKGROUND=”NOME DA IMAGEM.EXTENSÃO”> - Insere uma imagem como fundo na tabela.
*
*
Tabela – Parâmetros - Exemplo
*
*
Tabela – Parâmetros
<TABLE CELLSPACING=> - Cria o espaço entre as células, seu valor é expresso em pixels
*
*
Tabela – Parâmetros
<TABLE CELLPADDING=> - Cria as margens dentro das células entre a borda e seu conteúdo.
*
*
Tabelas - Mesclando Células
Existem casos de layout da página onde algumas células de uma tabela precisam ser unidas, outras quebradas ao meio. Para isso utiliza-se o atributo SPAN, sendo que para unir linhas utiliza-se ROWSPAN e para unir colunas utiliza-se COLSPAN
*
*
ROWSPAN – Exemplo
*
*
COLSPAN - Exemplo
*
*
Atributo: RULES
Indicam quais linhas internas a tabela deve apresentar. 
"ROWS (somente as linhas horizontais)”
"COLS (somente as linhas verticais)”
"NONE (nenhuma)" e "ALL (todas)"
Exemplo:
<table border bgcolor="yellow" rules="rows">
*
*
Atributo: FRAME
Indica quais bordas externas a tabela deve apresentar. 
VOID (nenhuma)
ABOVE (topo da tabela)
BELOW (base da tabela)
HSIDES (topo e base da tabela)
LHS (lado direito da tabela)
VSIDES (esquerda e direita da tabela)
BOX (todas)
Exemplo:
<table border bgcolor="yellow" frame="below">
*
*
Atributos FRAME e RULES- Exemplo
*
*
Formulário
Formulários são de grande utilidade para a Web, pois permite a interatividade entre o usuário, a pessoa que visualiza as páginas e o Servidor Web. 
Assim, através da Web, se pode ler e gravar informações em Banco de Dados, gerando enormes possibilidades de uso para a Internet, como por exemplo, a de um serviço de venda. 
Formulários também podem ser gerados para a navegação entre páginas e Sites na Web.
*
*
Formulário
<FORM>.......................</FORM>
<html>
	<head>
		<title>Formulário</title>
	</head>
	<body>
		<form>
		 Aqui irão entrar os comandos do Formulário
		</form>
	</body>
</html>
*
*
Formulários - Atributos
<FORM NAME=”NOME DO FORMULÁRIO” METHOD=”VALOR ACTION=”TRATADOR DO FORMULÁRIO>
NAME – Nome do formulário usado para validação de dados.
METHOD – Método que define como os dados serão transmitidos para o programa que irá processá-lo. Os métodos têm os valores:
GET-Indica como os dados serão passados pelo script.
POST - Envia os dados para entrada padrão do sistema operacional.
ACTION – Indica o endereço do programa que receberá os dados do formulário.
*
*
Marcadores Relativos ao campo de um Formulário
 <INPUT TYPE=”TIPO” NAME=”NOME” VALUE=”VALOR” SIZE=”TAMANHO EM PIXELS” MAXLENGTH=”TAMANHO MÁXIMO EM PIXELS”>
INPUT: Cria um campo de entrada de dados.
TYPE: Tipo de elemento a ser inserido no formulário.
NAME: Nome do elemento.
VALUE: Valor que pode ser pré definido para o campo.
MAXLENGTH: Comprimento máximo de caracteres do nome a ser digitado.
CHECKED: Em caso de caixa de checagem, pré-define como checada.
SIZE: Tamanho do campo.
*
*
Caixa de Texto
<INPUT TYPE=”TEXT” NAME=... VALUE=... SIZE=... MAXLENGTH=...>
O valor TEXT (texto) no atributo TYPE indica que o campo será de texto, ou seja, um campo onde o usuário poderá entrar com dados.
*
*
Caixa de Texto - Exemplo
*
*
Senha
<INPUT TYPE=”PASSWORD” NAME=... VALUE=... SIZE=... MAXLENGTH=...>
Para o valor PASSWORD (senha) no atributo TYPE aplicam-se todos os atributos do tipo TEXT exceto que todas as letras digitadas aparecem como um asterístico “*”.
*
*
Senha – Exemplo
*
*
Caixa De Texto Com Várias Linhas
<TEXTAREA NAME=”NOME” ROWS=”NÚMERO DE LINHAS” COLS=”NÚMERO DE COLUNAS”>.................</TEXTAREA>
O marcador TEXTAREA (área de texto), permite definir um campo de texto9 com várias linhas.
ROWS: Define o número de linhas da caixa de texto.
COLS: Define quantos caracteres (colunas) cada linha possui.
NAME: Define o nome da caixa de texto.
*
*
TextArea - Exemplo
*
*
Caixa de Combinação (Combo Box)
<SELECT NAME=”NOME” SIZE=”QUANTIDADE DE OPÇÕES VISÍVEIS”>
	<OPTION VALUE=”VALOR”>TEXTO A APARECER</OPTION>
	<OPTION VALUE=”VALOR”>TEXTO A APARECER</OPTION>
</SELECT>
O marcador SELECT permite a criação de uma lista de opções a serem escolhidas pelo usuário.
NAME: Nome da lista de opções.
SIZE: Define o número de opções a serem exibidas simultaneamente na tela. Se o valor omitido ou igual a 1, é exibida uma opção por vez.
OPTION: Define cada opção a ser exibida pela lista.
VALUE: Determina o valor de cada opção.
*
*
Caixa de Combinação - Exemplo
*
*
Caixa de Listagem (List Box)
Permite que na tela apareça uma lista com mais de uma opção, embora
o usuário possa escolher somente uma.
A criação da caixa de listagem é idêntica a caixa de combinação, com exceção do atributo SIZE que deve ter o valor maior que um, determinando o número de opções a aparecerem em tela.
Então mude o size para size=”6”, e veja que agora aparecerão as 6 opções para que seja selecionada apenas 1.
*
*
Caixa de Listagem - Exemplo
*
*
Caixa de Listagem - Múltipla Seleção
Permite que na tela apareça uma lista com mais de uma opção, podendo o usuário escolher mais de uma.
A criação de caixa de listagem com múltipla seleção é idêntica à criação de caixa de listagem, com exceção do atributo MULTIPLE que deve ser acrescido.
Acrescente o atributo MULTIPLE no comando SELECT:
<SELECT NAME="INTERESSE" SIZE="6" MULTIPLE>
*
*
Caixa de Listagem – Exemplo
*
*
Caixa de Checagem
<INPUT TYPE=”CHECKBOX” NAME=”NOME DA CAIXA DE CHECAGEM” VALUE=”VALOR DO CAMPO” CHECKED=”CAIXA SELECIONADA”>
NAME: Nome da caixa de checagem.
VALUE: Determina o valor do campo, que será passado ao programa interpretador do formulário.
CHECKED: Atributo opcional que pode ser utilizado quando se deseja que a opção já apareça selecionada na página.
*
*
Caixa de Checagem - Exemplo
*
*
Botão Escolha
O valor RADIO no atributo TYPE define um botão. Na prática os botões de escolha , parecem em grupos e podem permitir que apenas uma opção seja escolhida dentre as existentes (exclusão mútua).
<INPUT TYPE=RADIO NAME= “NOME DO BOTÃO” VALUE=”VALOR DO CAMPO” CHECKED=”OPÇÃO APAREÇA SELECIONADA”>
NAME: Define o nome do botão de escolha. No caso de botões de escolha com exclusão mútua, cada botão do grupo deverá utilizar um mesmo nome.
VALUE: Contém o valor do campo, que será passado ao grupo interpretador do formulário.
CHECKED: Atributo opcional que pode ser utilizado quando se deseja que a opção já apareça selecionada na página.
*
*
Botão de Escolha – Exemplo
*
*
Botão Limpa / Cancela
<INPUT TYPE=”RESET” VALUE=”TEXTO QUE APARECE NO BOTÃO”>
O valor RESET no atributo TYPE define um botão que limpa todos os campos, devolvendo os mesmos valores de quando a página foi carregada.
No atributo VALUE, pode-se definir o que estará escrito no botão. Caso nenhum valor seja definido, aparecerá somente “RESET”.
*
*
Botão Limpa/Cancela - Exemplo
*
*
Botão Submit
<INPUT TYPE=”SUBMIT NAME”NOME “ RESET” VALUE=”TEXTO QUE APARECE NO BOTÃO”>
O valor SUBMIT no atributo TYPE define um botão que aciona o envio das informações preenchidas no formulário ao programa interpretador.
No atributo VALUE, defini o que estará escrito no botão. Caso nenhum valor seja definido, aparecerá somente “SUBMIT”.
*
*
Botão Submit - Exemplo
*
*
Frames
O FRAME divide a janela do BROWSER em várias áreas, cada uma podendo exibir uma página diferente.
A utilização de FRAMES na linguagem HTML é feita através do par de marcadores:
<FRAMESET>......</FRAMESET>
A página onde o FRAMESET é codificado não leva o marcador BODY e tem a finalidade de definir o layout apresentado pelos frames.
Em um FRAMESET os atributos ROWS e COLS definem, respectivamente, o número de subespaços horizontais e verticais que podem ser utilizados para criar um efeito de grade.
*
*
Frames
Se o atributo ROWS não é utilizado cada coluna passa a tomar todo o comprimento da página ao passo que o atributo COLS não for utilizado, cada linha estende-se ocupando a largura total da página.
Se nem o atributo ROWS nem o atributo COLS forem setados, o frame ocupará exatamente todo o tamanho da página.
FRAMES são criados da esquerda para a direita, em se tratando de colunas, e de cima para baixo em se tratando de linhas. Quando os dois atributos são especificados, repartições são criadas da esquerda para a direita na principal linha, da esquerda para a direita na segunda linha, etc.
*
*
Principais atributos do marcador <FRAMESET>
<FRAMESET ROWS=”área”>
Especifica a disposição dos frames horizontais. Os valores são separados por vírgulas e podem ser dados em pixel, percentagem ou comprimentos relativos. O valor padrão é 100%, representando uma linha.
<FRAMESET COLS= “valor”>
Especifica a disposição dos frames verticais. Os valores são separados por vírgulas e podem ser dados em pixel, percentagem ou comprimentos relativos. O valor padrão é 100%, representando uma coluna.
<FRAMESET framespacing="valor">
Especifica o espaçamento entre frames. O valor é dado em pixels e depende do browser utilizado. O valor possibilita que não haja espaço entre os frames. 
*
*
FRAMESET – Exemplo
*
*
O marcador <FRAME>
O marcador <FRAME> não necessita ser fechado pelo marcador </FRAME> e deve ser utilizado dentro de eliminações do marcador <FRAMESET>. 
O número de marcadores <FRAME> vai depender do número de linhas e colunas especificado pelo FRAMESET.
Em um FRAMESET que defina 2 colunas, serão necessários dois marcadores <FRAME>, cada um apontando para uma página a ser exibida na área dividida da janela. 
*
*
Principais atributos do marcador <FRAME>
<FRAME SRC= “página_destino">
Especifica a página a ser exibida pelo frame
Exemplo: 
<frame src= “topicos.html">
*
*
Principais atributos do marcador <FRAME>
<FRAME NAME="nome_do_frame">
Especifica o nome do frame. Este atributo tem grande importância pelo fato de toda a navegação entre frames está baseada no nome de cada frame. 
Exemplo: 
<frame src="topicos.htm” name="principal">
*
*
Principais atributos do marcador <FRAME>
<FRAME NORESIZE>
Quando utilizado, este atributo booleano não permite que na janela do navegador a área do frame seja redimensionada.
Exemplo: 
<frame src="topicos.htm" NORESIZE>
*
*
Principais atributos do marcador <FRAME>
<FRAME SCROLLlNG="valor">
Determina a presença ou ausência de barras de rolagem junto aquela área do FRAMESET. Os valores podem ser: auto: oferece barras de rol agem caso sejam necessárias. Valor padrão: 
Yes: sempre oferece barras de rol agem para este frame. 
No: não oferece barras de rolagem para este frame, mesmo que sejam necessárias. 
 Exemplo: 
<frame src="topicos.htm" SCROLLING="auto"> 
*
*
Principais atributos do marcador <FRAME>
<FRAME FRAMEBORDER="valor">
Desenha um separador entre o frame e cada frame adjunto. Os valores podem ser: 
0 (zero) ou "no": não desenha um separador entre este frame e cada frame adjunto
1 ou"Yes": desenha um separador entre o frame e cada frame adjunto. Valor padrão
Exemplo: 
<frame src="topicos.htm" FRAMEBORDER="0"> 
*
*
Principais atributos do marcador <FRAME>
<FRAME MARGINWIDTH="valor_em_pixels"> 
Especifica a quantidade de espaço a ser deixado entre o conteúdo do frame e suas margens esquerdas e direitas o valor precisa ser maior ou igual a 1 pixel e o padrão depende do browser utilizado.
Exemplo:
<frame src="topicos.htm”MARGINWIDTH="1"> 
*
*
Principais atributos do marcador <FRAME>
<FRAME MARGINHEIGHT="valor_em_pixels"> 
Especifica a quantidade de espaço a ser deixado entre o conteúdo do frame e suas margens superior e inferior o valor precisa ser maior ou igual a 1 pixel e o padrão depende do browser utilizado.
Exemplo:
<frame src="topicos.htm”MARGINHEIGHT="3"> 
*
*
Browsers que não reconhecem FRAMES
O marcador <NOFRAMES> determina qual conteúdo será exibido em caso de browsers que não suporteI framesets ou que não estejam configurados para exibi-los. 
É utilizado dentro das delimitações do marcador <FRAMESET>. 
*
*
NOFRAMES
Exemplo:
<html> 
<head> 
 <title>frames</title> 
</head> 	 
 
<frameset rows="30%,40%, 30%"> 
 <frame src="p1.htm"> 
 <frame src="p2.htm"> 
 <frame src="p3.htm"> 
 <nofranes> 
 
 <p><a href="noframes.htm">clique aqui </a>para ver urna versão do documento que não utiliza frames</p> 
 </noframes> 
</frameset> 
</html> 
*
*
Frames aninhados
FRAMESETS podem encontrar-se aninhados em qualquer nível. 
O exemplo a seguir traz um FRAMESET que divide o espaço disponível em três colunas iguais. No espaço reservado da segunda coluna a área é dividida
em duas linhas de alturas diferentes.
*
*
Frames aninhados - Exemplo