HTML

TUTORIAL - AUTORIA EM WORLD WIDE WEB HYPERTEXT MARKUP LANGUAGE (HTML)
(VERSO PRELIMINAR)
REDE NACIONAL DE PESQUISA Dezembro de 1995
Documento Nq RNP/REF/0146
Copyright 1995 Rede Nacional de Pesquisa - RNP PERMITIDA A REPRODUO DO PRESENTE MATERIAL, DESDE QUE PARA FINS EDUCACIONAIS OU DE PESQUISA, DEVENDO, NO ENTANTO, SER MENCIONADOS EXPRESSAMENTE OS DIREITOS AUTORAIS RESERVADOS RNP. VEDADA A REPRODUO PARA QUAISQUER OUTROS FINS, A MENOS QUE CONCEDIDA EXPRESSA AUTORIZAO PELA RNP.
SUMRIO
PARTE I - BSICO ................................................................................................................ 01 1. Caractersticas Gerais do HTML ............................................................................. 01 2. Criando Documentos em HTML .............................................................................. 02 2.1. HTML "Mnimo" .................................................................................................. 02 2.2. Marcaes Bsicas ................................................................................................ 03 2.2.1. Ttulos ......................................................................................................... 03 2.2.2. Cabealhos .................................................................................................. 04 2.2.3. Pargrafos ................................................................................................... 04 2.2.4. Quebras de linha ......................................................................................... 04 2.3. Interligando Documentos...................................................................................... 06 2.3.1. Para comear............................................................................................... 06 2.3.2. Interligando documentos em outros diretrios ........................................... 06 2.3.3. Ligando URL's ............................................................................................ 07 2.3.4. Ligando sesses especficas em outro documento...................................... 08 2.4. Interligando Sesses em uma Pgina .................................................................... 08 2.5. Listas ..................................................................................................................... 08 2.5.1. Listas no numeradas.................................................................................. 08 2.5.2. Listas numeradas......................................................................................... 10 2.5.3. Listas de definies..................................................................................... 10 2.5.4. Listas intercaladas....................................................................................... 11 2.6. Texto Pr-Formatado ............................................................................................ 13 2.7. Caracteres Especiais.............................................................................................. 14 2.8. Endereos .............................................................................................................. 15 2.9. Inserir Imagens...................................................................................................... 17 2.10. Controle de Cores e Grficos de Fundo .............................................................. 21 2.10.1. Cores e elementos grficos de fundo ........................................................ 21 2.10.2. Cores das letras e links .............................................................................. 22 2.11. Barras horizontais ............................................................................................... 23 3. Tabela de Comandos ................................................................................................ 25 4. Tabela de Acentuao/ Caracteres Especiais ...................................................... 30 5. Tabela de Cores ........................................................................................................ 31 PARTE II - TABELAS............................................................................................................. 34 1. Tabelas em HTML ..................................................................................................... 34 1.1. Principais Marcaes ............................................................................................ 34 1.2. Atributos de Tabelas ............................................................................................. 36 1.3. Outros Elementos de Controle .............................................................................. 41 2. Tabela de Comandos ................................................................................................ 45
PARTE III - FORMULRIOS................................................................................................. 47 1. Sobre este Tutorial .................................................................................................... 47 2 . Codificao Bsica do Formulrio ......................................................................... 49 3. Texto ............................................................................................................................ 50 3.1. Entrada de Texto Comum - TEXT......................................................................... 50 3.2. Entrada de Texto Protegido, Senha - PASSWORD ............................................... 52 3.3. Entrada Oculta - HIDDEN .................................................................................... 53 3.4. Entrada de Vrias Linhas de Texto - TEXTAREA................................................. 54 4. Menus .......................................................................................................................... 55 4.4. Menus com Opes - SELECT.............................................................................. 55 4.5. Listas Paginveis - SELECT com SIZE................................................................. 56 5. Botes.......................................................................................................................... 58 5.1. Botes Sim-ou-No - CHECKBOX ...................................................................... 58 5.2. Botes com Opes - RADIO ............................................................................... 59 5.3. Botes de Submisso e Limpeza - SUBMIT e RESET .......................................... 61 PARTE IV - EXTENSES DO NETSCAPE ....................................................................... 62 PARTE V - FRAMES .............................................................................................................. 65 1. Sobre este Tutorial .................................................................................................... 65 2 . Estrutura Bsica - Frame Document ..................................................................... 66 3. Sintaxe ......................................................................................................................... 67 3.1. Frameset................................................................................................................ 67 3.2. Frame .................................................................................................................... 71 3.3. Noframes ............................................................................................................... 72 4. Intercalando Frameset - Exemplos ......................................................................... 74 5. Links entre Frames .................................................................................................... 76 6. Cartela de Comandos ............................................................................................... 78
Tutorial - Autoria em World Wide Web - Hypertext Markup Language (HTML) -
PARTE I 1. Caractersticas Gerais do HTML

x x x x x Documentos HTML so arquivos escritos em ASCII - texto. Podem ser criados em qualquer editor de texto ( vi, emacs, edit, notepad) Existem editores especficos para vrias plataformas Existem conversores de vrios formatos, por exemplo, doc para html A unidade mnima de informao a pgina
H diferenas entre os diversos clientes Web, de forma que nem todas as marcaes e seus correspondentes recursos so suportadas por todos eles. Quando um cliente no entende uma determinada marcao, ele simplesmente a ignora. Ao criar um documento, importante test-lo com vrios clientes. Voc pode visualizar um documento que esteja criando com NCSA Mosaic (ou qualquer outro cliente Web). Basta abr-lo com o comando Open Local File disponvel na opo File do menu. HTML utiliza marcaes especficas e distintas para dizer ao Web browser como exibir o documento. Importante: HTML no faz diferena entre maisculas e minsculas (no "case sensitive"). Ento a notao <title> equivalente a <TITLE> ou <TiTlE>. Como so as Marcaes HTML? As marcaes do HTML - tags - consistem do sinal (<), (o smbolo de "menor que"), seguida pelo nome da marcao e fechada por (>) ("maior que"). De um modo geral, as tags aparecem em pares, por exemplo, <H1> Cabealho</H1>. O smbolo que termina uma determinada marcao igual aquele que a inicia, antecedido por uma barra (/) e precedido pelo texto referente. No exemplo, <H1> avisa ao cliente Web para iniciar a formatao do primeiro nvel de cabealho e </H1> avisa que o cabealho acabou. H excesses a esse funcionamento em pares das marcaes. Por exemplo, a que indica um final de pargrafo: <P> . No necessita de uma correspondente: </P>. A marcao que indica quebra de linha - <br> - tambm no precisa de uma correspondente, e outras tais como <hr> e <li>. Exemplos de Marcaes x A notao: <TITLE> (e a correspondente </TITLE>), especificam o ttulo de um documento. x A notao: <H1> (e a correspondente </H1>), indica a aparncia de um cabealho. x A notao: <P> a marcao para final de pargrafo.
2. Criando Documentos HTML

2.1. HTML "Mnimo" Todo documento deve ser identificado como HTML (<html> </html>), ter uma rea de cabealho (<head> </head>) com o nome para o documento (<title> </title>), um ttulo principal e uma rea definida como corpo(<body> </body>) do contedo do documento. Como o exemplo a seguir: <HTML> <HEAD> <TITLE>Exemplo de HTML simples</TITLE> </HEAD> <BODY> <H1>Este o primeiro nvel de cabealho</H1> Bem-vindo ao mundo do HTML. Este o primeiro pargrafo.<P> E este o segundo.<P> </BODY> </HTML> Esta pgina vai aparecer assim:
2.2. Marcaes Bsicas 2.2.1. Ttulos Todo documento em HTML deve possuir um ttulo. De um modo geral o ttulo aparece em lugar separado da pgina (por exemplo, alto da tela no Netscape), e utilizado para identificar o documento em outros contextos ( por exemplo, buscas Wais). interessante que o ttulo possa sugerir claramente o contedo do documento. Ateno porque o conceito de ttulo diferente de cabealho. O ttulo est mais para o nome do arquivo. No um elemento relevante na visualizao do documento como acontece com o cabealho. A marcao utilizada para ttulos <title> e seu par </title>. Escrito desta forma: <html> <title> Este o ttulo</title> <body> <h2>E este o cabealho de nvel 2</h2> Aqui entra o texto do documento ... </body> </html> Apresenta-se assim:
2.2.2. Cabealhos "Cabealhos" normalmente so usados para ttulos e sub-ttulos de uma pgina. HTML possui seis nveis de cabealhos, numerados de 1 a 6, sendo o nmero 1 o de maior destaque. Cabealhos so exibidos em letras maiores e em negrito. O primeiro cabealho em cada documento deve estar marcado como <H1>. ATENO: ao definir o tamanho de um cabealho, voc no est definindo o tamanho da letra (fonte 10, fonte 14). Voc apenas define que ele aparecer com maior tamanho e destaque que o resto do texto. O tamanho exato com que ele ser visualizado definido pelo programa visualizador de html (browser) de cada pessoa que acessar a informao. As notaes relativas a cabealhos so: <Hy>Texto do cabealho </Hy > onde y um nmero entre 1 e 6 especificando o nvel do cabealho. O conjunto de notaes possveis o que segue: <H1>Headings</H1> <H2>Headings</H2> <H3>Headings</H3> <H4>Headings</H4> <H5>Headings</H5> <H6>Headings</H6>
2.2.3. Pargrafos A marcao <p> utilizada para definir o incio de um novo pargrafo, deixando uma linha em branco entre cada pargrafo. HTML no reconhece o caracter de quebra de linha dos editores de texto. Mesmo que exista uma linha em branco, os clientes Web s reconhecem o incio de um novo pargrafo mediante a marcao apropriada. Existem algumas excees. Por exemplo, inserindo uma marcao de pargrafo depois de <P>, <lLI>,<Hy> e outras, esta ser ignorada.
2.2.4. Quebras de linha A marcao <br> faz uma quebra de linha sem acrescentar espao extra entre as linhas.Veja a diferena do uso de <p> e <br> ,nos exemplos a seguir:
<html> <body> <h1>Utilizando p</h1> Vamos separar esta sentena com marcao de pargrafo.<p> Para verificar a diferena. </body> </html> <html> <body> <h1>Utilizando br</h1> Diferena quando separamos duas linhas utilizando<br> a marcao de quebra de linha<br> Diferena quando separamos duas linhas utilizando<br> a marcao de quebra de linha<br> Deu pra notar? </body> </html> Veja a diferena no uso das duas notaes:
2.3. Interligando Documentos 2.3.1. Para comear O principal poder do HTML vem da sua capacidade de interligar partes de um texto (e tambm imagens) a outros documentos. Os clientes exibem em destaque estas reas ou pontos chaves (normalmente com cores diferentes ou sublinhado) para indicar que se trata de um link, ou interligao, no hipertexto. A marcao <A>, que define o ponto de partida para os links, denominada de ncora. Para incluir uma ncora em seu documento:
x x
Inicie a ncora com <A . ( H um espao depois de A.) Especifique o documento a ser interligado, inserindo parmetro HREF="filename" seguido do sinal: > x Insira o texto que vai funcionar como link no documento corrente x Anote a marcao de final da ncora: </A>. Um exemplo de referncia a um hipertexto: <A HREF="ListaPraias.html">Praias</A> A palavra Praias'' definida como o marcador do link para se chegar ao documento ListaPraias.html, que est no mesmo diretrio do documento corrente. Ou seja, "Praias" aparece em negrito e se eu clicar nessa palavra ser exibido o documento apontado ListaPraias.html
2.3.2. Interligando Documentos em Outros Diretrios possvel interligar documentos em outro diretrio especificando-se o caminho relativo a partir do documento corrente, em relao ao que est sendo interligado. Por exemplo, um link para o arquivo Sergipe.html localizado no subdiretrio Estados seria assim: <A HREF="Estados/Sergipe.html">Sergipe</A> Estes so dos denominados links relativos. tambm possvel usar o caminho completo (pathname absoluta) do arquivo desejado. Para isso, utiliza-se a sintaxe padro do sistema UNIX. Importante: se voc quiser referenciar um diretrio a partir do raiz do seu servidor WWW, inicie a notao com /. Isto , se voc tiver uma notao desta forma: <A HREF=/imagens/incon1.gif>, significa que o arquivo incon1.gif dever ser buscado no diretrio imagens que est imediatamente acima do diretrio raiz do seu servidor WWW.
2.3.3. Ligando URLs O World Wide Web utiliza-se das Uniform Resource Locators (URLs) para especificar a localizao de arquivos em servidores. Uma URL inclui o tipo de recurso acessado (p.e, Gopher, WAIS), o endereo do servidor, e a localizao do arquivo. Se escreve de acordo com o esquema abaixo: protocolo://servidor[:port]/path/filename Onde protocolo uma das seguintes definies file http gopher WAIS news telnet um arquivo no seu sistema local, ou servidor de ftp um arquivo em um servidor World Wide Web um arquivo em um servidor Gopher um arquivo em um servidor WAIS um Usenet newsgroup uma conexo Telnet
Por exemplo, para incluir um link para o HTML Beginners Guide, em um documento, deve ser usado: <A HREF = "http://www.ncsa.uiuc.edu/General/Internet/WWW/ HTMLPrimer.html"> NCSA's Beginner's Guide to HTML</A> O que torna a sentena NCSA's Beginner's Guide to HTML'' um link para tal documento. Para mais informaes sobre URLs, veja em
x
WWW Names and Addresses, URIs, URLs, URNs, escrito por pessoas do CERN, disponvel em http://info.cern.ch/hypertext/WWW/Addressing/Addressing.html. x A Beginner's Guide to URLs, localizado no menu de Help do NCSA Mosaic, e disponvel em http://www.ncsa.uiuc.edu/demoweb/URL-primer.html
2.3.4. Ligando sesses especficas em outro documento Para fazer links com sesses de outros documentos o processo o mesmo da sesso anterior. Faz-se uma ncora normalmente, e apenas acrescentado, aps a URL do documento de destino, o sinal # e uma palavra, ou identificador. O identificador "volta" no nosso exemplo: Este o meu <a href="index20.htm#volta">link</a> para o ltimo item do ndice deste tutorial. No ndice do tutorial - arquivo index20.htm - dever haver uma notao que reconhea a palavra/identificador informado no ponto de partida. Pode ser: <a name="volta"><li>Formulrios Eletrnicos</a>.
2.4. Interligando Sesses em uma Pgina HTML permite que se faam ligaes entre diferentes trechos de um documento. Voc pode apontar uma palavra ou trecho de um texto utilizando uma ncora de nome (named anchor). Este recurso bastante usado na gerao de ndices de contedo no incio de uma pgina. O passo a passo :
x
Defina o "ponto de partida", atribuindo a ele um nome qualquer - no exemplo item1-, precedido do caracter #,da seguinte forma: Veja o incio da <a href="#item1">segunda sesso</a>. Defina o "ponto de chegada", atribuindo a ele uma ncora de nome, com o nome correspondente ao do ponto de partida, assim: Esta <a name="intem1">segunda sesso</a> trata de...
2.5. Listas 2.5.1. Listas no numeradas Para criar uma lista no numerada: 1. Comece com a marcao de incio de lista: <UL>. 2. Insira a marcao <LI> antes de cada item da lista item. (No necessrio fechar a marcao com </LI> ) 3. Encerre com a marcao de fim de lista: </UL>.
Abaixo o exemplo de uma lista com dois itens: <UL> <LI> mas <LI> bananas </UL> Vai aparecer assim:
Cada marcao <LI> pode conter vrios pargrafos.
10
2.5.2 Listas Numeradas Uma lista numerada - ou ordenada - semelhante a uma lista no numerada, exceto porque utiliza marcao <OL> ao invs de <UL>. Os itens so identificados utilizando-se a mesma notao <LI> . Uma lista criada assim: <OL> <LI> laranjas <LI> peras <LI> uvas </OL> Resulta neste formato:
2.5.3. Listas de Definies Uma lista de definies normalmente consiste em alternar um termo (abreviado como DT) e uma definio (abreviado como DD). Clientes Web browsers geralmente mostram a definio em nova linha com outro alinhamento. Exemplo de uma lista de definio: <DL> <DT> NCSA <DD> NCSA, the National Center for Supercomputing Applications, is located on the campus of the University of Illinois at Urbana-Champaign. NCSA is one of the participants in the National MetaCenter for Computational Science and Engineering. <DT> Cornell Theory Center <DD> CTC is located on the campus of Cornell University in Ithaca, New York. CTC is another participant in the National MetaCenter for Computational Science and Engineering. </DL>
11
Ser vista desta forma:
As entradas <DT> e <DD> podem conter vrios pargrafos (separados por <P> ), listas, ou outras definies. A marcao <DD> pode tambm ser utilizada, fora de uma lista de definies como se fosse uma tabulao (insere um espao no incio da frase).
2.5.4. Listas Intercaladas As listas podem ser encadeadas ou intercaladas arbitrariamente, produzindo resultados bastante interessantes. A prtica que vai mostrar qual o nmero mximo de listas que vale a pena intercalar. Pode-se inclusive ter um pargrafo, intercalado com uma lista que contenha um nico item. Exemplo de lista intercalada: <UL> <LI> Estados da regio sul do Brasil: <UL> <LI> Rio Grande do Sul <LI> Santa Catarina </UL> <LI> Um estado da regio nordeste: <UL> <LI> Pernambuco </UL> </UL>
12
exibida com este formato:
13
2.6. Texto Pr-formatado A marcao <PRE>(derivada de preformatted) delimita uma rea de texto em que espaos, novas linhas e tabulaes so mantidas. Ou seja, o texto ser apresentado exatamente da forma como foi digitado, mesmo que no hajam marcaes do html. uma forma de se preservar o formato de um texto Este recurso utilizado por exemplo para listas de programas.Vejamos um exemplo: <PRE> #!/bin/csh cd $SCR cfs get mysrc.f:mycfsdir/mysrc.f cfs get myinfile:mycfsdir/myinfile fc -02 -o mya.out mysrc.f mya.out cfs save myoutfile:mycfsdir/myoutfile rm * </PRE> Apresenta-se assim:
Podem ser definidos links dentro de textos pr-formatados. No entanto, deve-se evitar utilizar outros caracteres das marcaes em reas <PRE>. Isto porque caracteres como <, >, and & possuem um significado especfico no HTML. O ideal utilizar as sequncias especiais, (<, >, and &, respectivamente) sempre que precisar representar esses caracteres. Veremos mais sobre no prximo item.
14
2.7. Caracteres Especiais HTML permite que se apliquem estilos especficos a palavras ou sentenas. Vamos ver algumas opes: <B></B> texto em negrito <I></I> texto em itlico E o efeito de cada uma delas:
Para representar os caracteres das tags, utilize a seguintes notaes: < para representar < > para representar > & para representar & "para representar " Uma lista completa dessas notaes especiais pode ser obtida no CERN, em: http://www.w3.org/hypertext/WWW/MarkUp/ISOlat1.html Caso o editor que voc esteja utilizando no acentue, possvel tambm utilizar notaes especiais para acentuao. H uma lista delas ao final deste documento. Ateno: Ao contrrio do resto do HTML, as notaes especiais diferenciam letras maisculas de minsculas. No possvel usar &LT; no lugar de <.
15
2.8. Endereos A marcao <ADDRESS></ADDRESS> habitualmente utilizada para especificar o autor do documento e a forma de contato com ele (por exemplo, o endereo eletrnico). Geralmente o ltimo item de uma pgina. Por exemplo, a ltima linha do Beginer's Guide em que foi baseado este tutorial assim: <ADDRESS> A Beginner's Guide to HTML / NCSA / pubs@ncsa.uiuc.edu </ADDRESS> E o resultado
Existe ainda um recurso para criar um item na pgina que, ao ser selecionado, abre uma janela, e permite que se envie uma mensagem eletrnica para um endereo especfico. Para isso utiliza-se a varivel "mailto:" Veja o exemplo abaixo, para enviar mensagens de dvidas para o endereo eletrnico apoio@cr-df.rnp.br Qualquer dvida ou comentrio, voc pode enviar um email ao <a href="mailto:apoio@cr-df.rnp.br">pessoal de apoio </a> a usurios do CR-DF.
16
Fica assim:
E ao se clicar em pessoal de apoio, se abrir uma janela para envio de mensagem eletrnica, como abaixo:
17
2.9. Inserir imagens As imagens dentro de uma pgina devem estar preferencialmente no formato ".gif". Este o formato mais universalmente aceito pelos visualizadores de WWW (browsers). O Netscape consegue decodificar outros formatos como o ".jpg" e ".rgb", mas esta capacidade no comum a todos os programas. Utiliza-se a seguinte notao para incluir uma imagem: <img src="diretrio/arquivo"> No exemplo:
18
x Alinhamento das imagens Toda imagem includa pode ser posicionada (align=...) na tela das seguintes formas: TOP, MIDDLE, BOTTOM, LEFT e RIGHT. As trs primeiras opes definem a posio da imagem com relao ao texto. Veja os exemplos:
19
As duas ltimas definem a posio da imagem na pgina, a direita ou esquerda:
Ateno: De um modo geral no necessrio incluir essa anotao para alinhar a imagem a esquerda. Caso seja omitida a opo "align", a imagem aparecer a esquerda da pgina. Uma imagem pode ser tambm alinhada direita da pgina:
Uma imagem pode ser ainda um boto sensvel: Para isso basta incluir uma imagem no interior de uma ncora. <a href="./index.htm"><img src="../images/stop.gif></a>
20
21
2.10. Controle de Cores e Grficos de Fundo 2.10.1. Cores e elementos grficos de fundo 2.10.2. Cores de letras e links
2.10.1. Cores e elementos grficos de fundo x O Atributo Background O atributo Background deve ser aplicado marcao <body>. Este atributo especifica a URL de uma imagem que ser utilizada como fundo (background) de uma pgina. Esta imagem ocupar toda a rea de fundo da tela. Deve ser escrito desta forma: <body background="images/fundo.gif"> .. toda a pgina .. </body> importante ter cuidado para que elementos de fundo no prejudiquem a leitura do texto em tela. De um modo geral, esses elementos devem aparecer em cores bem claras e sutis. Sempre vale a pena visitar outras pginas que utilizam esse recurso para recolher boas idias. x O Atributo BGColor Este atributo tambm deve acompanhar a marcao <body>. Ele permite que se defina uma cor padro para o fundo da pgina, sem necessidade de um arquivo imagem para isso. O formato da marcao : <body bgcolor="#rrggbb">Aqui fica a pgina</body> Onde "#rrggbb" um cdigo hexadecimal no padro "red-green-blue" utilizado para especificar a cor de fundo. Sugerimos a consulta a uma tabela desses padres disponvel em servio da INFINET, em: http://www.infi.net/wwwimages/colorindex.html . Uma verso desta tabela encontra-se no final deste documento.
22
2.10.2. Cores de letras e links x O atributo TEXT Este atributo utilizado para controlar a cor do texto "normal" em uma pgina. Ou seja define a cor de todo o texto do documento exceto os links. O atributo deve acompanhar a marcao <BODY>, escrevendo-se da seguinte forma: <body text="#rrggbb">Aqui entra o documento</body> Onde "RGB" um cdigo hexadecimal do trio "red-green-blue", exatamente no mesmo padro daquele utilizado no atributo BGCOLOR. Para conhecer as variaes desse padro sugerimos consulta a tabela disponvel na INFINET citada anteriormente. x Os atributos LINK, VLINK e ALINK Este atributo controla a cor de textos que funcionem como link na pgina. 1. LINK define cores de links nao consultados 2. VLINK se referente a links j consultados e 3. ALINK determina cor de links quando ativados. A notao absolutamente igual anterior, seguindo os mesmos padres para definir as cores. Uma definio completa incluiria ento: <body text="#rrggbb" link="#rrggbb" vlink="#rrggbb" alink="#rrggbb"> Aqui entra o documento </body>
23
2.11. Barras horizontais
A marcao <HR> produz uma linha horizontal no documento. possvel determinar uma largura maior para as barras, utilizando-se a extenso "size". Veja os exemplos:
24
ainda possvel determinar o quanto da largura da pgina a linha horizontal vai ocupar. Para isso utiliza-se a extenso width= . Observe
Ateno: a extenso width no determina o comprimento da linha (em cm ou mm), mas o quanto da largura da pgina ela deve ocupar.
25
3. Tabela de Comandos Marcao <HTML></HTML> Caractersticas Esta marcao deve ser inserida imediatamente no incio e no final de todo arquivo HTML <HEAD></HEAD> Cabealho O cabealho de um arquivo html uma rea para insero de informaes que no sero visveis na pgina HTML, tais como title e comentrios <TITLE></TITLE> Ttulo do documento Nome a ser atribudo ao documento HTML, mas que no ser visualizado na pgina. Deve sempre aparecer na rea definida como head do documento <! > Comentrio Indicao de quaisquer comentrios, tais como nome do autor, data de criao, software utilizado para autoria, etc. No visualizado na pgina HTML (s quando solicitadao o source file) Tambm deve aparecer na rea definida como head do documento. <BODY></BODY> Corpo do documento Delimita o corpo do documento. Vem imediatamente abaixo da rea definida como head. Esta marcao deve ser fechada somente ao final do documento, imediatamente seguida da marcao </html> Exemplo de como devem aparecer distribudas no arquivo as marcaes acima citadas: <html> <head> <title> Ttulo do documento</title> <! autor: Joo das Couves> <! ltima atualizao: 30/02/2001> </head> <body> Bl bl bl ... aqui entra o contedo da pgina ... bl.... </body> </html> Funo Delimita o documento (incio e fim)
26
<BODY Imagem de fundo BACKGROUND= -> - = arquivo imagem ou </BODY> URL de arquivo imagem
<BODY BGCOLOR=#rrgg bb> </BODY> <BODY TEXT=#rrggbb LINK=#rrggbb VLINK=#rrggbb ALINK=#rrggbb > </BODY> <Hy></Hy>
Cor padro de fundo #rrggbb = cdigo de cores rgb (ver tabela de cores neste documento) Cores do texto do documento #rrggbb = cdigo de cores rgb (ver tabela de cores neste documento) Ttulos ou cabealhos na pgina y = nmero de 1 a 6
Insere uma imagem como fundo da pgina (mais ou menos como uma marca dgua). O arquivo deve estar em formato .gif . Este arquivo pode estar na mesma mquina (anotar sua path/nome), ou em outra mquina (indicar por URL) Define uma cor de fundo padro para a pgina. Esta cor pode variar de monitor para monitor. Define a cor para: text = texto normal da pgina link = links da pgina vlink = links consultados na pgina alink = links ativados na pgina Existem seis nveis de cabealho na pgina (no confudir com cabealho do documento = head): <h1></h1>, <h2></h2> , etc. Sendo H1 o maior e H6 o menor nvel. Ateno, marcaes Hy definem tamanho relativo do texto, e os colocam em destaque (normalmente negrito) Insere uma linha em branco entre dois pargrafos Faz uma quebra de linha. Define um link. O link vai aparecer em destaque na pgina (normalmente outra cor e sublinhado)
<P> <BR> <A HREF= > texto</a>
Pargrafo Quebra de linha ncora para hiperlink referencial = URL ou nome de arquivo
27
<A HREF=#b> texto</a>
ncora interna ou para Abre uma ncora para um outro seo especfica em outro trecho dentro de uma mesma pgina, documento ou para um trecho especfico em outro documento. #b = cdigo ou palavra 1. Trecho na mesma pgina chave Aps a ncora de hiperlink referencial, deve aparecer, entre aspas, o caracter # e uma palavra ou cdigo chave. Este mesmo cdigo ou palavra dever aparecer no ponto de chegada deste link interno, como uma ncora de nome (veja prximo item). 2. Link para trecho especfico em outro documento Deve ser efeito exatamente da mesma forma, sendo que , antes do caracter #, dever aparecer o nome do arquivo que ser pretende ligar, ou sua URL completa. Este o ponto de chegada de uma ncora interna a um documento ou para trecho especfico em outro documento. O cdigo ou palavra chave deve ser idntico quele do ponto de partida. No altera a visualizao do texto. Permite que se crie um link que ao ser selecionado abrir uma tela de composio de mensagem eletrnica a ser enviada para o endereo digitado aps MAILTO: Deve ser escrita ao incio e ao final da lista. Casa item da lista antecedido da marcao <LI> Deve ser escrita ao incio e ao final da lista. Casa item da lista antecedido da marcao <LI>
<A NAME=b >
ncora de nome b= cdigo ou palavra chave
<A HREF=MAILTO: xyz@algumlugar.br > <UL></UL>
Envio de email para endereo especificado
Delimita lista no numerada
<OL></OL>
Delimita lista numerada
28
<LI>
Cada item de uma lista --o00o-numerada ou no Uma lista no numerada: Uma lista numerada <UL> <OL> <LI> item 1 <LI> item 1 <LI> item 2 <LI> item 2 <LI> item 3 <LI> item 3 </UL> </OL> <DL></DL> Delimita lista de Deve ser escrita ao incio e ao final da definies lista. Cada item da lista antecedido da marcao <DT> ou <DD>, conforme explicado a seguir. <DT> Entrada de ttulo em lista Insere um ttulo em uma lista de de definies definio. A entrada de ttulo vai aparecer alinhada esquerda da pgina. Normalmente vem seguido de um item do tipo <DD> <DD> Entrada de definio em Insere uma definio (antecedido ou lista de definies no por <DT>). Este item vai aparecer numa margem mais interna pgina (como se tivesse uma tabulao antes). Fora de listas de definio pode ser utilizado para produzir este mesmo efeito (Uma tabulao) Uma lista de definies: <DL> <DT> Ttulo 1 <DD> definio a <DD> definio b <DT> Ttulo 2 <DD> definio a </DL> <PRE></PRE> <B></B> <I></I> Texto pr-formatado Negrito --o00o-Itlico --o00o-Mantm a exata formatao do texto digitado.
29
<ADRESS> </ADRESS> <IMG SRC=>
Endereo Insero de imagem = nome ou URL de arquivo imagem.
<IMG ALING= SRC=>
Alinhamento de imagem
Quanto a visualizao, normalmente, apenas coloca o trecho em itlico. Marcao para inserir uma imagem na pgina. Esta imagem deve estar preferencialmente em formato .gif. Pode estar na mesma mquina (apontar com o nome ou path completa) ou em outra mquina (apontar com URL) Opcional. Define o alinhamento de uma imagem na pgina. Aceita os seguintes valores: TOP = alinha o texto com o alto da figura MIDDLE = alinha o texto com o meio da figura BOTTOM = alinha o texto com o rodap da figura RIGHT = alinha a figura direita da tela LEFT = alinha a figura esquerda da tela. Faz ainda com que o texto que esteja ao lado contorne a figura. --o00o--
<HR> <HR SIZE=n>
insere linha horizontal Largura da linha horizontal n= nmero Ocupao da tela da linha horizontal n= nmero Opcional Extenso opcional que define a largura da linha Opcional Define o quanto da tela uma linha vai ocupar.
<HR WIDTH=n%>
30
4. Tabela de Acentuao/ Caracteres Especiais As notaes presentes em marcaes, devem ser representadas com notaes especiais para que possam ser exibidas em tela. Estas notaes especiais sempre se iniciam por & (e comercial) e encerram-se com ; (ponto e vrgula). Notao < > & " ® &copy descrio Maior que Menor que E comercial aspas duplas marca registrada copyrights aparncia > < &
possvel utilizar facilidades de acentuao (padro do Windows por exemplo) em documentos HTML. No entanto, desta forma, apenas poder visualizar a acentuao o computador que reconhecer este padro especfico. Segue abaixo o padro para acentuao- ISO Latin-1 alphabet -, semelhante ao utilizado para exibir caracteres das marcaes, e que poder ser visualizado pela grande maioria das mquinas. Caracter Acento agudo Acento grave Acento circunflexo Letra com til Letra com trema Letras unidas Letra com argola Cedilha N com til O cortado THORN maisculo thorn minsculo eth minsculo eth maisculo Caracter alemo Notao &xacute; onde x uma letra qualquer, maiscula ou minscula &xgrave; onde x uma letra qualquer, maiscula ou minscula &xcirc; onde x uma letra qualquer, maiscula ou minscula &xtilde; onde x uma letra qualquer, maiscula ou minscula &xuml; onde x uma letra qualquer, maiscula ou minscula &Aelig; = e æ = Å = e &aring = Ç = e &ccedil= Ñ = e ñ = Ø = e ø = &THORN = (Icelandic) &thorn= (Icelandic) &eth (Icelandic) Ð= (Icelandic) &szlig =
31
5. Tabela de Cores Tabela original em: http://www.infi.net/wwwimages/colorindex.html White Red Green Blue Magenta Cyan Yellow Black Aquamarine Baker's Blue Brass Bright Brown Bronze Bronze Cadet Cool Copper Coral Corn Dark Dark Dark Dark Dark Dark Dark Dark Dark Dark Dark Dim Dusty Feldspar Firebrick Forest Gold Goldenrod Grey Green Green rgb=#FFFFFF rgb=#FF0000 rgb=#00FF00 rgb=#0000FF rgb=#FF00FF rgb=#00FFFF rgb=#FFFF00 rgb=#000000 rgb=#70DB93 rgb=#5C3317 rgb=#9F5F9F rgb=#B5A642 rgb=#D9D919 rgb=#A62A2A rgb=#8C7853 rgb=#A67D3D rgb=#5F9F9F rgb=#D98719 rgb=#B87333 rgb=#FF7F00 rgb=#42426F rgb=#5C4033 rgb=#2F4F2F rgb=#4A766E rgb=#4F4F2F rgb=#9932CD rgb=#871F78 rgb=#6B238E rgb=#2F4F4F rgb=#97694F rgb=#7093DB rgb=#855E42 rgb=#545454 rgb=#856363 rgb=#D19275 rgb=#8E2323 rgb=#238E23 rgb=#CD7F32 rgb=#DBDB70 rgb=#C0C0C0 rgb=#527F76 rgb=#93DB70
Chocolate Violet Gold
II Blue Copper
Flower Brown Green Green Olive Orchid Purple Slate Slate Tan Turquoise Wood Grey Rose
Blue
Copper Green
Blue Grey
Green
Copper Yellow
32
Hunter Indian Khaki Light Light Light Light Lime Mandarian Maroon Medium Medium Medium Medium Medium Medium Medium Medium Medium Medium Medium Midnight Navy Neon Neon New New Old Orange Orange Orchid Pale Pink Plum Quartz Rich Salmon Scarlet Sea Semi-Sweet Sienna Silver Sky Slate Spicy Spring
Green Red Blue Grey Steel Wood Green Orange Aquamarine Blue Forest Goldenrod Orchid Sea Slate Spring Turquoise Violet Wood Blue Blue Blue Pink Midnight Tan Gold Red Green Blue Red Green Blue Green Green Blue
Blue
Green Chocolate
Blue Blue Pink Green
rgb=#215E21 rgb=#4E2F2F rgb=#9F9F5F rgb=#C0D9D9 rgb=#A8A8A8 rgb=#8F8FBD rgb=#E9C2A6 rgb=#32CD32 rgb=#E47833 rgb=#8E236B rgb=#32CD99 rgb=#3232CD rgb=#6B8E23 rgb=#EAEAAE rgb=#9370DB rgb=#426F42 rgb=#7F00FF rgb=#7FFF00 rgb=#70DBDB rgb=#DB7093 rgb=#A68064 rgb=#2F2F4F rgb=#23238E rgb=#4D4DFF rgb=#FF6EC7 rgb=#00009C rgb=#EBC79E rgb=#CFB53B rgb=#FF7F00 rgb=#FF2400 rgb=#DB70DB rgb=#8FBC8F rgb=#BC8F8F rgb=#EAADEA rgb=#D9D9F3 rgb=#5959AB rgb=#6F4242 rgb=#8C1717 rgb=#238E68 rgb=#6B4226 rgb=#8E6B23 rgb=#E6E8FA rgb=#3299CC rgb=#007FFF rgb=#FF1CAE rgb=#00FF7F
33
Steel Summer Tan Thistle Turquoise Very Very Violet Violet Wheat Yellow
Blue Sky
Dark Light Red Green
Brown Grey
rgb=#236B8E rgb=#38B0DE rgb=#DB9370 rgb=#D8BFD8 rgb=#ADEAEA rgb=#5C4033 rgb=#CDCDCD rgb=#4F2F4F rgb=#CC3299 rgb=#D8D8BF rgb=#99CC32
34
PARTE II
1.Tabelas em HTML 1.1. Principais Marcaes 1.2. Atributos de Tabelas 1.3. Outros Elementos de Controle 1.1.Principais Marcaes Segue abaixo o conjunto de marcaes essenciais para desenhar tabelas em HTML. Alguns atributos podem ser definidos para cada uma dessas marcaes. Falaremos desses atributos mais adiante. x <TABLE></TABLE> Toda tabela deve ser iniciada com a marcao <table> e encerrada com </table>. ATENO: Dessa forma a tabela vai aparecer sem bordas, mas dividindo linhas e clulas. Para que a tabela aparea com bordas simples, defina dessa forma <table border></table>. Antes e depois de uma tabela, acontece sempre uma quebra de linha. x <TR></TR> Cada linha de uma tabela deve sempre aparecer entre as marcaes <tr> e </tr>. (TR = Table Row) x <TD></TD> Esta a marcao que define cada clula de uma tabela. As clulas de uma tabela devem sempre aparecer entre as marcaes de linhas (<tr> e </tr>). Como padro, o texto nas clulas alinhado a esquerda. x <TH></TH> Desta forma so definidos os ttulos de uma tabela. Estes podem ser posicionados em qualquer clula. A diferena entre a marcao de clula e ttulo de clula que o ttulo aparece em negrito. Vamos ver ento o exemplo de uma tabela utilizando essas marcaes bsicas. <table border> <tr> <td>Itens/Ms</td> <th>Janeiro</th><th>Fevereiro</th><th>Maro</th> </tr> <tr>
35
<th>Usuarios</th><td>80</td><td>93</td><td>120</td> </tr> <tr> <th>Linhas</th><td>3</td><td>3</td><td>5</td> </tr> </table> Vai aparecer dessa forma:
36
1.2. Atributos As marcaes das tabelas, podem apresentar resultados diferentes, se acompanhadas de alguns atributos. Vamos ver os principais: x <BORDER> Esse atributo aparece junto a marcao TABLE. Caso esse atributo no aparea, a tabela no ter bordas. Ou seja, como j vimos, para obter uma tabela com bordas, ela deve ser delimitada pelas marcaes <table border> </table>. x <ALIGN> Este atributo pode ser aplicado a TR,TH e TD, e controla como ser o alinhamento do texto dentro de uma clula, com relao s bordas laterais. Aceita os valores left, center, right, respectivamente para alinhar a esquerda, centralizar ou alinhar a direita. Veja o exemplo: <table border> <tr> <td>Primeira clula</td><td>Segunda clula</td><td>Terceira clula</td> </tr> <tr> <td align=center>centro</td> <td align=left>esquerda</td> <td align=right>direita</td> </tr> </table>
37
Aparece assim:
38
x <VALIGN> Pode ser aplicado a TR,TH e TD, e define o alinhamento do texto nas clulas com relao a borda superior e inferior. Aceita os valores top, middle e bottom <table border> <tr> <td> Teste para linhamento<br> com relao a bordas<br> inferior e superior<br> </td> <td valign=top> TOP </td> <td valign=middle>MIDDLE</td> <td valign=botton>BOTTOM</td> </tr> </table> Aparece assim:
x <NOWRAP> Este atributo evita que haja uma quebra de linha dentro de uma clula. Cautela ao utiliz-lo, para no produzir clulas muito largas. x <COLSPAN> Pode ser aplicado a TH ou TD. Define quantas colunas uma clula poder abranger. Por padro cada clula corresponde a uma coluna, ou seja COLSPAN=1.
39
Vejamos um exemplo <table border> <tr> <td colspan=3>3colunas</td><td>normal</td><td>normal</td> </tr> <tr> <td>col 1</td><td>col 2</td><td>col3</td><td>col 4</td><td>col 5</td> </tr> </table> Que fica assim:
x <ROWSPAN> Este atributo pode ser aplicado a clulas (TH e TD) e define quantas linhas uma mesma clula pode abranger. Assim como na marcao anterior, o padro uma clula corresponder a uma linha. Novamente, vamos ver exemplos: <table border> <tr> <td rowspan=3>3 linhas</td> <td>col 2</td><td>col 3</td><td>col4</td><td>col5</td> </tr> <tr> <td>col 2</td><td>col 3</td><td>col4</td><td>col 5</td> </tr> <tr> <td>col 2</td><td>col 3</td><td>col4</td><td>col 5</td> </tr> </table> Apresenta-se dessa forma:
40
41
1.3. Outros elementos de controle Vamos ver agora mais um conjunto de extenses que permitem maior controle sobre tabelas. Estas so especialmente teis na criao de mltiplas tabelas intercaladas. x BORDER=<value> Acrescentando um valor ao atributo BORDER possvel colocar tabelas em maior destaque: <table border=5> <tr> <td>teste1</td> <td>teste2</td> <td>teste3</td> </tr> <tr> <td>teste4</td> <td>teste5</td> <td>teste6</td> </tr> </table>
x CELLSPACING=<value> Este atributo aplicvel marcao TABLE. Como padro, o Netscape 1.1 utiliza espao 2 entre as clulas. Este atributo define o espao entre cada clula na tabela. <table border cellspacing=5> <tr> <td>teste1</td> <td>teste2</td> <td>teste3</td> </tr> <tr> <td>teste4</td> <td>teste5</td> <td>teste6</td> </tr> </table>
42
x CELLPADDING=<value> Este atributo aplicado tambm marcao TABLE e define a distncia entre o texto e a borda de cada clula. Veja exemplo: <table border cellpadding=8> <tr> <td>teste1</td> <td>teste2</td> <td>teste3</td> </tr> <tr> <td>teste4</td> <td>teste5</td> <td>teste6</td> </tr> </table>
A tabela mais compacta possvel seria definida como: <table border=0 cellspacing=0 cellpadding=0>
43
x WIDTH=<value or percent> Este atributo pode ser aplicado tanto a TABLE como a TH e TD. A ele tanto pode ser associado um valor em "pixels" (ponto em tela grfica), como um valor percentual. Ou seja, determina o quanto da tela uma tabela ou clula de tabela dever ocupar. Vamos ver os exemplos: <table border width=50%> <tr> <td>segunda</td> <td>terça</td> <td>quarta</td> </tr> <tr> <td>quinta</td> <td>sexta</td> <td>sábado</td> </tr> </table>
Segundo exemplo - aplicando width a uma clula: <table border> <tr> <td width=50%>segunda</td> <td>tera</td> <td>quarta</td> </tr> <tr> <td>quinta</td> <td>sexta</td> <td>sbado</td> </tr>
44
</table>
45
2. Tabela de Comandos x Marcaes: <table> e </table> = define incio e fim da tabela. <tr></tr> = define cada linha da tabela <td></td> = define cada clula da tabela. Um conjunto de clulas aparece sempre delimitado pelas marcaes de linha (<tr></tr>). <th></th> = define ttulos na tabela. Na pr´tica so clulas onde o texto aparece em destaque (negrito). Podem aparecer em qualquer posio na tabela. x Atributos <border> = determina que uma tabela tenha bordas. Aparece sempre associado a marcao <TABLE BORDER>. <align> = Controla o alinhamento horizontal do texto em uma linha ou clula. Pode aparecer associado a TR, TD ou TH. Aceita os valores: left = esquerda alinha right = alinha a center direita centraliza =
Como nos exemplos: <tr align=center> <td align=left> <th align=right>
<valign> = controla o alinhamento vertical do contedo de cada clula da tabela. Pode aparecer associado a TR, TD ou TH. Aceita os valores: top = alinha com o alto da clula middle = alinha no meio bottom = alinha com a parte de baixo da clula Como nos exemplos: <tr align=top> <td align=middle> <th align=bottom> <rowspan> = Aparece associado a clulas (TD ou TH) e determina quantas linhas uma clula abrange.
46
Ex: <rowspan=2> , <rowspan=3> ... <colspan> = Aparece associado a clulas (TD ou TH) e determina quantas colunas uma clula abrange. Ex: <colspan=2> , <colspan=3> ... x Atribuio de Valores BORDER=<value> = define a largura da borda CELLSPACING=<value> = define espaamento entre clulas CELLPADDING=<value> = define distncia entre o texto e a borda das clulas WIDTH=<value or percent> = determina o quanto da tela uma tabela deve ocupar
47
PARTE III - FORMULRIOS

Formulrios Eletrnicos Este tutorial uma traduo e adaptao do Carlos' FORM Tutorial c-pero@uiuc.edu 1. Sobre este Tutorial Neste tutorial, voc vai aprender a criar "Formulrios Eletrnicos", que permitem um usurio do Web submeter informaes para o provedor do servio. Existem vrios tipos de campos de entrada, como: x x x x campos de entrada de texto menus de mltipla escolha ou escolha nica botes sim-ou-no botes para submisso ou limpeza de formulrio
Cada uma destes campos tem funcionalidade prpria e voc vai aprender em que situao utilizlos em seus formulrios. Para melhor compreender a notao utilizada nos formulrios, voc primeiro precisa se familiarizar com HTML (Hypertext Markup Language). Consulte, se necessrio, o nosso tutorial sobre HTML bsico disponvel em http://www.cr-df.rnp.br/hipertextos/cr-df/cursos/html1/ Se voc j conhece HTML, as marcaes utilizadas em formulrios seguem a mesma conveno, e portanto, ser fcil aprender. Contudo, formulrios HTML sempre seguem um padro: <TITLE>Ttulo do Documento</TITLE> no incio, e o restante do documento a seguir. Alm disto, as marcaes que definem o formulrio precisam ser iniciadas e finalizadas, como estas marcaes de listas.
<UL> <LI>Primeiro item da lista <LI>Segundo item da lista </UL> <FORM>
48
contedo do formulrio... </FORM>
Uma ltima observao: voc pode ter mltiplos formulrios em um nico hiperdocumento. Apenas certifique-se que os blocos <FORM></FORM> no se sobrepem.
49
2. Codificao bsica Como vimos, um formulrio comea com a marcao <FORM> e termina com </FORM>. Outros itens devem ser especificados: x Primeiro, o formulrio precisa saber como enviar a informao para o servidor. Existem dois mtodos, GET e POST. METHOD="GET" A maioria dos documentos HTML so recuperados a partir da requiso de uma nica URL ao servidor. Assim, um formulrio que utilize este mtodo, envia toda sua informao ao final da URL ativada. METHOD="POST" Este mtodo transmite toda a informao fornecida via formulrio, imediatamente aps a URL ativada. Ou seja, quando o servidor recebe uma ativao de um formulrio utilizando POST ele sabe que precisa continuar "ouvindo" para obter a informao. Este o melhor mtodo. x Segundo, o formulrio precisa saber para onde enviar a informao. Esta a URL sendo ativada a partir do formulrio, e ela referenciada atravs da marcao ACTION. Esta URL em geral aponta para um script CGI que ir receber e decodificar os resultados. Lembre-se que se voc est referenciando um script que reside no mesmo servidor do formulrio, voc no precisa incluir a URL completa. ACTION="/cgi-bin/post-query" para um script no seu servidor ACTION="http://www.cr-df.rnp.br/cgi-bin/post-query" para um script no servidor do CR/DF Aps voc construir estas marcaes, seu formulrio geralmente ter a seguinte estrutura: <FORM METHOD="POST" ACTION="/cgi-bin/post-query"> Marcaes de campos de entrada e HTML em geral </FORM>
Observe que este formulrio utiliza o mtodo POST e envia as informaes digitadas para um script local chamado post-query no diretrio /cgi-bin do servidor. Outra informao importante: cada marcao de entrada em um formulrio tem uma opo NAME associada, de tal forma que o script saiba qual o nome, isto , como chamar cada valor digitado. Certamente voc pode definir mais de um campo de entrada textual ou menu dentro de um formulrio, mas certifique-se de que cada um possui um nome diferente.
50
3. Texto 3.1. Entrada de texto comum - TEXT 3.2. Entrada de texto protegido, senha - PASSWORD 3.3. Entrada oculta - HIDDEN 3.4. Entrada de vrias linhas de texto - TEXTAREA 3.1. Entrada de texto comum - TEXT A forma mais simples de campo de entrada a marcao text. Este campo permite a digitao de uma nica palavra ou linha de texto, e possui uma largura default de 20 caracteres. Opes: VALUE="" OPCIONAL Utilizando a marcao VALUE voc especifica que texto aparecer no campo quando o formulrio for exibido. SIZE="" OPCIONAL Esta marcao altera o tamanho deste campo exibido na tela. Obs.: o usurio sempre poder digitar mais caracteres do que o tamanho do campo na tela, pois o texto ir se deslocar a esquerda dentro do campo. MAXLENGTH="" OPCIONAL Se voc deseja limitar o nmero de caracteres que o usurio pode digitar, basta usar esta marcao. O formulrio ir emitir um bip de erro se o usurio tentar digitar alm do permitido em MAXLENGTH. <FORM METHOD="POST" ACTION="/cgi-bin/post-query"> Qual o seu primeiro nome? <INPUT TYPE="text" MAXLENGTH="15"> </FORM>
NAME="primeiro_nome"
VALUE="carlos"
SIZE="10"
Obs.:
51
x O valor informado em NAME deve utilizar sublinhado em vez de espaos em branco. Inserir espaos em branco nestes nomes pode causar problemas no servidor na decodificao dos valores informados. x Se seu formulrio possui apenas um campo de entrada textual, ao teclar ENTER neste campo o formulrio ser submetido, como se o usurio tivesse acionado o boto SUBMIT.
52
3.2. Entrada de texto protegido, senha - PASSWORD Marcaes de entrada do tipo password so idnticas aos campos do tipo text, exceto pelo fato de todos os caracteres serem exibidos como asteriscos ( *). Opes: VALUE="" OPCIONAL A marcao VALUE especifica um valor default para este campo. SIZE="" OPCIONAL Esta troca o tamanho do campo de password exibido na tela. MAXLENGTH="" OPCIONAL Limita o nmero de caracteres que o usurio pode informar como password. <FORM METHOD="POST" ACTION="/cgi-bin/post-query"> Informe sua senha de acesso (8 caracteres): <INPUT TYPE="password" VALUE="xpto" MAXLENGTH="8"> </FORM>
NAME="sua_senha"
SIZE="8"
Obs.: x Se voc pretende utilizar MAXLENGTH para limitar o nmero de caracteres informados, tenha certeza de especificar um SIZE com o mesmo tamanho, para fornecer ao usurio o sentimento de qual a largura do campo. Esta regra no foi utilizada no primeiro exemplo, que possui SIZE igual a 10, mas MAXLENGTH de 15, o que faz o campo se deslocar nos ltimos 5 caracteres caso o valor informado possua mais do que 10 caracteres. x Mesmo que o valor default VALUE esteja representado por asteriscos, o usurio pode visualizar o seu valor atravs da recuperao do fonte do hiperdocumento em HTML (uma opo comum na maioria dos clientes WWW).
53
3.3. Entrada oculta - HIDDEN Alm da marcao PASSWORD com um valor VALUE default, possvel "esconder" informao passada dentro de blocos FORM com uma marcao HIDDEN. Esta informao recebida pelo script de decodificao no servidor, mas no diretamente exibida ao usurio no formulrio. Opes: VALUE="" OBRIGATRIO Atravs da marcao VALUE, voc deve especificar o texto oculto a ser enviado ao script processador do formulrio. <FORM METHOD="POST" ACTION="/cgi-bin/post-query"> Voc no pode visualizar nada aqui embaixo. <INPUT TYPE="hidden" NAME="nome_oculto" VALUE="form12"> </FORM>
Obs.: x Mesmo que o valor especificado em HIDDEN VALUE no seja exibido no formulrio, o usurio pode v-lo atravs da operao de visualizao do fonte do hiperdocumento, da mesma forma como no campo PASSWORD.
54
3.4. Entrada de vrias linhas de texto - TEXTAREA A marcao TEXTAREA no utiliza o formato convencional INPUT TYPE="text" dos exemplos anteriores. Ao contrrio, uma marcao <TEXTAREA> delimita o seu incio e a marcao </TEXTAREA> o seu fim. Opes: ROWS="" OBRIGATRIO Especifica o nmero de linhas da entrada textual. COLS="" OBRIGATRIO Especifica o nmero de colunas da entrada textual. Texto default OPCIONAL Se voc deseja que um texto seja exibido no campo textual ao abrir o formulrio, simplesmente coloque este texto entre as marcaes de incio e fim da TEXTAREA. <FORM METHOD="POST" ACTION="/cgi-bin/post-query"> Por favor, escreva aqui suas sugestes, dvidas e crticas:<BR> <TEXTAREA NAME="critica" ROWS="3" COLS="40"> Gostaria de obter mais informaes sobre este servidor. Grato. </TEXTAREA> </FORM>
Obs.: x O usurio dispe de Scrollbars para digitar alm do nmero de linhas e colunas definidas em ROWS e COLS.
55
4. Menus 4.1. Menus com opes - SELECT 4.2. Listas paginvies - SELECT com SIZE 4.1. Menus com opes - SELECT Menu de opo nica A marcao SELECT segue a mesma convenco de TEXTAREA. Ou seja, as opes de menu ficam entre a marcao de incio <SELECT> e a de fim </SELECT>. Opes: OPTION OBRIGATRIO Especifica uma opo presente no menu. VALUE="" OPCIONAL Especifica o valor da opo retornada ao servidor. Se no for definido, o nome da opo enviado ao servidor. SELECTED OPCIONAL Por default, a primeira OPTION exibida no menu. Esta marcao estabelece uma opo de menu a ser exibida inicialmente, quando no se deseja que seja a primeira OPTION. <FORM METHOD="POST" ACTION="/cgi-bin/post-query"> Onde voc pretende fazer turismo nas frias? <SELECT NAME="lugares_para_ver"> <OPTION>Fortaleza <OPTION VALUE="sul">Florianpolis ou Porto Alegre <OPTION>Rio de Janeiro <OPTION SELECTED>Braslia <OPTION VALUE="amazonia">Manaus </SELECT> </FORM>
56
Obs.: x Se voc possui mais do que 3 ou 4 opes de escolha, e o usurio s pode selecionar uma, ento este elemento de entrada o melhor. As pessoas frequentemente utilizam vrios RADIOBUTTONS, que veremos a seguir. x O script decodificador, no servidor, provavelmente apreciar uma nica palavra para VALUE, em vez de mltiplas palavras. Voc sempre pode utilizar sublinhado para separar expresses compostas.
4.2. Listas paginveis - SELECT com SIZE A nica diferena entre este elemento de entrada e o anterior SELECT a introduo da opo SIZE. Ela especifica quantas linhas com opes de menu sero exibidas na janela. Opes: MULTIPLE OPCIONAL Especifica que mltiplas opes podem ser selecionadas, em oposio ao exemplo anterior do SELECT, onde apenas uma opo pode ser selecionada no menu. SIZE="" OBRIGATRIO Nmero de linhas (opes de menu) exibidas na janela. OPTION OBRIGATRIO Especifica uma opo da lista. VALUE="" OPCIONAL Especifica o valor da opo retornada ao servidor. Se no for definido, o nome da opo enviado ao servidor. SELECTED OPCIONAL Esta opo determina uma OPTION default para ser selecionada.
57
<FORM METHOD="POST" ACTION="/cgi-bin/post-query"> Que facilidades de acomodao voc deseja?<BR> <SELECT NAME="opcional" MULTIPLE SIZE="5"> <OPTION>Televiso <OPTION VALUE="casal" SELECTED>Cama de Casal <OPTION>Ar Condicionado <OPTION>Fax <OPTION SELECTED>Modem V.34 <OPTION>Sauna <OPTION>Lavanderia <OPTION>Frigo-Bar </SELECT> </FORM>
Obs.: x Este elemento de entrada bom para listas com muitas opes, porque possvel controlar quantas sero exibidas por vez. x Em alguns clientes WWW, necessrio teclar simultaneamente as teclas CONTROL ou SHIFT para selecionar mltiplos itens.
58
5. Botes 5.1. Botes sim ou no - CHECKBOX 5.2. Botes com opes - RADIO 5.3. Botes de submisso e limpeza 5.1. Botes sim ou no - CHECKBOX Retornando ao formato de INPUT TYPE="", a marcao CHECKBOXES perfeita para escolher entre duas opes. Opes: VALUE="" OPCIONAL Especifica o valor da opo enviado ao servidor. Se no for definido, o valor "on" enviado ao script decodificador. CHECKED OPCIONAL Esta marcao define a opo selecionada por default. <FORM METHOD="POST" ACTION="/cgi-bin/post-query"> <INPUT TYPE="checkbox" NAME="boletim" CHECKED>Sim, eu desejo receber o boletim de notcias. <P> <INPUT TYPE="checkbox" NAME="info">Sim, eu gostaria de receber mais informaes tursticas. </DL> </FORM>
Obs.: x Este elemento funciona melhor para respostas do tipo "sim/no" ou "on/off". x Voc pode simular uma lista SELECT MULTIPLE criando CHECKBOXES com o mesmo NAME, mas diferentes VALUES
59
5.2. Botes com opes - RADIO RADIOBUTTONS utilizam uma notao similar a de CHECKBOXES, contudo, apenas uma opo pode ser escolhida. Opes: VALUE="" OBRIGATRIO Especifica o valor da opo a ser enviado para o servidor. Se no for definido, um valor "on" enviado ao script decodificador. CHECKED RECOMENDADO Esta marcao especifica qual boto estar selecionado por default. Uma vez que uma seleo precisa ser feita, melhor prover uma opo pre-selecionada. <FORM METHOD="POST" ACTION="/cgi-bin/post-query"> Suas preferncias na viagem: <DL> <DD>Classe do Bilhete: <INPUT TYPE="radio" NAME="classe" VALUE="eco">econmica <INPUT TYPE="radio" NAME="classe" VALUE="exe">executiva <INPUT TYPE="radio" NAME="classe" VALUE="pri" CHECKED>primeira <DD>Localizao: <INPUT TYPE="radio" NAME="local" VALUE="frente">rea fumante <INPUT TYPE="radio" NAME="local" VALUE="tras">rea no fumante </DL> </FORM>
60
Obs.: x Como j foi mencionado, RADIOBUTTONS no so boa escolha para listas com muitos itens, porque o cliente tem problemas para exibir muitos botes. melhor utilizar o menu SELECT. x Uma vez que um boto selecionado, ele no pode ser desmarcado sem selecionar outro boto que possua o mesmo NAME. A seleo default pode ser restaurada com a utilizao do boto RESET, introduzido a seguir. x Se voc utiliza vrios RADIOBUTTONS com o mesmo NAME e nenhum VALUES, o servidor no ser capaz de dizer que boto foi selecionado, uma vez que o valor "on" ser retornada para qualquer um deles.
61
5.3. Botes de submisso e limpeza - RESET E SUBMIT Em vez do usurio corrigir cada INPUT, um boto RESET pode ser utilizado para restaurar todos os campos a seus valores default, como se nenhuma informao houvesse sido digitada. E finalmente, o FORM precisa de uma opo para enviar toda a informao digitada para o servidor, uma vez que o usurio terminou de preencher os todos os campos de entrada. O boto SUBMIT transfere toda a informao para a URL especificada no elemento ACTION. Opes: VALUE="" OPCIONAL Especifica o texto a ser exibido no boto. Se no for especificado, os textos default "Reset" e "Submit Query" sero colocados nos botes RESET e SUBMIT, respectivamente. NAME="" OPCIONAL Se NAME for definido em um boto SUBMIT, o formulrio ir transmitir o valor do contedo do elemento VALUE, permitindo que voc tenha mltiplos botes SUBMIT numa espcie de verso simplificada de um RADIOBUTTONS. <FORM METHOD="POST" ACTION="/cgi-bin/donothing"> Qual o seu primeiro nome? <INPUT TYPE="text"><BR> Aperte este boto: <INPUT TYPE="radio" NAME="nada"><BR> <INPUT TYPE="reset" VALUE="Limpa campos"> <INPUT TYPE="submit"> </FORM>
Obs.: x Normalmente, o script decodificador retorna um hiperdocumento aps ele processar a informao do formulrio. x Nem todos os clientes suportam mltiplos botes SUBMIT. melhor utilizar apenas um nico boto SUBMIT para transmitir a informao digitada no formulrio.
62
PARTE IV - EXTENSES DO NETSCAPE

Extenses do Netscape Este documento uma traduo e adaptao do documento disponvel em (http://home.mcom.com/assist/net_sites/html_extensions.html) A Netscape Communications desenvolveu uma srie de extenses especficas, seguem algumas abaixo.Um documento completo sobre estas extenses est disponvel na Netscape.Com, em: (http://home.mcom.com/assist/net_sites/html_extensions.html) x <HR> A netscape desenvolveu 5 novas tags para serem aplicadas junto marcao HR (horizontal rule) <HR SIZE=nmero> A tag SIZE define a largura da linha horizontal. <HR WIDTH=percentual> A linha padro ocupa toda a extenso da tela. Com esta Tag possvel determinar o percentual de ocupao da tela de um linha. <HR ALIGN=left|right|center> Assim possvel alinhar linhas horizontais que no ocupem toda a tela, seja direita, esquerda, ou centralizadas. <HR NOSHADE> Produz uma linha realmente slida, sem nenhum tipo de sombra. x <UL> Utilizando-se as extenses TYPE=disc, TYPE=circle, or TYPE=square possivel definir o formato do indicador de uma lista no numerada (UL) x <OL> Da mesma forma, possvel definir o tipo de algarismos em listas numeradas, usando as extenses: (TYPE=A) para letras maisculas (TYPE=a) para letras minsculas (TYPE=I) para numerais romanos grandes (TYPE=i) para numerais romanos pequenos (TYPE=1) nmeros padro Para listas que devem comear com valores diferentes de 1, pode se usar a tag START. Por exemplo, START=5 vai exibir 'E', 'e', 'V', 'v', or '5' de acordo com a tag TYPE.
63
x <LI> marcao LI tambm podem ser atribuidas extenses TYPE, como em UL e OL, conforme explicado acima. Para listas numeradas pode ser usado VALUE para atribuir um valor a um item. x <IMG> <IMG ALIGN=left|right|top|texttop|middle|absmiddle|baseline|bottom|absbottom> A marcao ALIGN=left far com que os demais elementos sejam alinhados direita e abaixo da imagem. Assim possvel fazer um texto contornar uma figura alinhada a esquerda da pgina. ALIGN=right se comporta de modo semelhante, mas na borda direita da tela. As novas extenses para HTML do NETSCAPE possibilitam ainda: ALIGN=top, ALIGN=texttop, ALIGN=middle, ALIGN=absmiddle, ALIGN=baseline, ALIGN=bottom e ALIGN=absbottom, permitindo refinamentos no controle de alinhamento. <IMG WIDTH=valor HEIGHT=valor> As marcaes WIDTH e HEIGHT podem definir o tamanho da imagem, acelerando o trabalho do browser. Ao invs de esperar a imagem chegar, o browser sabe previamente seu tamanho, agilizando a transferncia. tambm possvel alterar o tamanho original de uma imagem usando-se destas marcaes. No entanto, desta forma, pode se perder a qualidade da imagem. <IMG BORDER=value> Define a espessura da borda de uma imagem. Pode-se usar border=o por exemplo para eliminar bordas de imagens que esto definidas como links. <IMG VSPACE=valor HSPACE=valor> Para as images flutuantes, VSPACE controla o espao vertical acima e abaixo da figura, enquanto HSPACE controla o espao horizontal a esquerda e a direita da figura. Novos Elementos x <NOBR> NOBR define que uma linha no pode ser quebrada em sua exibio. utilizado em par = <NOBR>e</NOBR>. x <WBR> WBR significa Word BReak. utilizado em uma linha definida como NOBR, para determinar em qual palavra a linha pode ser quebrada se necessrio. No produz um BR automtico, mas indica ao browser onde quebrar a linha se necessrio.
64
x <FONT SIZE=valor> </FONT> Com esta marcao voc pode definir tamanho de fonte. So aceitos valores entre 1-7. O tamanho padro da marcao FONT 3. O valor tambm pode ser definido opcionalmente com os caracteres '+' or '-' , antes do nmero. x <BASEFONT SIZE=value> Altera o tamanho da BASEFONT relativo a todas as marcaes FONT. O padro 3. x <CENTER> Utilizado aos pares para centralizar elementos do seu texto em html. Novas Entidades Alm dos caracteres especiais j em uso, foram criados: ® -> Marca Registrada -> © -> Copyright ->
65
PARTE V - FRAMES
Documentos com mltiplas Janelas - Frames Este tutorial uma traduo e adaptao do documento Frames Syntax: http://home.mcom.com/assist/net_sites/frame_syntax.html 1. Sobre este Tutorial Neste tutorial, vamos ver uma facilidade ainda no "sacramentada" para os HTMLeiros , mas que promete vir por a. a possibilidade de se dividir um hipertexto em mltiplas janelas (frames). Agora, ateno por que at esse exato momento, janeiro 1996 s conheo um browser que l essa facilidade. o Netscape, a partir da versao 2.0. Ento, muito cuidado, recomendvel que voc crie sempre uma opo de navegao para quem estiver usando um browser que no enxerga frames. Vamos ver como faz-lo. Uma ltima observao antes de partirmos para a festa. Aqui importante que voc j conhea HTML - Hypertext Markup Language. Se no conhece, sem problema tambm, d uma lida cuidadosa nos nossos outros tutoriais sobre HTML, disponveis em http://www.crdf.rnp.br/hipertextos/cr-df/cursos/ . Este tutorial faz parte de um conjunto de mdulos destinados a quem deseja publicar/prover informao na Internet, atravs de servio do tipo WWW (World Wide Web). Atualmente - janeiro de 1996 - este conjunto compreende 7 mdulos: 1. 2. 3. 4. 5. 6. 7. Introduo Geral a Internet HTML Bsico Tabelas em HTML Formulrios em HTML Mltiplas Janelas - Frames Extenses do Netscape Guia de Estilo
Informaes adicionais podem ser solicitadas a webmaster@cr-df.rnp.br
66
2. Estrutura Bsica - Frame Document O "Frame Document" um arquivo onde se define a estrutura das janelas para seu hiperdocumento em HTML. Quantas sero e qual sua distribuio em tela. Neste documento as marcaes <body> e seu par </body> so substitudas por <frameset> e </frameset>. Tal arquivo pode ser, por exemplo, o arquivo index.html de qualquer nvel na estrutura do seu servio de informaes baseado em WWW. Pronto, agora preciso definir cada frame/janela internamente (s) rea(s) de frameset. Ou seja, as caractersticas de cada janela e seus "contedos" - URL incial. Cada janela/frame antecedido da marcao <frame>, como numa lista cada item antecedido por <li>. Usualmente, uma URL vir associada a cada frame. A estrutura mnima do frame document ser ento:
<html> <head> <title></title> </head> <frameset ...> <frame src="URL"> <frame src="URL"> </frameset> </html>
x Ateno: Note que com apenas essas marcaes o documento da estrutura Frame Document - no funciona. necessrio que esteja definido algum atributo para as reas de frameset, assim como associadas URLs a cada frame, como veremos mais adiante. x Ateno II: Voc poder ter - e provavelmente ter - vrios <frameset> intercalados. Da mesma foma como possvel intercalar listas, ou tabelas em HTML.
Cada uma destas marcaes - <frameset> e <frame> - aceita extenses, valores e atributos, como veremos a seguir.
67
3. Sintaxe 3.1. Frameset 3.2. Frame 3.3. Noframes 3.1. Frameset Frameset aceita os atributos ROWS e COLS, referentes divises horizontais(como linhas em uma tabela) e verticais (como colunas) entre janelas na tela. Internamente a marcaes FRAMESET s podero aparecer outras FRAMESET, FRAME ou NOFRAMES. Importante: No podem ser utilizadas as marcaes vlidas entre marcaes <BODY></BODY> nem internamente a marcaes FRAMESET, nem antes dela, seno FRAMESET ser ignorada. ATRIBUTOS 1. ROWS (<frameset rows=valor, valor, valor...>) Define divises horizontais.entre janelas. Vem sempre acompanhado de valores associado, que definem quanto da tela cada janela vai ocupar. Dessa forma, para cada janela a ser criada dever haver um valor associado. Estes valores devem vir separados por vrgulas. Este valor poder ser: x Numrico - pixels=> (ROWS="30, 50") Refere-se a quantos pixels cada frame (ou janela) deve ocupar. A desvantagem desta notao que no possvel ter controle do valor total de pixels que o cliente do usurio compreende. x Percentual=> (ROWS="25%, 25%, 50%") Pode ainda ser um valor percentual, sempre somando um valor de 100%. o mtodo mais simples. x Relativo=> (ROWS="2*,*") Desta forma, define-se um valor relativo. No exemplo, o primeiro frame vai ocupar dois teros da tela, e o segundo um tero.
68
Exemplos : 1. Para dividir a tela do browser em trs janelas horizontais, sendo que a do meio mais larga que as de cima e de baixo:
<html> <head> <title></title> </head> <frameset rows="20%, 20%"> <frame src="cell1.html"> <frame src="cell2.html"> <frame src="cell3.html"> </frameset> </html> 2.Trs janelas horizontais, sendo que a primeira e a segunda tem uma altura fixa, e o frame central dever ocupar o restante do espao: 60%,
<html> <head> <title></title> </head> <frameset rows="30, *, 50"> <frame src="cell1.html"> <frame src="cell2.html"> <frame src="cell3.html"> </frameset> </html>
69
2. COLS (<frameset cols=valor, valor, valor.. >) Funciona exatamente como a marcao anterior, no entanto, divide a tela em frames ou janelas verticais. Exemplos Para dividir a tela do browser em trs janelas verticais 1.Trs colunas, sendo que a do meio mais larga que as de cima e de baixo:
<html> <head> <title></title> </head> <frameset ,20%"> cols="20%, 60%
<frame src="cell1.html"> <frame src="cell2.html"> <frame src="cell3.html"> </frameset> </html>
70
2.Trs janelas verticais, sendo que a primeira e a segunda tem uma altura fixa, e o frame central dever ocupar o restante do espao:
<html> <head> <title></title> </head> <frameset 100"> cols="200, *,
<frame src="cell1.html"> <frame src="cell2.html"> <frame src="cell3.html"> </frameset> </html>
Ateno, para intercalar janelas verticais e horizontais, ser necessrio definir vrias reas "FRAMESET". Para cada rea delimitida como "FRAMESET" voc poder definir nmero de linhas OU colunas. Veremos como faz-lo mais adiante. No possvel definir COLS e ROWS para uma mesma rea FRAMESET.
71
3.2. Frame A marcao FRAME define cada janela contida em uma rea frameset. Esta marcao no necessita de uma tag de finalizao (</frame>) e aceita 6 atributos possveis: 1. SRC="URL" O atributo SRC define a URL que ser exibida em cada frame. 2. NAME="nome_da_janela" Este atributo utilizado para associar um nome a uma janela. Deve ser usado quando uma janela - frame - for o destino de um link em outro documento (normalmente no mesmo documento. Um frame apontando para outro. Tipo um ndice abrindo vrias URLs em outras janelas). Este atributo opcional. Por padro, os frames no tem nome. Importante, o nome_da_janela deve comear por caracter alfanumrico. 3. MARGINWIDTH="valor" Esse atributo controla as margens esquerda e direita de cada frame, ou seja, a distncia entre o contedo da pgina e as margens da janela. O valor associado ser um valor absoluto em pixels. O menor valor aceito ser 1. Este atributo opcional, caso no venha definido, o browser usar o seu padro para definir as margens no frame/janela. 4. MARGINHEIGHT="valor" Tambm um atributo opcional. Funciona exatamente como o anterior, s que determina as margens superior/inferior em cada frame. 5. SCROLLING="yes/no/auto" Novamente, um atributo opcional, que define se uma janela deve possuir barra de rolagem ou no. Caso seja definido como YES, a janela sempre possuir uma barra de rolagem visvel. Caso seja definido como NO, nunca haver barra de rolagem. E, finalmente, se vier como AUTO, o browser aplicar a barra quando necessrio. O padro AUTO, portanto, se o atributo scrolling no vier definido, o browser aplicar a barra de rolagem, sempre que necessrio. 6. NORESIZE Este atributo no possui valor associado. Quando ele no aparece, o usurio poder alterar o tamanho da janela, "arrastando" com o cursor a borda da mesma. O padro que todas as janelas possam ter seu tamanho alterado. NORESIZE opcional Um frame, com todos os atributos definidos seria escrito assim, por exemplo: <frame src=http://www.cr-df.rnp.br name=home marginheight=5 scrolling=auto noresize> marginwidth=5
72
3.3. Noframes Esta marcao possibilita que se crie uma opo de navegao na pgina para quem no possui um browser que entende frames. Esta marcao aparece no documento de estrutura "Frame document", e sempre usada em pares (<noframes>.. contedo... </noframes>). Quando o acesso for feito atravs de um browser que entenda frames, o que estiver entre as marcaes "noframes" ser simplesmente ignorado. Internamente a uma rea "noframes" dever ser usada a estrutura padro de documentos html (<head> </head>, <title> </title> <body> </body>, etc...). Um exemplo: <html> <head> <title>Teste, uso de frames</title> </head> <FRAMESET ROWS="15%, 85%"> <NOFRAMES> <body bgcolor="#000000" text="#ffff00" link="#ff0000" > Bem-vindo a uma pgina de teste.<p> Para acess-la, voc deve utilizar a verso 2.0 ou acima do <i>browser</i><a href="http://home.netscape.com/comprod/mirror/index.html"> Netscape Navigator!</a> </p> <hr> </body> </NOFRAMES> <FRAMESET COLS="25%, 75%"> <FRAME NAME="1" SRC="teste1.htm" NORESIZE> <FRAME NAME="2" SRC="teste2.htm" NORESIZE> </FRAMESET> <FRAMESET COLS="30%, 70%"> <FRAME NAME="3" MARGINWIDTH="50" SRC="teste3.htm"> <FRAMESET ROWS="65%, 35%"> <FRAME NAME="4" SRC="teste4.htm" NAME="chat"> <FRAME NAME="5" SRC="teste5.htm"> </FRAMESET> </FRAMESET> </FRAMESET> </html> Veja como ela exibida, por exemplo, com o MOSAIC (no l frame) e com o NETSCAPE (l frame).
73
MOSAIC - no l frame
NETSCAPE - l frame
74
4. Intercalando Frameset - exemplos Para tornar mais claro como se constrem mltiplas e intercaladas janelas - divises horizontais e verticais - utilizando das marcaes de frames, seguem abaixo dois exemplos de construo de documentos com mltiplas janelas. Exemplo 1 <html> <head> <title>Ttulo</title> </head> <frameset rows="30%, 70%"> <frameset cols="33%, 33%"> <frame src=""> <frame src=""> <frame src=""> </frameset> 33%,
<frameset cols="50%, 50%"> <frame src=""> <frame src=""> </frameset> </frameset> </html>
75
Exemplo 2: <html> <head> <title></title> </head> <frameset 85%"> rows="15%,
<frame src="teste5.htm"> <frameset cols="25%, 75%"> <frame src="teste4.htm"> <frameset rows="85%, 15%"> <frame src="teste3.htm"> <frame src="teste2.htm"> </frameset> </frameset> </frameset> </html>
76
5. Links entre frames A marcao TARGET, permite que se controle em qual janela um link especfico ser exibido quando o usurio clicar sobre ele. Por exemplo, pode-se ter uma janela lateral com uma espcie de indce do servio de informao e outra janela em que a navegao propriamente dita vai ocorrer. Desta forma, o ndice est permanentemente disponvel durante toda a consulta. Para utilizar este recurso voc dever: 1. Atribuir um "name" a cada frame em seu "frame document" (name="valor"). 2. No documento onde ser criado um link, que vai aparecer em outra janela, ao criar o link, acrescentar a marcao target="valor"" ncora, da seguinte forma: <a href="URL" target="valor"> Onde este valor idntico quele associado marcao name no frame document. Exemplo:
O frame document dever ser escrito assim: <html> <head> <title>Ttulo</title></head> <frameset rows="80%, 20%"> <frame name="navega"" src="teste3.htm"> <frame src="barra.htm">
o documento que contm o ndice de navegao (barra.htm), ser assim: <html> <head><title>Ttulo</title> </head> <body> <a href="http://www.cr-df.rnp.br/" target="navega"> [link para o cr-df]</a> <a href="http://www.cr-df.rnp.br/" target="navega"> [link para o cr-sp]</a>
77
</frameset> </html>
<a href="http://www.cr-df.rnp.br/" target="navega"> [link para o cr-pe]</a> </body> </html>
78
6. Cartela de Comandos Marcao x Estrutura Bsica <html> e </html> <head></head> Funo / caractersticas Delimita o "frame document", como em qualquer arquivo html normal. Define cabea do documento, novamente, como em qualquer arquivo html. delimita as janelas a serem usadas no documento. Podem haver vrios frameset intercalados. Controla o comportamente das janelas atravs de seus atributos. Define cada janela/frame. Normalmente possui uma URL associada. Aceita atributos e valores.
<frameset></frameset>
<frame src="URL"> x Sintaxe Para Frameset <frameset rows="valor, valor">
valor, define quantas linhas - janelas horizontais - e sua ocupao na tela, para cada rea frameset. Aparecero tantos valores quantas forem as janelas. Os valores relativos a cada janela devero ser separados por vrgulas . Cada valor associado poder ser: 1. Numrico - em pixels = <frameset rows="30, 50"> 2. Percentual = <frameset rows="25%, 25%, 50%"> Relativo = <"2*,*">; valor, define quantas colunas - janelas verticais - e sua ocupao da tela. Funciona exatamente como a marcao interior (associao de valores, com as mesmas opes). associa uma URL a uma janela associa um nome a uma janela determina margem direita/esquerda em cada frame determina margem superior/inferior em cada frame define presena, ausncia, ou atribuio automtica (pelo browser) de barras de rolagem mantm fixo o tamanho de cada janela/frame delimita rea para navegao opcional, destinada a quem usa browser que no entenda 'frame'.Internamente, recebe a marcao <body></body> delimitando o documento, e todas as demais marcaes HTML.
<frameset valor">
cols="valor,
Para Frame <frame SRC="URL"> <frame NAME="valor"> <frame MARGINWIDTH="valor"> <frame MARGINHEIGHT="valor"> <frame SCROLLING="yes/no/auto"> <frame NORESIZE > Para Noframes <noframe></noframe>
Target
79
<a href="URL" target="name">
Define a janela em que ser exibido um link ao ser ativado. O name associado dever ser idntico ao name atribudo a janela de destino no frame document.

HTML

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

HTML

Загружено:

Авторское право:

Доступные форматы

TUTORIAL - AUTORIA EM WORLD WIDE WEB HYPERTEXT MARKUP LANGUAGE (HTML)

REDE NACIONAL DE PESQUISA Dezembro de 1995

Tutorial - Autoria em World Wide Web - Hypertext Markup Language (HTML) -

PARTE I 1. Caractersticas Gerais do HTML

Tutorial - Autoria em World Wide Web - Hypertext Markup Language (HTML) -

2. Criando Documentos HTML

Tutorial - Autoria em World Wide Web - Hypertext Markup Language (HTML) -

Tutorial - Autoria em World Wide Web - Hypertext Markup Language (HTML) -

Tutorial - Autoria em World Wide Web - Hypertext Markup Language (HTML) -

Tutorial - Autoria em World Wide Web - Hypertext Markup Language (HTML) -

Tutorial - Autoria em World Wide Web - Hypertext Markup Language (HTML) -

Tutorial - Autoria em World Wide Web - Hypertext Markup Language (HTML) -

Tutorial - Autoria em World Wide Web - Hypertext Markup Language (HTML) -

Cada marcao <LI> pode conter vrios pargrafos.

Tutorial - Autoria em World Wide Web - Hypertext Markup Language (HTML) -

Tutorial - Autoria em World Wide Web - Hypertext Markup Language (HTML) -

Ser vista desta forma:

Tutorial - Autoria em World Wide Web - Hypertext Markup Language (HTML) -

exibida com este formato:

Tutorial - Autoria em World Wide Web - Hypertext Markup Language (HTML) -

Tutorial - Autoria em World Wide Web - Hypertext Markup Language (HTML) -

Tutorial - Autoria em World Wide Web - Hypertext Markup Language (HTML) -

Tutorial - Autoria em World Wide Web - Hypertext Markup Language (HTML) -

Tutorial - Autoria em World Wide Web - Hypertext Markup Language (HTML) -

Tutorial - Autoria em World Wide Web - Hypertext Markup Language (HTML) -

Tutorial - Autoria em World Wide Web - Hypertext Markup Language (HTML) -

As duas ltimas definem a posio da imagem na pgina, a direita ou esquerda:

Tutorial - Autoria em World Wide Web - Hypertext Markup Language (HTML) -

Tutorial - Autoria em World Wide Web - Hypertext Markup Language (HTML) -

Tutorial - Autoria em World Wide Web - Hypertext Markup Language (HTML) -

Tutorial - Autoria em World Wide Web - Hypertext Markup Language (HTML) -

2.11. Barras horizontais

Tutorial - Autoria em World Wide Web - Hypertext Markup Language (HTML) -

Tutorial - Autoria em World Wide Web - Hypertext Markup Language (HTML) -

Tutorial - Autoria em World Wide Web - Hypertext Markup Language (HTML) -

<P> <BR> <A HREF= > texto</a>

Tutorial - Autoria em World Wide Web - Hypertext Markup Language (HTML) -

<A HREF=#b> texto</a>

<A NAME=b >

ncora de nome b= cdigo ou palavra chave

<A HREF=MAILTO: xyz@algumlugar.br > <UL></UL>

Envio de email para endereo especificado

Delimita lista no numerada

Delimita lista numerada

Tutorial - Autoria em World Wide Web - Hypertext Markup Language (HTML) -

Tutorial - Autoria em World Wide Web - Hypertext Markup Language (HTML) -

<ADRESS> </ADRESS> <IMG SRC=>

Endereo Insero de imagem  = nome ou URL de arquivo imagem.

<IMG ALING= SRC=>

<HR> <HR SIZE=n>

Tutorial - Autoria em World Wide Web - Hypertext Markup Language (HTML) -

Tutorial - Autoria em World Wide Web - Hypertext Markup Language (HTML) -

Chocolate Violet Gold

Tutorial - Autoria em World Wide Web - Hypertext Markup Language (HTML) -

Blue Blue Pink Green

Tutorial - Autoria em World Wide Web - Hypertext Markup Language (HTML) -

Dark Light Red Green

Tutorial - Autoria em World Wide Web - Hypertext Markup Language (HTML) -

Tutorial - Autoria em World Wide Web - Hypertext Markup Language (HTML) -

Tutorial - Autoria em World Wide Web - Hypertext Markup Language (HTML) -

Tutorial - Autoria em World Wide Web - Hypertext Markup Language (HTML) -

Tutorial - Autoria em World Wide Web - Hypertext Markup Language (HTML) -

Tutorial - Autoria em World Wide Web - Hypertext Markup Language (HTML) -

Tutorial - Autoria em World Wide Web - Hypertext Markup Language (HTML) -

<P> <BR> <A HREF= > texto</a>

<ADRESS> </ADRESS> <IMG SRC=>

Endereo Insero de imagem = nome ou URL de arquivo imagem.

<IMG ALING= SRC=>