Introdução ao Desenvolvimento WEB

Transcrição

1 2009 Introdução ao Desenvolvimento WEB Versão 3.1 Este documento aborda tópicos técnicos utilizados na criação da Interface Web: HTML, CSS e Javascript básico. Ideal para o iniciante ou desenvolvedor com conhecimento mediano do assunto 1: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2: <html> 3: <head> 4: <html xmlns=" 5: <meta http-equiv="content-type" content="text/html; charset=iso " /> 6: <title>minha primeira página web</title> 7: </head> 8: <body> 9: Oi mundo! 10: </body> 11: </html> Professor Carlos Majer Introdução ao Desenvolvimento WEB 2004 ~2009 Última revisão em 02/01/2009

2 Este material pertence a Carlos A. Majer, Professor Universitário de Tecnologia da Informação e encontra-se disponível em Licença de Uso Este trabalho está licenciado sob uma Licença Creative Commons Atribuição-Permitida a Criação de Obras Derivadas 2.5 Brasil. Para ver uma cópia desta licença, visite ou envie uma carta para Creative Commons, 559 Nathan Abbott Way, Stanford, California 94305, USA. Isto significa que você poderá copiar, distribuir, exibir e realizar trabalhos derivados desta obra com as seguintes restrições:- Você deverá sempre fazer referência ao autor (Ou seja, Eu) 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 contato@carlosmajer.com.br ou cmajer@uol.com.br ou cmajer@ig.com.br. Caso acredite que este material tenha lhe ajudado, envie um de agradecimento. Isto é o suficiente para motivar-me a continuar desenvolvendo este tipo de material e disponibilizá-lo para o público. Caso note algum erro ou tenha alguma sugestão, sinta-se à vontade para me contatar. Prof. Carlos Majer Página 2

3 Conteúdo Introdução à Internet... 6 Funcionamento da WEB... 6 Conectando-se na Grande Rede... 7 IPs fixos e IPs dinâmicos... 7 Números IPs e Resolução de Nomes... 7 URL Uniform Resource Locator... 8 Protocolo... 8 Host do domínio... 9 Nome do domínio :Número da Porta... 9 A página HTML Introdução Elementos de uma página web Extensão HTML ou HTM? Estrutura HTML (Marcas) Sobre as marcas HTML As marcas básicas Cabeçalho Parágrafos Quebras de Linha Comentários Trabalhando com texto A marca PRE Marcas de estilização de texto mais utilizadas Entidades : Caracteres Especiais Estilizando cores, fontes e tamanhos 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 Distanciamento das bordas Distanciamento entre as células Alinhamento Agrupando elementos de tabelas Listas Criando Listas Ordenadas Atributos de Tipos de Estilo de Listas Numeradas Criando Listas Não Ordenadas Listas de Definição Frameset (Conjunto de Quadros) Criando Frames Prof. Carlos Majer Página 3

4 Frame de Navegação Quadros Inseridos (In-Line Frames) Vantagens e desvantagens no uso de frameset Formulários Criando formulários Métodos de Envio de Objetos de Formulários Objetos de Formulários Elemento Caixa de Texto Elemento Senha Elemento Botões de Rádio Elemento Caixa de Verificação Elemento Lista de Seleção Elemento Área de Texto Elemento Conjunto de Campos Elemento Botão Elemento LABEL Elemento Upload de Arquivo HTML ou XHTML? CSS - Folha de Estilo em Cascata CSS - Cascade Style Sheet (Folha de Estilo em Cascata) O que é? Porque Surgiu? Quando surgiu? Definições e Conceitos Criando estilos Estrutura do estilo Especificando diversos atributos Atributo baseado em texto Agrupando definições de estilo Aplicando CSS Folha Externa Estilo Interno (na página HTML) Estilo Em Linha (in-line) Prioridade de Aplicação Criando Classes Delimitando o escopo de uma classe Blocos e Estrutura em Árvore Elementos de Bloco Elementos em nível de linha A propriedade background A propriedade background-color A propriedade background-image Medidas A propriedade display inline block list-item none Espaçamento Margens Posicionamento Posicionamento Estático (static) Posicionamento Relativo (relative) Posicionamento Absoluto (absoluto) Prof. Carlos Majer Página 4

5 Aplicações Criando Menus Estrutura do Menu Identificando visualmente os elementos da estrutura Estilizando o Menu Menus do Tipo Drop Down JAVASCRIPT Inserindo Comandos Javascript numa página WEB Inserindo Comandos Javascript num evento de elemento de página WEB Eventos de uma página WEB Trabalhando com textos e expressões do tipo caractere Utilização de variáveis no Javascript Expressões Matemáticas Operadores Matemáticos Operadores de Comparação Operadores de Associação Operadores Lógicos Criando Funções / Procedimentos em Javascript DOM - Document Object Model Introdução Acessando atributos via Javascriipt Consistindo Campos de Formulários Colocando o foco num determinado campo Criando Máscaras para edição de dados Identificando o objeto que iremos manipular Prof. Carlos Majer Página 5

6 Introdução à Internet Funcionamento da WEB A Internet foi criada com base na ARPANET, uma rede descentralizada de comunicações do Departamento de Defesa (DoD) dos Estados Unidos. Durante a guerra fria, contra a União Soviética, o DoD estava muito preocupado com a reação que poderia advir de um ataque dos soviéticos, que destruísse um dos elos (nós) de sua rede, e em função disto desabilitar as comunicações entre os quartéis generais de defesa. Em função disto, foi criada a rede experimental ARPANET que se utilizava de uma rede onde diversos computadores poderiam utilizar rotas alternativas para comunicar-se com outros computadores da rede. Sendo assim, caso uma rota fosse inviabilizada, os pacotes de informações (dados) utilizaram outras rotas para chegar a seus destinos. Neste 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 e outros elementos foram trabalhados no sentido de viabilizar e maximizar o funcionamento da rede. Com o tempo e o esfriamento da guerra fria, esta rede evoluiu e passou a ser utilizada também no meio acadêmico, para depois de certo tempo ser aberta para o público geral resultando naquilo que hoje chamamos de teia de alcance mundial (World Wide Web) ou Internet. Atualmente, a Internet caracteriza-se por ser uma grande rede de computadores, que os interligava através de um grande cabo imaginário conhecido como backbone, através do qual as pessoas se comunicam, trocando informações e dados em velocidades cada vez maiores. No momento da conexão de um computador com a rede, este recebe um número IP (Internet Protocol). Prof. Carlos Majer Página 6

7 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. Conectando-se na Grande Quando um usuário se conecta num provedor de acesso, como por exemplo, no IG, um de seus servidores gera 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. Sendo um dispositivo interligado na Net, 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 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 Unicid (junho de 2006): ping Disparando contra [ ] com 32 bytes de dados: Resposta de : bytes=32 tempo=38ms TTL=248 Resposta de : bytes=32 tempo=45ms TTL=248 Resposta de : bytes=32 tempo=24ms TTL=248 Resposta de : bytes=32 tempo=35ms TTL=248 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 = 24ms, Máximo = 45ms, Média = 35ms Este número IP pode ser mudado pelo administrador da rede da UNICID. Atualmente (Fev/2009), verifiquei que o código em uso é o 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 números. O serviço DNS (Domain Name Server) efetua a resolução de nomes, Prof. Carlos Majer Página 7

8 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 Unicid. Que tal tentar? URL Uniform Resource Locator Diversos serviços podem ser encontrados na Internet. Os mais comuns são:- Servidor WEB (Internet) Servidor FTP Servidor de s Servidor de Notícias Servidor de Banco de Dados Estes serviços podem ser encontrados em diversos computadores na Internet. Os computadores que provêm (servem) algum destes serviços são conhecidos como servidores. Em geral, este computador tem um software que disponibiliza o serviço (veja lista acima). URL significa Uniform Resource Locator, ou seja, Localizador de Recursos Uniformes 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 Uniform e é a formatação para se acessar um recurso específico, como por exemplo, uma página web. 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 o nome da língua pela qual as partes deverão se comunicar. Este protocolo define o que o programa que está solicitando o serviço deseja e como o servidor deve se comportar. Um exemplo bem prático disto é o do navegador solicitando uma página a um servidor. O usuário em seu navegador (cliente), tenta acessar uma página. Prof. Carlos Majer Página 8

9 Assim que o usuário teclar ENTER, o navegador, por padrão, insere o protocolo 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 responsabilidade (localizar e disponibilizar a página) para o software correto (software servidor web, muitas vezes o IIS Internet Information Services ou Apache). Sem o uso do protocolo, o servidor (computador) não saberia qual software executar 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 ao cliente (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. Como um exemplo disto, podemos afirmar que os navegadores (Internet Explorer, Mozila Firefox, etc) estão configurados para acessar um dispositivo (computador) na Internet e fazer uma solicitação na porta 80, que é a porta padrão da Internet. Alguns exemplos de portas:- Porta Uso 20 e 21 Serviço FTP 23 Telnet 25 SMTP Simple Mail Transfer Protocol - Uso 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 s 119 NNTP Network News Transfer Protocol Para recebimento de Notícias Exemplo de endereçamento de um recurso:- Prof. Carlos Majer Página 9

10 Inicialmente temos o protocolo Em seguida temos a informação de host e do domínio de destino Em seguida temos a porta 8080 Em seguida temos o nome da Pasta dentro do domínio. pastavirtual/majer E finalmente o recurso desejado, que é o arquivo:- historia.html Prof. Carlos Majer Página 10

11 A página HTML Introdução HTML significa Hyper Text Markup Language, que traduzida para o português significa Linguagem de Marcação de Hipertexto. Esta linguagem permite a utilização de um conjunto de comandos para exibição de conteúdo e formatação de layout de páginas para Internet. Os arquivos do tipo HTML são arquivos textos, que podem ser abertos e editados pelo Bloco de Notas ou qualquer programa editor de textos simples. Ao examinarmos o conteúdo de um arquivo HTML, notamos a existência de comandos (as marcas), que determinam a maneira pela qual a página web será interpretada por um navegador (Internet Explorer, Mozilla Firefox, Safári, Opera, etc.). As marcas podem utilizar atributos, que são informações específicas de como o comando (marca) deverá ser executado. Em função de seu formato aberto e não proprietário, este tipo de arquivo pode ser visualizado em diversas plataformas dentre elas Windows, Linux, Unix, Macintosh, etc. Elementos de uma página web Uma página web pode conter diversos tipos de elementos:- Textos: É 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. Imagens: 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 e principalmente as animações feitas em FLASH. Elementos de Formulário: Os formulários representam uma interface entre o site e o usuário, solicitando informações do usuário com diversos intuitos dentre eles o de se cadastrar o usuário no site para receber informações, inserir pedidos de informações específicas, efetuar buscas, efetuar pedidos de compras, etc. Arquivos de Áudio: Os arquivos de áudio colocam-se como uma outra maneira para se melhorar a interface com o usuário e chamar a atenção sobre determinado site. Arquivos 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. Links: Os links são 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). Extensão HTML 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. Prof. Carlos Majer Página 11

12 Estrutura HTML (Marcas) Uma página html é delimitada pelas marcas:- <html> </html> Dentro dela temos uma área de cabeçalho, onde podemos inserir alguns comandos de configuração, como por exemplo, o título da página. Esta área é 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> As marcas HTML ficam contidas entre os sinais de < menor que e > maior que. Abaixo notamos um exemplo da estrutura em código HTML de uma página web:- E em seguida a sua apresentação num navegador:- Prof. Carlos Majer Página 12

13 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 cachê, que é uma 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 cachê (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. Sobre as marcas HTML Ciclo de vida Através da continua evolução da tecnologia, certas marcas HTML 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. A própria criação e uso do CSS (Folha de Estilos em Cascata abordado adiante, neste documento) é um exemplo disto, na medida em que seus comandos acabam sendo recomendados para utilização, no lugar de algumas marcas, para efeitos de apresentação do conteúdo das páginas HTML. O ciclo de vida das marcas HTML é 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 HTML. Depreciação 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. Obsoleta 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 tecnologias é comum o fato das mesmas continuarem a ser utilizadas por um bom tempo, até que a comunidade absorva e utilize com regularidade a nova tecnologia. Prof. Carlos Majer Página 13

14 INTRODUÇÃO AO DESENVOLVIMENTO WEB VERSÃO 3.1 As definições sobre padrões Internet são efetuadas pelo W3C World Wide Web Consortium. As marcas básicas Cabeçalho Os cabeçalhos são definidos através das marcas <h1> representando a fonte maior, até <h6> para se definir a fonte menor. 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> Uma linha antes e após o cabeçalho é sempre inserido pelo HTML. Prof. Carlos Majer Página 14

15 INTRODUÇÃO AO DESENVOLVIMENTO WEB VERSÃO 3.1 Parágrafos Os parágrafos são definidos através da marca <p>. Exemplo:- <p>eu sou um parágrafo</p> <p>eu sou outro parágrafo</p> Uma linha antes e após o cabeçalho é sempre criada na utilização do parágrafo. O navegador ignora o número de espaços repetidos ou pulos de linha manual de seu texto (ENTER) trocando estas ocorrências por um único espaço, ou seja, se numa posição do seu texto você tiver 10 espaços no texto, ou tenha teclado cinco vezes a tecla <ENTER>, somente será exibido um espaço no lugar Quebras de Linha Quebras de linha são definidas através de uma marca <br>. Ela deve ser utilizada quando se deseja inserir uma nova linha, levando o conteúdo para a próxima linha, sem iniciar um novo parágrafo. Exemplo:- <p>o conteúdo desta linha foi <br>quebrado para a linha <br>de baixo</p> Podemos dizer que atualmente, não sabemos em que dispositivo um site pode ser aberto. Pode ser um computador, Palmtop ou SmartPhone. Querer forçar um layout através do uso de parágrafos, espaços e quebra de linhas pode não gerar o resultado esperado. É o navegador quem verifica o tamanho da resolução de vídeo e adapta o conteúdo a ser exibido, ajustando o texto e demais elementos conforme o tamanho da janela. 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 navegadores diferentes. Comentários Comentários podem ser inseridos no HTML através do uso das marcas  Exemplo:-  Prof. Carlos Majer Página 15

16 Trabalhando com texto Utilizar texto dentro de uma página HTML é bem simples. É digitar o texto abaixo da marca body e o mesmo aparece no navegador, quando a página é carregada. Verificamos também que podemos inserir um trecho de texto dentro de um parágrafo (marca <p>), como um cabeçalho (marcas <h1> a <h6>) e até forçar a quebra de linha (marca <br>). 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:- <body> <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> </body> Resultado:- Prof. Carlos Majer Página 16

17 INTRODUÇÃO AO DESENVOLVIMENTO WEB VERSÃO 3.1 Marcas de estilização de texto mais utilizadas Marca Descrição small Diminui a fonte do texto big Aumenta a fonte do texto em Enfatiza um texto. * Equivalente à marca <i> strong Enfatiza um texto com maior intensidade (Negrito). * Equivalente à marca <b> sub Exibe o texto em formato subescrito sup Exibe o texto formato superescrito ins Utilizado para marcar um trecho de texto que foi inserido numa nova versão de um documento del Utilizado para marcar um trecho de texto que foi eliminado de uma versão anterior de um documento * Equivalente às marcas <strike> e <s> Exemplos:- <body> Texto Normal,<small>Texto Menor</small>,<em>Texto Enfatizado</em> <br> <strong>texto em Negrito</strong> </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> </body> Resultado:- Prof. Carlos Majer Página 17

18 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. Tabela de Entidades mais comuns Caractere Uso Exemplo Caractere Uso 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 Ú Ú Ã ã À À 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 <font>. Esta marca funciona com os seguintes atributos:- A palavra <font color="blue">céu</font> está em cor azul. Prof. Carlos Majer Página 18

19 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:- <html> <head> <title>algumas variações do azul - HTML</title> </head> <body> <table> <td>azul - Navy</td> <td width="60" bgcolor="navy"> </td> <td>azul - Acqua</td> <td bgcolor="acqua"> </td> <td>azul - código #0000FF</td> <td bgcolor="#0000ff"> </td> <td>azul - código #112D77</td> <td bgcolor="#112d77"> </td> <td>azul - código #6141FA</td> <td bgcolor="#6141fa"> </td> </table> </body> </html> Resultado:- Prof. Carlos Majer Página 19

20 INTRODUÇÃO AO DESENVOLVIMENTO WEB VERSÃO 3.1 Tabela de Cores RGB <html> <head> <title>tabela de Cores</title> </head> <body> <table border="1" bordercolor="#cccccc"> <th> Nome </th> <th> Número RGB </th> <th> Exemplo </th> <td> White </td> <td>>#ffffff </td> <td bgcolor="#ffffff " width="20"> </td> <td> Black </td> <td>># </td> <td bgcolor="# " width="20"> </td> <td> Gray </td> <td>># </td> <td bgcolor="#808080" width="20"> </td> <td> Silver </td> <td>>#cococo</td> <td bgcolor="#cococo" " width="20"> </td> <td> Red </td> <td>>#ff0000</td> Prof. Carlos Majer Página 20

21 <td bgcolor="#ff0000" width="20"> </td> <td> Purple </td> <td>>#800080</td> <td bgcolor="#800080" width="20"> </td> <td> Fuchsia </td> <td>>#ff00ff</td> <td bgcolor="#800080" width="20"> </td> <td> Pink </td> <td>>#ffc0cb</td> <td bgcolor="#ffc0cb" width="20"> </td> <td> Maroon </td> <td>>#800000</td> <td bgcolor="#800000" width="20"> </td> <td> Green </td> <td>>#008000</td> <td bgcolor="#008000" width="20"> </td> <td> Olive </td> <td>>#808000</td> <td bgcolor="#808000" width="20"> </td> <td> Lime </td> <td>>#00ff00</td> <td bgcolor="#00ff00" width="20"> </td> <td> Teal </td> <td>>#008080</td> <td bgcolor="#008080" width="20"> </td> <td> Yellow </td> <td>>#ffff00</td> <td bgcolor="#ffff00" width="20"> </td> <td> Blue </td> Prof. Carlos Majer Página 21

22 <td>>#0000ff</td> <td bgcolor="#0000ff" width="20"> </td> <td> Navy </td> <td>>#000080</td> <td bgcolor="#000080" width="20"> </td> <td> Acqua </td> <td>>#00ffff</td> <td bgcolor="#00ffff" width="20"> </td> </table> </body> </html> Resultado:- 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:- <html> Prof. Carlos Majer Página 22

23 <head> <title>propriedade SIZE da marca FONT </title> </head> <body> <font size="1">tamanho 1, </font> <font size="2">tamanho 2, </font> <font size="3">tamanho 3, </font> <font size="4">tamanho 4, </font> <font size="5">tamanho 5, </font> <font size="6">tamanho 6, </font> <font size="7">tamanho 7, </font> </body> </html> 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. <html> <head> <title>propriedade SIZE da marca FONT </title> </head> <body> <font face =" Arial, Helvetica, sans-serif "> Família Arial, Helvetica, Sans-serif </font> <br> <font face =" Times New Roman, Times, serif"> Família Times New Roman, Times, serif </font> <br> <font face =" Courier New, Courier, mono"> Família Courier New, Courier, mono </font> <br> <font face =" Georgia, Times New Roman, Times, serif"> Família Georgia, Times New Roman, Times, serif </font> <br> <font face =" Verdana, Arial, Helvetica, sans-serif"> Família Verdana, Arial, Helvetica, sans-serif</font> <br> <font face =" Geneva, Arial, Helvetica, sans-serif"> Família Geneva, Arial, Helvetica, sans-serif</font> </body> </html> Resultado:- Prof. Carlos Majer Página 23

24 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 <img> da seguinte forma:- <img src =" Simbolo2000.jpg"> Prof. Carlos Majer Página 24

25 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:- <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:- 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. Prof. Carlos Majer Página 25

26 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. 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 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):- <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ê 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

27 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 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

28 INTRODUÇÃO AO DESENVOLVIMENTO WEB VERSÃO 3.1 O link 4 Descrição de Caso de 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 em duas partes:- Prof. Carlos Majer Página 28

29 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:- 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 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> Prof. Carlos Majer Página 29

30 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 ( Exibir uma imagem na página HTML é um comando relativamente simples. Neste caso, seria algo assim:- <img src =" imagens/dubrovnik.jpg"> 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: <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. 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 HTML 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 =" Prof. Carlos Majer Página 30

31 <img src =" </a> 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 HTML 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... 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.). 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> </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> Prof. Carlos Majer Página 31

32 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:- Resultado:- <table border="1"> <th rowspan="3">professores</th> <th>projeto de Interfaces</th> <th>sistemas</th> <td>carlos</td> <td>tatiana</td> <td>fernando</td> <td>jadir</td> </table> 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"> <th colspan="2">projeto de Interfaces</th> <th colspan="2">sistemas</th> Prof. Carlos Majer Página 32

33 </table> <td>carlos</td> <td>tatiana</td> <td>fernando</td> <td>jadir</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"> Determinando a cor das bordas Podemos determinar a cor da borda utilizando o atributo bordercolor. Exemplo:- <table border="3" border-color="blue"> Prof. Carlos Majer Página 33

34 Alguns efeitos interessantes podem ser conseguidos com isto:- <table border="25" border-color="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:- <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"> <th> Cabeçalho </th> <th> Cabeçalho 2</th> <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> </table> Prof. Carlos Majer Página 34

35 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:- <table border="1"> <tr bgcolor="yellow"> <th> Marca </th> <th> Uso </th> <td> <h1> a <h6></td> <td> Marcas de Início de Cabeçalho</td> <tr bgcolor="cyan"> <td><p></td> <td> Marca de início de parágrafo </td> <td> <table> </td> <td> Marcas de Início de Tabela</td> <tr bgcolor="cyan"> <td><tr></td> <td> Table Row Inicia uma linha numa tabela</td> <td> <td> </td> <td> Table Data Inicia uma coluna numa tabela</td> </table> Prof. Carlos Majer Página 35

36 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"> <th> Aluno </th> <th> Resultado </th> <td> João </td> <td> Aprovado </td> <td> Joé </td> <td bgcolor="red"> Reprovado </td> <td> Marina </td> <td> Aprovada </td> </table> 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

37 Trocando a cor de fundo = red, do exemplo acima, pela cor #FD9886, temos o seguinte resultado:- <td bgcolor="#fd9886"> Reprovado </td> 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> <td> Wolkswagen </td> <td> Fox, Gol, Polo </td> <td> Fiat </td> <td> Palio, Siena, Marea </td> <caption> Modelos de carros mais vendidos por fabricante</caption> </table> Resultado:- Prof. Carlos Majer Página 37

38 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:- <table border="1" cellspacing ="20"> 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

39 <table border="1" cellspacing ="15" cellpadding="20"> 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: <th align="left"> center Exemplo: <th align="center"> right Exemplo: <td align="right"> 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:- Prof. Carlos Majer Página 39

40 Código da tabela exemplo:- <table border="1" cellpadding="20"> <th width ="100"> Nome</th> <th width ="100"> Salário </th> <th width ="140"> Cargo </th> <th> Descrição</th> <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> <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> <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> </table> Prof. Carlos Majer Página 40

41 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: <th valign="top"> middle Exemplo: <th valign="middle "> bottom Exemplo: <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"> <th> Topo </th> <th> Meio </th> <th> Fundo </th> <td valign="top" height="50"> Conteúdo </td> <td valign="middle" height="50"> Conteúdo </td> <td valign="bottom" height="50"> Conteúdo </td> </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"> <caption> Sua nota</caption> Prof. Carlos Majer Página 41

42 </table> <tbody> </tbody> <thead> </thead> <tfoot> </tfoot> <th>1</th> <td>avaliação Presencial</td> <td align="center">8</td> <td align="center">6</td> <th>2</th> <td> Avaliação Continuada</td> <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" colspan="3">resultado:</th> <td>aprovado</td> Prof. Carlos Majer Página 42

43 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 <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> <li>banana</li> <ol> <li>nanica</li> <li>maça</li> </ol> <li>laranja</li> <li>abacaxi</li> </ol> FIM 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:- Prof. Carlos Majer Página 43

44 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> <ol type="a" > <li>banana</li> <ol type="i" > <li>nanica</li> <li>maça</li> </ol> <li>laranja</li> <li>abacaxi</li> </ol> FIM Criando 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> <li> Ford </li> <li> GM </li> <li> VW </li> </ul> FIM Prof. Carlos Majer Página 44

45 Resultado:- Atributos de Tipos de Estilo de Listas Não Numeradas 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" > <li> Uno Mille </li> </ul> <li> Ford </li> <ul type="disc" > <li> Ka </li> </ul> <li> GM </li> <ul type="square" > <li> Corsa</li> </ul> </ul> FIM <li> VW</li> <ul > <li> Gol</li> </ul> Resultado (no navegador Internet Explorer):- Prof. Carlos Majer Página 45

46 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 <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:- Dl = Definition List, dt = Definition Term, dd = Definition Data Prof. Carlos Majer Página 46

47 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

Exibir mais