O conteúdo desta linha foi
quebrado para a linha
de baixo

), como um cabeçalho (marcas

a

) e até forçar a quebra de linha (marca
). O ideal é que o desenvolvedor, ao criar uma página HTML estruture seu conteúdo, identificando os cabeçalhos, parágrafos, tabelas e outros tipos de informação, objetivando acomodar de maneira adequada o conteúdo a ser exibido. O HTML disponibiliza ao desenvolvedor um conjunto de marcas que possibilitam estilizar determinados trechos de textos. A marca PRE Esta marca faz com que o texto contido na mesma seja exibido de forma exata como digitado. Isto pode ser muito útil quando queremos preservar a formatação de um trecho de texto. Exemplo:-

A função abaixo foi desenvolvida em Javascript. Ela solicita um nome ao usuário e verifica se algo foi informado

 function PegaNome() { var lRet=true var nome='' while(nome=='' || (nome==null)) { nome=prompt('Favor informar seu nome:','') if ((nome=='') || (nome==null)) { alert('Nome em branco \nCampo Obrigatório!!') lRet=false } } return lRet } 

Resultado:- Prof. Carlos Majer Página 16 INTRODUÇÃO AO DESENVOLVIMENTO WEB VERSÃO 3.1 Marcas de estilização de texto mais utilizadas Marca small big em strong sub sup ins del Descrição Diminui a fonte do texto Aumenta a fonte do texto Enfatiza um texto. texto * Equivalente à marca Enfatiza um texto com maior intensidade (Negrito). (Negrito) * Equivalente à marca Exibe o texto em formato subescrito Exibe o texto formato superescrito Utilizado para marcar um trecho de texto que foi inserido numa nova versão de um documento Utilizado para marcar um trecho de texto que foi eliminado de uma versão anterior de um documento * Equivalente às marcas e Exemplos: Texto Normal,Texto Texto Menor,Texto Enfatizado
Texto em Negrito , _{Texto Subescrito}, ^{Texto Superescrito}

Texto Texto Inserido numa nova versão de documento,Texto documento Texto eliminado na nova versão do documento Resultado:- Prof. Carlos Majer Página 17 INTRODUÇÃO AO DESENVOLVIMENTO WEB VERSÃO 3.1  Acostume-se a digitar as marcas em letra minúscula, que é uma das regras do padrão XHTML, explicado adiante Entidades : Caracteres Especiais Muitas vezes queremos inserir um caractere específico na página HTML. Como por exemplo, o caractere de sinal de menor. Ocorre que certos caracteres (como neste caso) têm significado e uso específico (reservado) pelo HTML. No caso do sinal de menor (“<”), este caractere é utilizado para definir o início de uma marca. Se você inserir um sinal de menor, o navegador vai entender que você está informando uma marca. Neste caso, como você iria exibir na tela o texto abaixo? .... caso x < 5, então..... Para que possamos trabalhar com alguns caracteres especiais (como no exemplo acima), trechos de textos especiais como entidades foram criados para serem utilizados no lugar do caractere (reservado) desejado. Caractere Espaço Menor que < Maior que > E comercial & Aspas duplas Aspas simples Centavo Libra Yen Parágrafo de documento Copyright Marca Registrada Multiplicação Divisão Mais e Menos Graus à Tabela de Entidades mais comuns Uso Exemplo Caractere   < < à > > õ & & Õ " “ ç ´ ' Ç ¢ ¢ á £ £ Á ¥ ¥ é § § É © © í ® ® Í × × ó ÷ ÷ Ó ± ± ú ° ° Ú ã À Uso à õ Õ ç Ç á Á é É í Í ó Ó ú Ú À  Pode até ocorrer de algum navegador exibir o caractere especial inserido na página, mas isto não é garantia de que esta página será exibida em todos os navegadores de forma correta. Estilizando cores, fontes e tamanhos Para estilizar cores, tamanhos e famílias de fontes em trechos de texto, o HTML disponibiliza a marca . Esta marca funciona com os seguintes atributos:A palavra céu está em cor azul. Prof. Carlos Majer Página 18 INTRODUÇÃO AO DESENVOLVIMENTO WEB VERSÃO 3.1 O desenvolvedor pode selecionar uma cor pelo seu nome em inglês conforme a tabela de cores (mencionado mais para a frente neste documento) RGB (mistura das cores Red – vermelho, Green – Verde e Blue – Azul) reconhecida pelos navegadores, conforme regras do W3C. Copie e cole o exemplo abaixo para verificar no seu navegador:-

Azul - Navy
Azul - Acqua
Azul - código #0000FF
Azul - código #112D77
Azul - código #6141FA

Resultado:- Prof. Carlos Majer Página 19 INTRODUÇÃO AO DESENVOLVIMENTO WEB VERSÃO 3.1 Tabela de Cores RGB bordercolor width width Prof. Carlos Majer Página 20 INTRODUÇÃO AO DESENVOLVIMENTO WEB VERSÃO 3.1 Prof. Carlos Majer Página 21 INTRODUÇÃO AO DESENVOLVIMENTO WEB VERSÃO 3.1

Nome	Número RGB	Exemplo
White	>#FFFFFF
Black	>#000000
Gray	>#808080
Silver	>#COCOCO
Red	>#FF0000
Purple	>#800080
Fuchsia	>#FF00FF
Pink	>#FFC0CB
Maroon	>#800000
Green	>#008000
Olive	>#808000
Lime	>#00FF00
Teal	>#008080
Yellow	>#FFFF00
Blue	>#0000FF
Navy	>#000080
Acqua	>#00FFFF

Resultado:- Quanto ao tamanho, o desenvolvedor tem a sua disposição a propriedade size, da marca . Os valores (tamanhos) variam de 1 a 7. Exemplo:- Prof. Carlos Majer Página 22 INTRODUÇÃO AO DESENVOLVIMENTO WEB VERSÃO 3.1 Tamanho 1, Tamanho 2, Tamanho 3, Tamanho 4, Tamanho 5, Tamanho 6, Tamanho 7, Resultado:- Diversas famílias de fontes são disponibilizadas. Quando uma página tenta utilizar uma da lista, e o navegador não a encontra no micro do cliente, ele tenta a segunda da lista e em caso de problemas, ele tenta em seguida a terceira. Família Arial, Helvetica, Sans-serif
Família Times New Roman, Times, serif
Família Courier New, Courier, mono
Família Georgia, Times New Roman, Times, serif
Família Verdana, Arial, Helvetica, sans-serif
Família Geneva, Arial, Helvetica, sans-serif Resultado:- Prof. Carlos Majer Página 23 INTRODUÇÃO AO DESENVOLVIMENTO WEB VERSÃO 3.1 Imagens Formatos de imagem mais utilizados na Internet Existem diversos tipos de imagens que em geral podemos identificá-las conforme sua extensão:JPG – Joint Photograph Experts Group É um dos padrões de imagem mais utilizados atualmente na Internet. Este formato que tem seu tamanho real reduzido (número de bytes) em função de uso de um algoritmo de compressão de dados que pode alterar a qualidade da imagem. Isto quer dizer que o usuário pode escolher o nível de compressão deseja aplicar. Quanto mais comprimido, menos qualidade se tem. GIF – Graphics Interchange Format Padrão de imagem com menor qualidade (limite de 256 cores) que implementa algoritmo de compressão de dados e entrelaçamento (permite a carga parcial para rápida visualização da imagem). Uma de suas interessantes características é o fato de se poder armazenar num único arquivo diversas imagens que ao serem trocadas seqüencialmente criam a sensação de uma animação. PNG – Portable Network Graphics Padrão de imagem que trabalha com 24 bits permitindo grande número de cores. Este tipo de imagem trabalha com transparência. Isto quer dizer que uma imagem não precisa ser exatamente quadrada de forma que ao aplicarmos sobre um fundo digamos escuro, não aparece o fundo (Exemplo:quadrado branco ao redor da imagem) que em geral surge quando utilizado certos tipos de imagem. Inserindo imagens na página A inserção da imagem numa página HTML nada mais é do que uma marca que informa onde a imagem pode ser encontrada. Uma imagem pode estar:
Na mesma pasta (diretório) da página que está tentando exibi-la
Numa pasta diferente da página que está tentando exibi-la
Num outro endereço/servidor web Para exemplificar estas situações iremos utilizar as duas imagens abaixo:- Simbolo2000.jpg Alce.jpg Imagem existente na mesma pasta da página web Vamos agora imaginar que temos os seguintes arquivos numa mesma pasta:
Disney.htm: Página que você está desenvolvendo.
Simbolo2000.jpg: Imagem do símbolo das festas do ano 2000, que você quer exibir na página Disney.htm. Você poderá carregar a imagem Simbolo2000.jpg, na página Disney.htm através do uso da marca da seguinte forma:- Prof. Carlos Majer Página 24 INTRODUÇÃO AO DESENVOLVIMENTO WEB VERSÃO 3.1 Isto é o suficiente para exibir esta imagem na página, considerando que ambos os arquivos (da imagem e da página) estão na mesma pasta.  Lembre-se de que o Firefox se importa com a caixa (letras maiúsculas e minúsculas) dos nomes de arquivos. Isto quer dizer que se o arquivo foi salvo com tudo em maiúsculo (Exemplo: SIMBOLO2000.JPG), e inserido na página como no exemplo acima, o Firefox não conseguirá localizar este arquivo. Para que ele funcione, você terá que informar na página o nome do arquivo exatamente como foi gravado no diretório, letra por letra. Imagem existente em subpasta (dentro da pasta do projeto) Vamos imaginar agora outra situação: Na medida em que você vai criando novas páginas e gerando novas imagens, você percebe que existem muitos arquivos na mesma pasta, o que está lhe dificultando a tarefa de gerenciar estes arquivos. Algo que é comum a se fazer neste caso é separar as páginas web (arquivos HTML) numa pasta e as imagens em outra pasta. Exemplo:- Podemos verificar no exemplo acima que foi criada uma pasta de nome Projetos. Dentro dela, foi criada uma pasta de nome Disney que é onde iremos inserir/criar as páginas web (HTML). Dentro desta última foi criada outra pasta de nome imagens, que é onde serão inseridas todas as imagens do Projeto Disney. Para que isto funcione, precisaremos então ajustar a marca que carrega a imagem, para considerar a mudança de pasta:- Note que como a pasta imagens está dentro da pasta corrente/atual, precisamos apenas informar seu nome e uma barra para separar o nome do arquivo de imagem. Imagem existente em diretório anterior ao do projeto Vamos imaginar uma situação onde as imagens precisam estar disponíveis para diversos projetos. Podemos viabilizar esta situação criando uma pasta imagens no mesmo nível das pastas dos projetos. Exemplo:- No exemplo acima podemos verificar a existência de dois projetos (Canadá e Disney). Ao criarmos a pasta imagens no mesmo nível destes projetos, podemos utilizar os arquivos (as imagens) desta pasta em qualquer um dos projetos. Isto quer dizer que todas as imagens ficariam numa única pasta e seriam acessíveis por qualquer página (de qualquer projeto). Vamos ajustar nossa página Disney.htm para ver como fica? Antes de começar a explicar, para quem não conhece o funcionamento do sistema de pastas e diretórios, utilizamos barras para separar a informação de caminho quando navegar por diversas pastas. Prof. Carlos Majer Página 25 INTRODUÇÃO AO DESENVOLVIMENTO WEB VERSÃO 3.1 O exemplo abaixo significa que o arquivo carro.jpg está contido na pasta atual, dentro da subpasta imagens:- Voltando à nossa explicação, podemos verificar que o caminho a ser percorrido para encontrar a imagem desejada é:- " ../imagens/Simbolo2000.jpg" Utilizamos dois pontos (..) para voltar ao diretório anterior, e em seguida entramos na pasta imagens para em seguida poder acessar o arquivo desejado. Utilizando este mesmo exemplo para criação de uma página Canadá, que precise carregar a imagem Alce.jpg, podemos ter a seguinte página:- " ../imagens/Alce.jpg" Note a semelhança para o acesso das imagens existentes na mesma pasta. Utilizando imagens existentes em outro site Vamos dizer que você visitou um site e gostou de uma imagem e decidiu utilizá-la temporariamente na sua página, mas não quer armazenar a imagem (o arquivo) em sei site. Vamos supor que este site se chame www.site.com.br, e a imagem esteja numa pasta chamada cidades e seu arquivo (imagem) seja NY.png. Para você utilizar esta imagem em seu site, o comando abaixo deverá ser utilizado (em sua página):-  Você pode referenciar qualquer imagem em seu site, isto é, fazer uma referencia a uma imagem que exista em outro servidor/endereço web  Você precisa informar a URL completa. (Não sabe o que é isto? Volte ao começo desta apostila)  Você corre o risco da imagem sumir, de uma hora para outra, caso o administrador do site onde a imagem se encontra decida removê-la Links Os links (ligações) ou âncoras são elementos (trechos de texto, imagens, etc) utilizados para ligação/conexão com outros elementos que podem estar na mesma página ou em outras páginas (de outros sites). Estes elementos podem ser de diversos tipos (página web, imagens, vídeos, etc) na Internet.  Hipertexto denota um link baseado em texto enquanto que Hiperlink significa qualquer tipo de link. Hipermídia significa qualquer tipo de mídia (áudio, vídeo, texto, gráficos, etc) que tenha um link ativado. Um link é executado ao ser clicado. Percebe-se a existência de um link quando ao posicionar-se sobre o link, o desenho do cursor muda para uma mão. Em alguns casos, em se tratando de links baseados em texto, o estilo do texto fica sublinhado e numa cor diferente do resto do texto. Prof. Carlos Majer Página 26 INTRODUÇÃO AO DESENVOLVIMENTO WEB VERSÃO 3.1 A sintaxe para criação de um link é:- Conteúdo a ser mostrado na página Onde a letra a significa âncora, que serve como um aviso de referência para algum local (interno ou externo), e em seguida temos o código href que é um atributo que identifica a URL destino a ser referenciada. Onde se lê url, no comando acima, troque pelo endereço completo da página a ser referenciada. Isto quer dizer que basicamente encapsulamos o conteúdo a ser exibido dentro das marcas e . Exemplo de criação de um link:- Clique aqui para entrar no Site da Unicid.  Sempre insira o conteúdo de um atributo dentro de aspas duplas. Como será verificada posteriormente, esta é uma das regras do padrão XHTML Os links podem ser de dois tipos: Links internos e links externos. Criando Links Internos Um link interno ocorre quando criamos um link para uma informação existente na mesma página. Vamos imaginar que temos um livro, em formato HTML (em páginas web). Numa destas páginas temos uma referência a uma informação que se encontra detalhada no final da página. Podemos inserir um link nesta referência de modo que ao ser clicado, a parte da página que descreve esta referencia é exibida. No exemplo abaixo, temos um link no trecho de texto “4 – Descrição de Caso de Uso”:- Prof. Carlos Majer Página 27 INTRODUÇÃO AO DESENVOLVIMENTO WEB VERSÃO 3.1 O link “4 – Descrição de Caso de Uso”, Uso ao ser clicado, desce a página até localizar e exibir a informação linkada. Criando links / âncoras para elementos dentro do mesmo documento. Um link para um elemento dentro da mesma página é criado criad em duas partes:- Prof. Carlos Majer Página 28 INTRODUÇÃO AO DESENVOLVIMENTO WEB VERSÃO 3.1 O primeiro passo é criar uma âncora identificada para um determinado local, que nada mais é do que o local que queremos que seja exibido quando o usuário clicar no link. Exemplo:- Dados do Cliente Neste exemplo, utilizamos a marca a (âncora) com o atributo name identificando uma determinada área (neste caso, uma região de texto) pelo nome de dados_cliente. Isto é o que chamamos por âncora identificada. O segundo passo é colocar um link para esta área, na mesma página. Exemplo:- Consulte os Dados do Cliente para saber mais a respeito.  Âncoras identificadas são geralmente utilizadas para se criar um Índice no início ou final de um documento. Exemplo de utilização de âncora identificada.

Introdução

De acordo com as regras do W3C – World Wi........

Os padrões de desenvolvimento web devem....................................... ..............

Clique aqui para voltar ao topo de página. Criando Links Externos A criação de links externos funciona referenciando-se a URL completa que se deseja ligar. No exemplo abaixo, temos um trecho de texto que é um link para o site da Unicid (que será aberto na janela aberta, do navegador):- Unicid No exemplo abaixo, temos um trecho que é um link o IP do UOL (em fevereiro de 2009), abrindo a página índex.html:- UOL Prof. Carlos Majer Página 29 INTRODUÇÃO AO DESENVOLVIMENTO WEB VERSÃO 3.1 Inserindo um link numa imagem Vamos imaginar que desejamos inserir uma imagem em nossa página (brubovnik.jpg) e criar um link, nesta imagem, para o site da cidade de Dubrovnik (http://www.dubrovnik-online.com/) Exibir uma imagem na página HTML é um comando relativamente simples. Neste caso, seria algo assim:- Neste exemplo assumo que o arquivo da imagem dubrovnik.jpg encontra-se na pasta imagens, existente no mesmo nível da página web editada. O próximo passo é encapsular o comando acima (abaixo em cinza) dentro de um link para o site da cidade de Dubrovnik: www.dubrovnik-online.com:-  O conteúdo em cinza acima, representa a imagem a ser exibida. Note que ela está encapsulada pelo comando que faz dela um link: e . Inserindo um link numa imagem externa Uma imagem externa nada mais é do que um arquivo (de imagem) que se encontra num endereço web (URL). Isto nós já vimos como se faz, mas vamos fazer uma recapitulação. Vamos imaginar que a imagem abaixo esteja no site http://www.site.com.br, numa pasta chamada imagens e seu nome de arquivo seja familia.png. Você deseja inserir esta imagem em seu blog (na sua página de blog), mas devido a restrições deste site de blogs, a única coisa que você consegue fazer nele é inserir textos. Como já visto anteriormente, você pode fazer uma referência (exibir na sua página) a uma imagem existente em outros sites. Neste caso, o comando HTML da sua página (de blog) para exibir esta imagem seria:- E pronto! A imagem aparece na sua página, como se ela estivesse no seu site. Só que você gostaria que, caso o usuário clicasse nesta imagem, o site acima fosse carregado. Para isto, devemos encapsular o comando/marca acima dentro de um link. Vamos lá? Prof. Carlos Majer Página 30 INTRODUÇÃO AO DESENVOLVIMENTO WEB VERSÃO 3.1 Pronto! Agora temos em nossa página uma referência à imagem que existe em outro site e a mesma é um link para o site desejado. Abrindo o link numa outra página Quando o usuário clica no link existente na página, este link será aberto na própria página. Ocorre que as vezes queremos que este link seja aberto numa nova página. Para isto, podemos utilizar o atributo _target, informando o valor _blank para definir onde o documento apontado pelo link será aberto. No exemplo abaixo, uma nova janela será aberta pelo navegador:- Unicid Os outros valores para target são:_self: Abre o link na mesma página (padrão) _parent: Abre o link na página pai (veja frameset) _top: Abre o link na página inicial (veja frameset) Tabelas O HTML possibilita a utilização de tabelas, internamente divididas em linhas e células. Tabelas são criadas através das marcas .., sendo dividida em linhas através da marca ... As linhas são divididas internamente em células de dados através da marca .. ou células de cabeçalho, através da marca ... Dentro da célula inserimos o conteúdo desejado (textos, imagens , listas, formulários, etc.). Quando não for especificado, o atributo tabela não conterá bordas. border da tabela é assumido com o valor zero (0), ou seja, a Exemplo de uma tabela sem borda:-

Linha 1, Célula 1	Linha 1, Célula 2
Linha 2, Célula 1	Linha 2, Célula 2

Prof. Carlos Majer Página 31 INTRODUÇÃO AO DESENVOLVIMENTO WEB VERSÃO 3.1 Note que ao não utilizar-se borda numa tabela (exemplo acima), não se percebe a separação entre o conteúdo das diversas células. Tamanho das células numa tabela Usualmente, utilizamos uma única célula para inserção de conteúdo. Entretanto, existem alguns casos onde o conteúdo de uma célula pode ocupar mais do que uma linha ou coluna. Para estes casos, o HTML disponibiliza os seguintes atributos:Rowspan: Possibilita informar à tabela qual o número de linhas que uma célula irá ocupar. No exemplo, definimos que a primeira célula irá ocupar três linhas:-

Professores	Projeto de Interfaces	Sistemas
	Carlos	Tatiana
	Fernando	Jadir

Resultado:- Colspan:Este atributo informa ao navegador o número de colunas que uma célula irá ocupar. Observe que no exemplo abaixo, informamos que as células de cabeçalho irão ocupar 2 colunas, cada uma:- Prof. Carlos Majer Página 32 INTRODUÇÃO AO DESENVOLVIMENTO WEB VERSÃO 3.1

Projeto de Interfaces		Sistemas
Carlos	Tatiana	Fernando	Jadir

Resultado:- Bordas Para inserir uma borda numa tabela, utilizamos o atributo border, especificando a espessura da borda desejada. Se mudarmos a marca de criação da tabela acima, configurando-a para exibir a borda, teremos uma tabela com o seguinte layout:- Ao aumentarmos o tamanho da borda, temos alguns efeitos visuais interessantes:- Determinando a cor das bordas Podemos determinar a cor da borda utilizando o atributo bordercolor. Exemplo:- Prof. Carlos Majer Página 33 INTRODUÇÃO AO DESENVOLVIMENTO WEB VERSÃO 3.1 Alguns efeitos interessantes podem ser conseguidos com isto:- Inserindo título / legenda numa tabela O desenvolvedor pode inserir uma legenda, que irá acompanhar o layout da tabela. Para isto, ele utiliza-se da marca

,logo após abrir a marca . Exemplo:- A legenda será posicionada sobre a tabela, isto é, antes da tabela ser exibida. Cabeçalhos na tabela Células de cabeçalho na tabela são definidas através da marca Trabalhando o Layout das tabelas Distanciamento das bordas Em geral, o conteúdo da célula fica encostado às suas bordas. O atributo cellpadding da tabela, nos permite determinar uma distäncia a ser aplicada, entre o conteúdo e as bordas das células.

Legenda/titulo da Tabela

Cabeçalho Cabeçalho 2 Linha 1, Célula 1 Linha 1, Célula 2 Linha 2, Célula 1 Linha 2, Célula 2 Prof. Carlos Majer Página 34 INTRODUÇÃO AO DESENVOLVIMENTO WEB VERSÃO 3.1 Os cabeçalhos são centralizados na célula e em negrito. Cores nas Tabelas Tabelas podem ter suas linhas (e consequentemente suas células) configuradas para a utilização de determinadas cores de fundo. Exemplo:- Marca Uso <h1> a <h6> Marcas de Início de Cabeçalho <p> Marca de início de parágrafo <table> Marcas de Início de Tabela <tr> Table Row – Inicia uma linha numa tabela <td> Table Data – Inicia uma coluna numa tabela Prof. Carlos Majer Página 35 INTRODUÇÃO AO DESENVOLVIMENTO WEB A aplicação do atributo VERSÃO 3.1 bgcolor pode ser feito em diversos elementos da tabela, dentre eles, nas marcas table, tr, th e td. O desenvolvedor pode modificar a cor de fundo de apenas uma célula (marca	ou	) de uma tabela, se assim o desejar. Aluno Resultado João Aprovado Joé Reprovado Marina Aprovada Além dos nomes de algumas cores, o navegador está preparado para reconhecer um código de cor no formato RGB (Red-Green-Blue) que é uma cor baseada na mistura das cores vermelha, verde e azul, conforme uma intensidade que varia de 0 a 255. O desenvolvedor deve utilizar o caractere # seguido por seis números, onde cada dois números representa a intensidade de cada cor (RGB). Prof. Carlos Majer Página 36 INTRODUÇÃO AO DESENVOLVIMENTO WEB VERSÃO 3.1 Trocando a cor de fundo = “red”, do exemplo acima, pela cor “#FD9886”, temos o seguinte resultado:-	Reprovado

Modelos de carros mais vendidos por fabricante

Marca	Carro
Wolkswagen	Fox, Gol, Polo
Fiat	Palio, Siena, Marea

Resultado:- Prof. Carlos Majer Página 37 INTRODUÇÃO AO DESENVOLVIMENTO WEB VERSÃO 3.1 No código acima, informamos um espaço entre o conteúdo e as bordas de vinte pixels. Distanciamento entre as células De forma similar, podemos distanciar uma célula da outra através da utilização do atributo cellspacing, na tabela. Alterando a linha de criação da tabela, no exemplo acima, temos o seguinte:- Resultado:- No caso acima, verificamos um distanciamento de 15 pixels entre uma célula e outra. Caso juntemos ambas as opções temos o seguinte resultado:- Prof. Carlos Majer Página 38 INTRODUÇÃO AO DESENVOLVIMENTO WEB VERSÃO 3.1 Alinhamento O conteúdo das células de uma tabela pode ser alinhado. As opções existentes são de alinhamento horizontal (em sua largura) ou de alinhamento vertical (em sua altura). Alinhamento Horizontal Este tipo de alinhamento pode ser à esquerda (normal), centralizado, à direita ou justificado. O atributo     que define o alinhamento é o align e as opções são:left – Exemplo: , e podem ser opcionalmente usadas na estruturação de uma tabela. Elas possibilitam definir o cabeçalho, rodapé e corpo de dados das tabelas. No exemplo abaixo definimos os itens de cabeçalho e rodapé antes do grupo de dados (tbody) da tabela. No momento da exibição da tabela no navegador, a mesma será exibida conforme sua estrutura de cabeçalho, dados e rodapé. Exemplo:-

center – Exemplo:	right – Exemplo:	justify – Exemplo:	A tabela abaixo tem as      colunas alinhadas da seguinte forma:Colunas de Cabeçalhos: Todas centralizadas e em Negrito (padrão da marca	) Nome: Alinhada naturalmente à esquerda Salário: Alinhada à direita Cargo: Centralizada Descrição: Centralizado Exemplo de tabela com os quarto alinhamentos:- Prof. Carlos Majer Página 39 INTRODUÇÃO AO DESENVOLVIMENTO WEB VERSÃO 3.1 Código da tabela exemplo:- Nome Salário Cargo Descrição Claudia R$ 2.750,00 Gerente de RH Responsável pelo Departamento Pessoal, Plano de Cargos e Salários, Treinamento e Qualificação Pessoal. Marcos R$ 3.280,00 Gerente Comercial Responsável pelos contatos com clientes, levantamento de pedidos, fechamento de vendas e faturamento da empresa. Roberto R$ 7.970,00 Diretor Financeiro Responsável pelo controle e planejamento financeiro da empresa dentre eles: Caixa, Tesouraria, Previsão Orçamentária e Controle Bancário. Prof. Carlos Majer Página 40 INTRODUÇÃO AO DESENVOLVIMENTO WEB VERSÃO 3.1 Alinhamento Vertical Este tipo de alinhamento pode feito com base no topo (alto), no meio (padrão), no fundo (embaixo) ou na linha base da célula. Como dificilmente se utiliza a linha base, não irei explicar este atributo. O atributo    que define o alinhamento é o align e as opções são:top – Exemplo:	middle – Exemplo:	bottom – Exemplo:	A tabela abaixo tem as colunas alinhadas da seguinte forma: Colunas de Cabeçalhos: Todas centralizadas e em Negrito (padrão da marca	)  Top: Alinhada no topo  middle: Alinhada no meio  Bottom: Alinha no fundo Note também que para se visualizar o alinhamento vertical, defini a altura (height) da célula com 50 pixels. Código da tabela exemplo:- Topo Meio Fundo Conteúdo Conteúdo Conteúdo Agrupando elementos de tabelas As marcas

Prof. Carlos Majer Página 41 INTRODUÇÃO AO DESENVOLVIMENTO WEB VERSÃO 3.1

Sua nota

1	Avaliação Presencial	8	6
2	Avaliação Continuada	2	1,5
3	Comparecimento	75%	80%
Item	Elemento Avaliado	Nota Máxima	Nota Obtida
Resultado:			Aprovado

Prof. Carlos Majer Página 42 INTRODUÇÃO AO DESENVOLVIMENTO WEB VERSÃO 3.1 Listas O HTML permite a criação de listas ordenadas e não ordenadas. Listas ordenadas caracteriza-se por uma relação de elementos, geralmente de mesmo tipo ou natureza, que são dispostos numa determinada ordem e numerados (quando o caso) automaticamente pelo navegador. Criando Listas Ordenadas A criação de listas ordenadas se dá pela marca de abertura de listas ordenadas

e em seguida pela criação dos itens de lista pela marca
1. . Cada Item de lista deve ter sua marca fechada
, bem como a lista

.  OL = Ordered List, LI = List Item  As listas inserem uma linha em branco antes e depois de seu comando de criação Para inserir itens encadeados, isto é, como se fossem subitens da lista, deve-se criar uma nova lista, que pode ser ordenada ou não. Exemplo:- Frutas Tropicais

1. Banana
1. Nanica
2. Maça
2. Laranja
3. Abacaxi

FIM Resultado:- Atributos de Tipos de Estilo de Listas Numeradas A configuração de uma lista numerada é ser marcada por números. O Atributo numérico de seus itens. Os atributos possíveis são:- Prof. Carlos Majer TYPE permite definir o estilo Página 43 INTRODUÇÃO AO DESENVOLVIMENTO WEB Atributo A A I i 1 VERSÃO 3.1 Estilo Letras do Alfabeto em Maiúsculo Letras do Alfabeto em Minúsculo Números Romanos em Maiúsculo Números Romanos em Minúsculo Lista em ordem numérica (padrão) Também é possível misturar os tipos. Exemplo:- Frutas Tropicais

1. Banana
1. Nanica
2. Maça
2. Laranja
3. Abacaxi

FIM Criando Listas Não Ordenadas A criação de listas ordenadas se dá pela marca de abertura de listas ordenadas

e em seguida pela criação dos itens de lista pela marca
• . Cada Item de lista deve ter sua marca fechada
. No final, a lista também deve ser fechada pela marca

.  UL = Unordered List Carros

• Fiat
• Ford
• GM
• VW

FIM Prof. Carlos Majer Página 44 INTRODUÇÃO AO DESENVOLVIMENTO WEB VERSÃO 3.1 Resultado:- Atributos de Tipos de Estilo de Listas Não Numeradas Listas não numeradas são marcadas por um determinado desenho. O Atributo numérico de seus itens. Os atributos existentes são:Atributo circle square Disc TYPE permite definir o estilo Estilo Circulo Aberto Quadrado Fechado Losango Fechado Carros Populares

• Fiat
• Uno Mille
• Ford
• Ka
• GM
• Corsa
• VW
• Gol

FIM Resultado (no navegador Internet Explorer):- Prof. Carlos Majer Página 45 INTRODUÇÃO AO DESENVOLVIMENTO WEB VERSÃO 3.1  As marcas (ícones) que precedem os itens de uma lista não ordenada variam conforme o navegador Listas de Definição Diferentemente de listas de itens, as listas de definição disponibilizam uma forma de se explicar o que significam certos termos. Os itens contidos nas listas de definição não têm marcação (de números ou desenhos). A criação de listas ordenadas se dá pela marca de abertura de listas de definição

e em seguida pela criação dos termos da lista pela marca

, e em seguida a criação da área de explicação do termo, pela marca de descrição da definição

. Exemplo:-

IBM PC

Personal Computer. Este termo ainda hoje é muito utilizado para designar os computadores pessoais que fizeram muito sucesso por conta da política de vendas implementada pela IBM no começo dos anos 80.

AT

Advanced Technology . Este termo foi muito utilizado para designar os computadores da IBM, lançados após o PC (8086), com destaque o 80286, processador muito conhecido como 286.

Resultado:-  Dl = Definition List, dt = Definition Term, dd = Definition Data Prof. Carlos Majer Página 46 INTRODUÇÃO AO DESENVOLVIMENTO WEB VERSÃO 3.1 Frameset (Conjunto de Quadros) Frameset é utilizado quando se deseja trabalhar a tela do navegador (Internet Explorer, Firefox, Safári, etc) como um local separado por partes (áreas) independentes. Cada área pode também ser dividida em subáreas através da criação de novos framesets. Por final, dentro das áreas criadas temos o quadro (frame) que é quem contem de fato o conteúdo. No exemplo abaixo temos um conjunto de quadros (frameset) estruturado em cinco colunas, cada qual contendo apenas um quadro (frame) em seu interior:- Uma determinada área pode ser subdividida em outras áreas. No exemplo abaixo, o frameset (conjunto de quadros) está dividindo em três colunas. A primeira coluna tem apenas um quadro. A segunda coluna está subdividida em 2 linhas (novo conjunto de quadros). E a terceira coluna está subdividida em 3 linhas (novo conjunto de quadros). Cada linha representa um quadro (frame). Podemos notar com isso que um quadro (frame) é parecido como uma célula de uma tabela. No exemplo abaixo, iremos verificar como uma estrutura de quadros baseado em linhas. Prof. Carlos Majer Página 47 INTRODUÇÃO AO DESENVOLVIMENTO WEB VERSÃO 3.1 Quando o navegador trabalha com quadros (frames), ele trata o conteúdo de cada quadro separadamente, ou seja, o conteúdo de cada quadro (frame) advém de um arquivo .HTML, que é carregado e é manipulado de forma independente dos demais quadros. Criando Frames O primeiro passo na criação de quadros é o estabelecimento do conjunto de quadros, através da marca . Esta estrutura define como os quadros internos serão criados. O desenvolvedor deverá informar se ele deseja separar o layout da página em linhas (rows) ou colunas (cols). Quando se utiliza a marca , não é permitido a utilização da marca , exceto quando ela for inserida dentro na marca , que é utilizada para navegadores que não entendem quadros. Exemplo de quadros utilizando linhas:- Resultado do Layout da Página HTML:- Prof. Carlos Majer Página 48 INTRODUÇÃO AO DESENVOLVIMENTO WEB VERSÃO 3.1 Exemplo de quadros utilizando colunas:- Resultado do Layout da Página HTML:- Na criação de quadros, deve-se prever o uso de navegadores que não tenham este recurso. Para isto, a marca deve ser utilizada. Exemplo:- <body> <!-- Insira aqui o conteúdo para navegadores que não conseguem entender quadros--> </body> Um dos erros mais comuns é quando o desenvolvedor insere a marca dentro da marca . As marcas em vermelho no exemplo abaixo estão incorretas:- Frame de Navegação É muito comum o desenvolvedor criar uma área para navegação do site. O primeiro exemplo montará uma página baseada em conjunto de quadros (frameset) que irá carregar dois frames: Frame de nome MENU que carregará o arquivo menu.html  Frame de nome CONTEUDO que carregará o arquivo conteúdo.html Prof. Carlos Majer Página 49 INTRODUÇÃO AO DESENVOLVIMENTO WEB VERSÃO 3.1 Analisando o código HTML O primeiro arquivo será o que contém a estrutura do conjunto de quadros. Vamos nomeá-lo como EXEMPLO.HTML. Este frameset é baseado em duas colunas. Primeira Coluna A primeira coluna terá 200 pixels e a segunda o restante. Nela será criado um quadro (frame) cujo nome é menu e seu conteúdo virá do arquivo menu.html. Segunda Coluna A segunda coluna ocupará o restante da área visível da tela do navegador e se chamará conteúdo. Seu conteúdo virá do arquivo conteudo.html. Arquivo exemplo.html O arquivo de menu criará dois links na tela, na área conteudo. Arquivo menu.html Opção 1 - Clique aqui
Opção 2 - Clique aqui
Quadros Inseridos (In-Line Frames) É possível inserir quadros que ocupam um espaço específico dentro de uma página (ou de um quadro html) atuando como se fosse uma página independente do resto da página onde o mesmo está inserido. Isto permite ao desenvolvedor tratar uma determinada área como se fosse uma página a parte, contendo um código específico.Exemplo:- Prof. Carlos Majer Página 50 INTRODUÇÃO AO DESENVOLVIMENTO WEB VERSÃO 3.1

	Veja o Site da Unicid no quadro abaixo:

Resultado:- Vantagens e desvantagens no uso de frameset Algumas dificuldades relacionadas no uso de quadros são:
Conseguir voltar à página anterior (Uso do botão VOLTAR)
Conseguir imprimir a tela (como um todo)
O desenvolvedor deve gerenciar cada um dos arquivos de cada frame
Não é tão fácil identificar o endereço que o frame aponta Por outro lado, o uso de quadros permite as seguintes vantagens:
Certas partes da tela sempre permanecem visíveis liberando o desenvolvedor da tarefa de ter que se preocupar com o que ele deverá mostrar numa parte da tela do navegador
A barra de navegação pode ser simplificada, e deixada apenas num dos quadros, sem ter a necessidade de existir nos diversos arquivos .html Prof. Carlos Majer Página 51 INTRODUÇÃO AO DESENVOLVIMENTO WEB VERSÃO 3.1 Formulários Basicamente, um formulário permite uma interação específica entre o usuário (cliente) e o site, muitas vezes levando a uma troca de informações entre as partes. Eles são basicamente utilizados para envio de objetos para uma determinada URL. As aplicações mais comuns são encontradas no preenchimento de informações pessoais e/ou comerciais para envio de páginas dinâmicas que armazenam tais informações em banco de dados. Estas páginas dinâmicas, desenvolvidas em linguagens de programação para web (CGI – Common Gateway Interface, Perl, PHP, ASP, ASP.NET, etc) recebem as informações enviadas pela página onde foi criado o formulário, abrindo o banco de dados destino e gravando as informações em suas tabelas. Outra possibilidade é o envio de informações através do uso do software de correio eletrônico. Criando formulários Um formulário é criado através da tag FORM. Exemplo:

... ... Conteúdo a ser exibido ... E elementos (de formulário) a serem preenchidos pelo usuário ...

A marca

tem como atributos os elementos:name: Define o nome do objeto de formulário. No exemplo acima, o nome do formulário é frmCadastro. method: Define a maneira pela qual os objetos (e seus conteúdos) serão enviados para a página destino. No exemplo acima o método a ser utilizado é o POST (explicado abaixo) action: Define qual é a página destino dos dados. No exemplo acima, a página que irá tratar estes objetos é a ”http://www.meusite.com.br/CadCliente.ASP” Métodos de Envio de Objetos de Formulários Existem dois métodos para envio dos objetos de formulários:GET: Caracteriza-se por enviar os dados (objetos e seus conteúdos) para a página destino utilizando a barra de endereços. Suas restrições consistem no número limitado de caracteres que a linha de endereços permite (geralmente 128 caracteres) e a menor segurança percebida por expor claramente o nome das variáveis e seus conteúdos, possibilitando que usuários com menor conhecimento consigam reproduzir o envio de dados de uma página informando manualmente os conteúdos dos objetos. O primeiro objeto deve ser inserido no final da barra de endereços utilizando o ponto de interrogação, seu nome (do objeto), e o sinal de igual para envio do conteúdo. Os demais objetos devem ser separados por um sinal de E comercial (&), seu nome, o sinal de igual e seu conteúdo. Exemplo:http://br.altavista.com/web/results?itag=ody&q=unicid&kgs=1&kls=0 Prof. Carlos Majer Página 52 INTRODUÇÃO AO DESENVOLVIMENTO WEB VERSÃO 3.1 No exemplo acima podemos verificar que a URL http://br.altavista.com/web/results está sendo executada, com os seguintes objetos:itag=ody : Objeto de nome “itag” com o conteúdo “ody” q=unicid : Objeto de nome “q” com o conteúdo “unicid” kgs=1 : Objeto de nome “kgs” com o conteúdo “1” kls=0 : Objeto de nome kls com o conteúdo “0” A maneira pela qual os objetos serão utilizados serão tratados conforme a programação da URL destino. POST:Caracteriza-se por enviar os dados junto com a página, de forma transparente e não visual. O usuário não consegue enxergar quais são os dados que estão sendo enviados. Apenas o endereço de destino é visualizado na tela. Permite o envio de grande quantidade de objetos. Objetos de Formulários Diversos objetos podem ser criados dentro de um formulário. Eles podem ser digitados pelo usuário, selecionados através de uma lista ou clicados numa área específica. Elemento Caixa de Texto Este tipo de elemento caracteriza-se por uma área onde o usuário poderá digitar ou visualizar uma determinada informação textual e ocupa uma determinada área numa única linha. Sintaxe Básica: Atributos Para este tipo de elemento, os atributos possíveis são:Atributo Descrição Desabilita a entrada do objeto de forma que o usuário não disabled="disabled" consegue alterar seu conteúdo. Visualmente falando, o usuário consegue perceber que este campo está desabilitado, pois a cor do texto deste objeto é modificada para cinza. Define o nome exclusivo do objeto. Tenha cuidado ao não informar um nome name="nome" que já está sendo utilizado por um outro objeto na página, ou numa função Javascript. Determina n como sendo o número máximo de caracteres que pode ser maxlength="n" inserido neste objeto readonly= "readonly" Desabilita a entrada de dados, não permitindo sua edição pelo usuário. Determina como n o tamanho do elemento size="n" Determina um texto inicial já carregado no objeto. value="texto" Exemplos:1) Criação de uma de caixa de texto identificada como endereco:Digite seu endereço Prof. Carlos Majer Página 53 INTRODUÇÃO AO DESENVOLVIMENTO WEB VERSÃO 3.1 2) Criação de uma de caixa de texto previamente preenchida com o texto “São Paulo”:Cidade: 3) Criação de uma caixa de texto com tamanho 10 e que permite até 15 caracteres de digitação Nome: 3) Criação de uma caixa de texto o atributo readonly, o que não permite alteração de seu conteúdo Senha Anterior: 4) Criação de uma caixa de texto o atributo disabled, o que não permite alteração de seu conteúdo e serve como indicação visual ao usuário de que o campo está desabilitado para alterações Senha Anterior: Elemento Senha Basicamente uma caixa de texto que mostra asteriscos quando o usuário digita alguma coisa. Uma de suas particularidades é a de que quando o usuário clica no botão de VOLTAR, do navegador, este campo perde seu valor anterior (é limpo). Sintaxe Básica: Atributos São os mesmos do campo tipo texto. Exemplo:1) Criação de uma de caixa de senha identificada como senha:Digite sua senha: Prof. Carlos Majer Página 54 INTRODUÇÃO AO DESENVOLVIMENTO WEB VERSÃO 3.1 Obs: Exemplo capturado quando o usuário estava digitando a senha Elemento Botões de Rádio Os botões de rádio permitem ao usuário selecionar uma única opção, dentre diversas outras. Neste tipo de objeto, o desenvolvedor deve criar os diversos botões com o atributo name igual para todos. Assim, ele caracteriza um mesmo grupo de opções. Sintaxe Básica: Primeira Opção a ser exibida Segunda Opção a ser exibida Atributos Atributo checked="checked" disabled="disabled" name="nome" value="valor" Descrição Determina um objeto pré-selecionado Desabilita a entrada do objeto de forma que o usuário não consegue alterar seu conteúdo. Visualmente falando, o usuário consegue perceber que este campo está desabilitado, pois a cor do texto deste objeto é modificada para cinza. Define o nome exclusivo do objeto. Tenha cuidado ao não informar um nome que já está sendo utilizado por um outro objeto na página, ou numa função Javascript. Determina o valor que será enviado para a página destino (action) do formulário ao submetê-lo. Exemplos:1)Uma seleção de botões para se escolher o sexo da pessoa. Masculino Feminino 2)Uma seleção de botões com a opção VW selecionada e a opção FIAT desabilitada:Audi
Fiat
VW
Prof. Carlos Majer Página 55 INTRODUÇÃO AO DESENVOLVIMENTO WEB VERSÃO 3.1 * Quando o usuário clicar no botão ENVIAR (botão submit do formulário), a página destino irá receber o objeto de nome marca e o valor deste objeto será uma das seguintes opções: “A” ou “V”, já que a opção Fiat (valor “F”) está desabilitada.  O nome botão de rádio é uma analogia aos antigos rádios de carros, onde o ouvinte tinha que apertar um botão para escolher uma rádio pré-selecionada, e quando assim o fizesse, um outro botão anteriormente travado (pressionado) seria solto. Elemento Caixa de Verificação As caixas de verificação permitem ao usuário selecionar uma determinada opção do tipo Sim/Não (checado / não checado). É comum encontrar formulários com diversas opções, onde o usuário seleciona diversas opções de uma só vez. É um modo simples e rápido que facilita a comunicação com o usuário. Sintaxe Básica: Texto a ser exibido Atributos Atributo checked="checked" disabled="disabled" name="nome" value="valor" Descrição Determina que o objeto já está selecionado Desabilita a entrada do objeto de forma que o usuário não consegue alterar seu conteúdo. Visualmente falando, o usuário consegue perceber que este campo está desabilitado, pois a cor do texto deste objeto é modificada para cinza. Define o nome exclusivo do objeto. Tenha cuidado ao não informar um nome que já está sendo utilizado por um outro objeto na página, ou numa função Javascript. Determina o valor que será enviado para a página destino (action) do formulário ao submetê-lo. Exemplos:1) Pergunta ao usuário se ele deseja receber e-mails:Desejo receber e-mails Neste exemplo, o programa que receber o formulário (definido em ACTION), ao avaliar o conteúdo da variável de nome emails, poderá receber o valor em branco (""), caso o objeto não esteja checado ou o valor "1", caso o objeto esteja checado. Exemplo de programa em ASP que avaliará o objeto emails: Prof. Carlos Majer Página 56 INTRODUÇÃO AO DESENVOLVIMENTO WEB VERSÃO 3.1 <% emails=request("emails") if emails="1" then response.write("Você dediciu receber e-mails
") end if %>  O objetivo de um objeto do tipo caixa de checagem é ser avaliado pelo programa destino (ACTION do formulário), que irá tomar uma determinada ação em função de seu valor. O valor deste tipo de objeto está definido em seu atributo value. 2) Lista de aparelhos do escritório. Alguns deles estão previamente selecionados e o aparelho Telex está desabilitado:Marque tudo que tiver em seu escritório
Telex
Computador
Internet
Calculadora
Elemento Lista de Seleção As listas de seleção permitem ao usuário a escolha de uma dentre diversas opções. O atributo selected é utilizado para selecionar um item default da lista , ou seja, irá mostrar um determinado quando da exibição da lista. O atributo value de cada elemento/opção da lista é o que será enviado para o ACTION do formulário, quando de sua submissão. Fiat Ford GM Prof. Carlos Majer Página 57 INTRODUÇÃO AO DESENVOLVIMENTO WEB VERSÃO 3.1 VW Resultado:- A marca optgroup pode ser utilizada em conjunto para agrupar e destacar conjunto de opções, de forma a facilitar o entendimento das opções pelo usuário: Escolha aqui Diretor Comercial Diretor Financeiro Gerente Chefia responsável operador Prof. Carlos Majer Página 58 INTRODUÇÃO AO DESENVOLVIMENTO WEB VERSÃO 3.1 Elemento Área de Texto As áreas de texto permitem ao usuário digitar informações em formato de texto livre, de forma similar a qualquer editor simples de texto, como o bloco de notas. Exemplo:Observações
Digite seu texto aqui
O atributo rows define o número de linhas que o controle irá utilizar, enquanto que o controle cols define o número de colunas (caracteres). Caso deseje, o desenvolvedor pode deixar o controle com um conteúdo pré-determinando, inserindo-o entre suas marcas de abertura de fechamento, como no exemplo acima. Elemento Conjunto de Campos O elemento fieldset permite o agrupamento de objetos dentro de uma área comum. Ao se utilizar a marca legend, o conteúdo da mesma é exibido na borda do conjunto.

Sexo

Masculino Feminino

Elemento Botão Em geral, botões são utilizados dentro de formulários para:• Submeter um formulário. Prof. Carlos Majer Página 59 INTRODUÇÃO AO DESENVOLVIMENTO WEB • • VERSÃO 3.1 Carregar/Limpar (reset) os campos de um formulário, isto é, os valores dos objetos do formulário com suas informações iniciais. Executar uma ação específica, estando o botão geralmente associado à uma rotina desenvolvida numa linguagem de programação. No exemplo abaixo, dois objetos de caixa de texto são criados. Caso o usuário preencha alguma informação e clique no botão LIMPAR, estes objetos terão seu conteúdo (texto digitado) zedrado. Caso o usuário clique no botão Enviar, estes objetos serão enviados para o endereço definido no atributo ACTION do formulários: Nome:
e-Mail:

No exemplo abaixo, foi criado um botão que ao ser clicado exibe uma mensagem: Elemento LABEL A marca LABEL permite associar um trecho de texto a um elemento de formulário. Item 1
Item 2

Item 3
Item 4

Prof. Carlos Majer Página 60 INTRODUÇÃO AO DESENVOLVIMENTO WEB VERSÃO 3.1 Clique aqui para alterar o Item 2 - O comando label pode ser usado em diversos lugares
Clique aqui para alterar o Item 4- O comando label pode ser usado em diversos lugares Elemento Upload de Arquivo Este elemento permite o envio de um arquivo para o destino especificado pelo atributo formulário. Exemplo:- ACTION do

Prof. Carlos Majer Página 61 INTRODUÇÃO AO DESENVOLVIMENTO WEB VERSÃO 3.1 Convém notar que a página destino, informada no ACTION é quem irá tratar o arquivo, aceitando-o e/ou movendo-o para uma outra pasta. HTML ou XHTML? Uma das grandes criações na WEB foi o XML (Extensible Markup Language – Linguagem de Marcação Estendível). Esta nova linguagem permite a criação de marcas diferentes dentro do corpo de uma página WEB facilitando a criação e o transporte de informações relacionadas. Com base nisto, um novo padrão de páginas para Internet foi criado: o XHTML. Ele se baseia no HTML, mas aplica certas regras rígidas na criação de uma página web, de maneira a assegurar sua qualidade em desenvolvimento, possibilitando uma forma de se efetuar a verificação de erros em sua criação. Suas regras básicas são:- 1) Todas as marcas devem ter um par finalizador ou senão for possível, deverão ter uma barra finalizando a marca. Exemplos usando Par Finalizador: ,

, Exemplos usando Barra Finalizadora:

---

Incorreto:No exemplo abaixo, as tags
e

---

estão sem a barra finalizadora da marca
Site Atual

---

No exemplo abaixo, a marca

Rodízio de Veículos

As carros com placas de final 1 e 2 não podem trafegar no centro estendido, de 2ª. A 6ª. Feira, no horário de 07:00 as 10:00 e 17:00 as 20:00 hs.

Fonte: DETRAN

Resultado:- Prof. Carlos Majer Página 71 INTRODUÇÃO AO DESENVOLVIMENTO WEB VERSÃO 3.1 Delimitando o escopo de uma classe Existe uma forma de se criar estilos para uma classe que tenha sido usada por elementos criados dentro de outros elementos. No exemplo abaixo, estão sendo criadas duas classes que só serão aplicadas em elementos que as utilizem, desde que tenham sido criados dentro de parágrafos. Exemplo:

Uso comum, sem estilo

Título

Mensagem

Resultado:Uso comum, sem estilo Título Mensagem  Note que estas classes foram criadas para o seletor p (marca

). Blocos e Estrutura em Árvore De acordo com as definidas pelo W3C, os elementos contidos dentro de um documento (Explo: página HTML) passível da aplicação das especificações da CSS Nível 2, têm um elemento pai, com exceção do elemento raíz (root) que é o elemento (inicial) que contém todos os demais elementos. Prof. Carlos Majer Página 72 INTRODUÇÃO AO DESENVOLVIMENTO WEB VERSÃO 3.1 Isto quer dizer que um objeto está contido dentro de outro (de seu pai) e que o primeiro nível desta árvore de documentos é o elemento raiz. Desta forma, as propriedades relacionadas ao posicionamento e tamanho de objetos dependem de seu elemento pai. Uma outra maneira de se enxergar esta estrutura é:- Elementos de Bloco De acordo com as especificações de CSS Nível 2, do W3C, elementos em nível de bloco são aqueles formatadas como um bloco. No exemplo defino a propriedade de cor de fundo para exibição de parágrafos como laranja, e defino também que qualquer camada (

) criada terá como cor de fundo a cor amarela, o tamanho horizontal (largura) de 300 pixels e o tamanho vertical (altura) de 80 pixels. Em seguida, foi criado o primeiro parágrafo na página, uma camada (div), um parágrafo dentro desta camada, e um terceiro parágrafo, desta vez fora da camada. Pode-se notar que o primeiro parágrafo toma como tamanho horizontal, o tamanho da janela do navegador (verificação visual via cor de fundo). No caso do segundo parágrafo, cujo objeto pai é a camada onde ele foi inserido, pode se verificar que seu tamanho horizontal é igual ao da camada. Por fim, um terceiro parágrafo foi criado, fora da camada (div) de tal forma que, como o primeiro parágrafo, pode-se perceber que ele toma toda a largura do navegador. Código:

Primeiro

Segundo

Terceiro

Resultado:- Elementos em nível de linha Além de elementos de bloco temos também os elementos em nível de linha (in-line). Este tipo de elemento gera um bloco de linha seqüencial, que ocupa uma posição na linha em que é criado. Exemplo:-

Um elemento criado.

de linha não gera um novo bloco quando De acordo com o exemplo acima, pode-se verificar a existência de um parágrafo, que é um elemento de bloco, e dentro deste parágrafo temos três elementos em nível de linha:
O texto “Um”, que herda suas características do parágrafo
Um bloco de texto delimitado pela marca
Um texto finalizador da frase. Prof. Carlos Majer Página 74 INTRODUÇÃO AO DESENVOLVIMENTO WEB VERSÃO 3.1 A propriedade background Esta propriedade permite a definição do que será exibido na área de fundo dos elementos. Ela pode ser utilizada para se definir uma cor ou uma imagem de fundo. Seus possíveis valores são:Propriedade Descrição background Utilizado para especificar todas as possibilidades de background do objeto, de uma só vez. background-color Provavelmente a mais utilizada, esta propriedade permite definir a cor de fundo de um elemento. background-image Permite a definição de uma imagem que ficará como fundo do elemento. background-repeat Define a maneira pela qual a imagem (de fundo) será utilizada. background-attachment Define se a imagem de fundo background-position ???@@@ A propriedade background-color Esta propriedade define a cor de fundo de um elemento. Ela pode ser especificada da seguinte maneira:

Através de uma palavra chave que especifica a cor. Exemplo: blue Através do código RGB de uma cor. O formato RGB pode ser especificado de três formas:
Através dos 3 dígitos hexadecimais que compõem a cor, e que são transformados para 6 dígitos. Exemplo: #abc  #aabbcc
Através dos 6 dígitos hexadecimais que compõem a cor. Exemplo: #ffffff
Através da notação funcional RGB, no formato: RGB( r,g,b) podendo ser representados por números de 0 a 255 ou por porcentagens. Exemplo: rgb(20,10,30).
Através da palavra transparent, que define o fundo como transparente. Exemplo: transparent. Palavras chaves de cores Prof. Carlos Majer Página 75 INTRODUÇÃO AO DESENVOLVIMENTO WEB VERSÃO 3.1 A propriedade background-image background Utilizamos a propriedade background-image background image para determinar uma imagem que servirá como fundo de um elemento. O W3C aconselha a determinação da cor de fundo, quando da impossibilidade de localização ou carga da imagem de fundo. Caso não se deseje uma imagem como fundo, o desenvolvedor pode informar o valor none. Exemplo: Prof. Carlos Majer Página 76 INTRODUÇÃO AO DESENVOLVIMENTO WEB VERSÃO 3.1

Aqui vai um Logo.

Resultado:- Nem sempre o tamanho da imagem é igual ao tamanho de seu elemento pai. Quando isto acontece, a imagem pode ser cortada ou duplicada, conforme o elemento pai. Se fizermos um pequeno ajuste no código CSS acima iremos verificar um resultado diferente:#logo { background-image: url(figuras.jpg); background-color:white; width:100; height:50 } No CSS acima, as propriedades width e height da DIV foram eliminados, de forma que a DIV herda a altura e largura de seu elemento pai. Notem que a imagem foi duplicada no eixo dos x (horizontalmente). Uma imagem pode ser duplicada tanto no eixo dos x, quanto no eixo dos y. Exemplo:

Na medida em que esta
esta div vai crescendo
verticalmente a imagem
vai sendo duplicada,
conforme o eixo dos y (vertical).

Resultado:- A maneira pela qual uma imagem de fundo pode ser repetida é baseada na propriedade backgroundrepeat que pode ter os seguintes valores:Valor Repeat repeat-x repeat-y no-repeat Descrição A imagem se repete nos dois sentidos (horizontal e vertical) A imagem se repete no sentido horizontal (Eixo dos x) A imagem se repete no sentido vertical (Eixo dos y) A Imagem não se repete. Medidas As medidas no CSS são utilizadas para se determinar dimensões de altura e largura. Existem alguns casos em que se pode utilizar um valor negativo, e desenvolvedores têm utilizado isto em algumas técnicas para exibição parcial de imagens. As unidades de medidas utilizadas até a versão 2 do CSS são:






px: Significa pixel %: Significa uma porcentagem em: Está relacionada a uma proporção da fonte herdada do elemento pai ex: Está relacionada a altura da letra da fonte herdada do elemento pai pt: Significa o número de pontos na proporção de 1/72 polegadas pc: Significa o número de pica, que equivale a 12 pontos (pt) ou 1/6 de polegada cm: Significa o número de centímetros Prof. Carlos Majer Página 78 INTRODUÇÃO AO DESENVOLVIMENTO WEB
VERSÃO 3.1 in: Significa o número de polegadas (2,54cm) A propriedade display A propriedade display é uma das mais utilizadas, pois determina como será o layout do elemento a ser renderizado numa página web. Alguns valores mais utilizados são:- inline Faz com que o elemento crie uma caixa de linha. block Faz com que o elemento crie uma caixa em bloco. list-item Faz com que o elemento crie uma caixa em bloco e uma caixa de linha de item de lista. none Faz com que o elemento não crie caixa, de tal forma que o elemento criado não interfere na estrutura do documento. Desta forma, seus objetos descendentes também não criarão caixas, sendo que mesmo que a propriedade display dos objetos descendentes será ignorada. Espaçamento O CSS define algumas propriedades para especificar o espaçamento de elementos HTML:Propriedade padding padding-top padding-left padding-right padding-bottom Descrição Utilizado para especificar todas as possibilidades de espaçamento do objeto, de uma só vez. Quando utilizado, devem ser especificados os seguintes espaçamentos (nesta ordem):- superior direito fundo esquerdo, separados por espaço. Exemplo:10px 30px 40px 20px  Significa a aplicação de um espaçamento com 10 pixels da parte superior, 30 pixels da direita, 40 pixels do fundo e 20 pixels da esquerda. Determina o espaçamento do topo do objeto Determina o espaçamento do lado esquerdo do objeto Determina o espaçamento do lado direito do objeto Determina o espaçamento do fundo do objeto Os possíveis valores utilizados para se definir o espaçamento são:


auto: É o valor padrão de espaçamento valor: Um valor numérico, seguido da medida válida CSS (Exemplo: px, cm, etc) %: Porcentagem em relação ao elemento pai na estrutura No exemplo, iremos criar 5 ids, que serão utilizados em parágrafos diferentes:
Topo – O texto deste parágrafo terá um espaçamento de 10 pixels, da parte superior do parágrafo. Prof. Carlos Majer Página 79 INTRODUÇÃO AO DESENVOLVIMENTO WEB



VERSÃO 3.1 Esquerda – O texto deste parágrafo terá um espaçamento de 20 pixels, da esquerda do parágrafo. Direita - O texto deste parágrafo terá um espaçamento de 30 pixels, da esquerda do parágrafo. Fundo - O texto deste parágrafo terá um espaçamento de 40 pixels, do fundo do parágrafo. Todos – O texto deste parágrafo estará distante do topo do parágrafo em 10 pixels, da direita em 30 pixels, do fundo em 40 pixels e da esquerda em 30 pixels. Código:

Teste do Topo - 10 pixels

Teste da Esquerda - 20 pixels

Alinhamento a Direita - mas com distância de 30 pixels

Teste do Fundo - 40 pixels

Teste Completo - T: 10 D:30 F:40 E:20 pixels

Prof. Carlos Majer Página 80 INTRODUÇÃO AO DESENVOLVIMENTO WEB VERSÃO 3.1 Margens As margens também desempenham um papel especial já que permite um distanciamento entre os objetos numa página web. A aplicação de margens se dá de maneira muito parecida com a de espaçamento. Temos as seguintes propriedades:Propriedade margin margin-top margin-left margin-right margin-bottom Prof. Carlos Majer Descrição Utilizado para especificar todas as possibilidades de margem do objeto, de uma só vez. Quando utilizado, devem ser especificados as seguintes margens (nesta ordem):superior direito fundo esquerdo, separados por espaço. Exemplo:10px 30px 40px 20px  Significa a aplicação de um espaçamento com 10 pixels da parte superior, 30 pixels da direita, 40 pixels do fundo e 20 pixels da esquerda. Determina a margem do topo do objeto Determina a margem do lado esquerdo do objeto Determina a margem do lado direito do objeto Determina a margem do fundo do objeto Página 81 INTRODUÇÃO AO DESENVOLVIMENTO WEB VERSÃO 3.1 Os possíveis valores utilizados para se definir a margem são:


auto: É o valor padrão da margem valor: Um valor numérico, seguido da medida válida CSS (Exemplo: px, cm, etc) %: Porcentagem em relação ao elemento pai na estrutura No exemplo abaixo temos alguns exemplos de utilização de margens:

Este primeiro paragrafo tem 10 pixels nas margens do topo, esquerda, direita e fundo.

Este segundo paragrafo tem de margem: S:20 D:30 F:40 E:50 pixels

Terceiro paragrafo herdando o estilo apenas do parágrafo

Resultado:- Prof. Carlos Majer Página 82 INTRODUÇÃO AO DESENVOLVIMENTO WEB VERSÃO 3.1  * Caso se utilize de valores negativos nas margens pode ocorrer uma sobreposição de objetos. Posicionamento Posicionamento Estático (static) Este tipo de posicionamento segue o fluxo de objetos, no local onde o mesmo foi inserido, não podendo ser reposicionado. Posicionamento Relativo (relative) Similar ao posicionamento estático, porém podendo ser manipuladas suas propriedades top e left, de tal forma que seu posicionamento conforme o fluxo muda, de acordo com sua posição em relação a outros objetos. Posicionamento Absoluto (absoluto) Trata o posicionamento do objeto como absoluto, ou seja, sem ligação com qualquer outro tipo de objeto, de maneira independente. As informações de topo (top) e esquerda (left) em função à página web devem ser informadas (informadas inicialmente com 0px). Aplicações Aplicando o posicionamento estático Considere o seguinte código HTML

O gato malhado

Prof. Carlos Majer Página 83 INTRODUÇÃO AO DESENVOLVIMENTO WEB VERSÃO 3.1 Quando definimos que seu posicionamento é estático, a figura já não pode ser mudada de local, ou seja, o objeto/elemento irá acompanhar o fluxo dos objetos/elementos inseridos na página e não pode ser mudado. No exemplo abaixo, verificamos que o estilo de posicionamento do objeto/elemento “f” (a figura) foi definido como estático.  Alguns desenvolvedores afirmam que estático não é exatamente uma forma de se alterar o posicionamento, visto que os elementos criados numa página web por default seguem o fluxo normal e estático de posicionamento. Abaixo, é criada uma classe de nome posicionamento, que terá sua posição definida neste exemplo como absoluta, nas coordenadas 0,0 (topo e esquerdo). .posiciona { position:absolute; top:0px; left:0px; } Um pouco mais abaixo, utilizamos o Javascript para alterar a classe do objeto f (a figura) para a classe posicionamento (mostrada acima). Ocorre que no estilo do objeto foi definido anteriormente que seu posicionamento é estático, esta alteração não terá efeito nenhum. Exemplo Completo:

O gato malhado

teste Aplicando o posicionamento relativo No posicionamento relativo, como informado, podemos alterar as coordenadas de topo e margem esquerda. Iremos mudar um pouco nosso exemplo, para deixar o objeto f (a figura) inicialmente com o posicionamento relativo: Vamos mudar também a definição de posicionamento da classe, para verificarmos visualmente a ocorrência da alteração de posicionamento do objeto. .posicionamento { position:absolute; top:200px; left:200px; } Agora temos a seguinte condição:O estilo do objeto (figura f) foi inicialmente definido como relativo. Aplicamos uma classe que define seu posicionamento como absoluto, mas este objeto não aceitará esta mudança de propriedade. Na medida em que mudamos as propriedades top e left, deste objeto, estas alterações de posicionamento refletem no objeto, mudando seu posicionamento 200 pixels para baixo e para a direita (colocando uma margem de 200 pixels no topo e no lado esquerdo do objeto) relativo ao local onde ele se encontra.

O gato malhado

Resultado:- Quanto ao posicionamento absoluto de um objeto, ele é posicionado no local onde o usuário definir, independente da posição de outros objetos. Isto quer dizer que utilizando este tipo de posicionamento, um objeto pode sobrepor outro objeto. Vamos alterar um pouco nosso código exemplo, e sobrepor a imagem em cima do título. Exemplo:

O gato malhado

Resultado:- Neste exemplo verificamos que através deste tipo de posicionamento é possível colocar um objeto em qualquer local da página. Prof. Carlos Majer Página 87 INTRODUÇÃO AO DESENVOLVIMENTO WEB VERSÃO 3.1 Criando Menus Irei mostrar como desenvolver um menu com botões dispostos horizontalmente numa barra navegacional utilizando CSS. Estrutura do Menu Estes menus serão baseados na marca no conjunto item - Item de Lista).

(unordered list - Lista não Ordenada ),
• (list Irei identificar as maneiras pela qual será possível trocar as cores de frente e do fundo, do item da lista, na medida em que se definem estas características nos estados possíveis de um item de lista (hover, visited). Definiremos a estrutura do menu composta inicialmente de uma camada (
  ) utilizando uma lista não ordenada (

  ) contendo cinco itens (
  • ), onde cada item irá apontar para um endereço/link (), que neste caso está apontando para uma referência simbólica (#), que você poderá posteriormente alterar para o endereço desejado. Note que existem diversas vantagens na criação deste tipo de menu, como por exemplo:
    Acessibilidade: Caso o CSS não seja utilizado, um deficiente auditivo ou visual pode usufruir das características de acessibilidade do navegador e ferramentas de auxílio, visto que acessar a estrutura de uma lista é muito mais fácil do que tentar ler o conteúdo de uma tabela
    Em termos de desenvolvimento, é muito fácil rever esta estrutura, que pode ser facilmente revista, aumentada ou diminuída. Iremos inserir uma div para poder manipular com mais facilidade o menu, posteriormente. Inicialmente criamos um lista não ordenada, contendo os seguintes itens de lista:
    • Home Page
    • Nossa Empresa
    • Produtos
    • Serviços
    • Fale Conosco
    Neste instante, nosso menu está renderizado da seguinte forma:- Prof. Carlos Majer Página 88 INTRODUÇÃO AO DESENVOLVIMENTO WEB VERSÃO 3.1 Identificando visualmente os elementos da estrutura Estilizando o Menu Criando as Classes Iremos criar o id menu, que nos permitirá estilizar a div criada com este nome. Na estilização deste id iremos definir as características de diversos elementos. Dentre estes itens iremos manipular:
    As marcas (desenhos/imagens) que antecedem os itens de uma lista não ordenada
    As margens e espaços que deslocam os itens dentro da lista
    A disposição vertical, que será transformada para horizontal. Configurando as propriedades da Lista Para se remover os espaços e margens dos itens dentro de uma lista, devemos zerar as propriedades margin e padding. Exemplo:.menu ul { margin:0; padding:0; } Configurando as propriedades do Item de Lista Para se tirar a marca (desenho/imagen) dos itens de lista, se deve atribuir o valor none na propriedade liststyle da lista. Exemplo:.menu ul.li { list-style:none; } Para se deixar um item da lista no formato horizontal, configuramos sua propriedade display para inline. .menu li { display:inline; } Prof. Carlos Majer Página 89 INTRODUÇÃO AO DESENVOLVIMENTO WEB VERSÃO 3.1 Agora iremos estilizar os quatro possíveis estados dos links, que são:Valor up hover active visited Descrição É o estado inicial do link (logo após a carga da página web) É o estado de quando se está por cima do link (Over) É o estado de quando o link foi clicado (Down) É o estado do link quando já visitado. Menus do Tipo Drop Down
    • Home Page
    • Empresa
      • Nossa Historia
      • Filiais
    • Produtos
      • Linha Masculina
      • Linha Feminina
      • Linha Praia
      • Produtos Especiais
    • Fale Conosco
      • SAC
      • Financeiro
      • Contabilidade
      • Diretoria
    Prof. Carlos Majer Página 90 INTRODUÇÃO AO DESENVOLVIMENTO WEB VERSÃO 3.1
    • Link 1
    • Link 2
    • Link 3
    Prof. Carlos Majer Página 91 INTRODUÇÃO AO DESENVOLVIMENTO WEB VERSÃO 3.1 JAVASCRIPT Nos tempos iniciais da criação de páginas para Internet, a única linguagem existente era a Linguagem de Marcação de Hyper Text (HTML). Basicamente, ela permitia a criação de páginas web disponibilizando uma forma de se inserir conteúdo, apresentação, estruturação de layout e elementos de formulário. Na medida em que o uso da Internet foi se ampliando, os grandes players do mercado (Netscape e Microsoft) perceberam as limitações que o HTML impunha, de tal forma que começaram a criar linguagens de apoio para serem inseridas dentro de seus navegadores. A Netscape criou o Javascript, linguagem com sintaxe e estrutura muito parecida com JAVA ® , que desde seu lançamento tornou-se a linguagem script padrão de mercado enquanto que a Microsoft criou o VBScript ®, linguagem atualmente utilizada na maior parte de suas diversas ferramentas, em particular no pacote Office, por conta de seu lançamento. Iremos focar o estudo na utilização do Javascript, em função de sua alta aderência e utilização pelos desenvolvedores web. Basicamente, o Javascript é utilizado para se manipular os objetos de uma página web. Como qualquer boa linguagem, o Javascript permite a utilização de comandos lógicos aliados a diversos elementos que permitam a criação de estruturas lógicas e algoritmos. Um comando ou estrutura Javascript pode ser inserido dentro de uma página HTML. Essa lógica pode ser inserida dentro de uma área do HTML, numa função Javascript ou através de comandos injetados (inseridos) em eventos de objetos HTML. Quando dentro de uma função (ou procedimento) Javascript, seus comandos são executados de forma seqüencial.  Javascript é uma linguagem interpretada (executada) na medida em que a página web vai sendo carregada. Inserindo Comandos Javascript numa página WEB Uma maneira simples de se inserir diversos comandos Javascript, dentro de um documento WEB se dá através da marca e pelo fato de existirem as marca de comentário ( Embora tais comandos possam ser inseridos em qualquer local de uma página HTML, é recomendado que os mesmos sejam inseridos no começo da página, de preferência entre as tags e de um documento WEB, pois é uma das primeiras seções a serem carregadas da página pelo navegador.  Uma forma de se inserir comentários numa linha é através da utilização de barras duplas // ou da marca Nosso Site Exemplo de cálculo de raiz quadrada:

    Informe um Valor:
    
    
    
    

    DOM - Document Object Model Introdução O DOM (Modelo de objetos de documento) é uma forma pela qual se consegue acessar os elementos dentro de uma página HTML. Como todo objeto (elemento) criado no HTML tem atributos, podemos imaginar uma grande estrutura (ou hierarquia) constituída de diversos graus ou níveis. Exemplo:- Neste exemplo, temos um documento (página) HTML que contém os seguintes objetos:• Uma imagem cujo id é ImgRosto • Um elemento span de nome Triste • Um elemento span de nome Normal • Um elemento span de nome Feliz Se considerarmos a imagem, perceberemos um de seus atributos (ou propriedades) que é o src, que define qual o arquivo imagem foi carregado para ser exibido por este objeto. Prof. Carlos Majer Página 99 INTRODUÇÃO AO DESENVOLVIMENTO WEB VERSÃO 3.1 Através do uso de Javascript, conseguimos uma maneira de acessar qualquer elemento do DOM, podendo inclusive alterar diversos atributos de seus elementos. Acessando atributos via Javascriipt Uma das formas de se acessar atributos de um elemento, é através do uso da função objeto document. getElementById do Esta função nos permite acessar um determinado atributo de um objeto contido dentro da página HTML (documento). A sintaxe desta função é:document. getElementById(“”). onde deve ser substituído pelo nome do objeto a ser acessado deve ser substituído pelo nome do atributo a ser acessado No exemplo abaixo, iremos utilizar a função alert (do Javascript) para mostrar na tela o nome do arquivo (imagem) carregado do objeto imagem de nome ImgRost, que está localizado no atributo src:alert( document.getElementById(“imgRosto”).src ) Exemplo: Carinhas que mudam ao passar por cima de um link:O objetivo deste exemplo é exibir uma imagem de uma carinha (conforme desenhos abaixo) que mude na medida em que o usuário passe com o mouse sobre um determinado trecho de texto. Resultado Final Prof. Carlos Majer Página 100 INTRODUÇÃO AO DESENVOLVIMENTO WEB VERSÃO 3.1 Para fazer isto, precisaremos criar três imagens contendo os tipos de carinhas. Imagem Arquivo CarinhaNormal.JPG CarinhaContente.JPG CarinhaTriste.JPG Tabela de Carinhas No código HTML, iremos inserir a imagem de carinha normal e os textos relacionados a cada carinha.
    Carinha Triste
    Carinha Normal
    Carinha Feliz Em seguida, marcamos no HTML os trechos de textos, que serão utilizados para identificar cada uma das carinhas. Para isto utilizaremos o comando que permite ao HTML identificar um trecho de texto. Carinha Triste
    Carinha Normal
    Carinha Feliz Para fazer com que seja exibida uma imagem diferente, devemos associar cada trecho de texto (marcas span) a uma função no Javascript, que quando carregada irá, através de acesso ao DOM, modificar a imagem que está sendo mostrada. Trecho de Texto Triste Normal Feliz Iremos agora utilizar o evento função desejada:- Executar Função Triste() Normal() Feliz() onmouseover de cada elemento span criado, para fazer uma chamada a Carinha Triste
    Carinha Normal
    Carinha Feliz Agora devemos criar as funções desejadas no Javascript. Prof. Carlos Majer Página 101 INTRODUÇÃO AO DESENVOLVIMENTO WEB VERSÃO 3.1 Como o objetivo da função é acessar o atributo src da imagem ImgRosto,iremos utilizar o DOM através do Javascript, para acessar o objeto imgRosto através de seu id, de dentro do documento HTML, e iremos alterar o seu src para carregar a imagem desejada. function Triste() { document.getElementById("imgRosto").src="CarinhaTriste.JPG" return } No exemplo acima, criamos uma função Javascript de nome Triste(). Esta função acessa o documento HTML (document) e através da função getElementById acessa o objeto cujo atributo id é ImgRosto. Em seguida, alteramos seu src para "CarinhaTriste.JPG" O mesmo deve ser feito para as demais funções. Código completo XHTML Prof. Carlos Majer Página 102 INTRODUÇÃO AO DESENVOLVIMENTO WEB VERSÃO 3.1
    Carinha Triste
    Carinha Normal
    Carinha Feliz Consistindo Campos de Formulários Algo muito comum em páginas HTML é o uso de formulários para envio de informações que acabam sendo registradas em banco de dados. Um dos problemas que podem ocorrer no momento de gravação dos dados em banco de dados está relacionado ao não preenchimento de certos campos. Imagine uma ficha cadastral de novo cliente na Internet, onde o usuário esquece de colocar o seu nome ou seus dados para contato, como por exemplo, o e-mail. Em outros casos, devemos consistir a faixa de valores que um determinado campo pode ter. Imagine um campo importante, onde se solicita a informação de número de filhos, e o usuário indevidamente preenchêlo com o valor -20 (menos vinte). Pior ainda ocorre quando um determinado campo na tabela do banco de dados está configurado para receber certo número de caracteres, e o usuário digita mais do que o campo está preparado para gravar, o que acaba gerando um erro. Para que tais situações não ocorram, devemos consistir os campos importantes de nosso formulário. Consistindo campos de texto vazios A maneira pela qual podemos consistir campos vazios de texto via Javascript é comparando seu atributo que armazena o conteúdo com aspas duplas. No caso de campos do tipo texto (), o comando seria assim:- var nomeBranco=document.getElementById('nome').value=="" if (nomeBranco) alert("O campo nome não pode ficar em branco!!") else if (document.getElementById('nome').value.length<3) alert("Tamanho Mínimo deve ser de 3 caracteres") Consistindo campos do tipo if (document.getElementById('observacoes').value=="") alert("O campo observacoes não pode ficar em branco!!") Consistindo caixas de checagem if (document.getElementById('emails').checked) Prof. Carlos Majer Página 103 INTRODUÇÃO AO DESENVOLVIMENTO WEB VERSÃO 3.1 alert("Envie e-mails") Colocando o foco num determinado campo Quando verificamos que um determinado campo não está com o valor apropriado, como no exemplo acima, onde se verifica que o campo nome está vazio, para agilizarmos o processo de entrada de dados é conveniente que após a mensagem, o campo que esteja com problemas receba automaticamente o foco. Para desviarmos o foco para um determinado campo, utilizamos a função focus(). Exemplo:document.getElementById('nome').focus() Exemplo de Consistência de Campos de Formulário No exemplo abaixo, temos um formulário contendo os campos nome, telefone e email e um botão para submeter o formulário. Ao clicar no botão, o fluxo está sendo desviado para uma função de nome Verificar(), que checa se existe algum objeto em branco. Em caso de existência, uma variável de nome msg vai armazenando o nome dos campos que estão vazios. Após checar todos os campos, a variável é exibida, caso não esteja vazia. A função retorna um valor verdadeiro ou falso para o atriburt submit do formulário, que envia ou não o formulário, conforme este valor retornado pela função. <html> <head> <title>Documento sem título</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script language="JavaScript" type="text/javascript"> <!-function Verificar(){ msg = '' if (document.form1.nome.value == '') { msg= '[Nome] '; } if (document.form1.telefone.value == '') { msg = msg+ ' [Telefone] '; } if (document.form1.email.value == '') { msg = msg + ' [e-mail] '; } if (msg== '') Prof. Carlos Majer Página 104 INTRODUÇÃO AO DESENVOLVIMENTO WEB VERSÃO 3.1 { return true; } else { msg= 'O(s) campo(s) '+msg+ 'deve(m) ser preenchido(s)'; alert(msg); return false; } } //--> </script> </head> <body> <form name="form1" onsubmit="return Verificar();"> Nome <input type="text" name="nome" id="nome" /> <br /> Telefone <input type="text" name="telefone" id="telefone" /> <br /> e-Mail <input type="text" name="email" id="email" /> <br /> <input type="submit" value="Enviar" /> </form> </body> </html> Exemplo 2 – Diversos tipos de consistências Neste segundo exemplo, foi criado um formulário com os seguintes objetos: nome, email, empresa, assunto e um botão do tipo submit. Neste exemplo, o botão foi configurado para que, quando clicado , desviasse o fluxo da página para a rotina Validar(cadastro). O formulário, de nome cadastro, está sendo enviado como um parâmetro da função. A função, ao receber o formulário, checa diversos atributos de seus elementos, dentre eles o tamanho do conteúdo de alguns elementos, e a existência do sinal de arroba (@) do elemento email. Caso encontre algum problema, a rotina avisa o usuário e coloca o foco de volta no elemento que ela detectou a inconsistência. <html> <head> <title>Validar Formulario 2</title> <script language="JavaScript"> <!-function Validar(formulario) { Prof. Carlos Majer Página 105 INTRODUÇÃO AO DESENVOLVIMENTO WEB VERSÃO 3.1 //verifica campo nome if (formulario.nome.value.length < 3) { window.alert('Favor informar corretamente o nome'); formulario.nome.focus(); return false; } //verifica se o campo e-mail tem o simbolo de arroba if (formulario.email.value == "" || formulario.email.value.indexOf('@',0) == -1) { window.alert('Favor preencher corretamente o campo e-mail') formulario.email.focus(); return false; } if (formulario.empresa.value.length < 3) { window.alert('Favor preencher corretamente o campo empresa') formulario.empresa.focus(); return false; } //verifica campo assunto if (formulario.assunto.value.length < 3) { window.alert('Favor preencher corretamente o campo assunto') formulario.assunto.focus(); return false; } } --> </script> </head> <body> <form name="cadastro" method="post" action="mailto:usuario@email.com.br"> Nome: <input name="nome" id="nome" type="text" size="30" maxlength="50" /><br /> Prof. Carlos Majer Página 106 INTRODUÇÃO AO DESENVOLVIMENTO WEB VERSÃO 3.1 e-Mail: <input name="email" id="email" type="text" size="30" maxlength="50"> <br /> Empresa:<input name="empresa" id="empresa" type="text" size="30"> <br /> Assunto:<textarea name="assunto" id="assunto">
    type="Submit" onClick='return Validar(cadastro)' Criando Máscaras para edição de dados Muitas vezes precisamos mascarar a entrada de dados, isto é, fazer com que o campo que está recebendo a entrada de dados exiba caracteres especiais, automaticamente. Isto ocorre nos seguintes casos:
    Digitação de Datas
    Digitação de CEP
    Digitação de Telefone Nos exemplos abaixo, mostrarei como formatar dados usando as seguintes máscaras:Data: Formato 99/99/9999 (As barras serão inseridas automaticamente pelo navegador) Telefone: (99)9999-9999 (O sinal de parênteses e o traço serão inseridos automaticamente pelo navegador) CEP: 99999-999 (O traço será exibido automaticamente pelo navegador). Identificando o objeto que iremos manipular Vamos imaginar o campo data que queremos preencher. Este campo deverá mostrar uma barra separadora, de forma automática, logo após a digitação do segundo e quarto caractere da data. O comando para criação de uma caixa de texto pode ser assim: Apesar do comando para se criar uma caixa de texto ser simples, é importante informarmos os atributos name (que pode ser utilizado pelo PHP) e o atributo id (que pode ser usado pelo Javascript). Temos então, o comando atualizado da seguinte forma: É importante também restringir o número de caracteres para o equivalente a uma data. Vamos presumir a digitação de uma data com duas posições para o dia, duas para o mês e quatro para o ano. Isto dá um total de 10 caracteres. Exemplo: Prof. Carlos Majer Página 107 INTRODUÇÃO AO DESENVOLVIMENTO WEB VERSÃO 3.1 Para podermos inserir o caractere “/”, no seu devido local, separando o dia do mês e o mês do ano, devemos preparar este objeto para chamar uma função função toda vez que o usuário teclar algo. Vamos chamar a função Javascript com o nome de AjustaData. AjustaData. Esta função, que será chamada toda vez que o usuário digitar algo, dentro desta caixa de texto, enviará para o Javascript o evento chamador (no caso, o evento onkeyup)) e o próprio objeto caixa de texto que chamamos de nascimento. Dúvidas? [email protected] Carlos Majer. Prof. Carlos Majer Página 108

Embed!

Introdução Ao Desenvolvimento Web - Versao 3 1

---