INTRODUÇÃO HTML. Formador José Calado

Transcrição

1 INTRODUÇÃO HTML 1

2 TAGS Têm identificadores de início e de fecho Contidas entre os sinais de menor, "<", e maior, ">" Devem ser sempre escritas em minúsculas Exemplo: <body> - Tag de abertura do corpo do documento </body> - Tag de fecho do corpo do documento 2

3 Estrutura básica de uma página em <html> HTML TAGS </html> <head>. </head> <body>.. </body> CABEÇALHO DO DOCUMENTO CORPO DO DOCUMENTO 3

4 EXEMPLO 1 A minha primeira Página <html> <head> <title>estrutura de uma página em HTML</title> </head> <body> </body> Esta é a minha primeira página em HTML!!! </html> 4

5 Tags elementares: Cabeçalhos Existem seis níveis de cabeçalhos: h1, h2,., h6 do maior para o menor tamanho. Esta tag tem atributos opcionais: align, que pode assumir os valores: left, right, center e justify 5

6 EXEMPLO 2 Cabeçalhos <html> <head> <title>os cabeçalhos</title> </head> <body> <h1> A minha primeira página </h1> <h2> O que é? </h2> <h3> Uma página construída em HTML </h3> <h4> Para que serve? </h4> <h5> Para aprender HTML </h5> <h6> CURSOTÉCNICO DE INFORMÁTICA</h6> </body> </html> 6

7 EXEMPLO 3 Atributo align <html> <head> <title>alinhamento dos cabeçalhos </title> </head> <body> <h1 align= center> A minha primeira página </h1> <h2 align= right> O que é? </h2> <h3> Uma página construída em html </h3> <h4> Para que serve? </h4> <h5 align = center> Para aprender html </h5> <h6 align=right>curso TÉCNICO DE INFORMÁTICA </h6> </body> </html> 7

8 Tags Elementares - Parágrafos Os browsers não interpretam as mudanças de linha: <body> Esta é a minha primeira página Esta é outra linha da minha primeira página </body> Temos de usar parágrafos <body> <p>esta é a minha primeira página </p> <p>esta é outra linha da minha primeira página</p> </body> 8

9 EXEMPLO 4 Parágrafos <html> <head> <title>parágrafos-1ª parte </title> </head> <body> <p> Esta é a minha primeira página </p> <p> Esta é outra linha da minha primeira página </p> </body> </html> 9

10 EXEMPLO 5 Align e Parágrafos <html> <head> <title>alinhamento dos parágrafos</title> </head> <body> <p align= right> Esta é a minha primeira página </p> <p align= center>esta é outra linha da minha primeira página </p> </body> </html> 10

11 Tags Elementares Quebras de Linha As quebras de linha são utilizadas quando se pretende forçar uma mudança de linha, num determinado ponto do texto, sem criarmos um parágrafo, para isso utiliza-se a: tag <br> 11

12 EXEMPLO 6 Quebras de Linha <html> <head> <title>quebras de linha </title> </head> <body> <p> Esta <br> é a minha <br> primeira página </p> </body> </html> 12

13 Tags Elementares - Divisões Para dividirmos uma página com linhas horizontais, utilizamos a tag <hr>. Esta tag tem principais atributos: align, noshade, size, width. 13

14 EXEMPLO 7 Divisões <html> <head> <title>divisões</title> </head> <body> <hr size= 20%, width= 100 pixels> <p> Esta é a minha primeira página</p> </body> </html> 14

15 Tags Elementares - Comentários Para colocar comentários num determinado documento, utiliza-se a tag de abertura <!- e a tag de fecho -> 15

16 EXEMPLO 8 Comentários <html> <head> <title>comentários</title> </head> <body> <p> EsteTexto irá aparecer!! </p> <!-EsteTexto já não irá aparecer na minha página -> </body> </html> 16

17 Listas Tipos de Listas: Listas Ordenadas; Listas Desordenadas; Listas de Definições; 17

18 EXEMPLO 9 Listas Ordenadas <html> <head> <title>listas Ordenadas </title> </head> <body> <h3> Frutas </h3> <ol> <li>maçãs </li> <li>bananas </li> <li>uvas </li> <li>morangos </li> </ol> </body> </html> 18

19 EXEMPLO 10 Listas Ordenadas com outras marcas <html> <head> <title>listas ordenadas - outras marcas </title> </head> <body> <h4> Frutas </h4> <ol type = i> <li>maçãs </li> <li>bananas </li> <li>uvas </li> <li>morangos </li> </ol> </body> </html> 19

20 EXEMPLO 11 Listas Desordenadas <html> <head> <title>listas desordenadas</title> </head> <body> <h4> Bebidas </h4> <ul> <li>água</li> <li>sumo</li> <li>vinho</li> </ul> </body> </html> 20

21 EXEMPLO 12 Listas Desordenadas com outras marcas <html> <head> <title>listas desordenadas-outras marcas</title> </head> <body> <h4>sopas</h4> <ul type= square> <li> Caldo Verde</li> <li> Canja</li> <li> Creme de Coentros</li> </ul> </body> </html> 21

22 EXEMPLO 13 Listas de Definições <html> <head> <title>listas de Definições </title> </head> <body> <dl> <dt>sopas</dt> <dd>primeiro prato de qualquer refeição</dd> <dt>sobremesas </dt> <dd>último prato de qualquer refeição, podendo ser fruta ou sobremesa</dd> </dl> </body> </html> 22

23 ( ) <H1> LISTAS INTERCALADAS </H1> <UL> <LI> <H3> CURSO TÉCNICO DE INFORMÁTICA</H3> <UL> <LI> INFORMÁTICA <OL> <LI> HARDWARE <LI> SOFTWARE <LI> REDES DE COMUNICAÇÃO </OL> <LI> HTML <OL> <LI> TAGS <LI> CABEÇALHO <LI> CORPO DO DOCUMENTO </OL> <LI> BASES DE DADOS </UL> </UL> EXEMPLO 14 Listas Intercaladas 23

24 Fundo de uma Página Pode-se alterar um fundo de uma página, através de: Atribuição de uma cor Atribuição de uma imagem 24

25 EXEMPLO 15 Imagem de Fundo <html> <head> <title>imagem de fundo</title> </head> <body background= INSERIR UMA IMAGEM *> Esta minha página tem uma imagem de fundo </body> </html> * = Colocar Nome da Imagem 25

26 EXEMPLO 16 Cor de Fundo <html> <head> <title>cor de fundo </title> </head> <body bgcolor = INSERIR UMA COR *> Esta minha página tem uma cor de fundo </body> </html> * = Inserir a referencia RGB da cor, exemplo #4682b4 26

27 Formatações de texto Itálico, Negrito e Sublinhado Para colocar texto a negrito: <p> </p> Esta <b> palavra </b> está em negrito. Para colocar texto em itálico ou sublinhado : <p> </p> Uma em <i> itálico </i> e outra em <u>sublinhado</u>. Para alterar a cor, o tipo de letra e o tamanho utiliza-se a tag <font>, que pode conter os atributos opcionais: face, size e color. 27

28 <html> <head> EXEMPLO 17 Formatações do Texto <title>formatações de texto</title> </head> <body> <font size=4 face=arial color=#800000><b>uma <i>boa </i>alimentação</b></font> <p> <font size= 5 face=comicsansms color=#ffcc00>deve ser <u>variada</u></font> </p> <font size= 2 face=castellar color=#ff6600>deve ser <u>equilibrada</u></font> </body> </html> 28

29 Imagens Para se incluírem imagens num documento HTML utiliza-se a tag <img>. O atributo scr é o mais importante, sem ele o browser apenas identifica um espaço reservado à imagem, mas esta não existe. <p> </p> <img src= imagem.jpg > 29

30 EXEMPLO 18 - Imagens <html> <head> <title>imagens</title> </head> <body> <h4> Frutas </h4> <ul> <li><img src=imagens/morangos.jpg>morangos</li> <li><img src=imagens/cerejas.jpg>cerejas</li> <li><img src=imagens/ananás.jpg>ananás</li> </ul> </body> </html> 30

31 Imagens - Atributos O alinhamento das imagens em relação aos elementos circundantes do texto faz-se através do atributo align, que pode assumir os valores de right, left, top, middle, etc. Para se definir as dimensões, altura e largura, das imagens, utilizam-se os atributos height e width com os valores expressos em percentagem ou em pixels. Quando não for possível mostrar uma imagem o atributo alt permite definir um texto na página. 31

32 EXEMPLO 19 - Atributos das Imagens <html> <head> <title>listas desordenadas</title> </head> <body> <h4> Frutas </h4> <ul> <li><img src=imagens/morangos.jpg align=right >Morangos</li> <li><img src=nãohá.img alt= "Foto indisponível">cerejas</li> <li><img src=imagens/ananás.jpg width=45 height=45>ananás</li> </ul> </body> </html> 32

33 EXEMPLO 20 - Atributos das Imagens <html> <head> <title>tamanho das Imagens em PERCENTAGEM</title> </head> <body> <h4> Frutas </h4> <ul> <li><img src=imagens/morangos.jpg width=10% >Morangos </li> <li>< img src=imagens/morangos.jpg width=20%> Cerejas </li> <li><img src=imagens/ananás.jpg width=30% >Ananás </li> </ul> </body> </html> 33

34 EXEMPLO 21 - Atributos das Imagens <html> <head> <title>imagem com LIMITES</title> </head> <body> <h4> Frutas </h4> <ul> <li><img src=imagens/morangos.jpg width=10% BORDER = 5</li> <li>< img src=imagens/morangos.jpg width=20% BORDER = 10 </li> </ul> </body> </html> <li><img src=imagens/ananás.jpg width=30% BORDER = 15 </li> 34

35 EXEMPLO 22- Texto Pré-Formatado 35

36 ( ) <H1> FORMATANDO TEXTOS </H1> <B> Negrito </B> <br> <I> Itálico </I> <br> <U> Sublinhado </U> <br> <Strong> Strong </Strong><br> <TT> Typewriter </TT> <br> <BIG> Big </BIG> <br> <SMALL> Small </SMALL> <br> <SUP> Sobrescrito </SUP> <br> <SUB> Subscrito </SUB> <br> ( ) Exemplo 23 Formatação de Textos 36

37 ( ) <H2> USANDO FORMATAÇÃO EM TEXTOS </H2> Testando comando de formatação de <B> palavras </B> colocadas em frases. <p> Até onde os testes mostram funcionam <U> muito bem </U><P> Não deverá haver <B><I> problemas </I> </B><P> A formula da água é : <B> H<SUB>2</SUB>O <P> </B> A casa tem 300 M<SUP>2</SUP> <P> ( ) Exemplo 23 Formatação de Textos 37

38 38

39 HIPERLINKS Hiperlinks ou simplesmente Links são elementos que justificam o recurso de hipertexto, onde determinados objectos (texto ou imagens) servem de ligação entre locais do mesmo documento ou não. 39

40 LINKS INTERNOS A ligação criada por um link interno, jamais faz referência a um local fora da própria página onde ele se encontra. Com um link interno o utilizador pode clicar e ir para um ponto de maior interesse dentro da página onde se encontra evitando buscas através das barras de deslocamento. Quando um link faz a ligação entre locais, é utilizado um recurso que marca o local de chegada do link, chamado de Âncora. 40

41 ÂNCORA Para estabelecer uma âncora, usaremos uma tag que deve ser colocada no início do trecho que desejamos mostrar na tela, quando o link for accionado. SINTAXE <A NAME=nome_da_âncora>conteúdo_opcional </A> Onde: nome_da_âncora deve ser substituído por um nome exclusivo. Não pode haver duas âncoras com nomes iguais dentro do mesmo arquivo HTML. A Âncora e o link devem usar nomes exactamente iguais. 41

42 LINKS EXTERNOS Exemplo 24 <html> <head><title>links EXTERNOS</title></head> <body> <h3>visite a nossa ENTIDADE</H3> <p>< A HREF = > MEGAEXPANSÃO</a></p> <p><a HREF= <IMG SRC=imagens\megaexpansao.jpg ALT= AVREDONDO"></a></p> </body> </html> 42

43 43

44 <TABLE> </TABLE> Uma tabela é criada pela tag <TABLE> e encerrada com </TABLE>. Entre essas duas tags podem ser usadas todas as tags que conhecemos mais as tags específicas de tabelas, que são responsáveis pela criação de linhas, células, bordas, alinhamento da tabela etc. Usando <Table> no seu formato mais básico, são criadas tabelas que exibem o conteúdo, mas não as linhas que fazem parte de uma tabela. 44

45 Formato da TABELA TABLE 4 x 4 SEM LIMITES E SEM LINHAS Coluna1 <TD> Coluna2 <TD> Coluna3 <TD> Coluna4<TD> Linha 1 <TR> Aluno <TH> Português <TH> Matemática <TH> História <TH> Linha 2<TR> Fábio <TH> Bom <TH> Suficiente <TH> Óptimo <TH> Linha 3<TR> João <TH> Óptimo <TH> Bom <TH> Regular <TH> Linha 4<TR> Pedro <TH> Péssimo <TH> Bom <TH> Regular <TH> TABLE 4 x 4 COM LIMITES E LINHAS 45

46 TAGS ESPECÍFICAS <CAPTION> Legenda da Tabela </CAPTION> Deve ser colocada imediatamente após <TABLE> e antes do primeiro <TR>. Inclui a legenda para a tabela. A posição da legenda é determinada por ALIGN e as opções são Top ou Bottom.Align deve ser adicionado dentro de <CAPTION>. <TR> outras tags </TR> -TABLE ROW (LINHA) Esta tag é usada para criar cada linha nova da tabela. Assim sendo, uma tabela com dez linhas, apresentará um total de dez tags <TR> </TR>. A tag <TR> deve sempre aparecer entre as tags <TABLE> </TABLE>. 46

47 TAGS ESPECÍFICAS <TH> conteúdo de cabeçalho por coluna </TH> - TABLE HEADER Esta tag é usada para criar células na primeira linha da tabela. De uso opcional. Uma tabela com dez colunas, cada uma com um cabeçalho, deve ter dez <TH></TH>. O conteúdo do cabeçalho mostrado por <TH> sempre aparece centralizado na célula e em negrito. A tag <TH>deve aparecer sempre entre as tags <TR> </TR>. 47

48 TAGS ESPECÍFICAS <TD> conteúdo da célula </TD> -TABLE DATA Assim como <TH> esta tag cria o conteúdo de uma célula que não seja cabeçalho. O seu uso é essencial para colocar os dados dentro da tabela. São usadas entre as tags <TR> </TR>. Se a tabela possui dez colunas de dados ela também terá dez <TD> </TD> 48

49 EXEMPLO 25 Coluna1 <TD> Coluna2 <TD> Coluna3 <TD> Coluna4<TD> Linha 1 <TR> Aluno <TH> Português <TH> Matemática <TH> História <TH> Linha 2<TR> Fábio <TH> Bom <TH> Suficiente <TH> Óptimo <TH> Linha 3<TR> João <TH> Óptimo <TH> Bom <TH> Regular <TH> Linha 4<TR> Pedro <TH> Péssimo <TH> Bom <TH> Regular <TH> 49

50 ( ) <Table Border =1><Caption Align=Bottom> <Font Size=2> Tabela 1 </Font> </Caption> <Tr> <Th> </Th> <Th> Coluna 1 </Th> <Th> Coluna 2 </Th> <Th> Coluna 3 </Th> <Th> Coluna 4 </Th> </Tr> <Tr> <Td> Linha 1 </Td> <Td> Fábio</Td> <Td> Bom</Td> <Td> Suficiente/Td> <Td> Optimo</Td> </Tr> ( ) </Table> ( ) 50

51 TAPETE ROLANTE Existe uma TAG que permite aplicar um efeito de movimento de texto: SINTAXE <MARQUEE> FRASE/IMAGEM </MARQUEE> 51

52 Extensões disponíveis ALIGN=opção Funciona do mesmo modo que para posicionar o texto em relação à imagem.as opções são:top, Middle e Bottom. BEHAVIOR=opção Controla o tipo de deslocamento que a frase ou imagem irão realizar. O padrão é sempre Scroll. As opções são: Scroll: Deslocamento ocorre de um lado ao outro da tela; Alternate: Deslocamento ocorre da direita para esquerda. Slide: Deslocamento ocorre até o extremo oposto e pára ao chegar; BGCOLOR=#RGB Específica a cor de fundo que o local onde a frase ou imagem que vai passar terá. 52

53 Outras Extensões DIRECTION=opção O padrão desta opção é Left (esquerda). Determina a direcção que o texto vai tomar para iniciar o deslocamento. O único valor aqui é Right. HEIGHT=valor Especifica a altura do painel por onde o <MARQUEE> vai passar. Pode serem pixel ou percentagem; HSPACE=valor Criar uma margem na esquerda e direita do <MARQUEE> que pode ser usada para não deixá-lo tocar no texto ou imagens que estiverem na tela; 53

54 Outras Extensões LOOP=valor O valor determina a quantidade de vezes que o <MARQUEE> será repetido. Se ao invés de um número colocar a palavra Infinite ele nunca vai parar. WIDTH: Espaço da tela que a frase ocupará. O valor pode ser em pixel ou percentagem; SCROLLAMOUNT=valor Indica a quantidade de pixels usada fazer a movimentação; SCROLLDELAY=valor Informe um valor em milissegundos, que será o tempo entre um deslocamento e outro; 54

55 EXEMPLO 26 ( ) <H1> MARQUEE </H1> <Marquee> Este é o efeito mais simples de todos </Marquee> <Font Face=Acidic Size=7 Color=#0000FF> <Marquee Bgcolor=#70DBDB> Texto Velocidade Normal </Marquee> <Font Face=Acidic Size=7 Color=#70DBDB> <Marquee Bgcolor=#0000FF Direction=Right> Texto Normal Inverso </Marquee> <Font Face=Acidic Size=7 Color=#0000FF> <Marquee Bgcolor=#70DBDB ScrollAmount=20 ScrollDelay=1> Texto Acelerado </Marquee> </Font> <BR><BR> ( ) 55

56 ( ) <Font Face=Undercover Size=6 Color=#000000> <Marquee Bgcolor=#FF7F00 Behavior="Alternate" Width=100%> Texto que se Move de um lado para o outro </Marquee> </Font> <BR><BR> <Font Face=KellyAnnGothic Size=7 Color=#ffffff> <P Align=Center> <Marquee Bgcolor=# Behavior="Slide" Width=50% Loop=3> Este Texto surge apenas 3 vezes</marquee> </Font> ( ) 56

57 57

58 FRAMES São relativamente usadas na Web. Há os que adoram o uso de frames e não admitem que suas home-pages fiquem sem elas, por outro lado há os que não concordam com o uso de frames, porque julgam que eles "estragam" o layout da homepage. Fazer frames tem o mesmo procedimento que de home-pages simples, a diferença é que se deve trocar a tag <BODY> pela tag <FRAMSET> Para termos uma home-page com frames devemos ter três páginas, uma com o código que contém a tag <FRAMESET> e duas outras com os códigos onde serão inseridas as páginas de cada frame. 58

59 Documento HTML simples é assim: <HTML> <HEAD> <TITLE>Página simples </TITLE> </HEAD> <BODY> Neste campo entram os comandos em geral </BODY> </HTML> 59

60 Um Documento com Frames seria assim: <HTML> <HEAD> <TITLE>Página com Frame </TITLE> </HEAD> <FRAMESET> NESTE CAMPO ENTRAM AS CHAMADAS PARA OS DOCUMENTOS DOS FRAMES </FRAMESET> </HTML> 60

61 Página que Gera as Frames <HTML> <HEAD> <TITLE> Exemplo de frame</title> </HEAD> <FRAMESET COLS=20%, 80%> <! Este comando inicia a frame e divide a janela em 2 partes, uma com 20% e outra com 80%> <FRAME SRC=FRAME1.HTM> <! Este comando chama as páginas HTML que devem ocupar as colunas divididas pela frame> <FRAME SRC=FRAME2.HTM> </FRAMESET> </HTML> 61

62 FRAME1.HTM Agora vamos crias os códigos para serem inseridos nas duas colunas que criamos. <HTML> <HEAD> <TITLE>Página simples </TITLE> </HEAD> <BODY> AQUI COLOCA-SE OS CONTEÚDOS DA PRIMEIRA PÁGINA SIMPLES </BODY> </HTML> 62

63 FRAME2.HTM <HTML> <HEAD> <TITLE>Página simples </TITLE> </HEAD> <BODY> AQUI COLOCA-SE OS CONTEÚDOS DA SEGUNDA PÁGINA SIMPLES </BODY> </HTML> 63

64 FRAMESET OU FRAME DOCUMENT O Frame Document é um arquivo em formato HTML que contém tags específicas para definir a estrutura e o formato dos frames de seu site. Normalmente este arquivo passa a ser o arquivo principal do site ou o segundo na hierarquia para quando houver uma página de abertura, o que nós conhecemos por index. INDEX É o ficheiro que contém a primeira/principal página do nosso site. Todas as outras páginas são carregadas a partir desta. 64

65 ESTRUTURA DO FRAMESET 65

66 CRIANDO FRAMES Tipo Frame: determina se as frames a serem criadas vão dividir a janela horizontalmente ou verticalmente. Os tipos de frames são disponíveis são: Rows = Determina que as divisões das janelas ocorram na horizontal ou em linhas. Cols = Determina que as divisões das janelas ocorram na vertical ou em colunas. Estes valores terão que ser colocados após o sinal de igual. A quantidade de valores separados por vírgulas, determina a quantidade de frames que será criada. Cada valor individual vai representar também o tamanho de cada frame. Para Cols o tamanho é da distância horizontal e Rows da distância vertical. Estes valores podem ser colocados em pixéis ou percentagem ou ainda com um * (asterisco). 66

67 Tipos de Dados Numérico: determina quantos pixéis cada frame ou janela deve ocupar. Percentual: determina a ocupação em percentual de espaço da tela. A soma dos valores deve ser sempre igual a 100 %. Valor Relativo: Ao usar um * (asterisco) ao invés de um número, vocês faz com que os frames dividam o espaço disponível igualmente entre si. 67

68 MODELO DA FRAME <HTML> <HEAD> <TITLE> Modelo Padrão da FRAME</TITLE> </HEAD> <FRAMESET TIPO_DO_FRAME = tamanhoframe1, tamanhoframe2, tamanhoframen OPÇÕES> <FRAME SRC="URL" OPÇÕES> <FRAME SRC="URL" OPÇÕES> <FRAME SRC="URL" OPÇÕES> <FRAME SRC="URL" OPÇÕES> </FRAMESET> </HTML> 68

69 EXEMPLO 1 <Html> <Head> <Title> frameset1.html Modelo </Title> </Head> <Frameset ROWS=*,*,*> <Frame Src=#> <Frame Src=#> <Frame Src=#> </Frameset> </html> Utilizando esta opção, a FRAME será dividida em 3 partes iguais 69

70 RESULTADO FRAMESET1.HTML 70

71 EXEMPLO 2 <Html> <Head> <Title> frameset2.html Modelo </Title> </Head> <Frameset COLS=70%,*,*> <Frame Src=#> <Frame Src=#> <Frame Src=#> </Frameset> </html> É pedido que a janela se divida em três partes, sendo que a primeira irá ocupar 70%. 71

73 EXEMPLO 3 <Html> <Head> <Title> frameset3.html Modelo </Title> </Head> <Frameset COLS=20%,*,20%> <Frame Src=#> <Frame Src=#> <Frame Src=#> </Frameset> </html> É pedido que a janela se divida em três partes, sendo que a primeira e a última irão ocupar 20% cada uma. 73

75 Extensões Especiais A tag <FRAMESET> aceita ainda duas extensões especiais que podem ou não ser usadas. São elas: Frameborder= valor 0 ou 1. Determina se a linhas divisórias colocadas entre os frames devem ou não existir. O padrão interno é 1, ou seja, com linhas. Framespacing =Valor Determina a distância entre um frame e outro. Quando Frameborder está em 1 o valor colocado aqui afecta a largura das linhas divisórias. Quando Frameborder estiver em 0, uma faixa branca separa uma janela da outra. Esta faixa só será visível quando cada frame estiver com o seu conteúdo inserido. 75

76 Exemplo usando Frameborder e FrameSpacing <Html> <Head> <Title> frameset3.html Modelo </Title> </Head> <Frameset cols=20%,*,20% Frameborder=1 FrameSpacing=10> <Frame Src=# > <Frame Src=# > <Frame Src=# > </Frameset> </html> 76

77 Exercício com FRAMESET 77 desafio3.html

78 TAGS FRAME, PARA QUE SERVEM? Nestes primeiros exemplos o objectivo era ensinar como dividir os frames. Usamos as TAGS <FRAME> pois sem elas a divisão não se concretiza. Só funciona se estiver colocada dentro de um <FRAMESET> </FRAMESET>. A função é criar os frames a partir das medidas fornecidas por <FRAMESET> e determinar o que cada frame vai mostrar. Na verdade o que fazemos é linkar cada frame a um arquivo HTML que desejamos ou até mesmo a um site. 78

79 SINTAXE SINTAXE <FRAME SRC=endereço NAME= nomeframe SCROLLING=opção NORESIZE> 79

80 Referências da Sintaxe Endereço: é um endereço na internet ou um nome de arquivo.html que esteja acessível com ou sem o uso de paths. Name: Ao criar cada janela é interessante atribuir um nome a ela. Esse nome será útil para determinar onde cada site ou página deve abrir usando a extensão TARGET da tag <A HREF> usada antes apenas para abrir o conteúdo em nova janela. Nome deve começar com letras. 80

81 Referências da Sintaxe Scrolling = opção É um atributo opcional que determina se um frame vai ter ou não barras de deslocamento. As opções disponíveis são: Yes = Mostra sempre a barra de deslocamento. No = Não mostra a barra de deslocamento, mesmo quando ela é necessária. Auto Identifica se a barra de deslocamento é ou não necessária activando-a automaticamente. Noresize Não permite que as divisórias entre os frames seja movida manualmente pelo usuário, impedindo o redimensionamento de janelas. Esse comando deve sempre ser usado. 81

82 PARA QUE SERVEM AS TAGS iframe? Insere um documento ou site dentro de uma janela configurável dentro de um HTML. A tag <IFRAME> não é dinâmica, mas sim estática, ou seja, cada tag desta deve ter um endereço próprio. Outro problema apresentado pelo <IFRAME> é que os espaços deixados ao lado dele continuam sendo disponíveis, ou seja, um <P> ou <BR> após a tag </IFRAME> não faz o conteúdo seguinte ir para a primeira linha abaixo da janela. 82

83 Sintaxe <IFRAME SRC=endereçoWidth=valor Height=valor Scrolling=opção Frameborder=opção Align=opção> </IFRAME> 83

84 CARACTERISTICAS Endereço: é um endereço na internet ou um nome de arquivo.html que esteja acessível com ou sem o uso de paths. Width: Especifica em pixels a largura da janela de navegação que você deseja criar. O valor deve ser um número inteiro. Height especifica em pixels a altura da janela de navegação que você deseja criar. O valor deve ser um número inteiro. Scrolling determina se vai ou não haver barra de deslocamento na janela. As opções podem ser: Yes tem barras de deslocamento; No não coloca barra de deslocamento, mesmo se necessário; Auto: o browser decide quando vai criar ou não as barras de deslocamento. Recomendado. 84

85 CARACTERISITCAS Frameborder Aceita os valores zerou ou um para colocar ou não borda em volta da janela criada. Zero é sem borda e 1 com bordas. Align determina qual o alinhamento do <IFRAME> em relação a janela principal. As opções são: Left Alinha do lado esquerdo da janela principal (padrão) Right Alinha a direita da janela principal; Center Posiciona no centro da janela principal; 85

86 <H1> IFRAMES </H1> <H2> CASO I: Direita ou esquerda. Texto sempre ao lado </H2> <IFRAME SRC= Width=350 Height=350 Scrolling=Yes Frameborder=0 Align=Right> </IFRAME> <H2>Segunda Parte</h2> <P> Observe que mesmo com o P este texto vai sair ao lado do Iframe. <P> O mesmo ocorre com a imagem seguir, mesmo usando BR. <BR> <IMG SRC=imagens\imagem_a_gosto.jpg> <P> Isso pode ser uma alternativa interessante para colocar imagens e textos explicativos uma ao lado da outra. <BR><BR><BR><BR><BR><BR> <P Align=Center>Finalmente chegamos a um espaço sem IFRAME. 86

87 87