Introdução ao. Desenvolvimento WEB - HTML Versão 2.0 PÁGINA EM BRANCO

Transcrição

1 2011 INTRODUÇÃO AO DESENVOLVIMENTO WEB Introdução ao PÁGINA EM BRANCO Desenvolvimento WEB - Versão 2.0 Este documento aborda tópicos técnicos e conceituais utilizados na criação da página Web, através da linguagem de marcação Hypertext Markup Language, ideal para o iniciante ou desenvolvedor que deseja conhecer um pouco mais dos detalhes da linguagem padrão para criação de páginas da Internet. 1 <!DOCTYPE PUBLIC "-//W3C//DTD 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <html xmlns=" 5 <meta http-equiv="content-type" content="text/html; 6 charset=iso " /> 7 <title>meu primeiro site</title> 8 </head> 9 <body> 10 Oi mundo! 11 </body> 12 </html> Licença e Apresentação 1 Professor Carlos Majer Introdução ao Desenvolvimento WEB 2004 ~2011 Coleção Biblioteca Universitária

2 Este livreto pertence a Carlos A. Majer, Consultor de TI e Professor Universitário de Tecnologia da Informação. Ele encontra-se disponível em Introdução ao Desenvolvimento Web: de Carlos Majer é licenciado sob uma Licença Creative Commons Atribuição-Uso nãocomercial-vedada a criação de obras derivadas 3.0 Brasil. Isto significa que você PODERÁ copiar, distribuir, exibir e imprimir esta obra. Algumas restrições existem:- Você NÃO PODERÁ cobrar valor algum para distribuir esta obra. Caso tenha interesse comercial, entre em contato. Você deverá sempre fazer referência ao autor: Carlos Majer. Você não poderá alterar ou derivar esta obra (mas poderá citá-la em trabalhos). Caso tenha interesse e em utilizar esta obra como base para criação de material para sua empresa, escola ou instituição, entre em contato. Você não poderá utilizar este trabalho para fins ilegais, imorais ou de forma a denegrir ou prejudicar outras pessoas ou instituições. Para maiores informações envie um para cmajer@uol.com.br ou contato@carlosmajer.com.br ou cmajer@ig.com.br Donativo O donativo representa um agradecimento e reconhecimento da importância do trabalho do autor, bem como serve de incentivo para ele continuar desenvolvendo este tipo de material e disponibilizá-lo lo para o público. Caso acredite que este material tenha lhe ajudado, envie um solicitando os dados da conta. Donativos a partir de R$ 5,00 são apreciados. Licença e Apresentação 2

3 DEDICATÓRIA Dedico este livreto aos alunos que conheci, de forma pessoal ou virtual, aos amigos e professores que compartilham os mesmos esforços e ideais, no sentido de se fazer a diferença, através da aplicação de uma educação de qualidade, na formação do aluno e cidadão, aos diversos colaboradores e influenciadores, que através de seus esforços, via sites, artigos, s, etc., compartilham seu conhecimento e experiência, no sentido da difusão da informação e conhecimento permitindo às pessoas que se esforçam, a melhoria da qualidade de seu trabalho no dia a dia. Licença e Apresentação 3

4 CONTEÚDO Introdução à Internet... 7 Funcionamento da World Wide Web... 7 Conectando-se na Grande Rede... 8 IPs fixos e IPs dinâmicos... 8 Números IPs e Resolução de Nomes... 9 URL Uniform Resource Locator Protocolo Host do domínio Nome do domínio :Número da Porta A linguagem html A página da Internet Elementos da página Versão do Extensão ou HTM? As marcas Regras Básicas para criação de marcas Ciclo de vida Propriedades da marca Marcas atuando como containeres Estrutura da página Apresentação e Estilo Marcas e elementos básicos da página Cabeçalho Parágrafos Quebras de Linha Comentários Estruturando conteúdos Trabalhando com texto A marca PRE Marcas de estilização de texto mais utilizadas Entidades: Caracteres Especiais Estilizando cores no texto Estilizando tamanhos do texto Índice 4

5 Estilizando fontes no texto Imagens Formatos de imagem mais utilizados na Internet Inserindo imagens na página Links Criando Links Internos Criando Links Externos Inserindo um link numa imagem Inserindo um link numa imagem externa Abrindo o link numa outra página Tabelas Tamanho das células numa tabela Bordas Inserindo título / legenda numa tabela Cabeçalhos na tabela Cores nas Tabelas Trabalhando o Layout das tabelas Agrupando elementos de tabelas Listas Listas Ordenadas Listas Não Ordenadas Listas de Definição Frameset Criando Frames Frame de Navegação Vantagens e desvantagens no uso de frameset Quadros Inseridos (In-Line Frames) Formulários Criando formulários Métodos de Envio de Objetos de Formulários Elementos de Formulários Elemento Caixa de Texto Elemento Senha Elemento Botão de Rádio Elemento Caixa de Verificação Elemento Lista de Seleção Elemento Área de Texto Índice 5

6 Elemento Conjunto de Campos Elemento Botão Elemento LABEL Elemento Upload de Arquivo Conjunto de caracteres Língua Seu público X XML Linguagem X DTD - Definição de Tipo de Documento Tipo de documento: Transitional Tipo de documento: Strict Regras do X Proibições DOCTYPEs padrões X Exemplos de Estrutura de Páginas X Transitional Conclusão Marcas mais usadas Html Layout de Páginas para Internet Contato Índice 6

7 INTRODUÇÃO À INTERNET Funcionamento da World Wide Web D urante a guerra fria, os Estados Unidos estavam muito preocupados com a fragilidade de seu sistema de telecomunicações, e em particular, do que poderia acontecer caso sofressem um ataque dos soviéticos, o que poderia interromper a comunicação entre alguns elos (nós) de sua rede (quartéis generais, bases de silos, etc.), impedindo-os de uma pronta resposta a um ataque nuclear. Em função disto, foi criada a ARPANET, rede experimental de telecomunicações do Departamento de Defesa (DoD) dos Estados Unidos. Ela era composta por diversos computadores e dispositivos conectados de tal forma que eles poderiam se comunicar através do uso de rotas alternativas para envio de dados. Assim, caso uma rota fosse comprometida, os pacotes de dados utilizariam outras rotas para chegar a seus destinos. No processo de criação e aprimoramento da ARPANET, diversas tecnologias de telecomunicações foram criadas ou adaptadas. Protocolos, números de identificação, métodos de recuperação de erro e transporte de dados, dentre outros os elementos, foram desenvolvidos no sentido de viabilizar e maximizar o funcionamento desta rede. Com o tempo e o esfriamento da guerra fria, esta rede evoluiu e passou a ser utilizada também no meio acadêmico, sendo posteriormente aberta para o público geral, resultando naquilo que hoje conhecemos como teia de alcance mundial (World Wide Web) ou Internet. Introdução à INTERNET 7

8 Atualmente, a Internet caracteriza-se por ser uma grande rede de dispositivos, em sua maior parte computadores, que se interligam através de um grande cabo imaginário (backbone), através do qual os dados fluem, o que permite que as pessoas se comuniquem, trocando informações em velocidades cada vez maiores. Conectando-se na Grande Rede No momento da conexão de um computador com a rede, este recebe um número IP (Internet Protocol). Este número IP serve como identificação única, para este computador. Isto quer dizer que num determinado momento, cada dispositivo conectado na tem sua identificação que é única, e que possibilita à ele ser localizado e identificado por outros dispositivos. Quando um usuário se conecta num provedor de acesso, como por exemplo, no IG, um de seus servidores um número IP para este computador. Neste momento, este computador faz parte da rede de computadores do IG, passando a ter acesso à Internet. O processo é análogo em qualquer outro provedor, como por exemplo, do Virtua ou ajato. Sendo um dispositivo interligado na InternetNet, e tendo um número IP de identificação, ele pode efetuar consultas e solicitações por serviços na Internet. Da mesma forma, ele também passa a ser passível de varreduras, podendo ser sondado, receber solicitações de acesso, de serviços e até ser invadido (ao menos enquanto estiver conectado na rede). IPs fixos e IPs dinâmicos A diferença entre uma conexão que utiliza um IP fixo e uma que utiliza um IP dinâmico é a de o IP fixo nunca muda. Exemplos típicos de IPs fixos são os das servidores que hospedam páginas web. Exemplos típicos de IPs dinâmicos são aqueles utilizados por usuários Introdução à INTERNET 8

9 de diversos tipos de provedores, especialmente os de conexão via linha discada, que ao conectar num provedor de acesso recebem um número IP que esteja disponível, que provavelmente não será (mas em alguns casos pode ser) igual ao da última vez que acessou. Números IPs e Resolução de Nomes Cada byte, sendo composto de 8 bits pode conter até 256 combinações diferentes (de 0 até 255). Um número IP é um conjunto de 4 bytes separados por um ponto, utilizando este formato de endereçamento de bits. Exemplo do site da UOL (outubro de 2010): ping Disparando [ ] com 32 bytes de dados: Resposta de : bytes=32 tempo=7ms TTL=55 Resposta de : bytes=32 tempo=8ms TTL=55 Resposta de : bytes=32 tempo=7ms TTL=55 Resposta de : bytes=32 tempo=8ms TTL=55 Estatísticas do Ping para : Pacotes: Enviados = 4, Recebidos = 4, Perdidos = 0 (0% de perda), Aproximar um número redondo de vezes em milissegundos: Mínimo = 7ms, Máximo = 8ms, Média = 7ms C:\> O número IP de um servidor, pode ser mudado pela empresa, de forma que não é seguro utilizar números IPS em links permanentes. Como é mais simples de se lembrar de um nome do que de um número IP, foi criada uma maneira para se utilizar nomes do que Introdução à INTERNET 9

10 números. O serviço DNS (Domain Name Server) efetua a resolução de nomes, associando os números IPs à nomes (alias) que ficam armazenando em tabelas nos servidores da Internet, que efetuam constantes trocas de tabelas entre si, para ficarem sempre atualizados. Isto quer dizer que você pode digitar no seu navegador tanto quanto para acessar o site da UOL. Que tal tentar? URL Uniform Resource Locator Diversos serviços podem ser encontrados nos computadores conectados na Internet. Os mais comuns são:- Servidor WEB (Internet) Servidor FTP Servidor de s Servidor de Notícias Servidor de Banco de Dados Os computadores que têm softwares que provêm (servem) estes serviços são conhecidos como servidores. URL significa Uniform Resource Locator, ou seja, Localizador de Recurso Uniforme e é a forma pela qual formatamos o endereçamento para acesso a um determinado recurso da Internet. A Estrutura da URL é definida da seguinte forma:- 1) Protocolo 2) Domínio 3) Porta de Acesso 4) Pasta URI significa Uniform Resource Identifier, ou seja, Identificador de Recurso Uniforme e é a formatação para se acessar um recurso específico, como por exemplo, uma página web. Introdução à INTERNET 10

11 Para formatamos um URI, adicionamos o nome do recurso na URL. Exemplo:- 1) Protocolo 2) Domínio 3) Porta de Acesso 4) Pasta 5) Arquivo Vamos ver estes itens em detalhe:- Protocolo O protocolo é como se fosse uma língua, que as partes utilizam para se comunicar. Em telecomunicações, um protocolo é a maneira pela qual as duas pontas (remetente e destinatário) se comunicam, na troca de informações (pacotes de dados). Em geral, um programa faz uma solicitação e o servidor sabe o que deve enviar. Um exemplo bem prático disto é o do navegador web solicitando uma página de um servidor. O usuário em seu navegador (cliente), tenta acessar uma página:- Assim que o usuário teclar ENTER, o navegador, por padrão, insere o texto HTTP (Hyper Text Transfer Protocol), na frente do nome de página:- O navegador faz isto para que o servidor (computador que irá receber a solicitação, localizado no endereço fornecido acima) ao receber a solicitação de abertura de página consiga passar esta Introdução à INTERNET 11

12 responsabilidade (localizar e disponibilizar a página) para o software correto (software servidor web. Os mais conhecidos são Microsoft IIS Internet Information Services ou Apache). Sem o uso do protocolo, o servidor (computador) não saberia como tratar a informação que está vindo, para atender a demanda. Com base neste protocolo, o servidor web (software que está rodando no computador servidor) identifica a solicitação web (http), localiza a página desejada e devolve-a ao navegador. Os protocolos mais comuns são:- Protocolo Utilização Localiza um recurso (página www, imagem, etc) num servidor Web ftp:// Localiza um arquivo num servidor FTP news:// Localiza um servidor de notícias na Web file:// Localiza um arquivo num computador ou rede local Host do domínio Quando não informado, o host é assumido como www. Nome do domínio. É o nome pelo qual seu domínio foi registrado na entidade de registro de domínios de seu país. No Exemplo abaixo estará sendo utilizado o domínio da UOL (uol.com.br) :Número da Porta Como um dispositivo (computador) pode ter diversos serviços disponíveis (veja lista acima), e considerando que o endereço do dispositivo é único, a maneira pela qual ele disponibiliza seus serviços é através do uso de portas. As portas são identificações específicas de certos serviços, e muitas vezes sua utilização se dá de forma transparente, sem que o usuário note sua utilização. Introdução à INTERNET 12

13 Os navegadores estão configurados para acessar um endereço na Internet através da porta 80, que é a porta padrão para acesso web da Internet. Alguns exemplos de portas são:- Porta Uso 20 e 21 Serviço FTP 23 Telnet 25 SMTP - Simple Mail Transfer Protocol Para Envio de s 53 DNS Domain Name Server 80 INTERNET Porta de acesso para serviço de página 109 e 110 POP Post Office Protocol Para Recebimento de e- Mails 119 NNTP Network News Transfer Protocol Para recebimento de Notícias Vamos destrinchar um endereço de um recurso na Internet:- É o protocolo padrão da Internet Compõe o computador host e domínio consultado 8080 Identifica uma porta no domínio consultado pastavirtual Identifica uma pasta dentro do domínio docs Identifica uma subpasta historia.html Identifica o recurso desejado que é um arquivo/página A LINGUAGEM A página da Internet significa Hyper Text Markup Language, que traduzida para o português significa Linguagem de Marcação de Hipertexto. Esta Introdução à INTERNET 13

14 linguagem permite a utilização de um conjunto de comandos para disponibilização de conteúdo para Internet. A página web nada mais é do que um arquivo que é um arquivo de texto, ou seja, pode ser aberto e editado pelo Bloco de Notas ou qualquer programa editor de textos simples, como Dreamweaver, Notepad++ e Microsoft Expression Web. Este arquivo, após sua criação, é copiado em conjunto com outros (imagens, vídeo, áudio, etc.) para um computador (servidor) que tenha um software (Apache, IIS, etc.) que ofereça páginas para Internet. Estes arquivos compõem os elementos de um site que fica disponível a quem acessá-lo. O usuário acessará o arquivo, através de seu navegador, que o lerá e interpretará seus comandos (marcas) de forma a exibir (desenhar) a página em seu monitor. Em função de seu formato aberto, não proprietário e padronizado, este tipo de arquivo pode ser visualizado em diversas plataformas, dentre elas Windows, Linux, Unix, Macintosh, nos mais diversos navegadores:- Mozilla Firefox Internet Explorer Google Chrome Apple Safari Opera KDE Konkeror Elementos da página Uma página web pode conter diversos tipos de elementos:- Texto: : É o tipo de informação mais comum em páginas da INTERNET. Costumam ser dispostos em diversos tamanhos e cores, despertando o interesse do usuário. A Linguagem 14

15 Link: O link é a base de funcionamento da web, visto que se baseia no conceito de Hipertexto, no qual um texto (ou parte dele) ao ser clicado pode conduzir o usuário para um outro texto, localizado em qualquer local do documento (página). O mesmo ocorre com outros tipos de mídia (hipermídia). Imagem: Diversos tipos de imagens são utilizados para enriquecer a experiência do usuário na rede. Dentre elas podemos destacar as imagens estáticas, geralmente nos padrões JPEG e PNG, as imagens animadas no formato GIF. Animação principalmente as feitas em FLASH e Silverlight, como também as disponibilizadas pelo 5. Elementos de Formulário: Os formulários representam um meio para se coletar informações do usuário, de forma padronizada. São utilizados para muitos fins, dentre eles o de se cadastrar o usuário no site para receber informações, inserir pedidos de informações específicas, efetuar buscas de informações diversas, efetuar pedidos de compras, etc. Arquivo de Áudio: O arquivo de áudio é uma forma útil e diferenciada para o envio de informação, especialmente quando o usuário tem problemas de acessibilidade (Exemplo: Dificuldades com a visão). Arquivo de Vídeo: Atualmente muito em uso, os arquivos de vídeo inseridos em páginas web permitem uma maior facilidade na transmissão da informação, além do que, também serve como ferramenta de marketing e propaganda. Jogos e aplicações Java: Diversos tipos de aplicações estão sendo construídos para Internet através da utilização da linguagem Java, dentre elas acesso a bancos, interfaces com dispositivos diversos, jogos e muito mais. Versão do O tem evoluído regularmente e a cada nova versão ele traz diferentes formas de se desenvolver a página Internet. A Linguagem 15

16 A versão atualmente em uso do é a 4.01, porém o mercado trabalha arduamente nas definições para liberação do versão 5, que trará novos elementos e certamente será um marco na história desta linguagem. Neste meio tempo, uma fusão entre o 4.01 e o XML (iremos verificar futuramente, neste documento) gerou o X 1.0, que permite uma forma de padronizar o uso e funcionamento das tecnologias relacionadas ao uso e desenvolvimento de elementos na página web. Extensão ou HTM? Pode ser utilizada tanto uma quanto a outra. Em função de restrições de alguns sistemas operacionais antigos (DOS), os arquivos só podiam utilizar três letras em sua extensão. Hoje, não importa qual a extensão utilizada, pois ambas são válidas e aceitas nos sistemas operacionais mais em uso. As marcas Ao examinarmos o conteúdo de um arquivo, notamos a existência de comandos, conhecidos também como marcas (ou tags, em inglês), que são lidas pelo navegador do usuário e instruem o navegador a inserir os conteúdos a ser exibido na tela. As marcas são conhecidas pelos navegadores e seguem a especificação definida para o. Isto significa que não é correto escrever qualquer coisa. O permite que você escreva a marca em qualquer tipo de caixa (maiúscula, minúscula ou ambas, misturadas), porém, caso você altere seu arquivo para X (explicado adiante), você deverá deixar todas as marcas em minúsculo. A Linguagem 16

17 Regras Básicas para criação de marcas Para inserir uma marca, devemos seguir algumas regrinhas:- Toda marca começa com um sinal de menor e termina com um sinal de maior Logo após o sinal de menor não pode existir espaço (Se colocar não vai funcionar) A marca inserida deve ser reconhecida pelo navegador (caso contrário, o navegador irá ignorá-la) Exemplo de marca simples:- <hr> A marca hr (do inglês Horizontal Ruler) instrui o navegador a desenhar uma linha horizontal. Esta linha régua ocupa a linha inteira onde foi inserida. Ciclo de vida Através da continua evolução da tecnologia, certas marcas vão se tornando obsoletas (depreciadas), ou seja, deixando de ser utilizadas. Outras são trocadas por marcas ou tecnologias mais novas. Isto é uma evolução natural. O ciclo de vida das marcas é basicamente o seguinte:- Concepção Proposta Especificação Depreciação Obsoletismo Fase Descrição Concepção Quando a marca é concebida para uso em determinadas circunstâncias. Proposta A marca (ou tecnologia) é enviada para o W3C que irá verificar vantagens e viabilidade de implementação Especificação Ocorre quando uma marca (ou tecnologia) é aceita pelo W3C e faz parte da especificação de uma versão do. A Linguagem 17

18 Depreciação Obsoleta Quando uma marca (ou tecnologia) é trocada por outra melhor, mas deve ainda ser suportada pelos navegadores por questões de compatibilidade com versões de páginas anteriores. Quando uma marca (ou tecnologia) é considerada obsoleta de forma que não existe mais garantia de que a mesma será suportada por um navegador. Embora algumas marcas possam ser consideradas depreciadas, pois foram trocadas por outras mais consistentes com seu uso, é comum o fato das mesmas continuarem a ser utilizadas por um bom tempo, até que a comunidade absorva e utilize com regularidade as novas terminologias. Isto significa que futuramente, certas marcas não passarão no teste de validação de páginas para Internet, mas isto é algo a ser estudado futuramente. As definições sobre padrões Internet são efetuadas pelo W3C World Wide Web Consortium. Nos próximos exemplos irei exibir apenas o trecho de código desejado. O desenvolvedor deverá sempre digitar as seções da páginas (<html>, <head> e <body>), com seus respectivos conteúdos e par finalizador. Os trechos exemplificados deverão ser inseridos dentro da seção <body>. Propriedades da marca A maior parte das marcas precisa de informações complementares para definição do que deve como deve ser exibido na página do navegador. As propriedades das marcas são utilizadas para isto. A Linguagem 18

19 Elas podem ter valores informados que informam ou modificam a maneira pela qual o conteúdo será visualizado pelo usuário. Exemplo de marca com propriedade e valor:- <img src="imagem.jpg"> A marca img, acima, exibe a imagem, no navegador, com base no arquivo imagem.jpg, informado na propriedade src (source = origem do arquivo). Marcas atuando como containeres Algumas marcas desenvolvem ação única, como as exibidas nos exemplos acima. Porém, a grande maioria das marcas permite conter/encapsular algum tipo de conteúdo, como por exemplo, um trecho de texto. Ocorre que para isto é necessário que a marca funcione como um bloco (ou uma espécie de uma caixa), para conter este texto. Neste sentido, a marca inicia num determinado lugar e finaliza em outro. <p>eu sou um parágrafo</p> Para marcas que funcionam como containeres, o encerramento da marca é determinado pelo seu par finalizador, que nada mais é do que a própria marca aplicada no final do conteúdo contido, porém, precedida de um sinal de barra / logo após o sinal de maior >. Isto permite que a página tenha elementos de diversos tipos (incluindo texto livre/solto). Veja:- A Linguagem 19

20 A página Web pode ter vários elementos. <p> O parágrafo é um deles.</p> Qualquer conteúdo inserido antes e depois da marca de parágrafo é exibido em linhas diferentes. Isto é algo que a marca p (parágrafo) faz automaticamente, na página. ATENÇÃO Marcas criadas de forma incorreta:- < hr> Marca tem um espaço logo após o sinal de menor <linha> Marca não reconhecida pelos navegadores Escreva as marcas em minúsculo, assim, quando você pensar em alterar seu arquivo do formato para X (comentado futuramente), sua página já estará parcialmente pronta. Estrutura da página Uma página é uma estrutura de marcas, dentro de outras marcas e, naturalmente, seus conteúdos. Ela é delimitada pelas marcas:- <html>... </html> Dentro dela temos uma área de cabeçalho, onde inserimos alguns comandos de configuração e é criada através das marcas:- <head>... </head> Em seguida existe uma segunda área, que é a área do corpo da página, que irá abrigar o conteúdo a ser exibido na tela do navegador. Esta área é criada através das marcas:- <body>... </ body > A Linguagem 20

21 A seguir notamos um exemplo da estrutura em código de uma página web:- 1 <html> 2 <head> 3 <title>minha primeira página</title> 4 </head> 5 <body> 6 Seja bem vindo (a) à minha primeira página. 7 </body> 8 </html> E em seguida como ela é exibida no navegador Safari:- A Linguagem 21

22 Para verificar como está ficando sua página, salve-a numa pasta (diretório) e em seguida abra-a através de seu navegador. Clicando duplamente no arquivo gerado irá automaticamente acionar seu navegador padrão (Firefox, Microsoft Internet Explorer) para a abertura da página web. O conteúdo de uma página web fica em cache, que é uma espécie de memória temporária que o seu navegador utiliza para agilizar o carregamento de uma página. Muitas vezes, ao tentar abrir-se uma página, o conteúdo que aparece é o que está neste cache (e não a página que acabou de ser alterada e salva). Quando isto ocorrer, utilize o botão de recarga de página (geralmente F5) ) do Navegador para atualizar seu cache com o conteúdo atualizado da página. Apresentação e Estilo As marcas permitem a inserção de conteúdo na página web. O tipo mais comum de conteúdo é o texto. Algumas marcas podem ser usadas para estilizar um trecho de texto (Exemplo: Cor do texto, tamanho e família de fonte). Outras marcas têm propriedades A Linguagem 22

23 (cor de fundo, borda, etc.) que também podem ser usadas para estilizar o texto ou outro elemento (tabelas, imagens, etc.). Com o advento do CSS (tecnologia que permite separar o conteúdo do estilo de apresentação), a apresentação dos conteúdos se dá de maneira muito mais fácil e permite redução do código, redução dos erros, rapidez na manutenção e na carga de páginas. Assim, logo após o estudo do, indico o estudo do CSS. O objetivo em mostrar a maneira pela qual o desenvolvedor pode estilizar os conteúdos através das marcas, dentro deste livro, se dá em função da necessidade do conhecimento, pelo leitor, da linguagem e suas possibilidades de uso. Marcas e elementos básicos da página Cabeçalho Cabeçalhos são elementos de formatação similares (Títulos, subtítulos, etc.) aos encontrados em livros e documentos relacionados. Eles são criados através das marcas <h1> (Tamanho maior) até <h6> (Tamanho menor), são formatados em negrito e comportam-se como parágrafos. Exemplo:- <h1>cabeçalho do tipo h1</h1> <h2>cabeçalho do tipo h2</h2> <h3>cabeçalho do tipo h3</h3> <h4>cabeçalho do tipo h3</h4> <h5>cabeçalho do tipo h5</h5> <h6>cabeçalho do tipo h6</h6> A Linguagem 23

24 Parágrafos Quando uma marca de cabeçalho é inserida na página, ela ocupará uma linha para seu conteúdo, deslocando elementos posteriores para a linha de baixo. Note que a marca aplica uma margem entre o elemento inferior e superior (para cima e para baixo). Os parágrafos são criados através da marca <p> e de forma similar aos encontrados em livros, são utilizados para agrupar, num único bloco, um trecho de texto. Exemplo:- <p>eu sou um parágrafo</p> <p>eu sou outro parágrafo</p> A Linguagem 24

25 Note que de forma similar à marca de cabeçalho, a marca de parágrafo também aplica uma margem entre o elemento inferior e superior (para cima e para baixo). Quebras de Linha Quebras de linha são criadas através da marca <br>. Ela deve ser utilizada quando se deseja forçar uma nova linha. Note que se esta marca for inserida no meio de um texto, o conteúdo após esta marca é exibido na linha de baixo. Exemplo:- <p>o conteúdo desta linha foi <br>quebrado para a linha <br>de baixo</p> Atualmente, não podemos ter a certeza onde a página será exibida, isto é, se num monitor de 23 polegadas widescreen, ou dispositivo do tipo Tablet (ipad), SmartPhone ou numa televisão. Querer forçar um determinado layout através do uso de parágrafos, espaços e quebra de linhas pode não gerar o mesmo resultado esperado, caso a página seja exibida em dispositivos diversos. É o navegador quem verifica a resolução de vídeo (número de linhas e colunas) e adapta o conteúdo a ser exibido, ajustando o texto e outros elementos da página, conforme o tamanho da janela no dispositivo utilizado. A configuração dos navegadores e a configuração do vídeo do usuário fazem com que seja muito difícil um site ser exibido exatamente igual em dois A Linguagem 25

26 Comentários navegadores diferentes. Caso você tente inserir manualmente (digitando) diversos espaços ou quebras de linha (<ENTER>) você notará que o navegador irá ignorá-los, trocandoos por um simples espaço. Isto ocorre porque na visão da página, o navegador deve ser capaz de desenhar a página em diversas resoluções e desta forma ele deve ser o responsável em acomodar o conteúdo. Comentários podem ser inseridos no através do uso das marcas  Exemplo:- <p> Eu apareço na página</p>  Eu também apareço na página Estruturando conteúdos Utilizar texto dentro de uma página é bem simples. É digitar o texto abaixo da marca body e o mesmo aparece no navegador, quando a página é carregada. O texto inserido na página web será exibido conforme a resolução do dispositivo que está exibindo a página. Isto significa que de acordo com a resolução deste dispositivo, o texto fluirá até se acomodar na largura do dispositivo, fazendo uma quebra natural de seu conteúdo para as linhas seguintes. A Linguagem 26

27 Verificamos também que podemos inserir um trecho de texto dentro de um parágrafo (marca <p>), de um cabeçalho (marcas <h1> a <h6>) e até forçar a quebra de linha (marca <br>). Uma DIV funciona de maneira similar ao parágrafo, como um container que permite armazenar um determinado texto ou outros tipos de conteúdos. A diferença básica entre um parágrafo e uma div é que na exibição na página web, o parágrafo insere uma margem acima e abaixo do local onde foi criado, distanciando-se dos elementos próximos. Exemplo de criação de uma DIV:- Sol <div> Lua </div> Mar Resultado:- Sol Lua Mar O SPAN também é uma forma de container. Porém, diferente de um parágrafo ou div, ele funciona como um elemento que mantém seu conteúdo na mesma linha (desde que este conteúdo não seja do tipo bloco). Exemplo de criação de um SPAN:- Sol <span> Lua </span> Mar Resultado:- Sol Lua Mar Ambos os elementos (div e span) são muito utilizados em conjunto com CSS, o que facilita o processo de estilização e permite criar elementos em cores, fundos, fontes e tamanhos bem específicos. A Linguagem 27

28 Trabalhando com texto O ideal é que o desenvolvedor, ao criar uma página, estruture seu conteúdo, identificando os cabeçalhos, parágrafos, tabelas e outros tipos de informação necessários, objetivando acomodar de maneira adequada o conteúdo a ser exibido. O 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:- <p> A função abaixo foi desenvolvida em Javascript. Ela solicita um nome ao usuário e verifica se algo foi informado</p> <pre> 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 } </pre> A Linguagem 28

29 Resultado: Marcas de estilização de texto mais utilizadas Algumas marcas têm atributos que podem ser utilizados para destacar o texto através de aplicação de estilos visuais. Marca small big em strong sub sup ins del Exemplos:- Descrição Diminui a fonte do texto Aumenta a fonte do texto Enfatiza um texto. Equivale à marca <i> Enfatiza um texto com maior intensidade (Negrito). Equivale à marca <b> 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 <strike> e <s> A Linguagem 29

30 Texto Normal, <big>textomaior</big>, <small>texto Menor</small>,<em>Texto Enfatizado</em> <br> <strong>texto em Negrito</strong>, <sub>texto Subescrito</sub>, <sup>texto Superescrito</sup><br> <ins>texto Inserido numa nova versão de documento</ins>,<del>texto eliminado na nova versão do documento</del> Resultado:- O W3C recomenda que toda estilização visual de elementos na página seja feita através de CSS. Algumas das marcas exibidas acima foram consideradas obsoletas pelo W3C. Entidades: Caracteres Especiais Muitas vezes queremos inserir um caractere específico na página. Como por exemplo, o caractere de sinal de menor. Ocorre que certos caracteres (como neste caso) têm significado e uso especial (reservado) pelo.. 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. Como você iria exibir na tela o texto abaixo?...caso x < 5, então... A Linguagem 30

31 Para que possamos trabalhar com alguns caracteres reservados (como no exemplo acima) ou especiais, o disponibiliza trechos de textos especiais conhecidos como entidades. Caractere Entidade 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 Ì ã a minúsculo com til ã Ò Ã a maiúsculo com til Ã Ò õ o minúsculo com til õ Ù Entidade á Á é É í Í ó Ó ú Ú à À è È ì Ì ò Ò ù Õ o maiúsculo com til Õ Ù Ù ç C cedilha minúsculo ç Ç C cedilha maiúsculo Ç Tabela de Entidades mais comuns Prefira sempre inserir as entidades na página do que caracteres especiais (como por exemplo, caracteres acentuados). Com isto, você terá a certeza de que a página será visualizada de forma correta, independente da configuração do navegador. A Linguagem 31

32 Sabe quando você abre uma página e ela mostra caracteres estranhos, no lugar dos caracteres acentuados? Provavelmente o que aconteceu é que ela não carregou a tabela de caracteres correta, ou seja, o charset. Para prevenir esta situação, sempre defina esta tabela de caracteres e preferencialmente utilize as entidades informadas na tabela acima. Estilizando cores no texto Para estilizar cores, tamanhos e famílias de fontes em trechos de texto, o disponibiliza a marca <font>. Esta marca funciona com os seguintes atributos:- A palavra <font color="blue">céu</font> está na cor azul. 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. Segue abaixo a tabela de cores padrão definida na especificação do 4. CÓDIGO Cor HEXA RGB Exemplo Amarelo Yellow FFFF00 255,255,0 Azul Blue #0000FF 0,0,255 Azul Claro Aqua #00FFFF 0,255,255 Azul Marinho Navy # ,0,128 Branco White FFFFFF 255,255,255 Cinza gray ,128,128 Marrom maroon ,0,0 A Linguagem 32

33 Terra Prateado silver C0C0C0 192,192,192 Preto black ,0,0 Púrpura purple ,0,128 Rosa Escuro fuchsia FF00FF 255,0,255 Verde green ,128,0 Verde Limão lime 00FF00 0,255,0 Verde Oliva olive ,128,0 Verde Teal teal ,128,128 Vermelho red FF ,0,0 O 4 define o nome de apenas 16 cores (acima). Apesar disto, a especificação do CSS estendeu a tabela de nomes de cores e os navegadores implementam-na na inclusive nas marcas, que utilizam nomes de cores. Veja uma lista da tabela de cores completa, contendo nomes e códigos Hexa e RGB em:- Estilizando tamanhos do texto Quanto ao tamanho, o desenvolvedor tem a sua disposição a propriedade size, da marca <FONT>. Os valores (tamanhos) variam de 1 a 7. Exemplo:- 01 <html> 02 <head> 03 <title>propriedade SIZE da marca FONT</title> 04 </head> <body> 07 <font size="1">tamanho 1, </font> 08 <font size="2">tamanho 2, </font> 09 <font size="3">tamanho 3, </font> A Linguagem 33

34 10 <font size="4">tamanho 4, </font> 11 <font size="5">tamanho 5, </font> 12 <font size="6">tamanho 6, </font> 13 <font size="7">tamanho 7, </font> 14 </body> 15 </html> Resultado:- Estilizando fontes no texto Algumas fontes podem existir num sistema operacional, mas não em outros (Windows, Linux, Mac-Os, Solaris, Unix, etc). Isto pode causar um problema, pois caso o sistema operacional não encontre a fonte definida pelo desenvolvedor, ele utiliza a fonte padrão, o que pode fazer com que o texto fique com uma aparência completamente diferente da esperada pelo designer. Neste sentido, o oferece uma forma de informar diversas fontes para estilização de um trecho de texto. Isto significa que se o sistema operacional não tiver instalada a primeira fonte da lista, ele tenta aplicar a segunda fonte e assim, consecutivamente. É importante que o desenvolvedor conheça quais são as famílias de fontes mais comuns, que se caracterizam por serem fontes muito parecidas. 01 <html> 02 <head> 03 <title>propriedade SIZE da marca FONT</title> 04 </head> 05 A Linguagem 34

35 06 <body> 07 <font face ="Arial, Helvetica, sans-serif "> Famí ília Arial, Helvetica, Sans-serif </font> <br> 08 <font face ="Times New Roman, Times, serif"> Famí ília Times New Roman, Times, serif </font> <br> 09 <font face ="Courier New, Courier, mono"> Famí ília Courier New, Courier, mono </font> <br> 10 <font face ="Georgia, Times New Roman, Times, serif"> Família Georgia, Times New Roman, Times, serif </font> <br> 11 <font face ="Verdana, Arial, Helvetica, sans-serif"> Família Verdana, Arial, Helvetica, sans-serif</font> <br> 12 <font face ="Geneva, Arial, Helvetica, sans-serif"> Família Geneva, Arial, Helvetica, sans-serif</font> 13 </body> 14 </html> Resultado:- AVISO A explicação de funcionamento dos elementos de estilização de marcas visa mostrar ao leitor que o traz esta possibilidade. Entretanto, o W3C depreciou o uso destas propriedades e orienta o desenvolvedor a utilizar apenas CSS para estilização dos elementos da página. Isto significa que as páginas que utilizarem este tipo de A Linguagem 35

36 Imagens formatação podem não ser validadas pelos softwares de validação de páginas X. Uma imagem não é realmente inserida numa página. O que o permite fazer é informar ao navegador que se deseja exibir na página, um determinado arquivo que contém uma imagem. O arquivo da imagem deve existir em algum lugar na Internet. O desenvolvedor utiliza a marca <img> e através da propriedade src, o desenvolvedor faz referência ao local 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 endereço na Internet (site/servidor web) Formatos de imagem mais utilizados na Internet Existem diversos tipos de imagens que podem ser utilizados na página. Podemos identificá-las conforme a extensão de seu arquivo:- JPG Joint Photograph Experts Group É um dos padrões de imagem mais utilizados atualmente na Internet. Este formato 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. O usuário pode escolher o nível de compressão que deseja aplicar. Quanto mais comprimido, menos qualidade se tem. A Linguagem 36

37 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 que permite exibir imagens que tenham grande número de cores. Este formato também permite trabalhar 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 Imagem existente na mesma pasta da página web Imagine 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. Para exemplificar estas situações iremos utilizar as duas imagens abaixo:- A Linguagem 37

38 Simbolo2000.jpg Alce.jpg Você poderá carregar a imagem Simbolo2000.jpg, na página Disney.htm através do uso da marca <img> da seguinte forma:- <img src ="Simbolo2000.jpg"> Isto é o suficiente para exibir esta imagem na página, considerando que ambos os arquivos (da imagem e da página) estejam na mesma pasta. AVISO Saiba que alguns navegadores (Exemplo: Firefox) diferencia a caixa (maiúscula ou minúscula) nos nomes de arquivos. Isto quer dizer que se o arquivo foi salvo todo 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. A Linguagem 38

39 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 ) 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 (). 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:- <img src ="imagens/simbolo2000.jpg"> 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:- A Linguagem 39

40 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? <img src ="../imagens/simbolo2000.jpg"> 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. O exemplo abaixo significa que o arquivo carro.jpg está contido na pasta atual, dentro da subpasta imagens:- <img src ="imagens/carro.jpg"> 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. A Linguagem 40

41 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 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 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):- Links <img src =" Você pode referenciar qualquer imagem em seu site, isto é, fazer uma referencia a uma imagem que exista em outro servidor/endereço web Você deve informar a URL completa. (Não sabe o que é isto? Volte ao começo desta apostila) A imagem pode sumir, de uma hora para outra, caso o administrador do site onde a imagem se encontra decida removê-la Os links (ligações) ou âncoras são elementos (trechos de texto, imagens, etc) utilizados para ligação/conexão com outros elementos A Linguagem 41

42 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 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. A sintaxe para criação de um link é:- <a href ="url"> Conteúdo a ser mostrado na página </a> 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 <a href...> e </a>. Exemplo de criação de um link:- Clique <a href =" /"> aqui </a> para entrar no meu Site. Sempre insira o conteúdo de um atributo dentro de aspas duplas. Como será verificada posteriormente, esta é uma das regras do padrão X. A Linguagem 42

43 Os links podem ser de dois tipos: Links internos e links externos. Criando Links Internos Um link interno é aquele que aponta para uma informação existente na mesma página. Vamos imaginar que temos um livro, em formato (em páginas web) e num certo local do mesmo, precisamos inserir uma referência a uma informação que se encontra detalhada no final da página. Podemos inserir um link, neste local de modo que ao ser clicado, a parte página que descreve esta informação detalhada é exibida. No exemplo abaixo, temos um link no trecho de texto 4 Descrição de Caso de Uso :- A Linguagem 43

44 Este link, ao ser clicado, faz com que a página desça até localizar e exibir a informação desejada. A Linguagem 44

45 Figura 1-Exemplo de Links Internos Criando links / âncoras para elementos do mesmo documento. Um link para um elemento dentro da mesma página é criado em duas partes:- 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:- <a name ="dados_cliente"> Dados do Cliente </a> 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:- A Linguagem 45

46 Consulte os <a href ="#dados_cliente"> Dados do Cliente </a> 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.  <a name ="inicio"> <h1>introdução</h1></ ></a> <p> De acordo com as regras do W3C World Wi...</p>  <p>os <strong>padrões es de desenvolvimento web<strong> devem... </p>  Clique <a href ="#inicio"> aqui </a> 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):- <a href =" /"> Unicid </a> No exemplo abaixo, temos um trecho que é um link o IP do UOL (em fevereiro de 2009), abrindo a página índex.html:- <a href =" UOL </a> A Linguagem 46

47 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 ( online.com/) Exibir uma imagem na página é um comando relativamente simples. Neste exemplo assumo que o arquivo da imagem é dubrovnik.jpg e encontra-se na pasta imagens, existente no mesmo nível da página web editada. <img src = imagens/dubrovnik.jpg"> O próximo passo é encapsular o comando acima (abaixo em cinza) dentro de um link para o site da cidade de Dubrovnik: <a href =" <img src ="imagens/dubrovnik.jpg"> </a> O conteúdo em cinza acima, representa a imagem a ser exibida. Note que ela está encapsulada pelo comando que faz dela um link: <a href=...> e </a>. 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. A Linguagem 47

48 Vamos imaginar que a imagem abaixo esteja no site 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 da sua página (de blog) para exibir esta imagem seria:- <img src =" 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á? <a href =" <img src=" </a> A Linguagem 48

49 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:- <a href =" target = "_blank"> Unicid</a> 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 possibilita a utilização de tabelas, internamente divididas em linhas e células. Tabelas são criadas através das marcas <table>..</table>, sendo dividida em linhas através da marca <tr>..</tr>. As linhas são divididas internamente em células de dados através da marca <td>..</td> ou células de cabeçalho, através da marca <th>..</th>. Dentro da célula inserimos o conteúdo desejado (textos, imagens, listas, formulários, etc.). A Linguagem 49

50 Quando não for especificado, o atributo border da tabela é assumido com o valor zero (0), ou seja, a tabela não conterá bordas. Exemplo de uma tabela sem borda:- <table> <tr> </tr> <tr> </tr> </table> <td>linha 1, Célula 1</td> <td>linha 1, Célula 2</td> <td>linha 2, Célula 1</td> <td>linha 2, Célula 2</td> 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 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:- <table border="1"> A Linguagem 50

51 <tr> </tr> <tr> </tr> <tr> </tr> </table> <th rowspan="3">professores</th> <th>projeto de Interfaces</th> <th>sistemas</th> <td>carlos</td> <td>luciana</td> <td>fernando</td> <td>jadir</td> 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:- <table border="1"> <tr> <th colspan="2">projeto de Interfaces</th> <th colspan="2">sistemas</th> </tr> <tr> A Linguagem 51

52 </tr> </table> <td>carlos</td> <td>fernando</td> <td>eliana</td> <td>wagner</td> 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:- <table border="1"> Ao aumentarmos o tamanho da borda, temos alguns efeitos visuais interessantes:- <table border="5"> <table border="25"> A Linguagem 52

53 Determinando a cor das bordas Podemos determinar a cor da borda utilizando o atributo bordercolor. Exemplo:- <table border="3" bordercolor="blue"> Alguns efeitos interessantes podem ser conseguidos com isto:- <table border="25" bordercolor="green"> 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 <caption>,logo após abrir a marca <table>. Exemplo:- A Linguagem 53

54 <caption> Legenda/titulo da Tabela </caption> 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 <th> <table border="1"> <tr> <th> Cabeçalho </th> <th> Cabeçalho 2</th> </tr> <tr> <td> Linha 1, Célula 1</td> <td> Linha 1, Célula 2</td> </tr> <tr> <td> Linha 2, Célula 1</td> <td> Linha 2, Célula 2</td> </tr> </table> 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:- A Linguagem 54

55 <table border="1"> <tr bgcolor="yellow"> <th> Marca </th> <th> Uso </th> </tr> <tr> <td> <h1> a <h6></td> <td> Marcas de Início de Cabeçalho</td> </tr> <tr bgcolor="cyan"> <td><p></td> <td> Marca de início de parágrafo </td> </tr> <tr> <td> <table> </td> <td> Marcas de Início de Tabela</td> </tr> <tr bgcolor="cyan"> <td><tr></td> <td> Table Row Inicia uma linha numa tabela</td> </tr> <tr> <td> <td> </td> <td> Table Data Inicia uma coluna numa tabela</td> </tr> </table> A Linguagem 55

56 A aplicação do atributo 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 <td> ou <th>) de uma tabela, se assim o desejar. <table border="1"> <tr> <th> Aluno </th> <th> Resultado </th> </tr> <tr> <td> João </td> <td> Aprovado </td> </tr> <tr> <td> Joé </td> <td bgcolor="red"> Reprovado </td> </tr> <tr> <td> Marina </td> <td> Aprovada </td> </tr> </table> A Linguagem 56

57 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). Trocando a cor de fundo = red, do exemplo acima, pela cor #FD9886, temos o seguinte resultado:- <td bgcolor="#fd9886"> Reprovado </td> A Linguagem 57

58 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. <table border="1" cellpadding="20"> <tr bgcolor="#999999"> <th> Marca </th> <th> Carro </th> </tr> <tr> <td> Wolkswagen </td> <td> Fox, Gol, Polo </td> </tr> <tr> <td> Fiat </td> <td> Palio, Siena, Marea </td> </tr> <caption> Modelos de carros mais vendidos por fabricante</caption> </table> Resultado:- A Linguagem 58

59 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:- <table border="1" cellspacing ="20"> Resultado:- A Linguagem 59

60 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:- <table border="1" cellspacing ="15" cellpadding="20"> A Linguagem 60

61 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:- center Exemplo:- right Exemplo:- <th align="left"> <th align="center"> <td align="right"> A Linguagem 61

62 justify Exemplo:- <td align="justify "> A tabela abaixo tem as colunas alinhadas da seguinte forma:- Colunas de Cabeçalhos: Todas centralizadas e em Negrito (padrão da marca <th>) Nome: Alinhada naturalmente à esquerda Salário: Alinhada à direita Cargo: Centralizada Descrição: Centralizado Exemplo de tabela com os quarto alinhamentos:- Código da tabela exemplo:- <table border="1" cellpadding="20"> <tr> <th width ="100"> Nome</th> <th width ="100"> Salário </th> <th width ="140"> Cargo </th> <th> Descrição</th> </tr> <tr> A Linguagem 62

63 <td> Claudia</td> <td align ="right"> R$ 2.750,00</td> <td align ="center"> Gerente de RH </td> <td width ="310" align ="justify"> Responsável pelo Departamento Pessoal, Plano de Cargos e Salários, Treinamento e Qualificação Pessoal.</td> </tr> <tr> <td> Marcos </td> <td align ="right"> R$ 3.280,00</td> <td align ="center"> Gerente Comercial </td> <td width ="310" align ="justify"> Responsável pelos contatos com clientes, levantamento de pedidos, fechamento de vendas e faturamento da empresa.</td> </tr> <tr> <td> Roberto</td> <td align ="right"> R$ 7.970,00</td> <td align ="center"> Diretor Financeiro</td> <td width ="310" align ="justify"> Responsável pelo controle e planejamento financeiro da empresa dentre eles: Caixa, Tesouraria, Previsão Orçamentária e Controle Bancário.</td> </tr> </table> 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. A Linguagem 63

64 O atributo que define o alinhamento é o align e as opções são:- top Exemplo:- middle Exemplo:- bottom Exemplo:- <th valign="top"> <th valign="middle "> <td valign="bottom"> A tabela abaixo tem as colunas alinhadas da seguinte forma:- Colunas de Cabeçalhos: Todas centralizadas e em Negrito (padrão da marca <th>) 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:- <table border="2"> <tr> <th> Topo </th> <th> Meio </th> <th> Fundo </th> </tr> <tr> <td valign="top" height="50"> Conteúdo A Linguagem 64

65 </td> <td valign="middle" height="50"> Conteúdo </td> <td valign="bottom" height="50"> Conteúdo </td> </tr> </table> Agrupando elementos de tabelas As marcas <thead>, <tfoot>e <tbody> 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:- <table border="1"> Presencial</td> Continuada</td> <caption> Sua nota</caption> <tbody> <tr> </tr> <tr> <th>1</th> <td>avaliação <td align="center">8</td> <td align="center">6</td> <th>2</th> <td> Avaliação A Linguagem 65

66 </tr> <tr> </tr> </tbody> <thead> <tr> </tr> </thead> <tfoot> <tr> colspan="3">resultado:</th> </tr> </tfoot> </table> <td align="center">2</td> <td align="center">1,5</td> <th>3</th> <td> Comparecimento </td> <td align="center">75%</td> <td align="center">80%</td> <th>item</th> <th>elemento Avaliado</th> <th>nota Máxima</th> <th>nota Obtida</th> <th align ="right" <td>aprovado</td> A Linguagem 66

67 Listas Listas Ordenadas Uma lista ordenada 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. Sua criação se dá pela marca de abertura de listas ordenadas <ol> e em seguida pela criação dos itens de lista pela marca <li>. Cada Item de lista deve ter sua marca fechada </li>, bem como a lista </ol>. 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:- <strong>frutas Tropicais</strong> <ol> A Linguagem 67

68 </ol> <li>banana</li> <ol> <li>nanica</li> <li>maça</li> </ol> <li>laranja</li> <li>abacaxi</li> Resultado:- Atributos de Tipos de Estilo de Listas Numeradas A configuração de uma lista numerada é ser marcada por números. O Atributo TYPE permite definir o estilo numérico de seus itens. Os atributos possíveis são:- Atributo Estilo A Letras do Alfabeto em Maiúsculo A Letras do Alfabeto em Minúsculo I Números Romanos em Maiúsculo i Números Romanos em Minúsculo 1 Lista em ordem numérica (padrão) Também é possível misturar os tipos. Exemplo:- <strong>frutas Tropicais</strong> A Linguagem 68

69 <ol type="a" > <li>banana</li> <ol type="i" > <li>nanica</li> <li>maça</li> </ol> <li>laranja</li> <li>abacaxi</li> </ol> Listas Não Ordenadas A criação de listas ordenadas se dá pela marca de abertura de listas ordenadas <ul> e em seguida pela criação dos itens de lista pela marca <li>.. Cada Item de lista deve ter sua marca fechada </li>. No final, a lista também deve ser fechada pela marca </ul>. UL = Unordered List <strong>carros</strong> <ul> <li> Fiat </li> A Linguagem 69

70 </ul> Resultado:- <li> Ford </li> <li> GM </li> <li> VW </li> Atributos de Listas Não Ordenadas Listas não numeradas são marcadas por um determinado desenho. O Atributo TYPE permite definir o estilo numérico de seus itens. Os atributos existentes são:- Atributo Estilo circle Circulo Aberto square Quadrado Fechado Disc Losango Fechado <strong> Carros Populares </strong> <ul> <li> Fiat </li> <ul type="circle"> </ul> <li> Uno Mille </li> <li> Ford </li> A Linguagem 70

71 <ul type="disc"> </ul> <li> Ka </li> <li> GM </li> <ul type="square"> <li> Corsa</li> </ul> <li> VW</li> <ul > <li> Gol</li> </ul> </ul> Resultado (no navegador Internet Explorer):- Os bullets (marcas/ícones/sinais) que precedem os itens de uma lista não ordenada variam conforme o navegador A Linguagem 71

72 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 <dl> e em seguida pela criação dos termos da lista pela marca <dt>, e em seguida a criação da área de explicação do termo, pela marca de descrição da definição <dd>. Exemplo:- <dl> <dt>ibm PC</dt> <dl> <dd><strong>personal Computer</strong>. 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. </dd> <dt> AT</dt> <dd><strong> Advanced Technology </strong>. 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. </dd> </dl> Resultado:- A Linguagem 72

73 Frameset Dl = Definition List DT = Definition Term DD = Definition Data Frameset (Conjunto de Quadros) é utilizado quando se deseja trabalhar a tela do navegador 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:- A Linguagem 73

74 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). A Linguagem 74

75 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. A Linguagem 75

76 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., 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 <frameset>. 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 <frameset>, não é permitido a utilização da marca <body>, exceto quando ela for inserida dentro na marca <noframe>, que é utilizada para navegadores que não entendem quadros. Exemplo de quadros utilizando linhas:- <html> <frameset rows="10%, 10%, *"> <frame src="parte1.html "> <frame src="parte2.html "> <frame src="parte3.html "> </frameset> </html> Resultado do Layout da Página :- A Linguagem 76

77 Exemplo de quadros utilizando colunas:- <html> <frameset cols="10%, 10%, *"> <frame src="parte1.html "> <frame src="parte2.html "> <frame src="parte3.html "> </frameset> </html> Resultado do Layout da Página :- Na criação de quadros, deve-se prever o uso de navegadores que não tenham este recurso. Para isto, a marca <NOFRAME> deve ser utilizada. Exemplo:- <html> <frameset rows="10%, 10%, *"> <frame src="parte1.html "> <frame src="parte2.html "> A Linguagem 77

78 <frame src="parte3.html "> <noframes> <body>  </body> </noframes> </frameset> </html> Um dos erros mais comuns é quando o desenvolvedor insere a marca <frameset> dentro da marca <body>. As marcas em vermelho no exemplo abaixo estão incorretas:- <html> <body> <frameset cols="10%, 10%, *"> <frame src="parte1.html "> <frame src="parte2.html "> <frame src="parte3.html "> </frameset> </body> </html> 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 A Linguagem 78

79 Analisando o código O primeiro arquivo será o que contém a estrutura do conjunto de quadros. Vamos nomeá-lo como EXEMPLO.. 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 <html> <head> <title> Teste com Frameset</title> </head> <frameset cols="200,*"> <frame src="menu.html" name="menu"> <frame src="conteudo.html" name="conteudo"> A Linguagem 79

80 </frameset> </html> O arquivo de menu criará dois links na tela, na área conteúdo. Arquivo menu.html <html> <head> </head> <body> <a href="parte1.html" target="conteudo"> Opção 1 - Clique aqui</a> <br> <a href="parte2.html" target="conteudo"> Opção 2 - Clique aqui</a> <br> </body> </html> Vantagens e desvantagens no uso de frameset Algumas dificuldades relacionadas no uso de quadros são:- Voltar à página anterior (Uso do botão VOLTAR) 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 Tem se verificado cada vez menos o uso de frameset, principalmente pelo fato de que alguns dispositivos não o implementam. Apesar disto, é importante conhecer a forma pela qual ele podem ser criados, A Linguagem 80

81 caso seja necessário seu desenvolvimento.. 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:- <html> <head> </head> <body> <table width="788" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="50" height="22"> </td> <td width="738" valign="top" align="center"> Veja o Site da Unicid no quadro abaixo:</td> </tr> <tr> <td height="163"> </td> <td align="top"> <iframe src=" width="60%"> </iframe> </td> </tr> </table> </body> </html> Resultado:- A Linguagem 81

82 Formulários Um formulário permite a coleta de informações de um lado (cliente) para envio e provável armazenamento (no servidor). A Linguagem 82

83 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 do formulário e manipulam-na de várias formas:- Abrem o banco de dados destino e gravam as informações em suas tabelas Verificam a existência de usuários cadastrados Verificam a validação de uma informação (Exemplo: senha) 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 marca <form>. Exemplo:- <form name="frmcadastro" method="post" action=" Conteúdo a ser exibido... E elementos (de formulário) a serem exibidos na tela... </form> Propriedades da marca <form> name Define o nome do objeto de formulário. No exemplo acima, o nome dado ao 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) A Linguagem 83

84 action Define qual é a página destino dos dados. No exemplo acima, a página que irá tratar estes objetos é a enctype Propriedade onde se define o tipo de codificação usada no envio dos dados do formulário. Muito utilizado quando se deseja enviar (upload) arquivos. Exemplo:-... enctype ="multipart/form-data"... Métodos de Envio de Objetos de Formulários Existem dois métodos para envio de (elementos de) formulários:- GET É o primeiro método criado para envio de dados entre páginas da Internet. Caracteriza-se por enviar os dados (objetos e seus conteúdos) para a página destino utilizando a barra de endereços do navegador. Exemplo (O trecho de texto após o? é conhecido como query string):- nome=renata&idade=21&senha=123 Podemos verificar diversas restrições em seu uso:- A Linguagem 84

85 Limitação no envio de caracteres Isto ocorre em função do uso da barra de endereços do navegador (que geralmente permite enviar 128 caracteres). Isto impossibilita envio de grande quantidade de informações, bem como de arquivos. Menor Segurança Uma vez que as informações são facilmente percebidas pelos usuários, já que os dados são exibidos na barra de endereços, ele pode alterar os valores na barra de endereço e executar a página destino com outras informações. Impossibilidade de Envio de Arquivos Uma vez que este método não consegue enviar caracteres especiais (Exemplo: Códigos ASC 000, 255, etc.), o envio de arquivos não é possível, uma vez que eles costumam conter estes caracteres especiais. Vamos analisar novamente a query string??codigo=00057&nome=renata&idade=21&senha=123 Verificamos que na URL existe uma chamada à página gravar.php. Em seguida, temos o sinal de interrogação, que é usado para iniciar a string de pesquisa (query string). Temos então as seguintes informações e valores:- código e seu valor é nome e seu valor é Renata idade e seu valor é 21 senha e seu valor é 123 A página gravar.php receberá estes valores e provavelmente os gravará num banco de dados. POST Este é um método criado para superar as limitações do método GET. A Linguagem 85

86 Ele caracteriza-se por enviar para a página destino sem exibi-los na barra de endereços (como o método GET faz). Isto significa que o usuário não consegue enxergar quais são os dados que estão sendo enviados. Apenas o endereço de destino é exibido na tela. Permite o envio de grande quantidade de objetos, caracteres especiais e principalmente, o envio de arquivos. Para envio de arquivos, utilize o método POST e informe, na marca <FORM>, a propriedade enctype com o tipo de encadeamento desejado. Elementos de Formulários Diversos objetos podem ser criados dentro de um formulário, cada qual deles prevendo uma forma de se coletar a informação desejada. Isto facilita o processo de entrada de dados, pois muitas vezes queremos apenas que o usuário informe algo do tipo Sim/Não, ou em outros casos, escolha uma opção de uma série. Desta forma, os dados 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 certo espaço numa única linha. Sintaxe Básica:- <input type="text" name="nomedoobjeto"> Propriedades deste objeto Algumas propriedades do objeto caixa de texto são:- A Linguagem 86

87 Propriedade disabled="disabled" name="nome" maxlength="n" readonly= "readonly" size="n" value="texto" Descrição Desabilita a entrada do objeto de forma que o usuário não consegue alterar seu conteúdo. O usuário consegue visualizar este objeto e perceber que seu valor está desabilitado para alteração, 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 outro objeto na página (ou numa função Javascript). Determina n como sendo o número máximo de caracteres que pode ser inserido (digitado) neste objeto Trava o objeto, desabilita a entrada de dados, não permitindo sua edição pelo usuário. Determina como n o tamanho visual do elemento na tela Determina o valor (texto) inicial no objeto. Exemplos:- 1) Criação de uma de caixa de texto nomeada como endereco:- Digite seu endereço <input type="text" name="endereco"/> A Linguagem 87

88 2) Criação de uma de caixa de texto previamente preenchida com o texto São Paulo :- Cidade:<input type="text" name="nome" value="são Paulo"> 3) Criação de uma caixa de texto com tamanho 10 e que permite até 15 caracteres de digitação Nome:<input type="text" name="nome" maxlength="15" size="10" value="carlos Majer"> 4) Criação de uma caixa de texto o atributo readonly, o que não permite alteração de seu conteúdo Plano Anterior: <input type="text" name="planoanterior" readonly="readonly" value="60 minutos"> 5) 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 Plano Anterior: <input type="text" name=" planoanterior " disabled="disabled" value="60 minutos "> A Linguagem 88

89 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:- <input type="password" name=" NomeDoobjeto"> 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: <input type="password" name="senha"> Obs: Exemplo capturado quando o usuário estava digitando a senha Elemento Botão de Rádio Botões de rádio permitem ao usuário selecionar uma única opção, dentre diversas. 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:- <input type="radio" name=" NomeDoobjeto" value="valordoobjeto"> Primeira Opção a ser exibida <input type="radio" name=" NomeDoobjeto" A Linguagem 89

90 value="valordoobjeto"> Segunda Opção a ser exibida Propriedades deste objeto Algumas propriedades deste objeto são:- Atributo Descrição checked="checked" Determina um objeto pré-selecionado disabled="disabled" 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. name="nome" 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. value="valor" 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. <input type="radio" name="sexo" value="a"> Masculino <input type="radio" name="sexo" value="f"> Feminino 2)Uma seleção de botões com a opção VW selecionada e a opção FIAT desabilitada:- <input type="radio" name="marca" value="a">audi<br> <input type ="radio" name ="marca" value ="F" disabled="disabled">fiat<br> A Linguagem 90

91 <input type ="radio" name ="marca" value ="V" " checked = "checked">vw<br> 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:- <input type="checkbox" name="nomedoobjeto" value ="ValorDoObjeto"> Texto a ser exibido Propriedades deste objeto Algumas propriedades deste objeto são:- A Linguagem 91

92 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 s:- <input name=" s" type="checkbox" value="1">desejo receber s Neste exemplo, o programa que receber o formulário (definido em ACTION), ao avaliar o conteúdo da variável de nome s, 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 s:- 01 <html> 02 <head> 03 <title>documento Teste de Caixa de Checagem</title> 04 </head> <body> 07 <% A Linguagem 92

93 s=request(" s") if s="1" then response.write("você dediciu receber s <br>") end if %> </body> </html> O objetivo de um objeto do tipo caixa de checagem é ser avaliado pelo programa na página 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<br> <input type ="checkbox" name="telex" value="telex" disabled= "disabled">telex<br> <input type ="checkbox" name ="PC" value ="PC" checked="checked">computador<br> <input type ="checkbox" name ="Internet" value = "NET">Internet<br> <input type ="checkbox" name ="Calculadora" value ="Calculadora" checked="checked">calculadora<br> A Linguagem 93

94 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. <option value="volvo">fiat</option> <select name="carros"> <option value ="volvo">fiat</option> <option value ="saab" selected="selected">ford</option> <option value ="fiat" >GM</option> <option value ="audi">vw</option> </select> 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:- <select name="cargo"> <option value ="nada" selected="selected">escolha aqui</option> <optgroup label="direção"> <option value ="dc">diretor Comercial</option> <option value ="df">diretor Financeiro</option> A Linguagem 94

95 </optgroup> <optgroup label="gerencia"> <option value ="gerente">gerente</option> <option value ="chefe">chefia</option> </optgroup> <optgroup label="operacional"> <option value = "responsavel"> responsável </option> <option value ="operador">operador</option> </optgroup> </select> 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<br> <textarea rows="6" cols="30" name="obs" >Digite seu texto aqui</textarea><br> <input type="submit" name="submit" value ="Enviar"> A Linguagem 95

96 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. <fieldset> <legend>sexo</legend> <input type="radio" name="sexo" value ="M" checked="checked"> Masculino <input type="radio" name="sexo" value ="F">Feminino </fieldset> A Linguagem 96

97 Elemento Botão Em geral, botões são utilizados dentro de formulários para:- Submeter um formulário. 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:- <form action=" name="cad" method="post"> Nome: <input type="text" name="nome" id="nome"><br> <input type ="text" name =" " id=" "><br> <input type ="submit" value ="Enviar"> <input type ="reset" value ="Limpar"> </form> No exemplo abaixo, foi criado um botão que ao ser clicado exibe uma mensagem:- A Linguagem 97

98 <input type="button" value="clique-me" onclick="alert('fui Clicado!!!')"> Elemento LABEL A marca LABEL permite associar um trecho de texto a um elemento de formulário. <input type ="checkbox" name ="Item1" id ="Item1">Item 1<br> <input type ="checkbox" name ="Item2" id ="Item2">Item 2 <br><br> <input type ="radio" name ="botao" id ="tres" value ="Tres">Item 3<br> <input type ="radio" name ="botao" id ="quatro" value ="Quatro">Item 4<br> O comando label pode ser usado em diversos lugares:-<br> <label for ="Item2"><br> Clique aqui para alterar o Item 2 </label> <br> <label for ="quatro">clique aqui para alterar o Item 4 </label> A Linguagem 98

Exibir mais