OPERAÇÃODESOFTWAREEAPLICATIVOS
ProfessorLuizTadeu
1
SUMÁRIO
1‐INTRODUÇÃOAWEB...............................................................................................................................................................4 1.1‐OQUEÉAWORLDWIDEWEB?..................................................................................................................................4 1.2‐COMOFUNCIONAAWWW?.........................................................................................................................................4 1.3‐SERVIDORESWEB.............................................................................................................................................................4 1.4‐BROWSERS...........................................................................................................................................................................4 1.5‐PADRÕESDAWEB............................................................................................................................................................5 1.6‐OQUEÉOHTML?..............................................................................................................................................................5 1.8‐EXTENSÃO“.HTM“OU“.HTML”?..............................................................................................................................6 1.9‐OQUEÉLINGUAGEMDEMARCAÇÃO?....................................................................................................................6 2.ELEMENTOSEATRIBUTOS...................................................................................................................................................7 2.1‐ELEMENTOS........................................................................................................................................................................7 2.2–ATRIBUTOSDASTAGS...................................................................................................................................................8 3.ESTRUTURADOHTML..........................................................................................................................................................10 3.1‐DOCTYPEDECLARATION............................................................................................................................................10 3.2‐ELEMENTOHTML..........................................................................................................................................................10 3.3‐ELEMENTOHEAD........................................................................................................................................................11 3.4‐ELEMENTOTITLE..........................................................................................................................................................12 3.5‐ELEMENTOMETA..........................................................................................................................................................12 3.6‐ELEMENTOBODY...........................................................................................................................................................13 4.TAGSHTMLBÁSICAS............................................................................................................................................................14 4.1‐CABEÇALHOS.................................................................................................................................................................14 4.2‐PARÁGRAFOS.................................................................................................................................................................15 4.3‐QUEBRASDELINHA....................................................................................................................................................15 4.4‐COMENTÁRIOSEMHTML........................................................................................................................................16 4.5‐TAGSHTMLBÁSICAS..................................................................................................................................................17 5–ELEMENTOSESEUSATRIBUTOSEVALORES.........................................................................................................18 5.1‐ELEMENTO<META>..................................................................................................................................................18 5.2‐ELEMENTO<BODY>...................................................................................................................................................19 ProfessorLuizTadeu
2
5.3‐ATRIBUTO"align"........................................................................................................................................................20 6‐FORMATAÇÃODETEXTO.................................................................................................................................................21 7.LIGAÇÕESDEHIPERTEXTO("LINKS").........................................................................................................................22 7.1‐LINKSINTERNOS..........................................................................................................................................................22 7.2‐LINKSLOCAISOURELATIVOS................................................................................................................................23 7.3‐LINKSEXTERNOS.........................................................................................................................................................24 7.4–ATRIBUTO“TARGET”................................................................................................................................................24 8.LISTASDOHTML.....................................................................................................................................................................26 8.1‐LISTAS...............................................................................................................................................................................26 8.2‐LISTASNUMERADAS..................................................................................................................................................26 8.3‐listanãonumerada......................................................................................................................................................28 8.4‐ListasHTMLDefinição...............................................................................................................................................29 9.TABELAS....................................................................................................................................................................................31 9.1.TABELASIMPLES...........................................................................................................................................................31 9.2.MODIFICANDOAAPARÊNCIADATABELA........................................................................................................32 9.3.ATRIBUTOSDELINHASECÉLULAS......................................................................................................................33 9.4.MESCLANDOCÉLULAS................................................................................................................................................33 10.FRAMES....................................................................................................................................................................................35 10.1.CRIANDOFRAMES......................................................................................................................................................35 11.REFERÊNCIAS.......................................................................................................................................................................38 ProfessorLuizTadeu
3
1‐INTRODUÇÃOAWEB
1.1‐OQUEÉAWORLDWIDEWEB?
A World Wide Web (WWW), conhecida como Web, é um sistema de
informação que une dados de vários serviços de internet. Enquanto a internet
refere-se aos componentes físicos da rede global, a Web refere-se ao corpo
da informação compartilhada usando esta rede.
1.2‐COMOFUNCIONAAWWW?
A informação na Web é armazenada em documentos chamados
páginas Web.
As páginas Web são arquivos armazenados em computadores
chamados servidores Web.
Os computadores que leem páginas Web são chamados clientes Web.
Clientes Web veem as páginas com um programa chamado navegador Web.
1.3‐SERVIDORESWEB
Os servidores Web têm um trabalho integral na INTERNET,
aguardando sem descanso solicitações dos browsers Web. Que tipo de
solicitações? De páginas web, imagens, sons, ou até mesmo filmes.
Quando um servidor recebe uma solicitação de algum desses recursos,
ele o encontra e então o envia para o browser
1.4‐BROWSERS
ProfessorLuizTadeu
4
São programas que você usa para acessar, visualizar e interagir com
páginas Web. A Web permite que browsers de diferentes plataformas
interpretem, formatem e exibam páginas Web.
Exemplos de browsers são:
Internet Explorer;
Firefox;
Chrome;
Opera;
Safari.
1.5‐PADRÕESDAWEB
Os padrões da Web não são feitos pela Netscape ou Microsoft.
O corpo regulador da Web é o W3C.
W3C significa World Wide Web Consortium.
O W3C junta as especificações para os padrões da Web.
Os padrões da Web mais essenciais são HTML
1.6‐OQUEÉOHTML?
HTML (Hypertext Markup Language – Linguagem de Formatação de
Hipertexto).
HTML não é uma linguagem de programação, é uma linguagem de
marcação.
Resumindo em uma frase: o HTML é uma linguagem para publicação
de conteúdo (texto, imagem, vídeo, áudio e etc.) na Web.
O HTML é baseado no conceito de Hipertexto.
Hipertexto são conjuntos de elementos.
ProfessorLuizTadeu
5
Elementos HTML são definidos usando tags (etiquetas) HTML.
Para distribuir informação de uma maneira global, é necessário haver
uma linguagem que seja entendida universalmente por diversos meios de
acesso. O HTML se propõe a ser esta linguagem.
1.8‐EXTENSÃO“.HTM“OU“.HTML”?
Quando você salva um arquivo HTML, você pode usar tanto a extensão
“.htm” quanto “.html”.
1.9‐OQUEÉLINGUAGEMDEMARCAÇÃO?
Uma linguagem de marcação é a linguagem usada para formatar
páginas Web com texto e informações separadamente. Isto assegura que as
páginas Web serão acessíveis de qualquer parte do mundo usando qualquer
tipo de browser.
ProfessorLuizTadeu
6
2.ELEMENTOSEATRIBUTOS
2.1‐ELEMENTOS
Um elemento é uma estrutura semântica, composta
abertura, conteúdo e tag de fechamento.
de tag de
Os documentos HTML são simples arquivos de texto que contêm "tags
de marcação" .
Essas etiquetas definem os elementos da linguagem HTML e os seus
conteúdos.
A lista seguinte indica algumas de suas características:
• As "tags de marcação" do HTML são usadas para definir os
elementos.
• As tags HTML escrevem-se utilizando os caracteres < e > ,
entre eles o nome do elemento e os seus atributos.
A lista seguinte indica algumas de suas características:
• As "tags de marcação" do HTML são usadas para definir os
elementos.
• As tags HTML escrevem-se utilizando os caracteres < e > ,
entre eles o nome do elemento e os seus atributos.
• A primeira tag do par é a tag de início (ou de abertura) e a
segunda dopar é a tag de fim (ou de fechamento).
• Tudo o que se encontrar entre as tags de início e de fim fazem
parte do conteúdo do elemento
Em HTML as Tags devem ser escritas com letra pequena.
• A primeira tag do par é a tag de início (ou de abertura) e a
segunda do par é a tag de fim (ou de fechamento).
• Tudo o que se encontrar entre as tags de início e de fim fazem
parte do conteúdo do elemento
ProfessorLuizTadeu
7
O fragmento apresentado a seguir é um elemento da linguagem HTML:
<b> Este texto está em negrito</b>
Repare nos aspectos seguintes deste fragmento:
 O elemento começa com a Tag de início (ou abertura): <b>
 O conteúdo do elemento <b> é apenas texto ("Este texto está em
negrito")
 O elemento termina com a Tag de fim (ou de fecho): </b>
O propósito da tag <b> é colocar o conteúdo do elemento HTML em
negrito.
2.2–ATRIBUTOSDASTAGS
Tag é um código usado para marcar o início e, onde for requerido, o fim
de um elemento HTML. Há, como exposto acima, tags de abertura e de
fechamento.
Uma tag de abertura é representada por sinal de menor ( < ), um nome
de elemento HTML , e um sinal de maior ( > ) (ex. <p>) e deve ser colocada
imediatamente antes do início do conteúdo do elemento.
Uma tag de fechamento se diferencia de uma tag de abertura apenas
por uma barra ( / ) antes do nome do elemento (ex. </p>) e deve ser
colocada imediatamente após o fim do conteúdo do elemento
Uma tag de fechamento se diferencia de uma tag de abertura apenas
por uma barra ( / ) antes do nome do elemento (ex. </p>) e deve ser
colocada imediatamente após o fim do conteúdo do elemento
Os Atributos servem para definir uma propriedade de um elemento
HTML. Os atributos HTML devem ser colocados sempre na tag de abertura ,
logo após o nome do elemento, precedido de um espaço e é composto de
ProfessorLuizTadeu
8
um nome de atributo, um sinal de igual (=) e um valor de atributo , cercado
por aspas duplas (").
ProfessorLuizTadeu
9
3.ESTRUTURADOHTML
3.1‐DOCTYPEDECLARATION
O primeiro elemento a aparecer em qualquer documento HTML deverá
ser o DOCTYPE. Este indica ao browser qual a versão de HTML que está a
ser utilizada e destaca-se dos restantes por aparecer em maiúsculas. O
DOCTYPE contém um argumento fundamental, que é aquele
em que se faz a especificação do DTD, Document Type Definition.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
3.2‐ELEMENTOHTML
Os elementos <html> e </html> delimitam o documento HTML. Alguns
browsers esperam encontrá-los para identificarem o documento como HTML.
ProfessorLuizTadeu
10
3.3‐ELEMENTOHEAD
Os elementos <head> e </head> demarcam a zona do cabeçalho que
vai conter informação acerca do documento.
Os elementos dentro do elemento head não deveriam ser exibidos por
uma navegador.
De acordo com o padrão da HTML, somente umas poucas tags são
legais dentro da seção head. São elas: <base>, <link>, <meta>, <title>,
<style>, e <script>.
Existem diversos campos que podem estar dentro do cabeçalho,
alguns exemplos: autor(es), titulo da página, palavras-chave, estilos a serem
utilizados etc..
ProfessorLuizTadeu
11
3.4‐ELEMENTOTITLE
O Elemento <title> e </title> contém o titulo da sua pagina que irá
aparecer na janela do browser.
< title> 1º Site </title>
3.5‐ELEMENTOMETA
Este elemento tem como objetivo inserir as propriedades do
documento, como por exemplo:
Autor
Data
ProfessorLuizTadeu
12
Exemplo:
< head>
< title >1º Site< /title >
< meta name="author" content=“Luiz Faria" />
< meta name="date" content=“23/07/2011" />
< /head >
3.6‐ELEMENTOBODY
Aqui está todo o texto, imagens, tabelas e outros elementos que são
aquilo que o utilizador vai ver na apresentação no browser da página de
Internet.
ProfessorLuizTadeu
13
4.TAGSHTMLBÁSICAS
As tags mais importantes na HTML são as tags que definem títulos,
parágrafos e quebras de linha.
4.1‐CABEÇALHOS
Os cabeçalhos são definidos com as tags <h1> a <h6> e podem ser
utilizadas para a demarcação dos títulos do seu texto. A <h1> define o
cabeçalho maior. A <h6> define o título menor.
<h1>Este é um título</h1>
<h2>Este é um título</h2>
<h3>Este é um título</h3>
<h4>Este é um título</h4>
<h5>Este é um título</h5>
<h6>Este é um título</h6>
A HTML automaticamente adiciona uma linha em branco extra antes e
após um titulo.
ProfessorLuizTadeu
14
4.2‐PARÁGRAFOS
Os parágrafos são definidos com a tag<p>.
<p>Este é um parágrafo</p>
<p>Este é outro parágrafo</p>
A HTML adiciona automaticamente uma linha em branco extra antes e
após um parágrafo.
4.3‐QUEBRASDELINHA
ProfessorLuizTadeu
15
A tag <br> é usada quando você quer terminar uma linha, mas não
quer começar um novo parágrafo. A tag <br> força a quebra de linha onde
quer que você a coloque.
<p>Este <br> é um para <br>grafo com quebras de linha</p>
A tag <br> é uma tag vazia. Ela não tem tag de fechamento.
Resultado do uso da tag <br>
4.4‐COMENTÁRIOSEMHTML
A tag de comentário é usada para inserir um comentário no código
fonte HTML. Um comentário será ignorado pelo navegador. Você pode usar
comentários para explicar o seu código, o que pode ajuda-lo quando você
editar o código fonte numa data posterior.
<!-- Este é um comentário -->
Observe que você necessita de um ponto de exclamação após a chave
de abertura, mas não antes da chave de fechamento.
ProfessorLuizTadeu
16
4.5‐TAGSHTMLBÁSICAS
ProfessorLuizTadeu
17
5–ELEMENTOSESEUSATRIBUTOSEVALORES
5.1‐ELEMENTO<META>
Durante alguns anos a utilização mais frequente da informação
fornecida pelo elemento <meta> foi a criação de índices para sites de busca.
Atualmente somente alguns buscadores ainda usam esta informação
para indexar páginas,e os de maior sucesso ignoram este elemento.
Alguns sistemas de busca (não muitos ) usam a informação contida
nos elemento meta para indexar as páginas. No fragmento de código
seguinte, o elemento <meta> contém uma breve descrição da página:
<meta name="description" content=“Apostila de OSA">
ProfessorLuizTadeu
18
Na parte do código abaixo o elemento <meta> contém uma palavraschave para indexar a página:
<meta name="keywords" content="HTML, CSS ">
ATRIBUTO - VALOR
DESCRIÇÃO
<meta
name="keywords"
content="HTML, CSS ">
Contém uma palavras-chave
indexar a página
para
<meta
name="description"
content=“Apostila de OSA">
Contém uma breve descrição da página
<meta
name="reply-to"
content=“professor_luiz@generation
web.com.br">
Especifica um endereço de e-mail para
entrar em contato com o responsável
pelo site.
<meta name="author" content=“LUIZ
TADEU ">
Por meio das meta tags, você também
pode declarar sua autoria sobre a
página, "assinando" seu código fonte
<meta http-equiv="refresh" content="
5; url=http://www.novosite.com/">
Redirecionando o visitante para outra
página
5.2‐ELEMENTO<BODY>
Elemento <body> engloba o corpo do seu documento HTML. Ele
possui muitos atributos que possibilitam modificar a aparência da sua página,
como cor de fundo ou das letras.
Todos os atributos a seguir tem seus valores definidos por cor e os
argumentos são o nome ou o número de uma cor:
ProfessorLuizTadeu
19
Bgcolor: define a cor de fundo de um documento
Text: a cor do texto
link: a cor dos links
alink: a cor dos links ativos atualmente (a página que você está visitando)
vlink: cor dos links já visitados
5.3‐ATRIBUTO"ALIGN"
Para o alinhamento dos elementos parágrafo, cabeçalho entre outros
utilizamos o atributo align.
ELEMENTO – ATRIBUTO VALOR
DESCRIÇÃO
<p align=“left”>
Alinha o texto à esquerda
<p align=”right”>
Alinha o texto à direita
<p align=”center”>
Alinha o texto centralizado
<p align=”justify”>
Alinha o texto justificado
ProfessorLuizTadeu
20
6‐FORMATAÇÃODETEXTO
A linguagem HTML define vários elementos para se formatar um texto,
como por exemplo, escrever em negrito, itálico, sublinhado, etc..
TAG
DESCRIÇÃO
<b>
Define seu texto em negrito
<big>
Define seu texto grande
<i>
Define seu texto em itálico
<small>
Define seu texto pequeno
<strong>
Define seu texto forte
<sub>
Define seu texto subscrito
<sup>
Define seu texto sobrescrito
<ins>
Define texto inserido
<del>
Define texto apagado
ProfessorLuizTadeu
21
7.LIGAÇÕESDEHIPERTEXTO("LINKS")
Queremos que uma página HTML possa fazer referência a outras
páginas html ou para qualquer outro tipo de arquivo que se encontrem outros
lugares da web.
Isso é feito de modo muito simples com o elemento a, como segue:
<a href= “http://www.generationweb.com.br”> Geração Web</a>
7.1‐LINKSINTERNOS
Links internos são aqueles que ligam uma seção de uma página com
uma outra seção da mesma página. Por exemplo, se eu quiser fazer uma
referência para a seção Hipertexto dessa nossa apostila, basta que eu
primeiro defina um nome para a seção Hipertexto e então adicione um link
pra ela.
Isso efeito da seguinte forma:
ProfessorLuizTadeu
22
1 - Vou até o início da seção Hipertexto e adiciono o seguinte código, ao
invés de simplesmente escrever o título da seção:
<a name ="Hipertexto">Hipertexto</a>
2 - Adiciono o link pra essa seção com o seguinte código, <a href
="#Hipertexto">Vá para a seção hipertexto</a> O atributo Name serve
apenas para dar um nome para uma posição de uma página html.
O valor de
name pode ser qualquer um (nesse caso eu
coloquei "Hipertexto"). Quando você fizer uma referência a um link interno
utilizando o atributo href, você precisa necessariamente adicionar o caractere
# (jogo da velha) antes do nome da sua seção - no nosso caso,
#Hipertexto - pois do contrário seu navegador tentará abri-lo como um link
local.
7.2‐LINKSLOCAISOURELATIVOS
Links locais são aqueles que referenciam um arquivo que esteja no
mesmo computador que a sua página.
Links locais não contém o http:// no início do endereço. Por exemplo,
se no meu documento html eu quiser fazer um link para o arquivo links.html
que está na mesma pasta do meu documento, não preciso digital o endereço
completo, mas apenas:
<a href =“ links.html ">Acesse os links!</a>
Esse tipo de argumento para o href também é chamado de links
relativos .Se você quiser linkar uma página que esteja do diretório
(pasta) superior da sua página, use dois pontos e uma barra antes do nome
do arquivo:
<a href="../links.html">Acesse os links!</a>
ProfessorLuizTadeu
23
A vantagem de você usar links relativos é que você pode mover todo o
seu site para um novo endereço na internet e não precisar reeditar todos os
links que apontam para páginas do seu próprio site.
7.3‐LINKSEXTERNOS
Links externos são aqueles que podem apontar para qualquer arquivo
disponível na internet, como por exemplo:
<a href="http://pt.wikipedia.org">Acesse a Wikipédia!</a>
Os links externos precisam necessariamente conter o prefixo http:// e o
endereço completo do arquivo.
7.4–ATRIBUTO“TARGET”
Um atributo interessante para o elemento <a href> é o Target , que
permite que o link seja aberto numa outra janela do seu navegador.
<a href=“http://pt.wikipedia.org” target="_blank“ >Acesse a
Wikipédia!</a>
O argumento do atributo target é o nome da janela do navegador que
abrirão link.
VALOR
“_blank”
ProfessorLuizTadeu
DESCRIÇÃO
Abre em uma nova aba
24
ProfessorLuizTadeu
25
8.LISTASDOHTML
8.1‐LISTAS
Uma lista é uma coleção de itens relacionados. Você usa uma lista
para organizar dados como uma sequência de passos ou itens em um grupo.
O HTML fornece quatro tipos:
Numeradas
Não Numeradas
Definição
Intercaladas
8.2‐LISTASNUMERADAS
Uma lista ordenada começa com a tag <ol>. Cada item da lista começa
com a tag <li>.
Atributo START pode indicar o início da numeração da lista os itens da
lista são marcados com números.
ProfessorLuizTadeu
26
Valores
ProfessorLuizTadeu
27
8.3‐LISTANÃONUMERADA
A lista não numerada é utilizada quando não há uma relação ou
estrutura especifica entre os itens da lista. Sua sintaxe <ul></ul> é exibida na
imagem acima. Este tipo de lista também pode ser chamada de nãoordenada.
ProfessorLuizTadeu
28
8.4‐LISTASHTMLDEFINIÇÃO
A lista é uma lista de itens, com uma descrição de cada item.
A tag <dl> define uma lista de definições.
A tag <dl> é usado em conjunto com <dt> (define o item na lista) e
<dd> (descreve o item na lista)
ProfessorLuizTadeu
29
ProfessorLuizTadeu
30
9.TABELAS
As tabelas são perfeitas para organizar e apresentar dados de forma
prática. É possível inserir texto, imagens ou links em tabelas, distribuindo
melhor as informações em uma página.
Este é um dos tópicos mais importantes, porque é imprescindível
dominar bem o uso de tabelas para criar um bom layout html. Praticamente
todas as páginas web utilizam recursos de tabela para diagramar seus
elementos. Porém a utilização de estilos (CSS) para posicionamento de
elementos na página está crescendo cada vez mais, e já existem páginas
com layout muito bom sem o uso de tabelas, usando apenas
CSS.
9.1.TABELASIMPLES
Como padrão uma tabela não possui bordas. Cada linha da tabela é
definida separadamente e é possível modificar a aparência da tabela,
utilizando alguns atributos que veremos mais adiante.
O número de TR define o número de linhas na tabela e o número de
TD (dentro da TAG TR) define o número de colunas da tabela.
Sintaxe:
<table>
<tr>
<th> cabeçalho da tabela</th>
<td> dados da tabela</td>
</tr>
</table>
ProfessorLuizTadeu
31
Onde:
⇒ <table></table>: TAGs de início e fim de tabela.
⇒ <tr></tr>: define cada linha da tabela;
⇒ <th></th>: define o cabeçalho da tabela. É uma célula da tabela;
⇒ <td></td>: define os dados da tabela. É uma célula na tabela;
⇒ Dados da Tabela: podem ser texto, imagens e links;
⇒ Cabeçalhos da Tabela: cabeçalhos com texto, imagens ou links.
9.2.MODIFICANDOAAPARÊNCIADATABELA
É possível definir alguns atributos para tabelas, como bordas,
alinhamento do conteúdo, espaçamento entre as células, espaçamento entre
os dados e a próxima célula, largura da tabela, etc.
Vejamos alguns desses atributos:
Sintaxe:
<table border=”n” width=”n%” height=”n%” cellspacing=”n”
cellpading=”n” bgcolor=”#rrggbb”>
</table>
Onde:
⇒ BORDER=”n”: espessura da borda em pixels.
⇒ WIDTH=”n%”: largura da tabela em relação ao browser, em pixels ou %;
⇒ HEIGHT=”n%”: altura da tabela em relação ao browser, em pixels ou %;
⇒ CELLSPACING=”n”: espaço entre uma célula e outra, em pixels;
⇒ CELLADDING=”n’: espaço entre os dados e a borda da tabela, em pixels;
⇒ BGCOLOR=”#RRGGBB”: cor de fundo das células da tabela.
ProfessorLuizTadeu
32
9.3.ATRIBUTOSDELINHASECÉLULAS
Também é possível definir algumas propriedades de linhas e células
individuais da tabela.
Sintaxe:
<tr align=”posição” bgcolor=”#rrggbb” valign=”posição”>
<td align=”posição” valign=”posição” bgcolor=”#rrggbb”
width=”n%” nowrap></td>
</tr>
Onde:
⇒ ALIGN=”posição”: alinhamento horizontal do conteúdo da célula ou das
células da linha. Pode ser
left, right e center;
⇒ BGCOLOR=”#RRGGBB”: define a cor de fundo das células da linha ou de
uma célula individual;
⇒ VALIGN=”posição”: alinhamento vertical de uma célula ou de células de
uma linha;
⇒ WIDTH=”n%”: largura de uma célula em pixels ou %;
⇒ NOWRAP: indica ao browser que o texto da célula não pode ser dividido
em mais de uma linha. A
coluna inteirar terá o tamanho do texto escrito naquela célula;
9.4.MESCLANDOCÉLULAS
ProfessorLuizTadeu
33
É possível através de atributos na tag TD mesclar células em uma
mesma linha ou em uma mesma coluna.
Para mesclar células em uma mesma linha usar o atributo COLSPAN
na tag TD e para mesclar células em uma mesma coluna usar o atributo
ROWSPAN na tag TD.
Sintaxe:
<td colspan=”n”>dados da tabela</td>
<td rowspan=”n”>dados da tabela</td>
Onde:
⇒ COLSPAN=”n”: é o número de colunas que a célula ocupará;
⇒ ROWSPAN=”n”: é o número de linhas que a célula ocupará;
ProfessorLuizTadeu
34
10.FRAMES
Os frames são divisões da tela do browser em diversas telas (ou
“quadros”). 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, processados no servidor e
devolvidos ao usuário.
O corpo de uma página Frame é diferente de uma página comum, e
nesse arquivo só tem as dimensões das divisões e as páginas que iram
aparecer em cada divisão.
A estrutura básica do corpo de uma página com frame:
<html>
<head>
<title>titulo da página</title>
</head>
<frameset cols="15%,85%">
<frame src="pagina1.html">
<frame src="pagina2.html">
</frameset>
</html>
10.1.CRIANDOFRAMES
Para utilizar o recurso de frames, é preciso utilizar um conjunto de tags.
Cada uma com sua função:
ProfessorLuizTadeu
35
<FRAMESET> é utilizada para criar um conjunto de frames e seus
elementos. É a tag principal para a criação de frames e precisa ser
encerrada com </FRAMESET>;
<FRAME> é utilizada para definir um frame (quadro) dentro de um
conjunto de frames. Não necessita de tag de encerramento;
Sintaxe:
<frameset cols=”COLUNAS,LARGURA” rows=”LINHAS,ALTURA”
frameborder=”1/0” framespacing=”N” border=”N”>
<frame
name=”NOME”
marginheight=”ALTURA”
scrolling=”YES/NO” noresize>
src=”url”
align=”POSIÇÃO”
marginwidth=”LARGURA”
</frameset>
Onde:
FRAMESET: tag de abertura de um conjunto de frames;
COLS=”colunas,largura”:
ROWS=”linhas,altura”:
FRAMEBORDER=”1/0”: o valor 1 exibe uma borda 3D no frame, o valor 0
não exibe a borda;
BORDER=”n”: define o tamanho da borda;
FRAMESPACING=”n”: define um espaço em pixels entre os frames, nem
todos os browsers reconhecem este atributo;
FRAME: define cada quadro (frame) separadamente;
NAME=”nome”: define o nome do frame;
ProfessorLuizTadeu
36
SRC=”URL”: define a página que será exibida no frame;
ALIGN=”posição’: define o alinhamento do conteúdo do frame. Posição pode
ser:
TOP: o conteúdo é alinhado no topo do frame;
MIDDLE: o conteúdo é alinhado nomeio do frame;
BOTTOM: o conteúdo é alinhado na base do frame;
LEFT: o conteúdo é alinhado à esquerda do frame;
RIGHT: o conteúdo é alinhado à direita do frame;
MARGINHEIGHT=”altura”: define a altura da margem em pixels;
MARGINWIDTH=”largura”: define a largura da margem em pixels;
SCROLLING=”yes/no/Auto”: define se o frame terá ou não barra de rolagem;
NORESIZE: evita o redimensionamento do frame;
ProfessorLuizTadeu
37
11.REFERÊNCIAS
HTML Dinâmico. Ramalho, José Antônio Alves. Berkeley Brasil, 1999.
A Arte Web. Site Sobre HTML, HTML Dinâmico e Design. (www.aarteweb.com.br).
Tutorial
HTML.
Tutorial
mantido
(www.icmc.usp.br/manuals/HTML).
pela
USP
desde
1995.
http://www.w3schools.com/
ProfessorLuizTadeu
38