Trabalho HTML, CSS e JavaScript

Tipo de documento:Revisão Textual

Área de estudo:Tecnologia

Documento 1

PÁGINAS ESTÁTICAS. INTRODUÇÃO A CLIENT SIDE SCRIPTS E SERVER SIDE SCRIPTS. Client Side Scripts e Server Side Scripts. Client Side scripts – Javascript. Server Side Scripts – ASP, ASP. AS LIMITAÇÕES DO HTML. OS WEB STANDARDS. W3C. IMPORTÂNCIA DOS WEB STANDARDS. UNIDADE 3 HTML – RECURSOS BÁSICOS. Utilizando o Vermelho. Utilizando o Vermelho com Verde. UNIDADE 4 INCLUINDO IMAGENS EM UMA PÁGINA. FAZENDO REFERÊNCIA A OUTROS DOCUMENTOS. Referência Relativa. Página com Links – Exemplo 1. UNIDADE 6 CRIANDO TABELAS. TABELAS E LAYOUT DE PÁGINAS. CONSTRUINDO UMA TABELA. Exemplo de uma Tabela Simples. MENUS COM OPÇÕES - SELECT. UNIDADE 8 INTRODUÇÃO A ESTILOS CSS. O CSS. BENEFÍCIOS EM UTILIZAR CSS. CSS PARA SEPARAR CONTEÚDO DA APRESENTAÇÃO. Definindo um ID de estilos. EXERCÍCIOS. UNIDADE 9 CSS NA PRÁTICA.

UTILIZANDO CSS EM SITUAÇÕES REAIS. CRIANDO TABELAS COM ESTILOS CSS. TIPOS DE DADOS. Tipos de dados Primitivos (por valor). Tipos de dados Compostos (por referência). Tipos de dados especiais (undefined e Null). VARIÁVEIS. A função Eval(). A função parseInt() e parseFloat(). Função escape() e unescape(). A função isNaN(). FUNÇÕES CRIADAS PELO USUÁRIO. A declaração with. UNIDADE 14 CONHECENDO OBJECTS DOM. INTRODUÇÃO A DOM:. O QUE É HTML DOM?. QUANDO DEVEMOS USAR JAVASCRIPT. MÉTODO GETELEMENTBYID. OBJETO FRAMESET. Atributos do Objeto frameset. Metodos de Objeto Frameset. Eventos de objeto de um Frameset. Validando informações de caixas de texto. Validando listas de seleção simples e múltipla (Combo e ListBox). Validando caixas de escolha simples e múltipla (RadioButton e CheckBox). Criando uma função para mascaras de campos.

VALIDAÇÃO COM REGULAR EXPRESSIONS (REGEX). Composta inicialmente de quatro computadores interligados, ela tinha como finalidade demonstrar as potencialidades da construção de redes usando computadores dispersos em uma grande área. Em 1972, 50 universidades e instituições militares já possuíam conexões. Hoje a Internet é uma arquitetura de software e hardware interligados que são mantidas por organizações comerciais e governamentais. Uma de suas principais características é que não possui um proprietário único, responsável pelo seu funcionamento. Existem apenas associações e grupos que se dedicam a desenvolver protocolos e procedimentos para suportar a interligação entre os computadores, ratificar padrões e resolver questões operacionais. Client Side Scripts e Server Side Scripts Embora existam diversas linguagens com diferentes objetivos, nos exemplos práticos deste curso estaremos nos concentrando em dois tipos de linguagens muito utilizados em aplicações Web: client side scripts e server side scripts.

Client Side scripts – Javascript São códigos de programa que são processados pela estação cliente. Geralmente em aplicações voltadas à Internet, o código que é executado no cliente cuida apenas de pequenas consistências de telas e validações de entrada de dados. Web, HTML, CSS e JavaScript Tratando-se de páginas web, os client-side scripts terão de ser processados por um browser. O maior problema de se utilizar este tipo de artifício em uma aplicação é a incompatibilidade de interpretação da linguagem entre os browsers. Em páginas PHP, a linguagem é o próprio PHP. Em páginas JSP, a linguagem utilizada é o Java. Web, HTML, CSS e JavaScript A cada acesso a uma página, estes scripts geram dinamicamente uma página que é enviada para o browser.

Desta forma, diferente de scripts no cliente, estes nunca são vistos pelo cliente, não podendo ser copiados. Os scripts server-side são geralmente indicados para:  acesso a bancos de dados  criação de páginas em tempo real  lojas virtuais com carrinhos de compra  sistemas de cadastro e consulta de dados  sites de busca na Internet Requisição Normal Requisição de página dinâmica 10 Web, HTML, CSS e JavaScript 1. Muitos servidores trabalham, paralelamente, com outros protocolos, como HTTPS (que é o HTTP "seguro"), FTP, RPC, etc. Além de transmitir páginas HTML, imagens e aplicativos (Java, Microsoft, etc), os servidores também podem executar programas e scripts, interagindo mais com o usuário. Web, HTML, CSS e JavaScript   Computador Cliente: Computador utilizado pelo usuário. Computador Servidor: Computador utilizado para armazenar sites, sistemas, arquivos e conteúdos em geral.

Resumo: Servidor WEB é um programa de computador que responde requisições. O servidor de aplicações responde a algumas questões comuns à todas as aplicações, como segurança, garantia de disponibilidade, balanceamento de carga e tratamento de exceções. J2EE(Java 2 Enterprise Edition) Devido a popularização da plataforma Java, o termo servidor de aplicação é frequentemente uma referência a "Servidor de aplicação J2EE". O servidor WebSphere Application Server da IBM e o WebLogic Server da BEA Systems são dois dos mais conhecidos servidores J2EE comerciais. Alguns servidores de software livre também são muito utilizados, como JBoss, JOnAS e Apache Geronimo. Como mencionado, a linguagem de programação destes softwares é Java. Na área de segurança o Firefox possui um interruptor de scripts (caso venham a atrapalhar sua navegação ou caso sejam maliciosos) e uma proteção contra sites falsos que podem ocasionar em ataques do tipo phishing entre outros.

Web, HTML, CSS e JavaScript 1. Padronização e protocolos de acesso Navegadores se comunicam com servidores Web usando o protocolo HTTP (HyperText Transfer Protocol), que são por sua vez identificadas por uma URL (ex: http://www. terra. com. A fim de evitar que as mensagens, mesmo decifradas, sejam modificadas e com isso um ataque de escuta ativa seja possível, o SSL adiciona à todas as mensagens um MAC (Message Authentication Code). Calculado a partir de funções de hash seguras, o MAC garante a integridade das mensagens trocadas. Além de sigilo e integridade, o SSL ainda provê a autenticação das partes envolvidas a fim de garantir e verificar a identidade das mesmas. Neste processo, o SSL utiliza criptografia assimétrica e certificados digitais (ex: todas as URLs que aparecem o https:// antes do endereço).

 Independência de protocolo: o SSL roda sobre qualquer protocolo de transporte confiável. O uso do SSL se disseminou por meio de sua implementação nos EURZVHUV da Netscape, fornecendo aos usuários uma forma segura de acessar servidores ZHE, permitindo inclusive a execução de transações comerciais. Sua versão mais recente é a 3. Seu funcionamento ocorre por meio do sistema de criptografia de chaves públicas e privadas desenvolvido por Rivest, Shamir e Adleman, o RSA. O SSL é mais usado nos browsers, como Mozilla, Internet Explorer entre outros. Web, HTML, CSS e JavaScript Unidade 2 Introdução ao HTML e Web Standards 2. Neste momento surgiram recursos para especificar imagens de fundo, alinhar elementos em tabelas, posicionar imagens, entre outros. Muitas destas novidades eram iniciativa das empresas que desenvolviam os principais navegadores utilizados na internet, o que muitas vezes obrigava o Web Designer a criar páginas diferentes para cada navegador, para aproveitar ao máximo os novos recursos recém lançados.

Dois problemas tiveram sua origem derivada deste contexto: a falta de uma padronização, pois diferentes empresas criavam novos recursos próprios para o HTML, e a mistura entre layout e conteúdo. Ambos, problemas endereçados pelos Web Standards, como será visto ao longo deste curso. Web, HTML, CSS e JavaScript 2. Importância dos Web Standards Conceber e construir sites usando estes padrões simplifica o processo e reduz os custos de produção, obtendo-se ao mesmo tempo sites acessíveis a um maior número de pessoas e dispositivos com acesso a Internet. Os sites desenvolvidos desta forma continuarão a funcionar corretamente à medida que os browsers tradicionais evoluem e novos dispositivos de Internet surgem no mercado. Web standards têm o objetivo de ser uma base comum. um fundamento para a World Wide Web para que navegadores e outros programas compreendam o mesmo vocabulário básico".

Web, HTML, CSS e JavaScript Eric Meyer – Autor do livro Cascading Style Sheets: The Definitive Guide. Assim sendo, ao dominarmos o HTML, estaremos também adquirindo os conhecimentos necessários para desenvolver também em XHTML. Conceitos Básicos de HTML Quando um browser exibe uma página HTML, ele lê um arquivo texto (que pode ser aberto em qualquer editor de texto) com o conteúdo do site e marcações, chamadas tags, que informam os elementos da página e sua formatação. As marcações do HTML - tags - consistem do sinal (<), (o símbolo de "menor que"), seguida pelo nome da marcação e fechada por (>) ("maior que"). De um modo geral, as tags aparecem em pares, por exemplo, <H1> Cabeçalho</H1>. O símbolo que termina uma determinada marcação é igual àquele que a inicia, antecedido por uma barra (/) e precedido pelo texto referente.

Nas lições seguintes apresentaremos diretamente exercícios que incluirão novas tags que permitirão controlar diversas características da página. Estas e todas as futuras tags são mostradas dentro de uma estrutura de tabela, para facilitar sua consulta, e são repetidas em anexo ao final deste material, de forma a facilitar seu uso no futuro como material de referência. TAG O QUE FAZ <!-- comentários --> Insere comentários nas páginas <html> Toda página HTML deve estar entre o tag de início de um documento HTML e o tag de fim deste documento. head> Envolvem a seção de cabeçalho do documento, no qual são especificadas informações que não são exibidas na página, como título do documento e informações sobre o assunto da página.

title> Indica o título do documento para o Browser. Familiarizando-se com o HTML Seguindo as orientações do instrutor, construa agora a sua primeira página HTML. Copie ou crie um texto, utilizando o Dreamweaver, o bloco de notas do Windows ou qualquer editor de texto. Salve e abra pelo browser que estiver instalado no computador. Apenas com os códigos acima apresentados, é fácil perceber limitações. Não há ainda como definir títulos, salientar palavras ou frases ou fazer qualquer tipo de estruturação da informação, exceto quebrar os parágrafos utilizando a tag <BR>. Ex: <font face=verdana>Texto</font> Color = define a cor da letra. Ex:<font color=red>Texto</font> <pre> Marca um trecho formatado com fonte monoespaçada. A formatação com espaços e entrada de parágrafos é respeitada.

basefont> Modifica a formatação padrão do texto. Ex: <basefont size=5> 3. Exemplo de Formatação de Textos Neste exemplo trabalharemos com a formatação das letras bem como cor, tamanho de fonte e estilo. Para entender isto, digite a listagem abaixo, e salve como basico4. html, <html> <head> <title>Formatando Estilos</title> </head> <body> <center>Mudando o Estilo dos Caracteres</center> <p> <b>Texto em Negrito</b><br> <i>Texto em Itálico</i><br> <u>Texto sublinhado</u><br> <tt>Texto Monoespaçado</tt><br> <br><font color=red >Texto em Vermelho</font> <br><font size=5>Texto em Tamanho 5</font> <br><font face=verdana>Texto com a letra Verdana</font> <br><center> <font color=blue face=verdana size=5><b>Olá Mundo!!!</b></font></center> <br>Você poderá os atributos para cada tipo de letra! <br> <font color=blue size=6>O</font><font color=red size=4>lá Mundo</font> <br> <pre> Estamos progredindo no curso de HTML.

Este tag permite que todos os espaços feitos no código fonte sejam respeitados. Certo? </pre> </p> </body> </html> 25 Web, HTML, CSS e JavaScript 3. Web, HTML, CSS e JavaScript 3. Utilizando o Vermelho com Verde O exemplo abaixo, cores2. html, utiliza cores misturando tons vermelhos e verde. Abaixo, uma imagem mostra a tela resultante, mas é recomendável visualizar no browser para observar as cores em si. html> <head> <title>vermelhos e verdes</title> </head> <body> <br><font color=#ff9900>laranja: vermelho com algum verde</font> <br><font color =#ffff00>amarelo (vermelho + verde)</font> <br><font color =#99ff00>amarelo esverdeado</font> <br><font color =#00ff00>verde puro</font> </body> </html> Observe a imagem abaixo em seu browser para poder conferir as cores: 28 Web, HTML, CSS e JavaScript Unidade 4 Incluindo Imagens em uma Página 4.

Referência Absoluta Em alguns casos, pode não ser interessante mantermos apenas referências relativas, em especial se nosso site for um pouco mais complexo. Podemos ter muitas páginas que desejamos colocar em diferentes diretórios que utilizem uma mesma imagem. Nestes casos, muitas vezes é mais interessante criarmos um diretório padrão que seja referenciado por todas as páginas da mesma forma, independente da localização de cada página. O exemplo abaixo mostra este caso, fazendo uso de um diretório imagens na raiz do site: <img src=/imagens/banner1. jpg> 29 Web, HTML, CSS e JavaScript 4. alt=”n” indica o texto para ser exibido quando o navegador não exibe a imagem. Sendo que n é o título que identifique a imagem. Exemplo: <img src=fig.

jp alt=”Esta é uma imagem legal”> 4. Incluindo Imagens – Exemplo 1 Neste exercício exercitaremos os tags que permitem a inserção de imagens em uma página. html <html> <head><title>Imagens</title> </head> <body> Note neste exemplo que a imagem <img src=imagem1. gif> está entre o texto <br><hr><br> <img src=imagem1. gif align=top> Neste exemplo a imagem está à esquerda e o texto está no topo. Observe que quando o texto continua na linha seguinte ele segue para abaixo da imagem <br><hr><br> 31 Web, HTML, CSS e JavaScript <img src=imagem1. gif align=middle>A imagem está à esquerda e o texto no centro, porém a situação da quebra de linha persiste, com o texto seguindo, na linha seguinte, para abaixo da imagem. Opcionalmente podemos indicar um arquivo de imagem para formar o fundo, usando a opção: BACKGROUND.

Quando definimos uma imagem para o fundo de uma página, se a página mostrada for maior que a imagem, ela será replicada na horizontal, vertical ou em ambas as dimensões. Web, HTML, CSS e JavaScript Esta característica pode inclusive ser utilizada com um recurso de layout, permitindo, por exemplo, a repetição de um padrão. Fundo com Padronagem No exemplo a seguir, imagem3. html, uma padronagem é utilizada como fundo.  _self define que será aberto no mesmo Frame.  _parent define que irá abrir a em um Frame Pai. Página com Links – Exemplo 1 Confira a página link1. html: <html> <head><title>Estudando links</title></head> <body> <h3>Exemplo de links internos</h3> <a href=exemplo1. html>Exemplo1</a> <a href=exemplo2. Este ainda é um dos principais usos de planilhas em HTML, e será bastante explorado nesta unidade.

Entretanto, com este recurso também foi possível exercer um controle muito maior sobre o layout de uma página HTML. Utilizando uma série de técnicas envolvendo imagens de 1 pixel de altura, planilhas com bordas invisíveis e formas inteligentes de posicionar imagens, é possível criar layouts bastante sofisticados. Esta técnica está caindo em desuso, porém, pois com o HTML 4. e o CSS é possível controlar de forma bastante precisa a diagramação de um site sem ter que utilizar as tabelas como um subterfúgio. Como padrão, o texto nas células é alinhado a esquerda. Atributos Align: valores left, right e center definem o alinhamento horizontal. Valign: valores top, middle e bottom definem o alinhamento vertical. Nowrap: não há quebra de linhas dentro das células Colspan: número de colunas que a célula irá ocupar Rowspan: número de linhas que a célula irá ocupar Width: largura da célula, em pixels ou valor percentual <th> Desta forma são definidos os títulos de uma tabela.

Estes podem ser posicionados em qualquer célula. html – Célula em várias colunas (colspan) <table border=1> <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> Tabela5. html – Célula em várias linhas (rowspan) <table border=1> <tr> <td rowspan=3>3 linhas</td> <td>col 2</td> <td>col 3</td> 40 Web, HTML, CSS e JavaScript <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> Tabela6. html – borda maior (border) <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> Tabela7.

html – Espaço entre células (cellspacing) <table border=2 cellspacing=5> <tr> 41 Web, HTML, CSS e JavaScript <td>teste1</td> <td>teste2</td> <td>teste3</td> </tr> <tr> <td>teste4</td> <td>teste5</td> <td>teste6</td> </tr> </table> Tabela 8. html – Espaçamento interno a célula (cellpadding) <table border=2 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> Tabela9. O elemento FORM, da linguagem HTML, é o responsável por tal interação. Ele provê uma maneira agradável e familiar para coletar dados do usuário através da criação de formulários com janelas de entrada de textos, botões e outros elementos de entrada de dados. Os dados que o usuário preenche em uma página HTML são enviados para o servidor, para serem então processados por um programa, por exemplo um CGI em linguagem PERL ou um página de acesso a banco de dados em ASP ou PHP.

Também é possível processar localmente um campo de formulário utilizando um script em JavaScript ou VBScript, o que muitas vezes é feito para validar um campo antes do mesmo ser enviado ao servidor. Nesta lição iremos nos concentrar em aprender todos os tags HTML de criação de formulários e a diferença entre eles. Experimente substituir o método de envio para POST. Formulários com Diferentes Tipos do INPUT Vamos agora estudar vários exemplos de pequenos formulários, cada um apresentando um recurso diferente. Teste cada um deles para se familiarizar com a tag apresentada: Form2. html – utilizando tipo password <form method="post" action="teste. php"> Informe sua senha de acesso (8 caracteres): <input type="password" value="xpto" name="sua_senha" size="8" maxlength="8"> </form> Obs: neste exemplo não faz sentido utilizarmos o método get, pois a função do tipo password perderia o sentido.

Form6. hrml – Texto em várias linhas <form method="post"> Por favor, escreva aqui suas sugestões, dúvidas e críticas:<br> <textarea name="critica" rows="3" cols="40"> gostaria de obter mais informações sobre este servidor. grato. textarea> <input type="reset" value="limpa campos"> <input type="submit"> </form> 49 Web, HTML, CSS e JavaScript 7. Menus com opções - SELECT A marcação SELECT segue a mesma convencão de TEXTAREA. Entretanto o suporte ao CSS Nível 2 foi implementado em níveis diferentes, o que torna a adoção dos conceitos de posicionamento via CSS, ou Tableless, como é conhecido, ainda um pouco complicado, necessitando muitas vezes de truques de correção, conhecido como CSS Hacks. Algumas considerações sobre CSS:  Os estilos definem para o browser como devem ser exibidos os elementos do (X)HTML.

 Os estilos são geralmente definidos em folhas de estilo.  O CSS foi implementado na versão HTML 4. para resolver o problema de separação entre conteúdo e formatação.  Mais controle sobre o código - interpretação do código na ordem correta para os leitores de tela.  Disponibiliza versões para impressão sem duplicação de conteúdo, somente alternando o CSS.  Permite formatar elementos do HTML como formulários e barras de rolagem, impossível via atributos HTML.  Permite controlar aspectos visuais como tipo e cor de borda, posicionamento, visibilidade e margens – propriedades inexistentes no HTML. CSS para Separar Conteúdo da Apresentação Uma das metas ao se utilizar os conceitos do Web Standards é remover toda a apresentação do código (X)HTML, deixando-o limpo e semanticamente correto.

Entre os devices que suportam conteúdo Web podemos citar:  Browsers.  Impressoras.  PDAs (Personal Digital Assistants).  Telefones Celulares.  Equipamentos wireless.  Para listas, utilize elementos de lista <li>, <ol> e <ul>.  Para o layout, utilize a tag <div> em vez de <table>. Web, HTML, CSS e JavaScript Conceito concebido pelo físico inglês Tom Berners-Lee, o criador do World Wide Web, cuja proposta, ainda em desenvolvimento, por um grupo de pesquisadores do W3C, por ele liderado, é estruturar todo o conteúdo disponível na Internet. Essa estruturação será baseada num conjunto de regras, que permitirá a localização eficiente e precisa da informação desejada. Por mais sofisticados que sejam os mecanismos de buscas, atualmente existentes, todos, sem exceção, oferecem para cada solicitação um grande número de páginas, que, em sua maioria, não atendem às necessidades do usuário.

Sintaxe do CSS A sintaxe do CSS é uma sintaxe de marcação, definindo o elemento(s) a ser formatado, a propriedade e o valor: body { font-size : 70%; color : #000000; background-color : #F1F1F1; margin : 0; } As informações sobre os estilos podem ser armazenadas:  Interno - No cabeçalho de um documento HTML.  Inline ou Em Linha - Junto a uma determinada tag.  Externo – Em um documento. css separado vinculado ao documento HTML através de uma referência externa no cabeçalho do documento. Web, HTML, CSS e JavaScript 8. Formas de utilização dos Seletores Como vimos anteriormente, um seletor pode ser o nome de uma tag HTML, um grupo de tags, uma classe ou um ID. Veremos agora exemplos práticos de como utilizar cada caso: 8. Aplicando estilos à uma tag: Primeiro devemos definir à qual tag queremos aplicar os estilos.

Neste exemplo alteraremos o estilo das tags <FONT>: <html> <head> <title>Alterando o estilo da tag font</title> 57 Web, HTML, CSS e JavaScript <style type=”text/css”> font { propriedade: valor; } </style> </head> <body> <font> Esta tag recebe os estilos definidos no cabeçalho. font> <br><br> <font> Esta tag também recebe os estilos que foram definidos. estilo1 { propriedade: valor; } </style> </head> <body> <font class=”estilo1”> Esta tag recebe os estilos definidos na classe estilo01. Note que o valor do parâmetro class não possui o ponto. font> <br><br> <font> Esta tag não recebe os estilos que foram definidos, pois não possui o parâmetro class. font> </body> </html> 8. Definindo um ID de estilos Um ID de estilos é idêntico à uma classe, pois também possui a função de agrupar diversos estilos em uma única estrutura nomeada.

Nome ou código da cor. color: blue} 60 Web, HTML, CSS e JavaScript font-family font-size Seleciona o tipo de fonte. Ajusta o tamanho da fonte. Nome da fonte (de acordo com o Windows) {font-family: courier} points (pt) {font-size: 12pt} {font-family: arial} inches (in) centimeters (cm) pixels (px) font-style font-weight Aplica o efeito itálico. normal Ajusta a espessura da fonte. Utilizando CSS em Situações Reais Na unidade anterior os recursos básicos do CSS foram apresentados. O objetivo desta unidade é exercitar o uso do CSS na criação de layouts redefinindo os vários elementos vistos nas primeiras unidades deste curso. Com isto, objetiva-se dar ao aluno a percepção da enorme pontencialidade do CSS e prepará-lo para utilizar este recurso em seus próprios projetos, facilitando e acelerando a construção e edição dos layouts que ele desenvolve.

A referência completa do CSS é muito grande, e na prática praticamente nenhum Web Designer decora todos os comandos CSS, geralmente consultando uma documentação na web sempre que busca utilizar um parâmetro com o qual não esteja familiarizado. Por exemplo, pode ser utilizada a documentação oficial em http://www. titulo { font-family: Arial, Helvetica, sans-serif; font-size: 8pt; border-right: 1px solid #000000; border-bottom: 1px solid #000000; border-top: 1px solid #000000; border-left: 1px solid #000000; background-color: #C3C3C3; padding: 2px 2px 2px 2px; } td { font-family: Arial, Helvetica, sans-serif; font-size: 8pt; border-right: 1px solid #000000; border-bottom: 1px solid #000000; border-top: 1px solid #000000; border-left: 1px solid #000000; background-color: #FFFFFF; padding: 2px 2px 2px 2px; } --> </style> </head> <body> <table> <tr><td class=titulo>nome</td><td class=titulo>Cargo</td></tr> <tr><td>alberto</td><td>Estagiário</td></tr> <tr><td>pedro</td><td>Assessor de vendas</td></tr> <tr><td>rafael</td><td>Gerente de vendas</td></tr> <tr><td>sandro</td><td>Diretor comercial</td></tr> </table> </body> </html> 64 Web, HTML, CSS e JavaScript Observe que a construção da tabela em si está bastante simples, facilitando sua criação dinâmica por um programa que, por exemplo, consulte um banco de dados.

Observe, adicionalmente, que o layout está definido na parte em CSS – que inclusive pode estar em um arquivo separado. Com isto, designers e programadores podem trabalhar em partes independentes do código, de forma simultânea, um definindo detalhes do layout em CSS enquanto o outro constrói o programa que monta dinamicamente os dados da tabela. Obs: o parâmetro border-collapse permite definir que as bordas das células internas serão ‘grudadas’ umas nas outras. É um comando muito interessante de ser utilizado na definição de layouts de tabelas. Altere o código acima, criando um layout diferente, utilizando outros tons no lugar do verde. Sinta-se livre para também alterar fontes e criar efeitos diferente. Crie uma página com textos, em que outros elementos vistos anteriormente são também redefinidos, como parágrafos e listas ordenadas.

Não coloque nenhuma informação de layout fora do CSS e compare a página com e sem CSS. Web, HTML, CSS e JavaScript Unidade 10 Introdução ao JavaScript 10. a linguagem sofreu uma série de atualizações, e hoje possui um conjunto muito grande de recursos, suportados na maior parte dos browsers disponíveis no mercado. Web, HTML, CSS e JavaScript Unidade 11 Noções básicas de JavaScript 11. Utilizando Comentários A estrutura de comentários da linguagem JavaScript é extremamente semelhante a estrutura da linguagem C++ e da linguagem Java. O Javascript permite comentários em linha única ou em bloco. Os comentários em linha única são representados pelos caracteres ( // ), e transformam todo e qualquer texto colocado na mesma linha após este símbolo em comentário, conforme exemplo a seguir: sProcessor = “Atribuição a variavel !”; // Este texto é comentário Os comentários também podem ser criados em blocos no Javascript, utilizando a notação /* e */.

O tipo undefined representa uma propriedade inexistente em um objeto criado dentro de um código javascript. O tipo null representa uma váriavel ou objeto sem valor, ou seja, uma váriavel ou objeto sem conteúdo. SCRIPT > dtDate = new Date(); /* typeOf devolve como resultado o tipo da variável, neste caso ele vai disparar no alert o tipo de dados que este método apresenta o valor que aparecerá na tela é “undefined” pois não existe buscaDia dentro do objeto Date */ 71 Web, HTML, CSS e JavaScript alert(typeof(dtDate. buscaDia)); dtDate = null; // Define a variável como null / nula </script> 11. Variáveis Assim como qualquer linguagem de programação, o Javascript permite a criação de variáveis dentro dos scripts. A lista dos operadores computacionais pode ser visualizada abaixo: Operador Incremento ++ Decremento -- Multiplicação * Divisão / Módulo % Adição/Concatenação + Subtração - Símbolo Dentre os operadores lógicos, encontramos os operadores para testes lógicos convecionais, como equalidade e inequalidade.

É importante ressaltar a diferença entre o operador de atribuição = e o operador lógico de igualdade ==. Muitas vezes os desenvolvedores tendem a utilizar o operador de atribuição para realizar testes de igualdade, o que acarreta em erros de lógico nos scripts. Operadores lógicos podem ser visualizados a seguir. Operador Símbolo Não Lógico ! Menor que < Maior que > Menor ou igual a Maior ou igual a <= Igual == Diferente (não igual) != E Lógico (AND) && OU Lógico (OR) || >= Além destes dois conjuntos de operadores, ainda temos os operadores de atribuição. Instruções agrupadas em blocos, são consideradas como um único comando na linguagem javascript, e são utilizados, em geral, onde a linguagem necessita de “comando únicos”, como em instruções de teste, estruturas de repetição e funções.

A seguir podemos ver um exemplo de um código JavaScript que utiliza delimitadores de bloco de instruções. Web, HTML, CSS e JavaScript //Testa se a hora atual é maior que 18 if (dtHoje. getHours() > 18){ // Bloco de instruções. Caso a hora seja maior que 18 entra neste bloco alert(“Boa noite ! Este é o curso de JavaScript !”); alert(“A hora atual é :” + dtHoje. No comando if, é necessário informar dentro de parênteses a expressão a ser testada, e caso ela seja verdadeira, o comando ou bloco de comandos subsequente ao comando if será executado. O comando if ainda possui uma cláusula else opcional, que pode conter uma expressão ou conjunto de expressões a serem executadas caso a condição testada no comando if não seja verdadeira. A seguir podemos verificar um exemplo do comando if: 75 Web, HTML, CSS e JavaScript <script> var nDia; var dtData = new Date(); var sPeriodo; nDia = dtData.

getDay(); // Comando if com apenas uma expressão após o teste if(nDia%2==0) alert("Dia par!"); else alert("Dia ímpar"); // Comando if com um bloco de expressões if(dtData. getHours() > 12) { sPeriodo = " Tarde"; alert(sPeriodo); } else { sPeriodo = "Manhã"; alert(sPeriodo); } </script> Além do comando if, o comando switch pode ser utilizado para realizar testes lógicos na linguagem JavaScript. Podemos ver um exemplo de utilização do comando for a seguir. Web, HTML, CSS e JavaScript <script> var nNumero = 0; for(nNumero; nNumero<10; nNumero++) { alert("Iteração de número: " + nNumero); } </script> O comando for ainda pode ser utilizado com a cláusula in para realizar enumerações de propriedades em objetos ou mesmo itens contidos em arrays. Para a utilização da cláusula in, é necessário definir uma variável que irá receber o valor de cada membro solicitado dentro de cada iteração da estrutura de repetição.

Com a cláusula in podemos, por exemplo, buscar todas as propriedades disponíveis de um determinado objeto criado no JavaScript. No exemplo a seguir podemos visualizar todas as propriedades disponíveis no objeto window, que representa a janela do browser. expr. value); } </script> <body> <form name="teste"> Digite uma expressáo matemática (exemplo: 2+2 ou 3*5): <input type="text" name="expr" Size="15"> <input type="button" value="Calcula" onclick="javascript:compute(this. form)"> <BR> Resultado: <input type="text" name="result" size="15"> </form> </body> </html> 12. A função parseInt() e parseFloat() As funções parseInt e parseFloat são utilizadas para converter valor do formato string (texto) para o formato numérico. A função parseInt é utiizada para converter valores inteiros e a função parseFloat é utilizada para converter valores fracionados. br/jscript?Param1=Curso de Java Script&Param2=áéíóú"; sURL = escape(sURL); alert(sURL); sURL = unescape(sURL); alert(sURL); </script> 12.

A função isNaN() A função isNaN é utilizada para verificar se uma variável contém um valor especial NaN. O valor representa uma conversão númerica mal sucedida (NaN = Not a Numeric). Quando tentamos converter uma string (Ex. ABC) para um valor númerico utilizando as funções parseInt e parseFloat, o resultado da função é um valor NaN. Para retornar um valor em uma função, basta criar a função da mesma forma como apresentado no exemplo anterior, porém com a utilização do comando return. O comando return serve para interromper o processamento de uma função ou um bloco de script, com a opção de retornar um valor no caso de estar dentro de uma função. Podemos ver um exemplo de utilização do comando return a seguir.

script> function Soma(nNumero1, nNumero2) { return nNumero1+nNumero2; } alert(Soma(10,5)); </script> 82 Web, HTML, CSS e JavaScript Unidade 13 Utilizando Objetos 13. Objetos intrínsecos Além da utilização de funções intrisecas e funções de usuário, o JavaScript possui uma série de objetos intrínsecos que permitem o uso de números de recursos dentro da linguagem. O objeto date é sempre inicializado com a Data e Hora atuais. Um exemplo de criação de um objeto Date pode ser visto a seguir. script > var dtData, nMes, nHora, sMes, sPeriodo; dtData = new Date(); nMes = dtData. getMonth(); nHora = dtData. getHours(); </script> 83 Web, HTML, CSS e JavaScript 13. Para isto devemos utilizar os métodos disponíveis dentro do array, como o método sort para ordenar por ordem alfabética e o método reverse para ordernar por ordem decrescente.

Um exemplo de utilização de um array para ordenação pode ser visto abaixo: 84 Web, HTML, CSS e JavaScript <script> var sNomes = new Array(); sNomes[0] = "Carlos"; sNomes[1] = "Bruno"; sNomes[2] = "Mauricio"; sNomes[3] = "José"; sNomes[4] = "André"; sNomes. sort(); var nCount; alert(“Ordem Crescente”); for(nCount=0;nCount<sNomes. length;nCount++) { alert(sNomes[nCount]); } sNomes. reverse(); alert(“Ordem Decrescente”); for(nCount=0;nCount<sNomes. sqrt(nNumero3)); 85 Web, HTML, CSS e JavaScript </script> 13. O Objeto String O objeto string representa variáveis string dentro do Javascript. Os objetos string são criados ou através do comando string ou através da atribuição direta de um valor string para uma variável. O objeto string possui uma série de métodos que permitem manipular as strings no JavaScript. Um dos métodos disponíveis é o método substring que permite pegar uma fração da string, de acordo com uma posição passada como parâmetro.

Podemos visualizar a utilização de objetos definidos pelo usuário no exemplo abaixo: <script> var oContato = new Object(); oContato. Nome = "Sr. Teste"; oContato. Telefone = "(51) 1234-56789"; oContato. Endereco = "Rua Q Sobe e Desce 1000"; 86 Web, HTML, CSS e JavaScript for(prop in oContato) { var sMsg; sMsg = "O objeto contém a propriedade "; sMsg += prop; sMsg += " com o valor de " + oContato[prop]; alert(sMsg); } </script> 13. Esta declaração estabelece o objeto ao qual se aplica uma série de instruções. Os dois exemplos seguintes usam o objeto Math para ilustrar o uso desta declaração e são totalmente equivalentes. Versão 1: x = Math. cos(3 * Math. PI) + Math. Apesar de essas implementações serem geralmente incompletas, elas são suficientes para que possamos programar quase tudo numa forma que funciona em todos os browsers dominantes.

O que é HTML DOM? Dom significa Document Object Model. E HTML DOM é Document Object Model para HTML. O HTML DOM define objetos padrões para HTML, e para acessar componentes padrões das estruturas do HTML representadas como marcações. Quando devemos usar JavaScript A DOM HTML é uma plataforma e linguagem independente, pode ser usada com varias linguagens de programação como Java, Javascript, e Vbscript. O objeto “document”, é o pai de “body”, por isso devemos sempre acessar “body” pelo pai. Exemplo: document. body 14. Propriedades do objeto body Objeto document tem várias propriedades, também chamado de atributos. A propriedade “document. reset() } </script> </head> <body> <form name="MeuForm"> <p>Preencha os campos abaixo e pressione o botão “Reset Form”</p> <input type="text" size="20"><br /> <input type="text" size="20"><br /> <br /> <input type="button" onclick="formReset()" value="Reset form"> </form> 91 Web, HTML, CSS e JavaScript </body> </html> Caso existir mais de um form no documento este objeto poderá ser acessado como um array.

Exemplo: <html> <head> <script type="text/javascript"> function formReset() { var x=document. forms[0]; x. reset() } </script> </head> <body> <form name="Form1"> <p>Preencha os campos a baixo e veja como funciona o botão Reset</p> <input type="text" size="20"><br /> <input type="text" size="20"><br /> <br /> <input type="button" onclick="formReset()" value="Reset form"> </form> <form name="Form2"> <p>Preencha o campo a baixo, ele faz parte de um outro formulário por isto não sera alterado quando o botão reset for pressionado</p> <input type="text" size="20"><br /> <br /> </form> </body> </html> Neste exemplo o form esta sendo acessado como o primeiro form do documento. Web, HTML, CSS e JavaScript 14. Método getElementById Este método retorna um objeto que foi encontrado em toda arvore no documento, com o ID correspondente.

Ele pode ser usado em qualquer posição dos nodos da árvore de objetos da API DOM. Exemplo: Var valor1, valor2; var telefone = document. forms[0]. getElementById(“telefone”); valor1 = telefone. Exemplo de mapeamento de frameset: <html> <frameset id="myFrameset" cols="50%,50%"> <frame id="leftFrame" src="frame_a_noresize. htm"> <frame id="rightFrame" src="frame_a. htm"> </frameset> </html> frame_a. htm <html> <body bgcolor="#66CCFF"> <h3>Frame A</h3> </body> </html> frame_a_noresize. htm <html> <head> <script type="text/javascript"> function disableResize() { parent. getElementById("rightFrame"). noResize=fals e } </script> </head> <body bgcolor="#EFE7D6"> <form> <input type="button" onclick="disableResize()" value="No resize"> <input type="button" onclick="enableResize()" value="Resize"> </form> <p>Aula de javascript com DOM</p> </body> </html> 14. Atributos do Objeto frameset Atributo descrição Cols Seta ou retorna o numero de colunas ocupadas em um frame.

Id Seta ou retorna o id de um frameset Rows Seta ou retorna o numero de linhas ocupadas em um frame. Metodos de Objeto Frameset Métodos descrição blur() Remove o foco de um frameset focus() Recebe o foco 14. location); alert(document. referrer); alert(document. fgColor ); alert(document. forms. length ); alert(document. A propriedade images contém uma coleção de todas as imagens disponíveis dentro de um documento. No script abaixo vemos um exemplo onde utilizamos a propriedade src da primeira imagem para carregar as demais imagens do document. script> alert("Note que as imagens não estão carregadas !"); document. images[1]. src = document. Ao acessar cada um dos links podemos perfeitamente alterar o caminho para o qual o link está apontando, bem como o texto contido dentro do link.

O exemplo abaixo mostra como alterar os links no HTML apresentado acima. script> function popula(){ var sAlunos = new Array(); sAlunos[0] = "Andre"; sAlunos[1] = "Joao"; sAlunos[2] = "Maria"; sAlunos[3] = "Jose"; sAlunos[4] = "Carlos"; sAlunos. sort(); for(nCount=0;nCount<sAlunos. length;nCount++) { document. script> 100 Web, HTML, CSS e JavaScript var sAlunos = new Array(); sAlunos[0] = "Andre"; sAlunos[1] = "Joao"; sAlunos[2] = "Maria"; sAlunos[3] = "Jose"; sAlunos[4] = "Carlos"; sAlunos. sort(); for(nCount=0;nCount<sAlunos. length;nCount++) { document. write(sAlunos[nCount] + "<br>"); } </script> Além de criar conteúdo dinâmico, podemos alterar outras propriedades do documento, como por exemplo sua própria localização. Alterando a localização do documento faz com que a página seja automaticamente redirecionada para outra página especificada pelo script. href = "manha. htm"; </script> Além de alterar a localização, podemos também recarregar o documento através do comando reload.

O exemplo abaixo mostra como recarregar o documento após um determinado intervalo de tempo. setTimeout, que executa uma instrução Javascript após um determinado intervalo de tempo, especificado como parâmetro na função. script> var dtData = new Date(); document. Para mapearmos eventos de um elemento em um formulário HTML podemos utilizar três técnicas. Exemplo function click() { if (event. button == 1) { if(document. bgColor == "#ffff00") { document. bgColor = "red"; } else { document. Parte superior do formulário Parte inferior do formulário <SCRIPT FOR=btnOk EVENT="onclick"> alert("Você clicou no botão !"); </SCRIPT> Esta técnica de mapeamento de eventos pode ser utilizada para mapear eventos não só dos elementos HTML em geral, mas também eventos do próprio documento, como o evento de carregamento. O exemplo abaixo mostra um bloco de script que mapeia o evento OnLoad do documento contido na janela do browser.

SCRIPT FOR=window EVENT="onload"> alert("O documento foi carregado !"); </SCRIPT> 15. Mapeando eventos através de funções Outra técnica que podemos utilizar para mapear eventos é através de funções. Para mapearmos eventos através desta técnica, é necessário o desenvolvimento de uma função para cada evento que queremos mapear de um determinado objeto. forms[0]. btnOk. onclick=btnOk_click; </SCRIPT> 15. Extraindo informações dos formulários HTML Agora que já sabemos como mapear os eventos dos elementos de um formulário, iremos buscar informações deste formulário, afim de realizar validações e alterações nas características deste formulário. A extração de dados de um formulário começa pela busca da referencia do formulário que contém o elemento com os dados que queremos utilizar.

forms[0]. txtNome. value); } </SCRIPT> O código de script acima, busca uma referencia a caixa de texto contida dentro do formulário do documento e exibe a propriedade value da mesma, que representa o conteúdo textual da caixa de texto. Buscando informações de formulários nomeados Quando os formulários são nomeados, o processo de busca de informações fica mais fácil, pois é possível referenciar diretamente o formulário que contém o controle que queremos buscar as informações. Se utilizarmos o mesmo HTML utilizado anteriormente, porém com um formulário com a propriedade name, podemos alterar nosso código de script para utilizar este nome associado ao formulário. HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> <FORM ACTION=""> Usuário: <INPUT TYPE=TEXT NAME=txtUsuario><BR> Senha: <INPUT TYPE=PASSWORD NAME=txtSenha><BR><BR> <INPUT TYPE=BUTTON NAME=btnOk VALUE="Efetuar Logon" onclick="btnOk_click()"> </FORM> </BODY> </HTML> Para criarmos uma função que faça a validação deste formulário, basta criarmos o mapeamento para o evento onclick do botão efetuar logon e apenas submeter o formulário no caso de as informações solicitadas estarem corretas.

O código de script abaixo realiza esta validação. Web, HTML, CSS e JavaScript <SCRIPT> function btnOk_click() { if(document. frmDados. txtUsuario. txtSenha. focus(); return; } document. frmDados. submit(); } </SCRIPT> No bloco de script acima, utilizamos a propriedade value do objeto txtUsuario para verificarmos se o campo está ou não preenchido. Note que estamos utilizando a propriedade length para fazermos esta verificação. SCRIPT> function btnOk_click() { if(document. frmDados. cmbCidade. options[0]. selected==true) { alert("Selecione a cidade !"); document. submit(); } </SCRIPT> Para a validação do primeiro campo utilizamos a coleção options do controle cmbCidade. A coleção options contém uma referencia a cada um dos itens existentes dentro da caixa de seleção. Os itens podem ser acessados da mesma forma que um array simples em JavaScript.

Cada item das caixas de seleção, representados na coleção options, possuem uma série de propriedades, dentre elas a propriedade selected. A propriedade selected devolve um valor verdadeiro caso o item esteja selecionado, e falso caso não esteja selecionado. frmDados. lstCargo. options[0]. selected; As caixas de seleção também possuem, assim como as caixas de texto, a propriedade value, que indica o valor do item selecionado. No caso da segunda caixa de seleção, estamos fazendo um teste para verificar se o valor da caixa de seleção é branco ou não, o que indica que o usuário não selecionou nenhum item. frmDados. optEscolaridade. value=="") { alert("Selecione o grau de escolaridade !"); return; } if(document. frmDados. chkFumante. Criando uma função para mascaras de campos O conteúdo desenvolvido abaixo é para demonstrar a aplicação de alguns comandos em javascript, desenvolva o script e veja o resultado.

HTML> <HEAD> </HEAD> <BODY> <input type=text name=”CPF” onkeypress=”return EditMask(this, ´999. ´, event);” > <input type=text name=”Fone” onkeypress=”return EditMask(this, ´(99)9999. ´, event);” > </BODY> </HTML> Criaremos uma função que manipule a tag para que o formato digitado seja o pré-definido no código: <script language=”javascript”> function EditMask(objField, sMask, evtKeyPress) { var i, nCount, sValue, fldLen, mskLen,bolMask, sCod, nTecla; if(document. all) { // Internet Explorer nTecla = evtKeyPress. replace( ". sValue = sValue. toString(). replace( ". sValue = sValue. toString(). replace( ")", "" ); sValue = sValue. toString(). replace( " ", "" ); sValue = sValue. toString(). charAt(i); mskLen++; } else { sCod += sValue. charAt(nCount); nCount++; } i++; } objField. value = sCod; if (nTecla != 8) { // backspace if (sMask. charAt(i-1) == "9") { // apenas números. return ((nTecla > 47) && (nTecla < 58)); } // números de 0 a 9 else { // qualquer caracter. value; /* cria uma variável com o filtro para fazer a pesquisa na string (neste caso é para validar um emaill) */ var filter 9]{2,4})+$/; = /^([a-zA-Z0-9_\.

a-zA-Z0-9\-])+\. a-zA-Z0- //Faz consistência com o método test da variável x if (filter. test(x)) alert(Email válido!'); else alert('Email inválido!'); } 114 Web, HTML, CSS e JavaScript Unidade 16 Objeto window 7. Métodos do objeto window É o objeto principal na hierarquia e contém as propriedades e métodos para controlar a janela do navegador. Javascript 1. clearTimeout() Elimina a execução de sentenças associadas a um tempo de espera indicadas com o método setTimeout(). close() Fecha a janela. Javascript 1. confirm(texto) Mostra uma janela de confirmação e permite aceitar ou rejeitar find() Mostra uma janelinha de busca. moveTo(pixelsX, pixelsY) Move a janela do navegador à posição indicada nas coordenadas que recebe por parâmetro. Javascript 1. open() Abre uma janela secundária do navegador.

print() Como se clicássemos o botão de imprimir do navegador. Javascript 1. Javascript 1. scroll(pixelsX,pixelsY) Faz um scroll da janela para a coordenada indicada por parâmetro. Este método está desaconselhado, pois agora se debería utilizar scrollTo()(Javascript 1. scrollBy(pixelsX,pixelsY) Faz um scroll do conteúdo da janela relativo à posição atual. Javascript 1. substring(0, 1) Local = "" if (Versao < 3) { Local = document. location UltLoc = Local. lastIndexOf("/") Local = Local. substring(0, UltLoc + 1) } NovaJanela = window. open ("", "OutraJanela", "width=300,height=400") NovaJanela. document. write ("<img width=200 height=200 src=" + Local + "Marcaelo. gif>") } else { NovaJanela. document. write ("<br>Recife Alto Astral<hr><br>") NovaJanela. print()'>") NovaJanela. document. write ("</form></body></html>") NovaJanela. document. close() 117 Web, HTML, CSS e JavaScript } </script> <body> <p></p> <p>Escolha a foto a ser apresentada na nova janela:</p> <form method="POST" name="Form1"> <p> <input type=radio name="Opcao" value="1" checked>Elogica <input type=radio name="Opcao" value="2">Recife </p> <p> <input type="button" name="Envia" value="Nova Janela" onclick="if (Form1.

Opcionalmente podemos indicar um arquivo de imagem para formar o fundo, usando a opção: BACKGROUND. br> Insere uma quebra de linha TAG O QUE FAZ <hn> Marca um título. Sendo que “n” representa um valor que pode ser de 1 a 6, o tamanho muda de forma decrescente, ou seja, o número 1 é o maior tamanho do título. hr> Insere uma linha horizontal <p> Marca um parágrafo <center> Centraliza todo o conteúdo entre as tags <center> e </center> <b> Coloca o texto em negrito <i> Coloca o texto em itálico 119 Web, HTML, CSS e JavaScript <u> Coloca o texto sublinhado <tt> Coloca o texto em fonte monoespaçada. fonte Courier,como máquina de escrever) <font> Modifica a formatação do texto. ul> Marca o início e o fim de uma lista não ordenada, ou seja, os itens da lista recebem símbolos na primeira linha.

Atributos Type = modifica o tipo do marcador (símbolo), que pode ser: Circle = um círculo vazio. Disc = um círculo cheio. Square = um quadrado cheio <li> 120 Marca um item de uma lista, ordenada ou não ordenada. Web, HTML, CSS e JavaScript TAG O QUE FAZ <img> Insere uma imagem Atributos src indica o nome da imagem a ser carregado. Width: largura da tabela, em pixels ou valor percentual <tr> Define uma linha normal da tabela (table row). Atributos 121 Web, HTML, CSS e JavaScript Align: valores left, right e center definem o alinhamento horizontal. Valign: valores top, middle e bottom definem o alinhamento vertical. td> Esta é a marcação que define cada célula de uma tabela. As células de uma tabela devem sempre aparecer entre as marcações de linhas (<tr> e </tr>).

Estrutura Básica - Frameset O "Frame Document" é um arquivo onde se define a estrutura das janelas para seu hiperdocumento em HTML. Quantas serão e qual sua distribuição em tela. Neste documento as marcações <body> e seu par </body> são substituídas por <frameset> e </frameset>. Tal arquivo pode ser, por exemplo, o arquivo index. html de qualquer nível na estrutura do seu serviço de informações baseado em WWW. Web, HTML, CSS e JavaScript 18. Atributos de Frameset Frameset aceita os atributos ROWS e COLS, referentes divisões horizontais(como linhas em uma tabela) e verticais (como colunas) entre janelas na tela. Internamente a marcações FRAMESET só poderão aparecer outras FRAMESET, FRAME ou NOFRAMES. Importante: Não podem ser utilizadas as marcações válidas entre marcações <BODY></BODY> nem internamente a marcações FRAMESET, nem antes dela, senão FRAMESET será ignorada.

ATRIBUTOS 1. Relativo=> (ROWS="2*,*") Desta forma, define-se um valor relativo. No exemplo, o primeiro frame vai ocupar dois terços da tela, e o segundo um terço. Exemplos : 1. Para dividir a tela do browser em três janelas horizontais, sendo que a do meio é mais larga que as de cima e de baixo: 125 Web, HTML, CSS e JavaScript <html> <head> <title></title> </head> <frameset rows="20%, 60%, 20%"> <frame src="cell1. html"> <frame src="cell2. html"> <frame src="cell2. html"> <frame src="cell3. html"> </frameset> </html> 128 Web, HTML, CSS e JavaScript 2. Três janelas verticais, sendo que a primeira e a segunda tem uma altura fixa, e o frame central deverá ocupar o restante do espaço: <html> <head> <title></title> </head> <frameset cols="200, *, 100"> <frame src="cell1. html"> <frame src="cell2. 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 várias urls em outras janelas). Este atributo é opcional. Por padrão, os frames não tem nome. E, finalmente, se vier como AUTO, o browser aplicará a barra quando necessário. O padrão é AUTO, portanto, se o atributo scrolling não vier definido, o browser aplicará a barra de rolagem, sempre que necessário. NORESIZE 130 Web, HTML, CSS e JavaScript Este atributo não possui valor associado. Quando ele não aparece, o usuário poderá alterar o tamanho da janela, "arrastando" com o cursor a borda da mesma. O padrão é que todas as janelas possam ter seu tamanho alterado. p> Para acessá-la, você deve utilizar a versão 2. 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. Exemplo: 134 Web, HTML, CSS e JavaScript 135 Web, HTML, CSS e JavaScript O frame document deverá ser escrito assim: <html> o documento que contém o índice de navegação (barra. htm), será assim: <HTML> <HEAD> <BODY> <title>Apostila de HTML</title> </head> <a href="pagina1. html" 1</a> - target=frame1>Link <a href="pagina2. html" 2</a> target=frame1>Link <a href="pagina3. html" 3</a> target=frame1>Link <frameset rows="30%, 70%"> <frame src="cell1.

1001 R$ para obter acesso e baixar trabalho pronto

Apenas no StudyBank

Modelo original

Para download